:root{
  --pitch:#050405;
  --bone:#ece7e0;
  --dim:#6a6560;
  --faint:#3a3733;
  --blood:#b0121a;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;background:var(--pitch);overflow:hidden}
body{color:var(--bone);font-family:var(--mono);-webkit-font-smoothing:antialiased}
html.legal,html.legal body{height:auto;min-height:100%;overflow-y:auto}
a{color:inherit}

.skip{
  position:fixed;z-index:100;top:-100px;left:16px;
  background:var(--blood);color:var(--bone);padding:10px 16px;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-decoration:none;
  transition:top .2s ease;
}
.skip:focus{top:16px}

/* ---------------- stage ---------------- */
.plates{position:fixed;inset:0;z-index:0}
.plate{
  position:absolute;inset:0;
  opacity:0;
  transform:scale(1.06);
  transition:opacity .1s steps(2);
  overflow:hidden;
}
.plate picture{display:block;width:100%;height:100%}
.plate img{width:100%;height:100%;object-fit:cover;display:block}
.plate.on{opacity:1;animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.06) translate(0,0)}to{transform:scale(1.13) translate(-1.4%,-1.2%)}}

.scrim{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 620px 78% at 50% 50%,rgba(5,4,5,.72) 0%,rgba(5,4,5,.4) 55%,rgba(5,4,5,0) 85%),
    linear-gradient(180deg,rgba(5,4,5,.45) 0%,transparent 20%,transparent 78%,rgba(5,4,5,.6) 100%);
}
.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.36;mix-blend-mode:overlay}

/* ---------------- frame + hud ---------------- */
.frame{position:fixed;inset:16px;border:1px solid rgba(236,231,224,.09);z-index:20;pointer-events:none}
.tick{position:fixed;z-index:21;width:9px;height:9px;pointer-events:none;
  border-color:rgba(236,231,224,.34);border-style:solid;border-width:0}
.tick.a{top:16px;left:16px;border-top-width:1px;border-left-width:1px}
.tick.b{top:16px;right:16px;border-top-width:1px;border-right-width:1px}
.tick.c{bottom:16px;left:16px;border-bottom-width:1px;border-left-width:1px}
.tick.d{bottom:16px;right:16px;border-bottom-width:1px;border-right-width:1px}

.hud{position:fixed;z-index:22;font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.hud b{font-weight:400;color:var(--bone)}
.hud .br0{color:var(--faint)}
.tl{top:34px;left:36px}
.tr{top:34px;right:36px;text-align:right}
.bl{bottom:34px;left:36px}
.brr{bottom:34px;right:36px;text-align:right;display:flex;gap:16px;align-items:flex-end;flex-direction:column}
.hud a{color:var(--dim);text-decoration:none;transition:color .2s}
.hud a:hover,.hud a:focus-visible{color:var(--bone)}
.legal{display:flex;gap:18px}
.legal .on{color:#8c8781}
.legal button{
  font:inherit;letter-spacing:inherit;text-transform:inherit;
  color:var(--dim);background:none;border:none;padding:0;cursor:pointer;
  transition:color .2s;
}
.legal button:hover,.legal button:focus-visible{color:var(--bone)}
.legal button[aria-pressed="true"]{color:#8c8781}
.hud a:focus-visible,.legal button:focus-visible{outline:1px solid var(--blood);outline-offset:3px}

.count{font-size:clamp(11px,.75vw,15px);letter-spacing:.2em;color:var(--bone);margin-top:9px}
.count s{text-decoration:none;color:var(--blood)}

/* ---------------- stage: Logo oben, Menü darunter, zentriert ---------------- */
.stage{
  position:fixed;inset:0;z-index:10;
  display:flex;flex-direction:column;align-items:center;
  padding:32px 24px;
  overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(236,231,224,.25) transparent;
}
.stage::-webkit-scrollbar{width:6px}
.stage::-webkit-scrollbar-thumb{background:rgba(236,231,224,.25)}
/* margin:auto statt justify-content:center: zentriert wenn's passt, schneidet
   aber bei zu wenig Platz nichts oben ab (bleibt von oben scrollbar) */
.stage__inner{
  margin:auto 0;width:100%;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.mast{max-width:clamp(340px,min(40vw,44vh),640px);display:flex;flex-direction:column;align-items:center}
.mark{width:100%;height:auto;display:block;filter:brightness(2.15) contrast(1.14) saturate(.28);
  opacity:0;transform:translateY(14px)}
.lit .mark{opacity:1;transform:none;transition:opacity .5s ease .15s,transform .7s cubic-bezier(.2,.8,.3,1) .15s}
.strap{margin-top:20px;font-size:clamp(9px,.65vw,13px);letter-spacing:.44em;color:var(--dim);text-transform:uppercase;
  opacity:0}
.lit .strap{opacity:1;transition:opacity .5s ease .4s}

/* ---------------- announcement ---------------- */
.announce{
  margin-top:clamp(18px,2vw,32px);
  display:flex;align-items:center;justify-content:center;gap:12px;
  font-size:clamp(12px,1.15vw,17px);letter-spacing:.28em;text-transform:uppercase;
  color:var(--dim);opacity:0;
}
.lit .announce{opacity:1;transition:opacity .6s ease .95s}
.announce__dot{width:6px;height:6px;border-radius:50%;background:var(--blood);flex:none}
.announce__date{color:var(--blood)}

/* ---------------- index ---------------- */
.idx{list-style:none;width:100%;max-width:clamp(300px,42vw,460px);margin-top:clamp(20px,2.5vw,40px)}
.item{border-bottom:1px solid rgba(236,231,224,.08);opacity:0;position:relative}
.lit .item{opacity:1;transition:opacity .4s ease var(--d)}
.item:first-child{border-top:1px solid rgba(236,231,224,.08)}
.item > *{
  display:flex;align-items:baseline;justify-content:center;gap:12px;
  padding:clamp(10px,.7vw,16px) 0;text-decoration:none;color:var(--bone);
}
.t{font-size:clamp(13px,1.5vw,24px);letter-spacing:.2em;text-transform:uppercase;
   transition:letter-spacing .35s cubic-bezier(.2,.8,.3,1),color .25s}
.s{font-size:clamp(8.5px,.6vw,12px);letter-spacing:.2em;color:var(--faint);
   transition:color .25s}

.item a:hover .t,.item a:focus-visible .t{letter-spacing:.34em}
.item a:hover .s,.item a:focus-visible .s{color:var(--blood)}
.item a:focus-visible{outline:1px solid var(--blood);outline-offset:5px}
.item .dead{color:#4a4642;cursor:default}
.item .dead .t{color:#4a4642}

/* Haarlinie wächst symmetrisch aus der Mitte */
.item > *::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--blood);transform:scaleX(0);transition:transform .38s cubic-bezier(.2,.8,.3,1);
}
.item a:hover::after,.item a:focus-visible::after{transform:scaleX(1)}

/* ---------------- cookie consent ---------------- */
html.consent-open,html.consent-open body{overflow:hidden}
.consent-backdrop{
  position:fixed;inset:0;z-index:90;
  background:rgba(5,4,5,.78);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;transition:opacity .3s ease;
}
.consent-backdrop.on{opacity:1}
.consent{
  max-width:460px;width:100%;
  background:rgba(8,7,8,.98);border:1px solid rgba(236,231,224,.16);
  padding:clamp(26px,4vw,38px);
  display:flex;flex-direction:column;gap:22px;
  text-align:center;
  transform:translateY(10px);transition:transform .3s ease;
}
.consent-backdrop.on .consent{transform:translateY(0)}
.consent__text{font-size:12px;line-height:1.7;color:#cfc9c1}
.consent__text a{color:var(--bone);text-decoration:underline;text-underline-offset:3px}
.consent__text a:hover,.consent__text a:focus-visible{color:var(--blood)}
.consent__actions{display:flex;gap:12px;justify-content:center}
.consent__btn{
  flex:1;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:12px 20px;cursor:pointer;background:none;color:var(--bone);
  border:1px solid rgba(236,231,224,.3);
  transition:border-color .2s,background .2s;
}
.consent__btn:hover,.consent__btn:focus-visible{border-color:var(--bone)}
.consent__btn--accept{border-color:var(--blood);background:rgba(176,18,26,.15)}
.consent__btn--accept:hover,.consent__btn--accept:focus-visible{background:rgba(176,18,26,.32);border-color:var(--blood)}

/* ---------------- no-JS fallback ---------------- */
.ns{position:relative;z-index:30;max-width:640px;margin:14vh auto 0;padding:28px 26px;
  background:rgba(5,4,5,.82);border:1px solid rgba(236,231,224,.12)}
.ns__brand{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone);margin-bottom:18px}
.ns__links{list-style:none}
.ns__links li{border-bottom:1px solid rgba(236,231,224,.08);padding:10px 0;font-size:13px;letter-spacing:.08em}
.ns__links li span{color:var(--faint)}
.ns__links a{text-decoration:none;color:var(--bone)}
.ns__links a:hover,.ns__links a:focus-visible{color:var(--blood)}

/* ---------------- legal pages ---------------- */
.legal-copy{
  position:relative;z-index:10;max-width:640px;margin:0 auto;
  padding:min(18vh,180px) 40px 120px;
  text-align:center;
}
.legal-copy h1{font-size:15px;letter-spacing:.24em;text-transform:uppercase;color:var(--bone);margin-bottom:36px}
.legal-copy h2{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone);margin:34px 0 10px}
.legal-copy p{font-size:13px;line-height:1.9;color:#cfc9c1;margin:0 auto 14px;max-width:56ch}
.legal-copy p+h2{margin-top:34px}
.legal-copy .placeholder{color:var(--blood);border-bottom:1px dashed var(--blood)}
.legal-copy .note{font-size:11px;color:var(--dim);margin-bottom:28px}
.legal-copy a{color:var(--bone);text-decoration:underline;text-underline-offset:3px}
.legal-copy a:hover,.legal-copy a:focus-visible{color:var(--blood)}
.legal-copy__btn{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:10px 18px;cursor:pointer;background:none;color:var(--bone);
  border:1px solid rgba(236,231,224,.3);transition:border-color .2s;
}
.legal-copy__btn:hover,.legal-copy__btn:focus-visible{border-color:var(--bone)}
/* Deutsch ist Default und sichtbar auch ohne JS; Englisch blendet JS erst ein. */
[data-i18n-block="en"]{display:none}

@media (max-width:860px){
  html,body{overflow-y:auto}
  /* Feste Höhe statt inset:0 fürs Untere: sonst "springt" der Hintergrund beim
     Scrollen, weil mobile Browser die Adressleiste ein-/ausblenden und dabei
     kurzzeitig die Viewport-Höhe ändern. 100svh bleibt stabil (kleinste
     mögliche Höhe, Leiste immer eingerechnet), 100vh davor als Fallback für
     ältere Browser ohne dvh/svh-Unterstützung. */
  .plates,.scrim,.grain,.frame{height:100vh;height:100svh}
  .scrim{background:linear-gradient(180deg,rgba(5,4,5,.86) 0%,rgba(5,4,5,.5) 30%,rgba(5,4,5,.93) 76%)}
  .stage{position:relative;inset:auto;padding:96px 30px 130px;min-height:100%}
  .mast{max-width:none}
  .idx{max-width:none;margin-top:44px}
  .item > *{padding:15px 0}
  .t{font-size:15px}
  .tl,.tr{position:absolute}
  .bl{display:none}
  .brr{position:fixed;left:30px;right:30px;bottom:26px;flex-direction:row;
    justify-content:space-between;align-items:center;text-align:left;
    background:linear-gradient(180deg,transparent,rgba(5,4,5,.9) 40%);padding-top:16px}
  .frame{inset:10px}
  .legal-copy{padding:120px 24px 140px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .mark,.strap,.item{opacity:1;transform:none}
}