::selection{background:#E85C0A;color:#0E0D0C}
a:focus-visible{outline:2px solid #E85C0A;outline-offset:3px}
html,body{overflow-x:clip}
body{background-color:#0E0D0C}
.hero{z-index:0}
.marquee,.erwartet,.programm,.speaker,.tickets,.marke,.faq,.location,.kontakt,.site-footer{position:relative;z-index:2}
/* .erwartet-row hier bewusst NICHT dabei: die opacity-Transition hat
   das GSAP-Fade dem Slide um .3s hinterhergezogen („2-Ding-Look") —
   GSAP besitzt auf den Reihen jetzt exklusiv transform UND opacity */
.btn,.nav-cta,.ticket-btn,.marke-btn,.footer-link,.nav-link,.kontakt-mail{transition:background-color .3s,color .3s,border-color .3s,opacity .3s}
.speaker-card{transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.speaker-card:hover{transform:translateY(-10px)}
.speaker-img{filter:saturate(.85);transition:filter .5s}
.speaker-card:hover .speaker-img{filter:saturate(1.2)}
/* Referenz-Karten sind Links auf die Live-Sites */
.speaker-grid a{text-decoration:none;color:inherit;display:block}
.speaker-grid a:hover .speaker-img{filter:saturate(1.15)}
/* „Ausgewählte Arbeiten" im Editorial-Ton des Rests der Seite:
   Projekt-Nummer als oranger Kicker (wie alle Kicker), Name in
   Archivo-900 Uppercase (wie die Sektions-Titel), Rolle gedämpft */
.speaker-num{font-family:'Hanken Grotesk',sans-serif!important;font-size:11px!important;font-weight:700!important;letter-spacing:.22em!important;text-transform:uppercase;color:#E85C0A!important;margin:18px 0 6px!important}
.speaker-name{font-family:Archivo,sans-serif!important;font-weight:900!important;text-transform:uppercase;letter-spacing:-.01em!important;font-size:clamp(22px,1.9vw,28px)!important;margin:0 0 8px!important;transition:color .3s ease}
.speaker-role{opacity:.72;font-size:14.5px!important;line-height:1.55!important}
.speaker-grid a:hover .speaker-name{color:#E85C0A}
/* „Ausgewählte Arbeiten" am Handy: gestapelt untereinander statt Swipe-Reihe
   — man scrollt einfach nach unten, kein Zwang zum Seitwärts-Wischen.
   (Desktop bleibt unverändert das 3-Spalten-Grid.) */
@media(max-width:767px){
  .speaker-grid{display:grid;grid-template-columns:1fr;gap:28px}
  .speaker-grid>a,.speaker-grid>div{width:100%}
  .speaker-img{height:min(50vh,360px)}
}
/* KEINE CSS-Transition auf transform: die schmierte jeden Frame der
   GSAP-Entrance-Tweens über 0.4s nach (Gummiband-Lag beim schnellen
   Scrollen). Ticket-Karten reagieren GAR NICHT mehr auf Hover. */
/* ORIGINAL-Design (Webflow-Größen: Preis 56px, Padding 40/36, normale
   gleiche Karten) — nur 2 Pakete (Website + Signature), Grid mittig.
   Einzige technische Fixes: Preis bricht nie um; Handy = Swipe-Reihe. */
.tickets-grid{grid-template-columns:1fr 1fr;max-width:900px;margin:0 auto}
.ticket-price,.ticket-price-vip{white-space:nowrap}
@media(max-width:767px){
  .tickets-grid{display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:4px 20px 10px;scroll-padding-left:20px;overscroll-behavior-x:contain;overflow-y:hidden}
  .tickets-grid::-webkit-scrollbar{display:none}
  .ticket-card,.ticket-card-vip{flex:0 0 82vw;scroll-snap-align:start}
  .ticket-price,.ticket-price-vip{font-size:clamp(38px,11vw,56px)}
}
.tickets-note{max-width:1240px;margin:26px auto 0;font-family:'Hanken Grotesk',sans-serif;font-size:14.5px;line-height:1.65;color:rgba(14,13,12,.72)}
.tickets-note a{color:#E85C0A;font-weight:700}
/* Reihen = klickbare Boxen (jede Leistung bekommt ihre Erklär-Seite):
   KEINE Bewegung bei Hover, nur leiser Tint in der Orange-Familie */
a.erwartet-row{text-decoration:none;color:inherit;display:grid}
.erwartet-row{transition:background-color .3s}
.erwartet-row:hover{background-color:#F26E1E}
/* Runder Cursor-Button (NUR Desktop): hängt weich an der Maus, sichtbar
   nur ÜBER den orangen Reihen — Farbe = Sektions-BG (#e5e1d7), dadurch
   klarer Kontrast auf Orange. Rein transform-basiert (performant). */
@media (pointer: fine){
.erw-cur{position:fixed;left:0;top:0;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:#e5e1d7;color:#0E0D0C;display:flex;align-items:center;justify-content:center;font-family:Archivo,sans-serif;font-weight:900;font-size:32px;line-height:1;z-index:90;pointer-events:none;transform:translate3d(-200px,-200px,0) scale(0);will-change:transform}
}
.marquee-track{animation:impuls-slide 26s linear infinite}
@keyframes impuls-slide{to{transform:translateX(-50%)}}
/* Band: kompakte Größe (~18px), Gewicht 900, mittige Luft */
.marquee{padding:clamp(16px,1.8vw,24px) 0}
.marquee-item{font-size:clamp(16px,1.35vw,20px);font-weight:700;letter-spacing:.03em;line-height:1}
.marquee-dot{font-size:clamp(8px,.8vw,11px)}
.marquee-group{column-gap:clamp(34px,3vw,48px);padding-right:clamp(34px,3vw,48px)}


/* ═══════════════════════════════════════════ */


.manifest,.stats,.stimmen{position:relative;z-index:2}
/* Editorial-Zitatzeichen im Manifest: große Archivo-900-Glyphe oben
   rechts, im Ton knapp über dem Sektions-Schwarz (#0e0d0c) — sitzt als
   ::after HINTER dem Text (z-index:-1 innerhalb des Stacking-Contexts),
   reine Deko ohne Markup, pointer-events:none. */
.manifest{overflow:hidden}
.manifest::after{content:'“';position:absolute;right:clamp(16px,7vw,110px);top:clamp(40px,6vw,96px);font-family:Archivo,sans-serif;font-weight:900;font-size:clamp(150px,19vw,300px);line-height:.62;color:rgba(239,237,228,.075);pointer-events:none;z-index:-1}



.programm{overflow:hidden}


/* ═══════════════════════════════════════════ */


/* ── Proximity-Cursor: weiße „Click"-Blase. mix-blend-difference =
   passt sich jedem Untergrund automatisch an (auf Orange kippt sie
   kalt, auf Schwarz bleibt sie weiß). Erscheint schon in der NÄHE
   von Klickbarem — nicht erst beim Hover. ── */
/* Während des Fenster-Ziehens (JS setzt .is-resizing): Transitions aus —
   der Umbruch Mobile↔Desktop springt sauber statt zu schmieren */
.is-resizing *,.is-resizing *::before,.is-resizing *::after{transition:none !important}
.fx-grain{position:fixed;top:0;left:0;width:100%;height:100%;z-index:110;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.65'/%3E%3C/svg%3E")}
@media (max-width: 767px){.fx-grain{opacity:.05}}
/* FIRST-PAINT-POSTER: der erste Ferrofluid-Frame als winziges Bild (~12–32 KB,
   preloaded mit hoher Priorität) erscheint SOFORT, während das 4,9-MB-Video
   im Hintergrund lädt. Das <video> (object-fit:cover) blendet dann darüber
   ein — gleicher Inhalt → nahtloser Übergang, kein Schwarz-Loch, kein
   Fremdbild mehr (früher zeigte Webflow hier ein Desk/Monitor-Foto). */
.hero-media{will-change:transform;background:#050404 !important;}


/* ═══════════════════════════════════════════ */


/* ===== ULTRA-POLITUR — Design-Sprung (lokal) ===== */
/* Einheitliche Bild-Artdirection: alle Fotos wirken wie EIN kuratiertes Set */
/* KEIN filter auf animierten Bildern — Filter+Bewegung zwingt GPU zum Neu-Rendern jeder Frame (Haupt-Ruckler-Ursache). */
.programm-img,.speaker-img,.location-img,.location-strip-img,.marke-img,.kontakt-img,.hero-media{filter:none !important;}
/* Editoriale Typo-Feinheiten: engeres Tracking, mehr Ruhe */
.hero-title{letter-spacing:-.032em;}
.section-title,.programm-title,.speaker-title,.tickets-title,.marke-title,.faq-title,.location-title,.kontakt-title{letter-spacing:-.025em;}
.hero-sub,.marke-text,.faq-a{line-height:1.62;}
/* Stimmen-Sektion atmet mehr, klare Buehne fuer die Serifen-Leine */
.stimmen{padding-top:22px;padding-bottom:22px;background:#EFEDE4;}
.stimmen-head{margin-bottom:18px;}
@media(max-width:767px){.stimmen{padding-top:16px !important;padding-bottom:16px !important;}.stimmen-head{margin-bottom:6px !important;padding-left:20px !important;padding-right:20px !important;}.stimmen-title{font-size:28px !important;}}
/* „Was Kunden sagen": vom lauten Archivo-Titel zum feinen Eyebrow-Label —
   die Biegeschrift ist der Star der Sektion, die Überschrift nur ihr
   Vorspann. Zentriert (passend zur symmetrischen Kurve), Orange, mit
   feinen Linien links/rechts wie bei den Kickern der anderen Sektionen. */
.stimmen-title{font-family:'Hanken Grotesk',sans-serif !important;font-size:13px !important;font-weight:700 !important;letter-spacing:.22em !important;line-height:1 !important;color:#E85C0A !important;display:flex !important;align-items:center !important;justify-content:center !important;gap:14px !important;}
.stimmen-title::before,.stimmen-title::after{content:"";width:34px;height:1px;background:rgba(232,92,10,.55);flex-shrink:0;}
.stimmen-head{margin-bottom:14px !important;}
@media(max-width:767px){.stimmen-title{font-size:11px !important;letter-spacing:.2em !important;gap:10px !important;}.stimmen-title::before,.stimmen-title::after{width:24px;}}
/* Performance: Off-Screen-Sektionen nicht zeichnen + Reflow isolieren (contain).
   Bewusst OHNE hero/programm/stimmen/marquee/footer (die haben absichtliches Overflow/Pins). */
.manifest,.erwartet,.speaker,.tickets,.marke,.faq,.location,.kontakt,.stats{contain:layout paint;}
/* Fix: transform NICHT per CSS-Transition, wenn GSAP es animiert (sonst bleiben Reihen/Karten schief haengen). */
.ticket-card,.ticket-card-vip,.speaker-card{transition:background-color .3s ease,box-shadow .35s ease !important;}
/* erwartet-row BEWUSST ohne bg-Transition: beim Scrollen unter der Maus
   toggelte der Hover und die .3s-Interpolation malte die riesige Reihe
   ~20 Frames lang neu = der Scroll-Lag. Harter Wechsel = brutal + fluessig. */
.erwartet-row{transition:none !important;}
.erwartet-row:hover,.ticket-card:hover,.ticket-card-vip:hover,.speaker-card:hover{transform:none !important;}
/* Webflow-Gratis-Badge unten rechts entfernen */
.w-webflow-badge{display:none !important;}
/* Cinema: radiale Vignette — Mitte klar, Raender fallen ins Schwarz (mehr Schwarz aussenrum) */

/* (Hero nutzt das echte Ferrofluid-Video als Hintergrund) */
/* Marken-Logo "Akzent.digital" in Originalschreibweise (nicht Uppercase) */
.nav-logo,.footer-logo{text-transform:none !important;}
/* Multipage-Nav: aktive Seite in Orange */
.nav-link.is-active{opacity:1;color:#E85C0A;}
/* Nav-Links exakt in der Bildschirmmitte (unabhängig von Logo/CTA-Breite) */
.nav-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
/* ── Hero im Pitch-Look: CTAs mit Pfeil, mobil gestapelt in voller
   Breite (Pfeil rechtsbündig), darunter die Trust-Zeile. ── */
.hero .btn{display:inline-flex;align-items:center;gap:14px;}
.btn-arr{font-family:'Hanken Grotesk',sans-serif;font-weight:700;line-height:1;}
.hero-trust{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:26px 0 0;font-family:'Hanken Grotesk',sans-serif;font-size:14px;font-weight:500;color:rgba(239,237,228,.72);}
.ht-dot{color:#E85C0A;font-size:10px;}
@media(max-width:767px){
  .hero-eyebrow{font-size:11px !important;letter-spacing:.15em !important;white-space:nowrap;}
  /* Mobil = typografisches POSTER (5 Zeilen): Fit-Zeile BESUCHERN=6.747em
     → 14.6vw−4px · 320er: 288px ✓ · 390er: 357px ✓ · 430er: 397px ✓,
     je ~20px rechter Rand. Ohne .ht-poster (Desktop schmal gezogen,
     noch 4 Zeilen mit „KUNDEN MACHEN."=9.87em) bleibt die sichere Größe. */
  .hero-title{font-size:clamp(26px,calc(9.7vw - 6px),50px) !important;line-height:1.02 !important;}
  /* WORT-POSTER: die Zeilengrößen setzt das JS pro Zeile als Inline-px —
     ECHTE Canvas-Vermessung (Archivo 900 + Tracking) auf Titelbreite,
     dann drückt ein Höhen-Budget alle Zeilen gleichmäßig kleiner. Keine
     geschätzten cqw-Werte mehr (die liefen bei manchen Breiten über den
     Rand → abgeschnittene Buchstaben, und wuchsen ungebremst mit). */
  .hero-title.ht-poster{line-height:.96 !important;}
  /* Poster mobil: schmale, symmetrische Ränder (16px) → die h1-Box (=
     Glas-Canvas) wird breiter, fitTitle rechnet die Schrift größer und
     randbündiger. Zusätzlich per margin-top etwas tiefer im Bild. */
  .hero{padding-left:0 !important;padding-right:0 !important;}
  .hero-content{margin:14vh 0 0 16px !important;width:calc(100% - 32px) !important;}

  .hero-actions{flex-direction:column;width:100%;gap:14px;}
  .hero .btn{width:100%;justify-content:space-between;padding:18px 26px;font-size:15px;}
  .hero-trust{justify-content:center;width:100%;font-size:11.5px;gap:5px 8px;margin-top:22px;}
}
/* ══════ iOS-26 „LIQUID GLASS" HEADLINE ══════
   Apples Rezept: durchsichtiger Körper + heller Refraktions-Rand, der
   Licht aus dem Hintergrund „einfängt". Browser können (noch) keinen
   backdrop-filter pro Glyphe — deshalb der treue Nachbau als Stack:
   1. .gt-base   — Frost-Füllung: hauchdünne Weiß-Gradients per
                   background-clip:text (oben heller = Licht tritt ein),
                   dazu ein langsam wandernder Sheen-Streif (der
                   „flüssige" Teil).
   2. .gt-fx::before — der RAND: text-stroke, per Diagonal-Maske oben/
                   links hell und unten/rechts dunkler → wirkt wie eine
                   beleuchtete Glaskante statt einer Outline.
   3. .gt-fx::after  — BLOOM: dieselbe Kante dick + geblurrt = das weiche
                   Leuchten um die Buchstaben.
   4. .gt-glint::before — GLANZPUNKT: ein radialer Licht-Hotspot, der
                   pro Zeile an anderer Stelle sitzt und langsam über
                   die Kante driftet (Video-Licht „wandert" im Glas).
   Alles in @supports gekapselt — ohne background-clip:text bleibt der
   Titel schlicht hell (Fallback). */
.ht-line{position:relative;}
/* Hero = Glas-Statement: VERTIKAL MITTIG im Viewport — symmetrische
   Paddings, sonst zieht Webflows 160/72-Padding den Titel nach unten
   (!important gegen alle Webflow-Media-Queries) */
.hero{align-items:center !important;padding-top:110px !important;padding-bottom:110px !important;}
/* Wellen-Canvas: über dem Video, unter dem dunklen Overlay (das den
   Ripple mit abdunkelt), unter dem Glas-Titel */
/* Effekt-Canvas liegt in .hero-media, opak über dem <video> */
.hero-ripple{position:absolute;inset:0;z-index:1;pointer-events:none;}
.hero-media video{z-index:0;}
.hero-overlay{z-index:2;}
/* Fallback ohne Ripple-Layer (Perf-Tier 2): der leichte Lift der rechten
   Material-Zone, den sonst der Shader rechnet, als statischer Gradient */
.hero-lift{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(255,246,235,0) 46%,rgba(255,246,235,.05) 78%,rgba(255,246,235,.09) 100%);}
/* Stats mit Icons: Symbol über der Zahl, mittig, Orange */
.stat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;}
.stat-ico{width:clamp(30px,3vw,38px);height:clamp(30px,3vw,38px);color:#E85C0A;margin-bottom:8px;}
.stat-ico svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 8px rgba(232,92,10,.35));}
@media(max-width:767px){
  .stat-ico{width:26px;height:26px;margin-bottom:5px;}
  /* 2×2-Grid: die LINKE Spalte (Stat 1 + 3) braucht keinen Trennstrich —
     sonst stehen 4 Striche da, links davon aber nichts */
  .stat:nth-child(odd){border-left:0;padding-left:0;}
  /* „Projekte im Fokus": Bilder randlos über die volle Displaybreite
     statt eingerückter kleiner Kästen, dazu etwas höher */
  .programm-images{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}
  .programm-img{height:260px;}
}
/* Content links verankert, bewusst nah am Rand */
.hero-content{margin:clamp(20px,3vw,48px) 0 0 clamp(12px,2.6vw,46px);width:100%;}
.hero-title{margin-bottom:0 !important;}
/* Nicht markierbar → fühlt sich wie Teil des Hintergrunds an, nicht wie Text.
   LINKSBÜNDIG, deutlich links außen (sitzt in der schwarzen Zone). */
.hero-title{position:relative;text-align:left;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:default;}
/* Das eine WebGL-Canvas mit allen Glas-Zeilen; weicher Schatten =
   das Glas „schwebt" über dem Video wie bei Apples Lockscreen */
/* KEIN CSS-drop-shadow auf dem animierten Canvas (das rechnete den
   Weichzeichner JEDE Frame neu = Hauptlast). Tiefe kommt jetzt aus der
   Shader-Kontur + der Kino-Vignette. */
.gt-glass{position:absolute;inset:0;pointer-events:none;}
/* Fallback ohne WebGL: statisches Frost-Glas per CSS.
   BEWUSST OHNE background-gradient: dem Gradient fehlte background-clip:
   text — Safari malte ihn als VOLLEN GRAUEN KASTEN hinter jede Zeile.
   Stroke + zarte Füllung reichen für den Frost-Look, kastensicher. */
.gt-nogl .gt-base{
  color:rgba(240,238,230,.30)!important;
  -webkit-text-stroke:1.5px rgba(255,255,255,.75);
  background-image:none!important;
}
@supports (-webkit-background-clip:text){
  .hero-eyebrow{display:none;}
  .hero-title{font-size:7.6vw;line-height:.94;letter-spacing:-.028em;margin-bottom:0;}
  .ht-line{white-space:nowrap;}
  /* Basis-Text sichtbar (schlichtes Bone-Weiß) BIS die Glas-Engine ihren
     ersten Frame gezeichnet hat (JS setzt dann .gt-live auf den Titel) —
     danach blendet er über 0.4s auf transparent und gibt das Glas frei.
     Ohne das war der Titel LEER, bis WebGL Fonts+Atlas fertig hatte — das
     sichtbare „späte Aufploppen" bei Strg+R. So steht der Text sofort da. */
  /* Kein flaches Weiß mehr: der Basis-Text imitiert von der ERSTEN Paint an
     den Glas-Look (durchscheinende Füllung + heller Rand), sodass die
     Übergabe an WebGL kaum sichtbar ist statt „weiß → Glas" zu springen.
     WICHTIG: auch direkt auf .hero-title — vor site.js (Body-Ende!) steht
     der ROHE h1 ohne .gt-base-Spans da; ohne diese Regel blitzte er in
     Webflows deckendem #efede4 auf (das „manchmal weiß" bei Strg+R). */
  /* Werte bewusst FAST unsichtbar: 30 % Füllung las sich auf dem dunklen
     Poster als massives Grau („übelst weiß") — das echte Glas refraktiert
     das dunkle Video und lebt fast nur von der hellen Kante. 10 % Füllung
     + feine Kontur entsprechen dem Glas-Endzustand pixelnah. */
  .hero-title{color:rgba(240,238,230,.10);-webkit-text-stroke:1px rgba(255,255,255,.34);}
  .gt-base{color:rgba(240,238,230,.10);-webkit-text-stroke:1px rgba(255,255,255,.34);transition:color .4s ease,-webkit-text-stroke-color .4s ease;}
  .gt-live .gt-base{color:transparent;-webkit-text-stroke-color:transparent;}
}
/* ── Liquid-Glass-Pills nach Apple-Originalrezept (Control Center):
   backdrop blur + saturate + brightness, weißer Tint, Rim aus Inset-
   Shadows (oben hell, unten schwach) + Hairline. Läuft überall inkl.
   iOS Safari; Chromium bekommt per JS zusätzlich ECHTE Refraktion
   (feDisplacementMap-Lens via backdrop-filter:url()). ── */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .btn-ghost{
    border:1px solid rgba(255,255,255,.26);
    background:rgba(255,255,255,.08);
    -webkit-backdrop-filter:blur(12px) saturate(185%) brightness(1.12);
    backdrop-filter:blur(12px) saturate(185%) brightness(1.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(255,255,255,.12),inset 1px 0 0 rgba(255,255,255,.14),inset -1px 0 0 rgba(255,255,255,.14),0 10px 30px rgba(0,0,0,.3);
  }
}
/* Video hinter dem Glas etwas sichtbarer (Mitte weniger abgedunkelt) */
/* Licht-Regie nach Mockup (STATISCH = 0 Laufzeitkosten):
   links tiefes Schwarz, das weich und leicht angewinkelt ausläuft —
   das flüssige Material „fließt" rechts ins Bild. Dazu eine Vignette,
   die auf die rechte Material-Zone fokussiert, + Top/Bottom-Verlauf. */
.hero-overlay{background-image:
  /* NAV-Scrim: oben-links am dichtesten (Logo/Links), läuft weich nach
     rechts und unten aus — die Navigation steht satt auf Schwarz */
  radial-gradient(130% 320px at 0% 0%,rgba(4,3,3,.94) 0%,rgba(4,3,3,.55) 46%,rgba(4,3,3,0) 74%),
  linear-gradient(180deg,rgba(4,3,3,.88) 0%,rgba(4,3,3,.5) 110px,rgba(4,3,3,0) 260px),
  /* links VOLL deckend (0 % Video-Durchsicht bis ~26 %), dann weicher
     Auslauf ins Material */
  linear-gradient(94deg,#050404 0%,#050404 38%,rgba(5,4,4,.97) 48%,rgba(6,5,4,.8) 58%,rgba(8,7,6,.48) 68%,rgba(9,8,7,.16) 79%,transparent 90%),
  radial-gradient(120% 92% at 78% 44%,transparent 32%,rgba(10,9,8,.22) 68%,rgba(6,5,4,.5) 100%),
  linear-gradient(#0a090870,#0a09080f 46%,#0a0908a0);}
/* ── Scroll-Cue: drei Chevrons, die NACHEINANDER aufleuchten und einen
   Tick nach unten wandern (kaskadierende Welle, 1.8s-Takt). Ruhig und
   präzise statt rotierendem Ring; klickbar → Manifest. ── */
.scroll-cue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;padding:14px 20px;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:opacity .45s ease;}
.sc-ch{width:20px;height:20px;border-right:3px solid #EFEDE4;border-bottom:3px solid #EFEDE4;transform:rotate(45deg);opacity:.16;border-radius:1px;}
.sc-ch+.sc-ch{margin-top:-9px;}
@media (prefers-reduced-motion:no-preference){
  .sc-ch{animation:scCue 2.4s cubic-bezier(.45,0,.55,1) infinite;}
  .sc-ch:nth-child(2){animation-delay:.2s;}
  .sc-ch:nth-child(3){animation-delay:.4s;}
}
@keyframes scCue{0%,55%,100%{opacity:.14;transform:rotate(45deg) translate(0,0)}22%{opacity:1;transform:rotate(45deg) translate(2.5px,2.5px)}}
/* ausblenden, sobald man scrollt (per JS-Klasse auf <html>) */
.hero-scrolled .scroll-cue{opacity:0;pointer-events:none;}
/* Cue unsichtbar → Chevron-Keyframes anhalten (liefen sonst ewig weiter) */
.hero-scrolled .sc-ch{animation-play-state:paused;}
/* iPhone/Safari: 100vh ragt hinter die Browser-Leiste — der Hero nimmt
   mobil die SICHTBARE Höhe (svh), und der Scroll-Cue hält per safe-area
   Abstand zum Home-Indikator, statt unter der Leiste zu verschwinden */
/* Desktop: Naht-Deckel aus (Grundregel VOR dem Media-Query, sonst
   überschreibt sie die mobile display:block-Regel — genau der Bug,
   warum der Deckel v29 auf dem Handy nie ankam) */
.seam-cover{display:none}
@media(max-width:767px){
  /* Hero = DYNAMISCHE Viewport-Höhe (dvh): passt sich live an, egal ob
     Safaris Leiste ein-/ausgefahren oder (iOS 26) als schwebende Liquid-
     Glass-Bar über dem Inhalt liegt. Der orangene Marquee-Balken sitzt am
     Hero-Ende = immer exakt an/unter der sichtbaren Unterkante, blitzt
     also nie durch. STATISCHE Units (svh/lvh) stimmen bei iOS 26 nicht
     mehr mit dem real Sichtbaren überein → genau das war der Fehler. */
  /* +72px PUFFER unter der sichtbaren Kante: die orange Marquee-Kante
     rutscht damit UNTER die transparente iOS-26-Leiste — ganz ohne
     Deck-Overlay. Man scrollt erst ein paar Pixel dunklen Hero, dann
     kommt das Band. */
  .hero{height:calc(100vh + 110px) !important;min-height:calc(100vh + 110px) !important;}
  @supports(height:100dvh){.hero{height:calc(100dvh + 110px) !important;min-height:calc(100dvh + 110px) !important;}}
  /* Scroll-Cue hält per safe-area Abstand zur (schwebenden) Leiste bzw.
     zum Home-Indikator, statt darunter zu verschwinden. */
  /* Hero endet 72px UNTER der sichtbaren Kante — der Cue rechnet den
     Puffer raus und sitzt damit wieder knapp über dem Home-Indikator */
  .scroll-cue{bottom:calc(116px + env(safe-area-inset-bottom,0px));}
  .sc-ch{width:15px;height:15px;border-width:2.5px;}
  .sc-ch+.sc-ch{margin-top:-7px;}
  /* SICHERHEITS-NAHT: fixe dunkle Leiste am unteren Bildrand — deckt die
     letzten Pixel, wo sonst die orange Marquee-Kante / Kuppel durch iOS-26-
     Viewport-Rundung durchblitzt. Nur im Ruhezustand sichtbar (schwarz auf
     schwarzem Hero = unsichtbar); sobald gescrollt wird, blendet sie weg,
     damit sie die Marquee NIE verdeckt. z-index unter dem Scroll-Cue. */
  /* Overscroll/Leisten-Zonen zeigen Seitengrund statt Weiß */
  html{background:#050404}
}
/* Kuppel-Übergänge als IN-FLOW-SVG-Divider (WebKit-sicher: kein absolute,
   kein z-index-Spiel, kein overflow, keine Radius-Tricks). Der Divider
   überlappt per negativem Margin die letzten Pixel der Sektion darüber;
   das SVG ist EINE durchgehende Bézier-Kuppel in Bandfarbe und wächst
   per scaleY (reiner Compositor) aus der geraden Kante: unten = flach,
   beim Hochziehen = rund. Band + Text bleiben unberührt. */
.sec-dome{display:block;height:clamp(9px,1.8vw,18px);margin-top:calc(-1*clamp(9px,1.8vw,18px));pointer-events:none;position:relative}
/* Marquee-Kuppel: dezente Wölbung (16–36px-Stufe) */
.sec-dome[data-dome="mq"]{height:clamp(14px,3vw,32px);margin-top:calc(-1*clamp(14px,3vw,32px));}
.sec-dome svg{display:block;width:100%;height:100%;transform:scaleY(var(--dome,0));transform-origin:50% 100%;will-change:transform}
/* Leistungs-Icons: grosses editorial Line-Icon OHNE Nummer. Desktop = Icon|Titel|Text (3 Spalten), Handy = Icon+Titel in einer Zeile, Text darunter */
.erwartet-num{display:flex;align-items:center;}
.erwartet-ico{display:block;line-height:0;flex-shrink:0;}
.erwartet-ico svg{width:60px;height:60px;stroke:#0E0D0C;fill:none;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;}
@media(min-width:768px) and (max-width:991px){.erwartet-row{grid-template-columns:72px 1fr !important;}.erwartet-ico svg{width:52px;height:52px;}}
@media(max-width:767px){
  .erwartet-row{grid-template-columns:auto 1fr !important;grid-template-areas:"ico name" "desc desc" !important;column-gap:16px;row-gap:12px;align-items:center;}
  .erwartet-num{grid-area:ico;}
  .erwartet-name{grid-area:name;}
  .erwartet-desc{grid-area:desc;}
  .erwartet-ico svg{width:50px;height:50px;}
}
/* ===== Neuer professioneller Footer (dunkel, im Seiten-Look) ===== */
.site-footer{background:#0E0D0C !important;border-top:none !important;padding:0 !important;overflow:hidden;}
.footer-wrap{max-width:1240px;margin:0 auto;padding:96px 40px 40px;}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr;gap:60px;padding-bottom:60px;border-bottom:1px solid rgba(239,237,228,.14);}
.footer-eyebrow{font-family:'Hanken Grotesk',sans-serif;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#E85C0A;margin:0 0 18px;}
.footer-cta-title{font-family:Archivo,sans-serif;font-weight:900;font-size:clamp(2.4rem,5vw,4.4rem);line-height:.96;letter-spacing:-.03em;text-transform:uppercase;color:#EFEDE4;margin:0 0 32px;}
.footer-cta-btn{display:inline-block;background:#E85C0A;color:#0E0D0C;font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:16px;letter-spacing:.02em;padding:18px 38px;border-radius:999px;text-decoration:none;transition:background .3s ease,transform .3s ease;}
.footer-cta-btn:hover{background:#EFEDE4;transform:translateY(-3px);}
.footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-content:start;}
.footer-col-h{font-family:'Hanken Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9B9285;margin:0 0 18px;}
.footer-col a,.footer-col span{display:block;font-family:'Hanken Grotesk',sans-serif;font-size:15px;line-height:1.5;color:rgba(239,237,228,.8);text-decoration:none;margin-bottom:12px;transition:color .25s ease;}
.footer-col a:hover{color:#E85C0A;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:30px;flex-wrap:wrap;gap:18px;}
.footer-logo{font-family:'Playfair Display',serif;font-weight:600;font-size:28px;letter-spacing:.08em;text-transform:uppercase;color:#EFEDE4;}
.footer-logo .dot{color:#E85C0A;}
.footer-copy2{font-family:'Hanken Grotesk',sans-serif;font-size:13px;color:#6E675C;margin:0;}
.footer-legal a{font-family:'Hanken Grotesk',sans-serif;font-size:13px;color:#9B9285;text-decoration:none;margin-left:22px;transition:color .25s ease;}
.footer-legal a:hover{color:#E85C0A;}
@media(max-width:767px){.footer-top{grid-template-columns:1fr;gap:44px;}.footer-wrap{padding:64px 20px 32px;}.footer-bottom{flex-direction:column;align-items:flex-start;}.footer-legal a{margin-left:0;margin-right:22px;}}


/* Kontakt-E-Mail als große Display-Zeile — der eigentliche CTA der
   Sektion: Playfair-Kursive bleibt, deutlich größer, satterer
   Unterstrich, Hover hellt auf Elfenbein */
.kontakt-mail{font-size:clamp(30px,3.2vw,46px)!important;padding-bottom:8px!important;border-bottom-width:2px!important;letter-spacing:-.01em}
.kontakt-mail:hover{color:#EFEDE4;border-color:#EFEDE4}
@media(max-width:767px){.kontakt-mail{font-size:clamp(24px,7vw,32px)!important}}


/* Stats-Band: kein Trennstrich vor der ERSTEN Zahl — ganz links stand
   sonst ein Strich ins Leere */
.stat:first-child{border-left:0;padding-left:0}
/* ═══ BRUTAL-LAYER (Awwwards-Schliff, nur Startseite — site.css lädt
   sonst niemand): harte Kanten statt Rundungen, Buttons eckig,
   Ticket-Karten als Spec-Sheets mit 2px-Rahmen. Die Identität der
   Seite (Ferro-Glas-Hero, Kuppeln, Journey) bleibt unangetastet. ═══ */
.programm-img,.speaker-img,.location-img,.location-strip-img,.marke-img,.kontakt-img,.ticket-card,.ticket-card-vip{border-radius:0 !important}
.btn,.nav-cta,.ticket-btn,.marke-btn,.footer-cta-btn{border-radius:0 !important}
.ticket-card{border:2px solid #0E0D0C}
.ticket-card-vip{border:2px solid #E85C0A}