/* ============================================================
   UN/DONE — minimal white  ·  2026-09-29
   Weisse Seite, schwarzes Logo mit Glitch. Kein Hero-Foto.
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  background:#000;
  color:#fff;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;          /* nie horizontal, vertikal nur als Notausgang */
}
a{color:inherit;text-decoration:none;}

/* ============================================================
   PAGE — one screen, centred
   ============================================================ */
.page{
  min-height:100vh;           /* Fallback: iOS Safari < 15.4 kennt svh nicht */
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:max(28px,env(safe-area-inset-top)) 22px max(28px,env(safe-area-inset-bottom));
  position:relative;
  background:#000;
  overflow:hidden;
  animation:negflash 11s steps(1,end) infinite;
}
/* kurzer Negativ-Blitz, zweimal hintereinander, alle 11 s */
@keyframes negflash{
  0%,96.3%,100%  {filter:none;}
  96.4%,96.8%    {filter:invert(1);}
  96.9%,97.5%    {filter:none;}
  97.6%,97.9%    {filter:invert(1);}
  98.0%          {filter:none;}
}
.page > *{position:relative;z-index:2;}

/* ============================================================
   HINTERGRUNDVIDEO — fuellt den Bildschirm
   ============================================================ */
.bg-video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  pointer-events:none;
}



/* ============================================================
   LOGO + GLITCH
   The base <img> jitters; two <img> copies clip into displaced
   horizontal slices. Monochrome black — colour RGB-split renders
   unreliably in Safari/headless.
   ============================================================ */
.logo{
  position:relative;
  width:min(46vw,380px);
  margin-top:clamp(50px,14vh,170px);   /* tiefer, damit die Linien oben frei stehen */
  aspect-ratio:2190/344;
  animation:jitter 6.5s steps(1,end) infinite;
}
.logo-img{
  display:block;width:100%;height:100%;
  object-fit:contain;
  filter:invert(1);                    /* schwarzes PNG -> weiss */
  user-select:none;-webkit-user-drag:none;
}
/* displaced copies of the wordmark — real <img>, not a CSS mask
   (masked background-color renders unreliably in Safari/headless) */
.logo-fx{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:contain;
  opacity:0;
  filter:invert(1);
  pointer-events:none;user-select:none;-webkit-user-drag:none;
}
.logo-fx-a{animation:sliceA 6.5s steps(1,end) infinite;}
.logo-fx-b{animation:sliceB 6.5s steps(1,end) infinite;}

/* base wordmark nudges out of place for two short beats */
@keyframes jitter{
  0%,90.4%,100%   {transform:translate3d(0,0,0);}
  90.5%,91.2%     {transform:translate3d(-5px,0,0);}
  91.3%,92.4%     {transform:translate3d(3px,0,0);}
  92.5%,93.4%     {transform:translate3d(-2px,1px,0);}
  93.5%           {transform:translate3d(0,0,0);}
  97.6%,98.2%     {transform:translate3d(4px,0,0);}
  98.3%           {transform:translate3d(0,0,0);}
}
/* upper slice tears right */
@keyframes sliceA{
  0%,90.4%        {opacity:0;clip-path:inset(0 0 100% 0);}
  90.5%,91.4%     {opacity:1;clip-path:inset(14% 0 62% 0);transform:translate3d(14px,0,0);}
  91.5%,92.4%     {opacity:1;clip-path:inset(38% 0 44% 0);transform:translate3d(-18px,0,0);}
  92.5%,93.4%     {opacity:1;clip-path:inset(6% 0 78% 0);transform:translate3d(9px,0,0);}
  93.5%,97.5%     {opacity:0;}
  97.6%,98.2%     {opacity:1;clip-path:inset(52% 0 26% 0);transform:translate3d(-12px,0,0);}
  98.3%,100%      {opacity:0;}
}
/* lower slice tears the other way */
@keyframes sliceB{
  0%,90.4%        {opacity:0;clip-path:inset(100% 0 0 0);}
  90.5%,91.4%     {opacity:1;clip-path:inset(66% 0 12% 0);transform:translate3d(-16px,0,0);}
  91.5%,92.4%     {opacity:1;clip-path:inset(74% 0 4% 0);transform:translate3d(12px,0,0);}
  92.5%,93.4%     {opacity:1;clip-path:inset(46% 0 34% 0);transform:translate3d(-7px,0,0);}
  93.5%,97.5%     {opacity:0;}
  97.6%,98.2%     {opacity:1;clip-path:inset(20% 0 58% 0);transform:translate3d(10px,0,0);}
  98.3%,100%      {opacity:0;}
}
@media (prefers-reduced-motion:reduce){
  .page{animation:none;}
  .bg-video{display:none;}
  .logo,.logo-fx{animation:none;}
  .logo-fx{opacity:0;}
}





/* ============================================================
   SLOGAN + TAGLINE
   ============================================================ */
.slogan{
  margin-top:clamp(24px,3.8vw,40px);
  font-size:clamp(11px,1.2vw,14px);
  font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  text-align:center;line-height:1.35;
}

.tagline{
  margin-top:clamp(12px,1.6vw,18px);
  font-size:clamp(9px,1vw,11px);
  font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  text-align:center;opacity:.8;
}

.nextline{
  margin-top:10px;
  font-size:clamp(9px,1vw,11px);
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  text-align:center;opacity:.62;
}

/* XXL DARKROOM — eigene Zeile, heller als die Datumszeile */
.highlight{
  margin-top:10px;
  font-size:clamp(11px,1.35vw,13px);
  font-weight:800;letter-spacing:.3em;text-transform:uppercase;
  text-align:center;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btns{
  margin-top:clamp(30px,5vw,52px);
  display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,3vw,38px);
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:clamp(118px,13vw,150px);
  padding:12px 22px;
  border:2px solid #fff;
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  transition:background .18s,color .18s;
}
.btn:hover{background:#fff;color:#000;}
.btn-solid{background:#fff;color:#000;}
.btn-solid:hover{background:transparent;color:#fff;}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  position:absolute;left:0;right:0;
  bottom:max(26px,env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:center;
  gap:clamp(16px,2.6vw,28px);
  padding:0 20px;
}
.foot a{
  font-weight:700;text-transform:uppercase;
  padding:6px 2px;
  transition:opacity .18s;
}
.foot-info{font-size:11px;letter-spacing:.2em;opacity:.9;}
.foot-legal-link{font-size:9px;letter-spacing:.14em;opacity:.45;}
.foot a:hover{opacity:1;}

/* ============================================================
   ZWEISPRACHIG — beide Sprachen stehen im HTML, eine wird versteckt.
   Ohne data-lang (also auch ohne JavaScript) bleibt Englisch stehen.
   Die sichtbare Variante bekommt KEINE display-Regel, damit sie ihren
   natuerlichen Wert behaelt (block, flex, dl-Zeile ...).
   ============================================================ */
html:not([data-lang="de"]) [data-l="de"]{display:none;}
html[data-lang="de"] [data-l="en"]{display:none;}

/* Sprachumschalter */
.lang{display:flex;align-items:center;gap:10px;margin-top:4px;}
.lang-btn{
  background:none;border:0;padding:5px 3px;cursor:pointer;
  font:inherit;color:inherit;
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  opacity:.45;transition:opacity .18s;
}
.lang-btn:hover{opacity:.9;}
.lang-btn[aria-current="true"]{opacity:1;text-decoration:underline;text-underline-offset:4px;}
.lang-sep{font-size:12px;opacity:.3;}

/* ============================================================
   OVERLAYS
   ============================================================ */
.lov{
  position:fixed;inset:0;z-index:90;
  background:#000;
  display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(56px,10vh,110px) 22px 60px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;
}
/* :target = ohne JavaScript ueber die Adresse, .open = mit JavaScript */
.lov:target,.lov.open{opacity:1;visibility:visible;}
.lov-x{
  position:fixed;z-index:3;
  top:max(6px,env(safe-area-inset-top));
  right:max(8px,env(safe-area-inset-right));
  width:52px;height:52px;                    /* Daumen-taugliche Flaeche */
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;color:#fff;font:400 34px/1 Arial,sans-serif;cursor:pointer;
  text-decoration:none;-webkit-tap-highlight-color:transparent;
}
.lbox{width:100%;max-width:640px;}
.lt{
  font-size:clamp(26px,5vw,40px);font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:26px;
}
.lh{
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  margin:26px 0 8px;opacity:.55;
}
.lp{font-size:15px;line-height:1.65;}
.lp-big{font-size:clamp(20px,3.4vw,28px);font-weight:800;letter-spacing:.08em;}
.lp a{text-decoration:underline;text-underline-offset:3px;}
/* Eckdaten-Tabelle im Ticket-Panel */
.facts{margin-top:26px;border-top:1px solid rgba(255,255,255,.2);}
.facts > div{
  display:flex;gap:18px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.2);
}
.facts dt{
  flex:0 0 108px;
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  opacity:.5;
}
.facts dd{font-size:15px;font-weight:700;line-height:1.4;}

.note{margin-top:26px;font-size:14px;line-height:1.6;opacity:.7;}

.lrow{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap;}
.lbtn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 22px;border:2px solid #fff;
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  transition:background .18s,color .18s;
}
.lbtn:hover{background:#fff;color:#000;}
.lbtn-inv{background:#fff;color:#000;}
.lbtn-inv:hover{background:transparent;color:#fff;}

/* ============================================================
   LEGAL PAGE (legal.html) — Impressum/Datenschutz ohne JS
   ============================================================ */
.legalpage{
  max-width:640px;margin:0 auto;
  padding:clamp(30px,7vh,64px) 22px max(60px,env(safe-area-inset-bottom));
}
.legalpage section + section{margin-top:64px;}
.back{
  display:inline-block;margin-bottom:38px;
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  opacity:.6;transition:opacity .18s;
}
.back:hover{opacity:1;}
.back-bottom{margin:56px 0 0;}

/* ============================================================
   MOBILE
   ============================================================ */
/* Hochkant laeuft die eigene Handy-Fassung des Videos (siehe Skript in index.html).
   Die Zeichnung sitzt dort oben, deshalb rutscht der Textblock nach unten. */
@media (max-aspect-ratio:1/1){
  .page{justify-content:flex-end;padding-bottom:clamp(100px,18vh,180px);}
  .logo{margin-top:0;}
}
@media (max-width:640px){
  /* Textblock schmaler halten: enger gesperrt, kleiner, mit Luft zum Rand */
  .logo{width:62vw;margin-top:clamp(30px,9vh,90px);}
  .slogan{font-size:11px;letter-spacing:.12em;margin-top:22px;}
  .tagline{font-size:9px;letter-spacing:.16em;margin-top:11px;}
  .nextline{font-size:9px;letter-spacing:.14em;margin-top:8px;}
  .highlight{font-size:11px;letter-spacing:.24em;margin-top:8px;}
  .btns{margin-top:30px;}
  .btns{gap:10px;}
  .btn{min-width:150px;padding:12px 24px;}
  .foot{gap:14px;}
  .facts > div{flex-direction:column;gap:4px;}
  .facts dt{flex:none;}
  .lrow .lbtn{flex:1 1 auto;}
}
@media (max-height:560px){
  .foot{position:static;margin-top:32px;}
  .page{justify-content:flex-start;padding-top:40px;}
}