/*
  THESIS: Das Portal ist die Website von innen — dieselbe Nacht, dieselben
  leuchtenden Zahlen. Es verweigert das graue Verwaltungsraster mit Tabellen.
  OWN-WORLD: Grund #111824, Kacheln #1A212D mit Haarlinie, Rubik fett in
  Grossbuchstaben für Zahlen und Überschriften, Nunito für alles andere; jede
  grosse Zahl trägt ihre Farbe als Lichtkante oben und als Schein um die Ziffer
  (grün online, Feuer neu, Blau aktiv, Lila Abos) — wie die Zahlenleiste auf
  pyron.app.
  STORY: Jonas öffnet es ein paar Mal am Tag und weiss in drei Sekunden: wer ist
  da, wer kam dazu, läuft Geld, brennt etwas, wächst die Community.
  FIRST VIEWPORT: links „HEUTE IN PYRON." mit Datum, dahinter das Riesenwort;
  darunter die vier grossen Zahlen, darunter Menschen mit Profilbild.
  FORM: die Zahlenleiste von pyron.app (Jonas' Wahl am 27.09.2026 zwischen
  zwei echten Fassungen, auch mit 74 Leuten online).

  Farben, Masse und Radien: website/app/pyron/tokens.css (dunkel).
*/

/*
  Die Schriften RELATIV zu dieser Datei — auf dem Mac liegt sie unter `/portal.css`,
  online unter `/admin/portal.css`; die Schriften jeweils daneben (`lib/ausliefern.mjs`).
*/
@font-face { font-family: Rubik; font-weight: 700; font-display: swap; src: url('schrift/rubik-700.ttf') format('truetype'); }
@font-face { font-family: Nunito; font-weight: 600; font-display: swap; src: url('schrift/nunito-600.ttf') format('truetype'); }
@font-face { font-family: Nunito; font-weight: 700; font-display: swap; src: url('schrift/nunito-700.ttf') format('truetype'); }
@font-face { font-family: Nunito; font-weight: 800; font-display: swap; src: url('schrift/nunito-800.ttf') format('truetype'); }

:root {
  color-scheme: dark;
  --grund: #111824;
  --buehne: #1A212D;
  --erhoben: #222A38;
  --feld: #283142;
  --haar: rgba(255, 255, 255, 0.07);
  --haar-stark: rgba(255, 255, 255, 0.12);
  --schrift: #EEF2F8;
  --schrift-leise: #AEB6C3;
  --schrift-still: #8691A1;
  --braue: rgba(255, 255, 255, 0.9);
  --akzent: #F0956B;
  --akzent-schrift: #F4B392;
  --feuer: #F47A20;
  --gruen: #35C07A;
  --blau: #8FBBFF;
  --episch: #C3A2FF;
  --gelb: #F5C766;
  --rot: #FF9A87;
  --discord: #8C95FF;
  --whatsapp: #3FD37A;
  --meta: #5B8DEF;
  --apple: #CF6F40;
  --titel: Rubik, 'Arial Rounded MT Bold', system-ui, sans-serif;
  --text: Nunito, 'Avenir Next', system-ui, sans-serif;
  --rund-kachel: 22px;
  --rund-karte: 28px;
  --breite: 1200px;
  --kurve: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--grund);
  color: var(--schrift);
  font-family: var(--text);
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'tnum';
  overflow-x: clip;
}
a { color: inherit; }
:where(a, button):focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 6px; }
h1, h2 { margin: 0; }
ol, ul { list-style: none; margin: 0; padding: 0; }
b { font-weight: 800; color: var(--schrift); }

/* ---------------------------------------------------------------- Leiste -- */

.leiste {
  position: sticky; top: 0; z-index: 20;
  height: 64px;
  padding: 0 32px;
  background: rgba(17, 24, 36, 0.84);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--haar);
}
.leiste-innen { max-width: var(--breite); height: 100%; margin: 0 auto; display: flex; align-items: center; gap: 40px; }
.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #FFFFFF; font: 800 15px/1 var(--text); letter-spacing: 2.4px; }
.marke img { height: 30px; width: auto; display: block; }
/*
  The tabs swipe sideways when they do not fit, without a scrollbar, and start
  at the open tab (`portal.js`). Since 01.10.2026 they no longer fit a phone
  („Übersetzung", „Bewertungen"), and with eight („Gruppen & Dungeons") not a
  tablet or a narrow window either — the last ones were cut off and out of
  reach. The bar fills its height, so the fire line under the open tab stays
  inside it and is not cut off.
*/
.reiter {
  display: flex; gap: 26px; flex: 1; min-width: 0;
  align-self: stretch; align-items: center; overflow-x: auto; scrollbar-width: none;
}
.reiter::-webkit-scrollbar { display: none; }
.reiter a { position: relative; flex: none; padding: 8px 0; font: 700 14px/1 var(--text); color: var(--schrift-leise); text-decoration: none; white-space: nowrap; transition: color 160ms; }
.reiter a:hover { color: #FFFFFF; }
.reiter a[aria-current='page'] { color: #FFFFFF; }
.reiter a[aria-current='page']::after { content: ''; position: absolute; left: 50%; bottom: -12px; width: 18px; height: 3px; margin-left: -9px; border-radius: 3px; background: var(--feuer); box-shadow: 0 0 12px rgba(244, 122, 32, 0.8); }
/*
  GROUPS WITH A LIST (03.10.2026) — „Spieler", „Postfach", „App",
  „Marketing". The list hangs from the bar (`.leiste`, not the group): the
  tabs swipe sideways on a phone, and a list inside them would be cut off.
  `portal.js` opens it, sets its place under the group name (`--x`) and
  closes it again.
*/
.menue { display: flex; flex: none; align-self: stretch; align-items: center; }
.menue-knopf {
  position: relative; display: inline-flex; align-items: center; padding: 8px 0; border: 0; background: none; cursor: pointer;
  font: 700 14px/1 var(--text); color: var(--schrift-leise); white-space: nowrap; transition: color 160ms;
}
.menue-knopf:hover, .menue-knopf[aria-expanded='true'], .menue-knopf--hier { color: #FFFFFF; }
.menue-knopf--hier::after { content: ''; position: absolute; left: 50%; bottom: -12px; width: 18px; height: 3px; margin-left: -9px; border-radius: 3px; background: var(--feuer); box-shadow: 0 0 12px rgba(244, 122, 32, 0.8); }
.menue-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; border-radius: 4px; }
.menue-pfeil { width: 12px; height: 12px; margin-left: 4px; opacity: 0.7; transition: transform 180ms var(--kurve); }
.menue-knopf[aria-expanded='true'] .menue-pfeil { transform: rotate(180deg); }
.menue-liste {
  position: absolute; top: calc(100% - 4px); left: var(--x, 0); z-index: 30;
  display: flex; flex-direction: column; gap: 2px; min-width: 220px; padding: 6px;
  border-radius: 16px; background: var(--erhoben); border: 1px solid var(--haar-stark);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  animation: menue-auf 160ms var(--kurve);
}
.menue-liste[hidden] { display: none; }
@keyframes menue-auf { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .menue-liste { animation: none; } }
.reiter .menue-liste a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-radius: 10px; font-size: 14px; }
.reiter .menue-liste a:hover { background: var(--feld); }
.reiter .menue-liste a[aria-current='page'] { background: color-mix(in srgb, var(--feuer) 16%, transparent); }
.reiter .menue-liste a[aria-current='page']::after { content: none; }
/* Der Ton bei einem neuen Spieler — an, aus, oder: der Browser wartet auf einen Klick. */
.ton {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 12px; border: 0; border-radius: 999px;
  background: var(--erhoben); box-shadow: inset 0 0 0 1px var(--haar-stark);
  font: 800 12px/1 var(--text); letter-spacing: 0.4px; color: var(--schrift-leise);
  cursor: pointer; transition: background-color 160ms, color 160ms, box-shadow 160ms;
}
.ton svg { width: 16px; height: 16px; }
.ton:hover { color: #FFFFFF; background: var(--feld); }
.ton .ton-strich { display: none; }
.ton[data-stand='an'] { color: var(--gruen); box-shadow: inset 0 0 0 1px rgba(53, 192, 122, 0.4); }
.ton[data-stand='aus'] .ton-strich { display: inline; }
.ton[data-stand='wartet'] { color: #1A212D; background: var(--feuer); box-shadow: 0 0 16px rgba(244, 122, 32, 0.55); }
.live { display: inline-flex; align-items: center; gap: 8px; font: 800 12px/1 var(--text); letter-spacing: 1.6px; text-transform: uppercase; color: var(--schrift-leise); }

.puls { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); animation: puls 1100ms cubic-bezier(0.37, 0, 0.63, 1) infinite alternate; }
.puls--gruen { background: var(--gruen); box-shadow: 0 0 10px rgba(53, 192, 122, 0.8); }
@keyframes puls { from { transform: scale(1); opacity: 1; } to { transform: scale(0.82); opacity: 0.35; } }

/* ----------------------------------------------------------------- Blatt -- */

.blatt { max-width: calc(var(--breite) + 64px); margin: 0 auto; padding: 0 32px 72px; }

.held { position: relative; padding: 56px 0 36px; }
.riesenwort {
  position: absolute; z-index: 0; right: -20px; top: 8px;
  font: 700 clamp(120px, 17vw, 250px)/0.85 var(--titel);
  letter-spacing: -6px; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.06);
  white-space: nowrap; pointer-events: none; user-select: none;
}
.braue { position: relative; display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 800 13px/1 var(--text); letter-spacing: 2px; text-transform: uppercase; color: var(--braue); }
.held h1 { position: relative; font: 700 clamp(32px, 8.4vw, 68px)/1 var(--titel); letter-spacing: -1px; text-transform: uppercase; color: #FFFFFF; }
.glut { background: linear-gradient(90deg, #FFD27A, #F47A20 55%, #F0956B); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ----------------------------------------------------------- Die Zahlen -- */

.zahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.zahl {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 30px 18px 26px;
  border-radius: var(--rund-kachel);
  border: 1px solid var(--haar);
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--z) 14%, transparent), transparent 70%), var(--buehne);
  text-align: center;
}
.zahl::before { content: ''; position: absolute; left: 22%; right: 22%; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--z); box-shadow: 0 0 18px var(--z); }
.zahl--gruen { --z: var(--gruen); }
.zahl--feuer { --z: var(--feuer); }
.zahl--blau { --z: var(--blau); }
.zahl--episch { --z: var(--episch); }

.zahl-zeichen { display: grid; place-items: center; width: 32px; height: 32px; color: var(--z); }
.zeichen { width: 28px; height: 28px; display: block; }
.zahl-wert {
  margin-top: 4px;
  font: 700 clamp(52px, 4.8vw, 72px)/1 var(--titel); letter-spacing: -1.5px;
  color: var(--z); text-shadow: 0 0 34px color-mix(in srgb, var(--z) 45%, transparent);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.zahl-wort { margin-top: 6px; font: 800 16px/1.2 var(--text); color: #FFFFFF; }
/* „(28,82 € pro Monat)" hinter „Aktive Abos" — bricht nur als Ganzes um, nie mitten in der Klammer. */
.zahl-wort { text-wrap: balance; }
.zahl-klammer { white-space: nowrap; font-size: 14px; color: var(--schrift-leise); }
.zahl-satz { font: 700 14px/1.4 var(--text); color: var(--schrift-leise); text-wrap: balance; }
.zahl-satz b { color: var(--z); }

/* Eine Zahl, die sich beim Nachholen geändert hat, leuchtet einmal auf. */
.frisch { animation: frisch 1600ms var(--kurve); }
@keyframes frisch {
  from { box-shadow: 0 0 0 1px var(--z, var(--akzent)), 0 0 40px color-mix(in srgb, var(--z, var(--akzent)) 45%, transparent); }
  to { box-shadow: 0 0 0 1px transparent, 0 0 0 transparent; }
}

/* Ein neuer Spieler in der Liste: die Zeile glüht einmal orange auf, während der Ton spielt. */
.zeile.frisch { animation: zeile-frisch 2600ms var(--kurve); border-radius: 14px; }
@keyframes zeile-frisch {
  from { background: rgba(244, 122, 32, 0.22); box-shadow: 0 0 0 8px rgba(244, 122, 32, 0.22); }
  to { background: rgba(244, 122, 32, 0); box-shadow: 0 0 0 8px rgba(244, 122, 32, 0); }
}

/* ---------------------------------------------------------- Die Karten -- */

.paar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
/* In A steht links nur, wer online ist — schmaler, dann füllen die Köpfe ihre Karte. */
.paar--a { grid-template-columns: 5fr 7fr; }

.karte { padding: 26px 28px 24px; border-radius: var(--rund-karte); background: var(--buehne); border: 1px solid var(--haar); }
.karte-kopf, .block-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 18px; }
.karte-kopf h2 { font: 700 20px/1.2 var(--titel); letter-spacing: -0.2px; text-transform: uppercase; color: #FFFFFF; }
.karte-zahl { font: 700 20px/1 var(--titel); color: var(--gruen); }
.karte-dazu, .block-dazu { font: 700 14px/1.3 var(--text); color: var(--schrift-still); }
.karte-dazu b { color: var(--feuer); font-size: 16px; }

.leer { margin: 6px 0; font: 700 15px/1.5 var(--text); color: var(--schrift-still); }

/* Viele Menschen: Namensschilder, die nebeneinander fliessen — das Neueste zuerst, die Zeit am Zeiger. */
.schilder { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.schild {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%;
  padding: 4px 14px 4px 4px; border-radius: 999px;
  background: var(--erhoben); box-shadow: inset 0 0 0 1px var(--haar);
}
.schild-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 13px/1.2 var(--text); color: #FFFFFF; }
.kopf.kopf--klein { width: 26px; height: 26px; box-shadow: 0 0 0 1.5px var(--gruen); }
.kopf--klein .kopf-anfang { font-size: 11px; }
.mehr { width: 100%; margin-top: 14px; }
.mehr > summary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(53, 192, 122, 0.12); box-shadow: inset 0 0 0 1px rgba(53, 192, 122, 0.35);
  font: 800 14px/1 var(--text); color: var(--gruen);
  cursor: pointer; list-style: none; transition: background-color 160ms;
}
.mehr > summary::-webkit-details-marker { display: none; }
.mehr > summary:hover { background: rgba(53, 192, 122, 0.2); }
.mehr[open] > summary { margin-bottom: 12px; }

/* Menschen als Menschen: Profilbild, Name, wann. */
.kopf {
  position: relative; flex: none;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  background: var(--feld); box-shadow: inset 0 0 0 1px var(--haar-stark);
}
.kopf img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kopf-anfang { font: 700 17px/1 var(--titel); color: var(--schrift-leise); }
.kopf--online { width: 56px; height: 56px; box-shadow: 0 0 0 2px var(--grund), 0 0 0 4px var(--gruen), 0 0 18px rgba(53, 192, 122, 0.45); }

.leute { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 18px 12px; }
.leut { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; text-align: center; }
.leut-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 14px/1.2 var(--text); color: #FFFFFF; }
.leut-wann { margin-top: -4px; font: 700 12px/1.2 var(--text); color: var(--schrift-still); }

.zeilen { display: flex; flex-direction: column; }
.zeile { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.zeile + .zeile { border-top: 1px solid var(--haar); }
.zeile-wer { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.zeile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 15px/1.25 var(--text); color: #FFFFFF; }
.zeile-was { font-weight: 700; color: var(--schrift-leise); }
.zeile-wann { font: 700 13px/1.3 var(--text); color: var(--schrift-still); }
.zeile-wann .heute { font-style: normal; color: var(--feuer); }
.zeile-wann .land { color: var(--schrift); }
.zeile-rechts { flex: none; font: 700 13px/1.3 var(--text); color: var(--schrift-still); text-align: right; }
.zeile-rechts b { color: var(--schrift); }

/* ------------------------------------------------------------- Blöcke -- */

.block { margin-top: 56px; }
/* The first block right under the page title. */
.block--erst { margin-top: 24px; }
.block-kopf { margin-bottom: 20px; }
.block-kopf h2 { font: 700 30px/1.1 var(--titel); letter-spacing: -0.6px; text-transform: uppercase; color: #FFFFFF; text-wrap: balance; }
/* A longer line next to a heading stands under it, left — not squeezed to the right edge where it breaks. */
.block-kopf--unter { flex-direction: column; align-items: flex-start; gap: 8px; }
.block-dazu { text-wrap: balance; }

/* Worauf achten: vier Punkte, grün, wenn nichts zu tun ist — orange, wenn doch. */
.punkte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.punkt {
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px 22px 20px;
  border-radius: var(--rund-kachel);
  background: var(--buehne); border: 1px solid var(--haar);
}
.punkt-zeichen { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 4px; border-radius: 50%; }
.punkt-zeichen .zeichen { width: 18px; height: 18px; stroke-width: 3; }
.punkt--gut .punkt-zeichen { color: var(--gruen); background: rgba(53, 192, 122, 0.12); }
.punkt--schau { background: radial-gradient(120% 90% at 0% 0%, rgba(244, 122, 32, 0.14), transparent 65%), var(--buehne); border-color: rgba(244, 122, 32, 0.35); }
.punkt--schau .punkt-zeichen { color: #1A212D; background: var(--feuer); box-shadow: 0 0 16px rgba(244, 122, 32, 0.6); }
.punkt-wort { font: 800 16px/1.3 var(--text); color: #FFFFFF; text-wrap: balance; }
.punkt--gut .punkt-wort { color: var(--schrift-leise); }
.punkt-dazu { font: 700 13px/1.4 var(--text); color: var(--schrift-still); }
.punkt-link { text-decoration: none; }
.punkt-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.punkt:has(.punkt-link) { position: relative; transition: border-color 160ms; }
.punkt:has(.punkt-link):hover { border-color: rgba(244, 122, 32, 0.6); }

/* Community: links die zwei Kanäle als grosse Zahlen, rechts wer dazukam. */
.community { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
.kanaele { display: grid; gap: 16px; }
.kanal {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 18px; align-items: center;
  padding: 24px 24px 22px;
  border-radius: var(--rund-kachel); border: 1px solid var(--haar);
  background: radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--z) 16%, transparent), transparent 70%), var(--buehne);
}
.kanal--discord { --z: var(--discord); }
.kanal--whatsapp { --z: var(--whatsapp); }
.kanal-marke { grid-row: 1 / 3; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; color: var(--z); background: color-mix(in srgb, var(--z) 14%, var(--erhoben)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--z) 30%, transparent); }
.kanal-marke svg { width: 30px; height: 30px; }
/* Two numbers per tile since 30.09.2026 — the German and the English server or channel, each with its label. */
.kanal-werte { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 20px; row-gap: 4px; }
.kanal-paar { display: inline-flex; align-items: baseline; gap: 6px; }
.kanal-wert { font: 700 44px/1 var(--titel); letter-spacing: -1px; color: var(--z); text-shadow: 0 0 30px color-mix(in srgb, var(--z) 45%, transparent); font-variant-numeric: tabular-nums; }
.kanal-sprache { font: 800 12px/1 var(--text); letter-spacing: 1px; color: var(--schrift-still); }
.kanal-wort { font: 800 15px/1.2 var(--text); color: #FFFFFF; }
.kanal-satz { grid-column: 1 / -1; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--haar); font: 700 13px/1.4 var(--text); color: var(--schrift-still); }
.kanal-satz b { color: var(--z); }
.kanal-zeile { display: block; }
.kanal-zeile + .kanal-zeile { margin-top: 4px; }

.karte--strom { padding-top: 12px; padding-bottom: 18px; }
.mit-marke { position: relative; flex: none; }
.marke-klein { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--buehne); box-shadow: 0 0 0 2px var(--buehne); }
.marke-klein svg { width: 14px; height: 14px; }
.marke-klein--discord { color: var(--discord); }
.marke-klein--whatsapp { color: var(--whatsapp); }

.stand { margin: 48px 0 0; font: 700 12px/1 var(--text); letter-spacing: 0.4px; color: var(--schrift-still); text-align: center; }

/* ------------------------------------------------------------- Spieler -- */

/* Eine Liste zum Arbeiten: die Überschrift kleiner, damit mehr Zeilen auf den Bildschirm passen. */
.held--kompakt { padding: 40px 0 28px; }
.held--kompakt h1 { font-size: clamp(30px, 4vw, 48px); }
.held--kompakt .riesenwort { font-size: clamp(90px, 12vw, 170px); top: 4px; }

.liste-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.suche {
  display: flex; align-items: center; gap: 10px; flex: 0 1 420px;
  padding: 0 18px; height: 48px; border-radius: 999px;
  background: var(--buehne); box-shadow: inset 0 0 0 1px var(--haar-stark);
  color: var(--schrift-still); transition: box-shadow 160ms;
}
.suche:focus-within { box-shadow: inset 0 0 0 1.5px var(--akzent), 0 0 18px rgba(240, 149, 107, 0.25); color: var(--akzent); }
.suche svg { width: 18px; height: 18px; flex: none; }
.suche input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: #FFFFFF; font: 700 15px/1 var(--text); }
.suche input::placeholder { color: var(--schrift-still); }
.liste-zahl { font: 800 14px/1 var(--text); color: var(--schrift-still); }

.tabelle-rahmen { overflow-x: auto; border-radius: var(--rund-karte); background: var(--buehne); border: 1px solid var(--haar); }
.tabelle { width: 100%; border-collapse: collapse; font-feature-settings: 'tnum'; }
.tabelle th { padding: 0; background: var(--buehne); border-bottom: 1px solid var(--haar-stark); text-align: left; white-space: nowrap; }
.tabelle th button {
  display: inline-flex; align-items: center; gap: 5px; width: 100%;
  padding: 20px 8px 16px; border: 0; background: none; cursor: pointer;
  font: 800 12.5px/1 var(--text); letter-spacing: 0.1px; color: var(--schrift-still);
  transition: color 160ms;
}
.tabelle th button:hover { color: #FFFFFF; }
/* A heading of a table that does not sort — the same look as the buttons, without the click. */
.tabelle th .th-wort { display: block; padding: 20px 8px 16px; font: 800 12.5px/1 var(--text); letter-spacing: 0.1px; color: var(--schrift-still); }
.tabelle th.rechts .th-wort { text-align: right; }
.tabelle th:first-child .th-wort { padding-left: 22px; }
.tabelle th:last-child .th-wort { padding-right: 22px; }
.tabelle th.rechts button { justify-content: flex-end; }
.tabelle th:first-child button { padding-left: 22px; }
.tabelle th:last-child button { padding-right: 22px; }
.pfeil { display: none; }
.tabelle th button[data-richtung] { color: #FFFFFF; }
[data-richtung] .pfeil { display: block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; }
[data-richtung='ab'] .pfeil { border-top: 5px solid var(--akzent); }
[data-richtung='auf'] .pfeil { border-bottom: 5px solid var(--akzent); }

/*
  All eleven columns fit the 1200 px of the page (01.10.2026): until then the
  table was 114 px wider, and „Veränderung" stood out of sight behind a
  sideways scroll even on a large screen.
*/
.tabelle td { padding: 13px 8px; border-top: 1px solid var(--haar); vertical-align: middle; font: 700 13px/1.3 var(--text); color: var(--schrift-leise); white-space: nowrap; }
.tabelle tbody tr:first-child td { border-top: 0; }
.tabelle tbody tr { transition: background-color 120ms; }
.tabelle tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.tabelle td:first-child { padding-left: 22px; }
.tabelle td:last-child { padding-right: 22px; }
.tabelle td.rechts { text-align: right; }
.tabelle td b { font-weight: 800; color: #FFFFFF; }
.tabelle .still { color: var(--schrift-still); font-weight: 700; }

.wer-zelle { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wer-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; font: 800 15px/1.2 var(--text); color: #FFFFFF; }
.kopf.kopf--zeile { width: 36px; height: 36px; }
.clubname { display: block; max-width: 112px; overflow: hidden; text-overflow: ellipsis; color: var(--schrift); font-weight: 800; }
.land { white-space: nowrap; color: var(--schrift); font-weight: 700; }
.land--vermutet, .zeile-wann .land--vermutet { color: var(--schrift-still); font-weight: 600; }
/* The code a player entered (03.10.2026, `lib/codes.mjs`): orange when it counts for a creator. */
.code-wort { white-space: nowrap; font-weight: 800; color: var(--schrift); }
.code-wort--creator { color: var(--feuer); }
.code-wort--nurbild { color: var(--schrift-still); font-weight: 700; }
.jetzt { display: inline-flex; align-items: center; gap: 8px; color: var(--gruen); font-weight: 800; }

.schild-abo {
  --s: var(--schrift-still);
  display: inline-flex; padding: 5px 10px; border-radius: 999px; font: 800 12px/1 var(--text);
  color: var(--s); background: color-mix(in srgb, var(--s) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s) 42%, transparent);
}
/*
  EIN STIL FÜR ALLE SCHILDER, JEDE STUFE IHRE FARBE — Jonas, 27.09.2026:
  „Testphase in ‚Testabo' umbenennen und in gelb und echtes Abo … in Grün und
  ‚Abo' und Freier Monat soll ‚Testphase' heißen. Gekündigt in rot aber gleicher
  stil der pill wie die anderen, nicht so krass ausgefüllt".
*/
.schild-abo--abo { --s: var(--gruen); }
.schild-abo--testabo { --s: var(--gelb); }
.schild-abo--testphase { --s: var(--blau); }
.schild-abo--beta { --s: var(--episch); }
.schild-abo--rot { --s: var(--rot); }
.schild-abo--aus { box-shadow: none; background: var(--erhoben); }

.discord-ja { display: inline-flex; color: var(--discord); }
.discord-ja svg { width: 20px; height: 20px; }
.rang { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; color: #FFFFFF; font-weight: 800; }
.rang img { display: block; width: 24px; height: 24px; object-fit: contain; }
.tabelle b.plus { color: var(--gruen); }
.tabelle b.minus { color: var(--rot); }

/* ----------------------------------------------------------------- Ads -- */

.held--mit-schalter { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.zeitraum { position: relative; display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--buehne); box-shadow: inset 0 0 0 1px var(--haar-stark); }
.zeitraum a { padding: 9px 16px; border-radius: 999px; font: 800 13px/1 var(--text); color: var(--schrift-leise); text-decoration: none; transition: background-color 160ms, color 160ms; }
.zeitraum a:hover { color: #FFFFFF; }
.zeitraum a[aria-current] { color: #1A212D; background: var(--akzent); }

.zahlen--ads .zahl { padding-top: 34px; }
.block--ads { margin-top: 48px; }

.kanaele-ads { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kanal-ads {
  --k: var(--meta);
  position: relative; overflow: hidden;
  padding: 26px 28px 24px; border-radius: var(--rund-karte); border: 1px solid var(--haar);
  background: radial-gradient(80% 90% at 0% 0%, color-mix(in srgb, var(--k) 14%, transparent), transparent 70%), var(--buehne);
}
.kanal-ads--apple { --k: var(--apple); }
.kanal-ads-kopf { display: flex; align-items: center; gap: 12px; }
.kanal-ads-kopf h3 { margin: 0; font: 700 20px/1.2 var(--titel); letter-spacing: -0.2px; text-transform: uppercase; color: #FFFFFF; }
.kanal-ads-marke { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: var(--k); background: color-mix(in srgb, var(--k) 16%, var(--erhoben)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k) 35%, transparent); }
.kanal-ads-marke svg { width: 22px; height: 22px; }
.billiger { display: inline-flex; margin-left: 10px; padding: 4px 10px; border-radius: 999px; font: 800 11px/1 var(--text); letter-spacing: 0.3px; color: #0F2A1C; background: var(--gruen); vertical-align: middle; }
.kanal-ads-kopf .billiger { margin-left: auto; }
.kanal-ads-gross { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 18px; }
.kanal-ads-wert { font: 700 60px/1 var(--titel); letter-spacing: -1.5px; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.kanal-ads-wort { font: 800 15px/1 var(--text); color: var(--schrift-leise); }
.kanal-ads-zeilen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding-top: 16px; border-top: 1px solid var(--haar); }
.kanal-ads-zeilen dt { font: 700 12px/1.3 var(--text); color: var(--schrift-still); }
.kanal-ads-zeilen dd { margin: 4px 0 0; font: 700 20px/1.1 var(--titel); color: #FFFFFF; }
.kanal-ads-zeilen dd b { font-weight: 700; }
.kanal-ads-fuss { margin: 16px 0 0; font: 700 12px/1.5 var(--text); color: var(--schrift-still); }
/* TikTok's own line under the two channels (since 29.09.2026): no card, its costs are not on the page yet. */
.kanal-ads-tiktok { margin: 14px 0 0 4px; font: 700 13px/1.5 var(--text); color: var(--schrift-still); text-wrap: pretty; }
.kanal-ads-tiktok b { color: var(--schrift); }
/* "ca." in front of a big number: small, so the number keeps its line. */
.approx { font-size: 0.4em; letter-spacing: 0; margin-right: 0.2em; opacity: 0.8; }

.karte--bild { padding: 24px 28px 18px; }
.bild-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.bild-kopf h3 { margin: 0; font: 800 14px/1.2 var(--text); color: #FFFFFF; }
.bild-kopf--zwei { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--haar); }
.legende-ads { display: inline-flex; gap: 16px; font: 700 13px/1 var(--text); color: var(--schrift-leise); }
.legende-ads span { display: inline-flex; align-items: center; gap: 7px; }
.legende-ads i { width: 10px; height: 10px; border-radius: 3px; }
.diagramm { display: block; width: 100%; height: auto; overflow: visible; }
.d-gitter { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.d-grund { stroke: rgba(255, 255, 255, 0.16); }
.d-achse { fill: var(--schrift-still); font: 700 12px var(--text); }
.d-treffer { fill: transparent; }
.d-saeule:hover .d-treffer { fill: rgba(255, 255, 255, 0.04); }

.lohnt-kopf span[title] { cursor: help; text-decoration: underline dotted rgba(255, 255, 255, 0.25); text-underline-offset: 3px; }
.lohnt-kopf, .lohnt-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 48px 64px 66px 96px; align-items: center; gap: 10px; }
.lohnt-kopf span { white-space: nowrap; }
.lohnt-kopf { padding-bottom: 8px; border-bottom: 1px solid var(--haar-stark); font: 800 12px/1.2 var(--text); color: var(--schrift-still); text-align: right; }
.lohnt-liste { display: flex; flex-direction: column; }
.lohnt-zeile { padding: 11px 0; border-bottom: 1px solid var(--haar); }
.lohnt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 14px/1.3 var(--text); color: #FFFFFF; }
.lohnt-balken { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.05); }
.lohnt-balken span { display: block; height: 100%; border-radius: 3px; }
.lohnt-zahl { font: 700 13px/1 var(--text); color: var(--schrift-leise); text-align: right; font-variant-numeric: tabular-nums; }
.lohnt-haupt { font: 800 15px/1 var(--text); color: #FFFFFF; }
.lohnt .nichts { font: 800 12px/1 var(--text); color: var(--feuer); }
.lohnt .still { font: 700 12px/1 var(--text); color: var(--schrift-still); }

/* Was hinter einer Säule steht — beim Draufzeigen (`data-tip`, portal.js). */
.tip { position: fixed; z-index: 30; pointer-events: none; padding: 10px 12px; border-radius: 12px; background: #0B1019; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 0 0 1px var(--haar-stark); font: 700 13px/1.55 var(--text); color: var(--schrift-leise); }
.tip b { color: #FFFFFF; }
.tip i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; }

/* -------------------------------------------------------------- Popups -- */

/*
  POPUPS, tidied on 01.10.2026 — Jonas: „unfassbares chaos … bitte clean,
  sauber, kein chaos, keine hässlichen umbrüche". Every popup is a tile of the
  same build: its tag, its name in ONE line, how many saw it, for how many it
  is due today and tomorrow, each button with how many tapped it. Every part
  above the buttons is one line high, so the parts of all tiles stand at the
  same height; the tiles of a row are equally tall. Four in a row, two below
  1300 px, one on the phone — never three and one alone.
*/
.tp-tag { flex: none; padding: 5px 10px; border-radius: 999px; font: 800 12px/1 var(--text); letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap; color: var(--z); background: color-mix(in srgb, var(--z) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--z) 38%, transparent); }
.tp-tag--still { color: var(--schrift-leise); background: var(--erhoben); box-shadow: inset 0 0 0 1px var(--haar-stark); letter-spacing: 0.4px; text-transform: none; }
.tp-marke { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: var(--k); background: color-mix(in srgb, var(--k) 14%, var(--erhoben)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k) 32%, transparent); }
.tp-marke svg { width: 19px; height: 19px; }

.pk-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pb-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.pk, .pb {
  --z: var(--feuer);
  position: relative; overflow: hidden; min-width: 0;
  display: flex; flex-direction: column;
  padding: 24px 24px 22px;
  border-radius: var(--rund-karte); border: 1px solid var(--haar);
  background: radial-gradient(110% 60% at 50% 0%, color-mix(in srgb, var(--z) 13%, transparent), transparent 70%), var(--buehne);
}
.pk::before, .pb::before { content: ''; position: absolute; left: 22%; right: 22%; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--z); box-shadow: 0 0 18px var(--z); }
.pk--discord { --z: var(--discord); }
.pk--whatsapp { --z: var(--whatsapp); }
.pk--feuer { --z: var(--feuer); }
.pk--episch { --z: var(--episch); }
.pk--blau { --z: var(--blau); }

.pk-oben { display: flex; align-items: center; gap: 6px; min-width: 0; height: 24px; }
.pk-name { margin: 14px 0 0; min-width: 0; font: 700 19px/1.25 var(--titel); letter-spacing: -0.2px; text-transform: uppercase; color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-gross { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 0; white-space: nowrap; }
.pk-wert { font: 700 56px/1 var(--titel); letter-spacing: -1.5px; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.pk-wort { font: 800 15px/1 var(--text); color: var(--schrift-leise); }

.pk-dran { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.pk-dran-feld { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 12px 13px 11px; border-radius: 14px; background: var(--erhoben); box-shadow: inset 0 0 0 1px var(--haar); font: 700 12px/1.2 var(--text); color: var(--schrift-still); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-dran-feld b { font: 700 22px/1 var(--titel); color: #FFFFFF; font-variant-numeric: tabular-nums; }

.pk-knoepfe { margin-top: 18px; border-top: 1px solid var(--haar); }
.pk-knopf { display: flex; align-items: center; gap: 10px; padding-top: 14px; }
.pk-knopf .tp-marke { width: 30px; height: 30px; border-radius: 10px; }
.pk-knopf .tp-marke svg { width: 17px; height: 17px; }
.pk-knopf-wort { flex: 1; min-width: 0; font: 800 13.5px/1.25 var(--text); color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-knopf-zahl { flex: none; font: 700 26px/1 var(--titel); color: var(--k); text-shadow: 0 0 24px color-mix(in srgb, var(--k) 40%, transparent); font-variant-numeric: tabular-nums; }
.pk-knopf--discord { --k: var(--discord); }
.pk-knopf--whatsapp { --k: var(--whatsapp); }
.pk-knopf--feuer { --k: var(--feuer); }
.pk-knopf--episch { --k: var(--episch); }

/* Who tapped what — one card, a line per button, its people beside it. */
.wg-zeile { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; padding: 18px 0; }
.wg-zeile:first-child { padding-top: 2px; }
.wg-zeile:last-child { padding-bottom: 2px; }
.wg-zeile + .wg-zeile { border-top: 1px solid var(--haar); }
.wg-knopf { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wg-wort { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wg-wort b, .wg-wort span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-wort b { font: 800 15px/1.2 var(--text); color: #FFFFFF; }
.wg-wort span { font: 700 12px/1.2 var(--text); color: var(--schrift-still); }
.wg-zahl { flex: none; font: 700 26px/1 var(--titel); color: var(--k); text-shadow: 0 0 24px color-mix(in srgb, var(--k) 40%, transparent); font-variant-numeric: tabular-nums; }
.wg-leute { padding-top: 1px; }
.wg-zeile .kopf--klein { box-shadow: 0 0 0 1.5px var(--k); }

/* Bewerten: two cards of the same build, their people below a line. */
.pb-satz { margin: 10px 0 0; font: 700 13px/1.3 var(--text); color: var(--schrift-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-leute { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--haar); }
.pb-leute .leer { margin: 0; }
.pb .kopf--klein { box-shadow: 0 0 0 1.5px var(--z); }

.mehr--leise { margin-top: 10px; }
.mehr--leise > summary { padding: 7px 14px; background: var(--erhoben); box-shadow: inset 0 0 0 1px var(--haar-stark); color: var(--schrift-leise); font-size: 13px; }
.mehr--leise > summary:hover { background: var(--feld); color: #FFFFFF; }

/* Four tiles only where „Per WhatsApp einladen" and a two-digit count still fit their line — measured, 01.10.2026. */
@media (max-width: 1299px) {
  .pk-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pb-raster { grid-template-columns: minmax(0, 1fr); }
  .wg-zeile { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 560px) {
  .pk-raster { grid-template-columns: minmax(0, 1fr); }
  .pk, .pb { padding: 22px 18px 18px; }
}

/* ------------------------------------------------------------- Support -- */

/*
  SUPPORT (01.10.2026) — an inbox in the portal's night: every report a card
  with the sender's face, the kind as a coloured tag, the time left on the
  right. The open report is a conversation — the player on the left, we on the
  right in fire — with one orange button: „Antworten".
*/

/* The number of open reports next to the tab. */
.reiter-zahl {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 7px; padding: 0 6px;
  border-radius: 999px; background: var(--feuer); box-shadow: 0 0 12px rgba(244, 122, 32, 0.55);
  font: 800 11px/1 var(--text); color: #1A212D; vertical-align: 1px;
}

/* Kinds as tags — the same form as the day tags on „Popups". */
.art {
  --z: var(--blau);
  display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px;
  font: 800 11px/1 var(--text); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;
  color: var(--z); background: color-mix(in srgb, var(--z) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--z) 36%, transparent);
}
.art--feuer { --z: var(--feuer); }
.art--gruen { --z: var(--gruen); }
.art--blau { --z: var(--blau); }
.art--episch { --z: var(--episch); }
/* Pyron Legends, the browser game (08.10.2026): its tickets carry this tag — gold like the game's logo. */
.art--legends { --z: var(--gelb); margin-right: 6px; }

/* Alle · Pyron · Legends above the list; the count is what waits. */
.produkte { display: flex; gap: 8px; margin: 8px 0 28px; }
.produkte a {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  font: 800 13px/1 var(--text); color: var(--schrift-leise); text-decoration: none;
  background: var(--erhoben); box-shadow: inset 0 0 0 1px var(--haar);
}
.produkte a:hover { color: var(--schrift); }
.produkte a[aria-current='page'] { color: var(--schrift); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--feuer) 60%, transparent); }
.produkte a span { font-weight: 700; color: var(--schrift-still); }

/* Time left: red when over, fire when under four hours, quiet otherwise. */
.frist {
  --z: var(--schrift-leise);
  display: inline-flex; padding: 6px 11px; border-radius: 999px; white-space: nowrap;
  font: 800 12px/1 var(--text); color: var(--z); background: var(--erhoben); box-shadow: inset 0 0 0 1px var(--haar);
}
.frist--rot { --z: var(--rot); background: color-mix(in srgb, var(--rot) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rot) 40%, transparent); }
.frist--feuer { --z: var(--feuer); background: color-mix(in srgb, var(--feuer) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--feuer) 40%, transparent); }
.frist--gut { --z: var(--schrift-still); background: none; box-shadow: none; padding-right: 0; }
.frist--still { --z: var(--schrift-still); }

/* ---- The groups and their cards. */
.gruppe + .gruppe { margin-top: 32px; }
.gruppe-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 12px 4px; }
.gruppe-kopf h2 { font: 700 15px/1 var(--titel); letter-spacing: 1.2px; text-transform: uppercase; color: #FFFFFF; }
.gruppe-zahl { font: 700 15px/1 var(--titel); color: var(--schrift-still); }
.gruppe-dazu { margin-left: auto; font: 700 12px/1 var(--text); color: var(--schrift-still); }
.gruppe-dazu .drueber { color: var(--rot); font-weight: 800; }
.gruppe-leer { margin: 0; padding: 18px 20px; border-radius: var(--rund-kachel); border: 1px dashed var(--haar-stark); font: 700 14px/1.4 var(--text); color: var(--schrift-still); }
.gruppe .mehr { margin-top: 10px; }

.faelle { display: flex; flex-direction: column; gap: 8px; }
.fall {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 16px;
  padding: 20px 22px 19px; border-radius: 20px;
  background: var(--buehne); border: 1px solid var(--haar);
  text-decoration: none; transition: background-color 160ms, border-color 160ms;
}
.fall:hover { background: var(--erhoben); border-color: var(--haar-stark); }
.kopf.kopf--fall { width: 48px; height: 48px; }
.fall-mitte { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fall-oben { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 2px; }
.neu-antwort { display: inline-flex; align-items: center; gap: 6px; font: 800 12px/1 var(--text); color: var(--gruen); white-space: nowrap; }
.neu-antwort::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gruen); box-shadow: 0 0 8px var(--gruen); }
.fall-titel { font: 800 17px/1.35 var(--text); color: #FFFFFF; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.fall-rest { font: 600 14px/1.4 var(--text); color: var(--schrift-leise); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.fall-wer { font: 700 12px/1.45 var(--text); color: var(--schrift-still); }
.fall-wer > span { white-space: nowrap; }
.fall-rechts { padding-top: 1px; }

/*
  The page (Jonas' choice on 01.10.2026, „B · Zahlen + Liste"): three big
  numbers, the list below, a report on its own page. Everything sits above the
  outline word of the hero, which reaches a little below it.
*/
.zahlen--support, .liste-gross, .fallseite { position: relative; z-index: 1; }
.zahlen--support { grid-template-columns: repeat(3, 1fr); }
.liste-gross { max-width: 880px; margin: 48px auto 0; }
.fallseite { container-type: inline-size; min-width: 0; padding-top: 32px; }
.fall-fehlt { display: grid; place-items: center; gap: 14px; min-height: 280px; padding: 32px; border-radius: var(--rund-karte); border: 1px dashed var(--haar-stark); text-align: center; }
.fall-fehlt p { margin: 0; font: 700 16px/1.4 var(--text); color: var(--schrift-still); }

/* ---- One report. */
.fallblatt { padding: 28px 30px 30px; border-radius: var(--rund-karte); background: var(--buehne); border: 1px solid var(--haar); }
.zurueck { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; font: 800 14px/1 var(--text); color: var(--schrift-leise); text-decoration: none; }
.zurueck::before { content: ''; width: 8px; height: 8px; border-left: 2.4px solid currentColor; border-bottom: 2.4px solid currentColor; transform: rotate(45deg); }
.zurueck:hover { color: #FFFFFF; }
.fallblatt-kopf { padding-bottom: 22px; border-bottom: 1px solid var(--haar); }
.fallblatt-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.fallblatt-nr { font: 700 13px/1 var(--text); color: var(--schrift-still); }
.fallblatt-titel { margin: 14px 0 0; font: 800 clamp(22px, 2.4vw, 28px)/1.25 var(--text); letter-spacing: -0.2px; color: #FFFFFF; overflow-wrap: anywhere; text-wrap: pretty; }
.band { margin: 18px 0 0; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--rot) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rot) 40%, transparent); font: 700 14px/1.5 var(--text); color: var(--schrift); }
.band b { color: var(--rot); }

.fallblatt-spalten { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 28px; margin-top: 26px; align-items: start; }
@container (max-width: 760px) {
  .fallblatt-spalten { grid-template-columns: minmax(0, 1fr); }
}

/* The conversation: the player left with his face, we right in fire. */
.verlauf { display: flex; flex-direction: column; gap: 20px; }
.nachricht { display: flex; align-items: flex-end; gap: 12px; max-width: 88%; }
.nachricht--wir { align-self: flex-end; flex-direction: row-reverse; }
.kopf.kopf--nachricht { width: 36px; height: 36px; margin-bottom: 22px; }
.nachricht-koerper { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.nachricht--wir .nachricht-koerper { align-items: flex-end; }
.blase { padding: 14px 17px 15px; border-radius: 22px 22px 22px 8px; background: var(--erhoben); box-shadow: inset 0 0 0 1px var(--haar); }
.nachricht--wir .blase {
  border-radius: 22px 22px 8px 22px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--feuer) 26%, var(--erhoben)), color-mix(in srgb, var(--feuer) 18%, var(--erhoben)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--feuer) 40%, transparent);
}
.blase-text { margin: 0; font: 600 15px/1.55 var(--text); color: var(--schrift); white-space: pre-wrap; overflow-wrap: anywhere; }
.nachricht--wir .blase-text { color: #FFFFFF; }
.blase-bild { display: block; margin-top: 12px; }
.blase-bild img { display: block; max-width: min(260px, 100%); max-height: 420px; border-radius: 14px; box-shadow: 0 0 0 1px var(--haar-stark); }
.blase-hinweis { margin: 10px 0 0; font: 700 12px/1.4 var(--text); color: var(--schrift-still); }
.nachricht-wann { padding: 0 6px; font: 700 12px/1.3 var(--text); color: var(--schrift-still); }
.nachricht-wann .gelesen { color: var(--gruen); }

/* The reply — one field, one orange button. 16 px: below that Safari on the iPhone zooms the page. */
.antworten { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--haar); }
.antworten textarea, .notieren textarea {
  display: block; width: 100%; resize: vertical;
  padding: 15px 17px; border: 0; border-radius: 18px;
  background: var(--feld); box-shadow: inset 0 0 0 1px var(--haar-stark);
  font: 600 16px/1.5 var(--text); color: #FFFFFF;
  transition: box-shadow 160ms;
}
.antworten textarea { min-height: 128px; }
.antworten textarea::placeholder, .notieren textarea::placeholder { color: var(--schrift-still); }
.antworten textarea:focus, .notieren textarea:focus { outline: 0; box-shadow: inset 0 0 0 1.5px var(--akzent), 0 0 20px rgba(240, 149, 107, 0.2); }
.antworten-fuss { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 14px; }
.antworten-fuss span { font: 700 13px/1.45 var(--text); color: var(--schrift-still); }

.knopf {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--feuer); box-shadow: 0 0 22px rgba(244, 122, 32, 0.45);
  font: 800 15px/1 var(--text); color: #1A212D;
  transition: background-color 160ms, box-shadow 160ms, transform 160ms var(--kurve);
}
.knopf:hover { background: #FF8A30; }
.knopf:active { transform: scale(0.97); }
.knopf--leise { height: 40px; padding: 0 18px; background: var(--feld); box-shadow: inset 0 0 0 1px var(--haar-stark); color: #FFFFFF; font-size: 14px; }
.knopf--leise:hover { background: #313B4E; }
.knopf:disabled, textarea:disabled { opacity: 0.45; cursor: not-allowed; }

/* The side: the clock, the state, the facts, the notes. */
.fallblatt-seite { display: flex; flex-direction: column; gap: 12px; }
.seitenkarte { padding: 18px 18px 18px; border-radius: 20px; background: var(--erhoben); box-shadow: inset 0 0 0 1px var(--haar); }
.uhr { --z: var(--schrift-leise); display: flex; flex-direction: column; gap: 6px; margin: 2px 2px 16px; }
.uhr-wert { font: 700 30px/1 var(--titel); letter-spacing: -0.5px; color: var(--z); text-shadow: 0 0 28px color-mix(in srgb, var(--z) 40%, transparent); }
.uhr-wort { font: 700 12px/1.4 var(--text); color: var(--schrift-still); }
.uhr--rot { --z: var(--rot); }
.uhr--feuer { --z: var(--feuer); }
.uhr--ruhig { --z: #FFFFFF; }
.uhr--still { --z: var(--blau); }
.uhr--gut { --z: var(--gruen); }

.zustand { display: flex; gap: 3px; padding: 4px; border-radius: 16px; background: var(--grund); box-shadow: inset 0 0 0 1px var(--haar); }
.zustand button {
  flex: 1 1 auto; padding: 10px 10px; border: 0; border-radius: 12px; cursor: pointer; background: none; white-space: nowrap;
  font: 800 12px/1.15 var(--text); color: var(--schrift-leise); transition: background-color 160ms, color 160ms;
}
.zustand button:hover { color: #FFFFFF; background: var(--erhoben); }
.zustand button[aria-pressed='true'] { color: #1A212D; background: var(--akzent); }

.fakten { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 14px; margin: 0; }
.fakten dt, .fakten dd { padding: 9px 0; border-top: 1px solid var(--haar); }
.fakten dt:first-of-type, .fakten dd:first-of-type { border-top: 0; padding-top: 0; }
.fakten dt { font: 700 12px/1.45 var(--text); color: var(--schrift-still); white-space: nowrap; }
.fakten dd { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font: 700 13px/1.45 var(--text); color: var(--schrift); overflow-wrap: anywhere; }
.fakten dd b { font-weight: 800; color: #FFFFFF; }
.fakten .still, .fallblatt .still { color: var(--schrift-still); font-weight: 700; }

.seiten-titel { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; font: 700 13px/1 var(--titel); letter-spacing: 1.1px; text-transform: uppercase; color: #FFFFFF; }
.seiten-titel span { font: 700 12px/1 var(--text); letter-spacing: 0; text-transform: none; color: var(--schrift-still); }
.notizen { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.notizen li { padding: 10px 12px; border-radius: 14px; background: var(--buehne); box-shadow: inset 0 0 0 1px var(--haar); }
.notizen p { margin: 0 0 4px; font: 600 14px/1.45 var(--text); color: var(--schrift); white-space: pre-wrap; overflow-wrap: anywhere; }
.notizen span { font: 700 11px/1 var(--text); color: var(--schrift-still); }
.notieren { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.notieren textarea { min-height: 64px; padding: 11px 13px; border-radius: 14px; font-size: 16px; }

/* A chat report (03.10.2026): what was written, big, with what came before it — above the conversation. */
.gemeldet { margin: 0 0 28px; padding: 18px 18px 16px; border-radius: 20px; background: var(--erhoben); box-shadow: inset 0 0 0 1px var(--haar); }
.gemeldet-titel { margin: 0 0 14px; font: 700 13px/1 var(--titel); letter-spacing: 1.1px; text-transform: uppercase; color: #FFFFFF; }
.gemeldet-davor { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; }
.gemeldet-davor li { padding: 9px 12px; border-radius: 14px; background: var(--buehne); box-shadow: inset 0 0 0 1px var(--haar); }
.gemeldet-davor p { margin: 4px 0 0; font: 600 14px/1.45 var(--text); color: var(--schrift-leise); white-space: pre-wrap; overflow-wrap: anywhere; }
.gemeldet-wer { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font: 700 12px/1.4 var(--text); color: var(--schrift-still); }
.gemeldet-wer b { font-weight: 800; color: #FFFFFF; }
.gemeldet-nachricht { padding: 14px 16px 16px; border-radius: 16px; background: color-mix(in srgb, var(--rot) 10%, var(--erhoben)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rot) 55%, transparent); }
.gemeldet-text { margin: 8px 0 0; font: 700 19px/1.45 var(--text); color: #FFFFFF; white-space: pre-wrap; overflow-wrap: anywhere; }
.gemeldet-fuss { display: flex; align-items: center; gap: 8px; margin: 12px 2px 0; font: 700 13px/1.4 var(--text); color: var(--schrift); }
.gemeldet-punkt { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--z, var(--schrift-still)); box-shadow: 0 0 10px var(--z, transparent); }
.gemeldet-punkt--rot { --z: var(--rot); }
.gemeldet-punkt--gruen { --z: var(--gruen); }
.gemeldet-hinweis { margin: 6px 2px 0; font: 700 12px/1.45 var(--text); color: var(--schrift-still); }
.entscheiden form { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--haar); }
.entscheiden select {
  height: 44px; padding: 0 12px; border: 0; border-radius: 12px;
  background: var(--feld); box-shadow: inset 0 0 0 1px var(--haar-stark);
  font: 600 16px/1.2 var(--text); color: #FFFFFF;
}
.entscheiden select:disabled { opacity: 0.45; }
.entscheiden .knopf { width: 100%; }
.entscheiden-satz { margin: 0; font: 700 12px/1.5 var(--text); color: var(--schrift-still); }
.entscheiden-satz b { color: #FFFFFF; font-weight: 800; }
.entscheiden form + .entscheiden-satz { margin-top: 14px; }
.haken { display: flex; align-items: center; gap: 8px; font: 700 13px/1.4 var(--text); color: var(--schrift); cursor: pointer; }
.haken input { width: 18px; height: 18px; accent-color: var(--feuer); }

.spur { padding: 4px 6px; }
.spur > summary { cursor: pointer; font: 700 12px/1.4 var(--text); color: var(--schrift-still); }
.spur > summary:hover { color: #FFFFFF; }
.spur pre { max-height: 320px; overflow: auto; margin: 10px 0 0; padding: 12px; border-radius: 12px; background: var(--grund); font: 500 11px/1.5 ui-monospace, Menlo, monospace; color: var(--schrift-leise); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Ein langer Name darf keine Spalte breiter machen als den Bildschirm: Rasterkinder schrumpfen unter ihren Inhalt. */
.zahlen > *, .paar > *, .punkte > *, .community > *, .kanaele > * { min-width: 0; }

/* ---------------------------------------------------------- Anmeldung -- */

/*
  NUR ONLINE (pyron.app/admin, 28.09.2026, `lib/anmeldung.mjs`): eine Karte, ein
  Feld, ein Knopf. Das Feld schreibt 18 px — darunter vergrössert Safari am
  iPhone die ganze Seite, sobald man hineintippt.
*/
.anmeldung { max-width: 440px; margin: 0 auto; padding: 12vh 16px 64px; }
.anmeldung .marke { margin: 0 0 22px 4px; }
.anmeldung .karte { padding: 32px 28px 30px; }
.anmeldung h1 { font: 700 36px/1 var(--titel); letter-spacing: -0.5px; text-transform: uppercase; color: #FFFFFF; }
.anmeldung label { display: block; margin: 28px 0 10px; font: 800 12px/1 var(--text); letter-spacing: 1.6px; text-transform: uppercase; color: var(--schrift-leise); }
.anmeldung input[type='password'] {
  display: block; width: 100%; height: 54px; padding: 0 18px;
  border: 0; border-radius: 16px; background: var(--feld); box-shadow: inset 0 0 0 1px var(--haar-stark);
  font: 700 18px/1 var(--text); color: #FFFFFF;
}
.anmeldung input[type='password']:focus { outline: 2px solid var(--akzent); outline-offset: 2px; }
.anmeldung button {
  display: block; width: 100%; height: 54px; margin-top: 24px;
  border: 0; border-radius: 999px; background: var(--feuer); box-shadow: 0 0 22px rgba(244, 122, 32, 0.45);
  font: 800 16px/1 var(--text); color: #1A212D; cursor: pointer;
}
.anmeldung button:hover { background: #FF8A30; }
.anmeldung-satz { margin: 18px 0 0; font: 700 16px/1.4 var(--text); color: var(--rot); }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Abmelden — nur online, ganz unten unter jeder Seite. */
.fuss { display: flex; justify-content: center; padding: 0 16px 48px; margin-top: -40px; }
.abmelden { padding: 10px 16px; border: 0; border-radius: 999px; background: none; font: 700 13px/1 var(--text); color: var(--schrift-still); cursor: pointer; }
.abmelden:hover { color: #FFFFFF; background: var(--erhoben); }

/* ------------------------------------------------------------- Schmal -- */

/* All eight tabs stay whole down to a 1000 px window: the gaps shrink before a tab is cut off at the edge. */
@media (max-width: 1180px) {
  .leiste-innen { gap: 28px; }
  .reiter { gap: 20px; }
  /* The sound button keeps its bell and its colour; its word moves into the hover text (`portal.js` sets it). */
  .ton { padding: 9px; }
  .ton [data-ton-wort] { display: none; }
}
@media (max-width: 1080px) {
  /* „Live" keeps its green dot. */
  .live { gap: 0; font-size: 0; letter-spacing: 0; }
}
/* The two lists under „Was sich lohnt" one below the other once side by side would cut every name to a few letters. */
@media (max-width: 1180px) {
  .block--ads .paar { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1080px) {
  .zahlen { grid-template-columns: repeat(2, 1fr); }
  .punkte { grid-template-columns: repeat(2, 1fr); }
  .community { grid-template-columns: 1fr; }
  .kanaele-ads { grid-template-columns: 1fr; }
  .kanaele { grid-template-columns: 1fr 1fr; }
}
/* Support: the three numbers stay side by side down to the phone. */
@media (max-width: 1080px) {
  .zahlen--support { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .leiste, .blatt { padding-left: 16px; padding-right: 16px; }
  .fallblatt { padding: 20px 18px 22px; }
  .nachricht { max-width: 100%; }
  .antworten-fuss { flex-direction: column; align-items: stretch; }
  .antworten-fuss .knopf { width: 100%; }
  .leiste-innen { gap: 20px; }
  .paar { grid-template-columns: 1fr; }
  .held { padding: 36px 0 24px; }
  .riesenwort { top: 4px; right: -10px; }
  .karte { padding: 20px 18px; }
}
@media (max-width: 520px) {
  .zahlen, .punkte, .kanaele { grid-template-columns: 1fr; }
  .zahl-wert { font-size: 56px; }
  .zeile-rechts { max-width: 38%; }
  .zeile-name { white-space: normal; }
  .live { display: none; }
  /* Vier Reiter passen am Telefon nur ohne den Schriftzug neben der Flamme (28.09.2026, mit „Popups"). */
  .leiste-innen { gap: 16px; }
  .marke span { display: none; }
  .reiter { gap: 14px; }
  .reiter a { white-space: nowrap; }
  /* Five tabs since 01.10.2026 (Support, with its number) — a little tighter, so the last keeps its edge. */
  .leiste-innen { gap: 12px; }
  .reiter { gap: 11px; }
  .reiter a, .menue-knopf { font-size: 13px; }
  /* Five points since 03.10.2026 (groups): a little closer, the arrow smaller — all five stay whole on a 375 phone. */
  .reiter { gap: 10px; }
  .menue-pfeil { width: 10px; height: 10px; margin-left: 2px; }
}
/* Below 420 px (a 375 phone) the arrows go: with them the five points were 19 px wider than the bar. A tap still opens the list. */
@media (max-width: 420px) {
  .menue-pfeil { display: none; }
  .reiter-zahl { min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; font-size: 10px; }
  /* Seven tabs and more swipe sideways — at every width now, see `.reiter` above. */
  .liste-kopf { flex-direction: column; align-items: stretch; }
  .suche { flex-basis: auto; }
  .ton [data-ton-wort] { display: none; }
  /* On the phone the three numbers stay in one row, small — otherwise they push every report below the fold. */
  .zahlen--support { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .zahlen--support .zahl { padding: 20px 6px 16px; gap: 2px; }
  .zahlen--support .zahl-wert { font-size: 40px; }
  .zahlen--support .zahl-wort { font-size: 13px; text-wrap: balance; }
  .zahlen--support .zahl-satz { display: none; }
  .liste-gross { margin-top: 32px; }
  .fall { grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 16px 16px 15px; }
  .kopf.kopf--fall { width: 40px; height: 40px; }
  .fall-titel { font-size: 15px; }
  .fall-rest { font-size: 13px; -webkit-line-clamp: 1; }
  .fall-rechts { grid-column: 2; padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .puls, .frisch { animation: none; }
}

/* Übersetzung (01.10.2026): German texts English players saw. */
.uebersetzungsliste { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.uebersetzung { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--karte, rgba(255,255,255,.04)); border: 1px solid var(--haar); }
.uebersetzung-text { font: 700 15px/1.45 var(--text); color: var(--schrift); overflow-wrap: anywhere; }
.uebersetzung-dazu { font: 700 12px/1.4 var(--text); color: var(--schrift-still); }

/* --------------------------------------------------------- Bewertungen -- */

/*
  STORE REVIEWS (01.10.2026, Jonas' choice „A · Eine Liste") — the support
  page's night and form: three big numbers on top, one list below. A review is
  a card with its store's mark, gold stars and the reviewer's words; our reply
  sits under it in fire, like our messages in support. A card without a reply
  glows fire at its edge.
*/
.zahl--gelb { --z: var(--gelb); }
.zahlen--bew .zahl-wert { display: inline-flex; align-items: baseline; gap: 4px; }
.stern-gross { font-size: 0.55em; }
.store-gross svg { width: 26px; height: 26px; }
.zahlen--bew { position: relative; z-index: 1; }

.store { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px; background: var(--erhoben); box-shadow: inset 0 0 0 1px var(--haar-stark); font: 800 11px/1 var(--text); letter-spacing: 0.6px; text-transform: uppercase; color: #FFFFFF; white-space: nowrap; }
.store svg { width: 13px; height: 13px; }

.sterne { display: inline-flex; gap: 1px; font-size: 16px; line-height: 1; color: rgba(255, 255, 255, 0.16); letter-spacing: 0; }
.sterne .an { color: var(--gelb); text-shadow: 0 0 10px rgba(245, 199, 102, 0.45); }
.flagge { margin-right: 6px; }

.bew-filter { margin: 0 0 18px; }
.bews { display: flex; flex-direction: column; gap: 12px; }
.bew { position: relative; padding: 22px 24px 20px; border-radius: 22px; background: var(--buehne); border: 1px solid var(--haar); scroll-margin-top: 88px; }
.bew--offen { border-color: rgba(244, 122, 32, 0.35); background: radial-gradient(90% 60% at 0% 0%, rgba(244, 122, 32, 0.09), transparent 70%), var(--buehne); }
.bew-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.bew-wo { margin-left: auto; font: 700 13px/1.3 var(--text); color: var(--schrift-still); white-space: nowrap; }
.bew-titel { margin: 16px 0 0; font: 800 18px/1.35 var(--text); color: #FFFFFF; overflow-wrap: anywhere; }
.bew-text { margin: 8px 0 0; font: 600 15px/1.55 var(--text); color: var(--schrift); white-space: pre-wrap; overflow-wrap: anywhere; }
.bew-titel + .bew-text { margin-top: 6px; }
.bew-kopf + .bew-text { margin-top: 16px; }
.bew-wer { margin: 12px 0 0; font: 700 12px/1.45 var(--text); color: var(--schrift-still); }
.bew-wer > span { white-space: nowrap; }

.bew-antwort {
  margin-top: 16px; padding: 14px 17px 12px; border-radius: 18px 18px 18px 6px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--feuer) 20%, var(--erhoben)), color-mix(in srgb, var(--feuer) 13%, var(--erhoben)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--feuer) 34%, transparent);
}
.bew-antwort-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 8px; font: 800 12px/1.3 var(--text); color: var(--akzent-schrift); }
.bew-antwort-text { margin: 0; font: 600 14px/1.55 var(--text); color: #FFFFFF; white-space: pre-wrap; overflow-wrap: anywhere; }
.bew-zustand { display: inline-flex; align-items: center; gap: 6px; font: 800 12px/1 var(--text); }
.bew-zustand::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bew-zustand--gut { color: var(--gruen); }
.bew-zustand--wartet { color: var(--gelb); }

/* A long reply of ours folds to four lines; a click on it unfolds it. */
.bew-lang > summary { display: block; cursor: pointer; list-style: none; }
.bew-lang > summary::-webkit-details-marker { display: none; }
.bew-lang:not([open]) .bew-antwort-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.bew-lang-wort { display: inline-block; margin-top: 8px; font: 800 12px/1 var(--text); color: var(--akzent-schrift); }
.bew-lang-wort::after { content: 'Ganze Antwort'; }
.bew-lang[open] .bew-lang-wort::after { content: 'Weniger'; }
.bew-lang > summary:hover .bew-lang-wort { color: #FFFFFF; }

.bew-aendern { margin-top: 10px; }
.bew-aendern > summary { display: inline-flex; cursor: pointer; list-style: none; font: 800 12px/1 var(--text); color: var(--schrift-leise); }
.bew-aendern > summary::-webkit-details-marker { display: none; }
.bew-aendern > summary:hover { color: #FFFFFF; }
.antworten--bew { margin-top: 18px; padding-top: 0; border-top: 0; }
.bew-aendern .antworten--bew { margin-top: 12px; }
.antworten--bew textarea { min-height: 96px; }
/* The counter turns fire in the last tenth — Google's 350 characters run out fast. */
[data-zaehler].knapp { color: var(--feuer); }

/* The App Store per country (03.10.2026): name, average, count, and a bar per star. */
.bew-laender { margin: 0 0 28px; padding: 20px 24px 18px; border-radius: 22px; background: var(--buehne); border: 1px solid var(--haar); }
.bew-laender-kopf { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font: 800 13px/1 var(--text); letter-spacing: 0.6px; text-transform: uppercase; color: #FFFFFF; }
.bew-laender-kopf svg { width: 15px; height: 15px; }
.bew-laender-liste { margin: 0; padding: 0; list-style: none; }
.bew-land { display: grid; grid-template-columns: minmax(150px, 1.2fr) 82px 120px minmax(200px, 2fr); align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--haar); }
.bew-land:first-child { border-top: 0; padding-top: 2px; }
.bew-land-name { font: 800 16px/1.3 var(--text); color: #FFFFFF; }
.bew-land-schnitt { display: inline-flex; align-items: baseline; gap: 3px; font: 800 26px/1 var(--titel); color: var(--gelb); }
.bew-land-anzahl { font: 700 14px/1.3 var(--text); color: var(--schrift-leise); }
.bew-land-sterne { display: flex; flex-direction: column; gap: 3px; }
.bew-land-stern { display: grid; grid-template-columns: 26px 1fr 28px; align-items: center; gap: 8px; font: 700 11px/1 var(--text); color: var(--schrift-still); }
.bew-land-stern-zahl { text-align: right; font-variant-numeric: tabular-nums; }
.bew-land-balken { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.bew-land-balken > span { display: block; height: 100%; border-radius: 3px; background: var(--gelb); }
.bew-land-ohne { font: 700 12px/1.4 var(--text); color: var(--schrift-still); }
.bew-laender-satz { margin: 12px 0 0; font: 700 12px/1.5 var(--text); color: var(--schrift-still); }

@media (max-width: 760px) {
  .bew { padding: 18px 16px 16px; }
  .bew-laender { padding: 18px 16px 16px; }
  .bew-land { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .bew-land-anzahl { grid-column: 1; grid-row: 2; }
  .bew-land-schnitt { grid-column: 2; grid-row: 1 / span 2; }
  .bew-land-sterne { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .zahlen--bew .zahl-wert { font-size: 34px; }
  .bew-wo { margin-left: 0; width: 100%; }
  /* The four filters fit a 375 phone when a little smaller; narrower ones swipe, without a scrollbar. */
  .bew-filter { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .bew-filter::-webkit-scrollbar { display: none; }
  .bew-filter a { padding: 9px 11px; font-size: 12px; white-space: nowrap; }
}

/*
  GRUPPEN & DUNGEONS (01.10.2026) — what players do together, and how far.
  A group has three seats: a face for each member, a dimmed face for an open
  invitation, a dashed ring for a free seat. Every bar carries its numbers
  beside it — no percentages (Jonas reads numbers). Jonas' choice between two
  real drafts on 01.10.2026: „B · Karten".
*/
.block-zahl { margin-left: 10px; font: 700 18px/1 var(--titel); letter-spacing: 0; color: var(--feuer); vertical-align: 4px; }
.unterkopf { margin: 34px 0 12px; font: 700 16px/1.2 var(--titel); letter-spacing: 0.4px; text-transform: uppercase; color: var(--schrift-leise); }

.fort { --z: var(--feuer); display: block; width: 100%; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.fort > span { display: block; height: 100%; border-radius: 4px; background: var(--z); box-shadow: 0 0 14px color-mix(in srgb, var(--z) 60%, transparent); }
.fort--gruen { --z: var(--gruen); }
.fort--episch { --z: var(--episch); }

.pille {
  --z: var(--blau);
  display: inline-flex; align-items: center; padding: 6px 11px; border-radius: 999px; white-space: nowrap;
  font: 800 12px/1 var(--text); color: var(--z);
  background: color-mix(in srgb, var(--z) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--z) 36%, transparent);
}
.pille--gruen { --z: var(--gruen); }

.stufe {
  --z: var(--blau);
  display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px;
  font: 800 11px/1 var(--text); letter-spacing: 1px; text-transform: uppercase; vertical-align: 1px;
  color: var(--z); background: color-mix(in srgb, var(--z) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--z) 36%, transparent);
}
.stufe--h { --z: var(--feuer); }
.stufe--m { --z: var(--episch); }

.warm { color: var(--feuer); }
.gut { color: var(--gruen); }

/* ---- A group: a card with its three seats. */
.gkarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.gk { display: flex; flex-direction: column; gap: 16px; padding: 20px 20px 18px; border-radius: var(--rund-kachel); background: var(--buehne); border: 1px solid var(--haar); }
.gk--geschafft { background: transparent; }
.gk-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.gk-name { font: 800 16px/1.25 var(--text); color: #FFFFFF; }
.gk-plaetze { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gk-platz { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.kopf.kopf--gk { width: 54px; height: 54px; }
.gk-platz--eingeladen .kopf { opacity: 0.45; box-shadow: inset 0 0 0 1.5px var(--blau); }
.gk-platz--frei .kopf { background: transparent; box-shadow: none; outline: 1.5px dashed rgba(255, 255, 255, 0.24); outline-offset: -1.5px; }
/* 1.4, not tighter: `overflow: hidden` cuts what stands above the line — the dots of „Özge" went at 1.2. */
.gk-wer { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 13px/1.4 var(--text); color: #FFFFFF; }
.gk-platz--frei .gk-wer { color: var(--schrift-still); }
.gk-anteil { margin-top: -3px; font: 700 12px/1.2 var(--text); color: var(--schrift-still); }
.gk-platz--eingeladen .gk-anteil { color: var(--blau); }
.gk-stand { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.gk-zahl { font: 700 34px/1 var(--titel); letter-spacing: -0.8px; color: #FFFFFF; }
.gk-zahl--klein { font-size: 26px; }
.gk-ziel { font: 700 14px/1.2 var(--text); color: var(--schrift-still); }
.gk-offen { margin: -4px 0 0; font: 700 13px/1.45 var(--text); color: var(--schrift-still); }
.gk-zeile { display: block; text-wrap: pretty; }
.gk-zeile + .gk-zeile { margin-top: 2px; }

/* ---- A dungeon: a card with its picture from the app. */
/* Three side by side down to a 1000 px window — not two and one alone below. */
.dkarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.dk { overflow: hidden; display: flex; flex-direction: column; border-radius: var(--rund-karte); background: var(--buehne); border: 1px solid var(--haar); }
.dk-bild {
  position: relative; aspect-ratio: 16 / 7; padding: 14px;
  background: linear-gradient(135deg, #2A2144, #1A212D) center / cover no-repeat;
  display: flex; align-items: flex-start; justify-content: flex-end;
}
.dk-bild::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, var(--buehne)); }
.dk-bild .stufe { position: relative; z-index: 1; background: color-mix(in srgb, var(--grund) 70%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dk-text { display: flex; flex-direction: column; gap: 10px; padding: 4px 22px 20px; }
.dk-club { font: 700 26px/1.05 var(--titel); letter-spacing: -0.4px; text-transform: uppercase; color: #FFFFFF; }
.dk-was { margin-top: -6px; font: 700 14px/1.3 var(--text); color: var(--schrift-leise); }

@media (max-width: 760px) {
  .dkarten { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- Creator -- */

/* Creator program (02.10.2026): one row per creator, like the translation list; the invite form below. */
.creatorliste { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.creator { display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px; background: var(--karte, rgba(255,255,255,.04)); border: 1px solid var(--haar); }
.creator-code { font: 700 20px/1.1 var(--titel); letter-spacing: -0.2px; color: #FFFFFF; overflow-wrap: anywhere; }
.creator-dazu { font: 700 13px/1.45 var(--text); color: var(--schrift-leise); overflow-wrap: anywhere; }
.creator-dazu b { color: var(--feuer); font-weight: 800; }
.creator-zahlen { font: 700 13px/1.45 var(--text); color: var(--schrift-still); }
.creator-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.creator-knoepfe:empty { display: none; }

/* 16 px in every field: below that Safari on the iPhone zooms the page. */
.formular { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; align-items: end; }
.formular label { display: flex; flex-direction: column; gap: 6px; font: 700 12px/1.4 var(--text); color: var(--schrift-still); }
.formular input, .formular select {
  height: 48px; padding: 0 15px; border: 0; border-radius: 14px;
  background: var(--feld); box-shadow: inset 0 0 0 1px var(--haar-stark);
  font: 600 16px/1.2 var(--text); color: #FFFFFF;
}
.formular input::placeholder { color: var(--schrift-still); }
.formular input:focus, .formular select:focus { outline: 0; box-shadow: inset 0 0 0 1.5px var(--akzent), 0 0 20px rgba(240, 149, 107, 0.2); }
.formular .knopf { justify-self: start; }
.gruppe-leer + .formular { margin-top: 18px; }
/* A long button label may wrap on a phone — the button grows with it instead of clipping. */
.creator-knoepfe .knopf { height: auto; min-height: 40px; padding-top: 9px; padding-bottom: 9px; line-height: 1.25; text-align: center; }
/*
  TRIAL ENDS (04.10.2026, page „Testende") — one row per Berlin day, the
  numbers in the colours of the badges on „Spieler"; a row opens to the
  names. A grid, not a table: an opened day needs the whole width for its
  names.
*/
.zahl--rot { --z: var(--rot); }
.te-liste { overflow: hidden; border-radius: var(--rund-karte); background: var(--buehne); border: 1px solid var(--haar); font-variant-numeric: tabular-nums; }
.te-reihe {
  display: grid; grid-template-columns: minmax(130px, 1.4fr) repeat(4, minmax(64px, 1fr)) 16px;
  align-items: center; gap: 12px; padding: 13px 22px;
}
.te-reihe .rechts { text-align: right; }
.te-kopf { padding-top: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--haar-stark); font: 800 12.5px/1 var(--text); color: var(--schrift-still); }
.te-tag + .te-tag { border-top: 1px solid var(--haar); }
.te-tag > summary { cursor: pointer; list-style: none; transition: background-color 120ms; }
.te-tag > summary::-webkit-details-marker { display: none; }
.te-tag > summary:hover { background: rgba(255, 255, 255, 0.025); }
.te-datum { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.te-datum b { font: 800 15px/1.2 var(--text); color: #FFFFFF; }
.te-datum span { font: 700 12px/1.3 var(--text); color: var(--schrift-still); }
.te-zahl { font: 800 16px/1 var(--text); color: var(--s); }
.te-zahl--testphase { --s: var(--blau); }
.te-zahl--testabo { --s: var(--gelb); }
.te-zahl--rot { --s: var(--rot); }
.te-null { font: 700 14px/1 var(--text); color: var(--schrift-still); }
.te-zusammen b { font: 800 15px/1 var(--text); color: #FFFFFF; }
.te-pfeil { width: 16px; height: 16px; color: var(--schrift-still); transition: transform 160ms var(--kurve); }
.te-tag[open] .te-pfeil { transform: rotate(180deg); }
.te-wer { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 22px 20px; }
.te-summe { border-top: 1px solid var(--haar-stark); font: 800 13px/1.2 var(--text); color: var(--schrift-leise); }
/* On a phone the sum column goes; day and three numbers still fit 358 px, „Gekündigt" over its own column. */
@media (max-width: 640px) {
  .te-reihe { grid-template-columns: minmax(0, 1fr) repeat(3, 62px) 14px; gap: 8px; padding-left: 16px; padding-right: 16px; }
  .te-kopf { font-size: 11.5px; }
  .te-zusammen { display: none; }
  .te-wer { padding-left: 16px; padding-right: 16px; }
}

/*
  Uhr-Liste (07.10.2026, own-clock hours step 7): one German sentence per row,
  so the sentence wraps — every other table cell stays on one line.
*/
.uhr-regel { margin: 28px 0 0; max-width: 860px; font: 700 15px/1.5 var(--text); color: var(--schrift-leise); }
.uhr-tabelle td.uhr-satz { min-width: 320px; white-space: normal; font: 700 14px/1.45 var(--text); color: var(--schrift); }
.uhr-gruppe--rot .block-kopf h2 { color: var(--rot); }
.uhr-gruppe--feuer .block-kopf h2 { color: var(--feuer); }
@media (max-width: 640px) {
  .uhr-tabelle td.uhr-satz { min-width: 220px; }
}