/* ========================================================================== tokens.css — DA-Studio-Media-Service Einzige Quelle fuer Abstands-, Typografie- und Farbwerte (Coding-Guidelines Kap. 5). Reihenfolge im : tokens.css -> utilities.css -> components.css ========================================================================== */ /* -------------------------------------------------------------------------- 1 · Schriften (lokal, keine externen Requests — Kap. 13) -------------------------------------------------------------------------- */ @font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/fonts/figtree-variable-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/fonts/figtree-variable-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inspiration"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/inspiration-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inspiration"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/inspiration-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; --font-script: "Inspiration", "Segoe Script", cursive; } /* -------------------------------------------------------------------------- 2 · Abstand — additiv, 4px-Raster (Kap. 5a) Primitive --s-N: N * 4px, ausgedrueckt in rem (Basis 16px). -------------------------------------------------------------------------- */ :root { --s-0: 0; --s-1: 0.25rem; /* 4px */ --s-2: 0.5rem; /* 8px */ --s-3: 0.75rem; /* 12px */ --s-4: 1rem; /* 16px */ --s-5: 1.25rem; /* 20px */ --s-6: 1.5rem; /* 24px */ --s-7: 1.75rem; /* 28px */ --s-8: 2rem; /* 32px */ --s-9: 2.25rem; /* 36px */ --s-10: 2.5rem; /* 40px */ --s-11: 2.75rem; /* 44px — Mindesthoehe interaktiver Controls */ --s-12: 3rem; /* 48px */ --s-14: 3.5rem; /* 56px */ --s-16: 4rem; /* 64px */ --s-18: 4.5rem; /* 72px */ --s-20: 5rem; /* 80px */ --s-22: 5.5rem; /* 88px */ --s-24: 6rem; /* 96px */ --s-25: 6.25rem; /* 100px — Platz fuer das fixe Bewertungssiegel (70px hoch) */ --s-28: 7rem; /* 112px */ --s-32: 8rem; /* 128px */ --s-36: 9rem; /* 144px */ --s-40: 10rem; /* 160px */ /* Layout-Geometrie (keine Schriftgroessen, keine Rasterabstaende) */ --measure: 65ch; --measure-narrow: 52ch; --measure-wide: 76ch; --container: 1400px; --container-wide: 1500px; --container-narrow: 880px; /* Unterhalb dieser Breite scrollt die Preistabelle seitwaerts in ihrem eigenen Kasten, statt ihre drei Spalten auf wenige Zeichen zu quetschen. */ --table-min: 30rem; --header-h: 5.5rem; /* 88px — Hoehe des fixen Kopfbereichs */ --radius-pill: 999px; --radius-s: 0.125rem; /* 2px — Haarlinien-Radius, Fokus-Outline */ --radius-m: 0.75rem; /* 12px — Bildrahmen der Filmkarten (Vorlage) */ --border-hair: 1px; --border-thick: 2px; /* Mittellinie des Burger-Kastens: halbe Kastenhoehe minus halbe Balkendicke, damit die drei Balken gleiche Abstaende haben und das X sich trifft. */ --menu-bar-mid: calc((var(--s-3) - var(--border-thick)) / 2); } /* Dichtestufe: normal (Default) */ :root, [data-density="normal"] { --space-inline: var(--s-2); /* 8px */ --space-tight: var(--s-3); /* 12px */ --space-comp: var(--s-4); /* 16px */ --space-block: var(--s-6); /* 24px */ --space-group: var(--s-10); /* 40px */ --space-section: var(--s-16); /* 64px */ --space-hero: var(--s-20); /* 80px */ --space-gutter: var(--s-6); /* 24px — seitlicher Seitenrand */ } [data-density="kompakt"] { --space-inline: var(--s-1); --space-tight: var(--s-2); --space-comp: var(--s-3); --space-block: var(--s-4); --space-group: var(--s-6); --space-section: var(--s-12); --space-hero: var(--s-16); --space-gutter: var(--s-4); } [data-density="luftig"] { --space-inline: var(--s-2); /* 8px */ --space-tight: var(--s-3); /* 12px */ --space-comp: var(--s-4); /* 16px */ --space-block: var(--s-6); /* 24px */ --space-group: var(--s-10); /* 40px */ --space-section: var(--s-20); /* 80px */ --space-hero: var(--s-24); /* 96px */ --space-gutter: var(--s-6); /* 24px */ } /* -------------------------------------------------------------------------- 3 · Typografie — multiplikativ, Faktor 1,2 (Kap. 5b) Werte unrundet in rem. Mobiler Default hier, Desktop-Override am Ende dieser Datei — font-size in Media Queries steht ausschliesslich in tokens.css. -------------------------------------------------------------------------- */ :root { --text-sm: 0.83333rem; /* 1,2^-1 = 13.33px — Untergrenze 13px */ --text-base: 1rem; /* 1,2^0 = 16px */ --text-md: 1.2rem; /* 1,2^1 = 19.2px */ --text-lg: 1.2rem; /* mobil: eine Stufe tiefer (= md) */ --text-xl: 1.44rem; /* mobil: eine Stufe tiefer */ --text-2xl: 1.728rem; /* mobil: eine Stufe tiefer */ --text-3xl: 2.0736rem; /* mobil: eine Stufe tiefer */ --text-display: 2.0736rem; /* mobil: zwei Stufen tiefer (33.18px) */ --text-display-lg: 3.58318rem; /* mobil: zwei Stufen tiefer (57.33px) */ --leading-tight: 1.12; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.6; --tracking-display: -0.045em; --tracking-tight: -0.03em; --tracking-normal: 0em; --tracking-wide: 0.16em; --tracking-wider: 0.28em; --tracking-widest: 0.4em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --weight-black: 900; } /* -------------------------------------------------------------------------- 4 · Farbe — primitive Palette (Kap. 5c) Ausserhalb dieser Datei steht kein Roh-Farbwert. -------------------------------------------------------------------------- */ :root { /* Tinte */ --color-ink-900: #0e0f12; --color-ink-800: #14151a; --color-ink-700: #22242b; /* Knochenweiss */ --color-bone-050: #faf8f5; --color-bone-100: #f1ece4; --color-bone-200: #e4ded4; /* Gold */ --color-gold-300: #f0c987; --color-gold-500: #c9a24c; --color-gold-800: #8a5a19; /* Signal */ --color-red-600: #d0402a; --color-green-700: #2f6b45; /* Neutrale Mischwerte (aus den Deckkraft-Werten des Entwurfs gerechnet) */ --color-grey-450: #b8b7b5; /* bone-050 @72% ueber ink-900 */ --color-grey-500: #7c7c7c; /* ink-800 @55% ueber bone-050 */ --color-grey-600: #686868; /* bone-050 @38% ueber ink-900 */ --color-grey-750: #545557; /* ink-800 @72% ueber bone-050 */ --color-grey-850: #2a2b2d; /* bone-050 @12% ueber ink-900 */ --color-grey-150: #dedddb; /* ink-800 @12% ueber bone-050 */ /* Transluzente Werte fuer Glas- und Verlaufsflaechen */ --color-scrim-00: rgba(14, 15, 18, 0); --color-scrim-15: rgba(14, 15, 18, 0.15); --color-scrim-30: rgba(14, 15, 18, 0.3); --color-scrim-50: rgba(14, 15, 18, 0.5); --color-scrim-70: rgba(14, 15, 18, 0.7); --color-scrim-85: rgba(14, 15, 18, 0.85); --color-scrim-96: rgba(14, 15, 18, 0.96); --color-veil-00: rgba(250, 248, 245, 0); --color-veil-30: rgba(250, 248, 245, 0.3); --color-veil-50: rgba(250, 248, 245, 0.5); --color-veil-70: rgba(250, 248, 245, 0.7); --color-veil-85: rgba(250, 248, 245, 0.85); --color-veil-96: rgba(250, 248, 245, 0.96); --color-glass-weak: rgba(250, 248, 245, 0.06); --color-glass: rgba(250, 248, 245, 0.14); --color-glass-strong: rgba(250, 248, 245, 0.26); --color-glass-hair: rgba(255, 255, 255, 0.3); --color-scrim-93: rgba(8, 9, 11, 0.93); --color-veil-93: rgba(250, 248, 245, 0.93); /* Passepartout: die Flaeche zwischen den Panels. Bewusst themenunabhaengig — sie ist in beiden Themes dieselbe, weil sie den Rahmen bildet, nicht den Grund einer Section. Deshalb steht sie nur hier und in keinem Theme-Block. */ --color-mat: var(--color-bone-050); /* Tag-Pillen: eigene dunkle Flaeche, damit sie auf hellen wie auf dunklen Bildern lesbar bleiben. Ebenfalls bewusst themenunabhaengig — der Abschnitt `aperture` ist auf `/unternehmen` dunkel und auf `/unternehmen/leistungen` hell gethemt, die Pillen sollen in beiden Faellen gleich aussehen. Kontrast bone-050 auf 70-%-Scrim: 6,81 : 1 im Extremfall eines weissen Bildes dahinter. */ --color-tag-bg: var(--color-scrim-70); --color-tag-text: var(--color-bone-050); /* Kapitelschiene — aus demselben Grund themenunabhaengig wie die Tag-Pillen: sie liegt `fixed` ueber allem, was gerade vorbeilaeuft — helle Panels, dunkle Panels und Fotos. Eine Theme-Rolle kennt nur das Seiten-Theme und traefe die Flaeche dahinter nicht. Outline weiss, Fuellung beige (Kundenwunsch 06.08.2026). Dazu ein dunkler Saum: Die beiden gewuenschten Farben allein verschwinden auf hellem Grund (beige auf bone-050 sind 1,26 : 1), der Saum traegt die Form dort mit 7,02 : 1. Auf dunklem Grund traegt die Outline mit 18,08 : 1. */ --color-rail-line: var(--color-bone-050); --color-rail-fill: var(--color-bone-200); --color-rail-halo: var(--color-scrim-70); /* Text, der auf dem Passepartout **und** ueber dem Bild lesbar bleiben muss. Beide Gruende zusammen schliessen jede Theme-Rolle aus: Die Mattflaeche ist themenunabhaengig hell, das Bild darueber wird vom Scrim abgedunkelt. Schwarz (ink-800) auf Kundenwunsch 06.08.2026 — dieselbe Farbe wie die gleiche Ueberschrift auf `/unternehmen/leistungen`, wo der Abschnitt durchgaengig hell gethemt ist. Gerechnet gegen beide Zustaende von `/unternehmen`: **17,20 : 1** auf dem Passepartout, **4,14 : 1** ueber dem Bild an der schwaechsten Scrim-Stelle (30 %; das Motiv ist mit einem Mittelwert von 0,26 dunkel). Fuer eine Ueberschrift in Display-Groesse (Grosstext, Grenze 3 : 1) traegt das beide Zustaende. */ --color-on-mat: var(--color-ink-800); --color-shade-weak: rgba(20, 21, 26, 0.05); --color-shade: rgba(20, 21, 26, 0.1); --color-shade-strong: rgba(20, 21, 26, 0.2); } /* Semantische Rollen — dunkel (Default; Farbschema Ast /unternehmen) */ :root, [data-theme="dark"] { --color-menu-veil: var(--color-scrim-93); --color-surface: var(--color-ink-900); --color-surface-alt: var(--color-ink-800); --color-surface-sunken: var(--color-ink-700); --color-text: var(--color-bone-050); --color-text-muted: var(--color-grey-450); /* 9,49:1 */ --color-text-invert: var(--color-ink-900); --color-brand: var(--color-gold-500); /* 7,94:1 */ --color-eyebrow: var(--color-gold-300); /* 12,11:1 */ --color-script: var(--color-gold-500); --color-line: var(--color-grey-850); --color-line-strong: var(--color-grey-600); /* 3,41:1 (UI-Grenzen) */ --color-action: var(--color-bone-050); --color-action-text: var(--color-ink-900); /* 17,95:1 */ --color-action-hover: var(--color-gold-500); --color-focus: var(--color-gold-300); /* 12,11:1 */ --color-danger: var(--color-red-600); /* 4,03:1 */ --color-success: var(--color-green-700); /* Verlaufs- und Glasrollen */ --color-overlay-none: var(--color-scrim-00); --color-overlay-faint: var(--color-scrim-30); --color-overlay-soft: var(--color-scrim-50); --color-overlay-mid: var(--color-scrim-70); --color-overlay: var(--color-scrim-85); --color-overlay-strong: var(--color-scrim-96); --color-control-bg-faint: var(--color-glass-weak); --color-control-bg: var(--color-glass); --color-control-bg-hover: var(--color-glass-strong); --color-control-line: var(--color-glass-strong); --color-control-sheen: var(--color-glass-hair); } /* Semantische Rollen — hell (Startseite, /hochzeiten, Rechtstexte) */ [data-theme="light"] { --color-menu-veil: var(--color-veil-93); --color-surface: var(--color-bone-050); --color-surface-alt: var(--color-bone-100); --color-surface-sunken: var(--color-bone-200); --color-text: var(--color-ink-800); /* 17,20:1 */ --color-text-muted: var(--color-grey-750); /* 7,04:1 */ --color-text-invert: var(--color-bone-050); --color-brand: var(--color-gold-800); /* 5,57:1 */ --color-eyebrow: var(--color-gold-800); /* 5,57:1 */ --color-script: var(--color-gold-800); --color-line: var(--color-grey-150); --color-line-strong: var(--color-grey-500); /* 3,94:1 (UI-Grenzen) */ --color-action: var(--color-ink-800); --color-action-text: var(--color-bone-050); /* 17,20:1 */ --color-action-hover: var(--color-gold-800); --color-focus: var(--color-gold-800); /* 5,57:1 */ --color-danger: var(--color-red-600); /* 4,45:1 */ --color-success: var(--color-green-700); /* Verlaufs- und Glasrollen */ --color-overlay-none: var(--color-veil-00); --color-overlay-faint: var(--color-veil-30); --color-overlay-soft: var(--color-veil-50); --color-overlay-mid: var(--color-veil-70); --color-overlay: var(--color-veil-85); --color-overlay-strong: var(--color-veil-96); --color-control-bg-faint: var(--color-shade-weak); --color-control-bg: var(--color-shade); --color-control-bg-hover: var(--color-shade-strong); --color-control-line: var(--color-shade-strong); --color-control-sheen: var(--color-veil-70); } /* -------------------------------------------------------------------------- 5 · Desktop-Rahmen ab 1025px (Kap. 7) Enthaelt bewusst die einzigen font-size- und Abstands-Overrides der Site. -------------------------------------------------------------------------- */ @media (min-width: 1025px) { :root { /* Typografie: sm/base/md unveraendert, obere Stufen eine Stufe hoeher */ --text-lg: 1.44rem; /* 1,2^2 = 23.04px */ --text-xl: 1.728rem; /* 1,2^3 = 27.65px */ --text-2xl: 2.0736rem; /* 1,2^4 = 33.18px */ --text-3xl: 2.48832rem; /* 1,2^5 = 39.81px */ --text-display: 2.98598rem; /* 1,2^6 = 47.78px */ --text-display-lg: 5.15978rem; /* 1,2^9 = 82.56px */ --header-h: 6.5rem; /* 104px */ } :root, [data-density="normal"] { --space-block: var(--s-8); /* 32px */ --space-group: var(--s-12); /* 48px */ --space-section: var(--s-24); /* 96px */ --space-hero: var(--s-32); /* 128px */ --space-gutter: var(--s-12); /* 48px */ } [data-density="kompakt"] { --space-block: var(--s-6); --space-group: var(--s-8); --space-section: var(--s-16); --space-hero: var(--s-20); --space-gutter: var(--s-8); } [data-density="luftig"] { --space-tight: var(--s-4); /* 16px */ --space-comp: var(--s-6); /* 24px */ --space-block: var(--s-8); /* 32px */ --space-group: var(--s-14); /* 56px */ --space-section: var(--s-32); /* 128px */ --space-hero: var(--s-40); /* 160px */ --space-gutter: var(--s-18); /* 72px */ } } /* ========================================================================== 6 · Vorschaltseite „Version 02" — 1:1-Übernahme der Design-Anweisung -------------------------------------------------------------------------- Auf ausdrückliche Anweisung wird die Vorschaltseite pixelgenau aus dem Design-Projekt übernommen. Das erfordert fluide Werte (clamp/vw) und damit eine **bewusste Abweichung von Kap. 5b** (dort sind clamp()/vw in font-size und Abständen verboten). Die Abweichung ist hier gekapselt: alle fluiden Werte stehen ausschließlich in diesem Block. Rückbau auf das Token-Enum = diese Werte gegen `--text-*`/`--space-*` tauschen, sonst nichts. ========================================================================== */ :root { /* Primitive des Entwurfs, die im Token-Satz noch fehlten */ --color-ink-950: #08090b; --color-scrim-45: rgba(14, 15, 18, 0.45); --color-scrim-80: rgba(14, 15, 18, 0.8); --color-scrim-82: rgba(14, 15, 18, 0.82); --color-scrim-97: rgba(14, 15, 18, 0.97); --color-glass-12: rgba(250, 248, 245, 0.12); --color-glass-16: rgba(250, 248, 245, 0.16); --color-glass-22: rgba(250, 248, 245, 0.22); --color-glass-30: rgba(250, 248, 245, 0.3); --color-glass-34: rgba(250, 248, 245, 0.34); --color-glass-60: rgba(250, 248, 245, 0.6); --color-glass-72: rgba(250, 248, 245, 0.72); --color-sheen-38: rgba(255, 255, 255, 0.38); /* Schriftgrößen des Entwurfs */ --gate-text: clamp(16px, 1.05vw, 18px); --gate-eyebrow: clamp(10px, 0.9vw, 13px); /* Untergrenze wie bei `--v2-h1` (Block 8) von 58px auf 44px: dasselbe Wort in derselben Schrift. Hier bricht es nicht um — `.gate__title` ist ein Flex-Container, die Zeichen haetten stattdessen ueberstanden und waeren vom Ein-Bildschirm-Riegel abgeschnitten worden. */ --gate-title: clamp(44px, 15.5vw, 260px); --gate-script: clamp(30px, 5.6vw, 96px); --gate-phrase: clamp(20px, 3.4vw, 58px); --gate-cta-text: clamp(12px, 1.15vw, 17px); --gate-menu-label: clamp(10px, 0.9vw, 12px); --gate-menu-top: clamp(38px, 5.6vw, 92px); --gate-menu-sub: clamp(15px, 1.35vw, 21px); --gate-menu-meta: clamp(12px, 1vw, 14px); /* Geometrie und Abstände des Entwurfs */ --gate-pad-top: clamp(84px, 11vh, 140px); --gate-pad-bottom: clamp(24px, 5vh, 54px); --gate-stack-gap: clamp(16px, 3vh, 44px); --gate-inline: clamp(18px, 5vw, 72px); --gate-chrome-x: clamp(18px, 4vw, 54px); --gate-logo-y: clamp(18px, 3.4vh, 30px); --gate-logo-h: clamp(28px, 2.4vw, 38px); --gate-btn-y: clamp(14px, 2.8vh, 26px); --gate-lead-gap: clamp(18px, 2.4vw, 32px); --gate-phrase-top: clamp(6px, 1vw, 14px); --gate-row-gap: clamp(14px, 3vw, 52px); --gate-cta-top: clamp(26px, 3.6vw, 58px); --gate-cta-py: clamp(15px, 1.5vw, 23px); --gate-cta-px: clamp(24px, 2.8vw, 48px); --gate-cta-gap: clamp(8px, 1vw, 14px); --gate-menu-pt: clamp(92px, 14vh, 170px); --gate-menu-px: clamp(20px, 6vw, 110px); --gate-menu-pb: clamp(34px, 6vh, 80px); --gate-menu-gap: clamp(30px, 5vh, 64px); --gate-menu-col-gap: clamp(34px, 5vw, 100px); --gate-menu-rule: clamp(18px, 2.4vw, 30px); --gate-menu-list-gap: clamp(10px, 1.2vw, 16px); --gate-menu-bottom-gap: clamp(14px, 2vw, 32px); /* Genau die Haelfte davon (Kundenwunsch 06.08.2026): Die Rechtslink-Zeile bricht auf schmalen Geraeten um, und der Abstand zwischen den umgebrochenen Zeilen ist bei einem Flex-Container der **row-gap** — nicht die `line-height`. Waagerecht bleibt der volle Wert. */ --gate-menu-bottom-row: clamp(7px, 1vw, 16px); --gate-menu-bottom-pt: clamp(18px, 2.6vw, 34px); /* Bewegungskurven des Entwurfs */ --gate-ease-soft: cubic-bezier(0.2, 0.8, 0.2, 1); --gate-ease-swap: cubic-bezier(0.4, 0, 0.2, 1); --gate-ease-iris: cubic-bezier(0.76, 0, 0.24, 1); --gate-ease-char: cubic-bezier(0.2, 0.85, 0.2, 1); } /* -------------------------------------------------------------------------- 7 · Stapelordnung Die CMP liegt laut ihrem Stylesheet auf z-index 999999 (`.privacy-control-badge`, `.safe-surfer-badge`) und **ueber allem, was wir setzen** (Kundenwunsch 06.08.2026). Grund: Der Menuepunkt „Cookie Einstellungen" oeffnet den Dialog aus dem geoeffneten Panel heraus — lag das Panel darueber, oeffnete sich der Dialog dahinter. Damit ist die frueher hier verankerte Ordnung umgekehrt: Panel, Menue-Button, Lesefortschritt und Skip-Link standen auf `--z-cmp + 1 … + 10`. Der Grund dafuer war der **dauerhaft sichtbare Badge**, der die Navigation verdeckt haette — und der ist seit dem 03.08.2026 mit `badge: false` abgeschaltet (Kap. 11). Die eigene Ordnung bleibt in sich gleich, nur eben unterhalb. `--z-cmp` ist damit kein Anker mehr, sondern eine Dokumentation des fremden Werts: **Kein eigener z-index darf ihn erreichen.** Wird die CMP aktualisiert und aendert ihren Wert, ist hier nur zu pruefen, dass er weiter ueber `--z-skip` liegt. -------------------------------------------------------------------------- */ :root { --z-base: 1; --z-raised: 10; --z-rail: 55; --z-chrome: 60; --z-grain: 70; --z-nav-panel: 80; --z-nav-button: 90; /* Der Lesefortschritt liegt ueber allem Eigenen ausser dem Skip-Link: er ist eine Kante am Bildschirmrand und darf von keiner Chrome verdeckt werden. */ --z-progress: 95; --z-skip: 100; /* Fremdwert der CMP — nichts von uns darf hier heran. */ --z-cmp: 999999; } /* ========================================================================== 8 · Inhaltsseiten „Version 02" — 1:1-Werte der Design-Anweisung -------------------------------------------------------------------------- Dieselbe Kapselung wie Block 6: fluide Werte (clamp/vw) sind eine bewusste Abweichung von Kap. 5b und stehen ausschliesslich hier. Die Werte gelten fuer alle Seiten der Reihe „Version 02" — die Vorlagen teilen sich ein Raster. ========================================================================== */ :root { /* Ast-Chrome */ --v2-chrome-gap: clamp(8px, 1.2vw, 18px); --v2-chrome-py: clamp(14px, 1.6vw, 22px); /* Das Logo ist genau so hoch wie der Menue-Button (Kundenwunsch 31.07.2026): beide auf der Mindesthoehe fuer Bedienelemente. */ --v2-chrome-logo: var(--s-11); /* Hoehe des mobilen Chrome-Balkens: Polsterung plus Logo/Button. Die angepinnten Buehnen setzen darunter an, sonst liegen sie dahinter. */ --v2-chrome-h: calc(2 * var(--v2-chrome-py) + var(--v2-chrome-logo)); --v2-pill-text: clamp(10px, 0.85vw, 12.5px); --v2-plate-radius: clamp(20px, 3vw, 44px); --v2-mat-gap: clamp(10px, 1.4vw, 22px); /* Nur der Auftakt zieht die Balkenhoehe ab: Er ist die einzige Section, die man sieht, **solange der Balken steht**. Alles darunter erreicht man durch Herunterscrollen — dabei faehrt der Balken weg (`is-nav-hidden`), der Bildschirm steht also voll zur Verfuegung. Dort geht nur das Passepartout oben und unten ab. Ueber dem Auftakt steht seit dem 06.08.2026 kein Passepartout mehr (der Balken traegt den Weissraum allein) — hier geht deshalb nur der untere Rahmen ab, nicht mehr beide. */ --v2-hero-inset: calc(var(--v2-chrome-h) + var(--v2-mat-gap)); --v2-panel-inset: calc(2 * var(--v2-mat-gap)); /* Untergrenze des Auftakts bis 1024px (Kundenwunsch 06.08.2026). Derselbe Wert wie die Hoehenschwelle der inszenierten Momente — unter 600px Bildschirmhoehe sind beide zu flach fuer ihren Inhalt. */ --v2-hero-min: 600px; --v2-panel-radius: var(--v2-plate-radius); --v2-rail-left: clamp(14px, 2.2vw, 34px); /* Auftakt und duo — gleiche Buehnengeometrie */ --v2-stage-gap: clamp(16px, 3vh, 44px); --v2-stage-pt: clamp(84px, 11vh, 140px); --v2-stage-pb: clamp(24px, 5vh, 54px); --v2-inline: clamp(18px, 5vw, 72px); /* Randlose Buehne mit zentriertem Inhalt: die Polsterung teilt die Breite oberhalb von `--container-wide` aussen auf. `100 %` bezieht sich auf die Buehne selbst, das Token gehoert deshalb allein ihr. */ --v2-steps-px: max(var(--v2-inline), calc((100% - var(--container-wide)) / 2)); /* Waagerechte Bildstrecke (Hochzeitsfotos, Abschnitt 02). Der Entwurf gibt jeder Kachel eigene Masse; hier vier Formatklassen mit `aspect-ratio` — dieselbe Rhythmik, ohne sechzehn Einzelwerte. */ --v2-shot-gap: clamp(12px, 1.6vw, 30px); --v2-shot-tall: clamp(200px, 22vw, 360px); --v2-shot-wide: clamp(310px, 38vw, 660px); --v2-shot-portrait: clamp(200px, 21vw, 340px); --v2-shot-square: clamp(230px, 25vw, 410px); --v2-shot-cap-pt: clamp(14px, 1.7vw, 24px); /* Ablauf-Karten: die Zahl gross und leise im Hintergrund, der Auftritt hebt die Karte um --v2-flow-lift an. */ --v2-flow-num: clamp(44px, 5vw, 86px); --v2-flow-lift: clamp(18px, 2.4vw, 36px); --v2-eyebrow: clamp(10px, 0.9vw, 13px); --v2-eyebrow-mb: clamp(18px, 2.4vw, 32px); /* Untergrenze 44px statt der 58px des Entwurfs (Kundenhinweis 06.08.2026: „MOMENTE" brach bei 320px um). 58px ist unterhalb von 374px Viewport *groesser* als der fluide Wert — die Headline hoerte dort auf mitzuwachsen und war breiter als die Spalte. Bei 320px greift jetzt wieder der fluide Wert (49,6px), die Untergrenze erst unter 284px. Oberhalb von 374px aendert sich nichts. Dieselbe Korrektur am `--gate-title` (Block 6). */ --v2-h1: clamp(44px, 15.5vw, 260px); /* Die Unterseiten tragen einen ganzen Satz als Ueberschrift, keine Parole. Der Entwurf setzt sie deshalb deutlich kleiner und ohne Versalien — dieselbe Groesse auf Hochzeitsfotos, Hochzeitsvideos und Imagevideos. */ --v2-h1-sub: clamp(29px, 4.9vw, 80px); /* Nachlauf der Unterseiten-Ueberschrift: Sie wandert beim Scrollen um diesen Betrag nach unten und bleibt damit hinter dem Scroll zurueck. */ --v2-hero-lag: clamp(40px, 9vh, 110px); --v2-phrase: clamp(20px, 3.4vw, 58px); --v2-lead: clamp(16px, 1.35vw, 21px); --v2-lead-mt: clamp(28px, 3.4vw, 48px); --v2-hint-gap: clamp(4px, 1vh, 8px); --v2-hint-h: clamp(14px, 4vh, 38px); /* Haltungsaussage */ --v2-stmt-py: clamp(90px, 14vh, 190px); --v2-stmt-eyebrow-mb: clamp(28px, 4vw, 56px); --v2-words: clamp(30px, 5.2vw, 92px); --v2-aside-mt: clamp(48px, 7vw, 104px); --v2-script: clamp(32px, 3.4vw, 56px); --v2-aside-text: clamp(17px, 1.5vw, 23px); /* Kreis-Aufblende */ --v2-ap-px: clamp(18px, 6vw, 90px); --v2-ap-title: clamp(30px, 5.4vw, 96px); --v2-tag-gap: clamp(8px, 1vw, 14px); --v2-tag-mt: clamp(22px, 3vw, 40px); --v2-tag-text: clamp(12px, 1.05vw, 15px); --v2-ap-lead: clamp(15px, 1.3vw, 20px); --v2-ap-lead-mt: clamp(20px, 2.6vw, 34px); /* Zwei Wege */ --v2-duo-gap: clamp(18px, 2.8vh, 40px); --v2-duo-pt: clamp(56px, 8vh, 110px); --v2-duo-pb: clamp(34px, 6vh, 68px); --v2-duo-title: clamp(34px, 7.4vw, 128px); --v2-duo-eyebrow-mb: clamp(14px, 2vw, 28px); --v2-duo-row-mt: clamp(20px, 2.8vw, 44px); --v2-duo-copy-mt: clamp(22px, 3vw, 42px); --v2-duo-copy-min: clamp(92px, 8vw, 124px); --v2-cta-py: clamp(14px, 1.4vw, 22px); --v2-cta-px: clamp(22px, 2.6vw, 46px); --v2-cta-text: clamp(12px, 1.15vw, 17px); --v2-cta-gap: clamp(8px, 1vw, 14px); --v2-row-gap: clamp(14px, 3vw, 52px); /* Ablauf */ --v2-steps-pt: clamp(84px, 12vh, 140px); --v2-steps-pb: clamp(40px, 7vh, 80px); --v2-steps-colgap: clamp(28px, 4vw, 72px); --v2-steps-stack: clamp(16px, 2.4vw, 34px); --v2-steps-listgap: clamp(10px, 1.3vw, 20px); --v2-step-numcol: clamp(34px, 3.4vw, 58px); --v2-step-gap: clamp(12px, 1.6vw, 24px); --v2-step-title: clamp(24px, 2.8vw, 48px); --v2-step-text: clamp(14px, 1.1vw, 17px); /* Der Bildstapel bemisst sich an der **Panelhoehe**, nicht am Bildschirm: 58vh waren mehr als 58 % des Panels und liessen den Ablauf ueberlaufen. */ --v2-frames-h: clamp(200px, calc(0.5 * (100svh - var(--v2-panel-inset))), 520px); /* Abschluss */ --v2-split-gap: clamp(16px, 2.2vw, 30px); --v2-split-script: clamp(38px, 5.4vw, 92px); --v2-split-title: clamp(34px, 6.4vw, 116px); --v2-split-lead: clamp(15px, 1.3vw, 20px); } :root { /* Tilt des Statement-Asides (Entwurf: perspective 900px, 14deg, 40px) */ --v2-tilt-perspective: 900px; --v2-tilt-deg: 14deg; --v2-tilt-shift: 40px; } /* -------------------------------------------------------------------------- 9 · Zeilenhoehen und Bewegungswerte der Reihe „Version 02" Kap. 5b verlangt Zeilenhoehen als Token — auch die engen Display-Werte des Entwurfs. Hier stehen sie mit dem Wert, den die Vorlage vorgibt. -------------------------------------------------------------------------- */ :root { --leading-script: 0.7; /* Schreibschrift-Phrasen */ --leading-display: 0.82; /* Hero-Headline */ --leading-duo: 0.9; /* einzeilige Sans-Phrasen — fuer mehrzeilige Ueberschriften zu eng, siehe .duo__title */ --leading-split: 0.94; /* Abschluss-Headline, Menue-Ast */ --leading-aperture: 0.98; /* Kreis-Aufblende-Headline */ --leading-step: 1.02; /* Schritt-Titel */ --leading-words: 1.04; /* Haltungsaussage */ --leading-flat: 1; /* Laufband */ --leading-copy: 1.55; /* Fliesstext der Reihe */ /* Auflösung der Hero-Headline beim Scrollen (Entwurf: fxStrength 1.6) */ --v2-fx: 1.6; /* Glasige Controls: der Effekt kommt aus der Unschaerfe dahinter, nicht aus einem Schatten darunter. Deshalb kraeftiger Blur, flacher Schatten. */ --glass-blur: var(--s-4); --glass-saturate: 130%; --glass-shadow: 0 var(--s-1) var(--s-3) var(--color-scrim-30); /* Die Kante der klebenden Kopfbalken ist bewusst dezenter als der Schatten der glasigen Controls: sie soll den Balken absetzen, nicht anheben. Halbe Streuung, halbe Deckkraft — 0 / 4 / 8 px bei 15 %. */ --shadow-edge: 0 var(--s-1) var(--s-2) var(--color-scrim-15); --glass-shadow-lift: 0 var(--s-2) var(--s-5) var(--color-scrim-30); --v2-char-lift: 16vh; --v2-char-scale: 0.12; --v2-char-track: 0.06em; /* Abschnitt 06: die Haelften starten in normaler Saettigung und bleichen beim Aufziehen aus (Kundenwunsch, statt der Abdunkelung des Entwurfs). */ /* Abschnitt 03: Grundunschaerfe und Zuwachs ueber die Buehne. Der Ueberscan haelt den weichen Rand des Blurs ausserhalb des Klipp-Kastens. */ --v2-ap-blur: 2px; --v2-ap-blur-scroll: 10px; --v2-ap-overscan: 1.05; --split-pale-bright: 0.18; --split-pale-sat: 0.45; /* Schreibschrift-Phrase im Auftakt */ --v2-hero-script: clamp(30px, 5.6vw, 96px); --v2-phrase-top: clamp(6px, 1vw, 14px); }