:root{
  --ink:#050505;
  --ink-2:#0b0b10;
  --paper:#ffffff;
  --mint:#47ECCE;
  --cyan:#4EC3E0;
  --violet:#785DCA;
  --blue:#1902D3;
  --deep:#002073;
  --grad:linear-gradient(100deg,var(--mint),var(--cyan) 35%,var(--violet) 68%,var(--blue));
  --muted:rgba(255,255,255,.56);
  --dim:rgba(255,255,255,.42);
  --line:rgba(255,255,255,.12);

  /* Ein Abstands-Raster fuer die ganze Seite */
  --pad:clamp(20px,4.4vw,68px);
  --sec:clamp(38px,4.4vw,60px);
  --gap-xl:clamp(20px,2.4vw,32px);
  --gap-l:clamp(16px,1.8vw,24px);
  --gap-m:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);color:var(--paper);
  font-family:Montserrat,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.locked{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--mint);color:#000}
:focus-visible{outline:2px solid var(--mint);outline-offset:4px;border-radius:2px}
.skip{position:fixed;left:50%;top:-100px;transform:translateX(-50%);z-index:9998;
  background:var(--mint);color:#000;padding:14px 26px;border-radius:0 0 6px 6px;
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;transition:top .3s}
.skip:focus{top:0}

/* ---------- Bausteine ---------- */
.wrap{max-width:1400px;margin:0 auto;padding:0 var(--pad)}
section{padding:var(--sec) 0}
.eyebrow{
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:700;color:var(--dim);display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--grad);flex:0 0 auto}
.display{font-weight:900;text-transform:uppercase;line-height:.94;letter-spacing:-.03em}
h2.display{font-size:clamp(27px,3.9vw,58px);max-width:17ch}
.sec-head{margin-bottom:var(--gap-xl)}
.sec-head h2{margin-top:var(--gap-m)}
.lead{font-family:Poppins,sans-serif;font-weight:300;color:rgba(255,255,255,.68);
  font-size:clamp(14.5px,1.1vw,17px);line-height:1.8;max-width:62ch}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.btn{
  --bg:var(--paper);--fg:#000;
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:16px 28px;border-radius:100px;background:var(--bg);color:var(--fg);
  font-weight:800;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  overflow:hidden;isolation:isolate;cursor:pointer;border:0;
  font-family:Montserrat,sans-serif;
}
.btn span{position:relative;z-index:2}
.btn::after{content:"";position:absolute;inset:0;z-index:1;background:var(--grad);
  transform:translateY(101%);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.btn:hover::after{transform:translateY(0)}
.btn.ghost{--bg:transparent;--fg:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.btn.ghost:hover{color:#000}
.btn .arw{position:relative;z-index:2;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.btn:hover .arw{transform:translateX(4px)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Loader ---------- */
#loader{position:fixed;inset:0;z-index:9999;background:var(--ink);
  display:grid;place-items:center;transition:opacity .6s ease,visibility .6s}
#loader.done{opacity:0;visibility:hidden}
#loader .mark{width:min(38vw,260px);opacity:.9}
#loader .bar{width:min(38vw,260px);height:2px;background:rgba(255,255,255,.1);margin-top:22px;overflow:hidden}
#loader .bar i{display:block;height:100%;width:0;background:var(--grad);animation:load 1.1s cubic-bezier(.7,0,.3,1) forwards}
@keyframes load{to{width:100%}}

/* ---------- Kopf ---------- */
#prog{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;
  transform:scaleX(0);background:var(--grad);z-index:600}
/* Nur der Seitenkopf, bewusst ueber die id. Als Elementregel geschrieben
   erwischt sie jedes <header> auf der Seite, auch die Kategorie-Koepfe in
   der Nominiertenliste, und die klappen dann alle auf top:0 zusammen. */
#hdr{position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px var(--pad);transition:background .45s ease,padding .45s ease}
#hdr.stuck{background:rgba(5,5,5,.8);backdrop-filter:blur(16px);padding:12px var(--pad);
  border-bottom:1px solid var(--line)}
#hdr .logo{height:clamp(22px,1.9vw,28px);width:auto}
nav.main{display:flex;gap:30px;align-items:center}
nav.main a{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.66);position:relative;padding:4px 0}
nav.main a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--grad);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .4s cubic-bezier(.16,1,.3,1)}
nav.main a:hover{color:#fff}
nav.main a:hover::after{transform:scaleX(1);transform-origin:0 50%}
.nav-cta{display:flex;align-items:center;gap:14px}
/* Sprachumschalter DE/EN, bewusst genau wie die Menuepunkte gesetzt */
.lang{display:flex;align-items:center;gap:16px;margin-right:6px}
.lang a{position:relative;padding:4px 0;font-size:11px;font-weight:700;letter-spacing:.13em;
  color:rgba(255,255,255,.42);transition:color .3s ease}
.lang a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--grad);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .4s cubic-bezier(.16,1,.3,1)}
.lang a:hover{color:#fff}
.lang a:hover::after{transform:scaleX(1);transform-origin:0 50%}
.lang a.on{color:#fff}
.lang a.on::after{transform:scaleX(1);transform-origin:0 50%}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;
  background:none;cursor:pointer;position:relative}
.burger i{position:absolute;left:12px;width:18px;height:1.5px;background:#fff;transition:.35s}
.burger i:nth-child(1){top:18px}.burger i:nth-child(2){top:24px}
body.menu .burger i:nth-child(1){transform:translateY(3px) rotate(45deg)}
body.menu .burger i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
#drawer{position:fixed;inset:0;z-index:490;background:var(--ink-2);
  display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 var(--pad);
  clip-path:inset(0 0 100% 0);transition:clip-path .7s cubic-bezier(.76,0,.24,1)}
body.menu #drawer{clip-path:inset(0 0 0 0)}
#drawer a{font-size:clamp(26px,6.4vw,46px);font-weight:900;text-transform:uppercase;
  letter-spacing:-.03em;line-height:1.25;color:rgba(255,255,255,.9)}
#drawer a:hover{color:var(--mint)}

/* ---------- Licht am Cursor ---------- */
#glow{position:fixed;width:560px;height:560px;border-radius:50%;pointer-events:none;z-index:2;
  background:radial-gradient(circle,rgba(120,93,202,.20),rgba(71,236,206,.06) 45%,transparent 68%);
  transform:translate(-50%,-50%);mix-blend-mode:screen;transition:opacity .4s;opacity:0}

/* ---------- Hero ---------- */
#hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;
  padding:clamp(80px,10vh,100px) 0 clamp(72px,8vh,86px)}
#hero .bg{position:absolute;inset:-18% 0;z-index:0;will-change:transform;opacity:.9}
#hero .bg img{width:100%;height:100%;object-fit:cover;filter:saturate(1.1)}
#hero .veil{position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(5,5,5,.2),rgba(5,5,5,.88) 72%),
    linear-gradient(to top,var(--ink) 3%,rgba(5,5,5,.3) 48%,rgba(5,5,5,.62))}
#hero .grain{position:absolute;inset:0;z-index:2;opacity:.22;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
#hero .inner{position:relative;z-index:3;width:100%}
#hero h1{font-size:clamp(42px,8.6vw,132px);margin:var(--gap-m) 0 0;letter-spacing:-.035em;line-height:.98}
/* Die Maske braucht Luft nach oben, sonst fehlen die Punkte auf Ü und Ä */
#hero h1 .ln{display:block;overflow:hidden;padding-top:.22em;margin-top:-.22em}
#hero h1 .ln>span{display:block;transform:translateY(105%);
  animation:rise 1.1s cubic-bezier(.16,1,.3,1) forwards;animation-delay:var(--d,0s)}
@keyframes rise{to{transform:translateY(0)}}
/* Wechselndes Wort: altes und neues Wort blenden gleichzeitig, mit leichtem Weichzeichner.
   Die Breite laeuft mit (app.js setzt sie), sonst springt die Zeile beim Wechsel.
   Lange, flache Kurven: das Wort soll auftauchen, nicht erscheinen. */
.rot{display:inline-block;white-space:nowrap;position:relative;
  transition:width .8s cubic-bezier(.4,0,.2,1)}
.rot i{display:inline-block;font-style:normal;
  transition:opacity .9s cubic-bezier(.4,0,.2,1),transform 1s cubic-bezier(.2,.8,.3,1),
             filter .9s cubic-bezier(.4,0,.2,1)}
.rot i.rein{opacity:0;transform:translateY(.09em);filter:blur(3px);transition:none}
.rot i.raus{position:absolute;left:0;top:0;opacity:0;transform:translateY(-.09em);filter:blur(3px);
  pointer-events:none;transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .9s ease,filter .7s ease}
.hero-sub{margin-top:var(--gap-m);max-width:44ch}
.hero-actions{margin-top:var(--gap-l)}
/* Bewusst linksbuendig, damit die Vorschau-Leiste unten mittig nichts verdeckt */
.hero-facts{display:flex;flex-wrap:wrap;gap:16px clamp(30px,4vw,60px);
  margin-top:var(--gap-l);padding-top:var(--gap-m);border-top:1px solid var(--line);max-width:820px}
.hero-facts .k{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);font-weight:700}
.hero-facts .v{margin-top:8px;font-size:clamp(13.5px,1.1vw,16px);font-weight:700;letter-spacing:-.01em}
.cue{position:absolute;right:var(--pad);bottom:clamp(72px,9vh,96px);z-index:4;
  writing-mode:vertical-rl;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--dim);font-weight:700;display:flex;align-items:center;gap:12px}
.cue::after{content:"";width:1px;height:52px;background:linear-gradient(to bottom,var(--mint),transparent);
  animation:cuey 2.2s ease-in-out infinite}
@keyframes cuey{0%,100%{opacity:.25;transform:scaleY(.5);transform-origin:0 0}50%{opacity:1;transform:scaleY(1)}}

/* ---------- Laufband ---------- */
.ticker{overflow:hidden;padding:15px 0;background:var(--violet);color:#fff}
.ticker .row{display:flex;gap:32px;width:max-content;animation:mv 44s linear infinite}
.ticker span{font-size:clamp(10.5px,1vw,12.5px);font-weight:800;text-transform:uppercase;
  letter-spacing:.22em;display:flex;align-items:center;gap:32px;white-space:nowrap}
.ticker span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--mint)}
@keyframes mv{to{transform:translateX(-50%)}}

/* ---------- Einblenden ---------- */
.rv .w{display:inline-block;overflow:hidden;vertical-align:top;padding-top:.14em;margin-top:-.14em}
.rv .w>i{display:inline-block;font-style:inherit;transform:translateY(100%);
  transition:transform .85s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i)*34ms)}
.rv.in .w>i{transform:translateY(0)}
.fade{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.fade.in{opacity:1;transform:none}
.fade.d1{transition-delay:.08s}.fade.d2{transition-delay:.16s}.fade.d3{transition-delay:.24s}

/* ---------- Intro ---------- */
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--gap-xl) clamp(40px,6vw,110px);align-items:start}
.intro-copy p+p{margin-top:var(--gap-m)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.2vw,34px);
  margin-top:var(--gap-xl);padding-top:var(--gap-l);border-top:1px solid var(--line)}
.pillars>div{border-top:3px solid var(--mint);padding-top:18px}
.pillars>div:nth-child(2){border-top-color:var(--cyan)}
.pillars>div:nth-child(3){border-top-color:var(--violet)}
.pillars h3{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;margin-bottom:12px}
.pillars p{font-family:Poppins,sans-serif;font-weight:300;font-size:14px;
  color:rgba(255,255,255,.6);line-height:1.75}

/* ---------- Zahlen ---------- */
/* Unten weniger Luft: darunter kommt die gepinnte Kategorien-Strecke, die ihren
   Inhalt selbst mittig setzt. Beides zusammen riss sonst ein Loch in die Seite. */
#stats{border-top:1px solid var(--line);padding-bottom:calc(var(--sec)*.35)}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-l)}
.stat .n{font-size:clamp(46px,6vw,92px);font-weight:900;letter-spacing:-.05em;line-height:.85;
  font-variant-numeric:tabular-nums;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat .l{margin-top:14px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);font-weight:700;line-height:1.8}

/* ---------- Kategorien ---------- */
#cats{position:relative;padding:0}
/* Nicht mittig, sondern oben angesetzt: sonst reisst auf hohen Bildschirmen ein
   Loch zwischen den Zahlen und der Strecke. Der Fortschrittsbalken haengt unten
   und haelt die Komposition zusammen. */
.rail-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  justify-content:flex-start;padding-top:clamp(88px,12vh,150px);overflow:hidden}
/* Kopfzeile und Balken liegen im selben Raster wie .wrap (max 1400 plus Rand),
   damit die Kategorien buendig unter den Zahlen darueber sitzen. */
.rail-head{width:calc(100% - var(--pad)*2);max-width:calc(1400px - var(--pad)*2);
  margin:0 auto var(--gap-xl);padding:0;
  display:flex;justify-content:space-between;align-items:flex-end;gap:var(--gap-l)}
.rail-head .hint{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  font-weight:700;text-align:right;line-height:1.9;flex:0 0 auto}
/* Die erste Karte startet auf derselben Kante wie die Kopfzeile darueber */
.track{display:flex;gap:clamp(12px,1.2vw,18px);will-change:transform;
  padding-left:max(var(--pad),calc((100% - 1400px)/2 + var(--pad)));padding-right:var(--pad)}
.cat{position:relative;flex:0 0 clamp(220px,20vw,300px);height:clamp(300px,46vh,430px);
  border:1px solid var(--line);border-radius:4px;padding:22px;display:flex;flex-direction:column;
  justify-content:space-between;gap:18px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,0));
  transition:border-color .45s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.cat .cbody{display:flex;flex-direction:column;gap:10px}
.cat::before{content:"";position:absolute;inset:0;background:var(--violet);opacity:0;
  transition:opacity .5s ease;z-index:0}
.cat:nth-child(4n+2)::before{background:var(--mint)}
.cat:nth-child(4n+3)::before{background:var(--cyan)}
.cat:nth-child(4n+4)::before{background:var(--blue)}
.cat:hover{border-color:transparent;transform:translateY(-6px)}
.cat:hover::before{opacity:1}
.cat *{position:relative;z-index:1;transition:color .35s ease}
.cat:hover .num,.cat:hover .cname,.cat:hover .ctext,.cat:hover .ccta{color:#000}
.cat:nth-child(4n+1):hover .num,.cat:nth-child(4n+1):hover .cname,
.cat:nth-child(4n+1):hover .ctext,.cat:nth-child(4n+1):hover .ccta,
.cat:nth-child(4n+4):hover .num,.cat:nth-child(4n+4):hover .cname,
.cat:nth-child(4n+4):hover .ctext,.cat:nth-child(4n+4):hover .ccta{color:#fff}
.cat:nth-child(4n+1):hover .ghost,.cat:nth-child(4n+4):hover .ghost{color:rgba(255,255,255,.16)}
.cat .num{font-size:10.5px;font-weight:800;letter-spacing:.18em;color:var(--dim)}
.cat .cname{font-size:clamp(16px,1.45vw,21px);font-weight:900;text-transform:uppercase;
  letter-spacing:-.025em;line-height:1.08}
.cat .ctext{font-family:Poppins,sans-serif;font-weight:300;font-size:12.5px;line-height:1.65;
  color:rgba(255,255,255,.56)}
.cat .ccta{margin-top:2px;font-size:9.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mint)}
/* Schattenziffer nach oben, damit sie dem Kurztext unten nicht ins Wort faellt.
   Sie fuellt zugleich die obere Haelfte der Karte, sonst steht dort ein Loch. */
.cat .ghost{position:absolute;right:-.03em;top:-.24em;z-index:0;pointer-events:none;
  font-size:clamp(124px,13vw,190px);font-weight:900;letter-spacing:-.06em;line-height:1;
  color:rgba(255,255,255,.045);transition:color .5s ease}
.cat:hover .ghost{color:rgba(0,0,0,.1)}
.rail-bar{width:calc(100% - var(--pad)*2);max-width:calc(1400px - var(--pad)*2);
  margin:auto auto clamp(30px,5vh,60px);height:2px;background:rgba(255,255,255,.09)}
.rail-bar i{display:block;height:100%;width:0;background:var(--grad)}

/* ---------- Ablauf ---------- */
#how{border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:80px 1.1fr 1fr;gap:clamp(16px,2vw,36px);
  padding:var(--gap-l) 0;border-top:1px solid var(--line);align-items:start;
  transition:background .4s ease,border-color .4s ease,padding .4s cubic-bezier(.16,1,.3,1)}
.step:last-child{border-bottom:1px solid var(--line)}
.step{border-left:3px solid transparent;padding-left:0}
.step:hover{background:rgba(255,255,255,.03);border-left-color:var(--mint);padding-left:18px}
.step:nth-child(2):hover{border-left-color:var(--cyan)}
.step:nth-child(3):hover{border-left-color:var(--violet)}
.step:nth-child(4):hover{border-left-color:#5c47c9}
.step .sn{font-size:clamp(24px,2.6vw,40px);font-weight:900;letter-spacing:-.04em;line-height:.85;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.step h3{font-size:clamp(17px,1.7vw,24px);font-weight:900;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1.12}

/* ---------- Galerie ---------- */
#gal{position:relative;height:300svh;padding:0}
.gal-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;
  align-items:end;justify-items:center;padding-bottom:clamp(48px,8vh,90px)}
.gal-sticky figure{position:absolute;inset:0;opacity:0;transform:scale(1.06);
  transition:opacity .8s ease,transform 1.2s cubic-bezier(.16,1,.3,1)}
.gal-sticky figure.on{opacity:1;transform:scale(1)}
/* Quadratische Fotos in einem breiten Rahmen: Ausschnitt nach oben ziehen,
   sonst schneidet der Rahmen den Personen die Koepfe ab. */
.gal-sticky img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.gal-sticky figure:nth-child(2) img{object-position:50% 12%}
.gal-sticky figure:nth-child(3) img{object-position:50% 15%}
.gal-sticky .shade{position:absolute;inset:0;z-index:2;
  background:linear-gradient(to top,rgba(5,5,5,.9),rgba(5,5,5,.3) 55%,rgba(5,5,5,.6))}
.gal-cap{position:relative;z-index:3;text-align:center;padding:0 var(--pad)}
.gal-cap h2{font-size:clamp(32px,6.4vw,96px);max-width:none}
.gal-cap p{margin-top:16px;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  font-weight:800;color:var(--mint)}

/* ---------- Reservierung ---------- */
#save{position:relative;overflow:hidden;background:var(--deep)}
#save::before{content:"";position:absolute;left:50%;top:-20%;width:min(1000px,120vw);height:140%;
  transform:translateX(-50%);background:radial-gradient(closest-side,rgba(120,93,202,.5),transparent 70%);
  pointer-events:none}
#save .facts{background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.28)}
#save .facts>div{background:var(--deep)}
#save .facts .k,#save .eyebrow{color:rgba(255,255,255,.62)}
#save .form{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22)}
#save .field input,#save .field select{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)}
#save .form .fine,#save .field label{color:rgba(255,255,255,.6)}
.save-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-xl) clamp(40px,6vw,100px);
  align-items:start;position:relative}
.facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:var(--gap-l)}
.facts>div{background:#08080c;padding:clamp(18px,2vw,26px)}
.facts .k{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);font-weight:700}
.facts .v{margin-top:8px;font-size:clamp(15px,1.35vw,19px);font-weight:800;letter-spacing:-.02em}
.form{border:1px solid var(--line);border-radius:6px;padding:clamp(24px,3vw,40px);
  background:rgba(255,255,255,.02)}
.form h3{font-size:clamp(18px,1.9vw,26px);font-weight:900;text-transform:uppercase;letter-spacing:-.02em}
.form .fine{font-family:Poppins,sans-serif;font-weight:300;font-size:12.5px;line-height:1.7;
  color:var(--dim);margin-top:10px}
.field{margin-top:18px}
.field label{display:block;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:700;color:var(--dim);margin-bottom:8px}
.field input,.field select{width:100%;background:rgba(255,255,255,.04);color:#fff;
  border:1px solid var(--line);border-radius:4px;padding:14px 16px;
  font-family:Montserrat,sans-serif;font-size:14px;font-weight:600}
.field input::placeholder{color:rgba(255,255,255,.3);font-weight:400}
.field input:focus,.field select:focus{outline:none;border-color:var(--mint)}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.5) 50%),linear-gradient(135deg,rgba(255,255,255,.5) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px,6px 6px;
  background-repeat:no-repeat}
.field select option{background:#111}
.form .btn{margin-top:22px;width:100%;justify-content:center}
.form-ok{margin-top:14px;font-size:12.5px;font-weight:700;color:var(--mint);display:none;line-height:1.6}
.form-ok.show{display:block}

/* ---------- Tickets ---------- */
#tickets{border-top:1px solid var(--line)}
.tix{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.2vw,34px);
  padding-top:var(--gap-l);border-top:1px solid var(--line)}
.tix .tn{font-size:10.5px;font-weight:800;letter-spacing:.2em;margin-bottom:14px;color:var(--mint)}
.tix>div:nth-child(2) .tn{color:var(--cyan)}
.tix>div:nth-child(3) .tn{color:var(--violet)}
.tix>div:nth-child(4) .tn{color:#8f7ae0}
.tix h3{font-size:clamp(15.5px,1.4vw,20px);font-weight:900;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1.15}
.tix p{font-family:Poppins,sans-serif;font-weight:300;font-size:13.5px;line-height:1.75;
  color:rgba(255,255,255,.58);margin-top:10px}
.tix-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--gap-l);
  flex-wrap:wrap;margin-top:var(--gap-xl)}

/* ---------- Partner (helle Insel) ---------- */
#partner{background:var(--paper);color:#050505}
#partner .eyebrow{color:rgba(0,0,0,.48)}
#partner .lead{color:rgba(0,0,0,.66)}
.p-head{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-xl) clamp(40px,6vw,100px);align-items:end}
.p-blocks{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.2vw,18px);margin-top:var(--gap-xl)}
.p-blocks div{border:1px solid rgba(0,0,0,.13);border-radius:4px;padding:clamp(20px,2vw,28px);
  transition:background .45s ease,color .45s ease,border-color .45s ease}
.p-blocks div:nth-child(1):hover{background:var(--mint);border-color:var(--mint)}
.p-blocks div:nth-child(2):hover{background:var(--violet);border-color:var(--violet);color:#fff}
.p-blocks div:nth-child(3):hover{background:var(--cyan);border-color:var(--cyan)}
.p-blocks div:nth-child(4):hover{background:var(--blue);border-color:var(--blue);color:#fff}
.p-blocks div:hover p{opacity:.82}
.p-blocks h3{font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:10px}
.p-blocks p{font-family:Poppins,sans-serif;font-weight:300;font-size:13px;line-height:1.7;opacity:.68}
.p-note{margin-top:16px;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(0,0,0,.4)}
.agents{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.2vw,34px);margin-top:var(--gap-xl)}
.agent{border-top:2px solid #050505;padding-top:20px}
.agent h4{font-size:clamp(17px,1.7vw,24px);font-weight:900;text-transform:uppercase;letter-spacing:-.03em}
.agent p{font-family:Poppins,sans-serif;font-weight:300;font-size:13.5px;line-height:1.75;
  color:rgba(0,0,0,.62);margin-top:10px}
#partner .btn{--bg:#050505;--fg:#fff}
#partner .btn:hover{color:#000}
#partner .btn.ghost{--bg:transparent;--fg:#050505;box-shadow:inset 0 0 0 1px rgba(0,0,0,.22)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:var(--gap-m) 0;
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  font-size:clamp(14.5px,1.5vw,20px);font-weight:800;text-transform:uppercase;
  letter-spacing:-.015em;transition:color .3s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--mint)}
.faq summary::after{content:"+";font-size:20px;font-weight:400;line-height:1;flex:0 0 auto;
  transition:transform .4s cubic-bezier(.16,1,.3,1)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 var(--gap-l)}

/* ---------- Abschluss ---------- */
#cta{border-top:1px solid var(--line);padding:0}
.cta-grid{display:grid;grid-template-columns:1fr 1fr}
.cta-grid>a{padding:var(--sec) var(--pad);position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--gap-xl)}
.cta-grid>a+a{border-left:1px solid var(--line)}
.cta-grid>a::before{content:"";position:absolute;inset:0;background:var(--grad);
  transform:translateY(100%);transition:transform .7s cubic-bezier(.16,1,.3,1);z-index:0}
.cta-grid>a:hover::before{transform:translateY(0)}
.cta-grid>a *{position:relative;z-index:1;transition:color .45s ease}
.cta-grid>a:hover *{color:#000}
.cta-grid h2{font-size:clamp(24px,3.2vw,46px);margin-top:var(--gap-m)}
.cta-grid p{margin-top:var(--gap-m)}
.cta-grid .go{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  display:flex;align-items:center;gap:10px}

/* ---------- Fuss ---------- */
footer{padding:var(--sec) 0 22px;border-top:1px solid var(--line)}
.f-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--gap-xl) clamp(30px,4vw,60px);align-items:start}
footer .flogo{height:36px;width:auto;margin-bottom:18px}
footer h4{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);
  font-weight:700;margin-bottom:16px}
footer ul{list-style:none;display:grid;gap:10px}
footer ul a{font-size:13.5px;font-weight:600;color:rgba(255,255,255,.72)}
footer ul a:hover{color:var(--mint)}
.f-bot{margin-top:var(--gap-xl);padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.32);font-weight:600}

/* ---------- Vorschau-Leiste ---------- */
#vk{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:800;
  display:flex;align-items:center;gap:5px;padding:6px;border-radius:100px;
  background:rgba(12,12,17,.88);backdrop-filter:blur(16px);
  box-shadow:0 12px 40px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.12)}
#vk b{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);padding:0 10px 0 12px}
#vk a{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;padding:9px 16px;border-radius:100px;color:rgba(255,255,255,.6);transition:.3s}
#vk s{width:1px;height:16px;background:currentColor;opacity:.2;margin:0 3px}
#vk a.on{background:var(--grad);color:#000}
#vk a:not(.on):hover{color:#fff;background:rgba(255,255,255,.08)}

/* ---------- Responsiv ---------- */
@media(max-width:1080px){
  .split,.save-grid,.p-head{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr;gap:var(--gap-l)}
  .tix{grid-template-columns:1fr 1fr}
  .p-blocks{grid-template-columns:1fr 1fr}
  .step{grid-template-columns:60px 1fr;row-gap:12px}
  .step p{grid-column:2}
  .f-top{grid-template-columns:1fr 1fr}
  .hero-facts{gap:14px 30px}
}
@media(max-width:820px){
  nav.main{display:none}
  .burger{display:block}
  .nav-cta .btn{display:none}
  .btn{width:100%;justify-content:center}
  .btn-row{gap:8px}
  .rail-head .hint{text-align:left}
  .track{margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad)}
  .tix-foot .btn,.hero-actions .btn{width:100%}
  .cta-grid{grid-template-columns:1fr}
  .cta-grid>a+a{border-left:0;border-top:1px solid var(--line)}
  .stats-grid{grid-template-columns:1fr;gap:var(--gap-l)}
  .tix{grid-template-columns:1fr}
  .p-blocks,.agents{grid-template-columns:1fr}
  .f-top{grid-template-columns:1fr}
  .cue{display:none}
  #hero .bg{inset:0}
  #cats{padding:var(--sec) 0}
  .rail-sticky{position:static;height:auto;padding-top:0}
  .rail-head{width:100%;max-width:none;padding:0 var(--pad)}
  .track{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;-webkit-overflow-scrolling:touch}
  .cat{scroll-snap-align:start;flex-basis:74vw;height:auto;min-height:340px}
  .rail-bar{display:none}
  .rail-head{flex-direction:column;align-items:flex-start}
  .rail-head .hint{text-align:left}
  #gal{height:250svh}
  .gal-sticky{height:86svh}
}
@media(max-width:520px){
  #vk b{display:none}
  #vk a{padding:8px 11px;font-size:9.5px;letter-spacing:.02em}
  #vk{bottom:12px;gap:2px;padding:4px}
  #vk s{margin:0 1px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  #hero h1 .ln>span{transform:none}
  .rv .w>i{transform:none}
  .fade{opacity:1;transform:none}
}

/* ============================================================
   Zusaetze fuer die Unterseiten
   ============================================================ */

/* ---------- Kopfbereich der Unterseiten ---------- */
.phero{position:relative;overflow:hidden;padding:clamp(104px,13vh,132px) 0 var(--sec);
  border-bottom:1px solid var(--line)}
.phero::before{content:"";position:absolute;left:50%;top:-40%;width:min(1100px,120vw);height:150%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(120,93,202,.22),transparent 70%)}
.phero .wrap{position:relative}
.phero h1{font-size:clamp(34px,6vw,86px);margin-top:var(--gap-m);max-width:16ch}
.phero .lead{margin-top:var(--gap-l)}
.phero .btn-row{margin-top:var(--gap-l)}
.crumbs{display:flex;gap:8px;align-items:center;font-size:10.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:var(--gap-m)}
.crumbs a:hover{color:var(--mint)}

/* ---------- Hinweiskasten ---------- */
.notiz{border:1px solid var(--line);border-left:3px solid var(--mint);border-radius:4px;
  padding:clamp(18px,2vw,26px);background:rgba(255,255,255,.02)}
.notiz h3{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
.notiz p{font-family:Poppins,sans-serif;font-weight:300;font-size:14px;line-height:1.75;
  color:rgba(255,255,255,.66)}
.notiz.violett{border-left-color:var(--violet)}

/* ---------- Kategorien als Liste (Unterseite) ---------- */
.katgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.2vw,18px)}
.katkarte{position:relative;display:flex;flex-direction:column;gap:12px;
  min-height:clamp(190px,18vw,230px);padding:clamp(20px,2vw,26px);
  border:1px solid var(--line);border-radius:5px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,0));
  transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .4s ease}
.katkarte::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .45s ease;
  background:var(--violet)}
.katkarte:nth-child(4n+2)::before{background:var(--mint)}
.katkarte:nth-child(4n+3)::before{background:var(--cyan)}
.katkarte:nth-child(4n+4)::before{background:var(--blue)}
.katkarte:hover{transform:translateY(-5px);border-color:transparent}
.katkarte:hover::before{opacity:1}
.katkarte>*{position:relative;z-index:1;transition:color .35s ease}
.katkarte:hover .knum,.katkarte:hover .kname,.katkarte:hover .ktext,.katkarte:hover .kcta{color:#000}
.katkarte:nth-child(4n+1):hover .knum,.katkarte:nth-child(4n+1):hover .kname,
.katkarte:nth-child(4n+1):hover .ktext,.katkarte:nth-child(4n+1):hover .kcta,
.katkarte:nth-child(4n+4):hover .knum,.katkarte:nth-child(4n+4):hover .kname,
.katkarte:nth-child(4n+4):hover .ktext,.katkarte:nth-child(4n+4):hover .kcta{color:#fff}
.katkarte .knum{font-size:10.5px;font-weight:800;letter-spacing:.18em;color:var(--dim)}
.katkarte .kname{font-size:clamp(16px,1.5vw,21px);font-weight:900;text-transform:uppercase;
  letter-spacing:-.025em;line-height:1.1}
.katkarte .ktext{font-family:Poppins,sans-serif;font-weight:300;font-size:13px;line-height:1.7;
  color:rgba(255,255,255,.56)}
.katkarte .kcta{margin-top:auto;padding-top:8px;font-size:10px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mint);display:flex;align-items:center;gap:7px;
  opacity:0;transform:translateY(6px);
  transition:opacity .35s ease,transform .4s cubic-bezier(.16,1,.3,1),color .35s ease}
.katkarte:hover .kcta{opacity:1;transform:none}

/* ---------- Nominierte ---------- */
.katblock{padding:var(--gap-l) 0;border-top:1px solid var(--line)}
.katkopf{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:var(--gap-l)}
.katkopf .katnum{font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--dim)}
.katkopf h2{font-size:clamp(18px,2vw,27px);font-weight:900;text-transform:uppercase;
  letter-spacing:-.025em;flex:1}
.katkopf .katstatus{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#000;background:var(--mint);padding:6px 12px;border-radius:100px}
.nomliste{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,16px)}
.nom{display:flex;align-items:center;gap:14px;padding:14px 16px;
  border:1px solid var(--line);border-radius:5px;background:rgba(255,255,255,.02)}
.nom-av{width:42px;height:42px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  font-weight:900;font-size:15px;color:#000;background:var(--grad)}
.nom-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.nom-txt b{font-size:14px;font-weight:800;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nom-txt i{font-style:normal;font-size:11.5px;color:var(--dim);font-weight:600}
.nom.leer{border-style:dashed;background:none}
.nom.leer .nom-av{background:rgba(255,255,255,.07);color:var(--dim)}
.nom.leer .nom-txt b{color:rgba(255,255,255,.5)}

/* ---------- Formulare auf eigenen Seiten ---------- */
.formseite{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--gap-xl) clamp(36px,5vw,80px);
  align-items:start}
.field textarea{width:100%;background:rgba(255,255,255,.04);color:#fff;
  border:1px solid var(--line);border-radius:4px;padding:14px 16px;min-height:120px;resize:vertical;
  font-family:Poppins,sans-serif;font-size:14px;font-weight:300;line-height:1.7}
.field textarea::placeholder{color:rgba(255,255,255,.3)}
.field textarea:focus{outline:none;border-color:var(--mint)}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pflicht{color:var(--mint)}

/* ---------- Kacheln fuer Seitenverweise ---------- */
.weiter{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px);
  margin-top:var(--gap-xl)}
.weiter a{border:1px solid var(--line);border-radius:5px;padding:clamp(20px,2.2vw,30px);
  display:flex;flex-direction:column;gap:12px;transition:background-color .4s ease,transform .4s cubic-bezier(.16,1,.3,1)}
.weiter a:hover{background:rgba(255,255,255,.04);transform:translateY(-4px)}
.weiter h3{font-size:clamp(16px,1.5vw,21px);font-weight:900;text-transform:uppercase;letter-spacing:-.02em}
.weiter p{font-family:Poppins,sans-serif;font-weight:300;font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.6)}
.weiter .pf{margin-top:auto;font-size:10.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mint)}

@media(max-width:1080px){
  .katgrid{grid-template-columns:1fr 1fr}
  .nomliste{grid-template-columns:1fr 1fr}
  .formseite{grid-template-columns:1fr}
  .weiter{grid-template-columns:1fr}
}
@media(max-width:640px){
  .katgrid,.nomliste{grid-template-columns:1fr}
  .field-2{grid-template-columns:1fr}
  .katkopf{gap:10px}
}

/* ---------- Aktive Seite im Menue ---------- */
nav.main a.hier{color:#fff}
nav.main a.hier::after{transform:scaleX(1)}
.rail-head .hint a:hover{color:var(--mint)}
.facts .v a:hover{color:var(--mint)}


/* ---------- Impressionen ---------- */
/* 12 Spalten, zwei Reihen a 5+4+3 und 4+3+5. Geht genau auf, keine Luecken. */
.galerie{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(6px,.8vw,12px);
  grid-auto-rows:clamp(150px,17vw,240px)}
.galerie figure{position:relative;overflow:hidden;border-radius:4px;background:#111}
.galerie figure:nth-child(1){grid-column:span 5}
.galerie figure:nth-child(2){grid-column:span 4}
.galerie figure:nth-child(3){grid-column:span 3}
.galerie figure:nth-child(4){grid-column:span 4}
.galerie figure:nth-child(5){grid-column:span 3}
.galerie figure:nth-child(6){grid-column:span 5}
/* Quadratische Fotos in liegenden Kacheln: Ausschnitt so weit nach oben, dass
   niemandem der Kopf abgeschnitten wird. Pro Foto einzeln geprueft. */
.galerie figure:nth-child(6) img{object-position:50% 14%}
.galerie img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;
  filter:saturate(.95);transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .5s ease}
.galerie figure:hover img{transform:scale(1.05);filter:saturate(1.1)}
.galerie figcaption{position:absolute;left:0;bottom:0;right:0;padding:14px 16px;
  font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  background:linear-gradient(to top,rgba(5,5,5,.85),transparent);
  opacity:0;transform:translateY(6px);transition:.4s cubic-bezier(.16,1,.3,1)}
.galerie figure:hover figcaption{opacity:1;transform:none}

/* Einzelbild als breiter Streifen */
.streifen{position:relative;overflow:hidden;border-radius:5px;
  height:clamp(200px,32vh,340px);background:#111;margin-top:var(--gap-xl)}
.streifen img{width:100%;height:100%;object-fit:cover;object-position:50% 34%}
/* sehr breiter Streifen, Gruppenfoto: Gesichter sitzen weiter oben */
.streifen.breit img{object-position:50% 20%}
.streifen figcaption{position:absolute;left:clamp(16px,2vw,26px);bottom:clamp(16px,2vw,26px);
  background:rgba(5,5,5,.6);backdrop-filter:blur(6px);padding:10px 16px;border-radius:100px;
  font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}

@media(max-width:820px){
  .galerie{grid-template-columns:repeat(2,1fr);grid-auto-rows:38vw}
  .galerie figure:nth-child(n){grid-column:span 1}
}