/* ============================================================================ Hayk Performance — "Der 10-Tage-Umsatzhebel" Landingpage · vollstaendig, B1 bis B11 plus Optin-Modal Aufbau dieser Datei: 1 Farbtokens (beide Themes) 2 Globale Tokens (Typo, Spacing, Raster, Radius, Motion) 3 Reset 4 Basistypografie 5 Layout: Container + Sektionssystem 6 Primitives (Label, Chip, Button, Karte, Korn, Punktraster, Linie) 7 B1 Header 8 B2 Hero 9 Sektionskopf 10 B4 Modulkarten 11 B5 Diagnose 12 B6 Signature-Grafik 13 B7 Kursinhalt 14 B8 Faelle 15 B9 Ueber Hayk 16 B10 FAQ 17 B11 Final-CTA + Footer 18 Formular-Modal 19 Responsive 20 Reduced Motion ========================================================================= */ /* ============================================================================ 1 · FARBTOKENS Beide Themes teilen dieselben Tokennamen. Umschaltung ausschliesslich ueber . Kein weiterer Unterschied. ========================================================================= */ :root[data-theme="light"] { --bg: #F7F7F5; --surface: #FFFFFF; --surface-2: #EFEEEB; --band: #0E1113; /* dunkle Baender in der hellen Seite */ --on-band: #F0F1EF; --on-band-soft: #9BA3A6; /* auf --band: 7.4:1 — ok */ --ink: #0E1113; /* auf --bg: 17.1:1 */ --ink-soft: #565C61; /* auf --bg: 6.3:1 */ /* Kontrastkorrektur: Briefingwert #8A9096 erreicht auf --bg nur 3.0:1 und faellt damit unter die 4.5:1-Vorgabe fuer Fliesstext. Auf #6A7175 abgedunkelt: 4.6:1 auf --bg, 5.0:1 auf --surface. */ --ink-faint: #6A7175; --accent: #0F5C4E; --accent-hover: #0B473C; --on-accent: #FFFFFF; /* auf --accent: 7.9:1 */ --rule: #E1E0DB; --rule-strong: #CFCDC6; /* Linien und Akzent auf dem umgekehrten Grund. Der Akzent bleibt derselbe Ton, nur in der Helligkeit, die auf --band lesbar ist: das dunkle Petrol erreicht auf dem dunklen Band nur 1.6:1 und waere als Flaeche unsichtbar. */ --rule-on-band: rgba(240, 241, 239, .16); --accent-band: #2E9E82; /* auf --band: 7.0:1 */ --accent-band-hover: #38B896; --on-accent-band: #06110E; /* auf --accent-band: 5.8:1 */ --noise-opacity: .04; --shadow-hero: 0 40px 90px -28px rgba(14, 17, 19, .30); /* Nur Mockup und Portraet sind themenabhaengig. Sonst nichts. */ --hero-mockup: url("assets/hero-mockup-light.webp"); --portrait: url("assets/portrait-light.webp"); color-scheme: light; } :root[data-theme="dark"] { --bg: #0B0E0F; --surface: #14181A; --surface-2: #1B2123; --band: #F7F7F5; /* helle Baender in der dunklen Seite */ --on-band: #0E1113; --on-band-soft: #565C61; /* auf --band: 6.3:1 — ok */ --ink: #F2F4F3; /* auf --bg: 16.4:1 */ --ink-soft: #A4ACAF; /* auf --bg: 8.4:1 */ /* Kontrastkorrektur: Briefingwert #6E7679 erreicht auf --bg nur 4.2:1 und auf --surface (Modulkarten) nur 4.0:1. Auf #7C8487 aufgehellt: 5.1:1 auf --bg, 4.7:1 auf --surface. */ --ink-faint: #7C8487; --accent: #2E9E82; --accent-hover: #38B896; --on-accent: #06110E; /* auf --accent: 5.8:1 */ --rule: rgba(242, 244, 243, .13); --rule-strong: rgba(242, 244, 243, .24); --rule-on-band: rgba(14, 17, 19, .14); --accent-band: #0F5C4E; /* auf --band: 7.9:1 */ --accent-band-hover: #0B473C; --on-accent-band: #FFFFFF; /* auf --accent-band: 7.9:1 */ --noise-opacity: .06; --shadow-hero: 0 40px 100px -30px rgba(0, 0, 0, .75); --hero-mockup: url("assets/hero-mockup-dark.webp"); --portrait: url("assets/portrait-dark.webp"); color-scheme: dark; } /* ============================================================================ 2 · GLOBALE TOKENS ========================================================================= */ :root { /* Schrift */ --font-sans: "Switzer", "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Typoskala */ /* Korrektur gegenueber dem Briefingwert clamp(2.75rem, 5.6vw, 4.5rem): Die H1 steht in der 6-Spalten-Textspalte des Hero, also in 580px bei 1200er Container. Gemessen in Switzer 700 bricht die H1-Copy dort ab 48px auf vier und ab 68px auf fuenf Zeilen — die Vorgabe "maximal drei Zeilen auf Desktop" aus Abschnitt 4 waere mit 4.5rem nicht einzuhalten. Die Skala ist deshalb auf den groessten dreizeiligen Wert gesetzt und folgt ueber den vw-Term der schrumpfenden Spalte. */ --h1: clamp(2.25rem, 3.15vw, 2.8125rem); --h2: clamp(1.95rem, 3.8vw, 3.1rem); --h3: clamp(1.3rem, 2vw, 1.7rem); --lead: clamp(1.1rem, 1.5vw, 1.3125rem); --body: 1.0625rem; --small: 0.9375rem; --label: 0.75rem; --kpi: clamp(2.4rem, 4.6vw, 3.6rem); /* Raster */ --container: 1200px; --text-col: 700px; --gutter: 40px; /* Spacing */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --s11: 160px; /* Sektionspolster — einzige Quelle fuer vertikalen Rhythmus (siehe 5) */ --section-y: var(--s10); /* 128px Desktop */ --section-y-final: var(--s11); /* 160px Desktop */ /* Radius */ --radius: 6px; --radius-pill: 999px; /* Motion */ --ease: cubic-bezier(.22, 1, .36, 1); --t-fast: 140ms; --t-base: 180ms; /* Korn — Inline-SVG, spart den Bild-Request */ --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } @media (max-width: 900px) { :root { --gutter: 28px; --section-y: var(--s9); /* 96px Tablet */ --section-y-final: 112px; } } @media (max-width: 640px) { :root { --gutter: 20px; --section-y: 72px; /* 72px Mobil */ --section-y-final: 88px; /* Mobile Typokorrektur: die Desktop-Skala ist unterhalb von 785px auf ihrem clamp-Minimum eingefroren (5.6vw greift dort nicht mehr). Bei 375px waere die H1 damit siebenzeilig und der CTA laege unter der Falz — das verletzt die harte Abnahmebedingung aus B2. Eigene Mobilstufen: */ --h1: clamp(2rem, 9.6vw, 2.75rem); --h2: clamp(1.75rem, 7.2vw, 2.4rem); --lead: 1rem; } } /* ============================================================================ 3 · RESET ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: var(--body); line-height: 1.62; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, svg, picture { display: block; max-width: 100%; } img { height: auto; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; } /* ============================================================================ 4 · BASISTYPOGRAFIE Genau ein Kursiv-Akzent pro Headline, immer am Ende. Nie zusaetzlich eingefaerbt, nie zusaetzlich fett. ========================================================================= */ .h1, .h2, .h3 { text-wrap: balance; } .h1 { font-size: var(--h1); font-weight: 700; letter-spacing: -.035em; line-height: 1.03; /* Descender-Reserve: der Kursiv-Akzent enthaelt Unterlaengen (g, p, y) und wuerde bei lh 1.03 in die Folgezeile stossen. */ padding-bottom: .05em; } .h2 { font-size: var(--h2); font-weight: 700; letter-spacing: -.030em; line-height: 1.08; padding-bottom: .04em; } .h3 { font-size: var(--h3); font-weight: 600; letter-spacing: -.020em; line-height: 1.22; } .h1 em, .h2 em, .h3 em { font-style: italic; font-weight: 600; } .lead { font-size: var(--lead); line-height: 1.5; color: var(--ink-soft); max-width: 48ch; } .body { max-width: 64ch; } .small { font-size: var(--small); line-height: 1.55; } /* Utility-Klassen als einzige Stelle, an der Textfarben gesetzt werden */ .t-soft { color: var(--ink-soft); } .t-faint { color: var(--ink-faint); } /* ============================================================================ 5 · LAYOUT Sektionspolster ausschliesslich hier. Keine konkurrierenden Padding-Regeln auf Elementtyp-Selektoren. ========================================================================= */ .container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .section { position: relative; padding-block: var(--section-y); } .section--tight { padding-block: calc(var(--section-y) * .6875); } /* 88px Desktop */ .section--final { padding-block: var(--section-y-final); } /* Baender kehren den Grund um. Statt jede Regel zu doppeln, werden die Tokens innerhalb des Bandes neu belegt — Linien, Fokusringe und der Akzent stimmen damit automatisch. */ .section--band { background: var(--band); color: var(--on-band); --ink: var(--on-band); --ink-soft: var(--on-band-soft); --ink-faint: var(--on-band-soft); --rule: var(--rule-on-band); --rule-strong: var(--rule-on-band); --accent: var(--accent-band); --accent-hover: var(--accent-band-hover); --on-accent: var(--on-accent-band); } /* 12-Spalten-Raster */ .grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ============================================================================ 6 · PRIMITIVES ========================================================================= */ /* --- 6.1 Label ----------------------------------------------------------- */ /* Frueher in JetBrains Mono. Die Monospace hat der Seite ein Terminal-Register gegeben, das nicht zur Marke passt — Labels laufen jetzt in der Hausschrift: klein, versal, gesperrt. Damit steht die ganze Seite in einer Familie. */ .label { font-size: var(--label); font-weight: 500; line-height: 1.4; letter-spacing: .14em; /* Versalien in der Grotesk brauchen etwas mehr Luft */ text-transform: uppercase; } /* --- 6.2 Chip ------------------------------------------------------------ */ .chip { display: inline-block; padding: 8px 16px; background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--radius-pill); color: var(--ink-soft); } /* --- 6.3 Button ---------------------------------------------------------- */ /* Ohne Marquee: der Text steht fest und zentriert. */ .btn { --btn-h: 60px; --btn-px: 34px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: var(--btn-h); padding-inline: var(--btn-px); background: var(--accent); color: var(--on-accent); border-radius: var(--radius); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; line-height: 1; white-space: nowrap; transition: background-color var(--t-fast) ease, transform var(--t-fast) ease; } .btn:hover { background: var(--accent-hover); transform: translateY(-1px); } .btn:active { transform: translateY(0); } /* Kompakte Variante — Header und Inline-CTA in der Kursliste */ .btn--compact { --btn-h: 48px; --btn-px: 22px; font-size: 1rem; } /* --- 6.5 Karte ----------------------------------------------------------- */ /* Kein Schatten. Karten tragen eine 1px-Linie. */ .card { position: relative; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 40px 32px 36px; overflow: hidden; } /* --- 6.6 Korn ------------------------------------------------------------ */ .grain { position: relative; } .grain > * { position: relative; z-index: 1; } .grain::after { content: ""; position: absolute; inset: 0; background-image: var(--noise); opacity: var(--noise-opacity); mix-blend-mode: overlay; pointer-events: none; z-index: 0; } /* --- 6.7 Punktraster ----------------------------------------------------- */ /* Genau drei Vorkommen auf der Seite, immer weich auslaufend. */ .dotfield { position: absolute; background-image: radial-gradient(circle, var(--rule-strong) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 40%, transparent 100%); pointer-events: none; } /* --- 6.8 Trennlinie ------------------------------------------------------ */ .rule { border: 0; border-top: 1px solid var(--rule); margin: 0; } /* ============================================================================ 7 · B1 · HEADER Transparent im Seitenkopf. Ab 640px Scrollweite faehrt eine kompakte Leiste ein: Grund --bg, 1px Unterkante, Textlink wird zum Button. ========================================================================= */ /* Messpunkte. Der obere muss innerhalb des Viewports liegen, sonst meldet der IntersectionObserver schon beim Laden "nicht sichtbar". */ .sentinel { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; } .sentinel--top { top: 0; } .sentinel--stick { top: 640px; } .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: 72px; display: flex; align-items: center; border-bottom: 1px solid transparent; transition: transform var(--t-base) var(--ease), height var(--t-base) var(--ease), background-color var(--t-base) ease, border-color var(--t-base) ease; } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); width: 100%; } /* Zustand 2: gescrollt, aber noch nicht 640px — Leiste faehrt aus dem Bild */ .site-header.is-hidden { transform: translateY(-100%); } /* Zustand 3: ab 640px Scrollweite */ .site-header.is-stuck { transform: translateY(0); height: 60px; background: var(--bg); border-bottom-color: var(--rule); } /* Wortmarke — TODO: gegen assets/wordmark.svg tauschen (siehe ASSETS.md) */ .wordmark { font-weight: 700; font-size: 1.0625rem; letter-spacing: -.02em; } .wordmark span { font-weight: 500; color: var(--ink-soft); } .site-header__link { font-weight: 500; font-size: var(--small); color: var(--ink-soft); white-space: nowrap; transition: color var(--t-fast) ease; } .site-header__link:hover { color: var(--ink); } /* Der Textlink wird ab 640px Scrollweite zum kompakten Button. Beide Zustaende liegen im Markup, damit kein Layoutsprung entsteht. Die Sichtbarkeit haengt am Header-Zustand, nicht am Element — sonst ueberschreibt die Vollbreiten-Regel fuer .btn im Mobil-Breakpoint das display:none des Buttons. */ .site-header:not(.is-stuck) .site-header__cta { display: none; } .site-header.is-stuck .site-header__link { display: none; } /* ============================================================================ 8 · B2 · HERO Asymmetrisch: Text auf 6 Spalten, eine Leerspalte, Mockup auf 5. Enge Innenabstaende, brutale Aussenabstaende. ========================================================================= */ .hero { padding-top: calc(72px + var(--s9)); padding-bottom: var(--section-y); overflow: hidden; } .hero__grid { align-items: center; } .hero__copy { grid-column: 1 / span 6; position: relative; z-index: 1; } .hero__media { grid-column: 8 / span 5; position: relative; margin-bottom: -56px; /* Das Mockup ragt in die naechste Sektion. */ /* Und nach rechts aus dem Raster heraus bis an die Seitenkante: das Produktbild ist das einzige Element, das zeigt, dass es den Kurs gibt. Klein platziert liest es sich als Icon. */ margin-right: calc(-1 * max(0px, (100vw - var(--container)) / 2)); } /* Innenabstaende — die Rangfolge aus 5.1, nicht ueberall 32px */ .hero__chip { margin-bottom: var(--s4); } /* 16 */ .hero__title { margin-bottom: var(--s5); } /* 24 */ .hero__lead { margin-bottom: 40px; } /* 40 */ .hero__mockup { width: 100%; aspect-ratio: 1120 / 840; /* reserviert den Platz, kein Layout-Shift */ background-image: var(--hero-mockup); background-size: cover; background-position: center; border-radius: var(--radius); box-shadow: var(--shadow-hero); /* Der einzige Schatten der Seite. */ } /* Punktraster 1 von 3: hinter der Hero-Bildzone, nach rechts auslaufend */ .hero__dots { top: -8%; right: -14%; width: 78%; height: 116%; z-index: 0; } /* ============================================================================ 9 · SEKTIONSKOPF · gilt fuer B4, B7, B8 Label und Headline stehen eng, der Abstand nach unten ist gross. ========================================================================= */ .section-head { margin-bottom: var(--s7); } .section-head .label { margin-bottom: var(--s4); } .section-head .h2 { max-width: 22ch; } /* ============================================================================ 10 · B4 · MODULKARTEN ========================================================================= */ .modules__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); } .module { display: flex; flex-direction: column; } /* Kartenmotiv aus B4 — bewusst ein anderes Bauteil als das grosse Punktraster aus Abschnitt 2.2, das genau dreimal vorkommt. 88x88, oben rechts, ohne weichen Auslauf. */ .dotmotif { position: absolute; top: -10px; right: -10px; width: 88px; height: 88px; background-image: radial-gradient(circle, var(--rule-strong) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; } /* Frueher: Nummer klein, darunter ein Icon, darunter der Titel. Genau die Dreierreihe mit Icon oben, an der man Baukastenseiten erkennt. Jetzt traegt die Nummer die Karte, ein Haarstrich schliesst sie ab. Icons erscheinen auf der Seite nur noch dort, wo sie eine Aussage haben. */ .module__no { font-size: 2.25rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink-faint); padding-bottom: var(--s5); border-bottom: 1px solid var(--rule); } .icon { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .module .h3 { margin-top: var(--s6); } .module .small { margin-top: var(--s3); } /* ============================================================================ 11 · B5 · DIAGNOSE ========================================================================= */ .diagnosis__col { max-width: var(--text-col); } .diagnosis .label { margin-bottom: var(--s4); } .diagnosis .h2 { margin-bottom: var(--s5); } /* ============================================================================ 12 · B6 · SIGNATURE-GRAFIK Zwei exakt gleich lange Balken. Die Massline darunter macht die Gleichheit explizit — das ist der ganze Witz. ========================================================================= */ .signature { overflow: hidden; } /* Punktraster 2 von 3: Uebergang zur Signature-Grafik */ .signature__dots { top: -14%; left: 50%; transform: translateX(-50%); width: 120%; height: 48%; /* laeuft vor den Balken aus, liegt nicht hinter ihnen */ } .signature__figure { position: relative; margin: 0; max-width: 860px; } .signature__group + .signature__group { margin-top: 40px; } .signature__group .label { margin-bottom: var(--s3); } .signature__bar { height: 56px; background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; } .signature__fill { height: 100%; transform-origin: left center; } .signature__fill--before { width: 24%; background: var(--ink); } .signature__fill--after { width: 71%; background: var(--accent); } /* Ohne JS steht der Balken sofort im Endzustand. Erst wenn main.js die Grafik scharf schaltet, startet er bei null. */ .signature__figure.is-armed .signature__fill--after { transform: scaleX(0); transition: transform 900ms var(--ease); } .signature__figure.is-armed.is-grown .signature__fill--after { transform: scaleX(1); } .signature__measure { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s5); } /* Die Masslinie traegt die Aussage der Grafik und ist deshalb bewusst kraeftiger als eine reine Trennlinie. */ .signature__line { flex: 1; border-top: 1px solid var(--ink-faint); } .signature__tick { width: 1px; height: 12px; background: var(--ink-faint); } /* Kein Satz, der die Grafik erklaert, sondern ein Schluessel, der zu ihr gehoert. */ .signature__key { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s5); } .signature__swatch { width: 14px; height: 14px; flex: none; background: var(--accent); border-radius: 2px; } .signature__caption { margin-top: var(--s8); max-width: 42ch; } /* ============================================================================ 13 · B7 · KURSINHALT Liste, keine Kacheln. ========================================================================= */ .curriculum__list { border-top: 1px solid var(--rule); } .curriculum__row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: var(--s5); align-items: baseline; min-height: 84px; padding-block: var(--s5); border-bottom: 1px solid var(--rule); } /* Der Lehrplan fuehrt vor, was er behauptet: jeder Baustein mit Laufzeit, ab Tag 4 sichtbar noch zu. */ /* Feste Spur fuer das Schloss, damit die Laufzeiten aller Zeilen auf einer Kante stehen — auch dort, wo kein Schloss sitzt. */ .curriculum__meta { display: grid; grid-template-columns: auto 16px; align-items: center; gap: var(--s3); color: var(--ink-faint); } .curriculum__time { font-size: var(--small); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .curriculum__lock { width: 16px; height: 16px; } .curriculum__day { color: var(--ink-faint); } .curriculum__text .small { margin-top: var(--s2); } /* Inline-CTA innerhalb der Liste, abgesetzt durch --surface-2 */ .curriculum__promo { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); padding: var(--s5) var(--s6); background: var(--surface-2); border-bottom: 1px solid var(--rule); } /* ============================================================================ 14 · B8 · FAELLE Protokollform statt Testimonialform. ========================================================================= */ .case + .case { margin-top: var(--s7); padding-top: var(--s7); border-top: 1px solid var(--rule); } .case__id { margin-bottom: var(--s5); } .case__notes { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s4) var(--s6); } .case__notes dt { padding-top: .25em; } .case__notes dd { margin: 0; max-width: 52ch; } /* ============================================================================ 15 · B9 · UEBER HAYK ========================================================================= */ .about__media { grid-column: 1 / span 5; } .about__copy { grid-column: 6 / span 7; } .about__portrait { aspect-ratio: 4 / 5; background-image: var(--portrait); background-size: cover; background-position: center; border-radius: var(--radius); } .about__title { margin-block: var(--s4) var(--s5); } .about__copy .small + .small { margin-top: var(--s4); } .credentials { margin-top: var(--s7); } .credentials__item { padding-block: var(--s3); border-top: 1px solid var(--rule); } .credentials__item:last-child { border-bottom: 1px solid var(--rule); } /* ============================================================================ 16 · B10 · FAQ Kein Kartenrahmen, kein Schatten, keine Chevrons. ========================================================================= */ .faq__col { max-width: 820px; } .faq__title { margin-bottom: var(--s7); } .faq__item { border-top: 1px solid var(--rule); } .faq__item:last-child { border-bottom: 1px solid var(--rule); } .faq__q { margin: 0; } .faq__button { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s5); width: 100%; padding-block: var(--s5); text-align: left; font-size: 1.125rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.35; } /* Plus und Minus als 1px-Strich */ .faq__icon { position: relative; flex: none; width: 16px; height: 16px; margin-top: .3em; } .faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--ink-soft); } .faq__icon::before { top: 50%; left: 0; width: 16px; height: 1px; } .faq__icon::after { left: 50%; top: 0; width: 1px; height: 16px; } .faq__button[aria-expanded="true"] .faq__icon::after { display: none; } .faq__a { padding-bottom: var(--s6); } .faq__a p { max-width: 64ch; } /* ============================================================================ 17 · B11 · FINAL-CTA + FOOTER ========================================================================= */ /* Klammer um Final-CTA und Footer: ein Grund, keine Trennlinie, und die Kante, an der das Wasserzeichen angeschnitten wird. */ .closing { position: relative; overflow: hidden; } .final { text-align: center; } .final__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; } .final .h2 { max-width: 20ch; } .final__lead { margin-block: var(--s5) 40px; max-width: 44ch; } /* Outline-Wasserzeichen — genau einmal auf der ganzen Seite, rechts unten angeschnitten. */ .watermark { position: absolute; right: -4%; bottom: -22%; /* an der unteren rechten Kante angeschnitten */ z-index: 0; font-size: clamp(150px, 24vw, 380px); font-weight: 700; letter-spacing: -.045em; line-height: .8; color: transparent; -webkit-text-stroke: 1px var(--rule); pointer-events: none; user-select: none; } .site-footer { position: relative; overflow: hidden; padding-block: var(--s8) var(--s7); } .site-footer__inner { position: relative; z-index: 1; } /* Punktraster 3 von 3: Footer */ .site-footer__dots { left: -10%; right: -10%; bottom: -45%; width: 120%; height: 100%; } .site-footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s5); padding-bottom: var(--s6); border-bottom: 1px solid var(--rule); } .site-footer__nav { display: flex; gap: var(--s6); font-size: var(--small); } .site-footer__nav a { color: var(--ink-soft); } .site-footer__nav a:hover { color: var(--ink); } /* "In --label-Groesse" heisst Groesse, nicht Versalsatz: als Fliesstext gesetzt bleibt der Pflichthinweis lesbar und tritt trotzdem zurueck. */ .site-footer__disclaimer { margin-top: var(--s5); max-width: 88ch; font-size: var(--label); line-height: 1.6; color: var(--ink-faint); } /* ============================================================================ 18 · FORMULAR · ZWEISTUFIGES MODAL ========================================================================= */ .modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: var(--s5); } .modal[hidden] { display: none; } .modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); /* kein Blur */ } .modal__dialog { position: relative; width: 100%; max-width: 480px; max-height: calc(100dvh - 48px); overflow-y: auto; padding: var(--s8) var(--s7) var(--s7); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); } .modal__close { position: absolute; top: var(--s5); right: var(--s5); width: 32px; height: 32px; color: var(--ink-soft); } .modal__close span { position: relative; display: block; width: 16px; height: 16px; margin: 0 auto; } .modal__close span::before, .modal__close span::after { content: ""; position: absolute; top: 50%; left: 0; width: 16px; height: 1px; background: currentColor; } .modal__close span::before { transform: rotate(45deg); } .modal__close span::after { transform: rotate(-45deg); } .modal__close:hover { color: var(--ink); } .modal .btn { width: 100%; } /* Sekundaeraktion — traegt keinen Akzent */ .btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule-strong); } .btn--ghost:hover { background: var(--surface-2); } .field { margin-block: var(--s6); } .field__label { display: block; margin-bottom: var(--s3); color: var(--ink-soft); } .field__row { display: flex; gap: var(--s2); } .field__input, .field__select { height: 56px; padding-inline: var(--s4); background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius); } .field__input { flex: 1; min-width: 0; width: 100%; font-size: var(--body); } /* Bewusst nicht in der Mono gesetzt: die zweite Familie erscheint auf der Seite ausschliesslich klein, versal und gesperrt, nie in Formularfeldern. */ .field__select { flex: none; width: 108px; font-size: var(--small); font-variant-numeric: tabular-nums; } /* Der Fehlerzustand kommt ohne zweite Farbe aus: Text plus staerkere Kante. Getragen wird er von role="alert" und aria-invalid, nicht von Farbe. */ /* Kein zweiter Schatten auf der Seite: der Fehlerzustand zeigt sich an der Kantenfarbe und am Text, getragen von role="alert" und aria-invalid. */ .field__input[aria-invalid="true"] { border-color: var(--ink); } .field__error { margin-top: var(--s3); font-weight: 500; color: var(--ink); } .field__hint { margin-top: var(--s3); color: var(--ink-faint); } .modal__done .small { margin-top: var(--s4); } .modal__done .btn { margin-top: var(--s6); } .modal__done:focus { outline: none; } /* Seite friert ein, solange das Modal offen ist */ .is-locked { overflow: hidden; } /* ============================================================================ 19 · RESPONSIVE ========================================================================= */ /* Die Leerspalte ist ein Luxus der grossen Breite. Sobald die Textspalte unter ~540px faellt, wuerde die H1 vierzeilig — darunter also 7 statt 6 Spalten Text. */ @media (max-width: 1200px) { .hero__copy { grid-column: 1 / span 7; } .hero__media { grid-column: 8 / span 5; } } @media (max-width: 900px) { .hero { padding-top: calc(72px + var(--s8)); } .hero__copy { grid-column: 1 / span 8; } .hero__media { grid-column: 9 / span 4; } /* Drei Karten, drei Zellen. Zwei Spalten wuerden eine leere Zelle lassen. */ .modules__grid { grid-template-columns: 1fr; } .about__grid { display: block; } .about__media { max-width: 380px; margin-bottom: var(--s7); } .case__notes { grid-template-columns: 160px minmax(0, 1fr); } .signature__caption { margin-top: var(--s7); } } @media (max-width: 640px) { /* Stack: Chip, H1, Sub, CTA, Proof, Mockup. Das Mockup rutscht unter den Button. Harte Abnahmebedingung: der CTA steht auf 375x667 ueber der Falz. */ .hero { padding-top: calc(64px + var(--s5)); padding-bottom: var(--section-y); } .hero__grid { display: block; } .hero__media { margin-top: var(--s8); margin-bottom: -40px; } .hero__dots { top: -6%; right: -20%; width: 90%; height: 112%; } .site-header { height: 64px; } .btn { --btn-h: 56px; display: flex; width: 100%; } .btn--compact { --btn-h: 48px; display: inline-flex; width: auto; } /* B6 */ .signature__bar { height: 48px; } .signature__measure .label { font-size: .6875rem; } /* B7 — Tag und Laufzeit teilen sich eine Zeile, der Titel steht darunter */ .curriculum__row { grid-template-columns: 1fr auto; gap: var(--s2) var(--s4); min-height: 0; } .curriculum__day { grid-row: 1; grid-column: 1; } .curriculum__meta { grid-row: 1; grid-column: 2; } .curriculum__text { grid-row: 2; grid-column: 1 / -1; } .curriculum__promo { flex-direction: column; align-items: flex-start; gap: var(--s5); padding-inline: var(--s5); } .curriculum__promo .btn--compact { width: 100%; } /* B8 */ .case__notes { grid-template-columns: 1fr; gap: var(--s2); } .case__notes dt { padding-top: var(--s3); } /* B10 */ .faq__button { font-size: 1.0625rem; } /* B11 */ .watermark { right: -8%; bottom: -12%; } .site-footer__row { flex-direction: column; align-items: flex-start; } /* Modal */ .modal { padding: var(--s3); align-items: flex-end; } .modal__dialog { padding: var(--s7) var(--s5) var(--s6); } } /* ============================================================================ 20 · REDUCED MOTION ========================================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .btn:hover { transform: none; } /* Balken sofort im Endzustand, kein Wachsen */ .signature__figure.is-armed .signature__fill--after { transform: scaleX(1); } }