/* Daumenliga – Flutlicht: Nachtspiel im Stadion, Neongrün aus dem Logo, schräge Formen wie die kursive Logo-Schrift.
   (Aleks, 12.10.2026: „richtig coole Spieleapp, nicht förmlich“ – Richtung A mit den Sammelkarten aus C.) */
:root {
  --grund: #060A12;
  --karte: #0E182B;
  --karte-2: #14223A;
  --karte-3: #1C2D4B;
  --tinte: #EEF4FF;
  --tinte-2: #9AAECB;
  --tinte-3: #62759A;
  --rand: rgba(207, 230, 255, .09);
  --rand-stark: rgba(207, 230, 255, .18);
  --hoch: #19FB5C;
  --runter: #FF4D6A;
  --achtung: #FFB020;
  --rasen-a: #19FB5C;
  --rasen-b: #0BC64A;
  --neon: #19FB5C;
  --neon-2: #0BC64A;
  --neon-tief: #06832F;
  --neon-tinte: #03200C;
  --gold: #FFC800;
  --gold-tief: #B98A00;
  --eis: 207 230 255;
  --schatten: inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 34px -22px rgba(0, 0, 0, .9);
  --weich: cubic-bezier(.22, .8, .28, 1);
  --schrift: "Rubik", system-ui, -apple-system, sans-serif;
  --anzeige: "Kanit", "Rubik", system-ui, sans-serif;
  --ziffern: "Rubik", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* Die Seite selbst scrollt nie, nur der Inhalt im body. Sonst verschiebt iOS in installierten Web-Apps manchmal die
   feste untere Leiste beim Scrollen mitten ins Bild (WebKit-Fehler: position: fixed beim Scrollen der ganzen Seite). */
html { overflow: hidden; }
body { overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: none; -webkit-overflow-scrolling: touch; }
body {
  background:
    radial-gradient(80% 42% at -12% -4%, rgb(var(--eis) / .17), transparent 62%),
    radial-gradient(80% 42% at 112% -4%, rgb(var(--eis) / .13), transparent 62%),
    linear-gradient(180deg, #0B1426 0%, #070C17 46%, #05110B 100%);
  background-attachment: fixed;
  background-color: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
/* Rasenstreifen unten und Flutlicht-Kegel oben – fest hinter allem */
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; }
body::before {
  top: auto; height: 42%;
  background: repeating-linear-gradient(90deg, rgba(25, 251, 92, .05) 0 46px, transparent 46px 92px);
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent); mask-image: linear-gradient(to top, #000 10%, transparent);
}
body::after {
  background:
    conic-gradient(from 152deg at 0% 0%, transparent 0deg, rgb(var(--eis) / .07) 8deg, transparent 18deg),
    conic-gradient(from 190deg at 100% 0%, transparent 0deg, rgb(var(--eis) / .06) 9deg, transparent 20deg);
}
button, input { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; border-radius: 8px; }

.app {
  max-width: 440px;
  margin: 0 auto;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(104px + env(safe-area-inset-bottom));
  min-height: 100dvh;
}
.app.ohne-leiste { padding-bottom: max(28px, env(safe-area-inset-bottom)); }

/* ---------- Typografie ---------- */
.augenbraue {
  font-family: var(--anzeige);
  font-style: italic;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinte);
}
/* Drei Tempostreifen wie im Logo vor jeder Abschnittsüberschrift */
.abschnitt > .augenbraue, .abschnitt-oben > .augenbraue { display: flex !important; align-items: center; gap: 10px; }
.abschnitt > .augenbraue::before, .abschnitt-oben > .augenbraue::before {
  content: ""; flex: none; width: 26px; height: 13px;
  background:
    linear-gradient(var(--neon), var(--neon)) 0 0 / 26px 3px no-repeat,
    linear-gradient(var(--neon), var(--neon)) 5px 5px / 18px 3px no-repeat,
    linear-gradient(var(--neon), var(--neon)) 10px 10px / 10px 3px no-repeat;
  filter: drop-shadow(0 0 5px rgba(25, 251, 92, .7));
}
h1, h2, h3 { margin: 0; letter-spacing: -.01em; }
h1 { font-family: var(--anzeige); font-style: italic; font-size: 30px; font-weight: 900; line-height: 1.02; text-transform: uppercase; letter-spacing: .01em; }
h2 { font-family: var(--anzeige); font-style: italic; font-size: 19px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.leise { color: var(--tinte-2); }
.sehr-leise { color: var(--tinte-3); }
.zahl { font-family: var(--ziffern); font-variant-numeric: tabular-nums; }
.verlauf-text {
  background: linear-gradient(180deg, #8DFFB0, var(--neon) 55%, var(--neon-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(25, 251, 92, .35));
}

/* ---------- Symbolkacheln (schräg wie die Logo-Schrift) ---------- */
.kachel {
  --g: 44px;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--g);
  height: var(--g);
  border-radius: 24%;
  transform: skewX(-9deg);
  background: linear-gradient(155deg, var(--a), var(--b));
  box-shadow: 0 6px 16px -6px var(--b), inset 0 0 0 1px rgba(255, 255, 255, .28);
  transition: transform .3s var(--weich);
}
.kachel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .32), transparent 52%);
  pointer-events: none;
}
.kachel svg { width: 56%; height: 56%; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: skewX(9deg); }
.kachel.mit-bild { transform: none; }
.strich { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.avatar {
  --a: #5B6B8C;
  --b: #2A3550;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(155deg, var(--a), var(--b));
  color: #fff;
  font-family: var(--anzeige);
  font-style: italic;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .01em;
  box-shadow: 0 4px 12px -5px var(--b), inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.avatar.ich { --a: #8DFFB0; --b: var(--neon-2); color: var(--neon-tinte); }
.avatar.gross { width: 56px; height: 56px; font-size: 20px; border: 2px solid rgba(255, 255, 255, .85); }
.avatar.klein { width: 24px; height: 24px; font-size: 10px; box-shadow: none; }

/* ---------- Kopf ---------- */
.kopf { display: flex; align-items: center; gap: 12px; margin: 6px 0 18px; }
.kopf-text { min-width: 0; flex: 1; }
.kopf-wechsel {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 8px; background: var(--karte-2); color: var(--tinte);
  font-family: var(--anzeige); font-style: italic; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
  border: 1px solid var(--rand-stark);
  box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .8);
}
.kopf-wechsel svg { width: 16px; height: 16px; }
.kopf-wechsel:active { transform: scale(.97); }
.kopf h1 { font-size: 22px; line-height: 1.05; overflow-wrap: anywhere; }
.kopf .unterzeile { font-size: 13px; color: var(--tinte-2); margin-top: 3px; }
.zurueck {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 4px 0 14px -6px; padding: 6px 8px;
  border: 0; background: none; border-radius: 10px;
  font-weight: 600; color: var(--tinte-2); cursor: pointer; text-decoration: none;
}
.zurueck:hover { color: var(--tinte); }

/* ---------- Karten ---------- */
.karte {
  background: linear-gradient(180deg, rgba(20, 34, 58, .92), rgba(12, 20, 36, .94));
  border-radius: 18px;
  box-shadow: var(--schatten);
  border: 1px solid var(--rand);
}
.abschnitt { margin-top: 26px; }
.abschnitt > .augenbraue { display: block; margin: 0 4px 10px; }

/* ---------- Eintrittskarte: das Duell des Tages unter Flutlicht ---------- */
.ticket-huelle { filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .55)); }
.ticket {
  --kerbe: 13px;
  position: relative;
  background: linear-gradient(180deg, #102038, #0B1528);
  border-radius: 20px;
  -webkit-mask:
    radial-gradient(circle var(--kerbe) at 0 var(--abriss), #0000 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--kerbe) at 100% var(--abriss), #0000 98%, #000) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle var(--kerbe) at 0 var(--abriss), #0000 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--kerbe) at 100% var(--abriss), #0000 98%, #000) right / 51% 100% no-repeat;
  --abriss: calc(100% - 74px);
}
/* Nachtrasen mit Mittellinie und Flutlicht-Kegeln – das Fußball-Bild der App. */
.ticket-oben {
  position: relative;
  padding: 18px 20px 20px;
  border-radius: 20px 20px 0 0;
  color: #fff;
  overflow: hidden;
  background:
    conic-gradient(from 160deg at 50% -30%, transparent 0deg, rgb(var(--eis) / .16) 12deg, transparent 24deg, transparent 336deg, rgb(var(--eis) / .12) 348deg, transparent 360deg),
    radial-gradient(circle at 50% 56%, transparent 34px, rgba(25, 251, 92, .28) 35px 36.5px, transparent 37.5px),
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(25, 251, 92, .3) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    repeating-linear-gradient(90deg, #0D2B19 0 34px, #0A2214 34px 68px);
}
.ticket-oben .augenbraue { color: rgba(255, 255, 255, .9); }
.ticket-oben .marke { background: rgba(25, 251, 92, .16); color: var(--neon); border: 1px solid rgba(25, 251, 92, .35); }
.ticket-oben .status { color: rgba(255, 255, 255, .85); }
.ticket-zeile { display: flex; justify-content: space-between; align-items: center; }
.ticket-duell {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: 16px;
}
.ticket-seite { display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--anzeige); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
/* Spieler im Duell als schräge Schilder wie die Logo-Buchstaben */
.ticket-seite .avatar.gross {
  width: 74px; height: 74px; font-size: 27px; border: 0; border-radius: 0;
  clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%);
  box-shadow: none;
}
.ticket-seite .avatar.gross.mit-bild > img { inset: 0; width: 100%; height: 100%; border-radius: 0; }
.ticket-stand { font-family: var(--anzeige); font-style: italic; font-size: 44px; font-weight: 900; letter-spacing: .02em; padding: 0 8px; color: #fff; text-shadow: 0 0 18px rgb(var(--eis) / .55); }
.ticket-stand .doppelpunkt { color: var(--tinte-2); margin: 0 3px; }
.ticket-abriss {
  height: 74px;
  border-top: 1.5px dashed var(--rand-stark);
  margin: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ticket-abriss .zeit { font-family: var(--anzeige); font-style: italic; font-weight: 800; font-size: 18px; color: var(--gold); letter-spacing: .04em; text-shadow: 0 0 12px rgba(255, 200, 0, .35); }
.ticket-abriss .zeit small { display: block; font-family: var(--schrift); font-style: normal; font-size: 12px; font-weight: 600; color: var(--tinte-2); letter-spacing: 0; text-shadow: none; }

/* ---------- Knöpfe ---------- */
/* Schräge Neon-Knöpfe mit harter Unterkante: Die Form liegt im ::before, der Text bleibt gerade. */
.knopf {
  --flaeche: linear-gradient(180deg, #8DFFB0 0%, var(--neon) 46%, var(--neon-2) 100%);
  line-height: 1.1;
  --lippe: var(--neon-tief);
  --glut: rgba(25, 251, 92, .4);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 24px;
  border: 0; border-radius: 10px;
  background: none; color: var(--neon-tinte);
  font-family: var(--anzeige); font-style: italic; font-weight: 800; font-size: 16px; letter-spacing: .03em; text-transform: uppercase;
  cursor: pointer; text-decoration: none;
  transition: transform .12s var(--weich), opacity .2s;
  margin-bottom: 6px;
}
.knopf::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; transform: skewX(-10deg);
  background: var(--flaeche);
  box-shadow: 0 6px 0 var(--lippe), 0 0 26px var(--glut), inset 0 2px 0 rgba(255, 255, 255, .55);
  transition: box-shadow .12s var(--weich);
}
.knopf .strich { stroke-width: 2.6; }
.knopf:hover { transform: translateY(-1px); }
.knopf:active { transform: translateY(6px); }
.knopf:active::before { box-shadow: 0 0 0 var(--lippe), 0 0 18px var(--glut), inset 0 2px 0 rgba(255, 255, 255, .5); }
.knopf[disabled] { --flaeche: #23324D; --lippe: #141F33; --glut: transparent; color: var(--tinte-3); cursor: not-allowed; transform: none; }
.knopf.breit { width: 100%; }
.knopf.hell { --flaeche: linear-gradient(180deg, #1D3050, #142440); --lippe: #08111F; --glut: transparent; color: var(--tinte); }
.knopf.hell::before { box-shadow: 0 6px 0 var(--lippe), inset 0 0 0 1px var(--rand-stark), inset 0 2px 0 rgba(255, 255, 255, .08); }
.textknopf { border: 0; background: none; padding: 8px; color: var(--tinte-2); font-weight: 600; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Tabelle ---------- */
.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabelle th {
  font-family: var(--anzeige); font-style: italic; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinte-3); text-align: right; padding: 14px 8px 8px;
}
.tabelle th:nth-child(2) { text-align: left; }
.tabelle td { padding: 10px 6px; text-align: right; border-top: 1px solid var(--rand); }
.tabelle td:nth-child(2) { text-align: left; width: 100%; }
.tabelle td.platz { font-family: var(--anzeige); font-style: italic; font-size: 19px; font-weight: 900; color: var(--tinte-2); width: 1%; white-space: nowrap; padding-left: 12px; }
.tabelle td.punkte { font-family: var(--anzeige); font-style: italic; font-size: 19px; font-weight: 900; padding-right: 14px; }
.tabelle td.z { font-family: var(--ziffern); font-variant-numeric: tabular-nums; color: var(--tinte-2); white-space: nowrap; }
.tabelle tr.ich td { background: rgba(25, 251, 92, .11); }
.tabelle tr.ich td.platz { box-shadow: inset 4px 0 0 var(--neon); color: var(--neon); text-shadow: 0 0 10px rgba(25, 251, 92, .6); }
.tabelle tr.ich td.punkte { color: var(--neon); text-shadow: 0 0 10px rgba(25, 251, 92, .6); }
.tabelle tr.keller td { background: rgba(255, 77, 106, .08); }
.medaille { display: inline-grid; place-items: center; width: 26px; height: 24px; border-radius: 5px; transform: skewX(-10deg); font-size: 12px; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.medaille.m1 { background: linear-gradient(155deg, #FFE27A, #D99A00); color: #3A2400; text-shadow: none; box-shadow: 0 0 14px rgba(255, 200, 0, .5); }
.medaille.m2 { background: linear-gradient(155deg, #F1F5FA, #8C9AB0); color: #1D2433; }
.medaille.m3 { background: linear-gradient(155deg, #FFC796, #B4652A); color: #2B1404; }
.tabelle.einrutschen tbody tr { animation: einrutschen .45s var(--weich) both; }
.tabelle.einrutschen tbody tr:nth-child(2) { animation-delay: .05s; }
.tabelle.einrutschen tbody tr:nth-child(3) { animation-delay: .1s; }
.tabelle.einrutschen tbody tr:nth-child(4) { animation-delay: .15s; }
.tabelle.einrutschen tbody tr:nth-child(5) { animation-delay: .2s; }
.tabelle.einrutschen tbody tr:nth-child(6) { animation-delay: .25s; }
.tabelle.einrutschen tbody tr:nth-child(n+7) { animation-delay: .3s; }
@keyframes einrutschen { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.tabelle tr:last-child td:first-child { border-bottom-left-radius: 18px; }
.tabelle tr:last-child td:last-child { border-bottom-right-radius: 18px; }
.spieler-zelle { display: flex; align-items: center; gap: 7px; font-weight: 700; min-width: 0; }
.bewegung { width: 10px; height: 10px; flex: none; }
.bewegung.hoch { fill: var(--hoch); }
.bewegung.runter { fill: var(--runter); }
.bewegung.gleich { fill: var(--tinte-3); }
.form { display: inline-flex; gap: 3px; margin-left: 2px; }
.form i { width: 7px; height: 5px; border-radius: 2px; transform: skewX(-14deg); background: var(--tinte-3); opacity: .6; }
.form i.S { background: var(--hoch); opacity: 1; box-shadow: 0 0 6px rgba(25, 251, 92, .55); }
.form i.N { background: var(--runter); opacity: 1; }

/* ---------- Listen ---------- */
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li + li { border-top: 1px solid var(--rand); }
.ergebnis-zeile {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  padding: 12px 16px; font-weight: 600; font-size: 14px;
}
.ergebnis-zeile .rechts { text-align: right; }
.ergebnis-zeile .stand { font-family: var(--anzeige); font-style: italic; font-weight: 900; font-size: 16px; padding: 3px 10px; background: rgba(0, 0, 0, .35); border: 1px solid var(--rand-stark); border-radius: 6px; }
.ergebnis-zeile .ich { font-weight: 800; color: var(--neon); }

.disziplin {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 14px 16px;
  border: 0; background: none; text-align: left; cursor: pointer;
  transition: background .2s;
}
.disziplin:hover { background: rgba(255, 255, 255, .04); }
.disziplin:hover .kachel { transform: skewX(-9deg) scale(1.05); }
.disziplin .text { flex: 1; min-width: 0; }
.disziplin .name { font-family: var(--anzeige); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.disziplin .status { font-size: 13px; color: var(--tinte-2); }
.disziplin .wert { font-family: var(--anzeige); font-style: italic; font-weight: 900; text-align: right; font-size: 17px; }
.disziplin .wert small { display: block; font-family: var(--schrift); font-style: normal; font-size: 11px; color: var(--tinte-3); font-weight: 600; }
.disziplin[disabled] { cursor: default; }
.disziplin[disabled]:hover { background: none; }

/* ---------- Bunte Kacheln (Mehr) ---------- */
.reihe { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.reihe a, .reihe button {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 16px; text-decoration: none; text-align: left;
  font-family: var(--anzeige); font-style: italic; font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: .02em;
  color: #fff; border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; cursor: pointer;
  background: linear-gradient(155deg, color-mix(in srgb, var(--a) 70%, #0B1426), color-mix(in srgb, var(--b) 80%, #05080F));
  box-shadow: 0 5px 0 color-mix(in srgb, var(--b) 55%, #000), 0 14px 26px -14px var(--b);
  transition: transform .12s var(--weich), box-shadow .12s var(--weich);
}
.reihe a small, .reihe button small { display: block; font-family: var(--schrift); font-style: normal; font-weight: 600; font-size: 12px; text-transform: none; letter-spacing: 0; opacity: .85; margin-top: 2px; }
.reihe a .kachel, .reihe button .kachel { background: rgba(255, 255, 255, .2); box-shadow: none; }
.reihe a:active, .reihe button:active { transform: translateY(5px); box-shadow: 0 0 0 var(--b); }

/* ---------- Heute: Disziplin-Karten ---------- */
.heute { display: grid; gap: 10px; }
.disziplin-karte {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 12px 14px; border: 1px solid var(--rand); border-radius: 16px; text-align: left; cursor: pointer;
  background: linear-gradient(90deg, color-mix(in srgb, var(--a) 18%, #0B1426), #0B1426);
  box-shadow: inset 4px 0 0 var(--a), 0 4px 0 #050A14;
  transition: transform .12s var(--weich), box-shadow .12s var(--weich);
}
.disziplin-karte:active { transform: translateY(4px); box-shadow: inset 4px 0 0 var(--a); }
.disziplin-karte[disabled] { cursor: default; transform: none; }
.disziplin-karte .text { flex: 1; min-width: 0; }
.disziplin-karte .name { display: block; font-family: var(--anzeige); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.disziplin-karte .status { display: block; font-size: 13px; color: var(--tinte-2); font-weight: 600; }
.disziplin-karte .wert { font-family: var(--anzeige); font-style: italic; font-weight: 900; text-align: right; font-size: 18px; }
.disziplin-karte .wert small { display: block; font-family: var(--schrift); font-style: normal; font-size: 11px; color: var(--tinte-2); font-weight: 600; }
.disziplin-karte .fertig { color: var(--hoch); }

/* ---------- Spielkarten mit Titelbild ---------- */
.spielkarte {
  position: relative; display: block; width: 100%;
  aspect-ratio: 360 / 132; min-height: 128px;
  padding: 0; border: 1px solid rgb(var(--eis) / .12); border-radius: 16px; overflow: hidden;
  background: linear-gradient(155deg, var(--a), var(--b));
  color: #fff; text-align: left; text-decoration: none; cursor: pointer;
  box-shadow: 0 5px 0 #040810, 0 16px 26px -16px rgba(0, 0, 0, .9);
  transition: transform .12s var(--weich), box-shadow .12s var(--weich);
  margin-bottom: 5px;
  isolation: isolate;
}
/* Farbstreifen links in der Farbe des Spiels */
.spielkarte::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--a); box-shadow: 0 0 14px var(--a); }
.spielkarte:active { transform: translateY(5px); box-shadow: 0 0 0 transparent; }
.spielkarte[disabled] { cursor: default; transform: none; }
.spielkarte[disabled] .titel { filter: saturate(.55) brightness(.75); }
.spielkarte[disabled]::after { background: var(--neon); box-shadow: 0 0 14px var(--neon); }
.spielkarte .titel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s var(--weich), transform 6s linear; z-index: -1; }
.spielkarte .titel.geladen { opacity: 1; }
.spielkarte:hover .titel.geladen { transform: scale(1.04); }
.spielkarte .schleier {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(6, 10, 18, .92) 0%, rgba(6, 10, 18, .66) 46%, rgba(6, 10, 18, .1) 82%),
    linear-gradient(0deg, rgba(6, 10, 18, .5) 0%, transparent 55%);
}
.spielkarte .inhalt { position: absolute; left: 16px; right: 104px; bottom: 13px; display: grid; gap: 6px; }
.spielkarte .oben { display: flex; align-items: center; gap: 10px; }
.spielkarte .kachel { box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .4); }
.spielkarte .name { font-family: var(--anzeige); font-style: italic; font-size: 21px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; text-shadow: 0 2px 8px rgba(0, 0, 0, .55); }
.spielkarte .unterzeile {
  font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--tinte-2); text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.spielkarte .unterzeile b { color: var(--tinte); }
.spielkarte .unterzeile .strich { width: 12px; height: 12px; vertical-align: -1px; }
/* Status-Schild oben rechts: schräg, Neon zum Spielen, dunkel mit Neon-Haken wenn fertig */
.spielkarte .chip {
  position: absolute; right: 14px; top: 12px; isolation: isolate;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 5px;
  color: var(--neon-tinte);
  font-family: var(--anzeige); font-style: italic; font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em;
}
.spielkarte .chip::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: skewX(-12deg); background: var(--neon); box-shadow: 0 0 16px rgba(25, 251, 92, .5); }
.spielkarte .chip .strich { width: 13px; height: 13px; stroke-width: 2.6; }
.spielkarte .chip b { font-family: var(--anzeige); font-weight: 900; font-size: 14px; letter-spacing: .02em; }
.spielkarte .chip .chip-einheit { font-weight: 700; font-size: 11px; opacity: .75; margin-left: -1px; }
.spielkarte[disabled] .chip { color: var(--neon); }
.spielkarte[disabled] .chip::before { background: rgba(6, 10, 18, .82); box-shadow: inset 0 0 0 1px rgba(25, 251, 92, .45); }

/* ---------- Training: Kategorien, Neu dabei, alle Spiele ---------- */
.abschnitt-oben > .augenbraue { display: block; margin: 0 4px 10px; }
.kategorie-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kategorie-karte {
  position: relative; display: block; aspect-ratio: 1 / 1.12; min-height: 150px;
  border-radius: 16px; overflow: hidden; isolation: isolate;
  background: linear-gradient(155deg, var(--a), var(--b));
  border: 1px solid rgb(var(--eis) / .14);
  color: #fff; text-decoration: none; margin-bottom: 5px;
  box-shadow: 0 5px 0 #040810, 0 16px 24px -16px rgba(0, 0, 0, .9);
  transition: transform .12s var(--weich), box-shadow .12s var(--weich);
}
.kategorie-karte:active { transform: translateY(5px); box-shadow: 0 0 0 transparent; }
.kategorie-karte:focus-visible { outline: 3px solid var(--neon); outline-offset: 3px; }
.kategorie-bild {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .5s var(--weich), transform .6s var(--weich);
}
.kategorie-bild.geladen { opacity: 1; }
.kategorie-karte:hover .kategorie-bild.geladen, .kategorie-karte:active .kategorie-bild.geladen { transform: scale(1.06); }
.kategorie-schleier {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6, 10, 18, 0) 32%, rgba(6, 10, 18, .94) 100%);
  border-radius: inherit;
}
.kategorie-symbol {
  position: absolute; right: 10px; top: 10px; z-index: 4;
  width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; transform: skewX(-10deg);
  background: rgba(6, 10, 18, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.kategorie-symbol svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: skewX(10deg); }
.kategorie-text { position: absolute; left: 12px; right: 12px; bottom: 11px; z-index: 4; display: grid; gap: 6px; }
.kategorie-name { font-family: var(--anzeige); font-style: italic; font-size: 17px; font-weight: 900; text-transform: uppercase; letter-spacing: .01em; line-height: 1.05; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); text-wrap: balance; }
.kategorie-zahl {
  position: relative; isolation: isolate; justify-self: start; padding: 3px 9px;
  color: #050A12; font-family: var(--anzeige); font-style: italic; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
}
.kategorie-zahl::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 3px; transform: skewX(-12deg); background: var(--a); box-shadow: 0 0 12px color-mix(in srgb, var(--a) 60%, transparent); }
@media (prefers-reduced-motion: reduce) { .kategorie-bild { transition: opacity .5s var(--weich); } }

.neu-reihe {
  display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 -16px; padding: 2px 16px 8px;
}
.neu-reihe::-webkit-scrollbar { display: none; }
.neu-reihe > .spielkarte { scroll-snap-align: start; }
.neu-marke {
  position: absolute; left: 14px; top: 12px; z-index: 2; isolation: isolate;
  padding: 4px 10px; color: var(--neon-tinte);
  font-family: var(--anzeige); font-style: italic; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
}
.neu-marke::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 3px; transform: skewX(-12deg); background: var(--gold); box-shadow: 0 0 14px rgba(255, 200, 0, .55); }
.neu-marke.klein { position: relative; display: inline-block; padding: 2px 7px; margin-left: 6px; font-size: 9.5px; vertical-align: 2px; }

.spiel-liste {
  display: grid; background: var(--karte); border-radius: 18px; overflow: hidden;
  border: 1px solid var(--rand); box-shadow: var(--schatten);
}
.spiel-zeile { display: flex; align-items: center; gap: 12px; padding: 9px 12px; color: var(--tinte); text-decoration: none; border-top: 1px solid var(--rand); }
.spiel-zeile:first-child { border-top: 0; }
.spiel-zeile:active { background: rgba(255, 255, 255, .04); }
.zeile-bild {
  position: relative; flex: none; width: 68px; height: 46px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(155deg, var(--a), var(--b));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 3px 0 #040810;
}
.zeile-bild .titel { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s var(--weich); }
.zeile-bild .titel.geladen { opacity: 1; }
.zeile-bild .kachel { position: absolute; left: 4px; bottom: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, .45); }
.spiel-zeile-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.spiel-zeile-text b { font-family: var(--anzeige); font-style: italic; font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; }
.spiel-zeile-text small { font-size: 12px; font-weight: 600; color: var(--tinte-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spiel-zeile-chip { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; color: var(--tinte-2); }
.spiel-zeile-chip .strich { width: 13px; height: 13px; stroke-width: 2.6; color: var(--gold); }
.spiel-zeile-chip b { font-family: var(--anzeige); font-style: italic; font-size: 15px; font-weight: 900; color: var(--tinte); }
.spiel-zeile-chip .chip-einheit { font-size: 11px; opacity: .7; }

/* ---------- Serie und Lage ---------- */
.pillen { display: flex; flex-wrap: wrap; gap: 8px; }
.pille { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; font-weight: 800; font-size: 12px; background: var(--karte-2); border: 1px solid var(--rand); }
.pille.serie { background: rgba(255, 138, 31, .14); border-color: rgba(255, 138, 31, .4); color: #FFB066; }
.pille.serie .strich { width: 14px; height: 14px; }
.kachel.wackel { animation: wackel 2.8s ease-in-out infinite; }
@keyframes wackel { 0%, 84%, 100% { transform: skewX(-9deg) rotate(0); } 88% { transform: skewX(-9deg) rotate(-9deg); } 92% { transform: skewX(-9deg) rotate(7deg); } 96% { transform: skewX(-9deg) rotate(-3deg); } }

/* ---------- Untere Leiste ---------- */
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; margin: 0 auto;
  width: min(440px, 100%);
  padding: 9px 12px max(10px, env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px;
  background: linear-gradient(180deg, rgba(6, 10, 18, .82), rgba(4, 7, 13, .97));
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid rgba(25, 251, 92, .25);
  box-shadow: 0 -14px 30px -18px rgba(0, 0, 0, .9);
  z-index: 20;
}
.leiste[hidden] { display: none; }
.leiste a {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 4px 4px 2px; border-radius: 12px;
  text-decoration: none; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tinte-3);
  transition: color .2s;
}
.leiste a .symbol { display: grid; place-items: center; width: 44px; height: 32px; border-radius: 7px; transform: skewX(-12deg); transition: background .25s var(--weich), box-shadow .25s var(--weich); }
.leiste a .strich { width: 22px; height: 22px; transform: skewX(12deg); }
.leiste a[aria-current=page] { color: var(--neon); }
.leiste a[aria-current=page] .symbol { background: var(--neon); color: var(--neon-tinte); box-shadow: 0 0 20px rgba(25, 251, 92, .55); }

/* ---------- Konfetti und Zähler ---------- */
.konfetti { position: fixed; inset: 0; pointer-events: none; z-index: 30; }
.anzeigetafel .stand.springen { animation: springen .6s var(--weich) both; }
@keyframes springen { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }

/* ---------- Hinweise ---------- */
.hinweis { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; font-size: 14px; color: var(--tinte-2); }
.hinweis .strich { margin-top: 2px; color: var(--tinte-3); }
.fuss { margin-top: 28px; text-align: center; font-size: 12px; color: var(--tinte-3); }
.marke { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 5px; background: var(--karte-2); border: 1px solid var(--rand); font-size: 12px; font-weight: 700; color: var(--tinte-2); }
.marke.gut { color: var(--hoch); border-color: rgba(25, 251, 92, .35); }

/* ---------- Spielfläche: echtes Vollbild, kein Rahmen ----------
   Das Spiel deckt den ganzen Bildschirm, auch unter Notch und Home-Leiste. Die Zeichenfläche setzt das Feld selbst in
   den sicheren Bereich (src/spiele/vollbild.js). Oben links geht es raus, oben rechts schaltet der Ton; dazwischen
   zeichnet der Läufer die Anzeige. Maße der Knöpfe = KNOPF, KNOPF_SEITE, KNOPF_LUFT in vollbild.js. */
html.im-spiel, html.im-spiel body { overflow: hidden; overscroll-behavior: none; }
.spiel-vollbild { position: fixed; inset: 0; z-index: 40; background: #05080E; touch-action: none; }
.spielflaeche {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.spiel-knoepfe {
  position: absolute; z-index: 1;
  top: calc(env(safe-area-inset-top, 0px) + 6px);
  left: calc(env(safe-area-inset-left, 0px) + 8px);
  right: calc(env(safe-area-inset-right, 0px) + 8px);
  display: flex; justify-content: space-between; align-items: flex-start;
  pointer-events: none;
}
.spiel-knopf {
  pointer-events: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 40px; height: 40px; padding: 0; border: 0; border-radius: 20px;
  background: rgba(10, 13, 20, .46); color: #fff; text-decoration: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 800; letter-spacing: .01em;
  transition: background .2s, padding .2s, transform .12s;
}
.spiel-knopf svg { width: 20px; height: 20px; }
.spiel-knopf span { display: none; }
.spiel-knopf:active { transform: scale(.94); }
.spiel-raus.nachfragen { padding: 0 14px 0 10px; background: #E5484D; }
.spiel-raus.nachfragen span { display: inline; }
.ton-knopf[aria-pressed="true"] { color: rgba(255, 255, 255, .6); }
.intro { text-align: center; padding: 28px 22px 22px; overflow: hidden; }
.intro .kachel { margin-bottom: 16px; }
.intro-titel {
  display: block; width: calc(100% + 44px); margin: -28px -22px -30px;
  aspect-ratio: 360 / 132; object-fit: cover;
  background: linear-gradient(155deg, var(--karte-3), var(--karte-2));
  opacity: 0; transition: opacity .45s var(--weich);
  -webkit-mask: linear-gradient(180deg, #000 55%, transparent);
  mask: linear-gradient(180deg, #000 55%, transparent);
}
.intro-titel.geladen { opacity: 1; }
.intro-titel + .kachel { position: relative; box-shadow: 0 10px 24px -8px var(--b), 0 0 0 4px var(--karte); }
.intro p { margin: 10px 0 0; color: var(--tinte-2); }
.intro .versuche { display: inline-flex; gap: 6px; margin-top: 16px; }
.intro .versuche i { width: 28px; height: 6px; border-radius: 2px; transform: skewX(-14deg); background: var(--karte-3); }
.intro .versuche i.weg { background: var(--neon); box-shadow: 0 0 8px rgba(25, 251, 92, .6); }
.resultat { text-align: center; padding: 26px 22px 22px; }
.resultat .gross { font-family: var(--anzeige); font-style: italic; font-size: 62px; font-weight: 900; letter-spacing: .01em; line-height: 1; margin: 6px 0; text-shadow: 0 0 22px rgb(var(--eis) / .45); }
.resultat .einheit { margin: -2px 0 8px; font-family: var(--anzeige); font-style: italic; font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--neon); }
.knopf-stapel { display: grid; gap: 10px; margin-top: 20px; }

/* ---------- Abpfiff ---------- */
.anzeigetafel { padding: 22px 20px; text-align: center; }
.anzeigetafel .stand { font-family: var(--anzeige); font-style: italic; font-size: 70px; font-weight: 900; letter-spacing: .02em; line-height: 1; margin: 12px 0 6px; text-shadow: 0 0 26px rgb(var(--eis) / .5); }
.anzeigetafel .namen { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; font-family: var(--anzeige); font-style: italic; font-weight: 800; text-transform: uppercase; }
.anzeigetafel .urteil { font-family: var(--anzeige); font-style: italic; font-size: 24px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; margin-top: 8px; color: var(--neon); text-shadow: 0 0 16px rgba(25, 251, 92, .5); }
.vergleich { display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 10px; padding: 12px 16px; }
.vergleich .wert { font-family: var(--anzeige); font-style: italic; font-weight: 900; min-width: 44px; text-align: center; padding: 3px 6px; border-radius: 6px; background: rgba(0, 0, 0, .3); }
.vergleich .wert.tor { background: var(--neon); color: var(--neon-tinte); box-shadow: 0 0 12px rgba(25, 251, 92, .5); }
.vergleich .gegen { color: var(--tinte-3); font-size: 12px; }
.aufdecken > * { animation: aufdecken .5s var(--weich) both; }
.aufdecken > *:nth-child(1) { animation-delay: .1s; }
.aufdecken > *:nth-child(2) { animation-delay: .45s; }
.aufdecken > *:nth-child(3) { animation-delay: .8s; }
.aufdecken > *:nth-child(4) { animation-delay: 1.15s; }
@keyframes aufdecken { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Formular (Gründen) ---------- */
.feld { display: grid; gap: 8px; padding: 16px; }
.feld + .feld { border-top: 1px solid var(--rand); }
.feld label, .feld .bezeichnung { font-weight: 700; font-size: 14px; }
.feld input[type=text] {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--rand-stark); background: rgba(0, 0, 0, .28); color: var(--tinte);
}
.feld input[type=range] { width: 100%; accent-color: var(--neon); }
.wahl { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 4px; background: rgba(0, 0, 0, .28); border: 1px solid var(--rand); border-radius: 12px; }
.wahl button { border: 0; background: none; padding: 9px 4px; border-radius: 8px; font-weight: 700; font-size: 13px; cursor: pointer; color: var(--tinte-2); }
.wahl button[aria-pressed=true] { background: var(--neon); color: var(--neon-tinte); box-shadow: 0 0 14px rgba(25, 251, 92, .4); }
.planergebnis { padding: 18px 16px; }
.planergebnis .kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.planergebnis .kennzahl { background: rgba(0, 0, 0, .28); border: 1px solid var(--rand); border-radius: 12px; padding: 12px; }
.planergebnis .kennzahl b { display: block; font-family: var(--anzeige); font-style: italic; font-size: 24px; font-weight: 900; }
.planergebnis .kennzahl span { font-size: 12px; color: var(--tinte-2); font-weight: 600; }

.regeln { padding: 6px 18px; }
.regeln dt { font-family: var(--anzeige); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; margin-top: 14px; }
.regeln dd { margin: 4px 0 14px; color: var(--tinte-2); }

/* ---------- Echte Liga: Bausteine ---------- */
.klein-text { font-size: 13px; margin: 8px 0 0; }
.abschnitt-klein { margin-top: 12px; }
.lade { display: flex; align-items: center; gap: 12px; padding: 22px 20px; font-weight: 700; color: var(--tinte-2); }
.lade-punkt { width: 14px; height: 14px; border-radius: 3px; transform: skewX(-12deg); background: var(--neon); box-shadow: 0 0 12px rgba(25, 251, 92, .7); animation: pulsieren 1s ease-in-out infinite alternate; }
@keyframes pulsieren { from { opacity: .45; } to { opacity: 1; } }
.fehler-karte { text-align: center; padding: 26px 22px 20px; }
.fehler-karte h2 { margin-top: 14px; font-size: 21px; }
.fehler-karte p { color: var(--tinte-2); margin: 8px 0 0; }
.meldung { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; text-align: left; }
.meldung.fehler { background: rgba(255, 77, 106, .12); border: 1px solid rgba(255, 77, 106, .35); color: #FF8DA0; }
.meldung.hinweis-text { background: rgba(255, 176, 32, .1); border: 1px solid rgba(255, 176, 32, .3); color: #FFCB6B; display: flex; gap: 8px; align-items: flex-start; }
.meldung.hinweis-text .strich { margin-top: 1px; }
.meldung:empty { display: none; }
.knopf.bestaetigt { --flaeche: rgba(25, 251, 92, .14); --lippe: #08111F; --glut: transparent; color: var(--neon); }
.knopf.gefahr { --flaeche: linear-gradient(180deg, #FF7A8E, #E5304F); --lippe: #8E1530; --glut: rgba(255, 77, 106, .35); color: #fff; }
.rueckfrage { margin-top: 12px; padding: 14px 16px; border-radius: 16px; background: var(--karte); border: 1.5px solid var(--rand-stark); box-shadow: var(--schatten); text-align: left; animation: aufdecken .25s var(--weich) both; }
.rueckfrage p { margin: 0 0 12px; font-size: 14px; color: var(--tinte-2); }
.rueckfrage p b { color: var(--tinte); }
.rueckfrage-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rueckfrage-knoepfe .knopf { min-height: 44px; padding: 0 12px; }
.hinweis-karte { padding: 14px 16px; }
.hinweis-karte p { margin: 0; color: var(--tinte-2); }
.warnung-karte { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; font-size: 14px; color: #FFCB6B; background: rgba(255, 176, 32, .08); border-color: rgba(255, 176, 32, .3); }
.warnung-karte .strich { margin-top: 2px; color: var(--achtung); }
.marke.warnung { color: #FFCB6B; background: rgba(255, 176, 32, .1); border-color: rgba(255, 176, 32, .3); }
.marke.schlecht { color: #FF8DA0; background: rgba(255, 77, 106, .1); border-color: rgba(255, 77, 106, .3); }
.marken-zeile { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 14px 0 0; }
.marken-zeile:empty { display: none; }
.pille.offline { background: rgba(255, 176, 32, .1); border-color: rgba(255, 176, 32, .3); color: #FFCB6B; }
.pille .strich { width: 14px; height: 14px; }

/* ---------- Start ---------- */
.start-held { text-align: center; padding: 30px 8px 6px; }
.start-held h1 { font-size: 40px; margin-top: 16px; }
.start-held p { color: var(--tinte-2); margin: 14px auto 0; max-width: 330px; }
.start-logo { margin: 0; line-height: 0; }
.start-logo img { display: block; width: min(300px, 86%); height: auto; margin: 0 auto; filter: drop-shadow(0 0 22px rgba(25, 251, 92, .3)); animation: logo-rein .55s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes logo-rein { from { opacity: 0; transform: translateY(10px) scale(.94); } }
@media (prefers-reduced-motion: reduce) { .start-logo img { animation: none; } }
.aufklapp { padding: 14px 16px; border-radius: 16px; background: var(--karte); border: 1px solid var(--rand); box-shadow: var(--schatten); text-align: left; margin-bottom: 5px; }
.aufklapp[hidden] { display: none; }
.aufklapp label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.aufklapp p { margin: 0 0 10px; font-size: 14px; }
.code-reihe { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; }
.code-reihe .knopf { min-height: 46px; padding: 0 16px; }
.code-eingabe {
  width: 100%; min-width: 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--rand-stark); background: rgba(0, 0, 0, .28); color: var(--tinte);
  font-family: var(--anzeige); font-style: italic; font-weight: 800; font-size: 18px; letter-spacing: .1em; text-transform: uppercase;
}
.code-eingabe::placeholder { text-transform: none; letter-spacing: 0; font-family: var(--schrift); font-style: normal; font-weight: 500; font-size: 15px; color: var(--tinte-3); }
.start-unten { text-align: center; display: grid; gap: 12px; }

/* ---------- Gründen ---------- */
.vorlagen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vorlagen button {
  display: grid; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 14px; cursor: pointer;
  background: var(--karte-2); border: 1.5px solid var(--rand); box-shadow: 0 3px 0 #050A14;
  transition: transform .12s var(--weich), box-shadow .12s var(--weich), border-color .2s;
}
.vorlagen button b { font-family: var(--anzeige); font-style: italic; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.vorlagen button small { font-size: 12px; color: var(--tinte-2); font-weight: 600; }
.vorlagen button:first-child { grid-column: 1 / -1; }
.vorlagen button:last-child:nth-child(even) { grid-column: 1 / -1; }
.vorlagen button[aria-pressed=true] { border-color: var(--neon); background: rgba(25, 251, 92, .1); box-shadow: 0 3px 0 var(--neon-tief), 0 0 18px -6px rgba(25, 251, 92, .6); }
.vorlagen button:active { transform: translateY(3px); box-shadow: 0 0 0 transparent; }
.tage-wahl { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 4px; }
.tage-wahl button { border: 1.5px solid var(--rand-stark); background: var(--karte-2); border-radius: 8px; padding: 8px 0; font-weight: 800; font-size: 13px; cursor: pointer; color: var(--tinte-2); }
.tage-wahl button[aria-pressed=true] { background: var(--neon); border-color: var(--neon); color: var(--neon-tinte); }
.feld.zwei-spalten { grid-template-columns: 1fr 1fr; gap: 12px; }
.feld.zwei-spalten > div { display: grid; gap: 8px; min-width: 0; }
.feld input[type=time], .feld input[type=date] {
  width: 100%; min-width: 0; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--rand-stark); background: rgba(0, 0, 0, .28); color: var(--tinte);
  font-family: var(--ziffern); font-variant-numeric: tabular-nums; font-size: 15px; min-height: 46px;
}
.feld input[type=range][disabled] { opacity: .4; }

/* ---------- Lobby ---------- */
.einladung { padding: 18px 18px 14px; text-align: center; }
.einladung .leise { margin: 6px 0 0; font-size: 14px; }
.code-gross { font-family: var(--anzeige); font-style: italic; font-size: 36px; font-weight: 900; letter-spacing: .1em; margin: 14px 0 10px; color: var(--neon); text-shadow: 0 0 18px rgba(25, 251, 92, .45); }
.code-gross.riesig { font-size: 44px; margin: 8px 0 4px; }
.zurueck-liste { display: grid; gap: 10px; }
.zurueck-zeile { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 14px 16px; }
.zurueck-zeile [data-ergebnis] { grid-column: 1 / -1; }
.zurueck-zeile [data-ergebnis]:empty { display: none; }
.link-feld { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, .28); border: 1px solid var(--rand); color: var(--tinte-2); font-size: 13px; text-align: left; }
.link-feld span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--ziffern); }
.liste.mitglieder > li { display: flex; align-items: center; gap: 10px; padding: 11px 16px; }
.liste.mitglieder > li > b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste.mitglieder .textknopf { padding: 4px 6px; }
.liste.mitglieder > li.rueckfrage-platz { display: block; padding: 0 12px 12px; border-top: 0; }
.liste.mitglieder > li.rueckfrage-platz:empty { display: none; }
.einstellungen-karte { padding: 6px 16px 16px; }
.einstellungen-karte > .knopf { margin-top: 12px; }
.einstellungen { margin: 0; }
.einstellungen .zeile { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--rand); font-size: 14px; }
.einstellungen .zeile:first-child { border-top: 0; }
.einstellungen dt { color: var(--tinte-3); font-weight: 700; }
.einstellungen dd { margin: 0; font-weight: 700; }
.vorschau-zeile { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(25, 251, 92, .1); border: 1px solid rgba(25, 251, 92, .3); color: #8DFFB0; font-weight: 700; font-size: 14px; }
.vorschau-zeile .strich { margin-top: 1px; }
.warten { display: flex; gap: 14px; align-items: center; padding: 16px 18px; text-align: left; }
.warten p { margin: 2px 0 0; font-size: 14px; }
.puls { position: relative; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 10px rgba(25, 251, 92, .7); }
.puls::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--neon); animation: puls 1.6s ease-out infinite; }
@keyframes puls { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* ---------- Beitreten ---------- */
.namen-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.name-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--karte-2); border: 1px solid var(--rand); font-weight: 700; font-size: 13px; }
.feld .einstellungen .zeile:first-child { padding-top: 2px; }

/* ---------- Saison ---------- */
.ticket-status { text-align: right; margin: 6px 0 0; font-size: 12px; font-weight: 700; }
.ticket-spielfrei { margin: 18px 0 0; font-family: var(--anzeige); font-style: italic; font-weight: 800; text-transform: uppercase; }
.ticket-abriss .zeit .strich { width: 15px; height: 15px; vertical-align: -2px; }
.status-chip { flex: none; padding: 3px 9px; border-radius: 4px; font-family: var(--anzeige); font-style: italic; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; background: var(--karte-2); color: var(--tinte-3); }
.status-chip.gespielt { background: rgba(255, 200, 0, .14); color: var(--gold); }
.status-chip.fertig { background: rgba(25, 251, 92, .14); color: var(--neon); }
.pause-karte { padding: 20px; }
.pause-karte h2 { margin-top: 8px; font-size: 21px; line-height: 1.2; }
.pause-karte p { margin: 8px 0 0; }
.countdown { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 6px; background: rgba(0, 0, 0, .35); border: 1px solid var(--rand-stark); color: var(--gold); font-family: var(--anzeige); font-style: italic; font-weight: 800; font-size: 15px; letter-spacing: .04em; }
.naechster-gegner { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.enthuellung { margin: 16px 0 0; }
p.enthuellung { font-size: 14px; }
.vergleich-gross { display: flex; justify-content: center; align-items: center; gap: 12px; }
.vergleich-gross .wert { font-family: var(--anzeige); font-style: italic; font-weight: 900; font-size: 24px; min-width: 70px; padding: 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, .3); border: 1px solid var(--rand); }
.vergleich-gross .wert.tor { background: var(--neon); color: var(--neon-tinte); border-color: var(--neon); box-shadow: 0 0 16px rgba(25, 251, 92, .5); }
.vergleich-gross .gegen { color: var(--tinte-3); font-size: 12px; font-weight: 700; }
.vergleich-namen { display: flex; justify-content: center; gap: 72px; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--tinte-2); }
.urteil-klein { margin: 10px 0 0; font-family: var(--anzeige); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }

/* ---------- Mehr, Ligen, Gerät, Spielplan ---------- */
.liga-wahl { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 0; background: none; text-align: left; cursor: pointer; }
.liga-wahl:hover { background: rgba(255, 255, 255, .04); }
.liga-wahl .mitte { flex: 1; min-width: 0; display: grid; }
.liga-wahl .mitte b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--anzeige); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.liga-wahl .mitte small { color: var(--tinte-2); font-size: 13px; font-weight: 600; }
.liga-wahl > .strich { color: var(--tinte-3); }
.ablauf { margin: 4px 0 0; color: var(--tinte-2); }
.schritte { text-align: left; margin: 16px 0 0; padding-left: 22px; color: var(--tinte-2); font-size: 14px; display: grid; gap: 4px; }
.spielplan .plan-zeile { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.spielplan .nr { flex: none; width: 30px; height: 28px; border-radius: 6px; transform: skewX(-10deg); display: grid; place-items: center; background: var(--karte-2); font-family: var(--anzeige); font-style: italic; font-weight: 900; font-size: 14px; }
.spielplan .mitte { flex: 1; min-width: 0; display: grid; }
.spielplan .mitte b { font-size: 14px; }
.spielplan .mitte small { color: var(--tinte-2); font-size: 12px; font-weight: 600; }
.spielplan .plan-zeile.offen { background: rgba(25, 251, 92, .07); }
.spielplan .plan-zeile.offen .nr { background: var(--neon); color: var(--neon-tinte); box-shadow: 0 0 12px rgba(25, 251, 92, .5); }
.spielplan .plan-zeile.abgepfiffen { opacity: .55; }

.install-hinweis { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--karte); border: 1px solid var(--rand); box-shadow: var(--schatten); text-decoration: none; }
.install-hinweis > span:not(.kachel) { flex: 1; min-width: 0; display: grid; }
.install-hinweis small { color: var(--tinte-2); font-size: 13px; font-weight: 600; }
.install-hinweis > .strich { color: var(--tinte-3); }
.install-hinweis:empty, [data-install-hinweis]:empty { display: none; }
.iphone-weg { padding: 16px 18px 14px; text-align: center; }
.iphone-weg .code-gross { margin: 10px 0 12px; }
.iphone-weg .schritte a { color: var(--neon); font-weight: 800; }

/* ---------- Bilder: Profilbild im farbigen Ring, Liga-Bild statt Wappen ---------- */
.avatar { position: relative; }
.avatar > img, .kachel > img { position: absolute; display: block; object-fit: cover; background: #0B1426; -webkit-user-drag: none; }
.avatar.mit-bild > img { inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 50%; }
.avatar.gross.mit-bild > img { inset: 2.5px; width: calc(100% - 5px); height: calc(100% - 5px); }
.avatar.klein.mit-bild > img, .avatar.mini.mit-bild > img { inset: 1.5px; width: calc(100% - 3px); height: calc(100% - 3px); }
.avatar.mini { width: 18px; height: 18px; font-size: 8px; box-shadow: none; }
.kachel.mit-bild > img { inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.kachel.mit-bild { box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6); }
.kachel.mit-bild::after { z-index: 1; background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }

.ergebnis-zeile .name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ergebnis-zeile .name.rechts { justify-content: flex-end; }
.ergebnis-zeile .name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liga-wahl .mitte small { display: flex; align-items: center; gap: 6px; min-width: 0; }

.bild-karte > .bild-zeile + .bild-zeile { border-top: 1px solid var(--rand); }
.bild-zeile { display: flex; gap: 14px; align-items: flex-start; padding: 16px; }
.bild-zeile > .kachel, .bild-zeile > .avatar { margin-top: 2px; }
.bild-zeile .mitte { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bild-zeile .mitte small { color: var(--tinte-2); font-size: 13px; font-weight: 500; }
.bild-zeile .meldung { margin-top: 8px; }
.bild-zeile-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 10px; }
.knopf.klein { min-height: 38px; padding: 0 16px; font-size: 14px; gap: 6px; margin-bottom: 4px; }
.knopf.klein::before { box-shadow: 0 4px 0 var(--lippe), inset 0 2px 0 rgba(255, 255, 255, .4); }
.knopf.klein .strich { width: 16px; height: 16px; }

.bild-dialog {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; overflow-y: auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(2, 4, 9, .7);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: einblenden .2s ease both;
}
.bild-dialog-karte {
  width: min(100%, 400px); padding: 20px 18px 14px; border-radius: 24px;
  background: var(--karte); border: 1px solid var(--rand-stark); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8);
  animation: hochploppen .34s var(--weich) both;
}
.bild-dialog-karte h2 { font-size: 21px; }
.bild-dialog-karte > .klein-text { margin: 4px 0 0; }
.zuschnitt-buehne { width: min(100%, 320px); margin: 14px auto 0; }
.zuschnitt-buehne canvas {
  display: block; width: 100%; aspect-ratio: 1; border-radius: 18px; background: #03060C;
  touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
}
.zuschnitt-buehne canvas.greift { cursor: grabbing; }
.zuschnitt-zoom { display: flex; align-items: center; gap: 10px; margin: 14px 6px 0; color: var(--tinte-3); }
.zuschnitt-zoom input { flex: 1; min-width: 0; accent-color: var(--neon); }
.datenschutz { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .28); border: 1px solid var(--rand); font-size: 13px; font-weight: 600; color: var(--tinte-2); }
.datenschutz .strich { width: 16px; height: 16px; margin-top: 1px; color: var(--tinte-3); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
@keyframes hochploppen { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Mehr → Leistung auf diesem Gerät (Testhilfe) */
.leistung { margin-top: 18px; padding: 14px 16px; }
.leistung summary { font-weight: 700; cursor: pointer; }
.leistung ul { list-style: none; margin: 12px 0 8px; padding: 0; display: grid; gap: 8px; }
.leistung li { display: grid; grid-template-columns: 10px 1fr; column-gap: 10px; align-items: baseline; font-size: 14px; }
.leistung li::before { content: ''; width: 10px; height: 10px; border-radius: 50%; grid-row: span 2; align-self: center; background: var(--hoch); }
.leistung li.leistung-mittel::before { background: var(--achtung); }
.leistung li.leistung-schlecht::before { background: var(--runter); }
.leistung li span { color: var(--tinte-2); font-size: 13px; font-variant-numeric: tabular-nums; }


/* Saisonende: Rote Laterne spendiert Liga Plus (Klick-Test) */
.laterne { margin-top: 18px; }
.plus-liste { list-style: none; margin: 14px auto 16px; padding: 0; display: grid; gap: 7px; max-width: 320px; text-align: left; }
.plus-liste li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; font-size: 14px; color: var(--tinte); }
.plus-liste li svg { width: 18px; height: 18px; color: var(--hoch); margin-top: 1px; }
.spenden-danke { margin: 14px 0 0; font-weight: 700; color: var(--hoch); text-wrap: balance; }

/* ---------- Sammelkarten (Richtung C): Folienglanz für Spiele und Spieler ---------- */
.stufe-gold { --k1: #FFF1B5; --k2: #E9BF4C; --k3: #9A6A12; --kt: #2A1A00; }
.stufe-silber { --k1: #FFFFFF; --k2: #C3CCDA; --k3: #6E7B91; --kt: #1D2433; }
.stufe-bronze { --k1: #FFD9B8; --k2: #D98E50; --k3: #7E4519; --kt: #2B1404; }
.stufe-holo { --k1: #FFD6F5; --k2: #9EE7FF; --k3: #B8FFD9; --kt: #1A0B3B; }
.stufe-stahl, .stufe-leer { --k1: #4B5A78; --k2: #26324A; --k3: #141C2E; --kt: var(--tinte); }
@keyframes folie { 0%, 60% { transform: translateX(-160%) rotate(18deg); } 100% { transform: translateX(260%) rotate(18deg); } }

.sammlung { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
.sammelkarte {
  position: relative; display: block; aspect-ratio: 5 / 7; padding: 4px; text-decoration: none; color: var(--kt); isolation: isolate;
  clip-path: polygon(50% 0, 100% 6%, 100% 86%, 50% 100%, 0 86%, 0 6%);
  background: linear-gradient(155deg, var(--k1) 0%, var(--k2) 50%, var(--k3) 100%);
  transition: transform .14s var(--weich);
}
.sammelkarte.stufe-holo { background: linear-gradient(155deg, #FFD6F5 0%, #C9B6FF 30%, #9EE7FF 55%, #B8FFD9 75%, #FFE9A8 100%); }
.sammelkarte:active { transform: scale(.96); }
.sammelkarte::after {
  content: ""; position: absolute; top: -30%; bottom: -30%; left: 0; width: 34%; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: folie 4.2s ease-in-out infinite;
}
.sammelkarte.stufe-leer::after, .sammelkarte.stufe-bronze::after { display: none; }
.sammelkarte .sk-innen {
  position: relative; display: block; height: 100%; overflow: hidden; background: linear-gradient(155deg, var(--a), var(--b));
  clip-path: polygon(50% 0, 100% 6%, 100% 86%, 50% 100%, 0 86%, 0 6%);
}
.sammelkarte .sk-innen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 10, 18, 0) 34%, rgba(6, 10, 18, .94) 76%); }
.sammelkarte .sk-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s var(--weich); }
.sammelkarte .sk-bild.geladen { opacity: 1; }
.sammelkarte.stufe-leer .sk-bild { filter: grayscale(.85) brightness(.6); }
.sammelkarte .sk-stufe {
  position: absolute; z-index: 2; top: 10px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: 3px 8px; border-radius: 4px; background: rgba(6, 10, 18, .78); color: #fff;
  font-family: var(--anzeige); font-style: italic; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.sammelkarte .sk-text { position: absolute; z-index: 2; left: 6px; right: 6px; bottom: 15%; display: grid; gap: 2px; text-align: center; color: #fff; }
.sammelkarte .sk-name { font-family: var(--anzeige); font-style: italic; font-size: 12.5px; font-weight: 900; text-transform: uppercase; letter-spacing: 0; line-height: 1.05; text-shadow: 0 2px 6px rgba(0, 0, 0, .7); -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.sammelkarte .sk-wert { font-size: 10.5px; font-weight: 700; color: var(--tinte-2); }
.sammelkarte .sk-wert b { font-family: var(--anzeige); font-style: italic; font-size: 13px; font-weight: 900; color: var(--neon); }
.sammelkarte .sk-leer { color: var(--tinte-3); }

.sammlung-kopf { margin: 0 2px 14px; display: grid; gap: 8px; }
.sammlung-zahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sammlung-zahlen .sz {
  display: grid; justify-items: center; padding: 7px 4px 6px; border-radius: 8px; color: var(--kt);
  font-family: var(--anzeige); font-style: italic; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  background: linear-gradient(155deg, var(--k1), var(--k2) 55%, var(--k3));
}
.sammlung-zahlen .sz b { font-size: 22px; font-weight: 900; line-height: 1; letter-spacing: 0; }
.sammlung-zahlen .holo { --k1: #FFD6F5; --k2: #9EE7FF; --k3: #B8FFD9; --kt: #1A0B3B; }
.sammlung-zahlen .gold { --k1: #FFF1B5; --k2: #E9BF4C; --k3: #9A6A12; --kt: #2A1A00; }
.sammlung-zahlen .silber { --k1: #FFFFFF; --k2: #C3CCDA; --k3: #6E7B91; --kt: #1D2433; }
.sammlung-zahlen .bronze { --k1: #FFD9B8; --k2: #D98E50; --k3: #7E4519; --kt: #2B1404; }
.sammlung-balken { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.sammlung-balken i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--neon), #9EE7FF, #FFD6F5); box-shadow: 0 0 12px rgba(25, 251, 92, .5); }
.sammlung-hinweis { margin: 0; font-size: 12px; color: var(--tinte-3); }

/* ---------- Spielerkarten („Plaketten“): Wappen-Sonderkarte ----------
   Heller mehrlagiger Rahmen mit Seitenflügeln, tiefe Kartenfarbe mit Glanzstreifen, Metallstern, Kristalle.
   Platz 1 Gold, 2 Silber, 3 Bronze, alle anderen Flutlicht (Königsblau mit Mint); die eigene Karte leuchtet neongrün.
   Breite kommt von außen, Höhe folgt dem Wappen (120 : 148, exakt Aleks' Vorlage), Schrift wächst mit (cqw). */
.spielerkarte {
  --r1: #F1FFFA; --r2: #CBEFE2; --r3: #7FB9A7; --r4: #E9FFF7; --r5: #4F8F7D; --r6: #24524A;
  --b1: #4A9BF0; --b2: #1D5BC0; --b3: #0A2563; --p3: var(--b3);
  --st1: #FFFFFF; --st2: #CFF7E8; --st3: #7FD3B8;
  --kr1: #E6FDFF; --kr2: #5CC8F5; --kr3: #1B5FB8; --kr-kante: #0B2F66;
  --pk-ruecken: #3E9A7F;
  --pk-tinte: #F6FBFF; --pk-tinte-2: #C3E2FF;
  --pk-hell: rgba(205, 240, 255, .42); --pk-dunkel: rgba(0, 12, 40, .5);
  --pk-kante: #062048; --pk-leuchten: rgba(70, 160, 255, .32);
  --pk-praegung: 0 1px 2px rgba(0, 0, 0, .55);
  --pk-streifen: #19FB5C;
  --pk-streifen-1: .2; --pk-streifen-2: .15; --pk-streifen-3: .1;
  --pk-glanz-staerke: .55; --pk-glanz-modus: screen; --pk-stern: .5;
  --pk-rinne: #0B3550; --pk-schliff: .18;
  --perle1: #FFFFFF; --perle2: #EEF5FF; --perle3: #AFC3DE;
  --stein1: #D8FFE9; --stein2: #34E886; --stein3: #0A8A45; --stein4: #03341A;
  position: relative; display: block; flex: none; width: 116px; aspect-ratio: 120 / 148;
  container-type: inline-size; isolation: isolate; color: var(--pk-tinte); line-height: 1;
  font-style: normal; text-transform: none; letter-spacing: 0;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transform: perspective(520px) rotateX(var(--kx, 0deg)) rotateY(var(--ky, 0deg));
  transition: transform .65s cubic-bezier(.18, 1.55, .4, 1);
}
.spielerkarte.pk-kippt { transition: transform .14s ease-out; }
.spielerkarte.pk-rein { animation: pk-rein .7s var(--weich) backwards; }
.spielerkarte.stufe-gold {
  --r1: #FFF8DF; --r2: #F5DC97; --r3: #CCA24E; --r4: #FCEBBB; --r5: #A98232; --r6: #6F541A;
  --b1: #F8DA88; --b2: #E2AC3C; --b3: #8E5C0C;
  --st1: #FFFFFF; --st2: #FFF3CF; --st3: #EBC877;
  --kr1: #FFF7CF; --kr2: #F7C948; --kr3: #B57C0E; --kr-kante: #6B4A06;
  --pk-ruecken: #B8913F;
  --pk-tinte: #2A1700; --pk-tinte-2: #6A4708;
  --pk-hell: rgba(255, 249, 222, .72); --pk-dunkel: rgba(92, 56, 4, .42);
  --pk-kante: #5A3D08; --pk-leuchten: rgba(255, 196, 0, .45);
  --pk-praegung: 0 1px 0 rgba(255, 242, 205, .75);
  --pk-streifen: #7E5208;
  --pk-streifen-1: .38; --pk-streifen-2: .3; --pk-streifen-3: .2;
  --pk-glanz-staerke: .9; --pk-glanz-modus: overlay; --pk-stern: .95;
  --pk-rinne: #7A4C07; --pk-schliff: .28;
  --perle1: #FFFFFF; --perle2: #FBF4E6; --perle3: #D8C7A6;
}
.spielerkarte.stufe-silber {
  --r1: #FFFFFF; --r2: #EEF2F7; --r3: #B5BFCC; --r4: #F9FBFD; --r5: #8F99AA; --r6: #555F70;
  --b1: #F4F7FB; --b2: #C3CCD9; --b3: #76839A;
  --st1: #FFFFFF; --st2: #FFFFFF; --st3: #D5DCE6;
  --kr1: #FFFFFF; --kr2: #CBE4FF; --kr3: #7997BD; --kr-kante: #3D5068;
  --pk-ruecken: #A3ADBC;
  --pk-tinte: #121A26; --pk-tinte-2: #4A5568;
  --pk-hell: rgba(255, 255, 255, .82); --pk-dunkel: rgba(36, 48, 66, .34);
  --pk-kante: #3A4454; --pk-leuchten: rgba(214, 228, 250, .3);
  --pk-praegung: 0 1px 0 rgba(255, 255, 255, .85);
  --pk-streifen: #5F6B80;
  --pk-streifen-1: .55; --pk-streifen-2: .4; --pk-streifen-3: .3;
  --pk-glanz-staerke: .85; --pk-glanz-modus: overlay; --pk-stern: .95;
  --pk-rinne: #5B6576; --pk-schliff: .34;
  --perle1: #FFFFFF; --perle2: #F1F4F8; --perle3: #BCC6D3;
}
.spielerkarte.stufe-bronze {
  --r1: #FFEBDA; --r2: #F1C29E; --r3: #BE7D4C; --r4: #F8D8BF; --r5: #9A5E33; --r6: #61391B;
  --b1: #F4C097; --b2: #CF824C; --b3: #7C3D16;
  --st1: #FFFFFF; --st2: #FFE6D2; --st3: #EAB38A;
  --kr1: #FFE9C6; --kr2: #F2A649; --kr3: #A35810; --kr-kante: #5B2E08;
  --pk-ruecken: #AC7043;
  --pk-tinte: #2A1103; --pk-tinte-2: #6E3A15;
  --pk-hell: rgba(255, 240, 226, .62); --pk-dunkel: rgba(82, 36, 8, .44);
  --pk-kante: #4A2208; --pk-leuchten: rgba(232, 140, 70, .3);
  --pk-praegung: 0 1px 0 rgba(255, 230, 205, .6);
  --pk-streifen: #84431A;
  --pk-streifen-1: .34; --pk-streifen-2: .26; --pk-streifen-3: .18;
  --pk-glanz-staerke: .75; --pk-glanz-modus: overlay; --pk-stern: .95;
  --pk-rinne: #66320F; --pk-schliff: .28;
  --perle1: #FFFFFF; --perle2: #FBEFE3; --perle3: #D6B79A;
}
/* Basis-Wappen: Dunkelblau mit Saphiren (Profil, ohne Liga Plus) */
.spielerkarte.stufe-basis {
  --r1: #DCE7FF; --r2: #9DB4E0; --r3: #4A6497; --r4: #C9D8F7; --r5: #34507F; --r6: #172A4D;
  --b1: #2A4C8F; --b2: #152D61; --b3: #08142F; --p3: var(--b3);
  --st1: #E9F0FF; --st2: #9FB6E6; --st3: #4D6AA3;
  --pk-tinte: #F3F7FF; --pk-tinte-2: #A9BCE3;
  --pk-hell: rgba(200, 220, 255, .38); --pk-dunkel: rgba(0, 8, 28, .55);
  --pk-kante: #06122A; --pk-leuchten: rgba(80, 130, 230, .28);
  --pk-praegung: 0 1px 2px rgba(0, 0, 0, .55);
  --pk-streifen: #19FB5C;
  --pk-streifen-1: .16; --pk-streifen-2: .12; --pk-streifen-3: .08;
  --pk-glanz-staerke: .45; --pk-glanz-modus: screen; --pk-stern: .4;
  --pk-rinne: #0A1834; --pk-schliff: .16;
  --perle1: #FFFFFF; --perle2: #E8EFFC; --perle3: #A8B9D9;
  --stein1: #D6E6FF; --stein2: #5B8CFF; --stein3: #1E44A8; --stein4: #081A47;
}
/* Plus-Wappen: leuchtendes Grün mit weißen Perlen und Diamanten (Profil, mit Liga Plus) */
.spielerkarte.stufe-plus {
  --r1: #E6FFF0; --r2: #7DF5A8; --r3: #16B85A; --r4: #C8FFDD; --r5: #0C8A43; --r6: #04502A;
  --b1: #34D97E; --b2: #0E8F4B; --b3: #04391F; --p3: var(--b3);
  --st1: #FFFFFF; --st2: #CFFFE2; --st3: #6FE3A3;
  --pk-tinte: #F2FFF7; --pk-tinte-2: #A8F5C8;
  --pk-hell: rgba(210, 255, 230, .45); --pk-dunkel: rgba(0, 30, 12, .5);
  --pk-kante: #032B14; --pk-leuchten: rgba(25, 251, 92, .55);
  --pk-praegung: 0 1px 2px rgba(0, 0, 0, .5);
  --pk-streifen: #19FB5C;
  --pk-streifen-1: .22; --pk-streifen-2: .16; --pk-streifen-3: .1;
  --pk-glanz-staerke: .6; --pk-glanz-modus: screen; --pk-stern: .55;
  --pk-rinne: #03341A; --pk-schliff: .22;
  --perle1: #FFFFFF; --perle2: #F0FFF6; --perle3: #B5E8CB;
  --stein1: #FFFFFF; --stein2: #E9FFF4; --stein3: #9FD9BC; --stein4: #2E6B52;
}
.pk-rahmen {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 9px 9px rgba(0, 0, 0, .5)) drop-shadow(0 0 10px var(--pk-leuchten));
}
.spielerkarte.ich .pk-rahmen { filter: drop-shadow(0 9px 9px rgba(0, 0, 0, .5)) drop-shadow(0 0 2.5px rgba(25, 251, 92, .95)) drop-shadow(0 0 12px rgba(25, 251, 92, .5)); }

/* Bild als großes Medaillon mit Metallring (Fotos und Männchen bringen eigene Hintergründe mit), Stern dahinter */
.pk-bild {
  position: absolute; left: 41.5%; top: 15%; width: 38%; aspect-ratio: 1; border-radius: 50%; padding: 1.5cqw;
  background: linear-gradient(145deg, var(--r1) 0%, var(--r3) 42%, var(--r4) 58%, var(--r6) 100%);
  box-shadow: 0 0 0 .9cqw var(--pk-kante), 0 2.4cqw 4.4cqw rgba(0, 0, 0, .42);
}
.pk-bild > img, .pk-monogramm { position: absolute; inset: 1.8cqw; width: calc(100% - 3.6cqw); height: calc(100% - 3.6cqw); border-radius: 50%; }
.pk-bild > img { object-fit: cover; -webkit-user-drag: none; background: var(--p3); }
.pk-bild::after {
  content: ""; position: absolute; inset: 1.8cqw; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse 70% 50% at 32% 14%, rgba(255, 255, 255, .34), transparent 70%);
  box-shadow: inset 0 1.4cqw 2.6cqw rgba(0, 0, 0, .34), inset 0 -.8cqw 1.4cqw rgba(255, 255, 255, .12);
}
.pk-monogramm {
  display: grid; place-items: center;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .38), transparent 56%), linear-gradient(150deg, var(--a), var(--b));
  font-family: var(--anzeige); font-style: italic; font-weight: 900; font-size: 20px; font-size: 20cqw; color: #fff;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .35); letter-spacing: -.02em; padding-right: .06em;
}
.pk-bild.mit-bild .pk-monogramm { visibility: hidden; }

/* Linke Spalte: Platz groß, darunter Logo-Zeichen und die letzten Ergebnisse */
.pk-links { position: absolute; left: 19.5%; top: 16%; width: 21%; display: flex; flex-direction: column; align-items: center; }
.pk-platz {
  font-family: var(--anzeige); font-style: italic; font-weight: 900; font-size: 22px; font-size: 18cqw; line-height: .9;
  letter-spacing: -.03em; padding-right: .06em; text-shadow: var(--pk-praegung);
}
.pk-platz.zweistellig { font-size: 18px; font-size: 15cqw; margin-top: 1.4cqw; }
.pk-klein { margin-top: .8cqw; font-family: var(--schrift); font-weight: 800; font-size: 6.5px; font-size: max(6px, 5.4cqw); letter-spacing: .16em; text-transform: uppercase; color: var(--pk-tinte-2); }
.pk-trenner {
  display: none;
  width: 78%; height: 2px; margin: 2.4cqw 0 2.2cqw;
  background: linear-gradient(90deg, transparent, var(--pk-dunkel), transparent) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, var(--pk-hell), transparent) bottom / 100% 1px no-repeat;
}
.pk-zeichen { width: 72%; margin-top: 2cqw; height: auto; display: block; overflow: visible; fill: var(--pk-tinte); filter: drop-shadow(0 .6px 0 var(--pk-hell)); }
.pk-zeichen-streifen { fill: var(--pk-streifen); }
.pk-form { display: flex; gap: 1.6cqw; margin-top: 2.6cqw; }
.pk-form i { width: 5cqw; height: 5cqw; border-radius: 1.3cqw; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .28), 0 .8px 0 var(--pk-hell); }
.pk-form .f-S { background: linear-gradient(#3BE67A, #12A84A); }
.pk-form .f-U { background: linear-gradient(#C3CBD8, #8D97A8); }
.pk-form .f-N { background: linear-gradient(#FF6B6F, #D2323A); }

/* Name mit Linie darunter, dann die Werte in zwei Spalten mit Trennstrich */
.pk-name {
  position: absolute; left: 14%; right: 14%; top: 53.5%; padding-bottom: 2.2cqw; text-align: center;
  font-family: var(--anzeige); font-style: italic; font-weight: 900; font-size: 13px; font-size: 10.8cqw; line-height: 1.05;
  text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: var(--pk-praegung);
}
.pk-name::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--pk-tinte-2) 18%, var(--pk-tinte-2) 82%, transparent) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, var(--pk-hell) 18%, var(--pk-hell) 82%, transparent) bottom / 100% 1px no-repeat;
  opacity: .8;
}
.pk-werte { position: absolute; left: 16%; right: 16%; top: 63.5%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pk-werte > span { position: relative; display: grid; justify-items: center; gap: .8cqw; }
.pk-werte > span + span::before {
  content: ""; position: absolute; left: 0; top: 4%; bottom: 4%; width: 2px;
  background: linear-gradient(var(--pk-dunkel), var(--pk-dunkel)) left / 1px 100% no-repeat, linear-gradient(var(--pk-hell), var(--pk-hell)) right / 1px 100% no-repeat;
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
}
.pk-werte b { font-family: var(--anzeige); font-style: italic; font-weight: 900; font-size: 11px; font-size: 9.5cqw; line-height: 1; text-shadow: var(--pk-praegung); white-space: nowrap; }
.pk-werte small { font-family: var(--schrift); font-weight: 800; font-size: 6px; font-size: max(6px, 5.2cqw); letter-spacing: .12em; text-transform: uppercase; color: var(--pk-tinte-2); }
.pk-werte.pk-titel small { font-size: 5.5px; font-size: max(5.5px, 4.3cqw); letter-spacing: .02em; }
.pk-sun {
  position: absolute; left: 0; right: 0; top: 77.6%; text-align: center; white-space: nowrap;
  font-family: var(--schrift); font-weight: 800; font-size: 6px; font-size: max(6px, 5.2cqw); letter-spacing: .08em; text-transform: uppercase; color: var(--pk-tinte-2);
}
.pk-sun b { font-family: var(--anzeige); font-style: italic; font-weight: 900; font-size: 8px; font-size: 7.2cqw; letter-spacing: 0; color: var(--pk-tinte); text-shadow: var(--pk-praegung); }

/* Glanz läuft schräg über Rand und Feld; Lichtfleck beim Kippen; Kristallspitzen funkeln */
.pk-glanz {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: var(--pk-glanz-modus);
  clip-path: polygon(50.0% 99.9%, 45.2% 99.5%, 41.1% 98.5%, 36.1% 97.0%, 31.6% 95.9%, 26.9% 94.0%, 23.2% 92.5%, 17.8% 89.4%, 14.3% 87.1%, 12.4% 85.7%, 9.6% 83.0%, 8.0% 80.9%, 6.3% 78.1%, 4.8% 74.5%, 4.1% 67.5%, 4.8% 64.2%, 6.0% 60.0%, 6.4% 58.0%, 8.1% 52.6%, 8.5% 50.3%, 10.3% 43.0%, 10.5% 40.8%, 10.8% 36.5%, 10.6% 26.8%, 9.2% 21.0%, 6.2% 15.1%, 0.0% 9.1%, 3.5% 5.4%, 6.9% 1.9%, 8.5% 1.5%, 13.2% 4.1%, 18.4% 5.5%, 27.5% 6.5%, 32.3% 6.4%, 34.4% 5.9%, 38.2% 5.8%, 45.7% 3.2%, 49.5% 0.2%, 52.6% 2.1%, 55.5% 3.7%, 62.8% 5.8%, 65.8% 6.1%, 68.5% 6.4%, 75.2% 6.1%, 82.6% 5.2%, 89.0% 3.1%, 91.9% 1.4%, 93.9% 2.8%, 99.7% 8.3%, 96.0% 12.7%, 93.3% 16.1%, 90.5% 22.9%, 89.4% 29.0%, 89.4% 37.4%, 89.6% 42.4%, 90.4% 44.4%, 91.6% 51.5%, 92.0% 53.0%, 93.6% 58.5%, 94.6% 61.0%, 95.4% 64.5%, 96.0% 69.4%, 94.7% 75.8%, 93.3% 78.9%, 91.2% 82.0%, 89.4% 83.9%, 87.1% 85.9%, 84.5% 88.2%, 79.6% 91.1%, 75.3% 93.0%, 71.8% 94.8%, 66.9% 96.2%, 63.2% 97.4%, 56.9% 98.7%, 53.2% 99.6%);
}
.pk-glanz::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .4s;
  background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 42%);
}
.spielerkarte.pk-kippt .pk-glanz::after { opacity: .55; transition-duration: .12s; }
.pk-glanz::before {
  content: ""; position: absolute; top: -25%; bottom: -25%; left: 0; width: 46%; opacity: var(--pk-glanz-staerke);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25) 30%, #fff 50%, rgba(255, 255, 255, .25) 70%, transparent);
  transform: translateX(-130%) skewX(-20deg);
  animation: pk-glanz 6s ease-in-out var(--verzug, 0s) infinite;
}
@keyframes pk-glanz { 0%, 52% { transform: translateX(-130%) skewX(-20deg); } 82%, 100% { transform: translateX(330%) skewX(-20deg); } }
.pk-funken i {
  position: absolute; width: 12cqw; aspect-ratio: 1; margin: -6cqw 0 0 -6cqw; pointer-events: none;
  background: radial-gradient(circle, #fff 0 14%, rgba(255, 255, 255, .9) 22%, rgba(255, 244, 196, 0) 60%);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  transform: scale(0); animation: pk-funke 3.6s ease-in-out infinite;
}
.pk-funken i:nth-child(1) { left: 50%; top: 4.4%; }
.pk-funken i:nth-child(2) { left: 50%; top: 96.5%; animation-delay: 1.2s; }
.pk-funken i:nth-child(3) { left: 3%; top: 6.5%; animation-delay: 2.4s; }
@keyframes pk-funke { 0%, 70%, 100% { transform: scale(0) rotate(0); opacity: 0; } 80% { transform: scale(1) rotate(45deg); opacity: 1; } 90% { transform: scale(.35) rotate(90deg); opacity: .6; } }
@keyframes pk-rein { from { opacity: 0; transform: perspective(500px) rotateY(-70deg) scale(.86); } 60% { opacity: 1; transform: perspective(500px) rotateY(7deg) scale(1.02); } to { opacity: 1; transform: none; } }
.ticket-seite + .ticket-stand + .ticket-seite .spielerkarte.pk-rein { animation-delay: .12s; }
@media (prefers-reduced-motion: reduce) {
  .spielerkarte, .pk-glanz::before, .pk-funken i { animation: none; }
}
.ticket-seite { gap: 0; }

.podest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 6px; margin: 0 0 16px; }
.podest-platz { display: grid; justify-items: center; gap: 0; }
.podest-platz .spielerkarte { width: 102px; }
.podest-platz.p1 .spielerkarte { width: 118px; }
.podest-sockel {
  width: 100%; margin-top: -10px; display: grid; place-items: center; border-radius: 10px 10px 4px 4px;
  font-family: var(--anzeige); font-style: italic; font-size: 26px; font-weight: 900;
  background: linear-gradient(180deg, rgb(var(--eis) / .14), rgb(var(--eis) / .03)); border: 1px solid rgb(var(--eis) / .14);
}
.podest-platz.p1 .podest-sockel { height: 62px; color: var(--gold); text-shadow: 0 0 14px rgba(255, 200, 0, .6); background: linear-gradient(180deg, rgba(255, 200, 0, .26), rgba(255, 200, 0, .04)); border-color: rgba(255, 200, 0, .45); }
.podest-platz.p2 .podest-sockel { height: 44px; color: #DCE6F5; }
.podest-platz.p3 .podest-sockel { height: 34px; color: #F0B27A; }

/* ---------- Weltrangliste ---------- */
.tabellen-wahl { margin: -6px 0 16px; }
.wahl a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 4px; border-radius: 8px; text-decoration: none; color: var(--tinte-2);
  font-family: var(--anzeige); font-style: italic; font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
.wahl a .strich { width: 15px; height: 15px; }
.wahl a[aria-pressed=true] { background: var(--neon); color: var(--neon-tinte); box-shadow: 0 0 14px rgba(25, 251, 92, .4); }
.welt-wahl { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; margin: 0 0 14px; }
.welt-pfeil { display: grid; place-items: center; min-height: 48px; border-radius: 14px; border: 1px solid var(--rand); background: var(--karte-2); color: var(--tinte-2); text-decoration: none; }
.welt-pfeil .strich { width: 20px; height: 20px; }
.welt-pfeil:active { background: var(--karte-3); }
.welt-pfeil:focus-visible, .welt-wahl-knopf:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
.welt-wahl-knopf { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 60px; padding: 8px 14px 8px 10px; border-radius: 14px; cursor: pointer; text-align: left; font: inherit; color: var(--tinte);
  border: 1px solid var(--neon); background: rgba(25, 251, 92, .08); box-shadow: 0 0 0 1px rgba(25, 251, 92, .35), 0 0 18px -6px rgba(25, 251, 92, .6); }
.welt-wahl-knopf:active { background: rgba(25, 251, 92, .14); }
.welt-wahl-text { flex: 1; min-width: 0; }
.welt-wahl-text small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.welt-wahl-text b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-family: var(--anzeige); font-style: italic; font-weight: 900; font-size: 19px; line-height: 1.12; text-transform: uppercase; letter-spacing: .02em; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.welt-wahl-runter { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(25, 251, 92, .16); color: var(--neon); }
.welt-wahl-runter .strich { width: 18px; height: 18px; }
/* Schmale Handys: Platz für den Spielnamen (lange Namen umbrechen statt abschneiden) */
@media (max-width: 420px) {
  .welt-wahl { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 6px; }
  .welt-wahl-knopf { gap: 10px; padding: 8px 8px 8px 8px; }
  .welt-wahl-knopf .kachel { --g: 36px !important; }
  .welt-wahl-text b { font-size: 17px; }
  .welt-wahl-runter { width: 22px; height: 22px; background: none; }
}
/* Blatt mit allen Spielen: am Handy von unten, ab Tablet-Breite als Dialog in der Mitte */
.welt-blatt-huelle { place-items: end center; overflow: hidden; padding: max(28px, env(safe-area-inset-top)) 0 0; }
.welt-blatt { position: relative; display: flex; flex-direction: column; width: min(100%, 560px); height: min(88dvh, 760px); padding: 8px 0 0;
  border-radius: 24px 24px 0 0; border-bottom: 0; animation: blatt-hoch .32s var(--weich) both; }
.blatt-griff { align-self: center; width: 40px; height: 5px; margin: 0 0 6px; border-radius: 3px; background: var(--rand-stark); }
.welt-blatt .blatt-zu { top: 14px; right: 14px; }
.welt-blatt .blatt-kopf { padding: 4px 64px 0 18px; min-height: 44px; }
.welt-suche { display: flex; align-items: center; gap: 10px; margin: 12px 16px 4px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--rand-stark); background: rgba(0, 0, 0, .28); color: var(--tinte-3); }
.welt-suche:focus-within { border-color: var(--neon); box-shadow: 0 0 0 1px var(--neon); color: var(--neon); }
.welt-suche input { flex: 1; min-width: 0; height: 48px; border: 0; outline: 0; background: none; color: var(--tinte); font: 600 16px var(--schrift); }
.welt-suche input::placeholder { color: var(--tinte-3); }
.welt-blatt-liste { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 8px 12px; }
.welt-gruppe-titel { display: flex; align-items: center; gap: 9px; margin: 16px 10px 6px; font-family: var(--anzeige); font-style: italic; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-2); }
.welt-gruppe-zahl { margin-left: auto; font-family: var(--schrift); font-style: normal; font-size: 12px; letter-spacing: 0; color: var(--tinte-3); }
.welt-wahl-liste { list-style: none; margin: 0; padding: 0; }
.welt-wahl-zeile { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 22px; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 8px 10px; border: 0; border-radius: 12px;
  background: none; color: var(--tinte); font: inherit; text-align: left; cursor: pointer; }
.welt-wahl-zeile:hover { background: rgba(255, 255, 255, .04); }
.welt-wahl-zeile:focus-visible { outline: 2px solid var(--neon); outline-offset: -2px; }
.welt-wahl-zeile[aria-current=true] { background: rgba(25, 251, 92, .1); box-shadow: inset 0 0 0 1px rgba(25, 251, 92, .5); }
.welt-wahl-name b { display: block; font-family: var(--anzeige); font-style: italic; font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.welt-wahl-name small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--tinte-3); }
.welt-wahl-zeile .plus-marke { font-size: 10px; padding: 3px 8px; }
.welt-wahl-haken { display: grid; place-items: center; color: var(--neon); }
.welt-wahl-haken .strich { width: 20px; height: 20px; }
.welt-blatt .welt-leer { padding-top: 40px; }
.welt-blatt-fuss { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 18px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--rand); font-size: 12px; color: var(--tinte-3); }
.welt-blatt-fuss .plus-marke { font-size: 10px; padding: 3px 8px; }
@keyframes blatt-hoch { from { transform: translateY(100%); } to { transform: none; } }
@media (min-width: 720px) {
  .welt-blatt-huelle { place-items: center; padding: 32px; }
  .welt-blatt { width: min(100%, 540px); height: min(80vh, 720px); border-radius: 24px; border-bottom: 1px solid var(--rand-stark); animation: hochploppen .34s var(--weich) both; }
  .blatt-griff { display: none; }
  .welt-blatt-fuss { padding-bottom: 14px; }
}
.welt-karte { min-height: 120px; }
.welt-liste { list-style: none; margin: 0; padding: 4px 0; }
.welt-zeile { display: grid; grid-template-columns: 40px 34px 1fr auto; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--rand); }
.welt-zeile:first-child { border-top: 0; }
.welt-platz { font-family: var(--anzeige); font-style: italic; font-size: 19px; font-weight: 900; color: var(--tinte-2); text-align: center; }
.welt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.welt-punkte { font-size: 12px; color: var(--tinte-3); white-space: nowrap; }
.welt-punkte b { font-family: var(--anzeige); font-style: italic; font-size: 19px; font-weight: 900; color: var(--tinte); }
.welt-punkte small { font-size: 11px; font-weight: 700; }
.welt-zeile.ich { background: rgba(25, 251, 92, .11); box-shadow: inset 4px 0 0 var(--neon); }
.welt-zeile.ich .welt-platz, .welt-zeile.ich .welt-punkte b { color: var(--neon); text-shadow: 0 0 10px rgba(25, 251, 92, .55); }
.welt-luecke { text-align: center; color: var(--tinte-3); letter-spacing: .3em; padding: 2px 0; border-top: 1px solid var(--rand); }
.welt-leer { margin: 0; padding: 26px 20px; text-align: center; color: var(--tinte-2); }
.welt-fuss { margin: 12px 4px 0; font-size: 12.5px; color: var(--tinte-3); text-align: center; }
.welt-fuss .textknopf { font-size: 12.5px; padding: 4px; color: var(--neon); }

/* ---------- Dein Männchen (Liga Plus) ---------- */
.plus-marke {
  flex: none; position: relative; isolation: isolate; padding: 4px 10px; color: #1A0B3B;
  font-family: var(--anzeige); font-style: italic; font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
}
.plus-marke::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 4px; transform: skewX(-12deg);
  background: linear-gradient(155deg, #FFD6F5, #C9B6FF 30%, #9EE7FF 55%, #B8FFD9 75%, #FFE9A8); box-shadow: 0 0 14px rgba(173, 140, 255, .55); }
.m-buehne { display: grid; justify-items: center; gap: 10px; margin: 2px 0 16px; }
.m-knoepfe { display: flex; align-items: center; gap: 12px; }
.m-reiter { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 12px; padding: 2px 16px 6px; }
.m-reiter::-webkit-scrollbar { display: none; }
.m-reiter-knopf { flex: none; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--rand); background: var(--karte-2); color: var(--tinte-2); cursor: pointer;
  font-family: var(--anzeige); font-style: italic; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.m-reiter-knopf.an { background: var(--neon); border-color: var(--neon); color: var(--neon-tinte); box-shadow: 0 0 14px rgba(25, 251, 92, .4); }
.m-optionen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.m-option { display: grid; justify-items: center; gap: 4px; padding: 8px 4px 7px; border-radius: 12px; border: 1px solid var(--rand); background: var(--karte); cursor: pointer; color: var(--tinte-2); font-size: 11.5px; font-weight: 700; }
.m-option svg { width: 64px; height: 64px; }
.m-option.an { border-color: var(--neon); color: var(--neon); box-shadow: 0 0 0 1px var(--neon), 0 0 16px -4px rgba(25, 251, 92, .7); background: rgba(25, 251, 92, .08); }
.m-option span { text-align: center; line-height: 1.15; font-size: 11px; max-width: 100%; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.m-speichern { margin-top: 18px; display: grid; gap: 8px; text-align: center; }
/* Baukasten: 3D-Vorschau oben – bleibt beim Scrollen stehen, damit jede Wahl sofort am Avatar zu sehen ist */
.m-3d {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 6; margin: -6px -16px 14px; padding: 0 16px 8px;
  background: linear-gradient(180deg, rgba(9, 16, 30, .97), rgba(7, 12, 23, .95));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rand); box-shadow: 0 16px 24px -20px rgba(0, 0, 0, .9);
}
.m-3d::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: env(safe-area-inset-top, 0px); background: rgb(9, 16, 30); }
.m-3d-buehne {
  position: relative; height: clamp(250px, 40vh, 380px); display: grid; place-items: end center; cursor: pointer;
  background: radial-gradient(closest-side at 50% 90%, rgba(25, 251, 92, .18), transparent 72%);
}
.m-3d-buehne .avatar-leinwand { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.m-3d-zeile { margin: 0; text-align: center; font-size: 12px; color: var(--tinte-2); }
.m-3d-hinweis { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: left; line-height: 1.35; }
.m-ich { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 0 0 16px; }
.m-chip { min-width: 48px; justify-content: center; font-weight: 700; }
.m-profilzeile { display: flex; align-items: center; justify-content: center; gap: 22px; }
.m-profilzeile figure { margin: 0; display: grid; justify-items: center; gap: 6px; }
.m-profilzeile figcaption { font-family: var(--anzeige); font-style: italic; font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-2); }
/* Baukasten: Profilbild = 3D-Porträt des Avatars – rund wie in Tabelle und Spieltag, beim Neu-Fotografieren ein Schimmer */
.m-portraet {
  position: relative; width: 116px; height: 116px; border-radius: 50%; overflow: hidden; isolation: isolate;
  background: radial-gradient(circle at 50% 40%, #1F3358, #060A12);
  box-shadow: 0 0 0 3px var(--neon), 0 0 24px -2px rgba(25, 251, 92, .5), 0 14px 26px -10px rgba(0, 0, 0, .8);
}
.m-portraet img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .25s; }
.m-portraet-lader { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .2s;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .3) 50%, transparent 70%) -150% 0 / 250% 100% no-repeat; }
.m-portraet.laedt img { filter: saturate(.55) brightness(.7); }
.m-portraet.laedt .m-portraet-lader { opacity: 1; animation: portraet-schimmer 1.1s linear infinite; }
@keyframes portraet-schimmer { to { background-position: 250% 0; } }
.m-portraet-stand { margin: -4px 0 16px; text-align: center; font-size: 12px; line-height: 1.35; color: var(--tinte-2); }
.m-portraet-stand .strich { display: inline-block; width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; color: var(--neon); }
.m-portraet-stand.ohne-plus .strich { color: var(--tinte-2); }
.m-portraet-stand.fehler { color: var(--achtung); }
.m-profilzeile .m-knoepfe { flex-direction: column; align-items: stretch; }
[data-version] { cursor: default; user-select: none; -webkit-user-select: none; }

/* ---------- Profil: Wappen und Männchen nebeneinander ---------- */
.profil-buehne { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: center; margin: 6px 0 22px; }
.profil-buehne figure { margin: 0; display: grid; justify-items: center; gap: 10px; }
.profil-buehne figcaption { font-family: var(--anzeige); font-style: italic; font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-2); }
.profil-wappen .spielerkarte { width: min(156px, 100%); }
/* Männchen als ganze Figur, freigestellt auf einem leuchtenden Podest */
.pm-figur { position: relative; display: grid; justify-items: center; text-decoration: none; }
.pm-figur::before {
  content: ""; position: absolute; left: 50%; bottom: -3px; width: 150px; max-width: 125%; height: 34px; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(closest-side, rgba(25, 251, 92, .5), rgba(25, 251, 92, .12) 62%, transparent);
}
.pm-figur svg { position: relative; display: block; height: 230px; width: auto; filter: drop-shadow(0 0 12px rgba(25, 251, 92, .2)); }
.profil-buehne figcaption .strich { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; }
.pm-bearbeiten { color: var(--neon); text-decoration: none; }
/* 3D-Avatar im Profil (src/ui/avatar3d.js): Bühne mit durchsichtiger 3D-Fläche, Auswahl darunter */
.profil-avatar .pa-buehne { position: relative; width: 100%; height: 320px; display: grid; place-items: end center; cursor: pointer; }
.pa-buehne .avatar-leinwand { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pa-platzhalter { position: relative; display: grid; justify-items: center; animation: pa-atmen 1.6s ease-in-out infinite; }
.pa-platzhalter svg { display: block; height: 230px; width: auto; opacity: .45; }
@keyframes pa-atmen { 50% { opacity: .6; } }
.profil-avatar-wahl { display: grid; gap: 12px; margin: -8px 0 22px; }
/* Jubel-Moment im Abpfiff: der Sieger als 3D-Figur */
.jubel-moment { margin-top: 12px; display: grid; gap: 4px; }
.jubel-buehne { position: relative; height: 250px; border-radius: 16px; background: radial-gradient(closest-side at 50% 85%, rgba(25, 251, 92, .14), transparent 70%); cursor: pointer; }
.jubel-buehne .avatar-leinwand { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.jubel-zeile { display: flex; align-items: center; justify-content: center; gap: 14px; }
.duell-karte { margin-bottom: 18px; }
.duell-karte .duell-liste { margin: 10px 0 0; text-align: left; }
.pa-zeile { display: grid; gap: 6px; min-width: 0; }
.pa-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pa-chips::-webkit-scrollbar { display: none; }
.pa-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rand-stark); background: var(--karte); color: var(--tinte); border-radius: 12px; padding: 8px 12px; font: 500 14px var(--schrift); cursor: pointer; }
.pa-chip.an { border-color: var(--neon); box-shadow: 0 0 0 1px var(--neon) inset, 0 0 16px rgba(25, 251, 92, .22); }
.pa-chip.gesperrt { opacity: .5; cursor: default; }
.pa-chip small { font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 2px 6px; border-radius: 6px; background: linear-gradient(100deg, #b9a7ff, #8ef0ff 45%, #ffe78a); color: #0b0f14; }
.pa-anziehen { justify-self: center; }
.pa-spielfigur { font-family: var(--anzeige); font-style: italic; font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.pa-spielfigur .strich { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; }
@media (prefers-reduced-motion: reduce) { .pa-platzhalter { animation: none; } }
.profil-saison { padding: 16px 16px 14px; display: grid; gap: 12px; margin-bottom: 22px; }
.profil-saison.leer p { margin: 0; color: var(--tinte-2); }
.profil-saison-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.profil-werte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.profil-werte div { display: grid; justify-items: center; gap: 3px; padding: 10px 4px 8px; border-radius: 12px; background: rgb(var(--eis) / .05); border: 1px solid var(--rand); }
.profil-werte b { font-family: var(--anzeige); font-style: italic; font-weight: 900; font-size: 22px; line-height: 1; color: var(--tinte); }
.profil-werte small { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-3); }
.profil-zeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--tinte-2); }
.profil-zeile b { color: var(--tinte); }
.profil-form { display: flex; gap: 5px; }
.profil-form i { width: 14px; height: 14px; border-radius: 4px; }
.profil-form .f-S { background: linear-gradient(#3BE67A, #12A84A); }
.profil-form .f-U { background: linear-gradient(#C3CBD8, #8D97A8); }
.profil-form .f-N { background: linear-gradient(#FF6B6F, #D2323A); }
.profil-plus { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 14px 16px; margin-bottom: 22px; }
.profil-plus b { font-family: var(--anzeige); font-style: italic; font-weight: 800; font-size: 16px; }
.profil-plus p { margin: 3px 0 0; font-size: 13px; color: var(--tinte-2); }
.profil-plus.an { border-color: rgba(25, 251, 92, .45); box-shadow: 0 0 22px rgba(25, 251, 92, .15); }

/* ---------- Hall of Fame: beleuchtete Vitrine mit Pokalen ---------- */
.ruhm { margin-bottom: 22px; }
.ruhm-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.ruhm-zahl { font-family: var(--anzeige); font-style: italic; font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.ruhm-vitrine {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; padding: 18px 0 6px; border-radius: 18px; overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 45% at 50% -8%, rgba(255, 228, 150, .16), transparent 70%), linear-gradient(180deg, #131D35, #070C18);
  border: 1px solid var(--rand-stark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -40px 50px -40px rgba(0, 0, 0, .9), var(--schatten);
}
.ruhm-vitrine::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, .07) 36%, transparent 45%); }
.rh-fach { margin: 0; display: grid; justify-items: center; align-content: start; gap: 8px; min-width: 0; }
.rh-pokal { position: relative; width: 100%; height: 104px; display: grid; place-items: end center; padding-bottom: 4px; }
/* Lichtkegel von oben und gläserner Regalboden mit grüner Kante */
.rh-pokal::before { content: ""; position: absolute; left: 12%; right: 12%; top: -14px; bottom: 0; background: radial-gradient(55% 75% at 50% 0%, rgba(255, 240, 205, .16), transparent 72%); pointer-events: none; }
.rh-pokal::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 4px; background: linear-gradient(180deg, rgba(207, 230, 255, .3), rgba(207, 230, 255, .06)); box-shadow: 0 1px 0 rgba(25, 251, 92, .55), 0 8px 14px -6px rgba(25, 251, 92, .35); }
.rh-pokal svg { position: relative; width: 78%; max-width: 92px; height: auto; filter: drop-shadow(0 8px 9px rgba(0, 0, 0, .6)); }
.rh-meister .rh-pokal svg { filter: drop-shadow(0 0 14px rgba(255, 200, 0, .32)) drop-shadow(0 8px 9px rgba(0, 0, 0, .6)); }
.rh-vize .rh-pokal svg { width: 68%; }
.rh-dritter .rh-pokal svg { width: 62%; }
.rh-fach figcaption { display: grid; justify-items: center; gap: 2px; text-align: center; padding: 0 6px; min-width: 0; }
.rh-leer .rh-pokal::before { display: none; }
.rh-fach figcaption b { font-family: var(--anzeige); font-style: italic; font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte); }
.rh-meister figcaption b { color: var(--gold); }
.rh-vize figcaption b { color: #DDE4EE; }
.rh-dritter figcaption b { color: #EDA673; }
.rh-fach figcaption small { font-size: 10.5px; line-height: 1.25; color: var(--tinte-3); overflow-wrap: anywhere; }
.rh-geist .rh-pokal svg { filter: none; }
.rh-geist figcaption b { color: var(--tinte-3); }
.rh-geist.an figcaption b { color: var(--neon); }
.rh-geist.an .rh-pokal svg { animation: rh-puls 2.4s ease-in-out infinite; }
@keyframes rh-puls { 50% { opacity: .55; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .rh-geist.an .rh-pokal svg { animation: none; } }
.ruhm-hinweis { margin: 10px 2px 0; font-size: 13px; color: var(--tinte-2); }
.profil-maennchen.gesperrt .pm-figur::before { background: radial-gradient(closest-side, rgba(159, 179, 217, .3), rgba(159, 179, 217, .08) 62%, transparent); }
.profil-maennchen.gesperrt .pm-figur svg { filter: none; }

/* ---------- Liga-Werkzeuge (Liga Plus): Spieleliste und Vorschlag in der Lobby ---------- */
.plus-gesperrt { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 14px 16px; }
.plus-gesperrt .strich { width: 20px; height: 20px; color: var(--tinte-3); margin-top: 2px; }
.plus-gesperrt p { margin: 0; font-size: 13.5px; color: var(--tinte-2); }
.spielwahl-gruppe { display: grid; gap: 6px; margin: 12px 0 4px; }
.wahl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wahl-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px; border-radius: 10px; border: 1px solid var(--rand); background: var(--karte-2); color: var(--tinte-2); font: 700 12.5px var(--schrift); cursor: pointer; }
.wahl-chip[aria-pressed="true"] { border-color: var(--neon); color: var(--tinte); background: rgba(25, 251, 92, .1); box-shadow: 0 0 0 1px rgba(25, 251, 92, .45); }
.wahl-chip[aria-pressed="false"] .kachel { filter: grayscale(.85) brightness(.7); }
span.wahl-chip { cursor: default; }
.wahl-chips.klein .wahl-chip { font-size: 11.5px; padding: 3px 8px 3px 3px; }
.spielwahl-zahl { margin: 12px 0 6px; font-size: 13px; color: var(--tinte-2); }
.spielwahl-zahl b { color: var(--neon); font-family: var(--anzeige); font-style: italic; font-size: 16px; }
.spielwahl-zahl.zu-wenig b { color: var(--runter); }
.vorschlag { display: grid; gap: 12px; padding: 16px; border-color: rgba(25, 251, 92, .35); }
.vorschlag-liste { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--tinte-2); font-size: 14px; }
.vorschlag-liste b { color: var(--tinte); }
.zustimmung { display: grid; gap: 6px; }
.zustimmung p { margin: 0; font-size: 13px; color: var(--tinte-2); }
.zustimmung p b { color: var(--tinte); }
.zustimmung-balken { height: 8px; border-radius: 99px; background: rgb(var(--eis) / .08); overflow: hidden; }
.zustimmung-balken i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--neon-2), var(--neon)); box-shadow: 0 0 10px rgba(25, 251, 92, .5); }

/* ---------- Statistik im Profil (Liga Plus) ---------- */
.statistik { display: grid; gap: 12px; }
.statistik > .augenbraue { margin-bottom: -2px; }
.statistik-karte { padding: 14px 16px 12px; }
.statistik-karte h3 { margin: 0 0 10px; font-family: var(--anzeige); font-style: italic; font-weight: 800; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte); display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.statistik-karte h3 small { font-family: var(--schrift); font-style: normal; font-weight: 600; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--tinte-3); }
.marke.schlecht { color: #FFB3BE; background: rgba(255, 77, 106, .14); border-color: rgba(255, 77, 106, .4); }
.sv-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sv-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.sv-mitte { display: grid; gap: 5px; min-width: 0; }
.sv-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sv-kopf b { font-size: 14.5px; color: var(--tinte); }
.sv-mitte small { font-size: 12px; color: var(--tinte-3); }
.sv-mitte small b { color: var(--tinte); }
.sv-balken { display: flex; height: 7px; border-radius: 99px; overflow: hidden; background: rgb(var(--eis) / .07); }
.sv-balken i { display: block; height: 100%; }
.sv-balken .s { background: linear-gradient(90deg, #12A84A, #3BE67A); }
.sv-balken .u { background: #8D97A8; }
.sv-balken .n { background: linear-gradient(90deg, #D2323A, #FF6B6F); }
.sv-tore { font-family: var(--anzeige); font-style: italic; font-weight: 900; font-size: 18px; color: var(--tinte); font-variant-numeric: tabular-nums; }
.sb-titel { margin: 4px 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-3); }
.sb-liste { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 9px; }
.sb-liste li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.sb-liste li div { display: grid; gap: 1px; min-width: 0; }
.sb-liste b { font-size: 14px; color: var(--tinte); }
.sb-liste small { font-size: 12px; color: var(--tinte-3); }
.sb-wert { font-family: var(--anzeige); font-style: italic; font-weight: 900; font-size: 17px; color: var(--neon); font-variant-numeric: tabular-nums; text-align: right; }
.sb-wert small { display: block; font-family: var(--schrift); font-style: normal; font-weight: 600; font-size: 10.5px; color: var(--tinte-3); }
.fieberkurve { display: block; width: 100%; height: auto; overflow: visible; }
.fk-gitter { stroke: rgb(var(--eis) / .1); stroke-width: 1; }
.fk-achse { fill: var(--tinte-3); font: 600 10px var(--schrift); }
.fk-titel { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; }
.fk-linie { fill: none; stroke: var(--neon); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(25, 251, 92, .55)); }
.fk-punkt { fill: #07120C; stroke: var(--neon); stroke-width: 2.2; }
.fk-punkt.jetzt { fill: var(--neon); }

/* ---------- Saison-Kollektion (Liga Plus) im Baukasten ---------- */
.m-kollektion { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 12px 14px; margin: 0 0 12px; border-color: rgba(25, 251, 92, .35); background: linear-gradient(120deg, rgba(25, 251, 92, .1), rgba(46, 230, 255, .06) 60%, transparent), var(--karte); }
.m-kollektion b { font-family: var(--anzeige); font-style: italic; font-weight: 800; font-size: 15px; }
.m-kollektion p { margin: 2px 0 0; font-size: 12.5px; color: var(--tinte-2); }
.m-option { position: relative; }
.m-option.kollektion { border-color: rgba(25, 251, 92, .3); }
.m-kollektion-marke { position: absolute; top: 4px; right: 4px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 5px; border-radius: 4px; background: linear-gradient(135deg, #19FB5C, #2EE6FF); color: #03200C; font: italic 800 8.5px var(--anzeige); letter-spacing: .04em; text-transform: uppercase; }
.m-kollektion-marke .strich { width: 9px; height: 9px; }
.m-option.gesperrt { cursor: not-allowed; }
.m-option.gesperrt svg { filter: grayscale(.7) brightness(.55); }
.m-option.gesperrt span { color: var(--tinte-3); }

/* Karriere (noch „Bald verfügbar“): Hinweis-Karte und Ligapyramide */
.karriere-bald { display: grid; gap: 10px; }
.karriere-kopf .karriere-abzeichen { flex: none; }
.karriere-marke { justify-self: center; margin-top: 4px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: linear-gradient(135deg, #FDE68A, #D97706); color: #2A1A00; }
.karriere-pyramide { display: grid; gap: 6px; justify-items: center; margin: 18px 0 8px; }
.karriere-stufe { width: var(--breite); min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 6px 12px 6px 6px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(253, 230, 138, .22); }
.karriere-stufe:first-child { border-color: rgba(167, 139, 250, .8); box-shadow: 0 0 24px rgba(139, 123, 255, .45); }
.karriere-stufe b { font-size: 14px; }
.karriere-stufe small { grid-column: 2; color: var(--tinte-2); font-size: 11.5px; }
.karriere-stufe .karriere-abzeichen { grid-row: span 2; }
.karriere-stufe.karriere-silber { border-color: rgba(199, 210, 224, .3); }
.karriere-stufe.karriere-bronze { border-color: rgba(217, 138, 78, .28); }
.karriere-stufe.karriere-platin { border-color: rgba(165, 200, 255, .55); }
.karriere-nr { grid-row: span 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, #FDE68A, #D97706); color: #2A1A00; font-weight: 800; font-size: 13px; }

/* Karte „Dein Konto“ (Mehr): Konto-Kennung, Liga Plus und Pass bis … */
.konto-karte { padding: 14px 16px; margin-bottom: 22px; }
.konto-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.konto-rechte { list-style: none; margin: 10px 0 6px; padding: 0; display: grid; gap: 8px; }
.konto-rechte li { display: flex; align-items: center; gap: 10px; }
.konto-rechte .plus-marke { flex: none; }
.bild-hinweis { margin: 0; padding: 4px 6px 12px; line-height: 1.45; }

/* ---------- Benachrichtigungen (Mehr → Benachrichtigungen) ---------- */
.push-karte { padding: 4px 16px; }
.push-karte > .meldung, .push-karte [data-meldung] > .meldung { margin: 0 0 14px; }
.push-zeile { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.push-liste .push-zeile { padding: 13px 16px; border-top: 1px solid var(--rand); }
.push-liste .push-zeile:first-child { border-top: 0; }
.push-text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.push-text b { font-weight: 700; color: var(--tinte); }
.push-text small { color: var(--tinte-2); font-size: 13px; line-height: 1.35; }
.push-zeile.haupt .push-text b { font-size: 17px; }
.push-hinweis { padding: 0 0 16px; }
.push-hinweis p { margin: 0 0 12px; color: #FFCB6B; font-size: 14px; line-height: 1.45; }
.push-stunden { display: flex; align-items: center; gap: 8px; padding: 0 0 14px; color: var(--tinte-2); font-size: 14px; flex-wrap: wrap; }
.push-stunden select { font: inherit; font-weight: 700; color: var(--tinte); background: var(--karte-3); border: 1px solid var(--rand-stark); border-radius: 10px; padding: 7px 10px; }
.push-stunden select:disabled { opacity: .45; }
.push-fuss { margin: 10px 4px 0; }
.schalter { flex: none; position: relative; width: 52px; height: 32px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
  background: var(--karte-3); box-shadow: inset 0 0 0 1px var(--rand-stark); transition: background .2s var(--weich); }
.schalter > span { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--tinte-2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45); transition: transform .2s var(--weich), background .2s var(--weich); }
.schalter[aria-checked="true"] { background: linear-gradient(180deg, var(--neon), var(--neon-2)); box-shadow: none; }
.schalter[aria-checked="true"] > span { transform: translateX(20px); background: #fff; }
.schalter:disabled { opacity: .4; cursor: default; }
.schalter:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }


/* ---------- Konto, Hilfe, Rechtliches, Melden, Blockieren (19.10.2026) ---------- */
.link-liste > li > .link-zeile { display: flex; align-items: center; gap: 12px; padding: 11px 14px; color: var(--tinte); text-decoration: none; font-weight: 700; font-size: 15px; }
.link-liste .link-zeile > .link-text { flex: 1; min-width: 0; }
.link-liste .link-zeile > .kachel { flex: none; }
.link-liste .link-zeile small { display: block; font-weight: 500; font-size: 12px; color: var(--tinte-3); margin-top: 1px; }
.link-liste .link-zeile > .strich { width: 18px; height: 18px; color: var(--tinte-3); }
.konto-link { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--neon); text-decoration: none; }
.recht { padding: 6px 18px 14px; }
.recht section + section { border-top: 1px solid var(--rand); }
.recht h2 { font-size: 16px; margin: 16px 0 8px; }
.recht p, .recht li { font-size: 14px; line-height: 1.55; color: var(--tinte-2); }
.recht p { margin: 0 0 10px; }
.recht ul { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 6px; }
.recht b { color: var(--tinte); }
.recht a, .alter-karte a, .recht-links a, .hilfe-kontakt a:not(.knopf) { color: var(--neon); }
.recht-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 22px 0 8px; font-size: 12px; }
.recht-links a { color: var(--tinte-3); text-underline-offset: 3px; }
.hilfe-kontakt { display: flex; gap: 14px; align-items: flex-start; padding: 16px; }
.hilfe-kontakt > div { flex: 1; min-width: 0; }
.hilfe-kontakt p { margin: 4px 0 10px; font-size: 14px; }
.hilfe-kontakt .knopf-stapel { margin-top: 12px; }
.email-zeile { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--rand-stark); background: rgba(0, 0, 0, .28); font-weight: 700; font-size: 16px; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
details.frage { padding: 0 16px; }
details.frage + details.frage { border-top: 1px solid var(--rand); }
details.frage summary { cursor: pointer; padding: 14px 0; font-weight: 700; font-size: 15px; }
details.frage p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--tinte-2); }
.tipp-zeile { text-align: center; margin-top: 14px; }
.antippbar { cursor: pointer; }
.antippbar:focus-visible { outline: 2px solid var(--neon); outline-offset: -2px; }
tr.antippbar:active td, li.antippbar:active { background: rgba(255, 255, 255, .04); }
.spieler-blatt { position: relative; }
.blatt-zu { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--rand-stark); background: var(--karte-2); color: var(--tinte-2); cursor: pointer; }
.blatt-zu .strich { width: 18px; height: 18px; }
.blatt-kopf { display: flex; align-items: center; gap: 14px; padding-right: 44px; }
.blatt-kopf h2 { margin: 0; font-size: 20px; overflow-wrap: anywhere; }
.blatt-kopf small { display: block; margin-top: 2px; font-size: 13px; }
.blatt-aktionen { margin-top: 18px; }
.melden-form { display: grid; gap: 10px; margin-top: 16px; }
.melden-form .bezeichnung { font-weight: 700; font-size: 14px; }
.melden-form .knopf { margin-top: 6px; }
.melden-form .klein-text { margin: 0; text-align: center; }
.gruende { display: flex; flex-wrap: wrap; gap: 8px; }
.gruende button { border: 1px solid var(--rand-stark); background: rgba(0, 0, 0, .28); color: var(--tinte-2); padding: 9px 13px; border-radius: 999px; font-weight: 700; font-size: 13px; cursor: pointer; }
.gruende button[aria-pressed=true] { background: var(--neon); border-color: var(--neon); color: var(--neon-tinte); box-shadow: 0 0 14px rgba(25, 251, 92, .35); }
.blatt-danke { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 12px; }
.blatt-danke p { margin: 4px 0 0; font-size: 14px; }
.blockiert-liste > li { display: flex; align-items: center; gap: 10px; padding: 11px 16px; }
.blockiert-liste > li > b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blockiert-karte .blockiert-leer { margin: 0; padding: 14px 16px; font-size: 14px; }
.blockiert-karte [data-meldung] { padding: 0 16px; }
.blockiert-karte [data-meldung]:empty { display: none; }
.loesch-karte { display: flex; gap: 14px; align-items: flex-start; padding: 16px; }
.loesch-karte > div { flex: 1; min-width: 0; }
.loesch-karte p { margin: 0 0 12px; font-size: 14px; color: var(--tinte-2); }
.loesch-punkt { display: block; margin-top: 8px; padding-left: 14px; position: relative; }
.loesch-punkt::before { content: ''; position: absolute; left: 2px; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--runter); }
.alter-held { margin-bottom: 8px; }
.alter-karte { padding: 20px 18px; display: grid; gap: 12px; }
.alter-karte h2 { margin: 0; font-size: 22px; }
.alter-karte p { margin: 0; }
.alter-karte .knopf-stapel { margin-top: 4px; }
.jahr-eingabe { font-size: 24px; letter-spacing: .3em; text-align: center; }

/* ---------- Liga Plus & Pass (Kauf-Seite, ui/kauf.js): helles Blatt im Design-System ---------- */
.kauf-link { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; color: var(--neon); text-decoration: none; white-space: nowrap; }
.kauf-link .strich { width: 14px; height: 14px; }
.konto-kauf { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--neon); text-decoration: none; }
.konto-kauf .strich { width: 16px; height: 16px; }
.kauf-blatt {
  --k-grund: #F6F7FB; --k-karte: #FFFFFF; --k-tinte: #0F172A; --k-tinte-2: #475569; --k-tinte-3: #94A3B8; --k-rand: #E2E8F0;
  --k-akzent: #0BC64A; --k-akzent-tief: #06832F;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  color: var(--k-tinte); background: var(--k-grund);
  border-radius: 28px; padding: 26px 16px 22px; margin: 0 -4px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .8);
  color-scheme: light;
}
.kauf-blatt h1, .kauf-blatt h2 { font-family: inherit; font-style: normal; text-transform: none; letter-spacing: -.02em; }
.kauf-blatt a { color: inherit; }
.kauf-blatt .kachel, .kauf-blatt .kachel svg { transform: none; }
.kauf-kopf { text-align: center; margin-bottom: 18px; }
.kauf-kopf .kachel { margin-bottom: 12px; }
.kauf-kopf h1 { font-size: 28px; font-weight: 800; line-height: 1.1; }
.kauf-kopf p { margin: 8px auto 0; max-width: 32ch; color: var(--k-tinte-2); font-size: 15px; }
.kauf-bald { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 12px 14px; border-radius: 16px; background: #EEF2FF; color: #3730A3; font-size: 13.5px; }
.kauf-bald .strich { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.kauf-bald b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.kauf-karte { background: var(--k-karte); border: 1px solid var(--k-rand); border-radius: 22px; padding: 18px 16px 14px; margin-top: 14px; box-shadow: 0 12px 28px -20px rgba(15, 23, 42, .35); }
.kauf-karte-kopf { display: flex; align-items: center; gap: 14px; }
.kauf-karte-kopf h2 { font-size: 21px; font-weight: 800; }
.kauf-karte-kopf p { margin: 2px 0 0; color: var(--k-tinte-2); font-size: 13.5px; }
.kauf-aktiv { display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 0; padding: 5px 10px; border-radius: 999px; background: #DCFCE7; color: #166534; font-size: 13px; font-weight: 700; }
.kauf-aktiv .strich { width: 15px; height: 15px; stroke-width: 2.6; }
.kauf-vorteile { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.kauf-vorteile li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.35; }
.kauf-vorteile .strich { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--k-akzent); stroke-width: 2.6; }
.kauf-optionen { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.kauf-option { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; min-height: 58px; padding: 10px 10px 10px 14px; border: 1px solid var(--k-rand); border-radius: 16px; background: #FAFBFD; }
.kauf-option-text b { display: block; font-size: 15px; font-weight: 700; }
.kauf-option-text small { display: block; margin-top: 1px; font-size: 12px; font-weight: 600; color: var(--k-akzent-tief); }
.kauf-preis { font-size: 15px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kauf-knopf {
  border: 0; border-radius: 12px; padding: 10px 14px; min-width: 84px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 800; color: #fff;
  background: linear-gradient(160deg, #34D399, #059669); box-shadow: 0 8px 16px -10px #059669, inset 0 1px 0 rgba(255, 255, 255, .35);
}
.kauf-knopf:active { transform: scale(.97); }
.kauf-knopf[disabled] { background: #CBD5E1; box-shadow: none; color: #fff; cursor: not-allowed; transform: none; }
.kauf-knopf.leer { display: inline-grid; place-items: center; background: #E2E8F0; color: var(--k-tinte-3); box-shadow: none; }
.kauf-klein { margin: 12px 2px 0; font-size: 12.5px; line-height: 1.45; color: var(--k-tinte-2); }
.kauf-wieder {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 16px; padding: 13px 16px;
  border: 1px solid var(--k-rand); border-radius: 16px; background: var(--k-karte); color: var(--k-tinte);
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.kauf-wieder .strich { width: 18px; height: 18px; }
.kauf-wieder[disabled] { color: var(--k-tinte-3); cursor: not-allowed; }
.kauf-erfolg { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 6px; padding: 14px; border-radius: 18px; background: #ECFDF5; border: 1px solid #A7F3D0; }
.kauf-erfolg.warten { background: #F1F5F9; border-color: var(--k-rand); }
.kauf-erfolg b { display: block; font-size: 15.5px; }
.kauf-erfolg p { margin: 4px 0 0; font-size: 13.5px; color: var(--k-tinte-2); }
.kauf-weiter { display: inline-block; margin-top: 10px; padding: 8px 14px; border-radius: 12px; background: var(--k-tinte); color: #fff !important; font-size: 14px; font-weight: 700; text-decoration: none; }
.kauf-blatt .meldung.fehler { background: #FEF2F2; border-color: #FECACA; color: #B91C1C; }
.kauf-blatt [data-meldung]:empty, .kauf-blatt [data-erfolg]:empty { display: none; }
.kauf-fuss { margin-top: 18px; padding: 0 4px; font-size: 12.5px; line-height: 1.5; color: var(--k-tinte-2); }
.kauf-fuss p { margin: 0 0 8px; }
.kauf-rechtliches { text-align: center; font-weight: 700; }
.kauf-rechtliches a { color: var(--k-tinte); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Freunde: Spieler-ID, QR-Code, Freundesliste (Profil → Freunde, 20.10.2026) ---------- */
.id-karte { margin-top: 22px; padding: 16px 16px 12px; text-align: center; }
.id-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
.id-kopf .augenbraue { margin: 0; }
.id-freunde {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  background: var(--karte-2); border: 1px solid var(--rand-stark); color: var(--tinte);
  font-weight: 700; font-size: 13px; text-decoration: none;
}
.id-freunde .strich { width: 16px; height: 16px; }
.zahl-punkt {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--runter); color: #fff; font-size: 11px; font-weight: 800;
}
.id-gross {
  font-family: var(--anzeige); font-style: italic; font-weight: 900; font-size: clamp(30px, 10vw, 40px); letter-spacing: .08em;
  margin: 14px 0 6px; color: var(--neon); text-shadow: 0 0 18px rgba(25, 251, 92, .45); white-space: nowrap; user-select: all; -webkit-user-select: all;
}
.id-gross.laedt { color: var(--tinte-3); text-shadow: none; }
.id-erklaerung { margin: 0 0 14px; }
.id-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.id-knoepfe .knopf { padding: 0 12px; min-height: 46px; font-size: 14px; }
.id-qr { margin-top: 6px; }
.id-qr summary { cursor: pointer; padding: 8px; color: var(--tinte-2); font-weight: 700; font-size: 14px; list-style: none; }
.id-qr summary::-webkit-details-marker { display: none; }
.id-qr summary::after { content: ' ▾'; color: var(--tinte-3); }
.id-qr[open] summary::after { content: ' ▴'; }
.qr-rahmen { width: min(240px, 70vw); margin: 6px auto 10px; padding: 10px; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px -12px rgba(25, 251, 92, .45); }
.qr { display: block; width: 100%; height: auto; }
.id-schrift { font-family: var(--anzeige); font-style: italic; letter-spacing: .06em; }
.feld input.id-eingabe { font-family: var(--anzeige); font-style: italic; font-weight: 800; font-size: 20px; letter-spacing: .08em; text-transform: uppercase; }
.feld input.id-eingabe::placeholder { text-transform: none; letter-spacing: .02em; font-weight: 600; font-size: 16px; }
.feld small { font-size: 12.5px; line-height: 1.4; }
.freund-name { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; font-size: 15px; }
.freund-liste > li.freund-zeile { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.freund-knopf { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 2px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.freund-knopf > .strich { flex: none; width: 18px; height: 18px; color: var(--tinte-3); }
.freund-text { flex: 1; min-width: 0; display: grid; }
.freund-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.freund-text small { font-size: 12.5px; color: var(--tinte-3); margin-top: 1px; }
.freund-aktionen { flex: none; display: flex; align-items: center; gap: 2px; }
.knopf.klein { min-height: 36px; padding: 0 14px; font-size: 13px; margin-bottom: 4px; }
.freund-leer { display: flex; align-items: center; gap: 14px; padding: 16px; }
.freund-leer p { margin: 0; font-size: 14px; }
.freund-fuss { margin: 10px 4px 0; line-height: 1.45; }
.einladung-karte { padding: 4px 0 8px; }
.einladung-karte + .einladung-karte { margin-top: 12px; }
.einladung-kopf { display: flex; align-items: center; gap: 12px; padding: 14px 16px 6px; }
.einladung-kopf b { display: block; font-size: 16px; }
.einladung-kopf small { display: block; font-size: 13px; margin-top: 2px; }
.einladung-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px 6px; }
.einladung-knoepfe .knopf { padding: 0 10px; min-height: 46px; font-size: 14px; }
.einladung-zu { margin: 6px 16px 12px; }
.einladung-karte [data-meldung] { padding: 0 16px; }
.blatt-hinweis { margin: -4px 4px 4px; text-align: center; }
.liga-wahl { display: grid; gap: 8px; margin-top: 14px; }
.liga-wahl-knopf {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--rand-stark); background: var(--karte-2); color: var(--tinte); font: inherit; font-weight: 700; text-align: left;
}
.liga-wahl-knopf > .liga-wahl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liga-wahl-knopf > .strich { width: 18px; height: 18px; color: var(--tinte-3); }
.rekord-vergleich { margin-top: 14px; }
.rekord-stand { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.rekord-stand span { display: grid; place-items: center; padding: 10px; border-radius: 14px; background: var(--karte-2); }
.rekord-stand b { font-family: var(--anzeige); font-style: italic; font-size: 26px; font-weight: 900; }
.rekord-stand small { font-size: 12px; color: var(--tinte-2); }
.rekord-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.rekord-tabelle th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinte-3); text-align: right; padding: 6px 4px; }
.rekord-tabelle th:first-child, .rekord-tabelle td:first-child { text-align: left; }
.rekord-tabelle td { padding: 7px 4px; border-top: 1px solid var(--rand); text-align: right; font-variant-numeric: tabular-nums; }
.rekord-tabelle td.vorne { color: var(--neon); font-weight: 800; }
.rekord-vergleich > p { margin: 10px 0 0; }
.scan-buehne { margin: 14px 0 6px; border-radius: 18px; overflow: hidden; background: #03060C; aspect-ratio: 1; }
.scan-buehne video { width: 100%; height: 100%; object-fit: cover; display: block; }
.link-name { padding: 16px 0 0; text-align: left; }