/* ============================================================
   TRANSFORMATIONSGIPFEL 2026 · made for me®
   Design-System auf Basis des Marken-Styleguides
   ============================================================ */

/* ---------- Schriften ---------- */
@font-face{font-family:'Utile';src:url(../fonts/utile-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Utile';src:url(../fonts/utile-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Utile';src:url(../fonts/utile-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Mulish';src:url(../fonts/mulish-variable.woff2) format('woff2');font-weight:200 900;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --cream:#FAF3E9;
  --cream-2:#F4E7D6;
  --paper:#FFFCF7;
  --cocoa:#2B0E04;
  --cocoa-2:#3E1708;
  --cocoa-3:#4E1F0C;
  --ink:#170F09;
  --ink-70:#5C4A3D;
  --ink-45:#8B7A6C;
  --flame:#EE4B1E;
  --flame-2:#F58634;
  --flame-3:#FBB05A;
  --ember:#C42A0B;
  --line:rgba(43,14,4,.13);
  --line-2:rgba(43,14,4,.07);
  --line-d:rgba(251,176,90,.22);

  --display:'Utile','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'Mulish','Helvetica Neue',Helvetica,Arial,sans-serif;

  --w:1240px;
  --pad:clamp(20px,4vw,48px);
  --r:4px;
  --r-lg:10px;

  --welle-w:url("../img/welle-weiss.webp");
  --welle-o:url("../img/welle-orange.webp");
  --bg3:url("../img/verlauf-hoch.webp");
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit}
:focus-visible{outline:2px solid var(--flame);outline-offset:3px;border-radius:2px}
::selection{background:var(--flame);color:#fff}

section[id],header[id]{scroll-margin-top:88px}
.wrap{width:100%;max-width:var(--w);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.wrap-wide{max-width:1480px}

/* ---------- Typo-Bausteine ---------- */
h1,h2,h3,h4{font-family:var(--display);margin:0;font-weight:400;letter-spacing:-.015em}
.eyebrow{
  font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--flame);display:inline-flex;align-items:center;gap:11px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--flame);flex:0 0 auto}
.eyebrow.no-line::before{display:none}
.h2{font-size:clamp(32px,4.6vw,60px);line-height:1.06;font-weight:500}
.h2 b,.h2 strong{font-weight:700}
.h3{font-size:clamp(22px,2.4vw,30px);line-height:1.15;font-weight:600}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--ink-70);max-width:58ch;text-wrap:pretty}
.sec{padding:clamp(72px,10vw,140px) 0;position:relative}
.sec-head{max-width:760px}
.sec-head .eyebrow{margin-bottom:22px}
.sec-head .h2{margin-bottom:22px}

/* Dunkle Flächen */
.dark{background:var(--cocoa);color:#F6E7D8}
.dark .h2{color:#FDEFE1}
.dark .lead{color:rgba(246,231,216,.72)}
.dark .eyebrow{color:var(--flame-3)}
.dark .eyebrow::before{background:var(--flame-3)}

.grain-l::after{
  content:"";position:absolute;inset:0;background-image:var(--grain);
  opacity:.5;mix-blend-mode:multiply;pointer-events:none;z-index:1;
}
.grain-d::after{
  content:"";position:absolute;inset:0;background-image:var(--grain);
  opacity:.42;mix-blend-mode:overlay;pointer-events:none;z-index:1;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--body);font-size:15px;font-weight:700;letter-spacing:.03em;
  padding:16px 30px;border-radius:100px;text-decoration:none;border:1.5px solid transparent;
  cursor:pointer;transition:transform .28s cubic-bezier(.2,.8,.3,1),background .25s,color .25s,border-color .25s,box-shadow .3s;
  white-space:nowrap;
}
.btn svg{width:15px;height:15px;flex:0 0 auto;transition:transform .3s}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--flame);color:#fff;box-shadow:0 8px 24px -10px rgba(238,75,30,.75)}
.btn-primary:hover{background:var(--ember);box-shadow:0 14px 32px -10px rgba(238,75,30,.85)}
.btn-outline{background:transparent;border-color:rgba(43,14,4,.24);color:var(--ink)}
.btn-outline:hover{border-color:var(--ink);background:rgba(43,14,4,.045)}
.dark .btn-outline{border-color:rgba(253,239,225,.32);color:#FDEFE1}
.dark .btn-outline:hover{border-color:#FDEFE1;background:rgba(253,239,225,.08)}
.btn-lg{padding:19px 38px;font-size:16px}

/* ---------- Navigation ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  transition:background .35s,box-shadow .35s,padding .35s,backdrop-filter .35s;
  padding:18px 0;
}
.nav.solid{background:rgba(250,243,233,.88);backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);box-shadow:0 1px 0 var(--line);padding:11px 0}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.nav-brand img{height:38px;width:auto;transition:height .35s}
.nav.solid .nav-brand img{height:32px}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a:not(.btn){
  font-family:var(--body);font-size:14.5px;font-weight:600;color:var(--ink);
  text-decoration:none;padding:9px 15px;border-radius:100px;transition:background .22s,color .22s;
}
.nav-links a:not(.btn):hover{background:rgba(43,14,4,.06)}
.nav-links .btn{margin-left:10px;padding:13px 24px;font-size:14.5px}
.nav-burger{
  display:none;width:46px;height:46px;border:1.5px solid rgba(43,14,4,.2);background:transparent;
  border-radius:100px;cursor:pointer;position:relative;flex:0 0 auto;
}
.nav-burger i{position:absolute;left:13px;right:13px;height:1.8px;background:var(--ink);transition:transform .3s,opacity .25s}
.nav-burger i:nth-child(1){top:17px}
.nav-burger i:nth-child(2){top:22.5px}
.nav-burger i:nth-child(3){top:28px}
body.menu-open .nav-burger i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
body.menu-open .nav-burger i:nth-child(2){opacity:0}
body.menu-open .nav-burger i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:0;z-index:85;background:var(--cocoa);
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 var(--pad);
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;
}
body.menu-open .mobile-menu{opacity:1;visibility:visible}
.mobile-menu a{
  font-family:var(--display);font-size:clamp(30px,8vw,46px);font-weight:400;color:#FDEFE1;
  text-decoration:none;padding:10px 0;border-bottom:1px solid rgba(253,239,225,.12);
}
.mobile-menu a:last-child{color:var(--flame-3);font-weight:700;border-bottom:none;margin-top:18px}
body.menu-open .nav{background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body.menu-open .nav-brand img{filter:brightness(0) invert(1)}
body.menu-open .nav-burger{border-color:rgba(253,239,225,.34)}
body.menu-open .nav-burger i{background:#FDEFE1}
@media(max-width:940px){
  .nav-links{display:none}
  .nav-burger{display:block}
}

/* ============================================================
   HERO
   ============================================================ */
/* Zentrierte Bühnen-Komposition: Publikumsfoto, Lichtblüte, Text in der Mitte */
.hero{
  position:relative;min-height:100svh;overflow:hidden;background:var(--cocoa);text-align:center;
  /* minmax(0,1fr) statt einer auto-Spalte: eine auto-Spalte waechst auf
     max-content und laesst den Hero auf Mobil horizontal ueberlaufen */
  display:grid;grid-template-columns:minmax(0,1fr);align-items:center;
}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}
/*
  Drei Ebenen über dem Foto, von oben nach unten:
  1) Lichtblüte in der Bildmitte — trägt die schwarze Headline und verstärkt
     das Bühnenlicht des Fotos
  2) heller Kopf, damit das schwarze Logo in der Navigation lesbar bleibt
  3) dunkler Fuß, der in das Zahlenband darunter überleitet
*/
.hero-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(66% 45% at 50% 41%,
      rgba(253,247,238,.86) 0%,rgba(253,247,238,.72) 34%,rgba(253,247,238,.34) 64%,
      rgba(253,247,238,.08) 84%,transparent 94%),
    linear-gradient(180deg,rgba(250,243,233,.78) 0,rgba(250,243,233,.32) 58px,transparent 130px),
    linear-gradient(0deg,rgba(22,10,5,.50) 0%,rgba(22,10,5,.12) 13%,transparent 27%);
}
/*
  Nur padding-block setzen — das padding-Shorthand wuerde das seitliche
  Padding von .wrap ueberschreiben und den Inhalt an den Rand kleben.
  Oben etwas mehr als die Navigationshoehe, unten leicht mehr: Der Block
  sitzt damit optisch mittig und haengt nicht an der Navigation.
*/
.hero-inner{
  position:relative;z-index:2;width:100%;
  padding-top:clamp(96px,12.5vh,150px);padding-bottom:clamp(148px,19vh,224px);
}
.hero-claim{
  font-weight:800;font-size:clamp(10.5px,1.05vw,13px);
  letter-spacing:.3em;text-transform:uppercase;color:var(--ink);
  margin:0 0 clamp(14px,1.8vw,22px);
}
.hero-h1{
  font-family:var(--display);font-weight:500;color:var(--ink);
  font-size:clamp(46px,9.4vw,112px);line-height:.96;letter-spacing:-.024em;margin:0;
}
.hero-h1 em{font-style:normal;font-weight:700;color:var(--flame)}
.hero-event{
  font-weight:800;font-size:clamp(15px,1.7vw,21px);color:var(--ink);
  margin:clamp(14px,1.7vw,21px) 0 0;
}
.hero-lead{
  font-size:clamp(15.5px,1.5vw,18.5px);line-height:1.5;font-weight:500;color:var(--ink-70);
  max-width:46ch;margin:clamp(9px,1.1vw,13px) auto 0;
}
/* Rahmen: Datum und Ort in einer Pille — kompakter als zwei Chips */
.hero-frame{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 16px;
  width:fit-content;margin:clamp(15px,1.8vw,22px) auto 0;padding:10px 22px;border-radius:100px;
  background:rgba(255,255,255,.72);border:1px solid var(--line);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  font-size:14.5px;font-weight:700;letter-spacing:.01em;color:var(--ink);
}
.hero-frame span{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.hero-frame svg{width:15px;height:15px;color:var(--flame);flex:0 0 auto}
.hero-frame i{width:4px;height:4px;border-radius:50%;background:rgba(43,14,4,.28)}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:13px;margin-top:clamp(15px,1.8vw,22px)}
/*
  Aurora-Hinweis und Anmeldeschluss sind zwei verschiedene Dinge und stehen
  deshalb getrennt: der Hinweis als kurze Akzentzeile ueber den Buttons, die
  Frist klein darunter. Kein Kasten mehr — statt dessen ein weicher Lichthof
  hinter der Schrift, damit beides auch auf dem Foto lesbar bleibt.
*/
.hero-aurora{
  display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
  margin:clamp(14px,1.7vw,20px) 0 0;
  font-size:clamp(14px,1.45vw,16.5px);font-weight:800;letter-spacing:.01em;color:var(--ember);
  text-shadow:0 0 16px rgba(255,251,244,.95),0 0 6px rgba(255,251,244,.95);
}
.hero-aurora svg{width:15px;height:15px;color:var(--flame);flex:0 0 auto}
.hero-aurora span{border-bottom:1.5px solid rgba(238,75,30,.32);padding-bottom:2px}
.hero-deadline{
  margin:clamp(13px,1.6vw,18px) 0 0;
  font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);
  text-shadow:0 0 18px rgba(255,251,244,.98),0 0 7px rgba(255,251,244,.98);
}
/* Buttons im Hero: Das Foto ist durchgehend orange, ein oranger Button geht
   darin unter. Primär deshalb dunkel, sekundär hell — beide tragen sowohl
   auf dem Lichtband als auch auf dem Publikum. */
.hero .btn-primary{
  background:var(--cocoa);border-color:var(--cocoa);color:#FFF3E6;
  box-shadow:0 16px 38px -18px rgba(22,10,5,.7);
}
.hero .btn-primary:hover{background:var(--cocoa-3);border-color:var(--cocoa-3)}
.hero .btn-primary svg{color:var(--flame-3)}
.hero .btn-outline{
  background:rgba(255,252,247,.86);border-color:rgba(43,14,4,.14);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.hero .btn-outline:hover{background:#FFFCF7;border-color:rgba(43,14,4,.32)}
.hero-scroll{
  position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(26px,4vw,40px);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:11px;
  font-size:10.5px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.78);text-decoration:none;
}
.hero-scroll::after{content:"";width:1px;height:44px;background:linear-gradient(rgba(255,255,255,.9),transparent);animation:drop 2.2s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/*
  Mobil: Das Foto ist 16:9. Formatfüllend im Hochformat bliebe davon nur ein
  schmaler Streifen — drei riesige Köpfe, stark hochskaliert. Deshalb steht das
  Foto als Band oben (nahezu native Auflösung, Publikum klar erkennbar) und der
  Text darunter auf Cream. Sobald eine Hochformat-Fassung des Fotos vorliegt,
  kann hier auf formatfüllend umgestellt werden.
*/
@media(max-width:900px){
  .nav{
    background:rgba(250,243,233,.92);backdrop-filter:blur(14px) saturate(150%);
    -webkit-backdrop-filter:blur(14px) saturate(150%);box-shadow:0 1px 0 var(--line);padding:11px 0;
  }
  .nav-brand img{height:30px;width:auto}
  .nav.solid .nav-brand img{height:30px}

  /*
    Foto oben als Band, Kicker und Headline liegen darueber, alles Weitere
    darunter auf Cream. display:contents loest .hero-inner als Kasten auf,
    damit .hero-top und .hero-rest direkte Rasterfelder werden — so steht der
    Titel im Bild, ohne den Text im Quelltext zu verdoppeln.
  */
  .hero{
    display:grid;grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto;grid-template-areas:"bild" "text";
    min-height:0;background:var(--cream);
  }
  .hero-bg{
    grid-area:bild;position:relative;inset:auto;width:100%;
    height:clamp(330px,46svh,470px);margin-top:68px;
  }
  .hero-bg img{object-position:50% 46%}
  .hero-bg::after{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(112% 56% at 50% 50%,rgba(253,247,238,.62) 0%,rgba(253,247,238,.42) 40%,
        rgba(253,247,238,.12) 74%,transparent 92%),
      linear-gradient(180deg,rgba(250,243,233,.3) 0,transparent 22%);
  }
  .hero-veil{display:none}
  .hero-inner{display:contents}
  .hero-top{
    grid-area:bild;align-self:center;z-index:2;position:relative;
    padding:68px var(--pad) 0;
  }
  .hero-rest{grid-area:text;padding:clamp(26px,6.5vw,42px) var(--pad) clamp(46px,11vw,78px)}
  .hero-claim{letter-spacing:.2em;margin-bottom:clamp(12px,2.6vw,18px)}
  .hero-lead{max-width:34ch}
  .hero-scroll{display:none}
}
@media(max-width:900px) and (orientation:landscape){
  .hero-bg{height:clamp(200px,52svh,300px)}
}

/* ---------- Kennzahlen-Band ---------- */
.stats{background:var(--cocoa);color:#F6E7D8;position:relative;overflow:hidden}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);position:relative;z-index:2}
.stat{padding:clamp(30px,4vw,50px) clamp(16px,2.4vw,34px);border-left:1px solid rgba(253,239,225,.13)}
.stat:first-child{border-left:none}
.stat-n{
  font-family:var(--display);font-weight:700;font-size:clamp(38px,5.2vw,70px);line-height:.95;
  background:linear-gradient(120deg,var(--flame-3),var(--flame));
  -webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.03em;
}
.stat-l{margin-top:12px;font-size:14px;line-height:1.4;color:rgba(246,231,216,.68);font-weight:600}
@media(max-width:820px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3){border-left:none}
  .stat:nth-child(n+3){border-top:1px solid rgba(253,239,225,.13)}
}

/* ---------- Laufband ---------- */
.marquee{background:linear-gradient(95deg,var(--flame-2),var(--flame) 45%,var(--ember));overflow:hidden;padding:16px 0;position:relative}
.marquee-track{display:flex;gap:0;width:max-content;animation:slide 34s linear infinite}
.marquee span{
  font-family:var(--body);font-weight:800;font-size:clamp(14px,1.5vw,18px);color:#fff;
  padding:0 26px;letter-spacing:.045em;display:inline-flex;align-items:center;gap:26px;white-space:nowrap;
}
.marquee span::after{content:"";width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============================================================
   EINLADUNG (dunkel)
   ============================================================ */
.invite{position:relative;overflow:hidden;background:var(--cocoa)}
.invite-bg{position:absolute;inset:0;z-index:0;opacity:.75}
.invite-bg img{width:100%;height:100%;object-fit:cover;object-position:60% 30%;transform:scaleY(-1)}
.invite-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(43,14,4,.9) 0%,rgba(43,14,4,.7) 26%,rgba(43,14,4,.82) 62%,rgba(43,14,4,.97) 100%);
}
.invite .wrap{position:relative;z-index:2}
.invite-head{max-width:820px;margin-bottom:clamp(44px,6vw,78px)}
.invite-head .h2{font-size:clamp(36px,6.2vw,84px);line-height:1.02;color:#FDEFE1;text-wrap:balance}
/* Einstieg und Zitatfrage vor den Spalten */
.invite-open{max-width:62ch;margin:0 0 clamp(26px,3.4vw,40px)}
.invite-open p{color:rgba(246,231,216,.8);font-size:16.5px;line-height:1.72;margin:0}
.invite-quote{
  position:relative;max-width:24ch;margin:0 0 clamp(28px,3.6vw,44px);padding-left:clamp(26px,3.4vw,44px);
  font-family:var(--display);font-weight:500;color:#FDEFE1;
  font-size:clamp(24px,3.4vw,44px);line-height:1.16;letter-spacing:-.015em;
}
.invite-quote::before{
  content:"";position:absolute;left:0;top:.16em;bottom:.16em;width:3px;border-radius:2px;
  background:linear-gradient(var(--flame),rgba(238,75,30,.16));
}
.invite-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,60px)}
.invite-cols + .pull + .invite-cols{margin-top:0}
.invite-cols a{color:var(--flame-3);text-decoration:none;border-bottom:1px solid rgba(251,176,90,.4)}
.invite-foot a{color:var(--flame-3);text-decoration:none;border-bottom:1px solid rgba(251,176,90,.4)}
.invite-cols a:hover,.invite-foot a:hover{border-bottom-color:var(--flame-3)}
.invite-cols p{margin:0 0 22px;color:rgba(246,231,216,.8);line-height:1.72;font-size:16.5px}
.invite-cols p:last-child{margin-bottom:0}
.invite-cols strong{color:#FDEFE1;font-weight:700}
/* Einspaltig muss der Spaltenabstand die fehlende Absatzmarge ersetzen —
   sonst kleben der letzte Absatz der ersten und der erste der zweiten
   Spalte aufeinander (fiel im Tablet-Bereich auf) */
@media(max-width:800px){.invite-cols{grid-template-columns:1fr;gap:22px}}

.pull{
  margin:clamp(38px,5vw,64px) 0;padding:clamp(26px,3.2vw,40px) 0;
  border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(22px,4vw,52px);align-items:stretch;
}
.pull-mark{
  width:3px;border-radius:3px;flex:0 0 auto;
  background:linear-gradient(var(--flame-3),var(--flame),var(--ember));
}
.pull-q{
  font-family:var(--display);font-weight:500;font-size:clamp(24px,3.5vw,46px);line-height:1.14;
  color:#FDEFE1;letter-spacing:-.022em;margin:0;max-width:24ch;text-wrap:balance;
}
.pull-q b{display:block;font-weight:700;color:var(--flame-3);margin-top:.04em}
@media(max-width:640px){.pull{gap:20px}}

.invite-foot{max-width:64ch;margin-top:clamp(30px,4vw,48px)}
.invite-foot p{color:rgba(246,231,216,.8);font-size:16.5px;line-height:1.72;margin:0 0 20px}
.sig{display:flex;align-items:center;gap:16px;margin-top:30px;padding-top:26px;border-top:1px solid var(--line-d)}
.sig-av{
  width:52px;height:52px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(140deg,var(--flame-2),var(--ember));
  display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:17px;color:#fff;
}
/* Signatur mit echtem Porträt statt Initialen */
.sig-photo{
  width:58px;height:58px;object-fit:cover;object-position:50% 22%;
  border:2px solid rgba(251,176,90,.35);background:none;
}
.sig-n{font-family:var(--body);font-weight:800;font-size:17px;color:#FDEFE1;line-height:1.2}
.sig-r{font-size:14px;color:rgba(246,231,216,.55);margin-top:4px}

/* ============================================================
   AURORA — der Höhepunkt der Veranstaltung
   ============================================================ */
.aurora{position:relative;overflow:hidden;background:var(--paper)}
.aurora::before{
  content:"";position:absolute;right:-14%;top:-24%;width:62%;aspect-ratio:1;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(238,75,30,.13),rgba(245,134,52,.07) 42%,transparent 70%);
}
/* Wellenmarke als grosses Hintergrundmotiv. Bewusst die orange Fassung —
   die weisse ueber Filter einzufaerben ergab nur eine graue Blase. */
.aurora::after{
  content:"";position:absolute;left:-10%;bottom:-16%;width:74%;aspect-ratio:1178/378;z-index:0;
  background:var(--welle-o) center/contain no-repeat;opacity:.17;pointer-events:none;
}
@media(max-width:700px){.aurora::after{width:132%;left:-18%;bottom:-8%;opacity:.13}}
.aurora .wrap{position:relative;z-index:2}
.aurora-sub{
  font-family:var(--display);font-weight:500;font-size:clamp(21px,2.6vw,34px);
  line-height:1.14;letter-spacing:-.015em;color:var(--ink);margin:clamp(16px,2vw,24px) 0 0;
}
.aurora-sub em{font-style:normal;color:var(--flame)}
.aurora-cols{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,58px);
  margin-top:clamp(34px,4.4vw,54px);
}
.aurora-cols p{margin:0 0 20px;font-size:16.5px;line-height:1.72;color:var(--ink-70)}
.aurora-cols p:last-child{margin-bottom:0}
.aurora-cols strong{color:var(--ink);font-weight:700}
/* Wie bei .invite-cols: einspaltig ersetzt der Spaltenabstand die fehlende
   Absatzmarge des letzten Absatzes */
@media(max-width:800px){.aurora-cols{grid-template-columns:1fr;gap:20px}}

.aurora-quote{
  margin:clamp(34px,4.4vw,54px) 0 0;padding:clamp(28px,3.6vw,46px) clamp(24px,3.4vw,52px);
  border-radius:var(--r-lg);border:1px solid rgba(238,75,30,.2);
  background:linear-gradient(128deg,rgba(238,75,30,.055),rgba(245,134,52,.03));
  text-align:center;
}
.aurora-quote p{
  font-family:var(--display);font-weight:500;color:var(--ink);margin:0;
  font-size:clamp(21px,3vw,40px);line-height:1.16;letter-spacing:-.018em;
}
.aurora-quote span{
  display:block;margin-top:16px;font-family:var(--body);font-size:12px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ember);
}

.aurora-tiles{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px);
  margin-top:clamp(34px,4.4vw,54px);
}
@media(max-width:900px){.aurora-tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.aurora-tiles{grid-template-columns:1fr}}
.atile{
  padding:clamp(22px,2.6vw,30px);border-radius:var(--r-lg);
  background:var(--cream);border:1px solid var(--line);
}
.atile-ico{width:30px;height:30px;color:var(--flame);margin-bottom:16px}
.atile h3{font-family:var(--body);font-weight:800;font-size:17px;margin:0 0 8px;letter-spacing:-.008em;color:var(--ink)}
.atile p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-70)}

.aurora-cta{
  margin-top:clamp(30px,4vw,48px);padding:clamp(24px,3.2vw,38px) clamp(26px,3.4vw,44px);
  border-radius:var(--r-lg);background:linear-gradient(118deg,var(--cocoa),var(--cocoa-3));
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;
  position:relative;overflow:hidden;
}
.aurora-cta-t{color:#FDEFE1;margin:0;font-size:clamp(16px,1.9vw,21px);font-weight:800;letter-spacing:-.008em}
.aurora-cta-s{color:rgba(246,231,216,.66);margin:6px 0 0;font-size:14.5px;font-weight:600}

/* ============================================================
   ERWARTUNGEN
   ============================================================ */
/*
  Kopf, Text und die vier Punkte stehen links in einer Spalte, das Bild
  laeuft rechts auf voller Hoehe mit. Vorher standen Kopf und Bild oben und
  die vier Karten darunter — das liess unter dem kurzen Kopftext viel
  Weissraum stehen.
*/
.exp-grid{
  display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,4.6vw,68px);
  align-items:stretch;
}
@media(max-width:900px){.exp-grid{grid-template-columns:1fr;gap:clamp(30px,5vw,44px)}}

.exp-img{
  border-radius:var(--r-lg);overflow:hidden;position:relative;align-self:stretch;
}
/* Bild etwas hoeher als der Rahmen, damit der Parallax Spielraum hat */
.exp-img img{
  position:absolute;top:-6%;left:0;width:100%;height:112%;
  object-fit:cover;display:block;will-change:transform;
}
.exp-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(43,14,4,.28),transparent 46%);
}
@media(max-width:900px){
  .exp-img{aspect-ratio:16/10;min-height:0}
  .exp-img img{position:static;top:auto;height:100%;transform:none!important}
}

.exp-list{list-style:none;margin:clamp(30px,3.6vw,44px) 0 0;padding:0;counter-reset:ex}
.exp-list li{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2vw,26px);
  padding:clamp(20px,2.4vw,26px) 0;border-top:1px solid var(--line);
  transition:padding-left .3s;
}
.exp-list li:last-child{border-bottom:1px solid var(--line)}
.exp-list li:hover{padding-left:6px}
.ex-n{
  font-family:var(--display);font-weight:700;font-size:clamp(19px,2.2vw,26px);
  line-height:1;color:var(--flame);letter-spacing:-.02em;
  min-width:2.2ch;padding-top:2px;
}
.ex-t{font-family:var(--body);font-weight:800;font-size:17.5px;line-height:1.32;margin:0 0 7px;letter-spacing:-.005em}
.ex-d{font-size:15px;line-height:1.6;color:var(--ink-70);margin:0;max-width:52ch}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,72px);align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr}}
.split-img{border-radius:var(--r-lg);overflow:hidden;position:relative;aspect-ratio:4/5}
.split-img img{width:100%;height:100%;object-fit:cover}
.split-img.wide{aspect-ratio:4/3}

/* ============================================================
   BANNER MIT BILD
   ============================================================ */
.band{position:relative;min-height:clamp(540px,72vw,820px);display:flex;align-items:flex-end;overflow:hidden}
.band-bg{position:absolute;inset:-8% 0;will-change:transform}
.band-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 32%}
.band-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(185deg,rgba(43,14,4,.42) 0%,rgba(43,14,4,.22) 24%,rgba(43,14,4,.8) 64%,rgba(43,14,4,.96) 100%),
    linear-gradient(80deg,rgba(43,14,4,.58) 0%,rgba(43,14,4,.1) 54%,transparent 80%);
}
.band .wrap{position:relative;z-index:2;padding-bottom:clamp(52px,7vw,88px);padding-top:clamp(90px,13vw,160px)}
/* Eine ausbalancierte Headline statt festem Umbruch nach "Zwei Tage," */
.band h2{
  font-family:var(--display);font-weight:400;color:#fff;
  font-size:clamp(34px,5.8vw,80px);line-height:1.04;letter-spacing:-.03em;
  max-width:20ch;text-wrap:balance;margin:0;
}
.band h2 em{
  font-style:normal;font-weight:600;
  background:linear-gradient(96deg,var(--flame-3) 6%,var(--flame-2) 48%,var(--flame) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Die zwei Tage als eigene Karten — vorher zwei lose Saetze untereinander */
.band-days{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);
  margin:clamp(30px,3.6vw,44px) 0 0;max-width:760px;
}
@media(max-width:640px){.band-days{grid-template-columns:1fr}}
.band-day{
  padding:clamp(18px,2.2vw,26px) clamp(18px,2.2vw,26px);border-radius:var(--r-lg);
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
}
.band-day b{
  display:block;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--flame-3);margin-bottom:9px;
}
.band-day span{
  display:block;font-family:var(--display);font-weight:500;color:#fff;
  font-size:clamp(17px,1.9vw,23px);line-height:1.2;letter-spacing:-.014em;
}

/* ============================================================
   PROGRAMM   ============================================================ */
.prog{background:var(--cream-2)}
/* Beide Tage stehen nebeneinander — kein Klicken, kein verstecktes Programm */
.prog-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.2vw,52px);align-items:start;
  margin-top:clamp(34px,4.4vw,56px);
}
@media(max-width:1000px){.prog-grid{grid-template-columns:1fr;gap:clamp(46px,6vw,68px)}}

.day-head{
  padding:clamp(20px,2.4vw,28px) clamp(22px,2.6vw,30px);border-radius:var(--r-lg);
  background:linear-gradient(126deg,var(--cocoa),var(--cocoa-3));
  margin-bottom:clamp(26px,3.2vw,38px);position:relative;overflow:hidden;
}
.day-head.is-two{background:linear-gradient(126deg,#5A1E08,var(--ember))}
.day-badge{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--flame-3);background:rgba(251,176,90,.14);border:1px solid rgba(251,176,90,.28);
  padding:5px 12px;border-radius:100px;
}
.day-head.is-two .day-badge{color:#FFE8CF;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
.day-q{
  font-family:var(--display);font-weight:500;color:#FDEFE1;margin:14px 0 0;
  font-size:clamp(26px,3.2vw,40px);line-height:1.04;letter-spacing:-.02em;
}
.day-q span{display:block;font-family:var(--body);font-size:14px;font-weight:800;
  letter-spacing:.08em;color:rgba(253,239,225,.62);margin-bottom:7px}
.day-sub{margin:12px 0 0;font-size:14.5px;line-height:1.55;color:rgba(246,231,216,.7);font-weight:500}
.day-meta{
  margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);
  font-size:13.5px;line-height:1.5;color:rgba(246,231,216,.66);font-weight:600;
}
.day-meta b{color:#FDEFE1;font-weight:800}

.rail{position:relative;padding-left:0}
.slot{
  display:grid;grid-template-columns:104px 1fr;gap:0 clamp(16px,1.8vw,24px);
  position:relative;padding:0 0 clamp(20px,2.2vw,28px);
}
.slot::before{
  content:"";position:absolute;left:104px;top:12px;bottom:0;width:1px;
  background:rgba(43,14,4,.10);transform:translateX(-.5px);
}
.slot:last-child::before{display:none}
/* Zeiten sind Orientierung, nicht Aussage: klein, ruhig, mit gleich breiten
   Ziffern, damit die Spalte sauber untereinander steht. Farbe bleibt dem
   Aurora-Highlight vorbehalten. */
.slot-time{
  font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
  color:var(--ink-45);text-align:right;padding-top:5px;padding-right:16px;white-space:nowrap;
}
.slot-body{position:relative;padding-left:clamp(16px,1.8vw,24px);padding-top:0;margin-left:calc(-1 * clamp(16px,1.8vw,24px))}
.slot-body::before{
  content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;
  background:var(--flame);transform:translateX(-4px);z-index:2;
}
.slot-t{font-family:var(--body);font-weight:800;font-size:clamp(16px,1.6vw,18px);line-height:1.34;margin:0;letter-spacing:-.005em}
.slot-m{font-size:14px;color:var(--ink-70);margin:6px 0 0;font-weight:600}
.slot-d{font-size:15.5px;line-height:1.62;color:var(--ink-70);margin:12px 0 0;max-width:62ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{
  font-size:12.5px;font-weight:700;letter-spacing:.02em;padding:6px 13px;border-radius:100px;
  background:rgba(238,75,30,.09);color:var(--ember);border:1px solid rgba(238,75,30,.16);
}
.slot.pause .slot-t{font-family:var(--body);font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45)}
.slot.pause .slot-time{color:rgba(139,122,108,.7);font-weight:600}
.slot.pause .slot-body::before{display:none}
.slot.pause{padding-bottom:clamp(14px,1.6vw,20px)}
.slot.pause .slot-m{margin-top:4px;font-size:13.5px}
.slot.open .slot-body::before{border-style:dashed;background:var(--cream-2)}
.slot.open .slot-t{color:var(--ink-70)}
.slot.peak .slot-body{
  background:var(--paper);border:1px solid rgba(238,75,30,.24);border-radius:var(--r-lg);
  padding:24px clamp(22px,2.6vw,30px);margin-left:0;
  box-shadow:0 14px 34px -22px rgba(43,14,4,.4);
}
.slot.peak .slot-body::before{left:-6px;top:26px;background:var(--flame);border-color:var(--flame);transform:none}
.slot.peak .slot-t{color:var(--ember)}

/* Aurora: das Highlight des Programms — deutlich stärker als .peak */
.slot.star{padding-bottom:clamp(24px,2.8vw,34px)}
.slot.star .slot-body{
  background:linear-gradient(138deg,#FFF8F0,#FFEEDF 58%,#FFE4CE);
  border:1.5px solid rgba(238,75,30,.36);border-radius:var(--r-lg);
  padding:clamp(20px,2.4vw,28px);margin-left:0;
  box-shadow:0 24px 50px -26px rgba(180,54,16,.52);
}
.slot.star .slot-body::before{left:-7px;top:30px;width:14px;height:14px;background:var(--flame);border-color:var(--flame);transform:none}
.slot.star .slot-t{color:var(--ember);font-size:clamp(18px,1.9vw,21px)}
.slot.star .slot-time{color:var(--ember)}
.slot-flag{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:12px;
  font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  background:var(--flame);color:#fff;padding:6px 12px;border-radius:100px;
}
.slot-flag svg{width:12px;height:12px}

@media(max-width:1100px) and (min-width:1001px){
  .slot{grid-template-columns:1fr;gap:0;padding-left:22px}
  .slot::before{left:0}
  .slot-time{text-align:left;margin-bottom:7px;padding-right:0}
  .slot-body{padding-left:0;margin-left:0}
  .slot-body::before{left:-22px}
  .slot.star .slot-body,.slot.peak .slot-body{margin-left:0}
  .slot.star .slot-body::before,.slot.peak .slot-body::before{left:-22px}
}
@media(max-width:620px){
  .slot{grid-template-columns:1fr;gap:0;padding-left:22px}
  .slot::before{left:0}
  .slot-time{text-align:left;margin-bottom:7px;padding-right:0}
  .slot-body{padding-left:0;margin-left:0}
  .slot-body::before{left:-22px}
  .slot.star .slot-body,.slot.peak .slot-body{margin-left:0}
  .slot.star .slot-body::before,.slot.peak .slot-body::before{left:-22px;top:26px}
}

.evening{
  margin-top:14px;display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,32px);align-items:center;
  padding:clamp(26px,3.4vw,38px);border-radius:var(--r-lg);
  background:linear-gradient(115deg,var(--cocoa),var(--cocoa-3));color:#F6E7D8;position:relative;overflow:hidden;
}
.evening-ico{width:44px;height:44px;color:var(--flame-3);flex:0 0 auto}
.evening h3{font-family:var(--body);font-size:clamp(18px,2vw,22px);font-weight:800;color:#FDEFE1;margin:0 0 8px;letter-spacing:-.005em}
.evening p{margin:0;color:rgba(246,231,216,.72);font-size:15.5px}
@media(max-width:640px){.evening{grid-template-columns:1fr}}

/*
  Ergebnis des Gipfels — bezieht sich auf beide Tage und steht deshalb unter
  dem Raster über die ganze Breite, nicht mehr in der Tag-2-Spalte.
*/
.outcome{
  margin-top:clamp(34px,4.4vw,56px);padding:clamp(28px,3.6vw,48px);border-radius:var(--r-lg);
  background:var(--paper);border:1px solid var(--line);
  display:grid;grid-template-columns:minmax(220px,.8fr) 1.2fr;gap:clamp(24px,3.6vw,56px);
  align-items:start;
}
@media(max-width:820px){.outcome{grid-template-columns:1fr;gap:24px}}
.outcome-head h3{
  font-family:var(--display);font-weight:500;font-size:clamp(23px,2.8vw,36px);
  line-height:1.08;letter-spacing:-.02em;margin:16px 0 0;color:var(--ink);
}
.outcome-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px 34px;
}
.outcome-list li{position:relative;padding-left:32px;font-size:16px;line-height:1.5;color:var(--ink-70)}
.outcome-list li::before{
  content:"";position:absolute;left:0;top:5px;width:18px;height:18px;border-radius:50%;
  background:rgba(238,75,30,.12);
}
.outcome-list li::after{
  content:"";position:absolute;left:5.5px;top:10px;width:7px;height:4px;
  border-left:1.8px solid var(--flame);border-bottom:1.8px solid var(--flame);transform:rotate(-45deg);
}
.disclaimer{font-size:13.5px;color:var(--ink-45);margin-top:26px;font-style:italic}

/* ============================================================
   REFERENTEN
   ============================================================ */
/* Referenten-Karussell */
/*
  Das Karussell ist ein echter Scroll-Container, kein CSS-Animationsband.
  Dadurch funktionieren Wischen, Mausrad, Ziehen und die Pfeiltasten von
  Haus aus; der automatische Lauf schiebt nur scrollLeft weiter und haelt
  bei jeder Beruehrung an.
*/
.ticker-wrap{position:relative;margin-top:clamp(38px,4.6vw,58px)}
.ticker{
  --tg:22px;
  position:relative;overflow-x:auto;overflow-y:hidden;cursor:grab;
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.ticker::-webkit-scrollbar{display:none}
.ticker.dragging{cursor:grabbing}
.ticker.dragging .pcard{pointer-events:none}
.ticker-track{display:flex;gap:var(--tg);width:max-content;padding:6px 0 4px}
.ticker-set{display:flex;gap:var(--tg);flex:0 0 auto}

.ticker-nav{
  position:absolute;top:calc(50% - 44px);transform:translateY(-50%);z-index:5;
  width:48px;height:48px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,252,247,.92);color:var(--ink);cursor:pointer;
  display:grid;place-items:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 12px 30px -14px rgba(43,14,4,.55);
  transition:background .22s,border-color .22s,transform .22s;
}
.ticker-nav:hover{background:#fff;border-color:rgba(43,14,4,.3);transform:translateY(-50%) scale(1.06)}
.ticker-nav svg{width:19px;height:19px}
.ticker-prev{left:clamp(6px,1.4vw,20px)}
.ticker-next{right:clamp(6px,1.4vw,20px)}
@media(max-width:760px){.ticker-nav{display:none}}

.pcard{
  width:clamp(238px,25vw,322px);flex:0 0 auto;margin:0;
  transition:transform .38s cubic-bezier(.2,.8,.3,1);
}
.ticker:not(.paused) .pcard:hover{transform:translateY(-7px)}
.pcard-img{
  position:relative;aspect-ratio:3/4;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(152deg,#F6D9B8 0%,#EFA65C 32%,#E9691F 66%,#B32C08 100%);
  display:grid;place-items:center;isolation:isolate;
  box-shadow:0 18px 40px -28px rgba(43,14,4,.7);
}
.ticker-set .pcard:nth-child(3n+2) .pcard-img{background:linear-gradient(196deg,#F9E4CB 0%,#F0A65E 38%,#D84813 100%)}
.ticker-set .pcard:nth-child(3n+3) .pcard-img{background:linear-gradient(128deg,#F2C89C 0%,#E97B33 44%,#96230B 100%)}
.pcard-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;z-index:1}
.pcard-img::before{
  content:"";position:absolute;right:-6%;bottom:5%;width:66%;aspect-ratio:1178/378;z-index:2;
  background:var(--welle-w) center/contain no-repeat;opacity:.16;
}
.pcard-img::after{
  content:"";position:absolute;inset:0;z-index:3;
  background-image:var(--grain),radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.12),transparent 55%);
  opacity:.42;mix-blend-mode:overlay;
}
.pcard-init{
  font-family:var(--display);font-weight:700;font-size:clamp(44px,5vw,62px);letter-spacing:-.03em;
  color:rgba(255,255,255,.92);text-shadow:0 2px 20px rgba(122,38,8,.35);z-index:4;
}
.pcard-tag{
  position:absolute;top:12px;left:12px;z-index:5;
  font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(43,14,4,.72);color:var(--flame-3);padding:6px 12px;border-radius:100px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.pcard-n{
  font-family:var(--body);font-weight:800;font-size:17px;line-height:1.28;
  margin:18px 0 6px;letter-spacing:-.008em;color:var(--ink);
}
.pcard-r{font-size:14px;line-height:1.45;color:var(--ink-70);margin:0}
/* Karten mit echtem Porträt: Verlauf und Welle zurücknehmen, damit die
   Gesichter nicht orange überlagert werden. Karten ohne Bild behalten die
   Initialen auf Markenverlauf — beides steht nebeneinander ruhig. */
.pcard-img.photo::before{opacity:.10}
.pcard-img.photo::after{
  opacity:.5;mix-blend-mode:normal;
  background-image:var(--grain),linear-gradient(to top,rgba(43,14,4,.34),transparent 42%);
}
.pcard.soon .pcard-img{background:linear-gradient(150deg,#EFE2D2,#DCC9B2 55%,#C9B098)}
.pcard.soon .pcard-init{color:rgba(255,255,255,.82)}
.ticker-hint{
  display:flex;align-items:center;gap:9px;margin-top:22px;
  font-size:13.5px;color:var(--ink-45);font-weight:600;
}
.ticker-hint svg{width:15px;height:15px;flex:0 0 auto}
.more-note{font-size:15px;color:var(--ink-70);margin:14px 0 0;max-width:60ch}

@media (prefers-reduced-motion:reduce){
  .ticker{-webkit-mask-image:none;mask-image:none}
}

/* ============================================================
   ORT
   ============================================================ */
.venue-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.5vw,64px);align-items:start;margin-top:clamp(40px,5vw,60px)}
@media(max-width:900px){.venue-grid{grid-template-columns:1fr}}
.venue-img{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;position:relative}
.venue-img img{width:100%;height:100%;object-fit:cover}
.venue-cap{
  position:absolute;left:0;right:0;bottom:0;padding:44px 26px 20px;
  background:linear-gradient(transparent,rgba(43,14,4,.85));
  color:#fff;font-size:13px;font-weight:600;letter-spacing:.04em;
}
.facts{margin:0}
.fact{display:grid;grid-template-columns:112px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}
.fact:first-child{border-top:1px solid var(--line)}
.fact dt{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--flame);padding-top:5px}
.fact dd{margin:0;font-size:16.5px;line-height:1.5}
.fact dd b{font-family:var(--body);font-weight:800;font-size:16.5px}
.fact dd span{display:block;color:var(--ink-70);font-size:15px;margin-top:3px}
@media(max-width:520px){.fact{grid-template-columns:1fr;gap:6px}}

.hotel{
  margin-top:clamp(34px,4.5vw,56px);padding:clamp(30px,4vw,52px);border-radius:var(--r-lg);
  background:linear-gradient(122deg,var(--cocoa),var(--cocoa-3));color:#F6E7D8;position:relative;overflow:hidden;
}
.hotel-in{position:relative;z-index:2;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(26px,4vw,56px)}
@media(max-width:820px){.hotel-in{grid-template-columns:1fr}}
.hotel h3{font-family:var(--display);font-size:clamp(23px,2.8vw,32px);font-weight:700;color:#FDEFE1;margin:0 0 14px;letter-spacing:-.02em}
.hotel p{color:rgba(246,231,216,.72);font-size:16px;margin:0 0 18px;line-height:1.6}
.nights{list-style:none;margin:0;padding:0}
.nights li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:baseline;
  padding:16px 0;border-top:1px solid var(--line-d);
}
/* Sehr schmale Geräte: Datum und Erläuterung untereinander. Das nowrap am
   Datum sprengte sonst die Box und der Text wurde abgeschnitten. */
@media(max-width:430px){
  .hotel{padding:26px 22px}
  .nights li{grid-template-columns:1fr;gap:3px}
  .nights b{white-space:normal}
}
.nights li:last-child{border-bottom:1px solid var(--line-d)}
.nights b{font-family:var(--body);font-weight:800;font-size:15.5px;color:#FDEFE1;white-space:nowrap}
.nights span{font-size:14.5px;color:rgba(246,231,216,.6)}
.hotel-note{font-size:13.5px;color:rgba(246,231,216,.5);font-style:italic;margin:20px 0 0}

/* ============================================================
   ANMELDUNG
   ============================================================ */
.reg{background:var(--cream-2);position:relative;overflow:hidden}
.reg-bg{
  position:absolute;right:-8%;bottom:-18%;width:48%;min-width:430px;aspect-ratio:1024/1536;
  opacity:.62;z-index:0;pointer-events:none;
  background:var(--bg3) center/cover no-repeat;
  -webkit-mask-image:radial-gradient(115% 115% at 100% 100%,#000 26%,transparent 70%);
  mask-image:radial-gradient(115% 115% at 100% 100%,#000 26%,transparent 70%);
}
.reg .wrap{position:relative;z-index:2}
.reg-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,4vw,52px);margin-top:clamp(36px,4.5vw,56px);
  box-shadow:0 30px 70px -50px rgba(43,14,4,.55);
}
/* Preisblock: nur der volle Preis. Die Reduktion laeuft ueber den Code in
   der Anmeldung — auf der Seite darf keine Zielgruppe den Preis einer
   anderen sehen. */
.price{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px clamp(24px,4vw,50px);
  background:linear-gradient(118deg,var(--cocoa),var(--cocoa-3));color:#F6E7D8;
  padding:clamp(26px,3.2vw,38px) clamp(24px,3.2vw,40px);border-radius:var(--r-lg);
  margin-bottom:clamp(30px,4vw,44px);position:relative;overflow:hidden;
}
.price-l{font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--flame-3)}
.price-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px;margin-top:14px}
.price-now{
  font-family:var(--display);font-weight:700;font-size:clamp(46px,6.4vw,76px);line-height:.92;
  color:#fff;letter-spacing:-.04em;
}
.price-fine{
  font-size:13.5px;color:rgba(246,231,216,.62);max-width:30ch;line-height:1.5;margin:0;
  padding-left:clamp(0px,2vw,26px);border-left:1px solid var(--line-d);
}
@media(max-width:820px){
  .price{grid-template-columns:1fr}
  .price-fine{padding-left:0;border-left:none;padding-top:18px;border-top:1px solid var(--line-d);max-width:100%}
}

.reg-body{max-width:68ch}
.reg-t{font-size:16.5px;line-height:1.7;color:var(--ink-70);margin:0}
.reg-note{
  margin:20px 0 clamp(26px,3.2vw,34px);padding:16px 20px;border-radius:var(--r);
  background:rgba(238,75,30,.055);border:1px solid rgba(238,75,30,.16);
  border-left:3px solid var(--flame);
  font-size:15px;line-height:1.6;font-weight:600;color:var(--ink);
}
.reg-body .btn{margin-top:clamp(24px,3vw,34px)}
.reg-hint{margin:16px 0 0;font-size:14px;font-weight:700;color:var(--ink-70)}
.legal{font-size:13px;color:var(--ink-45);margin-top:18px;max-width:66ch;line-height:1.55}
.reg-contact{
  display:flex;align-items:center;gap:16px;margin-top:clamp(28px,3.4vw,38px);
  padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--line);
}
.reg-contact p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-70)}
.reg-contact b{color:var(--ink);font-weight:800}
.reg-contact a{color:var(--ember);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(196,42,11,.3)}
.reg-contact a:hover{border-bottom-color:var(--ember)}
@media(max-width:560px){.reg-contact{flex-direction:column;align-items:flex-start;gap:14px}}

/* ============================================================
   ABSCHLUSS
   ============================================================ */
.outro{position:relative;overflow:hidden;background:var(--cocoa);text-align:center;padding:clamp(80px,11vw,150px) 0}
.outro-bg{position:absolute;inset:0;z-index:0;opacity:.85}
.outro-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;transform:scale(1.05) rotate(180deg)}
.outro-bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(85% 78% at 50% 46%,rgba(43,14,4,.66) 0%,rgba(43,14,4,.9) 62%,rgba(43,14,4,.99) 100%);
}
.outro-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.outro-welle{width:clamp(76px,9vw,112px);margin-bottom:26px}
.outro .eyebrow{color:var(--flame-3);margin-bottom:22px}
.outro .eyebrow::before{background:var(--flame-3)}
.outro-h{
  font-family:var(--display);font-weight:500;color:#FDEFE1;
  font-size:clamp(38px,7.4vw,104px);line-height:.98;letter-spacing:-.035em;margin:0;
}
.outro-h em{
  display:block;font-style:normal;font-weight:700;
  background:linear-gradient(96deg,var(--flame-3) 4%,var(--flame-2) 46%,var(--flame) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.outro-claim{
  font-family:var(--display);font-weight:500;color:#FDEFE1;
  font-size:clamp(20px,2.6vw,34px);line-height:1.18;letter-spacing:-.018em;
  max-width:30ch;margin:clamp(26px,3.2vw,38px) auto 0;text-wrap:balance;
}
.outro-claim b{font-weight:700;color:var(--flame-3)}
.outro-p{
  font-size:clamp(16px,1.7vw,19px);line-height:1.5;color:rgba(246,231,216,.72);
  max-width:34ch;margin:clamp(16px,2vw,22px) auto 0;font-weight:500;text-wrap:balance;
}
.count-l{
  margin:clamp(30px,3.8vw,44px) 0 0;font-size:11.5px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--flame-3);
}
.count-l[hidden]{display:none}
.count{display:flex;gap:clamp(10px,1.6vw,18px);margin:clamp(16px,2vw,22px) 0 0;flex-wrap:wrap;justify-content:center}
.count[hidden]{display:none}
.count div{
  min-width:clamp(88px,11vw,124px);padding:18px 14px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.06);border:1px solid var(--line-d);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.count b{
  display:block;font-family:var(--display);font-weight:700;font-size:clamp(28px,3.6vw,44px);
  line-height:1;color:#fff;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.count span{
  display:block;margin-top:9px;font-size:10.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--flame-3);
}
.outro .btn{margin-top:clamp(32px,4vw,46px)}
.outro-meta{
  margin:26px 0 0;font-size:14.5px;font-weight:700;color:rgba(246,231,216,.55);letter-spacing:.02em;
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--cocoa);color:rgba(246,231,216,.6);padding:clamp(56px,7vw,90px) 0 40px;position:relative;overflow:hidden}
.foot .wrap{position:relative;z-index:2}
.foot-top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:clamp(28px,4vw,54px);padding-bottom:clamp(40px,5vw,60px);border-bottom:1px solid var(--line-d)}
@media(max-width:820px){.foot-top{grid-template-columns:1fr}}
.foot-welle{width:96px;margin-bottom:22px}
.foot-claim{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.4vw,27px);color:#FDEFE1;line-height:1.18;letter-spacing:-.02em;max-width:18ch;text-wrap:balance}
.foot h4{font-family:var(--body);font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--flame-3);margin:0 0 16px}
.foot p{margin:0 0 8px;font-size:15px;line-height:1.6}
.foot a{color:rgba(246,231,216,.75);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.foot a:hover{color:#FDEFE1;border-color:var(--flame)}
.foot-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:26px;font-size:13.5px}
.foot-legal{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.foot-legal a{color:rgba(246,231,216,.78);text-decoration:none;border-bottom:1px solid rgba(251,176,90,.3)}
.foot-legal a:hover{color:var(--flame-3);border-bottom-color:var(--flame-3)}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
.rv-2{transition-delay:.09s}
.rv-3{transition-delay:.18s}
.rv-4{transition-delay:.27s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
}

/* ---------- Druck / PDF ---------- */
@media print{
  @page{margin:14mm}
  body{background:#fff;font-size:11pt}
  .nav,.mobile-menu,.hero-scroll,.marquee,.reg-bg,.hero-cta,.btn{display:none!important}
  .grain-l::after,.grain-d::after{display:none}
  .hero{min-height:auto;page-break-after:avoid}
  .hero-inner{padding-top:0;padding-bottom:0}
  .sec{padding:18mm 0;page-break-inside:auto}
  .prog-grid{display:block}
  .day{page-break-before:always}
  .rv{opacity:1!important;transform:none!important}
  .slot,.ex,.atile,.evening,.promise{page-break-inside:avoid}
  .band{min-height:60mm}
  .count,.count-l,.ticker-hint{display:none!important}
  .reg-card,.aurora-cta{box-shadow:none;page-break-inside:auto}
  .ticker{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .ticker-track{animation:none;width:auto}
  .ticker-set{flex-wrap:wrap}
  .ticker-set:nth-child(2){display:none}
  .pcard{width:31%;page-break-inside:avoid}
  .outro{padding:16mm 0}
}