/* TROTZDEM · Horizont – das einzige Stylesheet des Horizont-Seitenbaums.
Geladen wird es ausschliesslich von templates/horizont/fe_page_horizont.html5,
und dieses Seitenlayout hängt nur an den Seiten unter der Wurzel „Horizont".
Deshalb dürfen hier ungescopte Element- und Utility-Selektoren stehen
(body, h1/h2/h3, a, img, .wrap, .btn, .pic …): sie erreichen keine Seite des
EclipseX-Baums, der weiterhin sein eigenes PCT-Stylesheet lädt (siehe
Trotzdem\HorizontBundle\EventListener\FilterPctStylesheetsListener).
Wird das Stylesheet je in ein anderes Layout eingebunden, muss es vorher
unter einen gemeinsamen Wrapper gescopt werden (".hz …" – die Klasse trägt
der bereits).
Schriften – selbst gehostet, kein Google-Fonts-CDN und kein
PCT-Theme-Designer-CSS. Die woff2-Dateien liegen im Bundle
(packages/trotzdem-horizont/public/fonts/, ausgeliefert als
public/bundles/trotzdemhorizont/fonts/). Die Pfade sind RELATIV zu dieser
Datei – url() in CSS löst gegen das Stylesheet auf, nicht gegen den
des Dokuments. Damit bringt das Bundle seine Schriften selbst
mit und hängt nicht mehr an files/cto_layout (PCT-Lieferumfang), das mit dem
Abbau der PCT-Module verschwindet.
Gewichte: Raleway 200/300/400/600/700 (Überschriften, Buttons, Nav),
Roboto 300/400/500/700 (Fließtext). font-display:swap, damit der Text sofort
sichtbar ist. */
@font-face{font-family:'Raleway';font-style:normal;font-weight:200;font-display:swap;src:url('fonts/raleway-v34-latin-200.woff2') format('woff2')}
@font-face{font-family:'Raleway';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/raleway-v34-latin-300.woff2') format('woff2')}
@font-face{font-family:'Raleway';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/raleway-v34-latin-regular.woff2') format('woff2')}
@font-face{font-family:'Raleway';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/raleway-v34-latin-600.woff2') format('woff2')}
@font-face{font-family:'Raleway';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/raleway-v34-latin-700.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/roboto-v32-latin-300.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/roboto-v32-latin-regular.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/roboto-v32-latin-500.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/roboto-v32-latin-700.woff2') format('woff2')}
@font-face{font-family:'Roboto Mono';font-weight:300;font-display:swap;src:url('fonts/roboto-mono-300.woff2') format('woff2')}
@font-face{font-family:'Roboto Mono';font-weight:400;font-display:swap;src:url('fonts/roboto-mono-400.woff2') format('woff2')}
/* TROTZDEM · Horizont – gemeinsame Tokens, Nav, Buttons, Footer, Motion-Basis
Quelle der Tokens: docs/research/redesign-trotzdem-works/bestand.md §10 */
@property --a { syntax:''; inherits:false; initial-value:0deg; }
/* Szenenfortschritt. Registriert, damit er per Scroll-Timeline interpoliert werden kann. */
@property --p { syntax:''; inherits:true; initial-value:0; }
@property --pp { syntax:''; inherits:true; initial-value:0; }
:root{
--blue:#00509d; --blue-d:#03264d; --blue-x:#020f22;
/* Ableitungen für Text auf Tiefblau (Logo-Farben sind auf dunklem Grund nicht lesbar) */
--sky:#6fb1ff; --green:#57c877; --yellow:#ffc300; --red:#e0524f;
--logo-blue:#00509d; --logo-green:#2b9348; --logo-yellow:#ffc300; --logo-red:#a70b0b;
--txt:#eef3fa; --muted:#8fa6c2; --line:rgba(255,255,255,.1);
--font-h:'Raleway',system-ui,sans-serif; --font-b:'Roboto',system-ui,sans-serif; --font-m:'Roboto Mono',monospace;
--ease:cubic-bezier(.2,.7,.2,1);
--nav-h:88px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--blue-x);color:var(--txt);font-family:var(--font-b);font-weight:300;line-height:1.65;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3{font-family:var(--font-h);margin:0;line-height:1;letter-spacing:-.03em;font-weight:200}
h1 b,h2 b,h3 b{font-weight:700}
.wrap{width:min(1320px,calc(100% - 96px));margin:0 auto}
.mono{font-family:var(--font-m);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
main,header,footer{position:relative;z-index:1}
main{overflow-x:clip}
/* Atmosphäre */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(1200px 800px at 70% -10%,rgba(0,80,157,.55),transparent 60%),radial-gradient(900px 600px at 10% 110%,rgba(0,80,157,.35),transparent 60%),var(--blue-x)}
.sky::after{content:"";position:absolute;inset:0;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Buttons: Sekundär = Liquid Fill, Primär (.btn-fill) = Border Beam + Hover-Glow */
.btn{display:inline-flex;align-items:center;gap:12px;padding:16px 26px;border-radius:999px;font-family:var(--font-h);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--sky);color:var(--sky);position:relative;isolation:isolate;overflow:hidden;cursor:pointer;background:transparent;transition:color .4s var(--ease),transform .35s var(--ease),box-shadow .35s}
.btn::before{content:"";position:absolute;left:-10%;right:-10%;bottom:-10%;height:0;background:var(--sky);border-radius:45% 45% 0 0;transition:height .55s var(--ease),border-radius .55s;z-index:-1}
.btn:hover{color:var(--blue-x)}
.btn:hover::before{height:130%;border-radius:0}
.btn-fill{background:rgba(255,255,255,.04);border-color:transparent;color:#fff;padding:18px 30px}
/* Ring exakt in der Knopfkontur (inset 0): mit -1px lag er teils außerhalb und wurde vom overflow:hidden des Knopfs an den Ecken weggeschnitten – der Beam fehlte dann unten rechts. */
.btn-fill::before{left:0;right:0;top:0;bottom:0;height:auto;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--a),transparent 0 70%,var(--sky) 85%,#fff 92%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:beam 2.4s linear infinite;transition:none}
.btn-fill::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid var(--line);z-index:-2;transition:background .4s}
@keyframes beam{to{--a:360deg}}
.btn-fill:hover{color:#fff;transform:translateY(-2px);box-shadow:0 0 0 5px rgba(111,177,255,.14),0 18px 44px -16px rgba(111,177,255,.85)}
.btn-fill:hover::before{height:auto}
.btn-fill:hover::after{background:rgba(111,177,255,.14)}
.btn[disabled],.btn.is-busy{opacity:.6;pointer-events:none}
/* Wortmarke: offizielles Logo-SVG (assets/logo-white.svg, aus dem Design System) */
.wordmark-img{height:22px;width:auto;display:block}
.wordmark-img.sm{height:18px;margin-bottom:16px}
/* Nur für Screenreader: aus dem Bild genommen, aber im Zugänglichkeitsbaum.
"display:none"/"visibility:hidden" wäre falsch – das entfernt das Element. */
.hz-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Sprungmarke „Zum Inhalt": erstes Element im , per Tastatur erreichbar,
sonst außerhalb des Viewports. Kein "display:none"/"visibility:hidden" –
das nimmt das Element aus der Tabreihenfolge. */
.hz-skip{position:fixed;left:16px;top:-120px;z-index:60;padding:14px 22px;border-radius:999px;background:var(--sky);color:var(--blue-x);font-family:var(--font-h);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;transition:top .2s var(--ease)}
.hz-skip:focus{top:16px;outline:2px solid #fff;outline-offset:2px}
/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
.nav.scrolled,.nav.open{background:rgba(2,15,34,.82);backdrop-filter:blur(16px);border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);transition:height .4s var(--ease)}
.nav.scrolled .wrap{height:72px}
.logo{display:block}
.nav ul{display:flex;gap:36px;list-style:none;margin:0;padding:0;font-family:var(--font-h);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.nav ul a{color:var(--muted);transition:color .3s;position:relative;padding:6px 0}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--sky);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav ul a:hover,.nav ul a.active{color:#fff}
.nav ul a:hover::after,.nav ul a.active::after{transform:scaleX(1)}
/* Untermenü (Navigationsmodul mit zwei Ebenen): Dropdown unter dem Hauptpunkt,
per Hover und per Tastatur (focus-within). Das li bekommt vertikales Padding,
damit die Maus auf dem Weg nach unten nicht aus dem Hover fällt. */
.nav ul li{position:relative;padding:18px 0}
.nav ul .level_2{position:absolute;top:100%;left:-14px;min-width:260px;margin:-6px 0 0;padding:8px;display:grid;gap:2px;background:rgba(2,15,34,.94);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:8px;box-shadow:0 24px 60px -24px rgba(0,0,0,.8);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.nav ul li:hover>.level_2,.nav ul li:focus-within>.level_2{opacity:1;transform:none;pointer-events:auto}
.nav ul .level_2 li{padding:0}
.nav ul .level_2 a{display:block;padding:10px 14px;border-radius:6px;text-transform:none;letter-spacing:0;font-size:14px;font-weight:500;color:var(--txt);transition:background .25s,color .25s}
.nav ul .level_2 a::after{display:none}
.nav ul .level_2 a:hover,.nav ul .level_2 a.active{background:rgba(111,177,255,.12);color:#fff}
.nav ul li.has-sub>a::before{content:"";display:inline-block;width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);margin:0 8px 3px 0;opacity:.6}
.mobile-menu .level_2{margin:2px 0 8px;display:grid;grid-template-columns:1fr 1fr;column-gap:12px}
.mobile-menu .level_2 a{font-size:17px;font-weight:400;line-height:1.3;padding:4px 0 4px 18px;border-bottom:none;color:var(--muted)}
.mobile-menu .level_2 a::before{content:"– ";color:var(--sky)}
/* Pill für externe Angebote in der Nav (Seiten-CSS-Klasse "pill", z. B. „KI lernen" → kapiert.trotzdem.works) */
.nav ul a.pill{border:1px solid var(--line);border-radius:999px;padding:9px 16px;color:#fff;transition:border-color .3s,background .3s}
.nav ul a.pill::after{display:none}
.nav ul a.pill:hover{border-color:var(--sky);background:rgba(111,177,255,.1)}
.nav ul a.pill span{color:var(--sky);margin-left:6px}
.mobile-menu a.pill span{color:var(--sky);margin-left:8px;font-size:.6em;vertical-align:middle}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:transparent;cursor:pointer;position:relative}
.burger i{position:absolute;left:13px;right:13px;height:1.5px;background:#fff;top:50%;transition:transform .4s var(--ease),opacity .3s}
.burger i:first-child{transform:translateY(-5px)}.burger i:last-child{transform:translateY(4px)}
.nav.open .burger i:first-child{transform:rotate(45deg)}.nav.open .burger i:last-child{transform:rotate(-45deg)}
.mobile-menu{display:none}
/* Seitenkopf für Unterseiten */
.page-head{padding:calc(var(--nav-h) + 96px) 0 72px;position:relative}
.page-head h1{font-size:clamp(56px,8.5vw,140px);letter-spacing:-.045em;line-height:.92}
.page-head .lead{font-size:20px;color:var(--muted);max-width:640px;margin:32px 0 0}
/* Der Lead kommt aus einem Rich-Text-Feld (TinyMCE) und enthält deshalb
.
Ohne Reset addiert sich dessen Standardabstand (1em oben/unten) auf den
Abstand des Containers. Gilt für beide Lead-Stellen: ".page-head .lead"
und ".svc .lead" (hz_service_block). */
.lead>p{margin:0}
.lead>p+p{margin-top:.8em}
.page-head .mono{margin-bottom:24px;display:block}
.crumbs{display:flex;gap:10px;align-items:center}
.crumbs a:hover{color:#fff}
/* Footer */
footer{border-top:1px solid var(--line);padding:56px 0 40px;color:var(--muted);font-size:14px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
footer b{color:#fff;font-family:var(--font-h);display:block;margin-bottom:14px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a:hover{color:#fff}
footer .bottom{display:flex;justify-content:space-between;margin-top:48px;padding-top:24px;border-top:1px solid var(--line);font-size:12px;gap:16px;flex-wrap:wrap}
/* Motion-Basis (scrollfx.js)
Der Startzustand hängt an ".js": die Klasse setzt das Inline-Script im
des Seitenlayouts anstelle von "no-js". Ohne JavaScript – deaktiviert,
Ladefehler, Textbrowser – bleibt ".no-js" stehen, die Regeln greifen nicht
und der Inhalt steht sofort sichtbar da. Sonst blieben Überschriften,
Absätze und ganze Sektionen dauerhaft auf opacity:0, weil nur scrollfx.js
".is-visible" nachträgt. Die Sichtbar-Regeln selbst sind bewusst NICHT
gescopt: sie schaden ohne den Startzustand nicht. */
.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease) calc(var(--d,0) * 1ms),transform .9s var(--ease) calc(var(--d,0) * 1ms)}
[data-reveal].is-visible{opacity:1;transform:none}
.js .fx-word{display:inline-block;opacity:0;transform:translateY(.4em);filter:blur(6px);transition:opacity .7s var(--ease) calc(var(--i) * 80ms),transform .7s var(--ease) calc(var(--i) * 80ms),filter .7s var(--ease) calc(var(--i) * 80ms)}
.is-visible .fx-word{opacity:1;transform:none;filter:none}
@keyframes spin{to{transform:rotate(360deg)}}
/* Bildstil „Natur + Objekt" (docs/specs/bildstil-natur-objekt.md) im Horizont-Look:
Foto behält seine Farbe, wird leicht entsättigt und kühl in Richtung Tiefblau gelegt,
unten in den Hintergrund verlaufend, feines Korn. Hover löst die Behandlung auf. */
.pic{position:relative;overflow:hidden;border-radius:6px;background:var(--blue-d);isolation:isolate}
.pic img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.8) contrast(1.05) brightness(.92);transition:filter .8s var(--ease),transform 1.4s var(--ease)}
.pic::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,80,157,.18),rgba(2,15,34,.05) 40%,rgba(2,15,34,.85) 100%);mix-blend-mode:multiply;transition:opacity .8s}
.pic::after{content:"";position:absolute;inset:0;z-index:2;opacity:.12;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.pic.tint::before{background:linear-gradient(180deg,rgba(0,80,157,.45),rgba(2,15,34,.35) 50%,rgba(2,15,34,.9) 100%)}
a:hover .pic img,.pic:hover img{filter:saturate(1) contrast(1) brightness(1);transform:scale(1.04)}
a:hover .pic::before,.pic:hover::before{opacity:.6}
/* CTA-Band (auf allen Unterseiten) */
.cta-band{padding:120px 0}
.cta-band .inner{border-top:1px solid var(--line);padding-top:56px;display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:end}
.cta-band h2{font-size:clamp(44px,6vw,96px);letter-spacing:-.045em;line-height:.92}
.cta-band .side{display:grid;gap:16px;justify-items:start}
@media (prefers-reduced-motion: reduce){
/* Spezifitaet mit ".js" davor, sonst gewinnt der Startzustand oben. */
.js [data-reveal],.js .fx-word,[data-reveal],.fx-word{opacity:1;transform:none;filter:none;transition:none}
.btn-fill::before{animation:none}
*{animation-duration:0s !important}
}
/* Responsive Basis */
@media (max-width:1100px){
.wrap{width:min(1320px,calc(100% - 48px))}
.nav ul{display:none}
.burger{display:block}
.nav .cta-nav{display:none}
/* Scrollbar in sich (overflow-y), weil site.js beim Öffnen das Scrollen der Seite sperrt; kompakter, damit Haupt- und Unterpunkte auf gängigen Handys ohne Scrollen passen. */
.mobile-menu{display:block;position:fixed;inset:0;top:0;z-index:49;background:rgba(2,15,34,.96);backdrop-filter:blur(20px);padding:calc(var(--nav-h) + 8px) 24px 32px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.mobile-menu.open{opacity:1;transform:none;pointer-events:auto}
.mobile-menu a{display:block;font-family:var(--font-h);font-weight:200;font-size:clamp(26px,6.5vw,36px);letter-spacing:-.03em;line-height:1.2;padding:9px 0;border-bottom:1px solid var(--line);opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease) calc(var(--i,0) * 60ms),transform .5s var(--ease) calc(var(--i,0) * 60ms)}
.mobile-menu.open a{opacity:1;transform:none}
.mobile-menu .btn{display:inline-flex;font-size:14px;font-weight:700;margin-top:20px;padding:16px 26px;letter-spacing:.06em;border-bottom:none;opacity:1;transform:none}
.mobile-menu .btn-fill{border-bottom:none}
.cta-band .inner{grid-template-columns:1fr}
footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
:root{--nav-h:72px}
.wrap{width:min(1320px,calc(100% - 40px))}
.page-head{padding-top:calc(var(--nav-h) + 56px)}
.btn{padding:14px 20px;font-size:13px}
footer .cols{grid-template-columns:1fr}
}
/* ===== Seiten- und Szenen-Styles (aus den Horizont-Seiten) ===== */
/* --- index.html --- */
/* hero */
.hero{min-height:100vh;display:grid;align-content:end;padding:120px 0 64px;position:relative}
.hero .coords{position:absolute;top:120px;left:0;display:grid;gap:6px}
.hero h1{font-size:clamp(64px,12vw,196px);letter-spacing:-.05em;line-height:.9}
.hero h1 b{display:block}
/* Ring: Wrapper trägt Position + Parallax (scrollfx setzt transform), das Bild dreht sich; `translate` bleibt vom Parallax unberührt */
.hero .ringbg{position:absolute;right:-8%;top:50%;width:min(56vw,760px);translate:0 -50%;opacity:.14;filter:blur(1px);pointer-events:none}
.hero .ringbg img{display:block;width:100%;height:auto;animation:spin 90s linear infinite}
}
.hero .bottom{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-top:48px;border-top:1px solid var(--line);padding-top:32px}
.hero .bottom p{font-size:20px;color:var(--muted);max-width:520px;margin:0}
.hero .bottom .cta{display:flex;gap:14px;justify-content:flex-end;flex-wrap:wrap}
/* horizontale Szene */
.scene{height:420vh;position:relative}
/* 100svh statt 100vh: die kleine Viewport-Höhe bleibt beim Ein-/Ausblenden der mobilen Browserleiste konstant – 100vh (bzw. dvh) würde die Bühne bei jedem Umschalten neu messen und zittern lassen. */
.scene .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center}
/* --n = Anzahl Panels (inline vom Template gesetzt), --pp = geglätteter Fortschritt aus site.js */
.track{display:flex;width:calc(var(--n,4) * 100vw);transform:translate3d(calc(var(--pp,var(--p,0)) * (var(--n,4) - 1) * -100vw),0,0);will-change:transform}
.panel{width:100vw;height:100vh;height:100svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:0 clamp(48px,7vw,120px);gap:48px;position:relative;flex:none}
.panel .big{font-family:var(--font-h);font-weight:200;font-size:clamp(160px,28vw,420px);line-height:.8;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.35);transform:translateX(calc((var(--pp,var(--p,0)) * (var(--n,4) - 1) - var(--i,0)) * -60px))}
.panel .big b{font-weight:200;color:var(--c);-webkit-text-stroke:0}
.panel h3{font-size:clamp(40px,5vw,80px);font-weight:300}
.panel h3 b{color:var(--c)}
.panel p{font-size:19px;color:var(--muted);max-width:480px;margin:24px 0 32px}
.panel .line{width:120px;height:2px;background:var(--c);margin-bottom:24px}
.scene .hud{position:absolute;left:0;right:0;bottom:36px;display:flex;justify-content:space-between;padding:0 clamp(48px,7vw,120px);pointer-events:none}
.scene .hud .bar{width:320px;height:1px;background:var(--line);position:relative;align-self:center}
.scene .hud .bar i{position:absolute;left:0;top:-1px;height:3px;background:#fff;width:calc(var(--p,0) * 100%)}
/* Strike-Szene (aus Klartext) */
.strike{height:300vh;position:relative}
.strike .stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;overflow:hidden}
.strike .txt{font-family:var(--font-h);font-size:clamp(44px,8.5vw,140px);font-weight:200;letter-spacing:-.045em;line-height:1;text-align:center;padding:0 20px}
.strike .l1{display:block;transform:translateY(calc(var(--p,0) * -12px))}
.strike .l2{display:block;position:relative;color:var(--muted)}
.strike .l2::after{content:"";position:absolute;left:0;top:52%;height:.08em;background:var(--yellow);width:calc(clamp(0,(var(--p,0) - .15) * 2.5,1) * 100%);box-shadow:0 0 24px rgba(255,195,0,.5)}
.strike .l3{display:block;font-weight:700;color:#fff;clip-path:inset(0 calc((1 - clamp(0,(var(--p,0) - .55) * 3,1)) * 100%) 0 0)}
.strike .l3{font-size:.86em}
.strike .l3 .wm{height:.62em;width:auto;display:inline-block;vertical-align:-.06em;margin-right:.12em}
.strike .l3 .cur{display:inline-block;width:.06em;height:.9em;background:var(--sky);vertical-align:-.1em;margin-left:.05em;opacity:calc(1 - clamp(0,(var(--p,0) - .9) * 10,1))}
.strike .glow{position:absolute;left:50%;top:50%;width:900px;height:900px;transform:translate(-50%,-50%) scale(calc(.6 + var(--p,0) * .6));border-radius:50%;background:radial-gradient(circle,rgba(0,80,157,.45),transparent 60%);pointer-events:none;opacity:calc(var(--p,0))}
.strike .mono{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);opacity:calc(1 - var(--p,0))}
/* Scroll-getriebener Fortschritt ohne JavaScript (Safari 26+, Chrome 115+).
-----------------------------------------------------------------------
Ursache des Zitterns auf dem iPhone: iOS positioniert die Sticky-Bühne im
Compositor sofort, das Scroll-Event – und damit scrollfx.js/site.js, die
--p/--pp setzen – läuft ein bis mehrere Frames hinterher. Der Track wird
jeden Frame gegen eine schon veraltete Scrollposition verschoben.
Mit einer View-Timeline schreibt der Browser --p/--pp selbst, synchron zum
Frame. "contain" = genau die Strecke, in der die Bühne klebt (Szenenoberkante
am Viewportrand bis Szenenunterkante am Viewportrand). scrollfx.js/site.js
erkennen die Unterstützung (CSS.supports) und lassen die Variablen dann in
Ruhe; ohne Unterstützung bleibt der bisherige JS-Weg. */
@supports (animation-timeline: view()) {
.scene,.strike,.ringscene,.creed{animation:hz-progress linear both;animation-timeline:view();animation-range:contain 0% contain 100%}
.scene{view-timeline:--hz-scene block}
/* Haltephasen wie im JS-Easing: pro Panel ~50 % Halt, dann Fahrt. */
.track[data-hz-panels="4"]{animation:hz-track-4 linear both;animation-timeline:--hz-scene;animation-range:contain 0% contain 100%}
@keyframes hz-progress{from{--p:0}to{--p:1}}
@keyframes hz-track-4{0%,17%{--pp:0}33%,50%{--pp:.3333}67%,83%{--pp:.6667}100%{--pp:1}}
@media (prefers-reduced-motion: reduce){
.scene,.strike,.ringscene,.creed,.track[data-hz-panels="4"]{animation:none}
}
}
/* Statement */
.statement{padding:200px 0;text-align:center}
.statement h2{font-size:clamp(36px,6vw,96px);max-width:1100px;margin:0 auto}
.statement .sub p{font-size:22px;color:var(--muted);max-width:720px;margin:32px auto 0}
/* Team */
.team{padding:80px 0 180px}
.team .grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:64px}
.duo::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,var(--blue) 0%,var(--blue-d) 100%);z-index:0}
.duo img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center 15%;filter:grayscale(1) contrast(1.1);mix-blend-mode:luminosity;opacity:.85;transition:transform 1.2s var(--ease),filter .8s,opacity .8s}
.duo:hover img{transform:scale(1.03);filter:grayscale(0);mix-blend-mode:normal;opacity:1}
.duo .cap{position:absolute;z-index:2;left:24px;bottom:24px;font-family:var(--font-h)}
.duo .cap b{font-size:32px;font-weight:600;display:block}
.duo .cap span{color:var(--muted);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.team h2{font-size:clamp(40px,5vw,72px)}
/* Insights */
.insights{padding:0 0 160px}
.insights .head{display:flex;justify-content:space-between;align-items:end;margin-bottom:40px;gap:24px;flex-wrap:wrap}
.insights h2{font-size:clamp(40px,5vw,72px)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cardx{border:1px solid var(--line);border-radius:6px;padding:0 0 28px;min-height:300px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);transition:transform .5s var(--ease),border-color .4s,background .4s}
.cardx:hover{transform:translateY(-8px);border-color:var(--sky);background:rgba(0,80,157,.2)}
.cardx h3{font-size:24px;font-weight:600;line-height:1.2;margin:14px 28px 0}
.cardx .pic{aspect-ratio:16/9;border-radius:0}
.cardx .mono,.cardx .go{margin:0 28px}
.cardx .go{font-family:var(--font-h);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--sky)}
/* Toolbox */
.tools{padding:0 0 160px}
/* auto-fit: zwei Karten füllen die Breite, drei Karten (Timer, Check-in, KI lernen) stehen nebeneinander, auf dem Handy untereinander */
.tools .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px;margin-top:48px}
.toolx{border:1px solid var(--line);border-radius:6px;padding:40px;position:relative;overflow:hidden;min-height:280px;display:flex;flex-direction:column;justify-content:space-between}
.toolx h3{font-size:34px;font-weight:600}
.toolx p{color:var(--muted);max-width:420px}
.toolx .num{font-family:var(--font-m);font-size:48px;color:var(--c);font-weight:300;font-variant-numeric:tabular-nums}
.toolx .cfg{display:flex;gap:18px;margin-top:8px;flex-wrap:wrap}
.toolx .cfg b{color:#fff;font-weight:400}
.toolx .bar{height:2px;background:var(--line);margin-top:18px;overflow:hidden}
.toolx .bar i{display:block;height:100%;background:var(--c);width:0;animation:fill 60s linear infinite}
@keyframes fill{to{width:100%}}
.toolx::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;border:1px solid var(--c);opacity:.35}
/* Kontakt */
.contact{padding:120px 0 160px}
.contact .inner{border-top:1px solid var(--line);padding-top:64px;display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:end}
.contact h2{font-size:clamp(48px,8vw,140px);letter-spacing:-.05em;line-height:.9}
.contact .side{display:grid;gap:18px;justify-items:start}
.contact .mail{font-family:var(--font-h);font-size:clamp(20px,2.4vw,32px);font-weight:600;border-bottom:1px solid var(--sky);padding-bottom:4px}
.contact .mail:hover{color:var(--sky)}
@media (max-width:1100px){
.hero .bottom,.team .grid,.tools .row,.contact .inner{grid-template-columns:1fr}
.hero .bottom .cta{justify-content:flex-start}
.cards{grid-template-columns:1fr}
.panel{grid-template-columns:1fr;align-content:center;gap:16px;padding-top:80px}
.panel .big{font-size:clamp(120px,30vw,200px);order:-1}
.scene .hud .bar{width:120px}
.duo{aspect-ratio:4/5}
.team .grid a:last-child{margin-top:0 !important}
}
@media (max-width:640px){
.hero{padding-top:100px}
.hero .coords{top:96px}
.hero .ringbg{width:90vw;right:-30%}
.scene{height:360vh}
.panel p{font-size:16px}
.toolx{padding:28px}
.toolx .num{font-size:36px}
}
/* --- dienstleistungen.html --- */
/* Ring-Szene (aus Kreislauf, im Horizont-Look) */
.ringscene{height:380vh;position:relative}
.ringscene .stage{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;overflow:hidden;padding-top:var(--nav-h)}
.ringwrap{display:grid;place-items:center;position:relative}
/* Kein drop-shadow auf dem gedrehten SVG: der Filter wird auf der rechteckigen
Ebene des Elements gerendert und zeichnete ein mitdrehendes, leicht helles
Rechteck um den Ring (sichtbar auf Stage, 05.09.2026). Das Leuchten kommt
stattdessen als runder Verlauf hinter dem Ring, der nicht mitdreht. */
.ringwrap::before{content:"";position:absolute;width:min(90%,560px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(0,80,157,.45) 0%,rgba(0,80,157,.18) 45%,transparent 70%);pointer-events:none}
/* viewBox mit 20 Einheiten Rand (Template) und overflow:visible: der Schatten des
aktiven Segments (.seg.on) wurde sonst an der Kante der SVG-Zeichenfläche
abgeschnitten – eine gerade Linie im Leuchten. Die Breite ist um den Rand
vergrößert, damit der Ring selbst gleich groß bleibt. */
.ringwrap svg{width:min(100%,720px);overflow:visible;transform:rotate(calc(var(--p,0) * 360deg));position:relative}
.ringwrap .seg.on{filter:drop-shadow(0 0 18px currentColor)}
.seg-blue{color:var(--sky)}.seg-green{color:var(--green)}.seg-yellow{color:var(--yellow)}.seg-red{color:var(--red)}
.ringwrap .seg{opacity:.3;transition:opacity .35s}
.ringwrap .seg.on{opacity:1}
.ringwrap .label{position:absolute;text-align:center;font-family:var(--font-h)}
.ringwrap .label .num{font-size:80px;font-weight:200;font-variant-numeric:tabular-nums;line-height:1}
.steps{display:grid;gap:6px}
.step{padding:22px 26px;border-radius:6px;border:1px solid transparent;transition:all .5s var(--ease)}
.step .k{display:flex;gap:12px;align-items:center}
.step .k i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.step h3{font-size:clamp(26px,3vw,40px);font-weight:600;margin:8px 0}
.step p{margin:0;color:var(--muted);max-height:0;overflow:hidden;opacity:0;transition:max-height .6s var(--ease),opacity .4s}
.step.on{border-color:var(--line);background:rgba(255,255,255,.03)}
.step.on h3{color:var(--c)}
.step.on p{max-height:140px;opacity:1}
.step:not(.on) h3{opacity:.35}
.ringscene .progress{position:absolute;left:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--sky),var(--green),var(--yellow),var(--red));width:calc(var(--p,0) * 100%)}
/* Detailblöcke */
.svc{padding:140px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start;scroll-margin-top:80px}
.svc .num{font-family:var(--font-h);font-weight:200;font-size:clamp(120px,16vw,240px);line-height:.8;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.3);position:sticky;top:120px}
.svc .num b{font-weight:200;color:var(--c);-webkit-text-stroke:0}
.svc h2{font-size:clamp(40px,5vw,72px)}
.svc h2 b{color:var(--c)}
.svc .lead{font-size:20px;color:var(--muted);max-width:560px;margin:24px 0 40px}
.svc ul{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.svc li{padding:22px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:start}
.svc li i{width:10px;height:10px;border-radius:50%;background:var(--c);margin-top:10px}
.svc li b{font-family:var(--font-h);font-weight:600;font-size:20px;display:block}
.svc li span{color:var(--muted);font-size:15px}
.svc .btn{margin-top:36px}
@media (max-width:1100px){
.ringscene{height:300vh}
.ringscene .stage{grid-template-columns:1fr;gap:16px;align-content:center}
.ringwrap svg{width:min(77vw,412px)}
.ringwrap .label .num{font-size:48px}
.step{padding:12px 16px}.step h3{font-size:22px;margin:4px 0}
.step.on p{max-height:120px}
.svc{grid-template-columns:1fr;gap:16px;padding:96px 0}
.svc .num{position:static;font-size:96px}
}
/* --- kontakt.html --- */
.page-head{overflow:visible;padding-bottom:40px}
.page-head .ringbg{position:absolute;right:-6%;top:40%;width:min(46vw,620px);opacity:.14;animation:spin 70s linear infinite reverse;pointer-events:none;z-index:-1}
.page-head h1{font-size:clamp(52px,8vw,132px)}
/* Der Kontaktabschnitt ist das Raster selbst (Formularspalte + Infospalte).
Die Klasse ist bewusst eigen benannt: eine ungescopte ".grid"-Regel traf
sonst auch das Werte-Raster der Ueber-uns-Seite. */
.hz-contact{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;padding:40px 0 140px;align-items:start}
/* Formular */
.form{border:1px solid var(--line);border-radius:8px;padding:40px;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);position:relative;overflow:hidden}
.field{display:grid;gap:8px;margin-bottom:22px;position:relative}
.field label{font-family:var(--font-h);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between}
.field label small{font-weight:400;text-transform:none;letter-spacing:0;font-family:var(--font-b);font-size:12px}
.field input,.field textarea{width:100%;background:rgba(2,15,34,.6);border:1px solid var(--line);border-radius:4px;color:#fff;font:inherit;font-size:16px;padding:16px 18px;outline:none;transition:border-color .3s,box-shadow .3s}
.field input:focus,.field textarea:focus{border-color:var(--sky);box-shadow:0 0 0 4px rgba(111,177,255,.12)}
.field textarea{min-height:160px;resize:vertical}
.field .err{font-size:13px;color:var(--red);display:none}
.field.invalid input,.field.invalid textarea{border-color:var(--red)}
.field.invalid .err{display:block}
.check{display:flex;gap:14px;align-items:start;font-size:14px;color:var(--muted);margin:8px 0 28px;cursor:pointer}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--sky);flex:none}
/* Link in der Einverstaendnis-Zeile (Datenschutz). Im Entwurf steht dafuer ein
style-Attribut im Markup - als Klasse gepflegt, damit der Optionstext im
Backend ohne Inline-Style auskommt. */
.check a{text-decoration:underline}
.check.invalid{color:var(--red)}
/* Die Checkbox liegt in einem ".field"-Wrapper, damit die Fehlerregeln
(".field .err") greifen; die Abstaende bleiben beim ".check" des Entwurfs. */
/* Wrapper der Einverstaendnis-Zeile. Bewusst NICHT ".field": ".field label"
setzt jedes Label darin in Mono-Versalien - der Fliesstext der Checkbox ist
aber selbst ein