/* ========================================================================== Der Workshop-Tag — Optima Solutions Design-System & statisches Layout (Task 3) Anmutung: editorial, viel Weißraum, große Poppins-Headlines, Optima-Blau ausschließlich als gezielter Akzent. ========================================================================== */ /* --- 1. Tokens ----------------------------------------------------------- */ :root{ --blue:#298DCC; --blue-deep:#1B6EA3; --ink:#0B1215; --offwhite:#EDF3F4; /* --blue (#298DCC) auf Weiß liegt bei ~3,6:1 — zu wenig für normalen Text/Interaktionsflächen (WCAG AA verlangt 4,5:1 für Text < 24px). --blue-deep (~5,5:1 auf Weiß) übernimmt daher alle Buttons/Badges/ kleinen blauen Texte; --blue bleibt für große Schrift (Timer), dekorative Hairlines/Icons (≥3:1 reicht dort) und den Uhr-Punkt. --blue-hover ist eine weiter abgedunkelte Hover-Stufe für Flächen, deren Ruhezustand bereits --blue-deep nutzt (sonst wäre Hover == Ruhezustand, kein sichtbares Feedback mehr). */ --blue-hover:color-mix(in srgb, var(--blue-deep) 80%, black); --bg-morning:#F7FAFB; --bg-noon:#FDF9F2; --bg-evening:#E9EEF2; --font:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif; --step-0:clamp(1rem,.95rem + .3vw,1.125rem); --step-2:clamp(1.5rem,1.2rem + 1.5vw,2.25rem); --step-4:clamp(2.4rem,1.8rem + 3vw,4.5rem); /* Ergänzungen */ --step--1:clamp(.75rem,.72rem + .12vw,.8125rem); --step-1:clamp(1.125rem,1.05rem + .45vw,1.375rem); --step-3:clamp(1.75rem,1.35rem + 1.9vw,2.875rem); /* Obergrenze von 5rem auf 4rem. Das Markup gibt drei vor, also drei gesetzte Zeilen. Bei 80px brauchte jede davon zwei bis drei Umbrüche: "Ein Workshop-" / "Tag." trennte das Kernversprechen am Bindestrich, "Danach" stand allein. Bei 64px (zusammen mit der breiteren Textspalte in Block 10) beginnt jede Copy-Zeile auf einer eigenen Zeile, nur die längste bricht noch einmal -- und der komplette Hero inklusive CTA passt bei 900px Viewporthöhe über die Falz. */ --step-5:clamp(2.2rem,1.5rem + 3.4vw,4rem); --paper:#FFFFFF; --ink-70:rgba(11,18,21,.68); /* War rgba(11,18,21,.46) — Lighthouse/axe (Task 9) maß dafür nur 3,1:1 auf den hellen Section-Hintergründen (Sektions-Eyebrow, .objektdaten dt, Timer-Einheit, Paket-Preis; alle < 14px). Auf .6 angehoben: ≥4,7:1 auf allen --bg-*/--paper/--offwhite-Flächen, WCAG AA erfüllt. Der Name "ink-45" bleibt (viele Stellen referenzieren ihn), der tatsächliche Alpha-Wert weicht seit diesem Fix bewusst ab. */ --ink-45:rgba(11,18,21,.6); --ink-15:rgba(11,18,21,.15); --line:rgba(11,18,21,.12); --blue-soft:rgba(41,141,204,.42); --gutter:clamp(1.25rem,5vw,4rem); --maxw:72rem; /* Header-Metrik als Token: Das Logo ist der Markenanker und bestimmt die Headerhöhe (es ist stets höher als der Header-CTA). --header-h leitet sich daraus ab, damit alles, was unter dem Header beginnt (Tagesuhr, Hero-Oberkante), rechnerisch an ihm hängt statt per Augenmaß gesetzter Einzelwerte -- sonst kollidiert die Uhr mit dem Header, sobald die Logohöhe geändert wird (genau das war vor der Vergrößerung der Fall). */ --logo-h:clamp(2.25rem,3.5vw,3.125rem); --header-pad-y:clamp(1rem,2.2vw,1.6rem); --header-h:calc(var(--logo-h) + var(--header-pad-y) * 2); --shadow-paper:0 28px 60px -40px rgba(11,18,21,.45),0 2px 8px -6px rgba(11,18,21,.25); --ease:cubic-bezier(.2,.7,.3,1); } /* --- 2. Reset & Basis ---------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} /* Kein scroll-behavior:smooth — kollidiert mit ScrollTrigger (Tasks 4–7). */ /* overflow-x:clip auf BEIDEN Ebenen (html UND body) nötig: Chrome propagiert overflow von body auf den Viewport nur, wenn html selbst keinen eigenen overflow-Wert setzt (UA-Regel, siehe CSSOM-View). Da html hier keinen Wert hatte (Default: visible), blieb der Viewport scrollbar, obwohl body allein bereits clip gesetzt hatte — .rail.rail- gsap (overflow-x:visible, nötig für die GSAP-Fahrt in Block 13) reicht dadurch bis zur Dokumentbreite (scrollWidth 1944 bei 1440 Viewport) und ließ sich per Shift+Wheel/Trackpad seitlich scrollen. Root-Cause-Fix: clip auf html UND body — GSAP-Rail-Fahrt (transform:x, nicht scroll) und alle Pins bleiben unberührt, da diese über transform statt Scroll laufen (verifiziert: scrollTo(500,0) bleibt bei x=0). */ html{overflow-x:clip} body{ margin:0; overflow-x:clip; background:var(--bg-morning); color:var(--ink); font-family:var(--font); font-size:var(--step-0); font-weight:400; line-height:1.62; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } h1,h2,h3,p,ul,dl,dd,figure{margin:0} ul{padding:0} img,svg{display:block;max-width:100%} a{color:inherit} [hidden]{display:none !important} ::selection{background:var(--blue);color:#fff} :focus-visible{ outline:2px solid var(--blue); outline-offset:4px; border-radius:1px; } /* Skip-Link: erster Fokusstopp der Seite (steht vor

im Markup). Visuell ausgeblendet, bis er per Tab fokussiert wird -- dann fest positioniert über allem (z-index höher als Header 100/.sticky-cta 120), damit Tastatur-Nutzer den kompletten Header/.dayclock/Rail-Setup überspringen und direkt bei

landen können. */ .skip-link{ position:fixed; top:-100%; left:1rem; z-index:200; padding:.85em 1.25em; background:var(--blue-deep); color:#fff; font-size:var(--step-0); font-weight:600; text-decoration:none; border-radius:2px; } .skip-link:focus-visible{ top:1rem; outline-color:#fff; } /* Feine Papierkörnung — Textur statt Farbverlauf-Slop. z-index bewusst UNTER allen interaktiven Ebenen (Header 100, .dayclock 90, .sticky-cta 120) statt darüber -- sonst läge das Korn (auch wenn pointer-events:none es nicht klickbar macht) optisch vor Header/Sticky- CTA/Uhr und würde ihre Kanten/Schatten überzeichnen. 50 reicht, um weiterhin über dem gesamten Seiteninhalt (kein anderes Element nutzt einen z-index zwischen 2 und 90) zu liegen. */ body::after{ content:""; position:fixed; inset:0; z-index:50; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* --- 3. Sektions-Raster -------------------------------------------------- */ /* Jede Sektion: volle Viewporthöhe, Inhaltsspalte max. 72rem zentriert, Randspalten für Vollbreiten-Elemente (Rail). Bewusst "main section" (Nachfahre) statt "main>section" (Direktkind, Task 3-Original): ScrollTrigger.create({pin:true}, Task 5) verpackt die gepinnte Section in einen zusätzlichen ".pin-spacer"-Wrapper-Div, der zwischen

und

) -- inline-flex würde sie dort aus dem Textfluss heben. Inline-Links in einem Textblock sind von der 44px-Regel ohnehin ausgenommen (WCAG 2.5.5). */ footer>.footer-link{ display:inline-flex; align-items:flex-end; min-height:44px; } footer :focus-visible{outline-color:#fff} @media (max-width:47.99rem){ footer p{width:100%;margin-right:0} } /* --- 18. Reduced Motion -------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } /* --- 19. Scroll-Engine: Reveal-Startzustände (Task 4/5) ------------------ */ /* Nur main.js setzt die Klasse "js-scroll" (und nur, wenn nicht reduced motion) — erst dann greifen diese opacity:0-Startzustände. Ohne JS bzw. bei reduced motion bleibt die Klasse aus und der gesamte Inhalt ist von Anfang an sichtbar (progressive enhancement). Die y-Versatz-Werte für die Einblend-Animation setzt GSAP selbst (siehe main.js .fromTo()-Aufrufe) — hier wird nur die Sichtbarkeit gesteuert, um Werte nicht zu duplizieren. */ .js-scroll #hero h1 .line, .js-scroll .hero-copy .sub, .js-scroll .hero-copy .cta-button, .js-scroll .hero-copy .cta-note, .js-scroll #problem .zeitfresser, .js-scroll #problem .abbinder, .js-scroll #ablauf .ablauf-shot, .js-scroll #gruender .gruender-copy, .js-scroll #pakete .paket{ opacity:0; } /* --- 20. FAQ-Öffnen-Animation (Task 8) ------------------------------ */ /* Reines CSS, kein JS: ::details-content (Chromium 131+) ist die vom Browser generierte Wrapper-Box um den Inhalt von

(alles außer

) und lässt sich unabhängig vom nativen Auf-/Zuklappen transitionieren -- damit animieren Öffnen UND Schließen gleichermaßen (der alte Ansatz über die Höhe des

animierte nur das Öffnen, weil das Entfernen von [open] den Inhalt sofort nativ versteckte). Der @supports-Guard prüft interpolate-size, da beide Features im selben Chromium-Release landeten und interpolate-size zuverlässig feature- detectable ist; ohne Unterstützung bleibt Block 16 unverändert wirksam: natives, sofortiges Auf-/Zuklappen ohne jede Animation (details/summary funktioniert immer nativ, auch ohne JS/CSS hier -- reiner Fortschritts- Fallback, keine Funktionseinbuße). content-visibility läuft per allow-discrete mit, damit der Inhalt während der block-size-Transition sichtbar/interaktionsfähig bleibt statt sofort auszublenden. */ @supports (interpolate-size: allow-keywords){ .faq-liste details{interpolate-size:allow-keywords} .faq-liste details::details-content{ block-size:0; overflow:hidden; transition:block-size .35s var(--ease),content-visibility .35s allow-discrete; } .faq-liste details[open]::details-content{ block-size:auto; } }