/* Die Tuer /modell/ (Bahn T Onboarding, Vertrag STAFFEL/onboarding/VERTRAG.md). Neu gestaltet am 08.10.2026 abends (Laeufer
   ONB_T_03), Raster und Feinschliff am 09.10.2026 (Bahn D). Eigene Klassen tu-*, die alten Regeln (ein-*, tuer-*) in
   css/schaufenster.css greifen hier nicht.
   Raster   wie die Startseite (landing/seite.css .lp-b1): 5 vw Rand, ab 1500 px der Rahmen des Kopfes (css/kopf.css .lp-nav-in),
            eine Ueberschrift fuer alle drei Bilder (66 px auf 1440 wie die Startseite), jedes Bild fuellt den Schirm zwischen
            Kopf und Unterkante, der Fuss folgt erst beim Scrollen.
   Auftakt  zuerst nur die Scheibe mittig auf Weiss, ohne Text. Sie dreht sich in ihre Ruhelage und gleitet in das Logo im
            Kopf (Landung in js/tuer.js). Dann baut sich Bild 1 gestaffelt auf: Frage, zwei Wahlkarten, Filmkarte.
   Bild 1   links die Frage und zwei gleichwertige Wahlkarten, rechts die Filmkarte der Startseite. Oberkante der Frage und
            Oberkante der Filmkarte, Unterkante der Wahlkarten und Unterkante der Filmzeile liegen auf je einer Linie.
   Bild 2/3 Wahl und Universen im selben Raster, Zurueck klar lesbar, Erklaerfenster als ruhige Karte, Universen als gleich
            hohe Kacheln mit Haken.
   Material nur aus css/glas.css, keine weiten Schatten und keine Unschaerfe auf Flaechen. Steuerung in js/tuer.js. */

body[data-seite="eingang"] .tu{flex:1 0 auto;display:flex;flex-direction:column}
.tu{position:relative;min-height:100vh;min-height:100svh;color:#0A0A0A;transition:opacity .2s ease;
  --tu-rand:max(5vw,calc((100vw - 1400px) / 2 + 34px));
  --tu-gross:clamp(36px,4.58vw,80px);
  --tu-luft:clamp(28px,2.6vw,44px);
  --tu-grau:rgba(10,10,10,.62);
  --tu-linie:rgba(10,10,10,.1)}
.tu.tu-geht{opacity:0}

/* Drei Bilder, je eines sichtbar (data-bild an main). --tu-kopf ist die gemessene Hoehe des Kopfes (js/tuer.js). */
.tu-bild{display:none;flex:1 0 auto;box-sizing:border-box;padding:calc(var(--tu-kopf,var(--kopf,106px)) + 3.8svh) var(--tu-rand) 4.8svh;
  animation:tu-ein .42s ease both}
.tu[data-bild="1"] .tu-b1{display:grid}
.tu[data-bild="2"] .tu-b2,.tu[data-bild="3"] .tu-b3{display:flex}
@keyframes tu-ein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Auftakt: 0 bis 0,9 s dreht sich die Scheibe in die Ruhelage (rote Marke oben wie im Logo), dann gleitet sie in das Logo
   im Kopf (js/tuer.js misst das Ziel) und der weisse Grund blendet aus. Ohne Skript geht die Schicht nach 1,8 s selbst.
   Die Frage beginnt erst, wenn die Scheibe fast im Kopf ist, damit sie nicht durch den Text fliegt. */
.tu-auftakt{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:#FFFFFF;cursor:pointer;
  animation:tu-grund .45s ease .9s both,tu-fort .01s linear 1.8s both}
.tu.tu-kurz .tu-auftakt,.tu.tu-ab .tu-auftakt{display:none}
.tu-flug{width:112px;height:112px;transition:transform .62s cubic-bezier(.65,0,.25,1),opacity .4s ease}
.tu.tu-blass .tu-flug{opacity:0}
.tu-scheibe{display:block;width:100%;height:100%;color:#0A0A0A;animation:tu-dreh .9s cubic-bezier(.3,.1,.12,1) both}
@keyframes tu-dreh{0%{opacity:0;transform:rotate(-300deg) scale(.92)}22%{opacity:1}100%{opacity:1;transform:rotate(0deg) scale(1)}}
@keyframes tu-grund{to{background-color:rgba(255,255,255,0)}}
@keyframes tu-fort{to{visibility:hidden}}

/* Gestaffelter Aufbau von Bild 1: Frage, Wahlkarten, Filmkarte. Nur Einblenden (backwards), damit Zeigen und Kino danach
   frei sind. tu-ab (Klick im Auftakt) startet den Aufbau sofort, tu-steht (fertig) und tu-da (zurueck von Bild 2) nehmen
   ihn ganz heraus; nach der Rueckkehr blendet Bild 1 als Ganzes ein. */
.tu-b1{animation:none}
.tu-b1 .tu-auf{animation:tu-auf .7s cubic-bezier(.2,.7,.2,1) backwards}
.tu-b1 .tu-frage{animation-delay:1.32s}
.tu-b1 #tu-gefuehrt{animation-delay:1.46s}
.tu-b1 #tu-selbst{animation-delay:1.54s}
.tu-b1 .tu-film{animation-delay:1.66s}
.tu.tu-ab .tu-b1 .tu-auf{animation-name:tu-auf-k}
.tu.tu-ab .tu-b1 .tu-frage{animation-delay:0s}
.tu.tu-ab .tu-b1 #tu-gefuehrt{animation-delay:.1s}
.tu.tu-ab .tu-b1 #tu-selbst{animation-delay:.18s}
.tu.tu-ab .tu-b1 .tu-film{animation-delay:.3s}
.tu.tu-da .tu-b1{animation:tu-ein .42s ease both}
.tu.tu-steht .tu-b1 .tu-auf,.tu.tu-da .tu-b1 .tu-auf{animation:none}
@keyframes tu-auf{from{opacity:0;transform:translateY(16px)}}
@keyframes tu-auf-k{from{opacity:0;transform:translateY(16px)}}

/* Eine Ueberschrift fuer alle drei Bilder */
.tu-frage{margin:0;font-family:var(--font-head);font-weight:800;font-size:var(--tu-gross);line-height:1.03;letter-spacing:-.032em;
  color:#0A0A0A;text-wrap:pretty;transition:font-size .45s ease}
.tu-frage:focus{outline:none}

/* Bild 1: links Frage und Wahlkarten, rechts die Filmkarte (Breite --film wie masse() der Startseite, js/tuer.js). Beide
   Spalten strecken sich auf dieselbe Hoehe, die Wahlkarten nehmen den Rest, so schliessen Ober und Unterkante buendig. */
.tu-b1{grid-template-columns:minmax(0,1fr) var(--film,clamp(320px,36.1vw,560px));column-gap:5vw;align-items:stretch;align-content:center;
  transition:grid-template-columns .45s ease,column-gap .45s ease,padding .45s ease}
.tu-links{display:flex;flex-direction:column;align-items:stretch;min-width:0}
.tu-b1 .tu-frage{max-width:10em}

/* Zwei Wahlkarten, gleichwertig: helles Glas, oben Liniensymbol mit dem Rot des Signets und Pfeil im Ring, unten Titel und
   Zeile. Zeigen oder Fokus hebt die Karte und fuellt sie dunkel (Schicht ::before aus --glas-tief). */
.tu-wahl{flex:1 0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:var(--tu-luft)}
.tu-wk{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto auto;
  grid-template-areas:"sym pfeil" ". ." "titel titel" "zeile zeile";column-gap:12px;min-height:150px;
  box-sizing:border-box;margin:0;padding:22px 22px 24px 24px;text-align:left;font-family:var(--font-head);color:var(--glas-ink);
  cursor:pointer;border-radius:var(--glas-ecke-karte);background:var(--glas-hell);border:1px solid var(--glas-rand-hell);
  box-shadow:var(--glas-kante-hell),var(--glas-kontur),var(--glas-wurf);-webkit-tap-highlight-color:transparent;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,color .22s ease}
.tu-wk::before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:var(--glas-tief);border:1px solid var(--glas-rand-tief);
  box-shadow:var(--glas-kante-tief),var(--glas-kontur-tief);opacity:0;transition:opacity .22s ease;pointer-events:none}
.tu-wk>*{position:relative}
.tu-sym{grid-area:sym;display:block;width:44px;height:44px;margin:-2px 0 0 -3px}
.tu-wk-t{grid-area:titel;align-self:end;margin-top:18px;font-size:clamp(20px,1.67vw,26px);font-weight:700;line-height:1.12;letter-spacing:-.022em}
.tu-wk small{grid-area:zeile;align-self:start;margin-top:7px;font-size:16px;font-weight:500;line-height:1.3;letter-spacing:0;opacity:.62}
.tu-pfeil{grid-area:pfeil;align-self:start;justify-self:end;box-sizing:content-box;width:20px;height:20px;padding:10px;border-radius:50%;
  color:rgba(10,10,10,.55);box-shadow:inset 0 0 0 1px rgba(10,10,10,.14);
  transition:color .22s ease,box-shadow .22s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.tu-wk:focus{outline:none}
.tu-wk:focus-visible,.tu-wk:active{color:var(--glas-papier)}
.tu-wk:focus-visible{transform:translateY(-4px);box-shadow:var(--glas-kante-hell),var(--glas-kontur),var(--glas-wurf-hoch)}
.tu-wk:focus-visible::before,.tu-wk:active::before{opacity:1}
.tu-wk:focus-visible .tu-pfeil,.tu-wk:active .tu-pfeil{color:var(--glas-papier);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);transform:translateX(3px)}
.tu-wk:focus-visible small{opacity:.74}
@media (hover:hover){
  .tu-wk:hover{transform:translateY(-4px);color:var(--glas-papier);box-shadow:var(--glas-kante-hell),var(--glas-kontur),var(--glas-wurf-hoch)}
  .tu-wk:hover::before{opacity:1}
  .tu-wk:hover .tu-pfeil{color:var(--glas-papier);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);transform:translateX(3px)}
  .tu-wk:hover small{opacity:.74}
}
/* Filmende: beide Wahlkarten gleich stark hervorgehoben (js/tuer.js setzt tu-hervor an #tuwege) */
#tuwege.tu-hervor .tu-wk{animation:tu-puls 1.2s ease 2;box-shadow:var(--glas-kante-hell),0 0 0 2px rgba(200,53,26,.8),var(--glas-wurf)}
@keyframes tu-puls{0%,100%{transform:none}45%{transform:translateY(-4px) scale(1.02)}}

/* Filmkarte: Regeln der Startseite (pitch_video/landing/web/karte.css), hier fuer .tu-karte. Die Zeile darunter nennt nur
   Film und Dauer (das Standbild traegt den Titel) und startet den Film wie ein Klick auf die Karte. */
.tu-film{min-width:0}
.tu-karte{--sp-ecke:17px;padding:9px;border-radius:26px;background:var(--glas-hell);border:1px solid var(--glas-rand-hell);
  box-shadow:var(--glas-kante-hell),var(--glas-kontur),var(--glas-wurf)}
.tu-karte .sp-dauer{right:12px;bottom:12px;padding:4px 10px;border-radius:var(--glas-ecke);background:var(--glas-tief);
  border:1px solid var(--glas-rand-tief);-webkit-backdrop-filter:var(--glas-unschaerfe);backdrop-filter:var(--glas-unschaerfe);
  box-shadow:var(--glas-kante-tief),var(--glas-kontur-tief);color:var(--glas-papier);font-size:13px;font-weight:600}
.tu-karte .spieler{--sp-kino:platz}
.tu-karte .spieler .sp-kinok{display:inline-flex}
.tu-zeile{display:flex;align-items:center;gap:12px;margin:14px 0 0;padding:0 4px;border:0;border-radius:10px;background:none;
  font:inherit;color:#0A0A0A;text-align:left;cursor:pointer}
.tu-zeile:focus-visible{outline:2px solid rgba(10,10,10,.55);outline-offset:3px}
.tu-avatar{width:36px;height:36px;flex:none;color:#0A0A0A}
.tu-titel{font-family:var(--font-head);font-size:clamp(16px,1.39vw,22px);font-weight:600;line-height:1.25;letter-spacing:-.01em}
@media (hover:hover){.tu-zeile:hover .tu-titel{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}}
html.spieler-kino-platz .tu-zeile{visibility:hidden}

/* Kino am Platz wie auf der Startseite: Filmspalte 62 vw, nie hoeher als das Bild; links die Frage kleiner, die Wahlkarten
   untereinander und schmal, frei und klickbar */
@media (min-width:701px){
  html.spieler-kino-platz .tu-b1{grid-template-columns:minmax(0,1fr) min(62vw,calc((100svh - var(--kopf) - 8.6svh - 18px) * 16 / 9 + 18px));
    column-gap:3.5vw;padding-left:5vw;padding-right:2.5vw;align-items:center}
  html.spieler-kino-platz .tu-b1 .tu-frage{font-size:clamp(24px,3.4vw,64px)}
  html.spieler-kino-platz .tu-wahl{flex:none;grid-template-columns:minmax(0,1fr);gap:12px}
  html.spieler-kino-platz .tu-wk{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;
    grid-template-areas:"sym titel pfeil" "sym zeile pfeil";column-gap:16px;min-height:0;padding:16px 18px;align-items:center}
  html.spieler-kino-platz .tu-sym{width:36px;height:36px;margin:0;align-self:center}
  html.spieler-kino-platz .tu-wk-t{margin-top:0}
  html.spieler-kino-platz .tu-wk small{margin-top:3px}
  html.spieler-kino-platz .tu-pfeil{align-self:center}
}
/* Schmale Fenster und Handy: Wahlkarten untereinander, Symbol links, Pfeil rechts */
@media (max-width:1100px){
  .tu-b1{align-items:center}
  .tu-wahl{flex:none;grid-template-columns:minmax(0,1fr);gap:12px}
  .tu-wk{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;grid-template-areas:"sym titel pfeil" "sym zeile pfeil";
    column-gap:16px;min-height:0;padding:16px 16px 16px 18px;align-items:center}
  .tu-sym{width:38px;height:38px;margin:0;align-self:center}
  .tu-wk-t{margin-top:0;font-size:19px}
  .tu-wk small{margin-top:3px;font-size:15px}
  .tu-pfeil{align-self:center;width:18px;height:18px;padding:9px}
}

/* Bild 2 und Bild 3: dasselbe Raster, Inhalt senkrecht mittig zwischen Kopf und Unterkante */
.tu-b2,.tu-b3{flex-direction:column;align-items:flex-start;justify-content:center}
.tu-b2 .tu-frage,.tu-b3 .tu-frage{max-width:15em}
.tu-zurueck{display:inline-flex;align-items:center;gap:8px;height:40px;margin:0 0 18px -12px;padding:0 14px 0 8px;border:0;border-radius:999px;
  background:none;font:inherit;font-family:var(--font-head);font-size:16px;font-weight:600;color:var(--tu-grau);cursor:pointer;
  transition:color .15s ease,background-color .15s ease}
.tu-zurueck:hover{color:#0A0A0A;background:rgba(10,10,10,.05)}
.tu-zurueck:focus-visible{outline:2px solid rgba(10,10,10,.55);outline-offset:2px}
.tu-zurueck svg{width:18px;height:18px}

/* Bild 2: zwei grosse Knoepfe aus Glas, darunter die Frage nach dem Unterschied mit Winkel, das Fenster haengt darunter und
   verschiebt nichts (Hoehe 0 am Desktop, am Handy im Fluss, weil der Inhalt dort oben beginnt) */
.tu-wege{display:flex;flex-wrap:wrap;gap:14px;margin-top:var(--tu-luft)}
.tu-weg{flex-direction:column;gap:0;min-width:272px;height:64px;padding:0 36px;font-size:19px}
.tu-weg span{display:block}
.tu-frag{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:8px 0;border:0;background:none;font:inherit;
  font-family:var(--font-head);font-size:17px;font-weight:600;color:rgba(10,10,10,.74);cursor:pointer;transition:color .15s ease}
.tu-frag::after{content:"";width:7px;height:7px;margin-top:-4px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;
  transform:rotate(45deg);transition:transform .2s ease,margin .2s ease}
.tu-frag[aria-expanded="true"]::after{transform:rotate(225deg);margin-top:4px}
.tu-frag:hover,.tu-frag[aria-expanded="true"]{color:#0A0A0A}
.tu-frag:focus-visible{outline:2px solid rgba(10,10,10,.55);outline-offset:3px;border-radius:6px}
.tu-erkl{position:relative;width:min(100%,572px);height:0}
.tu-fenster{position:absolute;left:0;right:0;top:12px;z-index:2;box-sizing:border-box;padding:20px 24px 22px;
  border-radius:var(--glas-ecke-karte);background:#FFFFFF;border:1px solid rgba(10,10,10,.08);box-shadow:var(--glas-kontur),var(--glas-wurf);
  font-size:17px;line-height:1.5;color:rgba(10,10,10,.74);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.tu-erkl.an .tu-fenster{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .18s ease}
.tu-satz{margin:0;text-wrap:pretty}
.tu-erkl.beide .tu-satz+.tu-satz{margin-top:14px;padding-top:14px;border-top:1px solid var(--tu-linie)}
.tu-wer{display:none;font-weight:700;color:#0A0A0A}
.tu-erkl.beide .tu-wer{display:inline}

/* Bild 3: neun gleich hohe Kacheln (3 mal 3), Name links, Haken rechts; gewaehlt im tiefen Glas wie .glas.wahl */
.tu-unis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:12px;width:min(100%,1000px);margin-top:var(--tu-luft)}
.tu-uni{justify-content:space-between;gap:14px;width:100%;min-height:64px;padding:12px 18px 12px 22px;border-radius:var(--glas-ecke-kachel);
  white-space:normal;text-align:left;font-size:17px;font-weight:600;line-height:1.2}
.tu-uni::after{content:"";flex:none;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(10,10,10,.24);
  background:no-repeat center/12px 12px}
.tu-uni[aria-pressed="true"]{background:var(--glas-tief);color:var(--glas-papier);border-color:var(--glas-rand-tief);
  box-shadow:var(--glas-kante-tief),var(--glas-kontur-tief),var(--glas-wurf)}
.tu-uni[aria-pressed="true"]:hover{box-shadow:var(--glas-kante-tief),var(--glas-kontur-tief),var(--glas-wurf-hoch)}
.tu-uni[aria-pressed="true"]::after{box-shadow:none;background-color:#FFFFFF;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3 4.9 8.7 9.6 3.5' fill='none' stroke='%230A0A0A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.tu-weiter{margin-top:var(--tu-luft);min-width:220px;height:60px;padding:0 40px;font-size:18px}

/* Handy: Rand wie die Kopfknoepfe (20 px), Inhalt beginnt unter dem Kopf; Frage, beide Wahlkarten, dann der Film; im Kino am
   Platz laeuft er randlos wie auf der Startseite */
@media (max-width:700px){
  .tu{--tu-rand:20px;--tu-gross:clamp(32px,10vw,42px);--tu-luft:24px}
  .tu-bild{padding:calc(var(--tu-kopf,var(--kopf,176px)) + 24px) var(--tu-rand) 36px}
  .tu-b1{grid-template-columns:minmax(0,1fr);align-content:start;align-items:start;row-gap:32px}
  .tu-b1 .tu-frage{max-width:none}
  .tu-flug{width:88px;height:88px}
  .tu-karte{--sp-ecke:15px;padding:7px;border-radius:22px}
  .tu-karte .sp-dauer{right:9px;bottom:9px;padding:3px 8px;font-size:12px}
  .tu-zeile{gap:10px;margin-top:12px}
  .tu-avatar{width:32px;height:32px}
  .tu-titel{font-size:17px}
  html.spieler-kino-platz .tu-b1 .tu-karte{margin:0 calc(-1 * var(--tu-rand));padding:0;border:0;border-radius:0;box-shadow:none;background:#000000;--sp-ecke:0px}
  .tu-b2,.tu-b3{justify-content:flex-start}
  .tu-zurueck{margin-bottom:10px}
  .tu-wege{flex-direction:column;align-items:stretch;width:100%;gap:12px}
  .tu-weg{min-width:0;width:100%;height:56px;font-size:17px}
  .tu-frag{margin-top:16px;font-size:16px}
  .tu-erkl{width:100%;height:auto}
  .tu-fenster{position:relative;top:auto;display:none;margin-top:10px;padding:16px 18px 18px;font-size:16px}
  .tu-erkl.an .tu-fenster{display:block}
  @starting-style{.tu-erkl.an .tu-fenster{opacity:0;transform:translateY(-6px)}}
  .tu-unis{grid-template-columns:1fr 1fr;grid-auto-flow:row dense;gap:10px}
  .tu-uni{min-height:54px;gap:10px;padding:10px 12px 10px 15px;font-size:15px}
  .tu-uni[data-u="SPDAUDP"]{grid-column:1 / -1}
  .tu-uni::after{width:18px;height:18px}
  .tu-weiter{width:100%;height:56px;font-size:17px}
}

/* Kleine Telefone (375 x 667): unter dem hohen Kopf etwas enger, damit das Erklaerfenster ganz im Bild aufgeht, ohne dass
   die Seite scrollt */
@media (max-width:700px) and (max-height:720px){
  .tu-bild{padding-top:calc(var(--tu-kopf,var(--kopf,176px)) + 12px)}
  .tu-zurueck{height:34px;margin-bottom:6px}
  .tu-wege{margin-top:16px;gap:8px}
  .tu-weg{height:48px}
  .tu-frag{margin-top:8px;padding:6px 0}
  .tu-fenster{margin-top:6px;padding:13px 16px 14px;font-size:15px;line-height:1.42}
  .tu-erkl.beide .tu-satz+.tu-satz{margin-top:10px;padding-top:10px}
}

/* Bewegung reduziert: kein Auftakt, kein gestaffelter Aufbau, nichts pulsiert */
@media (prefers-reduced-motion:reduce){
  .tu-auftakt{display:none}
  .tu-bild,.tu-auf,.tu-wk{animation:none!important}
  .tu,.tu-b1,.tu-frage,.tu-wk,.tu-wk::before,.tu-pfeil{transition:none}
}