/* GENERIERT aus _experience-dummy-sports.html (finales, abgenommenes Template, Runden 1-6). */ /* ============================================================ V3 EXPERIENCE — jung heißt: Farbe als Fläche, kontrollierte Unordnung, Kinetik als Dauerzustand, Live-Bali. Grau nur noch für Meta. Alles transform+opacity, reduced-motion-safe. ============================================================ */ :root{ --cream:#F7F5F0; --cream-card:#EEEADE; --cream-deep:#E4DECE; --ink:#212121; --ink-section:#1A1A1A; --ink-600:#4E4E4E; --stone:#707070; --rule:rgba(33,33,33,.10); --rule-dark:rgba(247,245,240,.18); --hib:#CE4E72;--on-hib:#fff; --hib-hover:#B83E62; --teal:#5A8C86; --teal-deep:#3F6D68; --sage:#C8D4C4; --sand:#D9C9A8; --accent-dark:#D9C9A8; /* Fallback für Browser ohne color-mix — nächste Zeile überschreibt, wo unterstützt */ --accent-dark:color-mix(in oklab, var(--hib) 62%, #F7F5F0); --max:1340px; --bc:'Barlow Condensed',sans-serif; --d:'DM Sans',sans-serif; --m:'JetBrains Mono',monospace; --gutter:clamp(20px,4vw,56px); --ease:cubic-bezier(.16,1,.3,1); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} /* Sprungziele unter der fixierten Kopfzeile freihalten (11.08.). Vorher stand das pro Seite von Hand da: admissions hatte es fuer alle fuenf Anker, life-in-bali fuer zwei von sieben, why-bali fuer keinen einzigen. Wer aus dem Nav-Dropdown auf eine Sprungmarke klickte, landete auf acht von neun Zielen UNTER der Kopfzeile, die Ueberschrift des Abschnitts also verdeckt. Hier global, damit es auf einer neuen Seite nicht wieder fehlt. 96px: die gescrollte Kopfzeile ist rund 65px hoch (top:0, 12px Polster), der Rest ist Luft ueber der Ueberschrift. */ :root{--anchor-off:96px} main [id]{scroll-margin-top:var(--anchor-off)} body{background:var(--cream);color:var(--ink);font-family:var(--d);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} button{font:inherit;cursor:pointer;border:0;background:none;color:inherit} ::selection{background:var(--hib);color:#fff} /* A11y: sichtbarer Keyboard-Fokus überall */ :focus-visible{outline:2px solid var(--hib);outline-offset:3px;border-radius:2px} .skip-link{position:absolute;left:12px;top:-56px;z-index:400;min-height:44px;background:var(--ink);color:var(--cream);padding:10px 18px;border-radius:8px;font-family:var(--d);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;transition:top .2s ease} .skip-link:focus-visible{top:12px} h1,h2,h3{font-family:var(--bc);font-weight:900;text-transform:uppercase;letter-spacing:.02em;line-height:.9} .wrap{max-width:1340px;margin:0 auto;padding:0 var(--gutter)} .mono{font-family:var(--m);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase} /* Reveals */ .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)} .rv.in{opacity:1;transform:none} .rv-stagger>*{opacity:0;transform:translateY(22px) rotate(var(--rot,0deg));transition:opacity .7s var(--ease),transform .7s var(--ease)} .rv-stagger.in>*{opacity:1;transform:translateY(0) rotate(var(--rot,0deg))} .rv-stagger.in>*:nth-child(1){transition-delay:.04s}.rv-stagger.in>*:nth-child(2){transition-delay:.12s} .rv-stagger.in>*:nth-child(3){transition-delay:.2s}.rv-stagger.in>*:nth-child(4){transition-delay:.28s} .rv-stagger.in>*:nth-child(5){transition-delay:.36s}.rv-stagger.in>*:nth-child(6){transition-delay:.44s} .rv-stagger.in>*:nth-child(n+7){transition-delay:.52s} /* Snap-in: Sticker schnappen mit Overshoot ein */ .snap>*{opacity:0;transform:scale(.7) rotate(var(--rot,0deg))} .snap.in>*{opacity:1;transform:scale(1) rotate(var(--rot,0deg));transition:opacity .45s ease,transform .55s cubic-bezier(.34,1.56,.64,1)} .snap.in>*:nth-child(1){transition-delay:.05s}.snap.in>*:nth-child(2){transition-delay:.13s} .snap.in>*:nth-child(3){transition-delay:.21s}.snap.in>*:nth-child(4){transition-delay:.29s} .snap.in>*:nth-child(5){transition-delay:.37s}.snap.in>*:nth-child(6){transition-delay:.45s} @media (prefers-reduced-motion: reduce){ .rv,.rv-stagger>*,.snap>*{opacity:1!important;transform:none!important;transition:none!important} .img-mq-track,.txt-mq-track{animation:none!important} *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important} } /* ---------- Blockschrift-Idiom (aus den Programmseiten hochgezogen, damit es site-weit identisch verfuegbar ist; Programmseiten definieren .bar lokal weiter und ueberschreiben diese Basis 1:1). Regeln: weiss auf Hibiscus, box-decoration clone, BREIT laufen (44-52ch), max EIN Balken-Satz pro Zone, nie in dunklen Gradient-Zonen, nie farbige Schrift direkt auf Fotos. ---------- */ .bar{display:inline;font-family:var(--bc);font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--on-hib);background:var(--hib);padding:.1em .45em;line-height:1.8;-webkit-box-decoration-break:clone;box-decoration-break:clone;font-size:clamp(20px,2.4vw,38px)} .barwrap{display:block} /* ---------- Deadline-Bar (programmspezifisch) ---------- */ .pulse{background:var(--ink);color:var(--cream);padding:10px var(--gutter);display:flex;gap:14px;justify-content:center;align-items:baseline;flex-wrap:wrap;font-family:var(--m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;position:relative;z-index:120} .pulse .dot{width:6px;height:6px;border-radius:50%;background:var(--hib);animation:blink 2.4s infinite} @keyframes blink{0%,100%{opacity:1}50%{opacity:.25}} .pulse strong{color:var(--sand);font-weight:500} /* ---------- Nav + Live-Bali-Uhr ---------- */ /* gap:16px ist die Mindestluft zwischen Wortmarke, Linkzeile und rechter Gruppe. Ohne sie rutschten die Blöcke in der engen Zone ineinander statt auszuweichen. */ header.nav{position:fixed;top:34px;left:0;right:0;z-index:100;padding:18px var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:16px;color:#fff;transition:all .3s var(--ease)} /* Lesbarkeits-Scrim im Transparent-Zustand: weiße Links standen auf hellen Himmeln teils ohne Halt. Weicher Verlauf hinter der Leiste, verschwindet mit .scrolled. */ header.nav:not(.scrolled)::before{content:"";position:absolute;left:0;right:0;top:-40px;bottom:-46px;background:linear-gradient(to bottom,rgba(10,6,2,.44),rgba(10,6,2,.18) 62%,transparent);pointer-events:none;z-index:-1} header.nav.scrolled{top:0;background:rgba(247,245,240,.85);backdrop-filter:blur(20px) saturate(140%);color:var(--ink);padding:12px var(--gutter);border-bottom:1px solid var(--rule)} /* Logo exakt nach brand/logo.jsx (Design-System, single source of truth): horizontaler Lockup = Bildmarke · Hairline · Wortmarke (Barlow Condensed 900, UPPERCASE, tracking .2em, Hibiscus-Middots mit .06em Luft, -.06em hochgestellt). */ /* min-width:0 + flex:0 1 auto: ohne beides steht min-width:auto der Flexbox im Weg, das Logo kann nicht schrumpfen und schiebt sich in die Linkzeile. Mit beidem clippt die Wortmarke sauber (overflow:hidden steht unten) statt zu überlappen. */ .nav-logo{font-family:var(--bc);font-weight:900;font-size:20px;letter-spacing:.2em;text-transform:uppercase;line-height:1;display:inline-flex;align-items:center;gap:14px;min-width:0;flex:0 1 auto;transition:gap .45s var(--ease)} .nav-logo .bm{height:40px;width:auto;display:block;filter:invert(1) brightness(1.15);transition:filter .3s ease,transform .5s var(--ease),opacity .4s var(--ease),width .45s var(--ease)} header.nav.scrolled .nav-logo .bm{filter:none} .nav-logo .lrule{width:1.5px;height:34px;background:currentColor;opacity:.28;flex:0 0 auto;transition:opacity .4s ease,width .45s var(--ease),margin .45s var(--ease)} .nav-logo>span:last-child{white-space:nowrap;overflow:hidden;min-width:0;max-width:280px;padding-block:3px;margin-block:-3px;transition:opacity .45s var(--ease),transform .5s var(--ease),max-width .5s var(--ease),margin .45s var(--ease)} /* Desktop (Konzept B): Bildmarke dreht sich beim Scrollen raus, Wortmarke rückt bündig an die Gutter-Kante */ header.nav.scrolled .nav-logo{gap:0} header.nav.scrolled .nav-logo .bm{transform:scale(.4) rotate(-24deg);opacity:0;width:0} header.nav.scrolled .nav-logo .lrule{opacity:0;width:0;margin:0} @media(max-width:680px){.nav-logo .bm{height:32px}.nav-logo .lrule{height:26px}.nav-logo{gap:10px;font-size:17px} /* Mobile (Konzept A): Bildmarke bleibt stehen, Wortmarke faltet ein */ header.nav.scrolled .nav-logo{gap:10px} header.nav.scrolled .nav-logo .bm{transform:none;opacity:1;width:auto} header.nav.scrolled .nav-logo .lrule{opacity:0;width:0;margin-left:-10px} header.nav.scrolled .nav-logo>span:last-child{opacity:0;max-width:0;transform:translateX(-8px);margin-left:-10px} } @media(max-width:880px){ .nav-logo{min-height:44px} .hero-crumb a{display:inline-flex;align-items:center;min-height:44px} } footer.big .fl{display:flex!important;align-items:center;gap:16px} footer.big .fl .bm{height:50px;width:auto;filter:invert(1) brightness(1.15)} footer.big .fl .lrule{width:1.5px;height:40px;background:rgba(247,245,240,.25);flex:0 0 auto} .nav-logo b{color:var(--hib)} .nav-logo b,footer.big .fl b{font-weight:900;padding:0 .06em;position:relative;top:-.06em} /* Footer-Reset (footer.big *) killt sonst Schrift + Tracking der Punkte: hart zurückholen */ footer.big .fl b{font-family:var(--bc)!important;letter-spacing:.2em!important;text-transform:uppercase!important} .nav-right{display:flex;gap:18px;align-items:center;flex:0 0 auto} .bali-clock{font-family:var(--m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.85;text-align:right;line-height:1.5} .bali-clock .t{font-weight:500} .bali-clock .d{opacity:.7} .nav-cta{min-height:44px;background:var(--hib);color:var(--on-hib);border-radius:100px;padding:11px 22px;font-size:13px;font-weight:700;letter-spacing:.04em;transition:background .18s ease;display:inline-flex;align-items:center} .nav-cta:hover{background:var(--hib-hover)} /* ---------- HERO: Video-Loop + Sticker-Facts ---------- */ .hero{position:relative;height:100vh;height:100dvh;min-height:700px;background:var(--ink-section);overflow:hidden} .hero video,.hero .hero-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hero video{opacity:0;transition:opacity 1.6s var(--ease)} .hero .hero-fallback{opacity:1} body.loaded .hero video{opacity:1} /* Bild kommt IMMER per Inline-Style von der Seite (background:url(...) center x/cover). Hier nur dunkler Grund als Sicherheitsnetz — kein programmfremdes Bild in geteiltem CSS. */ .hero .hero-fallback{background:var(--ink-section) center 45%/cover} .hero-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,6,2,.72) 0%,rgba(10,6,2,.25) 45%,rgba(10,6,2,.1) 75%)} .hero-ct{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--gutter) clamp(40px,6vh,72px)} /* Breadcrumb: schlichte Textzeile, aber fett + voller Kontrast + Schatten */ .hero-crumb{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;opacity:0;transition:opacity 1s var(--ease) 1s;font-family:var(--d);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.55)} .hero-crumb a{border-bottom:1.5px solid rgba(255,255,255,.55);padding-bottom:1px;transition:border-color .2s ease} .hero-crumb a:hover{border-color:#fff} .hero-crumb .sep{opacity:.6;font-weight:400} .hero-crumb .here{color:var(--sand)} body.loaded .hero-crumb{opacity:1} .hero h1{font-size:clamp(58px,10vw,152px);line-height:.86;color:#fff} .hero h1 .ln{display:block;overflow:hidden} .hero h1 .ln span{display:inline-block;transform:translateY(112%);transition:transform 1s var(--ease)} body.loaded .hero h1 .ln:nth-child(1) span{transition-delay:.12s;transform:none} body.loaded .hero h1 .ln:nth-child(2) span{transition-delay:.24s;transform:none} .hero .whisper{display:block;font-family:var(--bc);font-style:italic;font-weight:500;text-transform:none;font-size:clamp(26px,4vw,58px);color:var(--sand);margin-top:10px;line-height:1.05;opacity:0;transform:translateY(20px);transition:all 1s var(--ease) .5s} body.loaded .hero .whisper{opacity:1;transform:none} /* Sticker-Facts: gekippte Pills statt Fakten-Tabelle */ .stickers{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(24px,3.5vh,40px)} .stk{font-family:var(--bc);font-weight:800;font-size:clamp(16px,1.6vw,22px);letter-spacing:.04em;text-transform:uppercase;padding:10px 20px;border-radius:100px;white-space:nowrap} .stk.s1{background:var(--cream);color:var(--ink);--rot:-1.2deg} .stk.s2{background:var(--hib);color:var(--on-hib);--rot:.8deg} .stk.s3{background:var(--sand);color:var(--ink);--rot:-.6deg} /* 28.08.2026 (Simone: "Sticker weiss auf weiss, site-wide"): war ein fast durchsichtiges Weissglas (rgba(255,255,255,.14)) mit weisser Schrift - gedacht fuer ein dunkles Hero-Foto, tatsaechlich sitzt .stk.s4 ueber .who-chips auf hellen/weissen Programmseiten-Sektionen (z.B. "Local infrastructure and development projects", "Crossfit and Muay Thai"). Dunkles Glas statt helles: haelt auf jedem Untergrund, hell oder dunkel, Foto oder Flaeche - kein Fall mehr von weiss auf weiss. */ .stk.s4{background:rgba(10,6,2,.62);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.4);color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5);--rot:1deg} .hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:clamp(22px,3vh,36px);flex-wrap:wrap;opacity:0;transition:opacity 1s var(--ease) .9s} body.loaded .hero-bottom{opacity:1} .btn-hib{display:inline-flex;align-items:center;gap:12px;background:var(--hib);color:var(--on-hib);border-radius:100px;padding:17px 30px;font-size:14.5px;font-weight:700;letter-spacing:.04em;transition:background .18s ease,transform .3s var(--ease)} .btn-hib:hover{background:var(--hib-hover);transform:translateY(-2px)} .btn-hib .arr{transition:transform .3s var(--ease)} .btn-hib:hover .arr{transform:translateX(5px)} .hero-sub{max-width:44ch;font-size:14px;color:rgba(255,255,255,.85);line-height:1.6} /* ---------- Bild-Marquee + Text-Marquee ---------- */ .mq-zone{background:var(--cream);padding:22px 0 26px;border-bottom:1px solid var(--rule);overflow:hidden} .txt-mq{overflow:hidden;margin-bottom:18px} .txt-mq-track{display:flex;width:max-content;animation:mqx 30s linear infinite} .txt-mq .it{font-family:var(--m);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--teal-deep);padding:0 22px;white-space:nowrap} .txt-mq .it::after{content:"·";color:var(--hib);margin-left:44px} .img-mq{overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none} .img-mq img{pointer-events:none} /* Bilder schlucken sonst den Drag (native Bild-Drag) */ .img-mq-track{display:flex;gap:12px;width:max-content;animation:mqx 60s linear infinite} .img-mq .im{height:clamp(160px,22vh,240px);flex:0 0 auto;overflow:hidden;border-radius:6px} .img-mq .im:nth-child(odd){transform:rotate(-1.2deg) translateY(4px)} .img-mq .im:nth-child(even){transform:rotate(1deg)} .img-mq img{height:100%;width:auto;object-fit:cover} .img-mq:hover .img-mq-track{animation-play-state:paused} @keyframes mqx{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ---------- Who: Sticker-Snap in Farbfläche ---------- */ .who{background:var(--cream-card);padding:clamp(70px,8vw,120px) 0;position:relative;overflow:hidden} .who .wrap{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,5vw,80px);align-items:center} .who h2{font-size:clamp(44px,5.4vw,88px)} .who h2 .soft{font-family:var(--bc);font-style:italic;font-weight:500;text-transform:none;color:var(--hib)} .who-chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} .who-chips .stk{font-size:clamp(15px,1.4vw,19px);padding:11px 20px} /* 28.08.2026: jede Positionsregel setzt jetzt Hintergrund UND Schrift zusammen. Vorher setzten (1)/(3)/(4) nur den Hintergrund und liessen die Schriftfarbe der .s1-.s4-Klasse durchscheinen - traf die Position zufaellig eine .s4-Karte (weisse Schrift, fuer dunkle Fotos gedacht), stand dort weisse Schrift auf hellem Sand/Weiss. Jetzt pro Position fest gepaart, unabhaengig davon, welche s1-s4-Klasse die Seite an der Stelle einsetzt. */ .who-chips .stk:nth-child(1){background:#fff;color:var(--ink);--rot:-1.5deg} .who-chips .stk:nth-child(2){background:var(--teal);color:#fff;--rot:1deg} .who-chips .stk:nth-child(3){background:#fff;color:var(--ink);--rot:2deg} .who-chips .stk:nth-child(4){background:var(--sand);color:var(--ink);--rot:-1deg} .who-chips .stk:nth-child(5){background:var(--hib);color:var(--on-hib);--rot:1.5deg} .who-photo{position:relative;aspect-ratio:4/5;max-width:420px;justify-self:end;width:100%} .who-photo .p{position:absolute;inset:0;background-size:cover;background-position:center;border-radius:8px;box-shadow:0 24px 56px -22px rgba(0,0,0,.4)} .who-photo .p1{transform:rotate(-3deg)} .who-photo .p2{transform:rotate(2.5deg) translate(14px,-14px);z-index:2} .who-photo .cap{position:absolute;z-index:3;left:18px;bottom:14px;font-family:var(--m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.9);text-shadow:0 1px 8px rgba(0,0,0,.5)} @media(max-width:880px){.who .wrap{grid-template-columns:1fr}.who-photo{justify-self:start;margin-top:12px}} /* ===================================================================== SEKTIONS-RHYTHMUS (Simones Befund: Abteilungen heben sich nicht ab) Feste Farb-Dramaturgie, keine zwei gleichen Gründe nebeneinander: Hero(Foto) → Cream → Beige → Cream → WEISS → INK → Cream → INK → Cream → SAGE → Weiß → Beige → Cream → HIBISCUS → Beige → Ink ===================================================================== */ .cur{background:#fff} .tq-zone{background:var(--cream)} .uni{background:#fff} .faqx{background:var(--cream);padding-top:clamp(56px,7vw,100px)} /* ---------- USP: warum es dieses Programm nur hier gibt ---------- */ .usp{padding:clamp(80px,10vw,150px) 0;position:relative} .usp h2{font-size:clamp(48px,6.4vw,104px);line-height:.9;max-width:14ch} .usp h2 .strike{position:relative;white-space:nowrap} .usp h2 .strike::after{content:"";position:absolute;left:-2%;right:-2%;top:52%;height:.09em;background:var(--hib);transform:rotate(-2deg);border-radius:2px;transform-origin:left;transition:transform .8s var(--ease) .4s} .usp h2 .here2{font-family:var(--bc);font-style:italic;font-weight:500;text-transform:none;color:var(--hib)} .usp .lead2{margin-top:20px;font-size:15.5px;line-height:1.75;color:var(--ink-600);max-width:56ch} .usp .proofs{margin-top:clamp(32px,4vw,52px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,32px)} .usp .proof{border-top:2px solid var(--teal);padding-top:16px} .usp .proof .pm{font-family:var(--m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-deep);display:block;margin-bottom:10px} .usp .proof .ph3{font-family:var(--bc);font-weight:800;font-size:clamp(22px,2vw,30px);text-transform:uppercase;letter-spacing:.02em;line-height:1.05} .usp .proof p{font-size:13.5px;color:var(--ink-600);margin-top:8px;line-height:1.65} @media(max-width:880px){.usp .proofs{grid-template-columns:1fr}} /* ---------- Curriculum: Outline-Nummern ---------- */ .cur{padding:clamp(80px,10vw,150px) 0} .cur .head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(30px,4vw,52px)} .cur h2{font-size:clamp(46px,5.6vw,92px)} .cur h2 .soft{font-family:var(--bc);font-style:italic;font-weight:500;text-transform:none;color:var(--hib)} .cur .side{max-width:38ch;font-size:14.5px;color:var(--ink-600);line-height:1.7} .cmod{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,3.5vw,56px);align-items:center;padding:clamp(18px,2.2vw,28px) 0;border-bottom:1px solid var(--rule);transition:padding .4s var(--ease)} .cmod:first-of-type{border-top:1px solid var(--rule)} .cmod:hover{padding-left:14px} .cmod .on{font-family:var(--bc);font-weight:900;font-size:clamp(44px,4.6vw,84px);line-height:.9;color:transparent;-webkit-text-stroke:1.5px var(--ink);transition:all .3s ease;min-width:1.4em} .cmod:hover .on{color:var(--hib);-webkit-text-stroke:1.5px var(--hib)} .cmod .t .h{font-family:var(--bc);font-weight:800;font-size:clamp(24px,2.4vw,38px);text-transform:uppercase;letter-spacing:.02em;line-height:1} .cmod .t p{font-size:13.5px;color:var(--ink-600);max-width:58ch;margin-top:6px} .cmod .ects{font-family:var(--m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;background:var(--teal);color:#fff;border-radius:100px;padding:7px 14px;white-space:nowrap} .cur .total{margin-top:24px;display:flex;gap:18px;align-items:baseline;flex-wrap:wrap} .cur .total .n{font-family:var(--bc);font-weight:900;font-size:clamp(48px,5vw,80px);color:transparent;-webkit-text-stroke:2px var(--teal-deep)} .cur .total p{font-size:13.5px;color:var(--ink-600);max-width:56ch} /* ---------- Sticky Week-Story ---------- WICHTIG: kein overflow:hidden auf .week — das bricht position:sticky. Watermark liegt in eigenem geclippten Layer. */ .week{background:var(--ink-section);color:var(--cream);padding:clamp(80px,10vw,150px) 0;position:relative} .week .bmk-clip{position:absolute;inset:0;overflow:hidden;pointer-events:none} .week .bmk{position:absolute;right:-3%;top:-6%;height:50%;opacity:.05;filter:invert(1)} .week .wrap{display:grid;grid-template-columns:5fr 7fr;gap:clamp(36px,5vw,90px);align-items:start} .week-l{position:sticky;top:100px} .week-l h2{font-size:clamp(44px,5.4vw,88px);color:var(--cream)} .week-l .whisper{display:block;font-family:var(--bc);font-style:italic;font-weight:500;text-transform:none;font-size:clamp(22px,2.4vw,34px);color:var(--sand);margin-top:14px;line-height:1.15} .week-l .days{margin-top:32px;display:flex;flex-direction:column;gap:2px} .week-l .dline{font-family:var(--bc);font-weight:800;font-size:clamp(24px,2.4vw,38px);text-transform:uppercase;letter-spacing:.02em;color:rgba(247,245,240,.28);transition:color .4s ease,transform .4s var(--ease);display:flex;gap:16px;align-items:baseline} .week-l .dline .dd{font-weight:400;font-family:var(--m);font-size:10px;letter-spacing:.16em;min-width:36px} .week-l .dline.active{color:var(--cream);transform:translateX(10px)} .week-l .dline.active em{color:var(--sand)} .week-l .dline em{font-style:normal;font-weight:inherit;text-transform:inherit;font-family:inherit;color:inherit} .week-r{display:flex;flex-direction:column;gap:clamp(40px,6vh,80px)} .wcard{position:relative} .wcard:nth-child(odd){transform:rotate(-1deg)} .wcard:nth-child(even){transform:rotate(1deg);margin-left:8%} .wcard .wframe img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0} .wcard .wc{position:absolute;left:16px;bottom:14px;font-family:var(--m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.9);text-shadow:0 1px 10px rgba(0,0,0,.6);z-index:2} .wcard .wframe::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,6,2,.35),transparent 40%)} /* Tages-Pill oben rechts auf jedem Bild — leuchtet synchron mit der Liste */ .wcard .wpill{position:absolute;top:14px;right:14px;z-index:2;font-family:var(--bc);font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:100px;padding:7px 16px;transition:background .35s ease,color .35s ease,transform .35s var(--ease)} .wcard.active .wpill{background:var(--sand);border-color:var(--sand);color:var(--ink);transform:scale(1.08)} @media(max-width:880px){.week .wrap{grid-template-columns:1fr}.week-l{position:static}} /* ---------- Atmos Scroll-Video ---------- */ .atmos{position:relative;height:190vh} .atmos-stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--ink-section)} .atmos-media{--s0:.5;position:relative;width:100vw;aspect-ratio:16/9;max-height:100dvh;overflow:hidden;will-change:transform;transform:scale(calc(var(--s0) + (1 - var(--s0)) * var(--p,0)))} .atmos-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .atmos-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,6,2,.08),rgba(10,6,2,.2))} .atmos-title{position:absolute;z-index:3;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;color:#fff;text-align:center;text-shadow:0 2px 30px rgba(10,6,2,.55);opacity:calc(1 - var(--p,0)*1.1)} .atmos-title .l1{font-family:var(--m);font-size:clamp(10px,1.5vw,15px);letter-spacing:.28em;text-transform:uppercase;opacity:.9;margin-bottom:.8em;transform:translateY(calc(var(--p,0)*-9vh))} .atmos-title .l2{font-family:var(--bc);font-weight:800;font-size:clamp(34px,7.4vw,104px);line-height:.95;text-transform:uppercase;transform:translateY(calc(var(--p,0)*9vh))} .atmos-cap{position:absolute;z-index:3;bottom:26px;left:0;right:0;text-align:center;font-family:var(--m);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone);opacity:calc(1 - var(--p,0)*1.6)} @media(max-width:680px){.atmos{height:150vh}.atmos-media{--s0:.86;aspect-ratio:9/16;width:92vw;max-height:82vh}} @media (prefers-reduced-motion: reduce){.atmos{height:auto;padding-bottom:60px}.atmos-stage{position:relative;height:auto}.atmos-media{transform:none;width:100%;aspect-ratio:21/9}.atmos-title{opacity:1}.atmos-title .l1,.atmos-title .l2{transform:none}.atmos-cap{display:none}} /* ---------- Dates & Prices: die Preistreppe, klar ---------- */ .dates{background:var(--ink-section);color:var(--cream);padding:clamp(76px,9vw,140px) 0;position:relative;overflow:hidden} /* 02.09.2026 gleicher Griff wie bei .fin (siehe Kommentar dort): auch hier liegt die Bildmarke ohne pointer-events ueber dem Abschnitt. */ .dates .bmk{position:absolute;right:-4%;bottom:-10%;height:60%;opacity:.05;filter:invert(1);pointer-events:none} .dates h2{font-size:clamp(46px,5.6vw,92px);color:var(--cream)} .dates h2 .soft{font-family:var(--bc);font-style:italic;font-weight:500;text-transform:none;color:var(--accent-dark)} .dates .head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,3.5vw,44px)} .dates .side{max-width:38ch;font-size:14px;color:rgba(247,245,240,.7);line-height:1.7} .intake{margin-bottom:34px} .intake .i-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--rule-dark)} .intake .i-name{font-family:var(--bc);font-weight:800;font-size:clamp(24px,2.6vw,40px);text-transform:uppercase;letter-spacing:.02em} .intake .i-meta{font-family:var(--m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand)} .ph{display:grid;grid-template-columns:150px 1fr auto;gap:clamp(16px,3vw,44px);align-items:baseline;padding:16px 0;border-bottom:1px solid var(--rule-dark)} .ph .pill{font-family:var(--m);font-size:10px;letter-spacing:.12em;text-transform:uppercase;border-radius:100px;padding:6px 13px;background:rgba(247,245,240,.14);color:rgba(247,245,240,.85);justify-self:start} .ph.now .pill{background:var(--hib);color:var(--on-hib)} .ph .fee{font-family:var(--bc);font-weight:800;font-size:clamp(26px,2.8vw,44px);letter-spacing:.02em;font-variant-numeric:tabular-nums} .ph.now .fee{color:#fff} .ph .dl{font-family:var(--m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,245,240,.55);text-align:right} .ph.past{opacity:.35} .ph.past .fee{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--hib)} .ph.now .dl{color:var(--sand)} .dates .note{margin-top:18px;font-size:12.5px;color:rgba(247,245,240,.5);max-width:70ch} @media(max-width:640px){.ph{grid-template-columns:1fr auto}.ph .dl{grid-column:1/-1;text-align:left}} /* ---------- Torn-Quote Testimonials (auch ohne Video) ---------- */ .tq-zone{padding:clamp(80px,10vw,150px) 0;background:var(--cream)} .tq-zone h2{font-size:clamp(44px,5.4vw,88px);margin-bottom:clamp(30px,4vw,50px)} .tq-zone h2 .soft{font-family:var(--bc);font-style:italic;font-weight:500;text-transform:none;color:var(--hib)} /* Video-Peak: das eine große Videobild (wie Homepage-Dora), Texte daneben */ .tq-layout{display:grid;grid-template-columns:7fr 5fr;gap:clamp(18px,2.5vw,32px);align-items:stretch} .tq-video{position:relative;border-radius:10px;overflow:hidden;min-height:520px;cursor:pointer;--rot:-.6deg;transform:rotate(var(--rot));box-shadow:0 26px 60px -26px rgba(0,0,0,.4)} .tq-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%} .tq-video::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,6,2,.72),transparent 55%)} .tq-video .vq-ct{position:absolute;left:26px;right:26px;bottom:24px;z-index:2;color:#fff} .tq-video .vq-q{font-family:var(--bc);font-weight:900;font-size:clamp(30px,3.2vw,52px);line-height:.95;text-transform:uppercase;letter-spacing:.02em} .tq-video .vq-q em{font-style:italic;font-weight:500;text-transform:none;color:var(--sand)} .tq-video .vq-a{margin-top:12px;font-family:var(--m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8)} .tq-video .play{position:absolute;top:24px;right:24px;z-index:2;display:inline-flex;align-items:center;gap:10px;font-family:var(--m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.4);border-radius:100px;padding:9px 16px} .tq-video .play svg{width:12px;height:12px;fill:#fff} .tq-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .4s ease} .tq-video.playing video{opacity:1;pointer-events:auto} .tq-video.playing::after,.tq-video.playing .vq-ct,.tq-video.playing .play{opacity:0;pointer-events:none} .tq-col{display:flex;flex-direction:column;gap:clamp(14px,2vw,22px);justify-content:center} .tq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,28px);align-items:start} /* Profilbild in Textkarten */ .tq .who-row{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:12px;border-top:1px solid var(--rule)} .tq .who-row .pf{width:46px;height:46px;border-radius:50%;background-size:cover;background-position:center;flex-shrink:0;border:2px solid var(--cream-card)} .tq .who-row .attr{margin:0;padding:0;border:0} @media(max-width:880px){.tq-layout{grid-template-columns:1fr}.tq-video{min-height:420px}} .tq{background:#fff;border-radius:8px;padding:26px 26px 22px;box-shadow:0 18px 44px -22px rgba(0,0,0,.25)} .tq:nth-child(1){--rot:-1.6deg} .tq:nth-child(2){--rot:1.2deg;margin-top:26px} .tq:nth-child(3){--rot:-.8deg;margin-top:8px} .tq .qm{font-family:var(--bc);font-weight:900;font-size:64px;line-height:0;color:var(--sand);display:block;margin:22px 0 18px} .tq .qt{font-family:var(--bc);font-weight:700;font-size:clamp(19px,1.7vw,25px);line-height:1.2;letter-spacing:.01em;color:var(--ink)} .tq .qphoto{aspect-ratio:16/10;border-radius:6px;overflow:hidden;position:relative} .tq .qphoto img{width:100%;height:100%;object-fit:cover} .tq .qphoto .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center} .tq .qphoto .play span{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.2);backdrop-filter:blur(6px);border:1.5px solid rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center} .tq .qphoto .play svg{width:16px;height:16px;fill:#fff;margin-left:3px} .tq .attr{margin-top:16px;padding-top:12px;border-top:1px solid var(--rule);font-family:var(--m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);line-height:1.7} @media(max-width:880px){.tq-grid{grid-template-columns:1fr}.tq:nth-child(n){margin-top:0}} /* ---------- Info Pack: der Seitenfächer ---------- */ .pack{background:var(--sage);padding:clamp(80px,10vw,140px) 0;overflow:hidden} .pack .wrap{display:grid;grid-template-columns:6fr 6fr;gap:clamp(36px,5vw,90px);align-items:center} .fan{position:relative;height:clamp(320px,44vh,480px)} .fan .pg{position:absolute;left:50%;top:50%;width:clamp(180px,22vw,260px);aspect-ratio:3/4;border-radius:6px;background-size:cover;background-position:center;box-shadow:0 24px 56px -20px rgba(0,0,0,.45);transform:translate(-50%,-50%) rotate(0deg);transition:transform 1s var(--ease)} .fan .pg::after{content:attr(data-pg);position:absolute;left:12px;bottom:10px;font-family:var(--m);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.9);text-shadow:0 1px 6px rgba(0,0,0,.6)} .fan.in .pg:nth-child(1){transform:translate(-50%,-50%) rotate(-14deg) translateX(-56%)} .fan.in .pg:nth-child(2){transform:translate(-50%,-50%) rotate(-4deg) translateX(-18%)} .fan.in .pg:nth-child(3){transform:translate(-50%,-50%) rotate(5deg) translateX(18%)} .fan.in .pg:nth-child(4){transform:translate(-50%,-50%) rotate(15deg) translateX(56%)} .pack h2{font-size:clamp(42px,5vw,80px)} .pack h2 .soft{font-family:var(--bc);font-style:italic;font-weight:500;text-transform:none;color:var(--hib)} .pack .pline{margin:18px 0 26px;font-size:16px;color:var(--ink-600);max-width:40ch;line-height:1.7} .pack .pform{display:flex;gap:10px;max-width:460px} .pack .pform input{flex:1;padding:15px 18px;border-radius:100px;border:1.5px solid rgba(33,33,33,.2);background:#fff;font-family:var(--d);font-size:14px} .pack .pmicro{display:block;margin-top:12px;font-family:var(--m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-600)} @media(max-width:880px){.pack .wrap{grid-template-columns:1fr}.fan{height:300px}} /* ---------- Uni auf Sage? nein — Uni auf Cream mit Foto ---------- */ .uni{padding:clamp(70px,8vw,120px) 0} .uni .wrap{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,80px);align-items:center} .uni .uphoto{aspect-ratio:4/3;border-radius:8px;overflow:hidden;transform:rotate(-1.4deg);box-shadow:0 24px 56px -24px rgba(0,0,0,.35);position:relative} .uni .uphoto img{width:100%;height:100%;object-fit:cover} .uni .uphoto .cap{position:absolute;left:16px;bottom:12px;font-family:var(--m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.9);text-shadow:0 1px 8px rgba(0,0,0,.5)} .uni h2{font-size:clamp(38px,4.4vw,68px)} .uni h2 .soft{font-family:var(--bc);font-style:italic;font-weight:500;text-transform:none;color:var(--hib)} .uni p{margin-top:16px;font-size:15px;color:var(--ink-600);line-height:1.75;max-width:54ch} .uni .ulogo{height:64px;margin-top:22px} .uni .ulogo img{height:100%;width:auto;object-fit:contain} /* Campus-Ministrip: visueller Beweis ohne Textwachstum */ .uni .ustrip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px} .uni .ustrip>div{aspect-ratio:4/3;border-radius:6px;background-size:cover;background-position:center} .uni .ustrip>div:nth-child(1){transform:rotate(1deg)} .uni .ustrip>div:nth-child(3){transform:rotate(-1.2deg)} @media(max-width:880px){.uni .wrap{grid-template-columns:1fr}} /* ---------- Tweak-Panel: alle Akzentfarben aus dem alten Draft ---------- */ /* 03.09.2026: --on-hib = Schriftfarbe auf der Akzentfarbe. Der Codex-Durchgang hatte fuer den Kontrast die Akzente verdunkelt (Sunset wurde braun, Lemon oliv). Zurueckgedreht: die Themes behalten ihre echte Farbe. Schrift darauf ueberall weiss - Entscheid Simone 03.09.2026, obwohl Weiss auf Sunset (2.4:1) und Lemon (1.9:1) unter dem Kontrast-Mindestmass liegt. Das Mood-Rad ist ein Spielfeature, die Standardfarbe Hibiskus (4.2:1) ist davon nicht betroffen. Sollte das je kippen: --on-hib bei sunset/marigold/sage-mid/teal-soft auf #1A1A1A setzen. */ html.theme-teal{--hib:#3F6D68;--hib-hover:#2E5852;--on-hib:#fff} html.theme-teal-soft{--hib:#5A8C86;--hib-hover:#3F6D68;--on-hib:#fff} html.theme-sage{--hib:#5E7852;--hib-hover:#4A6041;--on-hib:#fff} html.theme-sage-mid{--hib:#8FA882;--hib-hover:#6E8862;--on-hib:#fff} html.theme-sunset{--hib:#E8915A;--hib-hover:#D17A45;--on-hib:#fff} html.theme-marigold{--hib:#BCC42D;--hib-hover:#9FA622;--on-hib:#fff} /* 03.09.2026: Mood-Umschalter neu. Vorher nur eine Farbscheibe ohne Hinweis, was sie tut. Jetzt: zu = Scheibe + zweizeiliger Hinweis "What's your Bali mood?"; offen = Frage, darunter der Name der Stimmung in Blockschrift, darunter die Farben. Wunsch Simone. */ .tweak{position:fixed;left:0;bottom:96px;z-index:260;background:rgba(26,26,26,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--cream);border-radius:0 14px 14px 0;box-shadow:0 12px 32px rgba(0,0,0,.3);display:flex;flex-direction:column;align-items:flex-start;max-width:min(320px,calc(100vw - 24px))} /* Wegschieben: × oben rechts an der Lasche, auf dem Handy auch per Wisch nach links. Wie bei Netflix bleibt ein 12px-Griff am Rand stehen, ein Tipp darauf holt die Lasche zurueck. Gilt fuer den Besuch (sessionStorage sib-mood-hidden). */ .tweak{transition:transform .35s var(--ease)} .tweak.is-hidden,html.sib-mood-hidden .tweak:not(.is-shown){transform:translateX(calc(-100% + 12px));cursor:pointer} .tweak.is-hidden > *,html.sib-mood-hidden .tweak:not(.is-shown) > *{pointer-events:none;opacity:0} .tweak::after{content:"";position:absolute;top:8px;bottom:8px;right:3px;width:3px;border-radius:2px;background:linear-gradient(#CE4E72,#E8915A,#E3A91C,#8FA882,#3F6D68);opacity:0;transition:opacity .3s ease} .tweak.is-hidden::after,html.sib-mood-hidden .tweak:not(.is-shown)::after{opacity:1} .tweak .tw-hide{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;background:var(--cream);color:var(--ink);border:0;font:700 14px/20px var(--d);text-align:center;cursor:pointer;padding:0;box-shadow:0 2px 8px rgba(0,0,0,.3);opacity:.9;transition:opacity .2s ease,transform .2s ease} .tweak .tw-hide:hover{opacity:1;transform:scale(1.1)} .tweak .tw-hide::after{content:"";position:absolute;inset:-8px} .tweak.is-hidden .tw-hide,html.sib-mood-hidden .tweak:not(.is-shown) .tw-hide{opacity:0;pointer-events:none} @media (prefers-reduced-motion:reduce){.tweak{transition:none}} .tweak .tw-toggle{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;background:none;border:0;color:inherit;cursor:pointer;text-align:left;font:inherit} .tweak .tw-disc{width:36px;height:36px;border-radius:50%;flex:0 0 auto;background:conic-gradient(#CE4E72,#E8915A,#E3A91C,#8FA882,#3F6D68,#CE4E72);border:2px solid rgba(255,255,255,.7);transition:transform .2s ease} .tweak .tw-toggle:hover .tw-disc{transform:scale(1.08)} .tweak .tw-toggle:focus-visible{outline:2px solid var(--sand);outline-offset:-2px;border-radius:0 14px 14px 0} .tweak .tw-hint{font-family:var(--m);font-size:9px;letter-spacing:.14em;text-transform:uppercase;line-height:1.4;color:rgba(247,245,240,.78)} .tweak.open .tw-hint{display:none} .tweak .tw-body{display:none;flex-direction:column;gap:5px;padding:0 16px 14px 12px} .tweak.open .tw-body{display:flex} .tweak .tl{font-family:var(--m);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,245,240,.6)} .tweak .tw-name{font-family:var(--bc);font-weight:800;font-size:21px;letter-spacing:.04em;text-transform:uppercase;color:#fff;line-height:1.05;margin:1px 0 9px} .tweak .tw-swatches{display:flex;gap:8px;flex-wrap:wrap} .tweak .tw-swatches button{width:32px;height:32px;border-radius:50%;border:2px solid transparent;transition:transform .2s ease,border-color .2s ease;position:relative;cursor:pointer;padding:0} .tweak .tw-swatches button::after{content:"";position:absolute;inset:-7px} .tweak .tw-swatches button:hover{transform:scale(1.15)} .tweak .tw-swatches button.on{border-color:#fff} .tweak .c-hib{background:#CE4E72} .tweak .c-teal{background:#3F6D68} .tweak .c-teal-soft{background:#5A8C86} .tweak .c-sage{background:#5E7852} .tweak .c-sage-mid{background:#8FA882} .tweak .c-sunset{background:#E8915A} .tweak .c-marigold{background:#BCC42D} @media (prefers-reduced-motion:reduce){.tweak .tw-disc,.tweak .tw-swatches button{transition:none}} @media (max-width:680px){ /* Handy: Lasche hochkant, damit sie nicht in die Seite ragt. Scheibe oben, darunter nur "Bali mood?". */ .tweak .tw-toggle{flex-direction:column;align-items:center;gap:4px;padding:8px 8px 7px} .tweak .tw-disc{width:30px;height:30px} .tweak .tw-hint{font-size:7.5px;letter-spacing:.1em;text-align:center;line-height:1.2} .tweak .tw-hint-long{display:none} .tweak.open .tw-toggle{flex-direction:row;padding:8px 14px 8px 10px} } /* 44px-Touch-Target trotz kleiner Optik */ /* ---------- Nav-Links + Burger + Vollbild-Menü ---------- */ .nav-links{display:flex;gap:22px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;align-items:center;flex:0 0 auto} /* Aktiv-/Hover-Marker: der Hibiscus-Middot aus dem Logo wird Nav-Vokabular. Slidet beim Hover ein, steht fest auf aria-current. Kein Layout-Shift (absolut). */ .nav-links a{position:relative;opacity:.9;transition:opacity .2s ease} .nav-links a::before{content:"·";position:absolute;left:-11px;top:50%;transform:translate(-4px,-52%);color:var(--hib);font-weight:900;font-size:1.25em;opacity:0;transition:opacity .25s ease,transform .3s var(--ease)} .nav-links a:hover,.nav-links a:focus-visible,.nav-links a[aria-current]{opacity:1} .nav-links a:hover::before,.nav-links a:focus-visible::before,.nav-links a[aria-current]::before{opacity:1;transform:translate(0,-52%)} .burger{width:44px;height:44px;border-radius:100px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px} .burger span{width:16px;height:1.5px;background:currentColor;display:block;transition:transform .3s var(--ease)} header.nav.scrolled .burger{background:rgba(33,33,33,.06);border-color:rgba(33,33,33,.16)} /* Enge Zone, neu gerechnet für die vier gruppierten Punkte (ab 08.08.2026). Die zwei Schrumpfstufen zwischen 1081 und 1240px sind ersatzlos entfallen: sie waren eine Notlösung für acht gleichrangige Punkte. Vier Punkte plus Logo, Apply-Pille und Burger brauchen 803px Inhalt und passen ab 873px, mit Bali-Uhr 984px Inhalt und damit ab 1070px. Die Kopfzeile bleibt jetzt über die ganze Bandbreite gleich groß. 1 · Die Bali-Uhr ist das breiteste verzichtbare Element und geht zuerst. Schwelle 1200px statt der Notlösung 1420px: rechnerisch trägt sie bis 1070px, das lässt an der engsten Stelle rund 120px Luft statt zehn. (Die alte Regel im 880px-Block bleibt stehen, sie ist damit nur noch redundant, nicht falsch.) */ @media(max-width:1199px){.bali-clock{display:none}} /* 2 · Und der Burger übernimmt früher, bevor es eng wird, nicht danach. Unverändert bei 1080px, dort bleiben ohne Uhr 191px Luft. */ @media(max-width:1080px){.nav-links{display:none}} /* ========================================================================== MENUE — Umbau 26.08.2026 Ersetzt die alte Vollbild-Liste. Was weg ist und warum: · .menu.sky-dawn / .sky-day / .sky-golden / .sky-night — vier Farbverlaeufe nach Bali-Tageszeit. Lagen in keiner Markenfarbe, das Menue wirkte wie eine fremde Seite. Die Bali-Uhrzeit bleibt als Information in der Kopfzeile, sie ist nur keine Hintergrundfarbe mehr. · .menu-close — die "Close x"-Pille. Der Burger traegt den Zustand jetzt selbst und wird zum x, ein zweiter Schliessen-Knopf ist damit doppelt. · .m-progrow / .m-acc / .m-acc-toggle — das Programs-Akkordeon. Ein Akkordeon verlaengert die Liste, statt sie zu ersetzen: mit allen elf Programmen offen war das Menue rund 1,4 Bildschirme hoch. · .menu-logo — der geklonte Header-Lockup. Die Kopfzeile bleibt jetzt beim Oeffnen stehen (nur transparent), das Logo steht also ohnehin da. Aufbau: EIN DOM, zwei Verhalten. Schmal — .m-list liegt rechts ausserhalb und faehrt herein, sobald der Bereich .is-open traegt. Eine Ebene ersetzt die andere. Ab 1080px — alle .m-list stehen gleichzeitig als Spalten, .m-head wird zur Spaltenueberschrift und fuehrt auf die Uebersichtsseite. ========================================================================== */ /* visibility, nicht nur opacity: das geschlossene Menue liegt als fixe Flaeche ueber dem ganzen Fenster. Mit reinem opacity:0 bleibt es fuer Mausereignisse da, und pointer-events:none allein reicht nicht, weil einzelne Kinder es weiter unten wieder einschalten. visibility:hidden nimmt den ganzen Baum aus der Trefferpruefung — sonst frisst das unsichtbare Menue das Mausrad und die Seite laesst sich nicht mehr scrollen. */ .menu{position:fixed;inset:0;z-index:280;background:var(--ink-section);color:var(--cream); opacity:0;pointer-events:none;visibility:hidden;overflow:hidden; transition:opacity .3s ease,visibility 0s linear .3s} body.menu-open .menu{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .3s ease} html.menu-locked,html.menu-locked body{overflow:hidden} /* Die Kopfzeile bleibt beim Oeffnen sichtbar und rueckt ueber das Menue, damit der Burger an seinem Platz zum x werden kann. Ohne das liegt er unter der Menueflaeche (Kopf z-index 100, Menue 280) und ist tot. */ body.menu-open header.nav{z-index:300;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none; border-color:transparent;color:var(--cream);padding-right:calc(var(--gutter) + var(--sbw,0px))} body.menu-open header.nav::before{opacity:0} body.menu-open .nav-links,body.menu-open .bali-clock,body.menu-open .nav-cta{opacity:0;pointer-events:none;transition:opacity .2s ease} body.menu-open header.nav .nav-logo{color:var(--cream)} body.menu-open .burger{background:rgba(247,245,240,.10);border-color:rgba(247,245,240,.34);color:#fff} /* ---- Burger: jetzt ein Schalter. Die drei Striche werden zum x ---- */ .burger span{transition:transform .42s var(--ease),opacity .2s ease,width .42s var(--ease)} .burger.is-open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)} .burger.is-open span:nth-child(2){opacity:0;width:0} .burger.is-open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)} .menu .menu-close{display:none} /* Altmarkup in den 39 Seiten, ohne Aufgabe */ /* Kopfhoehe: ungescrollt sitzt die Kopfzeile unter dem Pulsband, gescrollt klebt sie oben und ist flacher. Das Menue folgt beidem, sonst klafft beim Oeffnen einer gescrollten Seite eine Luecke von rund 50px. */ .m-inner{position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(var(--pulse-h,34px) + 84px) var(--gutter) 22px} header.nav.scrolled + .menu .m-inner{padding-top:80px} .m-nav{flex:1;min-height:0;position:relative} /* ---- Ebene 1: vier Zeilen ---- .m-sec ist ein normaler Block, KEIN display:contents. Mit contents werden Ueberschrift und Liste zu zwei eigenstaendigen Rasterzellen und verteilen sich breit nach Autoplatzierung quer ueber zwei Reihen. */ .m-sec{display:block} .m-head{display:flex;align-items:center;gap:12px;width:100%;padding:13px 0;background:none;border:none;cursor:pointer; border-bottom:1px solid var(--rule-dark);color:var(--cream);text-align:left;position:relative} .m-h-lbl{font-family:var(--bc);font-weight:900;text-transform:uppercase;letter-spacing:.02em; font-size:clamp(30px,8.5vw,40px);line-height:1} .m-h-count{font-family:var(--m);font-size:10px;letter-spacing:.1em;color:rgba(247,245,240,.5);align-self:flex-start;margin-top:7px} .m-h-chev{margin-left:auto;display:grid;place-items:center;color:var(--sand)} .m-h-chev svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round} .m-head[aria-current]::before{content:"·";position:absolute;left:-15px;top:50%;transform:translateY(-58%);color:var(--hib);font-weight:900;font-size:2em} .m-head:focus-visible{outline:2px solid var(--hib);outline-offset:4px} /* ---- Ebene 2: ersetzt Ebene 1, statt sie zu verlaengern ---- */ .m-list{position:absolute;inset:0;background:var(--ink-section);display:flex;flex-direction:column; transform:translateX(100%);opacity:0;pointer-events:none; transition:transform .42s var(--ease),opacity .3s ease} .m-sec.is-open .m-list{transform:translateX(0);opacity:1;pointer-events:auto} /* 28.08.2026 (Simone: "Menue ist Schrott auf mobile", S.71): body.menu-open .m-head traegt weiter unten eine menuIn-Eintritts-Animation mit animation-fill-mode:both. Eine laufende/gehaltene CSS-Animation gewinnt IMMER gegen eine normale Regel auf denselben Eigenschaften, egal wie spezifisch - darum blieben alle vier Kopfzeilen (Programs/Bali/ Admissions/About) opacity:1 stehen, sobald ein Unterpunkt (.lvl2) offen war, und lagen als Textwand ueber der eigentlichen Liste. Am Desktop war das schon geloest (body.menu-open .m-head{animation:none} weiter unten im 1080px-Block) - hier fehlte dieselbe Zeile fuer schmale Schirme. */ .menu.lvl2 .m-head{animation:none;transform:translateX(-22%);opacity:0;pointer-events:none;transition:transform .42s var(--ease),opacity .3s ease} .m-back{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-height:48px;margin:-8px 0 4px -12px;padding:10px 12px;border-radius:14px; background:none;border:none;cursor:pointer;color:rgba(247,245,240,.72); font-family:var(--bc);font-weight:800;text-transform:uppercase;font-size:19px;letter-spacing:.06em; transition:background .2s ease,color .2s ease} .m-back:hover,.m-back:focus-visible{background:rgba(247,245,240,.07);color:#fff} .m-back svg{width:26px;height:26px;fill:none;stroke:var(--sand);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto} .m-l-title{flex:0 0 auto;font-family:var(--bc);font-weight:900;text-transform:uppercase;font-size:34px;letter-spacing:.02em;line-height:1; margin:2px 0 8px;display:flex;align-items:baseline;gap:10px} .m-l-title a{color:inherit} .m-l-title em{font-style:normal;font-family:var(--m);font-weight:400;font-size:11px;letter-spacing:.12em;color:var(--sand)} .m-list .m-grp{min-height:0} .m-list>.m-grp{overflow-y:auto;overscroll-behavior:contain} .m-g{display:inline-block;font-family:var(--bc);font-weight:800;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase; color:var(--on-hib);background:var(--hib);padding:.26em .6em;border-radius:5px;margin:11px 0 3px} .m-grp:first-of-type .m-g{margin-top:2px} /* Programmnamen sind Eigennamen, keine Navigationswoerter: gemischte Schrift. In Versalien zerfallen sechs Woerter lange Titel zur Wand. */ .m-i{position:relative;display:flex;align-items:center;min-height:44px;font-family:var(--d);font-weight:500;font-size:14.5px;line-height:1.3;padding:6.5px 0; border-bottom:1px solid var(--rule-dark);color:rgba(247,245,240,.92); transition:color .2s ease,padding-left .25s var(--ease)} .m-i::before{content:"·";position:absolute;left:0;top:50%;transform:translateY(-54%);color:var(--hib);font-weight:900;font-size:1.4em;opacity:0;transition:opacity .2s ease} .m-i:hover,.m-i:focus-visible{color:#fff;padding-left:15px} .m-i:hover::before,.m-i:focus-visible::before,.m-i[aria-current]::before{opacity:1} .m-i[aria-current]{color:#fff;padding-left:15px} /* Navigationswoerter duerfen gross und in Versalien stehen */ .m-i--word{font-family:var(--bc);font-weight:700;text-transform:uppercase;font-size:26px;letter-spacing:.02em;line-height:1.06;padding:9px 0} .m-finder{flex:0 0 auto;margin-top:12px;background:none;border:none;cursor:pointer;padding:0;text-align:left; font-family:var(--bc);font-weight:800;text-transform:uppercase;font-size:17px;letter-spacing:.03em;color:var(--sand); display:inline-flex;gap:9px;align-items:center;min-height:44px} .m-finder small{font-family:var(--m);font-weight:400;font-size:9.5px;letter-spacing:.14em;color:rgba(247,245,240,.45)} /* Vorschaukarte: schmal und mobil ohne Aufgabe, siehe 1280px-Block unten */ .m-prev{display:none} /* ---- Apply plus naechste Frist ---- flex:0 0 auto plus min-height: der Block darf unter keinen Umstaenden zusammengedrueckt werden, wenn die Liste darueber zu lang wird. Genau das ist beim ersten Einbau passiert, Apply war schlicht nicht mehr da. */ .m-band{flex:0 0 auto;display:flex;align-items:center;gap:16px;margin-top:16px;min-height:58px} .m-band-txt{display:none} .m-apply{flex:1;background:var(--hib);color:var(--on-hib);border-radius:18px;padding:15px 20px;display:flex;align-items:baseline;justify-content:space-between; font-family:var(--bc);font-weight:900;text-transform:uppercase;font-size:23px;letter-spacing:.02em;transition:background .2s ease} .m-apply:hover{background:var(--hib-hover);color:#fff} .m-apply small{font-family:var(--m);font-weight:400;font-size:9.5px;letter-spacing:.16em;color:var(--on-hib);opacity:.75} /* ---- Fusszeile ---- */ .m-foot{flex:0 0 auto;display:flex;gap:14px 20px;flex-wrap:wrap;align-items:center;margin-top:15px} .m-foot .mf-links{display:inline-flex;gap:16px;align-items:center;flex-wrap:wrap} .m-foot .mf-icons{display:inline-flex;gap:9px;align-items:center;margin-left:auto} .m-foot a{width:44px;height:44px;border-radius:50%;border:1px solid rgba(247,245,240,.3);display:inline-flex;align-items:center;justify-content:center; color:rgba(247,245,240,.82);transition:background .2s ease,color .2s ease,border-color .2s ease} .m-foot a:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)} .m-foot svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .m-foot a.mf-txt{width:auto;height:44px;border:none;border-radius:0;padding:0; font-family:var(--m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,245,240,.6)} .m-foot a.mf-txt:hover{background:none;color:var(--cream)} @media(max-width:560px){.m-foot{gap:12px}.m-foot .mf-icons{margin-left:0}} /* Eintritt: nur transform und opacity, der globale reduced-motion-Kill greift */ body.menu-open .m-head,body.menu-open .m-band,body.menu-open .m-foot{animation:menuIn .5s var(--ease) both} @keyframes menuIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} body.menu-open .m-sec:nth-child(2) .m-head{animation-delay:.05s} body.menu-open .m-sec:nth-child(3) .m-head{animation-delay:.10s} body.menu-open .m-sec:nth-child(4) .m-head{animation-delay:.15s} body.menu-open .m-band{animation-delay:.20s} body.menu-open .m-foot{animation-delay:.25s} /* ========================================================================== AB 1080px — dieselbe Struktur wird zum Vollbild. Dort, wo die vier Dropdowns uebernehmen, ist das Menue kein Notbehelf mehr, sondern die Gesamtuebersicht: alles gleichzeitig sichtbar, keine zweite Ebene. Ein abgedunkeltes Foto traegt den Grund — der Verlauf war falsch, aber der Gedanke dahinter richtig: das Menue soll ein Ort sein. ========================================================================== */ @media(min-width:1080px){ .menu{background:var(--ink-section)} .menu::before{content:"";position:absolute;inset:0;z-index:0; background:url('/assets/site/canva-candidate-palms-surf-aerial.webp') center 42%/cover;transform:scale(1.04)} /* Der Schleier muss traegen, nicht dekorieren: das Foto ist Atmosphaere, die Liste ist die Aufgabe. Zu hell und die Typo kaempft gegen Palmen. */ .menu::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(16,14,12,.955),rgba(16,14,12,.93) 52%,rgba(16,14,12,.90))} .m-inner{z-index:2;max-width:1340px;margin:0 auto;padding:calc(var(--pulse-h,34px) + clamp(64px,9vh,92px)) 34px 18px} header.nav.scrolled + .menu .m-inner{padding-top:clamp(64px,9vh,88px)} .m-foot{margin-top:clamp(10px,1.6vh,16px);padding-top:clamp(10px,1.4vh,14px)} .m-i{padding:clamp(5px,.8vh,7px) 0} .m-i--word{padding:clamp(6px,.9vh,8px) 0} /* Fuenf Spuren: Programs belegt zwei davon, die drei anderen je eine. Jeder Bereich ist EINE Rasterzelle, Ueberschrift und Liste bleiben zusammen. Darum oben display:block statt display:contents. */ .m-nav{position:static;display:grid;grid-template-columns:1.12fr 1.12fr .84fr .96fr .84fr;gap:0 30px;align-items:start; overflow-y:auto;overscroll-behavior:contain} .m-sec{display:flex;flex-direction:column;min-width:0} .m-sec[data-sec="programs"]{grid-column:1/3} /* Innerhalb von Programs stehen die drei Gruppen in zwei Spalten: Semester links, Short courses und Custom rechts. */ .m-sec[data-sec="programs"] .m-list{display:grid;grid-template-columns:1fr 1fr;gap:0 30px;align-items:start} .m-sec[data-sec="programs"] .m-grp:first-of-type{grid-column:1;grid-row:1/4} .m-sec[data-sec="programs"] .m-finder{grid-column:2;justify-self:start} /* Ueberschrift wird Spaltentitel und fuehrt auf die Uebersichtsseite */ .m-head{padding:0 0 11px;border-bottom:1px solid var(--rule-dark);align-items:baseline} .m-h-lbl{font-size:23px;letter-spacing:.07em;color:var(--sand)} .m-h-count{margin-top:0;align-self:baseline} .m-h-chev{display:none} .m-head[aria-current]::before{left:-14px;font-size:1.2em} /* Beide Ebenen gleichzeitig, nichts faehrt mehr herein. pointer-events NUR bei offenem Menue: sonst nimmt die geschlossene, unsichtbare Flaeche wieder Mausereignisse an. */ .m-list{position:static;transform:none;opacity:1;pointer-events:none;background:none;transition:none;padding-top:11px} body.menu-open .m-list{pointer-events:auto} .menu.lvl2 .m-head{transform:none;opacity:1;pointer-events:auto} .m-back,.m-l-title{display:none} .m-list>.m-grp{overflow:visible} .m-i{font-size:16.5px;padding:7px 0} .m-i--word{font-size:27px;padding:8px 0} .m-g{margin:0 0 4px} /* Frist und Apply werden zum Band ueber die volle Breite */ /* Band und Fuss sind Rahmen, keine Hauptsache: ihre Hoehe waechst mit dem Fenster mit, damit auf flachen Schirmen die Spalten den Platz bekommen. */ .m-band{margin-top:clamp(12px,2vh,22px);gap:24px;align-items:stretch;border-top:1px solid var(--rule-dark);padding-top:clamp(12px,1.8vh,20px)} .m-band-txt{display:flex;flex-direction:column;justify-content:center;gap:5px} .m-band-txt .k{font-family:var(--m);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--sand)} .m-band-txt b{font-family:var(--bc);font-weight:900;text-transform:uppercase;font-size:clamp(24px,3.4vh,34px);line-height:.98;letter-spacing:.02em;color:#fff} .m-apply{flex:0 0 auto;margin-left:auto;border-radius:100px;padding:16px 30px;gap:16px;align-items:baseline;justify-content:flex-start} .m-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--rule-dark)} .m-foot .mf-icons{margin-left:auto} body.menu-open .m-head{animation:none} body.menu-open .m-sec .m-list{animation:menuIn .5s var(--ease) both} body.menu-open .m-sec:nth-child(2) .m-list{animation-delay:.06s} body.menu-open .m-sec:nth-child(3) .m-list{animation-delay:.12s} body.menu-open .m-sec:nth-child(4) .m-list{animation-delay:.18s} /* ---- Programm-Vorschau, direkt unter der Liste ---- Erst stand sie als fuenfte Spalte am rechten Rand: sachlich richtig, aber einen halben Bildschirm von den Programmnamen entfernt, ueber die man faehrt. Unter der Liste liegt sie im Blickfeld UND kostet keine Spaltenbreite mehr — deshalb geht sie jetzt auch schon ab 1080px. Quer statt hoch, weil sie zwei Spalten breit ist: Bild links, Daten rechts. Die Spalten sind kurz, unter ihnen ist ohnehin Platz frei. Die Hoehe waechst mit dem Fenster statt fest zu stehen: auf einem 900px-Schirm bleiben zwischen Kopfzeile und Frist-Band nur rund 400px fuer die Spalten, und eine feste 136px-Karte wurde dort unten abgeschnitten. */ .m-prev{display:grid;grid-template-columns:clamp(140px,15vw,190px) 1fr;grid-column:1/-1;align-self:start; height:clamp(96px,13vh,140px);margin-top:clamp(10px,1.6vh,20px); border-radius:16px;overflow:hidden;background:rgba(247,245,240,.07)} .mp-img{height:100%;background-size:cover;background-position:center;background-color:rgba(247,245,240,.06); transition:opacity .25s ease} .mp-meta{padding:12px 16px;display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0} .mp-meta b{font-family:var(--bc);font-weight:900;text-transform:uppercase;font-size:clamp(17px,1.6vw,21px);line-height:1.02;letter-spacing:.02em} .mp-meta span{font-family:var(--m);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,245,240,.68);line-height:1.6} /* Der Finder passte in einer Zeile nicht mehr neben "60 seconds" und brach mitten im Satz um. Eine Stufe kleiner, dann steht er wieder. */ .m-finder{font-size:15.5px} .m-finder small{font-size:9px} } @media(min-width:1080px) and (max-width:1199px){ /* Eng: Bild schmaler, sonst bleibt fuer Preis und Frist keine Zeile */ .m-prev{grid-template-columns:150px 1fr} .mp-meta b{font-size:19px} } @media(min-width:1080px) and (max-height:720px){ .m-inner{padding-top:calc(var(--pulse-h,34px) + 62px)} .m-band-txt b{font-size:26px} .m-i{font-size:15px;padding:5.5px 0} .m-i--word{font-size:23px;padding:6px 0} } /* ---------- Credits-Übersetzer: 30 ECTS für jeden verständlich ---------- */ .hero-facts{display:flex;gap:0;margin-top:clamp(22px,3.5vh,38px);border-top:1px solid rgba(255,255,255,.28);border-bottom:1px solid rgba(255,255,255,.28);flex-wrap:wrap} .hf{padding:16px clamp(18px,2.6vw,36px);border-right:1px solid rgba(255,255,255,.28);color:#fff} .hf:first-child{padding-left:0} .hf:last-child{border-right:0} .hf .k{font-family:var(--m);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.65);margin-bottom:6px} .hf .v{font-family:var(--bc);font-weight:800;font-size:clamp(19px,1.8vw,28px);letter-spacing:.03em;text-transform:uppercase;line-height:1} .credsel{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;border-bottom:2px dashed rgba(255,255,255,.5);padding:8px 0 6px} .credsel .car{font-size:12px;opacity:.7;transition:transform .25s var(--ease)} .credsel.open .car{transform:rotate(180deg)} .credmenu{position:absolute;top:calc(100% + 12px);left:0;z-index:60;background:var(--cream);color:var(--ink);border-radius:12px;box-shadow:0 20px 48px rgba(0,0,0,.35);padding:8px;min-width:250px;max-width:min(250px,calc(100vw - 32px));opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .2s ease,transform .25s var(--ease)} /* Auf schmalen Schirmen sonst ueber den rechten Rand hinaus -> horizontaler Ueberlauf der Seite */ @media(max-width:560px){.credmenu{left:auto;right:0}} .credsel.open .credmenu{opacity:1;pointer-events:auto;transform:none} .credmenu button{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;min-height:44px;text-align:left;padding:10px 14px;border-radius:8px;font-family:var(--d);font-size:13px;font-weight:500} .credmenu button:hover{background:var(--cream-card)} .credmenu button.on{background:var(--hib);color:var(--on-hib)} .credmenu button .cv{font-family:var(--bc);font-weight:800;font-size:15px;letter-spacing:.03em;text-transform:uppercase} @media(max-width:640px){.hf{padding:12px 16px}.hf:first-child{padding-left:0}} /* ---------- Module: klickbar-ausklappbar (Hover hat jetzt eine Aktion) ---------- */ .cmod{cursor:pointer} .cmod .t p{max-height:0;overflow:hidden;opacity:0;margin-top:0;transition:max-height .5s var(--ease),opacity .4s ease,margin-top .3s ease} .cmod.open .t p{max-height:140px;opacity:1;margin-top:8px} .cmod .more-hint{font-family:var(--m);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);display:inline-block;margin-top:4px;transition:color .2s ease} .cmod:hover .more-hint{color:var(--hib)} .cmod.open .more-hint{display:none} /* ---------- Video: Portrait/Landscape sauber (Letterbox beim Abspielen) ---------- */ .tq-video.playing{background:#000} .tq-video.playing video{object-fit:contain} /* ---------- Uni: Foto-Stapel statt Ministrip ---------- */ .uni .ustack{position:relative;aspect-ratio:4/5;max-width:440px;width:100%} .uni .ustack .p{position:absolute;inset:0;background-size:cover;background-position:center;border-radius:8px;box-shadow:0 24px 56px -22px rgba(0,0,0,.4)} .uni .ustack .p1{transform:rotate(-2.5deg)} .uni .ustack .p2{transform:rotate(1.8deg) translate(16px,-16px);z-index:2} .uni .ustack .cap{position:absolute;z-index:3;left:18px;bottom:14px;font-family:var(--m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.9);text-shadow:0 1px 8px rgba(0,0,0,.5)} /* ---------- Good to know: KEINE Boxen mehr — editoriale Zeilen + ein Foto. Gleiche Sprache wie Module/Week: Hairline-Rows, BC-Frage, DM-Antwort. ---------- */ .g2k{padding:clamp(80px,10vw,140px) 0;background:var(--cream-card)} .g2k .wrap{display:grid;grid-template-columns:5fr 7fr;gap:clamp(36px,5vw,90px);align-items:start} .g2k .g2k-l{position:sticky;top:110px} .g2k .g2k-l h2{font-size:clamp(42px,5vw,80px);line-height:.9} .g2k .g2k-l .whisper{display:block;font-size:clamp(20px,2.2vw,30px);color:var(--hib);margin-top:14px;line-height:1.2;max-width:20ch} .g2k .g2k-photo{margin-top:26px;aspect-ratio:4/3;border-radius:8px;overflow:hidden;position:relative} .g2k .g2k-photo img{width:100%;height:100%;object-fit:cover} .g2k .g2k-photo .cap{position:absolute;left:14px;bottom:12px;font-family:var(--m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.9);text-shadow:0 1px 8px rgba(0,0,0,.5)} .g2k .rows{border-top:1px solid rgba(33,33,33,.16)} .g2k a.grow{display:block;padding:clamp(22px,2.6vw,32px) 0;border-bottom:1px solid rgba(33,33,33,.16);transition:padding-left .35s var(--ease)} .g2k a.grow:hover{padding-left:12px} .g2k .grow .gt{font-family:var(--m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--hib);display:block;margin-bottom:8px} .g2k .grow .gq{font-family:var(--bc);font-weight:800;font-size:clamp(24px,2.6vw,40px);text-transform:uppercase;letter-spacing:.02em;line-height:1;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:baseline;gap:0 10px} .g2k .grow .gq em{font-style:normal;font-weight:inherit;text-transform:inherit;font-family:inherit;color:inherit} .g2k .grow .gq .ga{font-size:.7em;color:var(--stone);margin-left:auto;transition:transform .3s var(--ease),color .2s ease} .g2k a.grow:hover .gq .ga{transform:translateX(6px);color:var(--hib)} .g2k .grow p{font-size:14px;line-height:1.7;color:var(--ink-600);margin-top:8px;max-width:56ch} @media(max-width:880px){.g2k .wrap{grid-template-columns:1fr}.g2k .g2k-l{position:static}} /* ---------- Foto-Stapel: echte Durchklick-Galerie (4 Bilder, Caption pro Bild) ---------- */ .stack{cursor:pointer} .stack .p{transition:transform .6s var(--ease),opacity .4s ease} .stack .p.pos0{transform:rotate(-2.5deg);z-index:4} .stack .p.pos1{transform:rotate(2deg) translate(16px,-16px);z-index:3} .stack .p.pos2{transform:rotate(-4.5deg) translate(-12px,12px);z-index:2;opacity:.92} .stack .p.pos3{transform:rotate(3.5deg) translate(26px,-28px);z-index:1;opacity:.85} /* Caption lebt IM Bild und wandert mit */ .stack .p .pcap{position:absolute;left:16px;bottom:13px;font-family:var(--m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.92);text-shadow:0 1px 8px rgba(0,0,0,.55);opacity:0;transition:opacity .3s ease .25s} .stack .p.pos0 .pcap{opacity:1} .stack .p::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(to top,rgba(10,6,2,.32),transparent 40%)} .flip-hint{position:absolute;z-index:5;top:12px;right:12px;font-family:var(--m);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(10,6,2,.42);backdrop-filter:blur(6px);border-radius:100px;padding:6px 12px;pointer-events:none} /* ---------- Dora: beim Abspielen Unterlage ausblenden (echtes Letterbox) ---------- */ .tq-video.playing img{opacity:0} .tq-video img{transition:opacity .3s ease} /* ---------- Mobile-Pass ---------- */ header.nav{top:var(--pulse-h,34px)} @media(max-width:880px){ .bali-clock{display:none} /* Puls darf umbrechen statt mitten im Wort abzuschneiden; --pulse-h wird per JS neu gemessen */ .pulse{font-size:9.5px;padding:8px 14px;gap:6px 10px;text-align:center;line-height:1.4} .pulse a{display:none} /* Top-Apply-Pille raus: sie überlappt sonst die Wortmarke; die untere Mobile-CTA deckt Apply ab */ header.nav .nav-cta{display:none} .nav-right{gap:10px} .hero h1{font-size:clamp(44px,12vw,80px)} .hero .whisper{font-size:clamp(20px,5.6vw,30px)} .hf{padding:12px 14px;min-width:calc(50% - 1px);border-right:0;border-bottom:1px solid rgba(255,255,255,.28)} .hero-facts{border-bottom:0} .week-l .days{display:none} /* Mobile: Text wandert unter die Bilder */ .week-l .whisper{margin-bottom:8px} .wcard .wtxt{display:block} /* Tages-Erklärung unter jedem Bild */ .cmod .on{-webkit-text-stroke:.8px var(--ink)} /* Outline zarter auf Mobile */ .cmod:hover .on{-webkit-text-stroke:.8px var(--hib)} } /* Week: Tages-Text pro Karte (Desktop übernimmt das die Sticky-Liste) */ .wcard{overflow:visible} .wcard .wframe{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:4/3} .wcard .wtxt{display:none;padding:12px 4px 0} .wcard .wtxt .wh{font-family:var(--bc);font-weight:800;font-size:26px;text-transform:uppercase;letter-spacing:.02em;line-height:1} .wcard .wtxt .wh em{font-style:normal;font-weight:inherit;text-transform:inherit;font-family:inherit;color:inherit} .wcard .wtxt p{font-size:13px;color:rgba(247,245,240,.72);margin-top:4px;max-width:44ch} /* Bild-Marquee: anfassen erlaubt — Interaktion stoppt den Autolauf */ .img-mq{cursor:grab} .img-mq.manual{overflow-x:auto;scrollbar-width:none} .img-mq.manual::-webkit-scrollbar{display:none} .img-mq.manual .img-mq-track{animation:none} /* Preise: Intakes ausklappbar (Desktop offen, Mobile kompakt) */ .intake summary{list-style:none;cursor:pointer} .intake summary::-webkit-details-marker{display:none} .intake .i-head .tgl{font-family:var(--d);font-weight:300;font-size:22px;color:rgba(247,245,240,.55);transition:transform .3s var(--ease);margin-left:auto} .intake[open] .i-head .tgl{transform:rotate(45deg)} .intake .i-from{font-family:var(--bc);font-weight:800;font-size:clamp(18px,1.8vw,26px);letter-spacing:.02em;color:var(--sand);white-space:nowrap} /* ---------- FAQ kompakt (SEO/AIO) ---------- */ .faqx{padding:clamp(56px,7vw,100px) 0 clamp(70px,8vw,120px)} .faqx .fq{border-bottom:1px solid var(--rule)} .faqx .fq:first-of-type{border-top:1px solid var(--rule)} .faqx summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:18px 0;font-family:var(--bc);font-weight:700;font-size:clamp(17px,1.5vw,23px);text-transform:uppercase;letter-spacing:.02em;transition:color .2s ease} .faqx summary:hover{color:var(--hib)} .faqx summary::-webkit-details-marker{display:none} .faqx summary::after{content:"+";font-weight:300;font-size:24px;color:var(--stone)} .faqx details[open] summary::after{content:"–"} .faqx .a{padding:0 0 18px;font-size:14.5px;line-height:1.75;color:var(--ink-600);max-width:66ch} /* ---------- Related Programs ---------- */ .rel{padding:clamp(60px,7vw,100px) 0;background:var(--cream-card)} .rel .rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .rel a.rc{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:4/3;display:block;transition:transform .35s var(--ease);background:var(--cream-deep)} .rel a.rc:hover{transform:translateY(-6px) rotate(-.5deg)} .rel .rc .im2{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .7s var(--ease)} .rel a.rc:hover .im2{transform:scale(1.05)} .rel .rc::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,6,2,.68),transparent 55%)} .rel .rc .rt{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;color:#fff} .rel .rc .rt .n2{font-family:var(--bc);font-weight:800;font-size:clamp(19px,1.8vw,26px);text-transform:uppercase;letter-spacing:.02em;line-height:1} .rel .rc .rt .m2{font-family:var(--m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-top:6px} @media(max-width:880px){.rel .rgrid{grid-template-columns:1fr}} /* ---------- Footer (echt, mit Icons) ---------- */ footer.big{background:var(--ink);color:rgba(247,245,240,.7);padding:0} footer.big *{text-transform:none;letter-spacing:normal;font-family:var(--d)} /* Footer = ruhige Lesezone, keine gesperrten Caps */ footer.big .fm{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(28px,4vw,64px);padding:clamp(48px,6vw,80px) var(--gutter);max-width:var(--max);margin:0 auto} footer.big .fl{display:flex!important;align-items:center;gap:14px;color:#fff;margin-bottom:14px;line-height:1} /* Wordmark-Span in Barlow Condensed zurückholen: footer.big * hatte ihn auf DM Sans gesetzt */ footer.big .fl>span:last-child{font-family:var(--bc)!important;font-weight:900;font-size:22px;letter-spacing:.2em!important;text-transform:uppercase!important;color:#fff} footer.big .fl b{color:var(--hib)} footer.big .fb p{font-size:13px;line-height:1.7;max-width:28ch} /* Footer komplett in DM Sans, normale Laufweite — kein Mono, keine gesperrten Caps */ footer.big .fh{font-family:var(--d);font-weight:700;font-size:14px;letter-spacing:.01em;color:rgba(247,245,240,.9);margin-bottom:14px} footer.big ul{list-style:none} footer.big li{padding:5px 0;font-size:14.5px} footer.big li a{color:rgba(247,245,240,.85);transition:color .2s ease} @media(max-width:880px){footer.big li a{display:inline-flex;align-items:center;min-width:44px;min-height:44px}} footer.big li a:hover{color:#fff} footer.big .socials{display:flex;gap:10px;margin-top:18px} footer.big .socials a{width:44px;height:44px;border-radius:50%;border:1px solid rgba(247,245,240,.25);display:inline-flex;align-items:center;justify-content:center;color:rgba(247,245,240,.85);transition:all .2s ease} footer.big .socials a:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)} footer.big .socials svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} footer.big .fbot{border-top:1px solid var(--rule-dark);padding:18px var(--gutter) 20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:rgba(247,245,240,.6)} @media(max-width:880px){footer.big .fm{grid-template-columns:1fr 1fr}footer.big .fb{grid-column:1/-1}footer.big .fbot{padding-bottom:76px}} /* Platz für Mobile-CTA */ /* ---------- Mood-Tab: eingeklappt am linken Rand, klappt als Karte auf ---------- */ /* ---------- Apply-Finale: die pinke Sektion ---------- */ .fin{background:var(--hib);color:var(--on-hib);padding:clamp(90px,12vw,170px) 0;position:relative;overflow:hidden} /* FEHLER 02.09.2026 (Simone, iPhone: "Book a 1:1 call, WhatsApp und die Mailadresse oeffnen sich nicht"). Sie hatte recht, und es war kein Link-Fehler: die Bildmarke ist ein absolut positioniertes ohne z-index. Absolut positionierte Elemente werden UEBER dem statischen Inhalt gezeichnet - der Baum lag also unsichtbar (opacity .08) ueber den drei Links und hat jeden Tap geschluckt. Bei .week war das schon geloest, dort haengt pointer-events:none am .bmk-clip; hier fehlte es. Betraf ALLE 23 Seiten mit dem "Talk to a human"-Abschluss, also die wichtigste Kontaktflaeche der Seite. Mit Playwright per document.elementFromPoint nachgewiesen und nach dem Fix gegengeprueft. */ .fin .bmk{position:absolute;left:-4%;bottom:-12%;height:70%;opacity:.08;filter:invert(1);pointer-events:none} .fin h2{font-size:clamp(56px,8vw,140px);color:var(--on-hib);line-height:.86} .fin h2 .soft{font-family:inherit;font-style:normal;font-weight:inherit;text-transform:inherit;color:inherit} /* Headline-Akzent site-weit: der SCHLUSSPUNKT traegt die Akzentfarbe (ersetzt die kursive .soft). Standard Hibiscus; auf Hibiscus-Flaechen dunkel, damit er sichtbar bleibt. Nur auf Punkte anwenden. Ein Punkt ist reine Interpunktion, da liest sich Farbe als bewusste Marke - ein Fragezeichen traegt Bedeutung im Satz und sieht eingefaerbt aus, als gehoere es nicht dazu (11.08.2026 in sieben .fin-Headlines entfernt). Auf Pink ist die natuerliche Umkehrung des Akzents ohnehin Creme, also die Textfarbe - der Abschnitt braucht keinen zweiten Akzent, den traegt der cremefarbene Button. */ .dotacc{color:var(--hib)} /* Auf Pink traegt die Headline KEINEN Akzent: der Punkt sitzt dort bei 140px als grosser Kreis und liest sich dunkel als Aufzaehlungszeichen statt als Satzende. Den Akzent traegt in diesem Abschnitt der cremefarbene Button. Auf Creme bleibt der Punkt hibiskusfarben - dort funktioniert er. */ .fin h2 .dotacc{color:inherit} .fin .lead{margin-top:22px;font-size:15.5px;line-height:1.7;color:var(--on-hib);opacity:.9;max-width:44ch} .fin .cta{margin-top:34px;display:flex;gap:16px;align-items:center;flex-wrap:wrap} .btn-cream{display:inline-flex;align-items:center;gap:12px;background:var(--cream);color:var(--ink);border-radius:100px;padding:17px 32px;font-size:14.5px;font-weight:700;letter-spacing:.04em;transition:transform .3s var(--ease)} .btn-cream:hover{transform:translateY(-2px)} .fin .risk{font-family:var(--m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-hib);opacity:.8;line-height:1.8} .fin .ladder{margin-top:26px;font-size:13.5px;color:var(--on-hib);opacity:.85} .fin .ladder a{color:var(--on-hib);border-bottom:1px solid currentColor;padding-bottom:1px} footer{background:var(--ink);color:rgba(247,245,240,.6);padding:24px var(--gutter);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--m);font-size:10px;letter-spacing:.14em;text-transform:uppercase} /* ---------- Intake-Tab + Drawer (sticky, überall erreichbar) ---------- */ .itab{position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:150;background:var(--hib);color:var(--on-hib);padding:18px 13px;border-radius:10px 0 0 10px;cursor:pointer;box-shadow:-8px 0 24px rgba(0,0,0,.2);display:flex;flex-direction:column;align-items:center;gap:12px;transition:background .2s ease,padding-right .2s ease} .itab:hover{background:var(--hib-hover);padding-right:17px} .itab .l{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--m);font-size:10px;letter-spacing:.18em;text-transform:uppercase} .itab .dts{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--bc);font-weight:800;font-size:15px;letter-spacing:.05em;text-transform:uppercase} .idrawer{position:fixed;top:0;right:0;width:440px;max-width:92vw;height:100dvh;z-index:220;background:var(--cream);color:var(--ink);transform:translateX(calc(100% + 80px));transition:transform .35s var(--ease);padding:28px;display:flex;flex-direction:column;gap:20px;overflow-y:auto;box-shadow:-24px 0 64px rgba(0,0,0,.25)} /* transform statt right: kein Layout/Paint pro Frame */ body.intake-open .idrawer{transform:translateX(0)} .ioverlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:210;opacity:0;pointer-events:none;transition:opacity .25s ease} body.intake-open .ioverlay{opacity:1;pointer-events:auto} .idrawer .ih{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:16px;border-bottom:1px solid var(--rule)} .idrawer .ih h3{font-size:26px} .idrawer .ih .x{width:44px;height:44px;border-radius:100px;background:var(--cream-card);display:flex;align-items:center;justify-content:center;font-size:16px} .idrawer .icard-d{background:var(--ink-section);color:#fff;border-radius:12px;padding:22px} .idrawer .icard-d .tag{font-family:var(--m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,245,240,.6);display:block;margin-bottom:8px} .idrawer .icard-d .nm{font-family:var(--bc);font-weight:900;font-size:24px;text-transform:uppercase;letter-spacing:.02em} .idrawer .icard-d .dts2{font-size:13.5px;color:rgba(247,245,240,.85);margin-top:6px} .idrawer .icard-d .row{display:flex;justify-content:space-between;padding:9px 0;border-top:1px solid rgba(247,245,240,.16);font-family:var(--m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,245,240,.65);align-items:center;margin-top:8px} .idrawer .icard-d .row strong{font-family:var(--bc);font-weight:800;font-size:19px;color:#fff;letter-spacing:.02em} .idrawer .ddl{background:color-mix(in srgb,var(--hib) 16%,#fff);border:1px solid color-mix(in srgb,var(--hib) 40%,transparent);border-radius:10px;padding:13px 16px;font-size:13px;line-height:1.55} .idrawer .ddl strong{color:var(--hib)} .idrawer .ifoot{margin-top:auto;display:flex;flex-direction:column;gap:10px} .idrawer .ifoot .btn-hib{justify-content:center} .idrawer .im2{font-family:var(--m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);text-align:center} /* Mehrere Durchgaenge im Drawer (01.09.2026). Der naechste bleibt die dunkle Karte, jeder weitere steht hell darunter - gleichwertig lesbar, aber nicht in Konkurrenz um den Blick. */ .idrawer .icard-d + .icard-d{background:var(--cream-card);color:var(--ink);border:1px solid var(--rule)} .idrawer .icard-d + .icard-d .tag{color:var(--stone)} .idrawer .icard-d + .icard-d .dts2{color:var(--stone)} .idrawer .icard-d + .icard-d .row{border-top-color:var(--rule);color:var(--stone)} .idrawer .icard-d + .icard-d .row strong{color:var(--ink)} /* Die VIP-Zahl bleibt unter Verschluss - hier als ruhige Zeile statt als Preis in Blockschrift. */ .idrawer .icard-d .rw-veiled{font-family:var(--m);font-size:10px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,245,240,.75)} .idrawer .icard-d + .icard-d .rw-veiled{color:var(--stone)} .idrawer .idrawer-upcoming{font-size:12.5px;line-height:1.6;color:var(--stone);padding-left:14px;border-left:2px solid var(--rule)} .idrawer .idrawer-upcoming strong{font-family:var(--bc);font-weight:800;font-size:14px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)} @media(max-width:780px){ .itab{display:none} /* Korrektur 31.08.2026 (Simone: "rutscht in die linke untere Ecke"): das max-width:92vw der Grundregel blieb im Sheet-Modus stehen. Mit left:0 und right:0 UND einer kleineren Maximalbreite richtet der Browser das Panel linksbuendig aus - rechts blieb ein Streifen Seite sichtbar. */ .idrawer{top:auto;right:0;left:0;bottom:0;width:100%;max-width:100%;height:auto;max-height:86vh;border-radius:16px 16px 0 0;transform:translateY(calc(100% + 80px));padding:24px 20px calc(24px + env(safe-area-inset-bottom))} body.intake-open .idrawer{transform:translateY(0)} /* Die Karte wirkte gequetscht: Kleinschrift in drei verschiedenen Groessen, und die Wertspalte brach mitten im Wort um ("ALL / IN"). Eine Groesse fuer alle Kleinschrift-Zeilen, Werte brechen nicht mehr. */ .idrawer .ih h3{font-size:22px} .idrawer .icard-d{padding:20px 18px} .idrawer .icard-d .tag{font-size:10px;letter-spacing:.12em;margin-bottom:10px} .idrawer .icard-d .row{font-size:10px;letter-spacing:.08em;gap:16px;padding:11px 0} .idrawer .icard-d .row span{line-height:1.55;max-width:22ch} .idrawer .icard-d .row strong{white-space:nowrap;font-size:18px} .idrawer .im2{letter-spacing:.09em;line-height:1.6} .m-cta{display:grid!important} } .m-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:90;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:rgba(247,245,240,.94);backdrop-filter:blur(16px);border-top:1px solid var(--rule);grid-template-columns:1fr auto;gap:8px} .m-cta .btn-hib{justify-content:center;padding:13px 18px;font-size:13px} .m-cta .m-int{display:flex;min-height:44px;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:8px 16px;background:var(--cream-card);border-radius:100px;font-family:var(--d);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase} .m-cta .m-int strong{font-family:var(--bc);font-weight:800;font-size:13px} /* ================================================================ AUX-SEITEN (V3-Migration, ab 03.07.2026) — Homepage & Info-Seiten. Gleiche Sprache wie die Programmseiten: Hairlines statt Boxen, Sand/Teal statt Grau, gekippt nur für Erinnerungsstücke. ================================================================ */ /* Hero-Aktionen (Homepage: Finder-CTA + Alt-Link) */ .hero-actions{display:flex;flex-direction:column;gap:12px;align-items:flex-end} .hero-alt{font-size:12.5px;color:rgba(255,255,255,.78)} .hero-alt a{color:#fff;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:1px} @media(max-width:780px){.hero-actions{align-items:flex-start}} /* Programm-Rail auf Ink */ .rail{background:var(--ink-section);color:var(--cream);padding:clamp(80px,9vw,140px) 0} .rail .head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding:0 var(--gutter);margin-bottom:clamp(30px,4vw,52px)} .rail h2{font-size:clamp(46px,5.6vw,92px);color:var(--cream)} .rail h2 .soft{font-family:var(--bc);font-style:italic;font-weight:500;text-transform:none;color:var(--accent-dark)} .rail .side{max-width:38ch;font-size:14px;color:rgba(247,245,240,.7);line-height:1.7} .rail-scroll{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gutter) 8px;scrollbar-width:none} .rail-scroll::-webkit-scrollbar{display:none} .rcard{scroll-snap-align:start;background:var(--cream);color:var(--ink);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;flex:0 0 clamp(280px,26vw,360px);transition:transform .4s var(--ease),box-shadow .4s var(--ease)} .rcard:hover{transform:translateY(-8px);box-shadow:0 26px 52px -28px rgba(0,0,0,.55)} .rcard .im{height:220px;background:var(--cream-deep);position:relative;overflow:hidden} .rcard .im>div{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s var(--ease)} .rcard:hover .im>div{transform:scale(1.06)} .rcard .im .tag{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);border-radius:100px;padding:5px 12px;font-family:var(--d);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-deep);z-index:2} .rcard .im .tag.short{color:#5E7852} .rcard .im .tag.custom{color:var(--hib)} .rcard .bd{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1} .rcard .f{font-family:var(--d);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:6px} .rcard .t{font-family:var(--bc);font-weight:800;font-size:23px;line-height:1.02;letter-spacing:.02em;text-transform:uppercase;margin-bottom:14px} .rcard .price{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;align-items:flex-end;gap:12px} .rcard .price .p{font-family:var(--bc);font-weight:800;font-size:23px;letter-spacing:.02em} .rcard .price .p span{display:block;font-family:var(--d);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--stone);margin-bottom:3px} /* Reicherer Hover: Preis/Deadline schiebt sich ein, Deadline nimmt den Akzent (nur hover-fähige Geräte). Transforms NUR im Hover (kein Ruhe-Transform → keine Extra-Compositing-Layer beim Scrollen). */ @media(hover:hover){ .rcard .price{transition:transform .4s var(--ease)} .rcard:hover .price{transform:translateY(-2px)} .rcard .price .dl{opacity:.62;transition:opacity .35s var(--ease),transform .35s var(--ease),color .2s ease} .rcard:hover .price .dl{opacity:1;transform:translateY(-1px);color:var(--hib)} } .rcard .dl{font-family:var(--m);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--hib);text-align:right;line-height:1.5} .rcard.quiz-card{background:var(--hib);color:var(--on-hib);justify-content:center;padding:32px 28px} .rcard.quiz-card .q-eye{font-family:var(--d);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--on-hib);opacity:.85;margin-bottom:16px} .rcard.quiz-card .q-h{font-family:var(--bc);font-weight:900;font-size:33px;line-height:.95;text-transform:uppercase;letter-spacing:.02em;margin-bottom:10px} .rcard.quiz-card .q-h em{font-style:normal;font-weight:inherit;text-transform:inherit;font-family:inherit;color:inherit} .rcard.quiz-card p{font-size:13.5px;line-height:1.6;color:var(--on-hib);opacity:.92;margin-bottom:22px} .rcard.quiz-card .q-btn{background:var(--on-hib);color:var(--hib);border-radius:100px;padding:13px 22px;font-weight:700;font-size:13.5px;display:inline-block;align-self:flex-start;transition:transform .3s var(--ease)} .rcard.quiz-card .q-btn:hover{transform:translateY(-2px)} .rail .foot{display:flex;justify-content:space-between;align-items:center;padding:clamp(24px,3vw,36px) var(--gutter) 0;gap:20px;flex-wrap:wrap} .rail .foot .hint{font-family:var(--m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,245,240,.5)} .rail .foot a{font-size:14px;font-weight:600;color:#fff;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px} /* Steps: Hairline-Zeilen, keine Boxen */ .how{padding:clamp(80px,10vw,150px) 0;background:var(--cream)} .how .wrap{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,5vw,100px);align-items:start} .how h2{font-size:clamp(44px,5.4vw,88px)} .how .whisper{display:block;font-family:var(--bc);font-style:italic;font-weight:500;text-transform:none;font-size:clamp(20px,2.2vw,30px);color:var(--teal-deep);margin-top:14px;line-height:1.2;max-width:22ch} @media(max-width:880px){.how .wrap{grid-template-columns:1fr}} .steps{display:flex;flex-direction:column;border-top:1px solid var(--rule)} /* Feste Label-Spalte: sonst rückt "Begin" ein, weil "Day one" breiter ist als "5 min" */ .step{display:grid;grid-template-columns:132px 1fr;gap:22px;padding:22px 0;border-bottom:1px solid var(--rule);align-items:baseline} .step .n{font-family:var(--m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep)} .step .h{font-family:var(--bc);font-weight:800;font-size:clamp(24px,2.3vw,36px);letter-spacing:.02em;text-transform:uppercase} .step p{grid-column:2;font-size:13.5px;color:var(--ink-600);max-width:46ch;margin-top:4px} @media(max-width:680px){.step{grid-template-columns:1fr;gap:6px}.step p{grid-column:1}} /* Zahlen mit Count-up */ .nums{background:#fff;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} .nums .wrap{display:grid;grid-template-columns:repeat(4,1fr)} .num{padding:clamp(32px,4vw,56px) 24px;border-right:1px solid var(--rule)} .num:last-child{border-right:0} .num .n{font-family:var(--bc);font-weight:900;font-size:clamp(44px,4.8vw,88px);line-height:.95;letter-spacing:.02em;font-variant-numeric:tabular-nums} .num .l{font-family:var(--d);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--stone);margin-top:12px;max-width:18ch;line-height:1.5} @media(max-width:780px){.nums .wrap{grid-template-columns:1fr 1fr}.num:nth-child(-n+2){border-bottom:1px solid var(--rule)}.num:nth-child(2),.num:nth-child(4){border-right:0}} /* Peak: das eine große Zitat auf Ink */ .peak{position:relative;background:var(--ink-section);color:var(--cream);overflow:hidden} .peak-grid{display:grid;grid-template-columns:5fr 7fr;min-height:82vh} .peak-img{position:relative;min-height:420px;background-size:cover;background-position:center 22%} .peak-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,transparent 60%,var(--ink-section) 100%)} .peak-bd{display:flex;flex-direction:column;justify-content:center;padding:clamp(44px,6vw,100px)} .peak-eye{font-family:var(--m);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,245,240,.55);margin-bottom:26px} .peak-q{font-size:clamp(40px,5vw,84px);line-height:.94} .peak-q em{font-family:var(--bc);font-style:italic;font-weight:500;text-transform:none;color:var(--accent-dark)} .peak-who{display:flex;align-items:center;gap:15px;margin-top:30px} .peak-face{display:none} .peak-attr{font-family:var(--m);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,245,240,.6)} /* Voices-Rotation: Crossfade per opacity, Dots, Klick aufs Bild */ .peak-img{cursor:pointer} .peak-img,.peak-eye,.peak-q,.peak-attr{transition:opacity .45s ease} .peak.swapping .peak-img,.peak.swapping .peak-eye,.peak.swapping .peak-q,.peak.swapping .peak-attr{opacity:0} .peak-dots{display:flex;gap:0;margin-top:12px} .peak-dots button{width:44px;height:44px;border-radius:50%;background:transparent;border:0;padding:0;cursor:pointer;position:relative;transition:transform .25s ease} .peak-dots button::after{content:"";position:absolute;width:9px;height:9px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:rgba(247,245,240,.28);transition:background .25s ease,transform .25s ease} .peak-dots button.on::after{background:var(--accent-dark);transform:translate(-50%,-50%) scale(1.25)} .peak-dots button:hover::after{background:rgba(247,245,240,.55)} /* 28.08.2026: Desktop-Drag (v3.js) - Greifhand als Hinweis, dass sich die Flaeche ziehen laesst; Bedienelemente behalten ihren eigenen Zeiger, da cursor auf direkt getroffenen Kindern (button{cursor:pointer}) Vorrang hat. */ @media(pointer:fine){.peak{cursor:grab}.peak.dragging{cursor:grabbing}} @media(prefers-reduced-motion:reduce){.peak-img,.peak-eye,.peak-q,.peak-attr{transition:none}} @media(max-width:880px){.peak-grid{grid-template-columns:1fr}.peak-img{min-height:52vh}.peak-img::after{background:linear-gradient(to bottom,transparent 55%,var(--ink-section) 100%)}} /* Handy: die vollflaechige Buehne kostete 1,38 Bildschirmhoehen fuer EINE Stimme (Foto 439px + Zitat 376px). Deshalb wird das Foto hier zum Portraet neben dem Namen, das Zitat ist die Hauptsache, und man wischt durch die Stimmen. */ @media(max-width:700px){ .peak-grid{min-height:0} .peak-img{display:none} .peak-bd{padding:clamp(34px,8vw,52px) var(--gutter)} .peak-q{font-size:clamp(25px,7.2vw,33px);line-height:1.06} .peak-eye{margin-bottom:18px} .peak-face{display:block;flex:0 0 86px;width:86px;height:86px;border-radius:50%; background-size:cover;background-position:center 22%;border:1px solid rgba(247,245,240,.28)} .peak-who{margin-top:26px;gap:14px} .peak-attr{font-size:10.5px;line-height:1.7} .peak-face,.peak-who .peak-attr{transition:opacity .45s ease} .peak.swapping .peak-face{opacity:0} .peak-dots{margin-top:10px} .peak-dots button::after{width:11px;height:11px} } /* 60s-Finder (Quiz-Modal) */ .quiz-modal{position:fixed;inset:0;z-index:300;background:rgba(20,18,15,.6);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:var(--gutter)} body.quiz-open .quiz-modal{display:flex} .quiz-box{background:var(--cream);border-radius:14px;max-width:640px;width:100%;padding:clamp(28px,4vw,52px);position:relative;max-height:88vh;overflow-y:auto} .quiz-box .q-close{position:absolute;top:10px;right:12px;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);padding:10px} .quiz-box .q-step{font-family:var(--m);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:16px} .quiz-box h2{font-family:var(--bc);font-weight:900;font-size:clamp(28px,3.4vw,44px);text-transform:uppercase;letter-spacing:.02em;line-height:.95;margin-bottom:24px} .quiz-box h2 em{font-style:normal;font-weight:inherit;text-transform:inherit;font-family:inherit;color:inherit} .q-opts{display:flex;flex-direction:column;gap:10px} .q-opt{text-align:left;border:1.5px solid var(--rule);border-radius:10px;padding:16px 20px;font-size:14.5px;font-weight:500;transition:all .2s ease;display:flex;justify-content:space-between;gap:14px;align-items:baseline;background:#fff} .q-opt:hover{border-color:var(--ink);transform:translateX(4px)} .q-opt small{font-weight:400;font-family:var(--m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)} .q-result .r-eye{font-family:var(--m);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--hib);margin-bottom:14px} .q-result .r-name{font-family:var(--bc);font-weight:900;font-size:clamp(30px,3.6vw,48px);text-transform:uppercase;letter-spacing:.02em;line-height:.95;margin-bottom:12px} .q-result .r-meta{font-family:var(--m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:24px} .q-result p{font-size:14.5px;color:var(--ink-600);margin-bottom:20px;line-height:1.7} .q-result .r-actions{display:flex;gap:12px;flex-wrap:wrap} .btn-ghost{display:inline-flex;align-items:center;gap:10px;border:1.5px solid var(--ink);color:var(--ink);border-radius:100px;padding:14px 26px;font-size:14px;font-weight:600;letter-spacing:.04em;transition:all .2s ease} .btn-ghost:hover{background:var(--ink);color:var(--cream)} /* Mobile-Nav-Uhr: erscheint erst beim Scrollen (wenn Wortmarke eingefaltet ist), mittig zwischen Bildmarke und Burger */ .nav-clock-m{display:none} @media(max-width:680px){ header.nav.scrolled .nav-clock-m{display:inline-flex;align-items:center;gap:6px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;pointer-events:none;transition:opacity .3s ease} header.nav.scrolled .nav-clock-m .d{width:6px;height:6px;border-radius:50%;background:var(--hib);flex:0 0 auto;animation:navClockPulse 2.2s ease-in-out infinite} header.nav.scrolled .nav-clock-m svg{width:14px;height:14px;flex:0 0 auto} } @keyframes navClockPulse{0%,100%{opacity:.4}50%{opacity:1}} @media(prefers-reduced-motion:reduce){.nav-clock-m .d{animation:none}} /* ================================================================ GLOBALE NAV-VERBESSERUNGEN (ab 22.07.2026) 1) Hero-Schleier: liest den weissen Nav-Text ueber hellen Hero- Oberkanten. Nur im NICHT-gescrollten Zustand; scrolled = solider Cream-Balken uebernimmt. Weich auslaufend, seitenweit, ohne Hero abhaengig zu sein (dark-on-dark auf .phero-Seiten unsichtbar). 2) Programs-Dropdown: schlichtes gruppiertes Panel, per JS an den Programs-Link angedockt. Eigener heller Hintergrund -> in beiden Nav-Zustaenden lesbar. Nur opacity/transform, reduced-motion-safe. ================================================================ */ /* 1) Hero-Lesbarkeits-Schleier hinter der Nav-Zone */ .nav::before{content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--pulse-h,34px));height:150px;background:linear-gradient(to bottom,rgba(10,6,2,.42) 0%,rgba(10,6,2,.22) 46%,rgba(10,6,2,0) 100%);pointer-events:none;z-index:-1;opacity:1;transition:opacity .3s var(--ease)} .nav.scrolled::before{opacity:0} /* 2) Programs-Dropdown */ .nav-dd{position:relative;display:inline-flex;align-items:center} .nav-dd>a{display:inline-flex;align-items:center;gap:7px} .nav-dd>a::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.65;transition:transform .25s var(--ease),opacity .2s ease} .nav-dd:hover>a::after,.nav-dd.open>a::after{opacity:1} .nav-dd.open>a::after{transform:rotate(-135deg) translateY(-1px)} .nav-dd-panel{position:absolute;top:calc(100% + 14px);left:0;min-width:322px;max-width:400px;background:var(--cream);color:var(--ink);border:1px solid var(--rule);border-radius:14px;box-shadow:0 24px 56px -20px rgba(0,0,0,.4);padding:12px;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .2s ease,transform .25s var(--ease);z-index:130} /* Mini-Mega: lebende Vorschau (Foto + Preis/Deadline aus courses.js) neben der Linkliste */ .nav-dd-panel.has-prev{display:grid;grid-template-columns:minmax(300px,1fr) 216px;gap:12px;min-width:560px;max-width:620px} .nav-dd-prev{border-radius:10px;overflow:hidden;background:var(--cream-card);display:flex;flex-direction:column;min-height:100%} .nav-dd-prev .ph{flex:1;min-height:190px;background-size:cover;background-position:center;transition:opacity .25s ease} .nav-dd-prev.swap .ph{opacity:.35} .nav-dd-prev .meta{padding:10px 12px;font-family:var(--m);font-size:10.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);line-height:1.6} .nav-dd-prev .meta strong{display:block;margin-bottom:3px;font-family:var(--bc);font-weight:800;font-size:14px;letter-spacing:.03em;color:var(--ink)} /* unsichtbare Bruecke, damit der Hover die 14px-Luecke ueberspringt */ .nav-dd-panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px} .nav-dd.open .nav-dd-panel{opacity:1;pointer-events:auto;transform:translateY(0)} /* Das letzte Klappmenue (Stories) sitzt am rechten Rand der Linkzeile. Bei schmalem Fenster liefe ein linksbuendiges Panel aus dem Viewport, und weil body ein overflow-x:hidden traegt, wuerde es stumm abgeschnitten statt zu scrollen. Deshalb haengt das letzte Panel rechtsbuendig. */ .nav-links .nav-dd:last-child .nav-dd-panel{left:auto;right:0} /* Gruppen-Label als Blockschrift-Chip (identisch zum Mobile-Menue) */ .nav-dd-grp{display:inline-block;font-family:var(--bc);font-weight:800;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--on-hib);background:var(--hib);padding:.26em .6em;border-radius:6px;margin:15px 12px 8px;line-height:1.25} .nav-dd-grp:first-child{margin-top:4px} /* Programm-Zeilen: kein Beige-Hover mehr, sondern das Nav-Vokabular (Hibiscus-Middot) */ .nav-dd-panel a.nav-dd-item{position:relative;display:block;padding:8px 12px;border-radius:8px;font-family:var(--d);font-size:13.5px;font-weight:500;letter-spacing:normal;text-transform:none;line-height:1.35;color:var(--ink);opacity:1;transition:color .18s ease,background .18s ease,padding-left .22s var(--ease)} .nav-dd-panel a.nav-dd-item::before{content:"·";position:absolute;left:12px;top:50%;transform:translateY(-54%);color:var(--hib);font-weight:900;font-size:1.35em;opacity:0;transition:opacity .18s ease} .nav-dd-panel a.nav-dd-item:hover,.nav-dd-panel a.nav-dd-item:focus-visible{color:var(--hib);background:color-mix(in srgb,var(--hib) 7%,transparent);padding-left:26px} .nav-dd-panel a.nav-dd-item:hover::before,.nav-dd-panel a.nav-dd-item:focus-visible::before{opacity:1} /* Seiten-Bloecke im Bali-Panel (11.08.): jeder Block ist eine eigene Seite, der Name steht als klickbare Ueberschrift oben, Trennlinie zwischen zweien. Absichtlich NICHT die .nav-dd-grp-Pille aus dem Programs-Panel: dort sind Gruppen Kategorien, hier sind es Seiten. Gleiches Aussehen hatte genau die Verwechslung erzeugt, die das hier aufloest. */ .nav-dd-sec.sep{margin-top:12px;padding-top:12px;border-top:1px solid var(--rule)} .nav-dd-page{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:7px 12px;margin-bottom:2px;border-radius:8px;font-family:var(--bc);font-weight:800;font-size:15px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);transition:background .18s ease,color .18s ease} .nav-dd-page:hover,.nav-dd-page:focus-visible{color:var(--hib);background:color-mix(in srgb,var(--hib) 7%,transparent)} /* Apply schliesst das Admissions-Menue ab und ist der einzige farbige Eintrag darin - ein zweiter wuerde die Auszeichnung sofort entwerten. */ .nav-dd-sec.cta{margin-top:12px;padding-top:12px;border-top:1px solid var(--rule)} .nav-dd-page.is-cta{background:var(--hib);color:var(--on-hib);margin-bottom:0} .nav-dd-page.is-cta:hover,.nav-dd-page.is-cta:focus-visible{background:var(--hib-hover,#B8425F);color:#fff} /* Panel-Fuss: Alle Programme + 60s-Finder (fehlte hier bisher, Mobile hat es) */ .nav-dd-foot{display:flex;flex-direction:column;gap:2px;margin-top:12px;padding-top:10px;border-top:1px solid var(--rule)} .nav-dd-foot a,.nav-dd-foot button{display:flex;align-items:baseline;justify-content:space-between;gap:10px;width:100%;padding:9px 12px;border-radius:8px;background:none;border:none;cursor:pointer;font-family:var(--bc);font-weight:800;font-size:14px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);text-align:left;transition:background .18s ease,color .18s ease} .nav-dd-foot a:hover,.nav-dd-foot button:hover,.nav-dd-foot a:focus-visible,.nav-dd-foot button:focus-visible{color:var(--hib);background:color-mix(in srgb,var(--hib) 7%,transparent)} .nav-dd-foot small{font-family:var(--m);font-size:9.5px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)} /* ---- Mobile-Ueberlauf: Elemente, die nicht umbrechen duerfen oder verschoben sind, schieben auf schmalen Schirmen die ganze Seite seitlich weg. Gemessen bei 375px. ---- */ @media(max-width:560px){ .stk{white-space:normal;max-width:calc(100vw - 40px);font-size:14px;padding:9px 16px} .ects{white-space:normal} .pos1,.pos2,.pos3{transform:none!important} } /* Modulzeile: dritte Spalte (ECTS-Badge) passt auf schmalen Schirmen nicht daneben. */ @media(max-width:560px){ .cmod{grid-template-columns:auto 1fr;gap:12px 14px} .cmod .ects{grid-column:2;justify-self:start;margin-top:6px} .cmod .more-hint{display:block;margin-top:6px} } /* ---------- FILM: ein Verhalten fuer jedes Video (ab 27.07.2026) ---------- */ .film{position:relative} .film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain; background:#0A0602;z-index:4;display:block} .film-close{position:absolute;top:14px;right:14px;z-index:5; display:inline-flex;align-items:center;gap:8px; font-family:var(--m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase; color:#fff;background:rgba(10,6,2,.62);backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.38);border-radius:100px; padding:9px 15px;cursor:pointer;transition:background .2s ease,border-color .2s ease} .film-close:hover{background:rgba(10,6,2,.85);border-color:rgba(255,255,255,.7)} .film-close span{font-size:13px;line-height:1} .film.is-playing .film-start{display:none} @media(max-width:680px){.film-close{top:10px;right:10px;padding:8px 12px;font-size:9px}} /* Vollbleed-Buehnen (Hero, Atmos-Band) sollen fuellen statt einpassen */ .film--cover .film-video{object-fit:cover} /* Stumme Scroll-Vorschau (26.08.2026). Liegt ueber dem Standbild, aber unter Schatten, Play-Knopf und Namenszeile - die bleiben lesbar, waehrend das Bild sich bewegt. */ .film-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none} .film.is-playing .film-preview{display:none} /* 28.08.2026 (Simone: "kein schwarzer Rand, macht die Seite unnoetig lang" - SPX S.4, TIGA S.17): [data-film] sitzt bei den Atmos-Recap-Sektionen (.atmos.film, ueberall 1:1 aus program-tropical-architecture.html uebernommen) auf der 190vh hohen Scroll-Scrub-Huelle .atmos, nicht auf der exakt bildschirmgrossen, sticky .atmos-stage/-media darin. .film-video (position:absolute;inset:0) erbt darum die vollen 190vh der Huelle statt der 100vh der Buehne; object-fit:contain zeigt den ungenutzten Rest als schwarze Flaeche unter dem Video und verlaengert die Seite. Ohne Markup-Aenderung behoben: das Video verhaelt sich beim Abspielen wie .atmos-stage selbst - sticky auf Bildschirmhoehe, Bild fuellend statt einpassend. */ .atmos.film>.film-video{position:sticky;top:0;height:100vh;height:100dvh;object-fit:cover} /* .film-close NICHT auch auf sticky: video/closeBtn werden von v3.js als Geschwister ans Ende von .atmos angehaengt (initFilm/start(), nach .atmos-stage), .film-close ist damit das dritte Flow-Kind. position:sticky nimmt trotzdem am Flow teil - der Knopf landet dadurch unten-links statt oben rechts ueber dem Video (verifiziert: is-playing zeigt ihn erst nach dem 100vh hohen .film-video-Block, inline-flex faellt in dessen naechste Zeile). Das urspruengliche position:absolute waere hier auch falsch, sobald man mittendrin im 190vh-Scrub startet: absolute haengt am eigenen Border-Box-Ursprung von .atmos, der beim Scrollen durch die 90vh Scrub-Distanz laengst aus dem Viewport gewandert ist, waehrend das Video dank sticky weiter oben pinnt - der Knopf waere unsichtbar. position:fixed (an keine .atmos/-media-Transform gebunden, siehe .atmos-media{transform} weiter oben: .film-close haengt NICHT darunter) bleibt dagegen immer oben rechts am Viewport, nur waehrend .is-playing aktiv ist (Klasse sitzt auf root=.atmos, siehe v3.js initFilm ~921/939). */ .atmos.film.is-playing>.film-close{position:fixed} @media(prefers-reduced-motion:reduce){ .atmos.film>.film-video{position:relative;top:auto;height:auto;aspect-ratio:21/9} .atmos.film.is-playing>.film-close{position:absolute} } /* ================================================================ SIB LOADER-SYSTEM (ab 08.08.2026) · Ladezustaende mit Bildmarke. Portiert aus src/styles/loaders.css. Bindet ausschliesslich an die bereits oben definierten Tokens (--cream, --ink-section, --stone, --hib, --teal). Kein zweites Farbsystem, keine Marken-Hexwerte. Theme-Hinweis: Zeile 366 remappt --hib unter html.theme-teal auf #3F6D68. Weil dieser Port an --hib bindet statt an ein festes Hibiscus, drehen Sunrise-Horizont, Orbit-Bogen, Wordmark-Mittelpunkte, Underline, Balken und Splash-Haarlinie unter diesem Theme mit ins Teal. Das ist Absicht: die Loader folgen dem aktiven Markenakzent. Achtung: --ease (oben, cubic-bezier(.16,1,.3,1)) ist NICHT das Loader-Easing. Der Loader bringt sein eigenes --sib-loader-ease mit. Die beiden bleiben getrennt. Bildmarken: _assets/bildmarke-sib-{ink,cream,shimmer}.svg Die Bewegung passiert UM die Bildmarke herum (Reveal, Ring, Sweep). Die Marke selbst wird nie verzerrt oder ausserhalb der Markentoene eingefaerbt. ================================================================ */ :root{ --sib-speed:1; /* 0.6 = langsamer, 1.6 = schneller */ --sib-loader-ease:cubic-bezier(.22,.9,.24,1); } .sib-mark{display:block;height:auto} /* Text-Aequivalent fuer role="status"-Container. Wird vorgelesen, nie gemalt. Die Marken-Grafik selbst ist aria-hidden, damit der Markenname nicht bei jedem Ladezustand vorgelesen wird. */ .sib-loader-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} /* --- 1a/1g Sunrise: die Marke steigt hinter einem Hibiscus-Horizont auf --- */ .sib-sunrise{display:inline-flex;flex-direction:column;align-items:center;gap:.18em;font-size:96px} .sib-sunrise__window{width:1em;height:1.02em;overflow:hidden;display:flex;align-items:flex-end} .sib-sunrise__window .sib-mark{width:1em;animation:sib-rise calc(2.8s / var(--sib-speed)) var(--sib-loader-ease) infinite} .sib-sunrise__horizon{width:1em;height:2px;border-radius:100px;background:var(--hib); animation:sib-horizon calc(2.8s / var(--sib-speed)) ease-in-out infinite} @keyframes sib-rise{0%{transform:translateY(64%) scale(.97);opacity:0}20%{opacity:1} 50%{transform:translateY(0) scale(1)}76%{transform:translateY(0) scale(1);opacity:1} 100%{transform:translateY(-16%) scale(1.03);opacity:0}} @keyframes sib-horizon{0%,100%{transform:scaleX(.28);opacity:.35}50%{transform:scaleX(1);opacity:1}} /* --- 1b Orbit: Teal-Spur, Hibiscus-Bogen, atmende Marke ------------------- */ .sib-orbit{position:relative;display:grid;place-items:center;width:116px;height:116px} .sib-orbit__ring{position:absolute;inset:0;animation:sib-spin calc(1.5s / var(--sib-speed)) linear infinite} .sib-orbit__track{fill:none;stroke:var(--teal);stroke-opacity:.2;stroke-width:3} .sib-orbit__arc{fill:none;stroke:var(--hib);stroke-width:3;stroke-linecap:round;stroke-dasharray:74 253; animation:sib-dash calc(2.6s / var(--sib-speed)) ease-in-out infinite} .sib-orbit .sib-mark{width:54px;animation:sib-breathe calc(2.6s / var(--sib-speed)) ease-in-out infinite} @keyframes sib-spin{to{transform:rotate(360deg)}} @keyframes sib-dash{0%{stroke-dashoffset:0}50%{stroke-dashoffset:-120}100%{stroke-dashoffset:-327}} @keyframes sib-breathe{0%,100%{transform:scale(.93);opacity:.86}50%{transform:scale(1);opacity:1}} /* --- 1c Wordmark mit Mittelpunkten --------------------------------------- */ .sib-wordmark{display:inline-flex;align-items:baseline;white-space:nowrap; font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:900;font-size:30px;line-height:1; letter-spacing:.2em;text-transform:uppercase;color:var(--ink-section)} .sib-wordmark b{font-weight:900;color:var(--hib);padding:0 2px;position:relative;top:-.06em} .sib-wordmark--loading b{animation:sib-dot calc(1.3s / var(--sib-speed)) ease-in-out infinite} .sib-wordmark--loading b:nth-of-type(2){animation-delay:.22s} @keyframes sib-dot{0%,100%{opacity:.16;transform:translateY(0)}45%{opacity:1;transform:translateY(-.1em)}} .sib-underline{width:158px;height:2px;border-radius:100px;background:rgba(26,26,26,.1);overflow:hidden} .sib-underline i{display:block;height:100%;width:100%;background:var(--hib); animation:sib-underline calc(1.9s / var(--sib-speed)) cubic-bezier(.5,0,.5,1) infinite} @keyframes sib-underline{0%{transform:translateX(-100%) scaleX(.35)}50%{transform:translateX(0) scaleX(1)} 100%{transform:translateX(100%) scaleX(.35)}} /* --- 1d Shimmer: der Sweep steckt im SVG-Asset (SMIL), nur Ink-Grund ------ */ .sib-shimmer{width:86px} /* --- 1e Unbestimmter Balken (zusammen mit dem vollen Lockup) -------------- */ .sib-bar{width:250px;height:3px;border-radius:100px;background:rgba(255,255,255,.14);overflow:hidden} .sib-bar--on-cream{background:rgba(26,26,26,.1)} .sib-bar i{display:block;width:40%;height:100%;border-radius:100px;background:var(--hib); transform-origin:left center;animation:sib-bar calc(1.7s / var(--sib-speed)) cubic-bezier(.55,.05,.45,.95) infinite} @keyframes sib-bar{0%{transform:translateX(-105%) scaleX(.55)}55%{transform:translateX(70%) scaleX(1)} 100%{transform:translateX(255%) scaleX(.55)}} /* --- 1f Inline: Mittelpunkt-Trio + Mikro-Spinner ------------------------- */ .sib-dots{display:inline-flex;align-items:center;gap:5px} /* display:inline-flex schlaegt sonst das UA-[hidden], die Punkte blieben sichtbar */ .sib-dots[hidden]{display:none} .sib-dots i{width:5px;height:5px;border-radius:100px;background:currentColor; animation:sib-bounce calc(1.1s / var(--sib-speed)) ease-in-out infinite} .sib-dots i:nth-child(2){animation-delay:.14s} .sib-dots i:nth-child(3){animation-delay:.28s} @keyframes sib-bounce{0%,72%,100%{transform:translateY(0);opacity:.4}36%{transform:translateY(-5px);opacity:1}} .sib-spinner{width:20px;height:20px;animation:sib-spin calc(1.1s / var(--sib-speed)) linear infinite} .sib-spinner circle{fill:none;stroke-width:2} .sib-spinner .t{stroke:rgba(26,26,26,.14)} .sib-spinner .a{stroke:var(--hib);stroke-linecap:round;stroke-dasharray:17 37} /* --- Vollflaechiger Splash ------------------------------------------------ */ .sib-splash{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:var(--cream)} .sib-splash--ink{background:var(--ink-section)} .sib-splash__hairline{position:absolute;top:0;left:0;right:0;height:2px;background:rgba(26,26,26,.07);overflow:hidden} .sib-splash--ink .sib-splash__hairline{background:rgba(255,255,255,.1)} .sib-splash__hairline i{display:block;width:30%;height:100%;background:var(--hib);transform-origin:left center; animation:sib-hair calc(1.9s / var(--sib-speed)) cubic-bezier(.55,.05,.45,.95) infinite} @keyframes sib-hair{0%{transform:translateX(-100%) scaleX(.3)}100%{transform:translateX(340%) scaleX(.55)}} .sib-splash__label{font-family:'DM Sans',sans-serif;font-weight:500;font-size:12px;letter-spacing:.22em; text-transform:uppercase;color:color-mix(in srgb, var(--stone) 75%, transparent)} .sib-splash--ink .sib-splash__label{color:rgba(255,255,255,.5)} /* Abgeraeumter Zustand. visibility:hidden nimmt das Overlay aus dem Accessibility-Tree und aus dem Hit-Testing, pointer-events:none deckt das .4s-Fenster ab, in dem visibility noch `visible` ist. Das Skript im Body setzt beim Abraeumen zusaetzlich das inert-Attribut, damit auch der Fokus nicht mehr hineinfallen kann. */ .sib-splash.is-done{opacity:0;visibility:hidden;pointer-events:none; transition:opacity .4s cubic-bezier(.22,.61,.36,1),visibility .4s} /* Einmal pro Besuch. Auf einer Multi-Page-Site feuert ein First-Paint-Splash sonst bei JEDEM Klick, und die Seite fuehlt sich an, als starte sie neu. Das blockierende Head-Skript setzt die Marke am , bevor gemalt wird, diese Regel haelt das Overlay bei Folgenavigationen komplett aus dem Rendering. display:none statt opacity, damit gar nichts aufblitzt. */ html.sib-splash-seen .sib-splash{display:none} /* --- Barrierefreiheit: gesetztes Bild halten, keine Bewegung -------------- */ @media (prefers-reduced-motion:reduce){ .sib-sunrise__window .sib-mark,.sib-sunrise__horizon,.sib-orbit__ring,.sib-orbit__arc,.sib-orbit .sib-mark, .sib-wordmark--loading b,.sib-underline i,.sib-bar i,.sib-dots i,.sib-spinner,.sib-splash__hairline i{ animation:none!important;transform:none!important;opacity:1!important} .sib-underline i,.sib-bar i{width:35%} } /* ============================================================ SEITENWECHSEL · weicher Cross-Fade statt Neustart Gegenstueck zum Splash-Gate: der Markenmoment einmal beim Ankommen, danach gleiten die Seiten ineinander. Reine Progressive Enhancement, Chromium 126+ und Safari 18.2+ blenden ueber, Firefox und alle anderen navigieren ganz normal. Kein Polyfill, keine Library, kein Fallback noetig. Bewusst nur der Default-Cross-Fade der ganzen Seite. Ein benanntes view-transition-name auf Nav oder Logo waere eine Design-Entscheidung, die noch aussteht. ============================================================ */ @view-transition{navigation:auto} ::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:var(--ease)} /* Wer weniger Bewegung will, bekommt den harten Schnitt: navigation:none schaltet den Uebergang komplett ab, statt ihn nur zu verkuerzen. */ @media (prefers-reduced-motion:reduce){ @view-transition{navigation:none} /* Gürtel und Hosenträger: falls ein Browser den Uebergang zwar kann, das verschachtelte @view-transition aber nicht auswertet, faellt hier die Animation trotzdem weg. */ ::view-transition-old(root),::view-transition-new(root){animation:none!important} } /* =================================================================== GETEILTE BAUSTEINE, hierher geholt am 11.08.2026. .band und .cn-how/.hiw lagen im lokalen