/* ========================================================================== Mantel Insights — Basis-Styles -------------------------------------------------------------------------- Wird zweimal geladen: Frontend -> wp_enqueue_style() in functions.php, Cache-Busting via filemtime() Editor -> add_editor_style() in functions.php WordPress schreibt beim Laden in den Editor jeden `:root`- und `body`-Selektor auf `.editor-styles-wrapper` um. Deshalb hier bewusst `:root` verwenden und NICHT von Hand auf `.editor-styles-wrapper` scopen — das wuerde doppelt greifen. REGEL: Kein Hex-Wert in dieser Datei. Farben, Abstaende und Breiten kommen ausschliesslich aus den Presets der theme.json. Eine Quelle, zwei Leser. Ein `--foreground: #000` gegen ein `#001D2D` in der theme.json faellt erst dort auf, wo mit Alpha gearbeitet wird — und dann ueberall gleichzeitig. ========================================================================== */ /* ========================================================================== 1 — Preflight, ausschliesslich der strukturelle Teil -------------------------------------------------------------------------- Die typografische Meinung (h1-h6 { font-size: inherit }, a { color: inherit }, ul { list-style: none }) gehoert hier NICHT hin. Global gesetzt zerlegt sie jeden redaktionellen Fliesstext, und `revert` holt das nicht zurueck: es springt auf die vorherige Cascade-Origin, und theme.json ist selbst Author-Origin. Wer so einen Reset braucht, scopet ihn auf die Komponente. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } img, picture, video, canvas { max-width: 100%; height: auto; } /* Nur dekorative Icons blocken. Ein globales svg { display: block } wuerde Inline-Icons im Fliesstext aus der Zeile heben. */ .mi-icon { display: block; flex: none; } /* ========================================================================== 2 — Token-Aliasse -------------------------------------------------------------------------- Reine Verweise, keine Werte. Kuerzt `var(--wp--preset--color--sage-deep)` auf `var(--mi-sage-deep)` und haelt trotzdem die theme.json als Quelle. ========================================================================== */ :root { --mi-blue-deep: var(--wp--preset--color--blue-deep); --mi-blue: var(--wp--preset--color--blue); --mi-blue-light: var(--wp--preset--color--blue-light); --mi-blue-pale: var(--wp--preset--color--blue-pale); --mi-sage: var(--wp--preset--color--sage); --mi-sage-deep: var(--wp--preset--color--sage-deep); --mi-sage-pale: var(--wp--preset--color--sage-pale); --mi-ink: var(--wp--preset--color--gray-900); --mi-muted: var(--wp--preset--color--gray-600); --mi-line: var(--wp--preset--color--gray-300); --mi-surface: var(--wp--preset--color--gray-100); --mi-white: var(--wp--preset--color--white); --mi-amber: var(--wp--preset--color--amber); --mi-font-sans: var(--wp--preset--font-family--sans); --mi-font-serif: var(--wp--preset--font-family--serif); --mi-font-mono: var(--wp--preset--font-family--mono); /* Breiten kommen aus settings.layout der theme.json, nicht von hier. */ --mi-content: var(--wp--style--global--content-size); --mi-wide: var(--wp--style--global--wide-size); --mi-radius: 5px; /* am Demo gemessen: calc(--radius - 1px) nach shadcn-Konvention */ --mi-radius-sm: 3px; --mi-border: 1px solid var(--mi-line); --mi-sticky-top: 6rem; /* Abstand unter dem Sticky-Header */ --mi-ease: cubic-bezier(0.4, 0, 0.2, 1); /* Fokusring: kein Alias. Siehe DOKU F-31. Ein `--mi-focus: var(--wp--custom--mi-focus)` an dieser Stelle waere eine Falle: Der Wert wird auf `:root` **einmal** eingesetzt und danach als fertige Farbe vererbt. Eine dunkle Sektion, die `--wp--custom--mi-focus` neu setzt, erreicht ihn nicht mehr. Die Regel unten liest deshalb direkt den Token. */ } /* ========================================================================== 3 — Basis ========================================================================== */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-optical-sizing: auto; /* DM Sans ist variabel, Achse opsz 9-40 */ } /* Umbruchqualitaet, keine typografische Meinung — aendert keine Groessen, keine Farben, keine Listenpunkte. Darf deshalb global stehen. */ h1, h2, h3, h4 { text-wrap: balance; } p, li { text-wrap: pretty; } ::selection { background: var(--mi-sage-pale); color: var(--mi-ink); } /* Sichtbarer Fokus ueberall, auch wo theme.json keine Elements-Definition hat. Gemessen: sage auf weiss 2.28:1 (unter den 3:1 aus WCAG 2.2 SC 1.4.11), sage-deep auf weiss 4.59:1, sage auf blue-deep 6.05:1. Deshalb sage-deep als Standard und sage in dunklen Sektionen — den Wechsel macht der Sektionsstil, indem er `--wp--custom--mi-focus` neu setzt. Der Token wird hier direkt gelesen, damit er je Element aufgeloest wird (F-31). */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--wp--custom--mi-focus); outline-offset: 2px; border-radius: var(--mi-radius-sm); } /* Keine eigene Sprungmarke. WordPress setzt bei Block-Themes ueber wp_enqueue_block_template_skip_link() selbst eine samt Ziel und Inline-Styling. Eine zweite waere ein doppelter erster Tabstopp — fuer Tastaturnutzung schlechter als keine. */ /* ========================================================================== 4 — Flow-Reset -------------------------------------------------------------------------- Eine core/group traegt `is-layout-flow`, auch wenn sie per CSS auf flex oder grid steht. Die Core-Regel `:where(.is-layout-flow) > * + *` setzt dann ab dem zweiten Kind `margin-block-start: 24px`. In einer Flex-Reihe ist der Abstand sinnlos und schiebt eine Spalte nach unten. Jede Gruppe, die per CSS auf flex/grid gestellt wird, bekommt zusaetzlich `mi-flow-reset`. Die laufende Liste dieser Gruppen steht in DOKU.md. ========================================================================== */ .mi-flow-reset > * { margin-block: 0; } /* ========================================================================== 5 — Sticky -------------------------------------------------------------------------- Ein sticky-Element bewegt sich nur innerhalb seines Elternelements. Steht auf dem Flex-Container `align-items: flex-start`, ist die Spalte genau so hoch wie ihr Inhalt — es gibt keine Strecke zum Kleben. Der uebliche Verdacht (`overflow` auf einem Vorfahren) ist es meistens nicht. Deshalb zwei Klassen: die Spalte wird gestreckt, das Element klebt. ========================================================================== */ .mi-sticky-col { align-self: stretch; } .mi-sticky { position: sticky; top: var(--mi-sticky-top); } /* ========================================================================== 6 — Sektionen ========================================================================== */ .mi-section { padding-block: var(--wp--preset--spacing--70); } .mi-section--tight { padding-block: var(--wp--preset--spacing--50); } /* Die Farbgebung der Sektionen steht nicht mehr hier. „Dunkle Sektion" und „Salbei-Flaeche" sind seit Schritt 8 Section Styles: `styles/mi-section-dark.json` und `styles/mi-section-soft.json`. Sie faerben Hintergrund, Text, Ueberschriften, h6, Links und Separator ueber die theme.json und setzen die `--wp--custom--mi-*`-Tokens, an denen Buttons, Fokusring, Eyebrow, Akzentzeile und Lead haengen. Was hier steht, ist Geometrie — und die Flaeche, fuer die es keinen Sektionsstil gibt (`--surface`). Siehe DOKU E-11. */ /* Die helle Flaeche ist seit Schritt 9 ein Sektionsstil (`styles/mi-section-surface.json`). Hier steht dazu nichts mehr. */ /* ========================================================================== 7 — Wiederkehrende Textbausteine ========================================================================== */ /* Eyebrow: "OT/ICS Security · ISO 27001 · Strategischer Coach" sage-deep (#5E7C6C) traegt auf Weiss 4.59:1 und damit die 4.5 fuer normalen Text. Auf den getoenten Flaechen reicht es nicht mehr: 4.03 auf sage-pale, 4.27 auf gray-100. Dort uebernimmt gray-600 (5.16 bzw. 5.46). Siehe DOKU E-12. Den Wechsel machen die Sektionsstile ueber `--wp--custom--mi-eyebrow-ink`. Hier steht nur der Verbraucher, nicht die Fallunterscheidung. */ .mi-eyebrow { font-family: var(--mi-font-mono); font-size: var(--wp--preset--font-size--x-small); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--custom--mi-eyebrow-ink); margin-block: 0; } /* Zweite Headline-Zeile: "Menschen entscheiden." in Salbei-Kursiv */ .mi-accent-line { display: block; font-style: italic; color: var(--wp--custom--mi-accent-ink); } .mi-lead { font-size: var(--wp--preset--font-size--large); /* 1.625 am Demo gemessen: 29.25px auf 18px. */ line-height: 1.625; color: var(--wp--custom--mi-lead-ink); } /* Technisches Label, z.B. im Terminal-Hero oder an Datenpunkten */ .mi-label { font-family: var(--mi-font-mono); font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.05em; text-transform: uppercase; color: var(--mi-muted); } /* ========================================================================== 8 — Button-Varianten -------------------------------------------------------------------------- Registriert als core/button-Block-Styles (siehe functions.php), damit sie im Editor als "Stil" auswaehlbar sind statt als Klasse im Markup zu haengen. Die Grundform (Farbe, Padding, Radius) steht in der theme.json unter elements.button — hier nur die Abweichungen. OFFEN: Die exakte Geometrie des Perimeter-CTA wird in Schritt 5 am gerenderten Demo gemessen, nicht aus dem Bundle abgeleitet. ========================================================================== */ /* Farben und Zustaende (:hover, :focus-visible, :active) stehen seit WP 7.1 in der theme.json unter styles.blocks.core/button.variations. Hier steht nur noch, was theme.json strukturell nicht kann: 1. Uebergaenge — `transition` ist keine theme.json-Eigenschaft. Ohne diese Zeilen springen die Zustaende hart um. theme.json liefert den Zustand, die CSS die Zeit. 2. Pseudo-Elemente — ::before/::after gibt es in theme.json nicht. Der Ghost-Umschlag auf dunklem Grund stand hier bis Schritt 8. Er liegt jetzt im Sektionsstil: `styles/mi-section-dark.json` setzt `--wp--custom--mi-ghost-ink` und `--mi-ghost-on`, die Variante in der theme.json liest sie. Vererbung statt Kaskade — siehe DOKU F-28. ACHTUNG Spezifitaet: theme.json rahmt jede Variation in `:root :where(...)` — Spezifitaet 0-1-0. Jede Klassenregel in dieser Datei schlaegt sie. Deshalb hier bewusst KEINE Farbe wiederholen, sonst gewinnt still die CSS und die theme.json-Werte sind Dekoration. */ .wp-block-button.is-style-mi-ghost > .wp-element-button { transition: background-color 0.2s var(--mi-ease), color 0.2s var(--mi-ease), border-color 0.2s var(--mi-ease); } /* Die Hero-Schaltflaechen folgen der Demo, nicht dem Sektionsstil. `is-style-mi-section-dark` faerbt Buttons auf Dunkel salbeigruen. Im Hero der Demo sind sie blau gefuellt mit weisser Schrift — gemessen `oklch(0.464 0.0721 236.2)`, das ist blue. Umdefiniert wird der Token (F-31), nicht die Regel. Die zweite Schaltflaeche braucht zwei verschiedene Farben: Rand in Salbei mit 45 % Deckung, Schrift in blue-pale. Ein einzelner Ghost-Token kann das nicht ausdruecken, deshalb hier ausnahmsweise zwei Eigenschaften direkt — die Werte stehen trotzdem als Presets da, nicht als Hexzahlen. */ .mi-hero { --wp--custom--mi-btn-bg: var(--wp--preset--color--blue); --wp--custom--mi-btn-fg: var(--wp--preset--color--white); --wp--custom--mi-btn-hover-bg: var(--wp--preset--color--blue-light); --wp--custom--mi-btn-hover-fg: var(--wp--preset--color--white); } .mi-hero .wp-block-button.is-style-mi-ghost > .wp-element-button { border-color: color-mix(in srgb, var(--mi-sage) 45%, transparent); color: var(--mi-blue-pale); } /* Das kleine Abzeichen im Hero-CTA. Am Demo gemessen: 10px DM Mono in Salbei, links eine Trennlinie in Weiss mit 25 % Deckung, 12px Abstand dahinter. `aria-hidden` im Markup, damit der zugaengliche Name der Schaltflaeche „Erstgespräch buchen" bleibt und nicht „Erstgespräch buchen Secure" lautet — das Abzeichen ist Schmuck, keine Auskunft. */ .mi-btn__marke { border-inline-start: 1px solid color-mix(in srgb, var(--mi-white) 25%, transparent); color: var(--mi-sage); font-family: var(--mi-font-mono); font-size: 10px; letter-spacing: 0.12em; margin-inline-start: 4px; padding-inline-start: 12px; text-transform: uppercase; } /* Das Intro der Startseite teilt sich halb und halb, nicht 1.15 zu 0.85. Die Heroes behalten ihre Aufteilung — `mi-hero__split` bleibt unberuehrt. Am Demo gemessen: zwei Spalten a 544px bei 1152px Breite, Abstand 64px. */ .mi-intro__split { align-items: center; display: grid; gap: 4rem; grid-template-columns: 1fr; } @media (min-width: 860px) { .mi-intro__split { grid-template-columns: 1fr 1fr; } } /* Kein Perimeter-Stil mehr (DOKU E-07). Der Kickoff nannte den Primaer-CTA "Perimeter-CTA", und ich hatte daraus einen abgesetzten Salbei-Rahmen als ::after gebaut. Die Messung am gerenderten Demo zeigt: So einen Rahmen gibt es nicht. Gemessen am Hero-CTA: Padding 14/24 · Radius 5px · 14px/500 · gefuellt, kein Rand, kein Schatten. Das ist exakt der Standardbutton aus der theme.json. Ein eigener Blockstil dafuer waere eine Kopie ohne Unterschied. Der Stil ist deshalb ersatzlos entfallen. Bleibt nur Ghost. */ /* ========================================================================== 8b — Header und Footer -------------------------------------------------------------------------- Die Geometrie kommt aus dem Core-Layout der Blocks (flex/constrained), nicht von hier — siehe DOKU E-14. Deshalb steht in diesem Abschnitt nur, was der Block-Editor nicht ausdruecken kann. Kein `mi-flow-reset` noetig: alle Reihen sind `is-layout-flex`, die Core-Regel `:where(.is-layout-flow) > * + *` greift dort gar nicht. ========================================================================== */ /* --- Kopfzeile ----------------------------------------------------------- Eine Fassung fuer alle Seiten, dunkel, oben klebend. Die Farben kommen aus `is-style-mi-section-dark` am Gruppenblock, die Geometrie aus dem Core-Layout (E-14). Hier steht nur, was beides nicht kann. */ /* Sticky gehoert an die Huelle des Template-Parts, nicht an die Gruppe darin. Ein klebendes Element bewegt sich nur innerhalb seines Elternelements (F-04) — die Gruppe ist genau so hoch wie ihre Huelle und haette keine Strecke. `.wp-site-blocks` ist die ganze Seite; dort ist Weg. */ .wp-site-blocks > header { position: sticky; top: 0; z-index: 50; } /* Kein weisser Streifen zwischen Kopfzeile und Inhalt. Core setzt auf die direkten Kinder von `.wp-site-blocks` den blockGap als `margin-block-start` — 24px. Solange die Kopfzeile hell war, ging der Streifen in ihr auf; auf dunklem Grund steht er als weisse Kante zwischen Header und Hero. Gemessen: Header endet bei 96px, `main` beginnt bei 120px. Cores Regel steht in `:where(.wp-site-blocks) > *` und hat damit Spezifitaet 0-0-0; eine Klasse und ein Element reichen zum Ueberstimmen. Der Abstand vor dem Footer bleibt unberuehrt. */ .wp-site-blocks > header + * { margin-block-start: 0; } /* Der Header traegt den globalen Seitenrand nicht. `useRootPaddingAwareAlignments` gibt jeder Gruppe mit `has-global-padding` den Rand aus `styles.spacing.padding` — hier `clamp(1.25rem, 5vw, 2.5rem)`. Fuer Inhaltsabschnitte ist das richtig. Der Header hat aber seinen eigenen Innenabstand von 20px an der Leiste, und beide zusammen ergeben einen Rand, den die Demo nicht hat. Gemessen, linke Kante des Logos, Theme gegen Demo: 1440px 164 : 164 (gleich, der Rand faellt hier nicht ins Gewicht) 1024px 60 : 20 768px 58 : 20 375px 40 : 20 Ohne diese Regel fehlen bei 768px genau die Pixel, die die Menuereihe braucht. Siehe E-33. */ .mi-header.has-global-padding { padding-inline: 0; } .mi-header { transition: background-color 300ms ease, box-shadow 300ms ease, backdrop-filter 300ms ease; } @media (prefers-reduced-motion: reduce) { .mi-header { transition: none; } } /* Ab 12px Scrollweg durchscheinend. Die Klasse setzt mantel.js an . Die 92 % sind keine Geschmacksfrage, sondern die Untergrenze, bei der Salbei auf dem durchscheinenden Grund noch 4.5:1 erreicht — **gemessen**, nicht gerechnet (E-32, F-38). Wer sie senkt, muss die Linkfarbe aendern. */ .mi-gescrollt .mi-header { background-color: color-mix(in srgb, var(--wp--preset--color--blue-deep) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 3px color-mix(in srgb, var(--wp--preset--color--gray-900) 12%, transparent), 0 1px 2px -1px color-mix(in srgb, var(--wp--preset--color--gray-900) 12%, transparent); } /* Logo und rechte Gruppe behalten ihre Breite, dazwischen steht der Abstand. */ .mi-header__bar > .wp-block-site-logo, .mi-header__bar > .mi-header__rechts { flex: 0 0 auto; } /* Die Hoehe steuert das Bild, nicht die Blockbreite: `width` am site-logo waere eine zweite Quelle fuer dieselbe Groesse und haette zwei Werte (mobil/ab Tablet) nicht ausdruecken koennen. */ .mi-header .wp-block-site-logo img { height: 48px; width: auto; max-width: none; } @media (min-width: 768px) { .mi-header .wp-block-site-logo img { height: 64px; } } /* Navigationslinks erben die Farbe ihres Containers — immer, weil Core die Klasse doppelt und damit auf 0-3-0 kommt (F-29). Der Ruhezustand kommt deshalb aus dem Sektionsstil: blue-pale, 11.57:1 auf blue-deep. Fuer hover und die aktuelle Seite braucht es 0-4-0, also die drei Klassen plus eine Pseudoklasse beziehungsweise einen Attributselektor. */ .mi-header .wp-block-navigation .wp-block-navigation-item__content:hover, .mi-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible, .mi-header .wp-block-navigation .wp-block-navigation-item__content[aria-current], .mi-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content { color: var(--wp--preset--color--sage); } /* Der Sektionsstil faerbt Buttons auf Dunkel salbeigruen (styles/mi-section-dark.json). Der Header-CTA ist blau gefuellt wie in der Demo. Umdefiniert wird der Token am Element, nicht per Alias auf :root — ein Alias friert den Wert an seiner Deklarationsstelle ein (F-31). */ .mi-header__cta { --wp--custom--mi-btn-bg: var(--wp--preset--color--blue); --wp--custom--mi-btn-fg: var(--wp--preset--color--white); --wp--custom--mi-btn-hover-bg: var(--wp--preset--color--blue-light); --wp--custom--mi-btn-hover-fg: var(--wp--preset--color--white); } /* Umbruch zum Overlay bei 768px statt bei Cores 600px. Core verdrahtet die Grenze in `wp-includes/blocks/navigation/style.css` als `@media (min-width:600px)`. `settings.viewport` (neu in WP 7.1) kommt dort nicht hin — es speist nur die Stil-Zustaende `@mobile`/`@tablet` (F-37). Zwischen 600 und 768 drehen wir Cores beide Regeln zurueck. Die vier Klassen schlagen Cores drei. */ @media (min-width: 600px) and (max-width: 767.98px) { .mi-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; position: fixed; width: auto; z-index: auto; } .mi-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } } /* Im Overlay stehen die Punkte links, nicht rechts. `items-justified-right` am Navigationsblock ist eine Ansage fuer die Reihe in der Kopfzeile. Core reicht sie ueber `--navigation-layout-justification-setting` an das geoeffnete Overlay weiter — dort sieht eine rechtsbuendige Liste aus wie ein Versehen, und die Demo setzt sie links. Umgestellt wird der Token, nicht die Regel. Der Token muss mehrfach gesetzt werden, und das ist gemessen, nicht vorsichtshalber: Core haengt `items-justified-right` nicht nur an das `