/* ============================================================================= flowwdesign — One-Pager Statifizierter Neubau der Design-Referenz "flowwdesign One-Pager v6.dc.html". Alle Werte sind aus der Referenz gezogen (dort inline). Tokens = Custom Properties. ARCHITEKTUR (wichtig zu verstehen, bevor man hier etwas ändert): - Der DEFAULT-Zustand dieses Stylesheets ist der STATIK-MODUS: die Seite steht fertig da, ohne JavaScript, ohne Scroll-Choreografie. Das ist der No-JS- und der Mobile-/reduced-motion-Zustand zugleich (Handoff-README §5). - Die Scroll-Choreografie ist ein Aufsatz: JS setzt und schreibt ~80 CSS-Variablen (--p1O, --s3ph0O, …). Jede dieser Variablen wird hier mit var(--x, FALLBACK) gelesen, und der Fallback IST der Endzustand. Fällt JS aus, greifen die Fallbacks — die Seite ist vollständig. ============================================================================= */ /* ── Tokens ────────────────────────────────────────────────────────────────── */ :root { /* Farben (Handoff-README §6) */ --ink: #1F1D19; --petrol: #14555A; --petrol-hover: #0E4347; --cream: #FAF8F4; --card: #FFFDF9; --tint: #F3EFE7; --blush-grad: #F6ECE3; --blush-fill: #F6EAE2; --petrol-tint: #F2F7F6; --line: #E9E1D3; --line-2: #E4DCCE; --line-3: #DDD3C2; --line-4: #EDE4D6; --border-hover: #B9CCCB; --sub: #5F5A52; /* 6,45:1 auf Cream — Fließtext */ --muted: #6E6355; /* 5,53:1 auf Cream */ /* ⚠️ ZWEI TOKENS WEICHEN BEWUSST VON DER REFERENZ AB — sie sind die einzigen sichtbaren Abweichungen des ganzen Builds. Grund: die Referenzwerte reißen WCAG AA deutlich, und die Seite verkauft „barrierefrei gedacht". Beide sind EIN Token-Wert — jederzeit in einer Zeile rückgängig zu machen. --muted-2 #8A8073 (3,66:1 ✗) -> #736B60 (4,95:1 ✓) --rose #C9A895 (2,08:1 ✗) -> #8C5D43 (5,26:1 ✓) Details + Vorher/Nachher: STYLEGUIDE.md §Kontrast, COPY_NOTES.md §Abweichungen. */ --muted-2: #736B60; /* Referenz: #8A8073 — siehe oben */ --muted-3: #6B655B; /* 5,44:1 */ --muted-4: #6E6960; /* 5,14:1 */ --muted-5: #6A5F53; /* 5,87:1 */ --rose: #8C5D43; /* Referenz: #C9A895 — siehe oben. Ziffern (aria-hidden) */ --ghost: #EFDCD2; --ghost-2: #F3E3D9; --overlay: rgba(31, 29, 25, 0.46); --shadow-warm: rgba(90, 62, 47, 0.4); /* Typografie */ --font-ui: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif; --font-mono: ui-monospace, Menlo, Consolas, monospace; /* Form */ --r-pill: 999px; --r-card: 18px; --r-lg: 26px; --shadow-card: 0 18px 40px -24px rgba(90, 62, 47, 0.4); --shadow-card-hover: 0 30px 62px -28px rgba(90, 62, 47, 0.45); --shadow-frame: 0 40px 90px -36px rgba(31, 29, 25, 0.25); --shadow-cta: 0 18px 44px -16px rgba(31, 29, 25, 0.35); /* Raster */ --wrap: 1220px; --wrap-hero: 1280px; --pad-x: clamp(20px, 5vw, 48px); --ease-out-back: cubic-bezier(0.22, 1, 0.36, 1); } /* ── Fonts (self-hosted, subgesetzt — OFL, Lizenzen in assets/fonts/) ──────── */ @font-face { font-family: 'Instrument Serif'; src: url('../fonts/instrument-serif-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Instrument Serif'; src: url('../fonts/instrument-serif-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } /* Variable Font: die wght-Achse (400..900) überlebt das Subsetting und ist zwingend — die Wortmarke nutzt font-weight:480 (v6:49/605), das kein statischer Schnitt kann. format('woff2') statt 'woff2-variations': der font-weight-RANGE signalisiert die Achse bereits, und die einfache Form ist breiter kompatibel. */ @font-face { font-family: 'Schibsted Grotesk'; src: url('../fonts/schibsted-grotesk-var.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; } /* ── Basis ─────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; background: var(--cream); } body { font-family: var(--font-ui); color: var(--ink); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } a { color: var(--petrol); } a:hover { color: var(--petrol-hover); } ::selection { background: rgba(20, 85, 90, 0.16); } img, svg { max-width: 100%; } /* Ein einziger, konsistenter Fokus-Stil — sichtbar auf jedem Untergrund. */ :where(a, button, summary, input, label.tab, [tabindex]):focus-visible { outline: 3px solid rgba(20, 85, 90, 0.55); outline-offset: 2px; border-radius: 4px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--cream); padding: 10px 18px; border-radius: var(--r-pill); font-size: 15px; font-weight: 600; text-decoration: none; transition: top 0.2s; } .skip-link:focus { top: 12px; color: var(--cream); } @keyframes cueFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } } @keyframes modalFade { from { opacity: 0; } to { opacity: 1; } } @keyframes modalPop { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes stepIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ── Wiederkehrende Bauteile ───────────────────────────────────────────────── */ /* Eyebrow mit Diamant-Bullet */ .eyebrow { display: flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 7px; height: 7px; border: 1.5px solid var(--petrol); box-sizing: border-box; transform: rotate(45deg); flex-shrink: 0; } .eyebrow > span { font-size: 12.5px; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600; color: var(--sub); } .serif { font-family: var(--font-display); font-weight: 400; } .it { font-style: italic; color: var(--petrol); } /* Kursive Serif-Akzente innerhalb von Grotesk-Headlines (Hero-H1/H2) */ .accent { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.06em; color: var(--petrol); } .lead { margin: 16px 0 0; font-size: 17px; line-height: 1.65; color: var(--sub); max-width: 56ch; text-wrap: pretty; } .num { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 15px; color: var(--rose); } .mono { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-2); } /* CTA-Pills */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: inherit; font-weight: 600; border-radius: var(--r-pill); border: none; cursor: pointer; text-decoration: none; transition: background 0.3s, color 0.3s, transform 0.3s var(--ease-out-back); } .btn--dark { background: var(--ink); color: var(--cream); font-size: 16.5px; padding: 15px 28px; box-shadow: var(--shadow-cta); } .btn--dark:hover { background: var(--petrol); color: var(--cream); } .btn--ghost { border: 1px solid #D8D1C2; background: rgba(255, 255, 255, 0.72); color: var(--ink); font-size: 15px; padding: 12px 20px; } .btn--ghost:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); } .btn--sm { font-size: 16px; padding: 13px 26px; } .mail-link { font-size: 16px; font-weight: 600; color: var(--petrol); text-decoration: none; border-bottom: 1.5px solid rgba(20, 85, 90, 0.35); } .mail-link:hover { color: var(--petrol-hover); border-bottom-color: var(--petrol-hover); } /* ============================================================================= HERO ============================================================================= */ .hero { position: relative; background: var(--cream); height: auto; /* Statik-Default */ } html.scroll-mode .hero { height: 300vh; } .hero__stage { position: relative; /* Statik-Default */ top: 0; height: auto; min-height: 100svh; overflow: visible; display: flex; flex-direction: column; } html.scroll-mode .hero__stage { position: sticky; height: 100svh; overflow: hidden; } /* Hintergrund-Bild + zwei Cream-Verläufe */ .hero__bg { position: absolute; inset: 0; overflow: hidden; } .hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .hero__bg::after, .hero__veil { content: ""; position: absolute; inset: 0; pointer-events: none; } .hero__bg::after { background: linear-gradient(to top, rgba(250, 248, 244, 0.45) 0%, rgba(250, 248, 244, 0.26) 42%, rgba(250, 248, 244, 0.1) 75%, rgba(250, 248, 244, 0.18) 100%); } .hero__veil { background: linear-gradient(100deg, rgba(250, 248, 244, 0.42) 0%, rgba(250, 248, 244, 0.18) 52%, rgba(250, 248, 244, 0) 78%); } /* Navigation (im Hero, nicht sticky) */ .nav { position: relative; z-index: 3; pointer-events: none; } .nav__inner { max-width: var(--wrap-hero); margin: 0 auto; padding: 20px var(--pad-x); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .nav a, .nav button, .nav .btn { pointer-events: auto; } /* Wortmarke: „flo-w-w-design" — das Doppel-w trägt −0.08em, „design" ist leichter (480). */ .wordmark { text-decoration: none; color: var(--ink); font-size: 23px; font-weight: 700; letter-spacing: -0.02em; } .wordmark .w1 { letter-spacing: -0.08em; } .wordmark .light { font-weight: 480; } .wordmark--footer { font-size: 18px; } /* Phase 1 — XL-Headline */ .hero__p1 { position: relative; /* Statik-Default */ inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; text-align: center; pointer-events: none; padding: clamp(48px, 10vw, 84px) 20px 12px; } html.scroll-mode .hero__p1 { position: absolute; padding: 0 var(--pad-x); } .hero__p1 h1 { margin: 0; max-width: 1200px; font-size: clamp(44px, 7vw, 112px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 700; color: var(--ink); text-wrap: balance; opacity: var(--p1O, 1); visibility: var(--p1V, visible); transform: var(--p1T, none); } /* Phase 2 — Copy links, Browserframe rechts */ .hero__p2 { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; pointer-events: none; min-height: 0; } .hero__p2-inner { max-width: var(--wrap-hero); width: 100%; margin: 0 auto; padding: 12px var(--pad-x) clamp(36px, 7vh, 80px); display: flex; flex-wrap: wrap; align-items: center; gap: clamp(32px, 4.5vw, 64px); } .hero__col-text { flex: 1 1 360px; min-width: 0; max-width: 620px; } .hero__col-frame { flex: 1.25 1 460px; min-width: 0; } .hero__eyebrow { margin-bottom: 20px; opacity: var(--eyeO, 1); transform: var(--eyeT, none); } .hero__eyebrow::before { width: 8px; height: 8px; } .hero__eyebrow > span { font-size: 13px; } .hero h2 { margin: 0; font-size: clamp(34px, 4.7vw, 68px); line-height: 1.06; letter-spacing: -0.027em; font-weight: 700; color: var(--ink); text-wrap: balance; opacity: var(--h1O, 1); transform: var(--h1T, none); } .hero h2 .accent { font-size: 1.05em; } .hero__sub { margin: 22px 0 0; font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.62; color: var(--sub); max-width: 52ch; text-wrap: pretty; opacity: var(--subO, 1); transform: var(--subT, none); } .hero__cta { margin-top: 30px; opacity: var(--ctaO, 1); transform: var(--ctaT, none); visibility: var(--ctaV, visible); } .hero__cta .btn { pointer-events: var(--ctaPE, auto); } .hero__micro { margin: 24px 0 0; font-size: 14px; color: var(--muted-3); } /* Browserframe „Nachher" */ .frame { width: 100%; max-width: min(640px, 100%); /* Statik-Default */ margin: 0 auto; opacity: var(--frameO, 1); transform: var(--frameT, none); } html.scroll-mode .frame { max-width: min(640px, max(calc((100svh - 220px) * 0.75), 320px)); } .frame__chrome { background: #FFFFFF; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-frame); } .frame__bar { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: #FBF8F3; border-bottom: 1px solid var(--line-4); } .frame__dots { display: flex; gap: 6px; flex-shrink: 0; } .frame__dots span { width: 9px; height: 9px; border-radius: 50%; background: #DCD0BF; } .frame__url-wrap { flex: 1; display: flex; justify-content: center; } .frame__url { background: #F2ECE1; color: var(--muted-5); font-size: 12.5px; padding: 4px 20px; border-radius: 7px; } .frame__spacer { width: 40px; flex-shrink: 0; } .frame__shot { position: relative; aspect-ratio: 3 / 4; overflow: hidden; } .frame__shot img { width: 100%; height: 100%; object-fit: cover; display: block; } .frame__note { display: flex; align-items: center; padding: 10px 16px; background: #FBF8F3; border-top: 1px solid var(--line-4); font-size: 13px; color: var(--muted-5); } /* Scroll-Cue */ .cue { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 2; pointer-events: none; opacity: var(--cueO, 0); display: flex; flex-direction: column; align-items: center; gap: 8px; } .cue span:first-child { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: rgba(31, 29, 25, 0.6); } .cue__line { display: block; width: 1.5px; height: 40px; background: linear-gradient(to bottom, rgba(31, 29, 25, 0.7), rgba(31, 29, 25, 0)); animation: cueFloat 2.4s ease-in-out 0.6s infinite; } /* ============================================================================= S3 — Warum eine neue Website ============================================================================= */ .s3 { background: var(--cream); height: auto; } html.scroll-mode .s3 { height: 400vh; } .s3__stage { position: relative; top: 0; height: auto; min-height: 100svh; overflow: visible; } html.scroll-mode .s3__stage { position: sticky; height: 100svh; overflow: hidden; } .s3__inner { max-width: var(--wrap); height: 100%; margin: 0 auto; padding: clamp(48px, 7vh, 76px) var(--pad-x) clamp(36px, 6vh, 60px); display: flex; flex-direction: column; } .s3__eyebrow { position: relative; z-index: 3; } .s3__body { flex: 1; position: relative; min-height: 0; } /* Phase 1 — Statement + 4 Verb-Spalten */ .s3__p1 { position: relative; /* Statik-Default */ inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; pointer-events: auto; } html.scroll-mode .s3__p1 { position: absolute; pointer-events: none; } .s3__p1 h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(42px, 5.6vw, 86px); line-height: 1.05; letter-spacing: -0.012em; color: var(--ink); max-width: 17ch; text-wrap: balance; opacity: var(--s3h1O, 1); transform: var(--s3h1T, none); } .s3__cols { margin-top: clamp(36px, 7vh, 84px); display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); /* Statik */ gap: 22px; } html.scroll-mode .s3__cols { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0; } .s3__col { padding: 16px 0 0 0; /* Statik */ border-top: 1px solid var(--line-2); opacity: var(--o, 1); transform: var(--t, none); } html.scroll-mode .s3__col { padding: 0 clamp(24px, 2.6vw, 44px); border-top: none; border-left: 1px solid var(--line-2); } html.scroll-mode .s3__col:first-child { padding: 0 clamp(24px, 2.6vw, 44px) 0 0; border-left: none; } .s3__col:nth-child(1) { --o: var(--s3k0O, 1); --t: var(--s3k0T, none); } .s3__col:nth-child(2) { --o: var(--s3k1O, 1); --t: var(--s3k1T, none); } .s3__col:nth-child(3) { --o: var(--s3k2O, 1); --t: var(--s3k2T, none); } .s3__col:nth-child(4) { --o: var(--s3k3O, 1); --t: var(--s3k3T, none); } .s3__col-title { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(24px, 2.3vw, 34px); color: var(--ink); margin-top: 10px; } .s3__col p { margin: 12px 0 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.62; color: var(--sub); text-wrap: pretty; } /* Phase 2 — Beweisliste + Phone */ .s3__p2 { position: relative; z-index: 1; height: 100%; margin-top: clamp(48px, 8vw, 72px); /* Statik */ display: flex; align-items: center; gap: clamp(36px, 5vw, 92px); flex-wrap: wrap; } html.scroll-mode .s3__p2 { margin-top: 0; } .s3__list-col { flex: 1.1 1 420px; min-width: 0; } .s3__list-col h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 3.3vw, 48px); line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); max-width: 20ch; text-wrap: balance; opacity: var(--s3bHO, 1); transform: var(--s3bHT, none); } .s3__tabs { margin-top: clamp(22px, 4vh, 42px); pointer-events: var(--s3RowPE, auto); } .s3__tabs-top { height: 1px; background: var(--line-2); opacity: var(--s3ListTopO, 1); } /* Die vier Beweis-Punkte. ZUSTAND = native Radio-Gruppe (kein JS-State): ohne JS bedienbar, per Tastatur nativ (Pfeiltasten), touch-tauglich. Die CSS-Variablen darüber tragen NUR die Entrance-Animation; das Aktiv/Inaktiv steuert :checked über :has(). */ .s3__tabs-group { border: 0; padding: 0; margin: 0; } .s3__radio { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); /* unsichtbar, aber fokussierbar */ white-space: nowrap; } /* ⚠️ ABWEICHUNG (dritte und letzte): Die Referenz blendet inaktive Punkte auf opacity 0.55 ab. Das drückt deren Text auf 1,46:1 — unlesbar und ein klarer AA-Bruch. Da JEDE Opacity < 1 die Sekundärfarben unter 4,5:1 zieht (gerechnet), ist die Ausblendung mit lesbarem Text nicht vereinbar. Die Hierarchie trägt stattdessen über Farbe (Petrol vs. Ink), die Petrol-Kante links und die ausgeklappte Unterzeile — alles wie in der Referenz. */ .s3__tab { display: block; border-bottom: 1px solid var(--line-2); opacity: var(--e, 1); transform: var(--t, none); transition: opacity 0.35s; } .s3__tab--0 { --e: var(--s3r0E, 1); --t: var(--s3r0T, none); } .s3__tab--1 { --e: var(--s3r1E, 1); --t: var(--s3r1T, none); } .s3__tab--2 { --e: var(--s3r2E, 1); --t: var(--s3r2T, none); } .s3__tab--3 { --e: var(--s3r3E, 1); --t: var(--s3r3T, none); } .s3__tab-label { display: block; width: 100%; text-align: left; cursor: pointer; font-family: inherit; padding: clamp(15px, 2.4vh, 24px) 0 clamp(15px, 2.4vh, 24px) 20px; border-left: 2px solid transparent; transition: border-color 0.35s; } .s3__tab-head { display: flex; align-items: baseline; gap: 13px; flex-wrap: wrap; } .s3__tab-title { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(22px, 2vw, 29px); color: var(--ink); transition: color 0.35s; } .s3__tab-kicker { font-size: 13.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted-2); } .s3__tab-sub { display: block; overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.45s var(--ease-out-back), opacity 0.35s; } .s3__tab-sub span { display: block; padding: 10px 0 2px 30px; font-size: 15.5px; line-height: 1.62; color: var(--sub); max-width: 46ch; text-wrap: pretty; } /* Aktiver Punkt + zugehöriger Phone-Screen + Fortschritts-Rauten. Der Fallback ohne :has()-Unterstützung ist der Zustand oben: Punkt 01 aktiv. */ .s3__inner:has(#s3-tab-0:checked) .s3__tab--0 .s3__tab-label, .s3__inner:has(#s3-tab-1:checked) .s3__tab--1 .s3__tab-label, .s3__inner:has(#s3-tab-2:checked) .s3__tab--2 .s3__tab-label, .s3__inner:has(#s3-tab-3:checked) .s3__tab--3 .s3__tab-label { border-left-color: var(--petrol); } .s3__inner:has(#s3-tab-0:checked) .s3__tab--0 .s3__tab-title, .s3__inner:has(#s3-tab-1:checked) .s3__tab--1 .s3__tab-title, .s3__inner:has(#s3-tab-2:checked) .s3__tab--2 .s3__tab-title, .s3__inner:has(#s3-tab-3:checked) .s3__tab--3 .s3__tab-title { color: var(--petrol); } .s3__inner:has(#s3-tab-0:checked) .s3__tab--0 .s3__tab-sub, .s3__inner:has(#s3-tab-1:checked) .s3__tab--1 .s3__tab-sub, .s3__inner:has(#s3-tab-2:checked) .s3__tab--2 .s3__tab-sub, .s3__inner:has(#s3-tab-3:checked) .s3__tab--3 .s3__tab-sub { max-height: 112px; opacity: 1; } .s3__inner:has(#s3-tab-0:focus-visible) .s3__tab--0 .s3__tab-label, .s3__inner:has(#s3-tab-1:focus-visible) .s3__tab--1 .s3__tab-label, .s3__inner:has(#s3-tab-2:focus-visible) .s3__tab--2 .s3__tab-label, .s3__inner:has(#s3-tab-3:focus-visible) .s3__tab--3 .s3__tab-label { outline: 3px solid rgba(20, 85, 90, 0.55); outline-offset: 2px; border-radius: 4px; } /* Phone */ .s3__phone-col { flex: 0 0 auto; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; opacity: var(--s3PhO, 1); transform: var(--s3PhT, none); } .phone { width: min(348px, 82vw); height: min(580px, 70svh); border: 1px solid var(--line); border-radius: 999px 999px 26px 26px; background: var(--card); box-shadow: 0 40px 90px -42px rgba(90, 62, 47, 0.45); position: relative; overflow: hidden; } .phone__screen { position: absolute; inset: 84px 28px 26px; opacity: var(--o, 0); transform: var(--t, translateY(12px)); transition: opacity 0.4s, transform 0.4s; pointer-events: none; display: flex; flex-direction: column; } .phone__screen--1 { --o: 1; --t: translateY(0px); gap: 10px; } .phone__screen--2 { gap: 11px; } .phone__screen--3 { align-items: center; justify-content: center; text-align: center; } .phone__screen--4 { align-items: center; justify-content: center; gap: 11px; text-align: center; } /* Der aktive Radio steuert, welcher Screen zu sehen ist (Crossfade 0.4s). */ .s3__inner:has(#s3-tab-1:checked) .phone__screen--1, .s3__inner:has(#s3-tab-2:checked) .phone__screen--1, .s3__inner:has(#s3-tab-3:checked) .phone__screen--1 { opacity: 0; transform: translateY(12px); } .s3__inner:has(#s3-tab-0:checked) .phone__screen--1, .s3__inner:has(#s3-tab-1:checked) .phone__screen--2, .s3__inner:has(#s3-tab-2:checked) .phone__screen--3, .s3__inner:has(#s3-tab-3:checked) .phone__screen--4 { opacity: 1; transform: translateY(0); } /* Der Häkchen-Pop und der Ticket-Einzug auf Screen 03 hingen in der Referenz an der Screen-Opacity; hier hängen sie am aktiven Radio. */ .s3__inner:has(#s3-tab-2:checked) .phone__check { transform: scale(1) rotate(0deg); } .s3__inner:has(#s3-tab-2:checked) .ticket, .s3__inner:has(#s3-tab-2:checked) .phone__cal { transform: translateY(0); } .phone__search { border: 1px solid var(--line-2); background: #FFFFFF; border-radius: var(--r-pill); padding: 9px 15px; font-size: 12.5px; color: var(--muted); } .phone__map { flex: 1; min-height: 0; border-radius: 14px; position: relative; overflow: hidden; } .phone__map img { width: 100%; height: 100%; object-fit: cover; display: block; } .phone__map-tag { position: absolute; left: 10px; bottom: 8px; font-family: var(--font-mono); font-size: 9.5px; color: var(--muted-2); background: rgba(255, 253, 249, 0.85); padding: 2px 7px; border-radius: 5px; } .phone__result { background: #FFFFFF; border: 1px solid var(--line); border-radius: 13px; padding: 11px 13px; } .phone__result-title { font-size: 14.5px; font-weight: 700; color: var(--ink); } .stars { color: var(--petrol); letter-spacing: 1.5px; font-size: 11px; } .phone__result-meta { font-size: 10.5px; color: var(--muted-2); margin-top: 2px; } .phone__chips { display: flex; gap: 6px; margin-top: 9px; } .chip { border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 3px 11px; font-size: 10.5px; color: var(--muted); } .chip--petrol { border-color: var(--petrol); background: var(--petrol-tint); color: var(--petrol); font-weight: 600; } .phone__rev-head { text-align: center; } .phone__rev-name { font-family: var(--font-display); font-size: 22px; color: var(--ink); } .phone__rev-stars { color: var(--petrol); letter-spacing: 2.5px; font-size: 13px; margin-top: 3px; } .phone__rev-label { font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--muted-2); margin-top: 3px; } .phone__quote { background: #FCF9F7; border: 1px solid #EFE8DA; border-radius: 14px; padding: 12px; } .phone__quote p { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 15.5px; line-height: 1.45; color: var(--ink); } .phone__quote cite { display: block; font-style: normal; font-size: 10px; color: var(--muted-2); margin-top: 6px; } .phone__all { font-size: 12px; font-weight: 600; color: var(--petrol); text-align: center; margin-top: auto; } .phone__check { width: clamp(38px, 7svh, 46px); height: clamp(38px, 7svh, 46px); flex-shrink: 0; border-radius: var(--r-pill); border: 1.5px solid var(--petrol); background: var(--petrol-tint); display: flex; align-items: center; justify-content: center; transform: scale(0.55) rotate(-18deg); transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.18s; } .phone__confirm-title { font-family: var(--font-display); font-size: 23px; color: var(--ink); margin-top: clamp(8px, 2.2svh, 12px); flex-shrink: 0; } .phone__confirm-sub { font-size: 11px; color: var(--muted-2); margin-top: 3px; flex-shrink: 0; } .ticket { width: 100%; flex-shrink: 0; background: #FFFFFF; border: 1px solid var(--line); border-radius: 16px; margin-top: clamp(10px, 3svh, 16px); position: relative; overflow: hidden; transform: translateY(10px); transition: transform 0.5s var(--ease-out-back) 0.28s; } .ticket__via { position: absolute; top: 10px; right: 12px; font-family: var(--font-mono); font-size: 9px; color: var(--muted-2); } .ticket__top { padding: clamp(11px, 2.6svh, 16px) 16px clamp(9px, 2svh, 13px); } .ticket__date { font-size: 10.5px; color: var(--muted-2); } .ticket__time { font-family: var(--font-display); font-size: clamp(26px, 5.5svh, 32px); color: var(--petrol); line-height: 1.1; margin-top: 2px; } .ticket__perf { position: relative; height: 0; border-top: 1px dashed var(--line-2); } .ticket__perf span { position: absolute; top: -8px; width: 16px; height: 16px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--line); } .ticket__perf span:first-child { left: -8px; } .ticket__perf span:last-child { right: -8px; } .ticket__bottom { padding: clamp(9px, 2svh, 13px) 16px clamp(11px, 2.4svh, 15px); } .ticket__svc { font-size: 13.5px; font-weight: 700; color: var(--ink); } .ticket__meta { font-size: 11px; color: var(--muted-2); margin-top: 2px; } .phone__cal { border: 1px solid var(--petrol); background: var(--petrol-tint); border-radius: var(--r-pill); padding: 8px 18px; font-size: 11.5px; color: var(--petrol); font-weight: 600; margin-top: clamp(9px, 2.6svh, 14px); flex-shrink: 0; transform: translateY(10px); transition: transform 0.5s var(--ease-out-back) 0.36s; } .phone__brand-name { font-family: var(--font-display); font-size: 29px; color: var(--ink); } .phone__brand-claim { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 13.5px; color: var(--petrol); } .phone__rule { width: 44px; height: 1px; background: var(--line-2); } .phone__grid { display: flex; gap: 8px; width: 100%; margin-top: 6px; } .phone__grid img { flex: 1; aspect-ratio: 1 / 1; border-radius: 9px; object-fit: cover; min-width: 0; } .phone__brand-note { margin: 6px 0 0; font-size: 12px; line-height: 1.55; color: var(--sub); } .phone__caption { font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); } /* Dots + Cue */ .s3__foot { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; pointer-events: none; } .s3__foot-inner { position: relative; height: 54px; display: flex; align-items: flex-end; justify-content: center; } .s3__cue { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; opacity: var(--s3CueO, 0); } .s3__cue span:first-child { font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: rgba(31, 29, 25, 0.55); } .s3__cue-line { display: block; width: 1.5px; height: 30px; background: linear-gradient(to bottom, rgba(31, 29, 25, 0.65), rgba(31, 29, 25, 0)); animation: cueFloat 2.4s ease-in-out 0.6s infinite; } .s3__dots { display: flex; align-items: center; gap: 11px; padding-bottom: 5px; opacity: var(--s3DotsO, 0); } .s3__dots span { width: 7px; height: 7px; border: 1.5px solid var(--petrol); box-sizing: border-box; transform: rotate(45deg); background: transparent; transition: background 0.3s; } /* Gefüllt sind alle Rauten bis zum aktiven Punkt (wie in der Referenz). */ .s3__inner:has(#s3-tab-0:checked) .s3__dots span:nth-child(1), .s3__inner:has(#s3-tab-1:checked) .s3__dots span:nth-child(-n+2), .s3__inner:has(#s3-tab-2:checked) .s3__dots span:nth-child(-n+3), .s3__inner:has(#s3-tab-3:checked) .s3__dots span { background: var(--petrol); } /* ============================================================================= S4 — Leistung (Kartenstapel) ============================================================================= */ .s4 { background: linear-gradient(165deg, var(--blush-grad) 0%, var(--tint) 55%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .s4__inner { max-width: var(--wrap); margin: 0 auto; padding: clamp(76px, 9vw, 120px) var(--pad-x); } .s4__head { opacity: var(--s4HeadO, 1); transform: var(--s4HeadT, none); display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap; } .s4__head h2, .s5__head h2, .s6 h2, .s7 h2 { margin: 18px 0 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 4vw, 52px); line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; } .s4__hint { padding-bottom: 6px; } .s4__cards { display: flex; flex-direction: column; gap: 12px; margin-top: clamp(30px, 4vw, 44px); } .s4__wrap { position: relative; transform: var(--t, none); } .s4__wrap:nth-child(1) { z-index: 5; --t: var(--s4w1T, none); } .s4__wrap:nth-child(2) { z-index: 4; --t: var(--s4w2T, none); } .s4__wrap:nth-child(3) { z-index: 3; --t: var(--s4w3T, none); } .s4__wrap:nth-child(4) { z-index: 2; --t: var(--s4w4T, none); } .s4__wrap:nth-child(5) { z-index: 1; --t: var(--s4w5T, none); } /* Karte =

: ohne JS per Klick/Tastatur bedienbar (nativ), mit JS zusätzlich Hover-Vorschau auf Zeigegeräten. Optik = Referenz. */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px clamp(18px, 2.6vw, 26px); box-shadow: var(--shadow-card); transition: border-color 0.3s, box-shadow 0.3s; } .card[open], .card:hover, .card:focus-within { border-color: var(--border-hover); box-shadow: var(--shadow-card-hover); } .card__row { display: flex; align-items: baseline; gap: 14px; cursor: pointer; list-style: none; } .card__row::-webkit-details-marker { display: none; } .card__num { font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--rose); width: 30px; flex-shrink: 0; } .card__title { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 24px); line-height: 1.2; color: var(--ink); } .card__teaser { flex: 1 1 auto; text-align: right; font-size: 13.5px; color: var(--muted-2); min-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card__body p { margin: 14px 2px 4px clamp(0px, 6vw, 44px); border-top: 1px solid var(--line-2); padding-top: 13px; font-size: 15px; line-height: 1.65; color: var(--sub); max-width: 66ch; text-wrap: pretty; } /* Weiches Auf-/Zuklappen, wo der Browser es kann; sonst schlicht sofort offen. */ @supports selector(::details-content) { .card::details-content { block-size: 0; overflow: hidden; transition: block-size 0.55s var(--ease-out-back), content-visibility 0.55s allow-discrete; } .card[open]::details-content { block-size: auto; } } /* ============================================================================= S5 — Ablauf (Countdown) ============================================================================= */ .s5 { background: var(--cream); position: relative; overflow: hidden; } .s5__ghost { position: absolute; right: max(-14px, -1vw); bottom: clamp(-120px, -8vw, -70px); font-family: var(--font-display); font-style: italic; font-size: clamp(230px, 28vw, 400px); line-height: 1; color: var(--ghost-2); user-select: none; pointer-events: none; } .s5__inner { position: relative; max-width: var(--wrap); margin: 0 auto; padding: clamp(88px, 10vw, 132px) var(--pad-x); } .s5__head { opacity: var(--s5HeadO, 1); transform: var(--s5HeadT, none); } .s5__head h2 { font-size: clamp(36px, 4.2vw, 56px); line-height: 1.08; } .s5__head .lead { max-width: 52ch; } .s5__axis { position: relative; margin-top: clamp(48px, 6vw, 76px); height: 1px; background: var(--line-3); } .s5__fill { position: absolute; inset: 0; background: var(--petrol); transform: var(--s5BarS, scaleX(1)); transform-origin: left center; } .s5__tick { position: absolute; top: -5px; width: 11px; height: 11px; border: 1.5px solid var(--petrol); box-sizing: border-box; } .s5__tick:nth-of-type(2) { left: 0; background: var(--s5t1B, #F2F7F6); transform: var(--s5t1S, rotate(45deg)); } .s5__tick:nth-of-type(3) { left: 50%; margin-left: -5.5px; background: var(--s5t2B, #F2F7F6); transform: var(--s5t2S, rotate(45deg)); } .s5__tick:nth-of-type(4) { right: 0; background: var(--s5t3B, #F2F7F6); transform: var(--s5t3S, rotate(45deg)); } .s5__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: clamp(40px, 4vw, 64px) clamp(36px, 6vw, 88px); margin-top: clamp(34px, 4.5vw, 56px); } .s5__col { opacity: var(--o, 1); transform: var(--t, none); } .s5__col:nth-child(1) { --o: var(--s5c1O, 1); --t: var(--s5c1T, none); } .s5__col:nth-child(2) { --o: var(--s5c2O, 1); --t: var(--s5c2T, none); } .s5__col:nth-child(3) { --o: var(--s5c3O, 1); --t: var(--s5c3T, none); } .s5__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--muted-2); } .s5__label--petrol { color: var(--petrol); } .s5__steps { display: flex; flex-direction: column; gap: clamp(28px, 3.5vw, 44px); margin-top: clamp(20px, 2.5vw, 30px); } .s5__step { display: flex; gap: 16px; } .s5__step .num { width: 32px; flex-shrink: 0; padding-top: 5px; } .s5__step-title { font-family: var(--font-display); font-size: clamp(21px, 1.9vw, 25px); line-height: 1.2; color: var(--ink); } .s5__step-title--petrol { color: var(--petrol); } .s5__step p { margin: 7px 0 0; font-size: 14px; line-height: 1.65; color: var(--muted-2); max-width: 30ch; text-wrap: pretty; } /* ============================================================================= S6 — Über ============================================================================= */ .s6 { background: var(--tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; } .s6__inner { max-width: var(--wrap); margin: 0 auto; padding: clamp(76px, 9vw, 120px) var(--pad-x); display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(36px, 5vw, 72px); } .s6__left { flex: 0.7 1 280px; min-width: 0; opacity: var(--s6LO, 1); transform: var(--s6LT, none); } .s6__figure { max-width: 360px; margin: 0; padding: 10px; } .s6__figure img { width: 100%; aspect-ratio: 3 / 4; border-radius: 999px 999px 14px 14px; object-fit: cover; display: block; } .s6__right { flex: 1.3 1 400px; min-width: 0; opacity: var(--s6RO, 1); transform: var(--s6RT, none); } .s6__text { margin: 22px 0 0; font-family: var(--font-display); font-size: 20px; line-height: 1.6; color: var(--ink); max-width: 58ch; text-wrap: pretty; } .s6__contact { margin: 20px 0 0; font-size: 17px; color: var(--ink); } .s6__contact a { color: var(--petrol); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid rgba(20, 85, 90, 0.35); } .s6__contact a:hover { color: var(--petrol-hover); border-bottom-color: var(--petrol-hover); } /* ============================================================================= S7 — FAQ ============================================================================= */ .s7 { background: var(--cream); } .s7__inner { max-width: var(--wrap); margin: 0 auto; padding: clamp(76px, 9vw, 120px) var(--pad-x); display: flex; flex-wrap: wrap; gap: clamp(36px, 5vw, 72px); } .s7__head-col { flex: 0.8 1 280px; min-width: 0; } .s7__head { opacity: var(--s7HeadO, 1); transform: var(--s7HeadT, none); } .s7__head h2 { max-width: 14ch; } .s7__list { flex: 1.4 1 420px; min-width: 0; border-top: 1px solid var(--line-2); } .faq { border-bottom: 1px solid var(--line-2); opacity: var(--o, 1); transform: var(--t, none); } .faq:nth-of-type(1) { --o: var(--s7i1O, 1); --t: var(--s7i1T, none); } .faq:nth-of-type(2) { --o: var(--s7i2O, 1); --t: var(--s7i2T, none); } .faq:nth-of-type(3) { --o: var(--s7i3O, 1); --t: var(--s7i3T, none); } .faq:nth-of-type(4) { --o: var(--s7i4O, 1); --t: var(--s7i4T, none); } .faq:nth-of-type(5) { --o: var(--s7i5O, 1); --t: var(--s7i5T, none); } .faq:nth-of-type(6) { --o: var(--s7i6O, 1); --t: var(--s7i6T, none); } .faq__q { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 18px; padding: 19px 2px; cursor: pointer; text-align: left; font-family: inherit; list-style: none; } .faq__q::-webkit-details-marker { display: none; } .faq__q-text { display: flex; align-items: baseline; gap: 14px; min-width: 0; } .faq__num { font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--rose); flex-shrink: 0; min-width: 24px; } .faq__label { font-size: 17.5px; font-weight: 600; color: var(--ink); transition: color 0.3s; } .faq[open] .faq__label { color: var(--petrol); } .faq__ico { font-family: var(--font-display); color: var(--petrol); font-size: 27px; font-weight: 400; line-height: 1; flex-shrink: 0; transition: transform 0.35s var(--ease-out-back); } .faq[open] .faq__ico { transform: rotate(45deg); } .faq__a { margin: 0; padding: 2px 2px 20px; font-size: 16px; line-height: 1.65; color: var(--sub); max-width: 64ch; } @supports selector(::details-content) { .faq::details-content { block-size: 0; overflow: hidden; transition: block-size 0.5s var(--ease-out-back), content-visibility 0.5s allow-discrete; } .faq[open]::details-content { block-size: auto; } } /* ============================================================================= S8 — Schluss-CTA ============================================================================= */ .s8 { background: var(--cream); } .s8__inner { max-width: var(--wrap); margin: 0 auto; padding: clamp(24px, 4vw, 48px) var(--pad-x) clamp(88px, 10vw, 128px); } .s8__panel-wrap { opacity: var(--s8O, 1); transform: var(--s8PT, scale(1)); } .s8__panel { position: relative; border-radius: 28px; overflow: hidden; border: 1px solid var(--line); min-height: clamp(380px, 46vh, 480px); display: flex; align-items: center; justify-content: center; } .s8__bg { position: absolute; inset: 0; } .s8__bg-inner { position: absolute; inset: 0; transform: var(--s8BgT, scale(1.02)); } .s8__veil { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 130% at 50% 55%, rgba(246, 234, 226, 0.92) 0%, rgba(246, 234, 226, 0.72) 55%, rgba(250, 248, 244, 0.5) 100%); } .s8__content { position: relative; z-index: 2; max-width: 660px; padding: 56px clamp(20px, 4vw, 44px); text-align: center; } .s8__content h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 4.2vw, 54px); line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; opacity: var(--s8hO, 1); transform: var(--s8hT, none); } .s8__content p { margin: 18px auto 0; font-size: 17px; line-height: 1.65; color: var(--sub); max-width: 52ch; text-wrap: pretty; opacity: var(--s8pO, 1); transform: var(--s8pT, none); } .s8__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; margin-top: 32px; opacity: var(--s8cO, 1); transform: var(--s8cT, none); } .s8__magnet { display: inline-block; padding: 10px; margin: -10px; } .s8__magnet .btn { transform: var(--s8BtnT, none); } /* ============================================================================= Footer ============================================================================= */ .site-footer { background: var(--cream); border-top: 1px solid var(--line-2); } .site-footer__inner { opacity: var(--ftO, 1); transform: var(--ftT, none); max-width: var(--wrap); margin: 0 auto; padding: 30px var(--pad-x); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; } .site-footer__copy { font-size: 14px; color: var(--muted-4); } .site-footer__links { display: flex; align-items: center; gap: 22px; } .site-footer__links a { font-size: 14.5px; color: var(--sub); text-decoration: none; padding: 12px 4px; margin: -12px -4px; /* Hit-Area 42px ohne Layout-Sprung */ } .site-footer__links a:hover { color: var(--petrol); } /* ============================================================================= Anfrage-Dialog Basis: natives