/* LAIN Welt V15 · Comeback «Andersch als ihr». Baut auf lain.css und index-welt.css auf, ersetzt nichts.
   Neu: Weiche (jeder findet seinen Weg), 12 Abende (Clips nach Nicos Plan), Crew, Frauenfeld, Leiste unten.
   Gleiche Mittel wie V14: Archivo breit, Instrument Serif für LAINs Zeilen, Mono-Etiketten, Gold nur als Licht. */

/* ---------- Weiche: vier Tore, jedes ein laufendes Hochformat ---------- */
.weiche { position: relative; z-index: 2; background: var(--ink); padding: clamp(70px, 9vw, 130px) var(--rand) clamp(60px, 8vw, 110px); }
.weiche .kopfreihe { display: flex; justify-content: space-between; align-items: end; gap: 18px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 52px); }
.weiche .kopfreihe .zeile { color: var(--gold2); }
.weiche-tore { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 1vw, 14px); }
@media (max-width: 960px) { .weiche-tore { grid-template-columns: repeat(2, 1fr); } }
.wtor { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; background: var(--ink2); isolation: isolate; }
.wtor video, .wtor img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  filter: grayscale(1) contrast(1.12) brightness(.62); transform: scale(1.06); transition: filter .7s var(--weich), transform 1.4s var(--weich); }
.wtor::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(9,9,13,.15) 30%, rgba(9,9,13,.92) 100%); }
.wtor:hover video, .wtor:hover img, .wtor:focus-visible video { filter: grayscale(.15) contrast(1.08) brightness(.8); transform: scale(1); }
.wtor .nr { position: absolute; top: 14px; left: 16px; }
.wtor .wer { position: absolute; top: 14px; right: 16px; text-align: right; }
.wtor .unten { position: absolute; left: 16px; right: 16px; bottom: 18px; display: flex; flex-direction: column; gap: 10px; }
.wtor .wort { font-size: clamp(30px, 3.3vw, 52px); line-height: .86; }
/* Wort passt sich der Kachelbreite an, damit «Booking» (längstes Wort) auf jeder Breite ganz steht */
.wtor { container-type: inline-size; } .wtor .wort { font-size: min(clamp(30px, 3.3vw, 52px), 12.5cqi); }
.wtor .rahmen { position: absolute; inset: 0; border: 1px solid transparent; transition: border-color .4s; pointer-events: none; }
.wtor:hover .rahmen { border-color: var(--gold); }
.wtor .goldlinie { display: block; height: 1px; background: var(--gold); transform: scaleX(.18); transform-origin: left; transition: transform .7s var(--weich); }
.wtor:hover .goldlinie { transform: scaleX(1); }

/* ---------- 12 Abende ---------- */
.abende { overflow: hidden; }
.abende .kopfreihe { display: grid; grid-template-columns: 7fr 5fr; gap: 24px 60px; align-items: end; }
@media (max-width: 860px) { .abende .kopfreihe { grid-template-columns: 1fr; } }
.balken { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-top: 26px; }
.balken i { height: 3px; background: var(--linie); }
.balken i.da { background: var(--gold); }
.wand { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(190px, 19vw, 280px); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: clamp(30px, 4vw, 54px) calc(var(--rand) * -1) 0; padding: 0 var(--rand) 16px; scrollbar-width: thin; scrollbar-color: var(--gold) transparent; }
.clip { position: relative; aspect-ratio: 9 / 16; overflow: hidden; scroll-snap-align: start; background: var(--ink2); border: 1px solid var(--linie); margin: 0; }
.clip video, .clip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip .nr { position: absolute; top: 10px; left: 12px; font: 900 44px/1 var(--breit); font-variation-settings: "wdth" 125; letter-spacing: -.04em; text-shadow: 0 2px 18px rgba(0,0,0,.7); }
.clip .info { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 12px 12px; background: linear-gradient(transparent, rgba(9,9,13,.94)); display: flex; flex-direction: column; gap: 4px; }
.clip .info b { font: 900 20px/1 var(--breit); font-variation-settings: "wdth" 115; text-transform: uppercase; }
.clip.zu img { filter: grayscale(1) blur(14px) brightness(.42); transform: scale(1.18); }
.clip.zu .schloss { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.clip.zu .schloss b { font: 900 clamp(34px, 3.2vw, 48px)/.9 var(--breit); font-variation-settings: "wdth" 125; text-transform: uppercase; }
.clip.naechster { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 70px rgba(202,175,62,.22); }
.clip.naechster::after { content: "Hüt 18:00"; position: absolute; top: 12px; right: 12px; background: var(--gold); color: var(--ink); font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 6px 7px; }
.clip.offen::after { content: "Läuft"; position: absolute; top: 12px; right: 12px; border: 1px solid var(--gold); color: var(--gold); font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 5px 6px; }
.fahrplan { list-style: none; margin: clamp(30px, 4vw, 50px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linie); }
.fahrplan li { padding: 18px 18px 0 0; display: flex; flex-direction: column; gap: 8px; }
.fahrplan li b { font: 900 clamp(18px, 1.8vw, 26px)/1.05 var(--breit); font-variation-settings: "wdth" 115; text-transform: uppercase; }
.fahrplan li.jetzt b { color: var(--gold); }
.fahrplan li.vorbei { opacity: .4; }
@media (max-width: 760px) { .fahrplan { grid-template-columns: 1fr 1fr; row-gap: 18px; } }

/* ---------- Crew ---------- */
.crew { overflow: hidden; }
.crew .raster2 { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(30px, 5vw, 90px); align-items: start; }
@media (max-width: 960px) { .crew .raster2 { grid-template-columns: 1fr; } }
.crew .riesig { font-size: clamp(64px, 11.5vw, 200px); }
.crew .zeile { color: var(--ink); }
.stufen3 { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linie-d); margin-top: clamp(28px, 4vw, 48px); }
.stufen3 > div { padding: 20px 18px 0 0; display: flex; flex-direction: column; gap: 8px; }
.stufen3 b { font: 900 clamp(24px, 2.4vw, 36px)/1 var(--breit); font-variation-settings: "wdth" 120; text-transform: uppercase; }
.stufen3 > div:last-child b { color: #9a8424; }
.stufen3 p { margin: 0; font-size: 14px; color: rgba(9,9,13,.7); }
@media (max-width: 640px) { .stufen3 { grid-template-columns: 1fr; } }
.krone { list-style: none; padding: 0; margin: clamp(26px, 3vw, 40px) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.krone li { border-top: 1px solid var(--linie-d); padding: 12px 0; display: grid; grid-template-columns: 30px 1fr; font-size: 14px; }
.krone li span:first-child { font: 500 11px/1.9 var(--mono); color: #6b675f; }
@media (max-width: 640px) { .krone { grid-template-columns: 1fr; } }
.passkarte { background: var(--ink); color: var(--bone); padding: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; gap: 18px; position: relative; }
.pass { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; align-items: end; border: 1px solid var(--gold); padding: 18px; position: relative; overflow: hidden; }
.pass::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(226,201,106,.22) 48%, transparent 66%); transform: translateX(-100%); animation: glanz 4.5s var(--weich) infinite; pointer-events: none; }
@keyframes glanz { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.pass img { width: 52px; height: 52px; object-fit: contain; grid-row: span 2; }
.pass .nummer { font: 400 clamp(46px, 4.4vw, 64px)/.9 var(--mono); color: var(--gold); letter-spacing: -.04em; }
.pass .name { font: 900 18px/1 var(--breit); font-variation-settings: "wdth" 120; text-transform: uppercase; }
.pass .tag { grid-column: 1 / -1; margin-top: 8px; }
.cform { display: flex; flex-direction: column; gap: 18px; }
.cform .feld { display: flex; flex-direction: column; gap: 8px; }
.cform input[type=text], .cform input[type=email] { font: 400 19px/1.4 var(--breit); color: var(--bone); background: none; border: 0; border-bottom: 1px solid var(--linie); padding: 6px 0 12px; outline: none; border-radius: 0; }
.cform input:focus { border-bottom-color: var(--gold); }
.cform .haken { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: rgba(236,232,223,.8); cursor: pointer; }
.cform .haken[hidden] { display: none; }
.cform .haken a { text-decoration: underline; text-underline-offset: 2px; }
.cform .haken input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--gold); flex: none; }
.cform .knopf { justify-content: space-between; }
.knopf[hidden] { display: none; }
.meldung15 { display: none; font: 500 12px/1.6 var(--mono); letter-spacing: .04em; border-left: 2px solid var(--gold); padding: 8px 12px; }
.meldung15.da { display: block; }
.oder { display: flex; gap: 12px; align-items: center; }
.oder::before, .oder::after { content: ""; flex: 1; height: 1px; background: var(--linie); }

/* ---------- Danke: der nächste Schritt direkt nach dem Eintragen ---------- */
.danke { display: none; flex-direction: column; gap: 14px; }
.passkarte.fertig .cform { display: none; }
.passkarte.fertig .danke { display: flex; }
.danke .knopf { justify-content: space-between; }

/* ---------- Frauenfeld ---------- */
.frauenfeld { position: relative; overflow: hidden; isolation: isolate; }
.frauenfeld > figure { position: absolute; inset: 0; z-index: -1; }
/* V6: Verlauf hinter Städte-Liste und Formular, damit Schrift im Video den kleinen Text nicht kreuzt; oben bleibt das Bild offen */
.frauenfeld > figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,9,13,0) 18%, rgba(9,9,13,.84) 40%, rgba(9,9,13,.94) 100%); }
.frauenfeld > figure img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(.34); }
.frauenfeld .riesig { font-size: clamp(56px, 11vw, 196px); }
.frauenfeld .riesig .kontur { -webkit-text-stroke: 1.5px var(--gold); }
.frauenfeld .raster2 { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(30px, 5vw, 90px); margin-top: clamp(30px, 4vw, 56px); align-items: start; }
@media (max-width: 960px) { .frauenfeld .raster2 { grid-template-columns: 1fr; } }
.staedte { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.staedte span { border: 1px solid var(--linie); padding: 6px 10px; }

/* ---------- Leiste unten: genau ein nächster Schritt ---------- */
.leiste { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: stretch;
  background: rgba(9,9,13,.94); border-top: 1px solid var(--gold); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transform: translateY(105%); transition: transform .5s var(--weich); padding-bottom: env(safe-area-inset-bottom); }
.leiste.da { transform: none; }
.leiste .li { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 10px var(--rand); min-width: 0; }
.leiste .li b { font: 900 clamp(15px, 1.4vw, 19px)/1.1 var(--breit); font-variation-settings: "wdth" 115; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leiste .knopf { border: 0; border-left: 1px solid var(--gold); padding: 0 clamp(18px, 3vw, 36px); flex: none; }
.fuss { padding-bottom: 90px; }

@media (prefers-reduced-motion: reduce) { .pass::before { animation: none; } }

/* ---------- Hook-Film: LAINs Zeilen schlagen Wort für Wort ein, harter Schnitt mit Blitz ---------- */
.hookfilm { position: relative; z-index: 2; height: 640vh; background: var(--ink); }
.hookfilm .buehne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.hookfilm video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 0;
  filter: grayscale(1) contrast(1.25) brightness(.5); transform: scale(1.08); transition: opacity .12s linear, transform 6s linear; }
.hookfilm video.an { opacity: 1; transform: scale(1); }
.hookfilm .buehne::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 50%, transparent 30%, rgba(9,9,13,.85) 100%), repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); }
.hf-zeile { position: absolute; left: var(--rand); right: var(--rand); top: 50%; transform: translateY(-50%); margin: 0; text-align: center;
  font: 900 clamp(46px, 9.6vw, 176px)/.95 var(--breit); font-variation-settings: "wdth" 125; letter-spacing: -.035em; text-transform: uppercase; color: var(--bone);
  text-shadow: 0 6px 60px rgba(0,0,0,.6); pointer-events: none; }
.hf-zeile .w { display: inline-block; opacity: 0; transform: scale(1.9); filter: blur(12px); }
.hf-zeile.da .w { opacity: 1; transform: none; filter: none; transition: opacity .12s linear, transform .38s cubic-bezier(.2,1.4,.4,1), filter .25s linear; }
.hf-zeile .w.gold { color: var(--gold); }
.hf-zeile.weg .w { opacity: 0; transition: opacity .1s linear; }
.hookfilm .hf-kopf { position: absolute; top: 90px; left: var(--rand); right: var(--rand); display: flex; justify-content: space-between; gap: 12px; }
.hookfilm .hf-fuss { position: absolute; bottom: 92px; left: var(--rand); right: var(--rand); display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.hf-punkte { display: flex; gap: 6px; }
.hf-punkte i { width: 22px; height: 2px; background: var(--linie); }
.hf-punkte i.da { background: var(--gold); }
.hf-ende { opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .5s var(--weich); pointer-events: none; }
.hf-ende.da { opacity: 1; transform: none; pointer-events: auto; }
.blitz15 { position: fixed; inset: 0; z-index: 90; background: #fff; opacity: 0; pointer-events: none; }
.blitz15.an { animation: blitz15 .2s ease-out; }
@keyframes blitz15 { 0% { opacity: .4; } 100% { opacity: 0; } }

/* ---------- Clip-Kino: offener Clip gross, mit Ton ---------- */
.clip.offen { cursor: pointer; }
.clip.offen .ton { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.9); width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid var(--gold); background: rgba(9,9,13,.55); display: grid; place-items: center; opacity: 0; transition: opacity .3s, transform .3s var(--weich); }
.clip.offen:hover .ton, .clip.offen:focus-visible .ton { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.clip.offen .ton::before { content: ""; border-left: 16px solid var(--gold); border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 5px; }
@media (hover: none) { .clip.offen .ton { opacity: 1; transform: translate(-50%, -50%) scale(.8); } }
.kino { position: fixed; inset: 0; z-index: 95; background: rgba(5,5,8,.94); display: none; align-items: center; justify-content: center; gap: clamp(18px, 4vw, 60px); padding: 20px; }
.kino.offen { display: flex; }
.kino .rahmen9 { position: relative; height: min(86vh, 960px); aspect-ratio: 9 / 16; max-width: 92vw; background: #000; border: 1px solid var(--gold); }
.kino video { width: 100%; height: 100%; object-fit: cover; display: block; }
.kino .fortschritt15 { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.15); }
.kino .fortschritt15 i { display: block; height: 100%; width: 0; background: var(--gold); }
.kino .seite { display: flex; flex-direction: column; gap: 14px; max-width: 320px; }
.kino .seite .wort { font-size: clamp(40px, 4.4vw, 70px); line-height: .88; }
.kino .zu { position: absolute; top: 16px; right: 18px; background: none; border: 1px solid var(--linie); color: var(--bone); width: 44px; height: 44px; font: 400 22px/1 var(--mono); cursor: pointer; }
.kino .tonknopf { position: absolute; left: 12px; top: 12px; }
@media (max-width: 760px) {
  .kino { flex-direction: column; justify-content: flex-start; padding: 64px 14px 14px; gap: 14px; }
  .kino .rahmen9 { height: auto; width: min(92vw, 62vh * .5625); }
  .kino .seite { max-width: none; width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .kino .seite .wort, .kino .seite p { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hf-zeile .w { opacity: 1; transform: none; filter: none; } .blitz15 { display: none; } }

/* ---------- Comeback-Fragen: jede Story-Frage hat hier ihre lange Antwort, eigener Link je Frage ---------- */
.fragen .kopfreihe { display: grid; grid-template-columns: 7fr 5fr; gap: 24px 60px; align-items: end; margin-bottom: clamp(26px, 4vw, 50px); }
@media (max-width: 860px) { .fragen .kopfreihe { grid-template-columns: 1fr; } }
.fliste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie-d); }
.frage15 { border-bottom: 1px solid var(--linie-d); scroll-margin-top: 90px; }
.frage15 > button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: 54px 150px 1fr 40px; gap: 16px; align-items: center; padding: 22px 0; }
.frage15 > button:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.frage15 .fnr { font: 500 12px/1 var(--mono); color: #6b675f; }
.frage15 .ftext { font: 900 clamp(22px, 2.7vw, 42px)/1 var(--breit); font-variation-settings: "wdth" 118; text-transform: uppercase; letter-spacing: -.02em; transition: transform .4s var(--weich); }
.frage15 > button:hover .ftext { transform: translateX(10px); }
.frage15 .fplus { justify-self: end; width: 30px; height: 30px; position: relative; }
.frage15 .fplus::before, .frage15 .fplus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; background: currentColor; transform: translate(-50%, -50%); transition: transform .4s var(--weich); }
.frage15 .fplus::after { transform: translate(-50%, -50%) rotate(90deg); }
.frage15.auf15 .fplus::after { transform: translate(-50%, -50%) rotate(0deg); }
.frage15.zu15 { color: rgba(9,9,13,.38); }
.frage15.zu15 .ftext { -webkit-text-stroke: 1px rgba(9,9,13,.45); color: transparent; }
.frage15.heute { background: linear-gradient(90deg, rgba(202,175,62,.16), transparent 70%); }
.frage15.heute .fnr { color: #9a8424; }
.frage15.ziel { animation: ziel 2.4s var(--weich) 1; }
@keyframes ziel { 0%, 30% { background: rgba(202,175,62,.35); } 100% { background: transparent; } }
.fantwort { display: none; padding: 0 0 34px 220px; }
.frage15.auf15 .fantwort { display: grid; grid-template-columns: 1fr minmax(180px, 280px); gap: clamp(20px, 4vw, 60px); align-items: start; }
@media (max-width: 860px) { .frage15 > button { grid-template-columns: 40px 1fr 30px; } .frage15 .fdatum { grid-column: 2; grid-row: 2; } .frage15 .ftext { grid-column: 2; grid-row: 1; } .frage15 .fplus { grid-row: 1 / 3; grid-column: 3; } .fantwort { padding-left: 0; } .frage15.auf15 .fantwort { grid-template-columns: 1fr; } }
.fantwort blockquote { margin: 0; font: italic 400 clamp(26px, 3vw, 44px)/1.12 var(--serif); }
.fantwort .quelle { margin-top: 12px; }
.fantwort .offen15 { border-left: 2px solid var(--gold); padding: 6px 0 6px 16px; max-width: 54ch; }
.fantwort .offen15 p { margin: 6px 0 0; }
.fantwort .fmedien { position: relative; aspect-ratio: 9 / 16; background: var(--ink); overflow: hidden; }
.fantwort .fmedien video, .fantwort .fmedien img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wahl2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wahl2 button { all: unset; cursor: pointer; position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: var(--ink); border: 1px solid transparent; }
.wahl2 button video { width: 100%; height: 100%; object-fit: cover; display: block; }
.wahl2 button span { position: absolute; left: 10px; right: 10px; bottom: 10px; color: var(--bone); }
.wahl2 button.gewaehlt { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.zeilenwahl { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.zeilenwahl button { all: unset; cursor: pointer; display: block; width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--linie-d); font: italic 400 clamp(18px, 1.8vw, 24px)/1.25 var(--serif); }
.zeilenwahl button:hover { border-color: var(--ink); }
.zeilenwahl button.gewaehlt { background: var(--ink); color: var(--gold); border-color: var(--ink); }
.orte { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.orte span { border: 1px solid var(--linie-d); padding: 6px 10px; }
.fcover img { filter: blur(26px) brightness(.7); transform: scale(1.1); transition: filter 1.2s var(--weich), transform 1.2s var(--weich); }
.frage15.auf15 .fcover.frei img { filter: none; transform: none; }
.fteilen { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }

/* Stange-Tor: Standbild mit langsamem Schub, damit es neben den Videos nicht steht */
.wtor img.schub { animation: schub 14s ease-in-out infinite alternate; }
@keyframes schub { from { transform: scale(1.06); } to { transform: scale(1.18) translateY(-2%); } }
/* Frauenfeld: Hintergrund läuft, Titel mit RGB-Versatz wie in den Edits */
.frauenfeld > figure video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(.32); }
.frauenfeld .riesig.rgb { text-shadow: -3px 0 rgba(255,40,60,.55), 3px 0 rgba(40,200,255,.45); animation: rgb 3.2s steps(1) infinite; }
@keyframes rgb { 0%, 88% { text-shadow: -3px 0 rgba(255,40,60,.55), 3px 0 rgba(40,200,255,.45); } 90% { text-shadow: -9px 0 rgba(255,40,60,.8), 9px 0 rgba(40,200,255,.7); transform: translateX(2px); } 94% { text-shadow: 6px 0 rgba(255,40,60,.7), -6px 0 rgba(40,200,255,.6); transform: translateX(-2px); } }
@media (prefers-reduced-motion: reduce) { .wtor img.schub, .frauenfeld .riesig.rgb { animation: none; } }


/* ---------- Ehr-Punkte: zwei Zähler (Ehr = Rangliste, sinkt nie; Guthaben = einlösen), Top 10, Einlösen ---------- */
.rangliste .kopfreihe { display: grid; grid-template-columns: 7fr 5fr; gap: 24px 60px; align-items: end; margin-bottom: clamp(30px, 4vw, 56px); }
@media (max-width: 860px) { .rangliste .kopfreihe { grid-template-columns: 1fr; } }
.konto { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; border: 1px solid var(--gold); padding: 18px; }
.konto > div { display: flex; flex-direction: column; gap: 6px; }
.konto b { font: 400 clamp(46px, 5vw, 72px)/.9 var(--mono); color: var(--gold); letter-spacing: -.04em; transition: transform .3s var(--weich); }
.konto b.puls { transform: scale(1.12); }
.konto p { grid-column: 1 / -1; margin: 14px 0 0; color: var(--ash); }
.drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
@media (max-width: 960px) { .drei { grid-template-columns: 1fr; } }
.drei h3 { margin: 0 0 14px; }
.punkteliste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.punkteliste li { display: grid; grid-template-columns: 64px 1fr; gap: 4px 14px; padding: 13px 0; border-bottom: 1px solid var(--linie); align-items: baseline; }
.punkteliste li b { font: 400 22px/1 var(--mono); color: var(--gold); grid-row: span 2; }
.punkteliste li .tag { color: var(--ash); }
.punkteliste.iiloese li { grid-template-columns: 64px 1fr auto; align-items: center; }
.punkteliste.iiloese li b { grid-row: auto; }
.punkteliste.iiloese .knopf { padding: 8px 12px; font-size: 10px; }
.punkteliste.iiloese li.geht .knopf { border-color: var(--gold); color: var(--gold); }
.nie { margin-top: 14px; color: var(--ash); }
.top10 { list-style: none; margin: 0 0 14px; padding: 0; border-top: 1px solid var(--linie); }
.top10 li { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linie); align-items: center; }
.top10 .platz { font: 500 12px/1 var(--mono); color: var(--ash); }
.top10 .wer { font: 900 18px/1 var(--breit); font-variation-settings: "wdth" 115; text-transform: uppercase; color: rgba(236,232,223,.35); }
.top10 .ehr { font: 400 16px/1 var(--mono); color: var(--ash); }
.top10 li.top3 .platz, .top10 li.top3 .ehr { color: var(--gold); }
.top10 li.top3 .wer { color: transparent; -webkit-text-stroke: 1px var(--gold); }
.top10 li.du { background: linear-gradient(90deg, rgba(202,175,62,.18), transparent); }
.top10 li.du .wer { color: var(--bone); -webkit-text-stroke: 0; }
.chip { display: inline-block; font: 500 9px/1 var(--mono); letter-spacing: .12em; padding: 4px 6px; margin-left: 8px; border: 1px solid currentColor; vertical-align: middle; opacity: .85; }
.plus15 { position: fixed; z-index: 96; left: 50%; bottom: 96px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--gold); color: var(--ink); font: 900 22px/1 var(--breit); font-variation-settings: "wdth" 120; text-transform: uppercase; padding: 14px 20px; letter-spacing: .02em; }
.plus15.da { animation: plus15 1.8s var(--weich) 1; }
@keyframes plus15 { 0% { opacity: 0; transform: translate(-50%, 20px) scale(.9); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 20% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -14px); } }
.pass .konto-mini { grid-column: 1 / -1; display: flex; gap: 16px; margin-top: 6px; }


/* Rangliste im Wartemodus (keine Speicherung): Zahlen und Einlösen ruhen, sichtbar als «startet» */
.rangliste.wartet .top10, .rangliste.wartet .iiloese { opacity: .35; pointer-events: none; }
.rangliste.wartet [data-kontohinweis] { color: var(--gold); }

/* Schalter Teilnahmebedingungen (Wächter-Veto 18.10.): Rangliste, Stufen und Top 3 bleiben unsichtbar,
   bis Joels Teilnahmebedingungen online sind. Einschalten: <html class="tb-an"> in index.html. Design bleibt unverändert. */
html:not(.tb-an) [data-tb] { display: none !important; }

/* ---------- 25.10.: nichts verschwindet unter der Leiste unten ---------- */
/* Sprungziele (Menü, «Wiiter») landen unter dem Kopf und über der Leiste */
html { scroll-padding-top: calc(var(--kopf) + 8px); scroll-padding-bottom: 72px; }
/* Tore sind bildschirmhoch: Text unten muss über der Leiste stehen */
.tor .worte { bottom: calc(clamp(24px, 5vw, 56px) + 64px); }
/* Knopftext bricht nicht mitten im Namen um */
.anfragen .links, .anfragen form { min-width: 0; }
@media (min-width: 520px) { .anfragen .knopf { white-space: nowrap; } }