/* Phoenix-Adventskalender · Mini-App
   Smaragd Liquid Glass. Obsidian, Smaragd und Phönixgrün kommen aus dem Brandguide und gelten unabhängig vom Telegram-Thema.
   Schrift: Inter 4, variabel. Ab 32 px greift über die opsz-Achse der Display-Schnitt.
   Das Tracking richtet sich wie bei Apple nach der Größe: groß enger, klein offener.
   Glas: Unschärfe mit Sättigung (Vibrancy), Lichtkante oben links, Reflex unten rechts, Innenlicht und ein weicher Schatten.
   Bewegung: Federn per linear(), Auftritt mit Unschärfe wie in den Keynotes. Weniger Bewegung, Transparenz und Kontrast werden beachtet. */

@font-face { font-family: "Inter"; src: url("/fonts/inter-4.001-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* Marke (REBORN-Brandguide). Gold nur für die Adventssonntage und Heiligabend. */
  --ink: #040504; --panel: #0c0f0c; --panel-2: #111712;
  --smaragd: #15a85a; --smaragd-tief: #0b6b39; --phoenix: #46e879; --phoenix-hi: #a6f6c2; --minz: #dcfbe6; --minz-tinte: #03170b;
  --gold: #d8a93e; --gold-hi: #f2c96a; --glut: #ff7a59;
  --text: #f3f6f2; --text-2: rgba(236, 242, 235, .76); --mute: rgba(236, 242, 235, .58); --faint: rgba(236, 242, 235, .36);
  --line: rgba(255, 255, 255, .075); --line-2: rgba(255, 255, 255, .14);
  --link: var(--phoenix-hi);
  --schrift: "Inter", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  --code: ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;
  --zahl: "tnum";
  /* Lose und Codes: Null mit Schrägstrich, damit 0 und O nicht verwechselt werden */
  --code-zahl: "tnum", "zero";

  /* Liquid Glass: Füllung mit Glanz oben links, Unschärfe mit Sättigung, Innenlicht, Kante, Schatten */
  --glas: radial-gradient(130% 90% at 0% 0%, rgba(255, 255, 255, .09), transparent 50%), linear-gradient(180deg, rgba(255, 255, 255, .072), rgba(255, 255, 255, .026) 58%, rgba(255, 255, 255, .042));
  --glas-tint: radial-gradient(130% 100% at 0% 0%, rgba(166, 246, 194, .18), transparent 52%), linear-gradient(180deg, rgba(70, 232, 121, .17), rgba(21, 168, 90, .06) 62%, rgba(21, 168, 90, .1));
  --glas-filter: blur(22px) saturate(190%) brightness(1.05);
  --glas-innen: inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(0, 0, 0, .3), inset 0 16px 26px -22px rgba(255, 255, 255, .22), inset 0 -18px 28px -24px rgba(70, 232, 121, .22);
  --glas-tiefe: 0 1px 2px rgba(0, 0, 0, .35), 0 18px 40px -22px rgba(0, 0, 0, .9);
  --glas-rand: linear-gradient(145deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .15) 20%, rgba(255, 255, 255, .035) 45%, rgba(255, 255, 255, .03) 64%, rgba(166, 246, 194, .17) 86%, rgba(166, 246, 194, .34));
  --gold-rand: linear-gradient(145deg, rgba(255, 238, 196, .78), rgba(242, 201, 106, .3) 26%, rgba(216, 169, 62, .08) 58%, rgba(242, 201, 106, .44));

  /* Kurven: Haus-Kurve, starkes Ease-out, iOS-Sheet, zwei Federn (Dämpfung .62/.8, Antwort .32/.55 s) */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);
  --feder: linear(0, 0.073, 0.235, 0.434, 0.623, 0.785, 0.913, 1, 1.052, 1.077, 1.082, 1.075, 1.061, 1.044, 1.029, 1.016, 1.006, 0.999, 0.995, 0.993, 0.993, 0.994, 0.995, 0.997, 0.998, 0.999, 1, 1, 1);
  --feder-sanft: linear(0, 0.04, 0.134, 0.254, 0.382, 0.505, 0.617, 0.713, 0.792, 0.856, 0.906, 0.944, 0.971, 0.99, 1.002, 1.009, 1.013, 1.015, 1.015, 1.013, 1.012, 1.01, 1.008, 1.006, 1.005, 1.003, 1.002, 1.002, 1.001, 1.001, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; color: var(--text); font: 400 16px/1.47 var(--schrift); letter-spacing: -.011em; font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
/* Umgebungslicht: ohne Licht dahinter bricht Glas nichts. Steht fest und bewegt sich nicht, damit Scrollen ruhig bleibt
   und das Glas nicht dauernd neu rechnen muss. body bleibt ohne eigenen Hintergrund, sonst deckt er diese Ebenen zu. */
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background:
  radial-gradient(56% 30% at 50% 7%, rgba(70, 232, 121, .27), transparent 70%),
  radial-gradient(46% 34% at 2% 50%, rgba(21, 168, 90, .2), transparent 72%),
  radial-gradient(48% 34% at 100% 78%, rgba(11, 107, 57, .34), transparent 72%),
  radial-gradient(76% 32% at 50% 106%, rgba(21, 168, 90, .15), transparent 72%),
  linear-gradient(180deg, #050a06, #040504 46%, #030403); }
/* Feines Korn gegen Farbstufen in den Verläufen */
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .04; background-size: 200px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='200' height='200' filter='url(%23k)'/></svg>"); }
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--phoenix); outline-offset: 3px; }
a { color: var(--link); text-decoration-color: rgba(166, 246, 194, .45); text-underline-offset: 3px; }
::selection { background: rgba(70, 232, 121, .35); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

main { max-width: 520px; margin: 0 auto; padding: 22px 18px calc(30px + env(safe-area-inset-bottom)); min-height: 100vh; }

/* ---------- Glas: eine Materialfamilie. Große Flächen sind dicker (mehr Unschärfe, tieferer Schatten). */
.stand, .banner, .sponsoren, .check, .kachel, .zahlen div, .sponsorinfo, .preiskarte, .ergebnis, .hinweisbox, .schritte {
  position: relative; background: var(--glas); box-shadow: var(--glas-innen), var(--glas-tiefe);
  -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter);
}
/* Lichtkante als Verlaufsrand: oben links hell, in der Mitte fast weg, unten rechts ein grüner Reflex */
.stand::after, .banner::after, .sponsoren::after, .preiskarte::after, .ergebnis::after, .check::after, .schritte::after,
.t::after, .knopf.zweit::after, .antw button::before, .eyebrow::after, .karte .zu-knopf::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: var(--glas-rand);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}

/* ---------- Laden, Fehler, Nur-Telegram */
.laden { min-height: 70vh; display: grid; place-content: center; justify-items: center; gap: 16px; color: var(--mute); font-size: 14px; font-weight: 500; }
.laden img { border-radius: 15px; box-shadow: 0 0 44px -6px rgba(70, 232, 121, .6); animation: atmen 1.6s var(--ease) infinite alternate; }
@keyframes atmen { from { opacity: .62; transform: scale(.97); } to { opacity: 1; transform: none; } }
.mitte { min-height: 72vh; display: grid; place-content: center; justify-items: center; text-align: center; gap: 12px; padding: 0 8px; }
.mitte h1 { margin: 0; }
.mitte p { color: var(--text-2); margin: 0; max-width: 34ch; }

/* ---------- Typografie: Display-Schnitt für Titel, Text-Schnitt für alles ab 16 px abwärts */
.eyebrow { position: relative; width: fit-content; margin: 0 auto; display: flex; align-items: center; gap: 8px; padding: 6px 13px 6px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: -.002em; color: var(--minz);
  background: var(--glas); -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter); box-shadow: var(--glas-innen), 0 8px 20px -12px rgba(0, 0, 0, .9); }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--phoenix); box-shadow: 0 0 0 3px rgba(70, 232, 121, .16), 0 0 10px rgba(70, 232, 121, .95); }
h1 { margin: 16px 0 0; text-align: center; font-size: 42px; font-weight: 700; line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; }
/* Verlauf von Weiß in Phönixgrün, wie Apple seine Produktnamen setzt */
h1 em, .verlauf { font-style: normal; color: transparent; padding: 0 .03em; margin: 0 -.03em;
  background: linear-gradient(180deg, #f6fff9 0%, #c3f9d6 28%, #6bee97 60%, #22bd66 100%); -webkit-background-clip: text; background-clip: text; }
h2 { font-size: 29px; font-weight: 700; line-height: 1.08; letter-spacing: -.026em; margin: 8px 0 12px; text-wrap: balance; }
h3 { font-size: 16px; font-weight: 600; letter-spacing: -.012em; margin: 0 0 6px; }

/* ---------- Phönix: Bühne mit Lichthof, der mit jeder Glut-Stufe heller wird */
.buehne { position: relative; margin: 6px auto 0; max-width: 320px; }
.buehne::before { content: ""; position: absolute; left: 4%; right: 4%; top: 2%; bottom: -2%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(70, 232, 121, .38), rgba(21, 168, 90, .12) 55%, transparent);
  opacity: var(--hof, .38); transform: scale(var(--hof-gross, .9)); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.buehne.g1 { --hof: .52; --hof-gross: .95; }
.buehne.g2 { --hof: .66; --hof-gross: 1; }
.buehne.g3 { --hof: .82; --hof-gross: 1.05; }
.buehne.g4 { --hof: 1; --hof-gross: 1.1; }
.phoenix { position: relative; display: block; width: 100%; max-width: 300px; margin: 0 auto; overflow: visible; }
.fed { transition: fill .5s var(--ease), stroke .5s var(--ease), opacity .5s var(--ease); }
.fed.leer { fill: rgba(234, 238, 232, .045); stroke: rgba(234, 238, 232, .17); stroke-width: .7; }
.fed.voll { fill: url(#smaragd); stroke: rgba(196, 250, 214, .4); stroke-width: .35; }
.fed.neu { animation: glimm 1.3s var(--ease-out) backwards; }
@keyframes glimm { 0% { filter: brightness(2.2) drop-shadow(0 0 7px rgba(196, 250, 214, .95)); } 100% { filter: none; } }
.fluegel { transition: filter .9s var(--ease); }
.glut1 .fluegel { filter: drop-shadow(0 0 3px rgba(70, 232, 121, .35)); }
.glut2 .fluegel { filter: drop-shadow(0 0 5px rgba(70, 232, 121, .5)); }
.glut3 .fluegel { filter: drop-shadow(0 0 7px rgba(70, 232, 121, .65)); }
.glut4 .fluegel { filter: drop-shadow(0 0 9px rgba(166, 246, 194, .75)) drop-shadow(0 0 20px rgba(21, 168, 90, .6)); }

/* ---------- Zahlen */
.stand { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 24px; margin: 14px 0 12px; padding: 3px 0; }
.stand > div { padding: 13px 6px 12px; text-align: center; position: relative; }
.stand > div + div::before { content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .15), transparent); }
.stand b { display: block; font-size: 25px; font-weight: 650; letter-spacing: -.028em; font-feature-settings: var(--zahl); line-height: 1.12; }
.stand > div:first-child b { color: transparent; background: linear-gradient(180deg, #e9fff0, #6bee97 55%, #2bc56d); -webkit-background-clip: text; background-clip: text; }
.stand small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; letter-spacing: -.002em; color: var(--mute); }

/* ---------- Banner */
.banner { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; border-radius: 24px; padding: 15px 14px 15px 18px; margin: 0 0 16px; background: var(--glas-tint); }
.banner b { display: block; font-size: 16px; font-weight: 650; letter-spacing: -.016em; line-height: 1.3; }
.banner span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--text-2); letter-spacing: -.006em; line-height: 1.4; }
.banner.ruhig { background: var(--glas); }

/* ---------- Knöpfe: Kapseln aus leuchtendem Glas. Drücken sofort (Ease-out), Loslassen federt zurück. */
.knopf { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 0; border-radius: 999px;
  padding: 12px 22px; font-size: 16px; font-weight: 650; letter-spacing: -.016em; color: var(--minz-tinte); text-decoration: none; white-space: nowrap;
  background: radial-gradient(120% 130% at 28% -10%, rgba(255, 255, 255, .6), transparent 46%), linear-gradient(180deg, #93f8b8 0%, #52eb86 46%, #1db462 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(0, 46, 20, .28), inset 0 -10px 18px -12px rgba(0, 70, 30, .45), 0 1px 2px rgba(0, 0, 0, .3), 0 12px 28px -12px rgba(70, 232, 121, .8);
  transition: transform .58s var(--feder), box-shadow .25s ease, opacity .25s ease, filter .25s ease; }
.knopf:active { transform: scale(.96); transition-duration: .12s, .25s, .25s, .25s; transition-timing-function: var(--ease-out), ease, ease, ease; }
/* Gesperrt wie bei Apple: graues Glas mit gedämpfter Schrift. Grün leuchtet der Knopf erst, wenn er geht. */
.knopf[disabled] { cursor: default; transform: none; color: var(--faint); background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .08); }
.knopf.voll { width: 100%; min-height: 54px; font-size: 17px; }
/* .knopf.klein schlägt .klein (graue Kleinschrift), sonst würde die Schrift auf dem Grün grau */
.knopf.klein { min-height: 36px; padding: 8px 16px; font-size: 14px; line-height: 1.25; color: var(--minz-tinte); }
.knopf.zweit, .knopf.zweit.klein { color: var(--text); background: var(--glas); box-shadow: var(--glas-innen), 0 1px 2px rgba(0, 0, 0, .3), 0 10px 24px -14px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter); }
.textknopf { background: none; border: 0; color: var(--mute); padding: 10px 4px; font-size: 14px; text-decoration: underline; text-decoration-color: rgba(236, 242, 235, .3); text-underline-offset: 4px; }

/* ---------- Türchen: Glastüren. Geöffnet = leuchtendes Smaragdglas, heute = wandernde Lichtkante. */
.gitter { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.t { position: relative; isolation: isolate; aspect-ratio: 3 / 4; border: 0; border-radius: 20px 20px 9px 9px; padding: 0; display: grid; place-items: center;
  font-size: 19px; font-weight: 600; letter-spacing: -.03em; font-feature-settings: var(--zahl); color: var(--text-2);
  background: var(--glas); box-shadow: var(--glas-innen), 0 1px 2px rgba(0, 0, 0, .3), 0 10px 20px -14px rgba(0, 0, 0, .9);
  transition: transform .58s var(--feder), box-shadow .3s ease, background .3s ease, color .3s ease; }
.t:active:not([disabled]) { transform: scale(.93); transition-duration: .12s, .3s, .3s, .3s; transition-timing-function: var(--ease-out), ease, ease, ease; }
.t[disabled] { cursor: default; }
.t.zu { color: var(--faint); }
.t.offen { color: #fff; text-shadow: 0 1px 1px rgba(0, 50, 22, .45);
  background: radial-gradient(110% 70% at 28% 0%, rgba(220, 255, 232, .55), transparent 58%), linear-gradient(180deg, #2bc466 0%, #15964f 52%, #0c6a38 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62), inset 0 -1px 0 rgba(0, 40, 18, .4), inset 0 -10px 16px -10px rgba(0, 50, 22, .55), 0 1px 2px rgba(0, 0, 0, .35), 0 10px 20px -12px rgba(70, 232, 121, .55); }
.t.offen::after { background: linear-gradient(145deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .12) 30%, rgba(255, 255, 255, 0) 60%, rgba(196, 250, 214, .35)); }
.t.offen.joker { color: var(--phoenix-hi); text-shadow: none; background: var(--glas-tint); box-shadow: inset 0 0 0 1.5px rgba(70, 232, 121, .55), var(--glas-innen); }
.t.heute { color: #fff; background: radial-gradient(100% 70% at 50% 0%, rgba(166, 246, 194, .32), transparent 62%), var(--glas-tint);
  box-shadow: var(--glas-innen), 0 0 26px -4px rgba(70, 232, 121, .75); }
/* Heute: Licht wandert einmal in 6 s um die Kante */
@property --winkel { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.t.heute::after { padding: 1.5px; animation: kante 6s linear infinite;
  background: conic-gradient(from var(--winkel), rgba(255, 255, 255, .98), rgba(70, 232, 121, .95) 10%, rgba(21, 168, 90, .35) 28%, rgba(70, 232, 121, .9) 46%, rgba(255, 255, 255, .9) 54%, rgba(21, 168, 90, .35) 74%, rgba(70, 232, 121, .95) 92%, rgba(255, 255, 255, .98)); }
@keyframes kante { to { --winkel: 360deg; } }
.t.heute::before { content: "heute"; position: absolute; top: -9px; z-index: 1; font: 700 9px/1.6 var(--schrift); letter-spacing: .04em; text-transform: uppercase; text-shadow: none;
  color: var(--minz-tinte); background: linear-gradient(180deg, #9ff8c2, var(--phoenix)); border-radius: 999px; padding: 0 6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 3px 10px -2px rgba(70, 232, 121, .85); }
.t.verpasst { color: var(--faint); background: rgba(255, 255, 255, .018); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.t.verpasst::after { opacity: .3; }
.t.verpasst.jokerbar::before { content: "Joker"; position: absolute; bottom: 5px; font: 650 8px/1 var(--schrift); letter-spacing: .02em; color: var(--phoenix); }
/* Adventssonntage und Heiligabend: Goldkante, solange sie zu sind */
.t.sonntag:not(.offen):not(.heute)::after, .t[data-tuer="24"]:not(.offen):not(.heute)::after { background: var(--gold-rand); opacity: 1; }
.t.sonntag.zu, .t[data-tuer="24"].zu { color: rgba(242, 201, 106, .66); }
.legende { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 14px; font-size: 12px; font-weight: 500; color: var(--mute); }
.legende i { display: inline-block; width: 10px; height: 12px; border-radius: 4px 4px 2px 2px; margin-right: 6px; vertical-align: -1px; }
.legende .l-offen { background: linear-gradient(180deg, #2bc466, #0c6a38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.legende .l-heute { box-shadow: inset 0 0 0 1.5px var(--phoenix), 0 0 7px rgba(70, 232, 121, .85); }
.legende .l-verpasst { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }

.info { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; font-size: 13px; color: var(--mute); line-height: 1.55; }
.info code { font-family: var(--schrift); font-feature-settings: var(--code-zahl); font-weight: 600; letter-spacing: .01em; color: var(--phoenix-hi); font-size: 13px; }
.mono { font-family: var(--code); color: var(--phoenix-hi); font-size: 12px; letter-spacing: 0; }

/* ---------- Sponsorleiste */
.sponsoren { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; border-radius: 24px; }
.sponsoren > div { padding: 14px 10px 13px; display: grid; justify-items: center; gap: 8px; text-align: center; position: relative; }
.sponsoren > div + div::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .15), transparent); }
.sponsoren small { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--mute); }
.sponsoren .marke { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 14.5px; min-height: 30px; letter-spacing: -.016em; }
.sponsoren .marke img { height: 26px; width: auto; }
.sponsoren .marke img.mark { width: 26px; border-radius: 7px; box-shadow: 0 0 14px -3px rgba(70, 232, 121, .65); }
.sponsor-fein { font-size: 11.5px; color: var(--mute); line-height: 1.5; margin: 10px 4px 0; letter-spacing: 0; }

.fuss { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 16px; font-size: 13px; }
.fuss a, .fuss button { color: var(--mute); background: none; border: 0; padding: 6px 0; text-decoration: underline; text-decoration-color: rgba(236, 242, 235, .28); text-underline-offset: 4px; font-size: 13px; }

/* ---------- Anmeldung: Schritte als gruppierte Glasliste wie in iOS */
.anmeldung { display: grid; gap: 12px; margin-top: 10px; }
.schritte { list-style: none; margin: 0; padding: 2px 16px; border-radius: 24px; }
.schritte li { display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 13px 0; }
.schritte li + li { border-top: 1px solid var(--line); }
.schritte .zeit { font-size: 13.5px; font-weight: 650; color: var(--phoenix); font-feature-settings: var(--zahl); letter-spacing: -.01em; padding-top: 1px; }
.schritte p { margin: 0; font-size: 15px; line-height: 1.42; color: var(--text-2); }
.check { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; padding: 14px 15px; border-radius: 20px; font-size: 14.5px; line-height: 1.42; color: var(--text-2); }
/* Häkchen: Glasmarke, die beim Setzen grün aufleuchtet und beim Drücken nachfedert */
.check input { -webkit-appearance: none; appearance: none; margin: 0; width: 24px; height: 24px; border-radius: 8px; cursor: pointer;
  background: rgba(255, 255, 255, .05) center / 15px no-repeat; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .32), inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: transform .58s var(--feder), background-color .2s ease, box-shadow .2s ease; }
.check input:active { transform: scale(.9); transition-duration: .12s, .2s, .2s; transition-timing-function: var(--ease-out), ease, ease; }
.check input:checked { background-color: var(--phoenix); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.4l2.9 2.9 6.1-6.6' fill='none' stroke='%2303170b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 14px -2px rgba(70, 232, 121, .8); }
.klein { font-size: 12.5px; color: var(--mute); line-height: 1.5; letter-spacing: -.002em; }

/* ---------- Blatt (Türchen, Gewinn, Lose, Admin): dickes Glas, das von unten kommt und dorthin zurückgeht */
/* Lage, Schleier und das Zurücktreten des Kalenders steuert eine Feder in app.js (blattLage) */
.blatt { position: fixed; inset: 0; z-index: 20; display: grid; align-items: end; }
.schleier { position: absolute; inset: 0; background: rgba(1, 4, 2, .55); -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%); opacity: 0; }
.karte { position: relative; max-height: 94vh; overflow-y: auto; overscroll-behavior: contain; max-width: 560px; width: 100%; margin: 0 auto;
  padding: 0 20px calc(24px + env(safe-area-inset-bottom)); border-radius: 34px 34px 0 0;
  background: radial-gradient(120% 40% at 18% 0%, rgba(255, 255, 255, .07), transparent 60%), linear-gradient(180deg, rgba(32, 48, 38, .76), rgba(12, 18, 14, .9) 30%, rgba(8, 12, 10, .94));
  -webkit-backdrop-filter: blur(40px) saturate(190%) brightness(1.04); backdrop-filter: blur(40px) saturate(190%) brightness(1.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 -24px 60px -24px rgba(0, 0, 0, .85);
  transform: translate3d(0, 110%, 0); will-change: transform; }
/* Kopf bleibt stehen (Griff, Titel, Schließen). Darunter verschwindet der Inhalt weich im Glas statt hinter einer Linie. */
.karte .kopfzeile { position: sticky; top: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  margin: 0 -20px 2px; padding: 22px 20px 14px; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none;
  background: linear-gradient(180deg, rgba(29, 43, 34, .95), rgba(24, 36, 28, .72) 72%, rgba(24, 36, 28, 0));
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  -webkit-mask: linear-gradient(180deg, #000 calc(100% - 12px), transparent); mask: linear-gradient(180deg, #000 calc(100% - 12px), transparent); }
.karte .kopfzeile::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 99px; background: rgba(255, 255, 255, .28); }
.karte .laden { min-height: 46vh; }
.karte .nr { font-size: 13.5px; font-weight: 600; letter-spacing: -.008em; color: var(--phoenix); }
.karte .zu-knopf { position: relative; display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; border: 0; color: var(--text-2); font-size: 20px; line-height: 1; padding: 0 0 2px;
  background: rgba(255, 255, 255, .09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); transition: transform .58s var(--feder); }
.karte .zu-knopf:active { transform: scale(.9); transition-duration: .12s; transition-timing-function: var(--ease-out); }
.lern { font-size: 16px; line-height: 1.55; color: var(--text-2); margin: 0 0 16px; letter-spacing: -.012em; }
.frage { font-size: 17px; font-weight: 650; letter-spacing: -.018em; margin: 0 0 12px; line-height: 1.35; }
.antw { display: grid; gap: 9px; }
.antw button { position: relative; text-align: left; border: 0; border-radius: 18px; padding: 15px 46px 15px 16px; font-size: 16px; font-weight: 500; line-height: 1.35; letter-spacing: -.013em;
  background: var(--glas); box-shadow: var(--glas-innen), 0 1px 2px rgba(0, 0, 0, .3);
  transition: transform .58s var(--feder), box-shadow .25s ease, background .25s ease, color .25s ease, opacity .25s ease; }
.antw button:active:not([disabled]) { transform: scale(.975); transition-duration: .12s, .25s, .25s, .25s, .25s; transition-timing-function: var(--ease-out), ease, ease, ease, ease; }
.antw button[disabled] { cursor: default; }
.antw button[disabled]:not(.richtig):not(.falsch) { opacity: .46; }
.antw button.richtig { background: var(--glas-tint); box-shadow: inset 0 0 0 1.5px rgba(70, 232, 121, .9), 0 0 24px -8px rgba(70, 232, 121, .8); }
.antw button.richtig::after { content: "✓"; position: absolute; right: 13px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 800; color: var(--minz-tinte); background: linear-gradient(180deg, #9ff8c2, var(--phoenix)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 12px rgba(70, 232, 121, .7); }
.antw button.falsch { color: var(--mute); box-shadow: inset 0 0 0 1px rgba(255, 122, 89, .5); }
.antw button.falsch::after { content: "✕"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: rgba(255, 140, 110, .9); font-size: 12px; font-weight: 700; }
.hinweisbox { margin: 0 0 14px; border-radius: 16px; padding: 12px 14px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.ergebnis { margin-top: 14px; border-radius: 22px; padding: 15px 16px; background: var(--glas-tint); animation: auftauchen .55s var(--ease-out) backwards; }
.ergebnis .gross { font-size: 17px; font-weight: 650; letter-spacing: -.018em; line-height: 1.3; }
.ergebnis .los { font-size: 15px; font-weight: 650; font-feature-settings: var(--code-zahl); color: var(--phoenix-hi); margin-top: 4px; letter-spacing: .015em; }
.ergebnis p { margin: 6px 0 0; font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.preise { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 14px; }
.preise h3 { font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--mute); margin: 0 0 10px; }
.preise ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.preise li { display: grid; grid-template-columns: 32px 1fr auto; gap: 8px; align-items: center; font-size: 15px; letter-spacing: -.012em; }
.preise .anz { font-weight: 650; font-feature-settings: var(--zahl); color: var(--phoenix); font-size: 14px; }
.abzeichen { font-size: 10.5px; font-weight: 600; letter-spacing: .01em; color: var(--text-2); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); border-radius: 999px; padding: 2px 8px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.abzeichen img { height: 11px; width: auto; }
/* Kleinschrift auf Glas: heller statt grau in grau (Apple: Vibrancy), damit Pflichttexte lesbar bleiben */
.kleingedruckt { margin-top: 16px; font-size: 12px; color: var(--mute); line-height: 1.5; letter-spacing: 0; }
.kleingedruckt p { margin: 0 0 6px; }

/* ---------- Formular */
.formular { display: grid; gap: 12px; margin-top: 14px; }
.feld { display: grid; gap: 6px; }
.feld span { font-size: 13px; font-weight: 500; color: var(--mute); }
.feld input, .feld select { width: 100%; border: 0; border-radius: 14px; padding: 13px 14px; font-size: 16px; background: rgba(255, 255, 255, .055);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .06); transition: box-shadow .2s ease, background .2s ease; }
.feld input:focus, .feld select:focus { outline: none; background: rgba(70, 232, 121, .07); box-shadow: inset 0 0 0 1.5px rgba(70, 232, 121, .8), 0 0 0 4px rgba(70, 232, 121, .12); }
.zweispaltig { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; align-items: end; }
/* Berichte im Admin (Startcheck, Fahrplan): umbrechen statt aus dem Blatt laufen */
.zweispaltig + .frage { margin-top: 26px; }
#startcheckbericht, #fahrplanbericht { white-space: pre-wrap; overflow-wrap: anywhere; font: 12.5px/1.6 var(--code); letter-spacing: 0; margin: 10px 0 4px; }
.fehlertext { color: var(--glut); font-size: 13.5px; min-height: 1em; margin: 0; }
.preiskarte { display: grid; gap: 4px; padding: 15px 16px; border-radius: 22px; background: var(--glas-tint); }
.preiskarte b { font-size: 17px; font-weight: 650; letter-spacing: -.018em; }
.preiskarte span { font-size: 13px; color: var(--text-2); font-feature-settings: var(--code-zahl); }
.preiskarte + .lern { margin-top: 14px; }
.liste .knopf { flex: none; }
.sponsorinfo { margin-top: 10px; padding: 12px 14px; border-radius: 16px; font-size: 13px; color: var(--text-2); display: grid; gap: 6px; line-height: 1.45; }

/* ---------- Listen */
.liste { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--line); }
.liste li { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; font-feature-settings: var(--zahl); }
.liste li span:last-child { color: var(--mute); text-align: right; }
.schalter { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
/* Schalter wie in iOS: Kapsel mit Knopf, der rüberfedert */
.schalter input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: none; margin: 0; width: 51px; height: 31px; border-radius: 999px; cursor: pointer;
  background: radial-gradient(circle at 15.5px 50%, #fff 0 12.5px, rgba(255, 255, 255, 0) 13.5px) 0 0 / 51px 31px no-repeat, rgba(255, 255, 255, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: background-position .5s var(--feder), background-color .25s ease; }
.schalter input[type="checkbox"]:checked { background-position: 20px 0, 0 0; background-color: var(--smaragd); }

/* ---------- Admin */
.reiter { display: flex; gap: 6px; overflow-x: auto; margin: 4px 0 14px; scrollbar-width: none; }
.reiter button { border: 0; border-radius: 999px; padding: 8px 14px; font-size: 13.5px; font-weight: 500; white-space: nowrap; background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: background .2s ease, box-shadow .2s ease, color .2s ease; }
.reiter button[aria-pressed="true"] { color: var(--minz-tinte); background: linear-gradient(180deg, #8ff7b5, var(--phoenix)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); font-weight: 650; }
.kachel { border-radius: 16px; padding: 12px 14px; margin-bottom: 8px; font-size: 14px; }
.kachel pre { white-space: pre-wrap; font: 12.5px/1.5 var(--code); letter-spacing: 0; margin: 8px 0; color: var(--text); }
.zahlen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 10px; }
.zahlen div { border-radius: 18px; padding: 12px 13px; }
.zahlen b { display: block; font-weight: 650; letter-spacing: -.026em; font-size: 24px; font-feature-settings: var(--zahl); }
.zahlen small { color: var(--mute); font-size: 12px; }

/* ---------- Hinweis: Glaskapsel unten. Übergänge statt Keyframes, damit ein neuer Hinweis den alten
   mitten im Ausblenden zurückholt. Rein über @starting-style, raus auf demselben Weg und schneller. */
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 40; color: var(--text); padding: 12px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; max-width: calc(100% - 32px); text-align: center;
  background: rgba(22, 33, 26, .74); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 16px 36px -12px rgba(0, 0, 0, .9);
  opacity: 1; transform: translateX(-50%); filter: blur(0);
  transition: opacity .3s var(--ease-out), transform .5s var(--feder), filter .3s var(--ease-out); }
@starting-style { .toast { opacity: 0; transform: translate(-50%, 16px) scale(.94); filter: blur(6px); } }
.toast.weg { opacity: 0; transform: translate(-50%, 14px) scale(.96); filter: blur(4px); transition-duration: .2s; transition-timing-function: var(--ease-out); }

/* Halten zum Löschen: rote Füllung wächst in 2 s linear, beim Loslassen in 0,2 s zurück */
.halten { position: relative; overflow: hidden; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.halten-fuell { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 122, 89, .95), rgba(214, 72, 44, .95)); clip-path: inset(0 100% 0 0); transition: clip-path .2s var(--ease-out); }
.halten.aktiv .halten-fuell { clip-path: inset(0 0 0 0); transition: clip-path 2s linear; }
.halten-text { position: relative; }

.noscript { color: var(--mute); text-align: center; padding: 40px 16px; }

/* ---------- Auftritt beim ersten Laden wie in einer Keynote: Titel schärft sich aus der Unschärfe,
   der Phönix wächst ins Licht, das Glas materialisiert sich, die Türen laufen als Welle diagonal ein.
   Nur einmal je Sitzung (Klasse .erst), nie beim Neuzeichnen nach dem Schließen eines Blatts.
   Immer backwards: ein festgehaltener Endwert würde das Glas darin durchsichtig machen. */
@keyframes auftauchen { from { opacity: 0; transform: translateY(14px) scale(.97); filter: blur(8px); } }
@keyframes titelAuf { from { opacity: 0; transform: translateY(20px); filter: blur(16px); } }
@keyframes buehneAuf { from { opacity: 0; transform: scale(.9); filter: blur(12px); } }
@keyframes tuerAuf { from { opacity: 0; transform: translateY(18px) scale(.88); } }
@keyframes federAn { from { opacity: 0; } }
.erst > * { animation: auftauchen .8s var(--ease-out) backwards; animation-delay: 480ms; }
.erst > .eyebrow { animation-delay: 0ms; }
.erst > h1 { animation: titelAuf 1s var(--ease-out) backwards 70ms; }
.erst > .buehne { animation: buehneAuf 1.2s var(--ease-out) backwards 150ms; }
.erst > .stand, .erst > .anmeldung { animation-delay: 260ms; }
.erst > .banner { animation-delay: 330ms; }
.erst > .gitter { animation: none; }
.erst .t { animation: tuerAuf .8s var(--feder-sanft) backwards; animation-delay: calc(360ms + var(--welle, 0) * 34ms); }
.erst .fed.voll { animation: federAn .6s var(--ease-out) backwards; animation-delay: calc(420ms + var(--k, 0) * 26ms); }

@media (hover: hover) and (pointer: fine) {
  .t:not([disabled]):hover { box-shadow: var(--glas-innen), inset 0 0 0 1px rgba(70, 232, 121, .45), 0 10px 20px -14px rgba(0, 0, 0, .9); }
  .t.offen:hover { filter: brightness(1.07); }
  .antw button:not([disabled]):hover { background: radial-gradient(130% 90% at 0% 0%, rgba(255, 255, 255, .12), transparent 50%), linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04)); }
  .knopf:not([disabled]):hover { filter: brightness(1.05) saturate(1.05); }
}

/* Squircles (Chromium, also Telegram auf Android): Ecken wie bei Apple, ohne Knick am Übergang.
   Bei gleichem Radius wirken sie eckiger, deshalb sind die Radien hier etwas größer. */
@supports (corner-shape: squircle) {
  .stand, .banner, .sponsoren, .check, .kachel, .zahlen div, .sponsorinfo, .preiskarte, .ergebnis, .hinweisbox, .schritte, .antw button, .feld input, .feld select, .karte, .t { corner-shape: squircle; }
  .stand::after, .banner::after, .sponsoren::after, .preiskarte::after, .ergebnis::after, .check::after, .schritte::after, .t::after, .antw button::before { corner-shape: inherit; }
  .stand, .banner, .sponsoren, .schritte { border-radius: 30px; }
  .check, .ergebnis, .preiskarte { border-radius: 26px; }
  .antw button { border-radius: 22px; }
  .feld input, .feld select, .kachel, .hinweisbox, .sponsorinfo { border-radius: 18px; }
  .zahlen div { border-radius: 22px; }
  .karte { border-radius: 42px 42px 0 0; }
  .t { border-radius: 26px 26px 12px 12px; }
}

@media (max-width: 350px) {
  main { padding-left: 12px; padding-right: 12px; }
  .gitter { gap: 6px; }
  .t { font-size: 16px; border-radius: 15px 15px 7px 7px; }
  h1 { font-size: 35px; }
}

/* Weniger Transparenz gewünscht: Glas wird massiv */
@media (prefers-reduced-transparency: reduce) {
  .stand, .banner, .sponsoren, .check, .kachel, .zahlen div, .sponsorinfo, .preiskarte, .ergebnis, .hinweisbox, .schritte, .eyebrow, .knopf.zweit, .t, .antw button { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--panel-2); }
  .karte, .toast { -webkit-backdrop-filter: none; backdrop-filter: none; background: #0f1611; }
  .schleier { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(2, 5, 3, .85); }
  .karte .kopfzeile { -webkit-backdrop-filter: none; backdrop-filter: none; background: #0f1611; -webkit-mask: none; mask: none; }
}
@media (prefers-contrast: more) {
  :root { --line: rgba(234, 238, 232, .25); --line-2: rgba(234, 238, 232, .4); --mute: #b4bdb5; --faint: #9aa39b; --text-2: #dfe5de; }
  .t, .antw button, .check, .schritte { box-shadow: inset 0 0 0 1px rgba(234, 238, 232, .45); }
}
/* Weniger Bewegung: nur weiche Überblendungen, keine Wege, kein Federn, keine wandernde Kante */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .schleier { transition: opacity .2s ease !important; }
  /* Die Lösch-Füllung ist eine Fortschrittsanzeige, keine Bewegung: sie behält ihre zwei Sekunden */
  .halten.aktiv .halten-fuell { transition-duration: 2s !important; }
  .karte { transform: none !important; opacity: 0; transition: opacity .2s ease !important; }
  .blatt.auf .karte { opacity: 1; }
}