/* ══════════════════════════════════════════════════════════════════
   4ever1 PK-Board — Design
   Dunkles, modernes Bigo-Feeling: tiefes Nachtblau + Neon-Verlauf.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --bg:        #0B0B12;
  --bg-2:      #12121C;
  --card:      #171723;
  --card-2:    #1E1E2D;
  --line:      #2A2A3C;
  --line-soft: #23233340;
  --text:      #ECECF3;
  --muted:     #9A9AB0;
  --muted-2:   #6E6E85;
  /* Zweitnamen. In neu geschriebenen Regeln standen var(--dim) und
     var(--ink) – beide gab es nicht, und eine unbekannte Variable macht
     die ganze color-Angabe ungültig. Die Überschriften der Emoji-Gruppen
     und die Vorschau-Beschriftung erbten dadurch stillschweigend die
     falsche Farbe. Statt neun Regeln umzuschreiben: hier zwei Zeilen. */
  --dim:       #9A9AB0;
  --ink:       #ECECF3;

  --brand:     #B14BFF;   /* Violett */
  --brand-2:   #FF4D9D;   /* Pink   */
  --accent:    #37E0C8;   /* Türkis */
  --grad:      linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  /* Schrift AUF Marken-Flächen. Auf Violett ist das Weiß; auf Gold wäre
     Weiß unlesbar, dort steht dunkle Schrift. Wird je Farbwelt gesetzt. */
  --on-brand:  #fff;
  /* Der farbige Schein unter Marken-Knöpfen – vorher überall fest violett
     eingebaut, was unter einer goldenen Taste falsch aussah. */
  --brand-glow: rgba(177,75,255,.38);

  --ok:        #2ED47A;
  --warn:      #FFB020;
  --danger:    #FF5A5A;

  --radius:    18px;
  --radius-sm: 12px;
  /* V2: mehrschichtige Schatten – weicher Kontaktschatten + tiefer Streuschatten (edel, „schwebend") */
  --shadow:    0 18px 44px -16px rgba(0,0,0,.62), 0 3px 10px -3px rgba(0,0,0,.4);
  --shadow-sm: 0 8px 22px -10px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.32);

  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Quer gehalten frisst die Kamera-Insel eine Seite auf. Ohne diese
     beiden Abstände lag der obere Balken teilweise darunter. */
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --topbar-h:    56px;
  --nav-h:       62px;
  --maxw:        640px;

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Kein Doppeltipp-Zoom auf Knoepfen und Menue-Kacheln: Schnell
   hintereinander getippt, wertete iOS das sonst als Zoom-Geste. :where()
   haelt die Spezifitaet bei null – jede andere touch-action gewinnt. */
:where(a, button, [data-hash], .edge-item, .edge-handle, .kr-card, .qb-btn, .ep-action) { touch-action: manipulation; }
html, body { margin: 0; padding: 0; }
/* ── Die App sitzt fest ───────────────────────────────────────────
   Nichts darf seitlich über den Rand ragen und die ganze Seite
   verschiebbar machen. `clip` schneidet ab, OHNE einen Rollkasten zu
   öffnen — anders als `hidden`, das dem oben klebenden Balken den Halt
   nehmen könnte. Ältere Geräte kennen nur `hidden`; die bekommen es am
   html, wo es dem Balken nicht schadet.
   Waagerechte Leisten (Reiter, Karten, Uno-Hand) haben ihren eigenen
   Rollkasten und bleiben davon unberührt. */
html { overflow-x: hidden; overflow-x: clip; }
body { overflow-x: clip; width: 100%; max-width: 100%; overscroll-behavior-x: none; }
/* Rollkästen rollen senkrecht — waagerecht nie. Sonst ließe sich statt der
   Seite eben das Blatt oder das Menü ein Stück zur Seite ziehen. */
.sheet, .edge-panel.left, .edge-panel.right, .chat-msgs { overflow-x: clip; }
/* Begrüßung auf dem Anmeldebildschirm: zwei Wege, beide gleich viel wert. */
.hallo-label { margin: 20px 0 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase; color: var(--muted); text-align: center; }
.hallo { display: flex; flex-direction: column; gap: 10px; }
.hallo-karte { padding: 14px; border-radius: var(--radius); background: var(--card);
  border: 1px solid var(--line); display: flex; flex-direction: column; gap: 5px; }
.hk-ic { font-size: 26px; line-height: 1; }
.hallo-karte b { font-size: 15.5px; }
.hallo-karte span:last-child { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
/* Anmeldebildschirm: die Bewerbung als eigene Karte mit drei Schritten.
   Wer uns nicht kennt, soll auf einen Blick sehen, wie man hereinkommt —
   und dass es kein Selbstbedienungs-Konto ist. */
.nh-mit { margin-top: 9px; font-size: 12.5px; color: var(--muted); text-align: center; }
.mit-karte { margin: 18px 0 6px; padding: 16px; border-radius: var(--radius);
  background: var(--card); border: 1px solid rgba(240,190,90,.34); }
.mk-kopf { display: flex; gap: 12px; align-items: flex-start; }
.mk-ic { font-size: 26px; line-height: 1; }
.mk-kopf b { font-size: 16px; display: block; }
.mk-kopf span { color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.mk-schritte { display: flex; flex-direction: column; gap: 7px; margin: 13px 0 14px; }
.mk-s { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text); }
.mk-s i { flex: none; width: 21px; height: 21px; border-radius: 50%; background: var(--grad);
  color: var(--on-brand); font-style: normal; font-weight: 800; font-size: 12px;
  display: grid; place-items: center; }
.land-recht { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 4px;
  font-size: 12.5px; color: var(--muted); }
.land-recht a { color: var(--muted); text-decoration: underline; }
/* Geschlecht: zwei Knöpfe, kein Auswahlfeld. */
.bw-gesch { display: flex; gap: 8px; margin: -4px 0 12px; }
.bw-g { flex: 1; padding: 10px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card-2); color: var(--text); font-weight: 700; font-size: 14px; }
.bw-g.an { border-color: transparent; background: var(--grad); color: var(--on-brand); }
.bw-g:active { transform: scale(.97); }
/* Die beiden Wege, ein Gespräch zu beenden. */
.bs-ende { display: flex; gap: 8px; margin-top: 12px; }
.bs-ende .btn { flex: 1; }
/* Die Bewerbungsnummer — groß genug zum Abschreiben. */
.bw-nummer { margin-top: 14px; padding: 12px; border-radius: 14px; background: var(--card-2);
  border: 1px dashed rgba(240,190,90,.5); display: flex; flex-direction: column; gap: 3px; }
.bw-nummer span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.bw-nummer b { font-size: 24px; letter-spacing: 2px; font-variant-numeric: tabular-nums; }
.bw-nummer small { font-size: 12px; color: var(--muted); line-height: 1.4; }
/* Der Weg zurueck ins Gespraech. Vorher: eine unterstrichene Zeile ganz
   unten („ganz schön versteckt", 21.09.2026). Jetzt ein Knopf mit dem
   Satz, um den es geht — man kann mit uns schreiben. */
.mk-stand { display: flex; align-items: center; gap: 11px; width: 100%; margin-top: 12px;
  padding: 11px 13px; border-radius: 14px; text-align: left; cursor: pointer;
  background: var(--card-2); border: 1px solid var(--line); color: var(--text); }
.mk-stand:active { transform: scale(.985); }
.mks-ic { font-size: 22px; flex: none; }
.mks-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mks-t b { font-size: 14.5px; }
.mks-t span { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.mks-p { margin-left: auto; font-size: 20px; color: var(--muted); flex: none; }
/* Und ganz oben auf der Startseite, wenn auf diesem Gerät eine Bewerbung
   läuft: das Band, das direkt ins Gespräch führt. */
.bw-band { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 14px;
  padding: 13px 14px; border-radius: 16px; text-align: left; cursor: pointer; color: var(--text);
  background: linear-gradient(135deg, rgba(177,75,255,.20), rgba(240,190,90,.14));
  border: 1px solid var(--brand); box-shadow: 0 6px 22px rgba(0,0,0,.28); }
.bw-band:active { transform: scale(.985); }
.bwb-ic { font-size: 26px; flex: none; }
.bwb-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bwb-t b { font-size: 15px; }
.bwb-t > span { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.bwb-t i { font-style: normal; font-size: 12px; letter-spacing: 1.4px; color: var(--brand);
  font-variant-numeric: tabular-nums; }
.bwb-p { margin-left: auto; font-size: 22px; color: var(--muted); flex: none; }
/* 💬 Die Chatblase auf dem Anmeldebildschirm. Sie schwebt unten rechts —
   weit genug vom Rand, damit sie auf dem iPhone nicht im Balken klebt. */
/* ⚠️ ENDGÜLTIG: unten RECHTS (Inhaber, 21.09.2026 — „Das war schon richtig").
   Nicht wieder nach links schieben. Der Musik-Knopf steht deshalb eine Reihe
   höher (.hymne-knopf weiter unten); ohne das lagen beide exakt übereinander. */
.chat-blase { position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 60; display: flex; align-items: center; gap: 8px; padding: 11px 15px 11px 13px;
  border-radius: 999px; border: 1px solid var(--brand); color: var(--on-brand);
  background: var(--grad); box-shadow: 0 10px 28px rgba(0,0,0,.42); cursor: pointer; }
.chat-blase:active { transform: scale(.96); }
.cb-ic { font-size: 19px; line-height: 1; }
.cb-t { font-size: 14px; font-weight: 800; }
@media (max-width: 330px) { .cb-t { display: none; } .chat-blase { padding: 13px; } }
/* Der zweite Schritt im Gespräch: aus dem Chat wird eine Bewerbung. */
.bs-zweiter { margin: 12px 0 4px; padding: 12px 13px; border-radius: 14px;
  background: var(--card-2); border: 1px dashed rgba(240,190,90,.5);
  display: flex; flex-direction: column; gap: 3px; }
.bs-zweiter b { font-size: 14.5px; }
.bs-zweiter > span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
/* Die Leiter im Bewerbungs-Gespräch: vier Stufen, eine leuchtet. */
.bw-leiter { margin: 12px 0; padding: 12px 13px; border-radius: 14px;
  background: var(--card-2); display: flex; flex-direction: column; gap: 9px; }
.bwl-stufe { display: flex; align-items: flex-start; gap: 10px; }
.bwl-ic { width: 27px; height: 27px; flex: none; border-radius: 50%; display: grid;
  place-items: center; font-size: 13px; background: var(--card); border: 1px solid var(--line); }
.bwl-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bwl-t b { font-size: 14px; }
.bwl-t span { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.bwl-stufe.offen { opacity: .5; }
.bwl-stufe.fertig .bwl-ic { background: rgba(87,210,154,.18); border-color: rgba(87,210,154,.55); color: #57d29a; }
.bwl-stufe.jetzt .bwl-ic { background: var(--grad); border-color: transparent; color: var(--on-brand); }
.bwl-stufe.jetzt .bwl-t b { color: var(--brand); }
.bwl-stufe.weg { opacity: .45; }
.bwl-next { margin-top: 2px; padding-top: 9px; border-top: 1px solid var(--line-soft);
  font-size: 12.5px; line-height: 1.45; color: var(--text); }
.bw-leiter.aus .bwl-next { color: var(--muted); }
/* 📲 „Als App installieren" auf dem Anmeldebildschirm — solange es die
   Android-Fassung nicht öffentlich im Play Store gibt, ist das DER Weg. */
.hol-app { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 16px;
  padding: 12px 14px; border-radius: 16px; text-align: left; cursor: pointer; color: var(--text);
  background: var(--card); border: 1px solid var(--line); }
.hol-app:active { transform: scale(.985); }
.ha-ic { font-size: 24px; flex: none; }
.ha-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ha-t b { font-size: 14.5px; }
.ha-t span { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.ha-p { margin-left: auto; font-size: 20px; color: var(--muted); flex: none; }
/* 🧭 Der Wegweiser im Verwaltungsraum: Bilder statt Fließtext. */
.wg-kopf { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 12px; }
.wg-kopf b { font-size: 16px; }
.wg-kopf span { font-size: 12.5px; color: var(--muted); }
.wg-weg { display: flex; flex-direction: column; gap: 8px; }
.wg-st { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line); position: relative; }
.wg-st::after { content: ""; position: absolute; left: 27px; bottom: -8px; width: 2px; height: 8px;
  background: var(--line); }
.wg-st:last-child::after { display: none; }
.wg-n { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 800; background: var(--card-2); border: 1px solid var(--line);
  color: var(--muted); }
.wg-ic { font-size: 22px; flex: none; }
.wg-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.wg-t b { font-size: 14.5px; }
.wg-t span { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.wg-wo { flex: none; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px;
  white-space: nowrap; }
.wg-app { background: rgba(87,210,154,.16); color: #57d29a; }
.wg-mcp { background: rgba(177,75,255,.18); color: var(--brand); }
.wg-beides { background: rgba(240,190,90,.16); color: #f0be5a; }
.wg-bilder { display: grid; gap: 4px; }
@media (min-width: 900px) { .wg-bilder { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.wg-haeuser { display: grid; gap: 10px; }
@media (min-width: 720px) { .wg-haeuser { grid-template-columns: repeat(3, 1fr); } }
.wg-haus { display: flex; flex-direction: column; gap: 4px; padding: 13px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line); }
.wg-hic { font-size: 24px; }
.wg-haus b { font-size: 15px; }
.wg-haus > span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.wg-haus i { font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--brand); }
.wg-fuss { margin-top: 18px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
/* Unter der Teilen-Wand: „bereit" als leise grüne Zeile. */
.tw-bereit { font-size: 12.5px; color: #57d29a; margin-bottom: 8px; line-height: 1.45; }
/* 🖥️ Server live: eine ruhige Tafel, die sich selbst erneuert. */
.sl-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px;
  font-weight: 700; margin-bottom: 12px; }
.sl-puls { width: 9px; height: 9px; border-radius: 50%; background: #57d29a;
  box-shadow: 0 0 0 0 rgba(87,210,154,.6); animation: sl-puls 2s infinite; }
@keyframes sl-puls { 70% { box-shadow: 0 0 0 8px rgba(87,210,154,0); } 100% { box-shadow: 0 0 0 0 rgba(87,210,154,0); } }
@media (prefers-reduced-motion: reduce) { .sl-puls { animation: none; } }
.sl-kacheln { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 900px) { .sl-kacheln { grid-template-columns: repeat(4, 1fr); } }
.sl-k { display: flex; flex-direction: column; gap: 4px; border-left: 4px solid var(--line); }
.sl-k.gruen { border-left-color: #57d29a; } .sl-k.gelb { border-left-color: #f0be5a; } .sl-k.rot { border-left-color: #ff6b6b; }
.sl-l { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.sl-k b { font-size: 26px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.sl-linie { width: 100%; height: 34px; display: block; }
.sl-flaeche { fill: rgba(177,75,255,.16); } .sl-strich { fill: none; stroke: var(--brand); stroke-width: 1.6; }
.sl-balken { height: 8px; border-radius: 99px; background: var(--card-2); overflow: hidden; margin: 6px 0 2px; }
.sl-balken i { display: block; height: 100%; background: var(--grad); border-radius: 99px; }
.sl-hinter { display: grid; gap: 6px; }
.sl-z { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center;
  padding: 9px 11px; border-radius: 11px; border: 1px solid var(--line); font-size: 13.5px; }
.sl-z i { font-style: normal; font-size: 12.5px; color: var(--muted); text-align: right; }
.sl-z.an { border-color: var(--brand); } .sl-z.an i { color: var(--brand); }
.sl-z.warn { border-color: #f0be5a; }
.sl-konsole { margin: 6px 0 4px; padding: 10px 12px; border-radius: 12px; background: #07070c; color: #b9f5c8;
  font: 11.5px/1.5 ui-monospace, Menlo, monospace; max-height: 240px; overflow: auto; white-space: pre-wrap;
  word-break: break-word; }
.sl-ticker { display: grid; gap: 3px; font-size: 12px; font-variant-numeric: tabular-nums; }
.sl-a { display: grid; grid-template-columns: 64px 44px 1fr 38px 56px; gap: 8px; padding: 5px 8px;
  border-radius: 8px; background: var(--card); align-items: center; }
.sl-a .sl-w { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, Menlo, monospace; }
.sl-a .sl-t, .sl-a .sl-ms { color: var(--muted); } .sl-a .sl-ms { text-align: right; }
.sl-a.s2 .sl-s { color: #57d29a; } .sl-a.s3 .sl-s { color: var(--muted); }
.sl-a.s4 .sl-s { color: #f0be5a; } .sl-a.s5 .sl-s { color: #ff6b6b; font-weight: 800; }
@media (max-width: 520px) { .sl-a { grid-template-columns: 56px 1fr 34px; } .sl-a .sl-m, .sl-a .sl-ms { display: none; } }
/* 🔬 Sicherheitsprüfung im cp: eine Karte je Programm, Ampel vorn. */
.pz-liste { display: grid; gap: 12px; }
@media (min-width: 1000px) { .pz-liste { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.pz-karte { border-left: 4px solid var(--line); }
.pz-karte.gut { border-left-color: #57d29a; }
.pz-karte.hinweis { border-left-color: #f0be5a; }
.pz-karte.alarm { border-left-color: #ff6b6b; }
.pz-kopf { display: flex; gap: 11px; align-items: flex-start; }
.pz-ic { font-size: 26px; flex: none; }
.pz-t { display: flex; flex-direction: column; gap: 2px; }
.pz-t b { font-size: 15.5px; }
.pz-t span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.pz-stand { margin-top: 12px; padding: 9px 11px; border-radius: 11px; background: var(--card-2);
  font-size: 13.5px; line-height: 1.45; display: flex; flex-direction: column; gap: 3px; }
.pz-stand i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.pz-stand.leer { color: var(--muted); }
.pz-stand.laeuft { flex-direction: row; align-items: center; gap: 8px; color: var(--brand); }
.pz-zahlen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.pz-zahlen div { display: flex; flex-direction: column; padding: 7px 9px; border-radius: 10px;
  border: 1px solid var(--line); }
.pz-zahlen b { font-size: 17px; font-variant-numeric: tabular-nums; }
.pz-zahlen span { font-size: 11.5px; color: var(--muted); }
.pz-mehr { margin-top: 10px; font-size: 12.5px; }
.pz-mehr summary { cursor: pointer; font-weight: 700; }
.pz-mehr ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; color: var(--muted);
  word-break: break-word; }
.pz-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
/* Die EINE Karte: breit genug für alles, die drei Teile als Schritte. */
.pz-eine { max-width: 720px; }
.pz-nacht { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.pz-nacht b { color: var(--text); font-weight: 700; }
.pz-schritte { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.pz-schritt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 11px;
  border: 1px solid var(--line); }
.pz-schritt.dran { border-color: var(--brand); }
.pz-sic { width: 22px; flex: none; text-align: center; }
.pz-st { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.pz-st b { font-size: 13.5px; }
.pz-st span { font-size: 12px; color: var(--muted); line-height: 1.4; }
.pz-schritt i { font-style: normal; font-size: 11.5px; color: var(--muted); flex: none; }
@media (min-width: 560px) { .pz-eine .pz-zahlen { grid-template-columns: repeat(3, 1fr); } }
/* 🔒 „Diese Seite gehört der Teamleitung" — freundlich statt abweisend.
   Vorher landete man wortlos im Feed und hielt die App für kaputt. */
.kr-sperre { max-width: 420px; margin: 8vh auto 0; padding: 26px 20px; text-align: center;
  border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.krs-ic { font-size: 40px; line-height: 1; margin-bottom: 10px; opacity: .9; }
.kr-sperre h2 { font-size: 19px; margin: 0 0 8px; }
.kr-sperre p { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0 0 18px; }
.krs-knoepfe { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.krs-hint { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--muted); line-height: 1.5; }
/* Der Stand ganz oben im Bewerbungs-Gespräch: geschlossen, eingeladen, fertig. */
.pf-stand { margin: 10px 0 4px; padding: 9px 12px; border-radius: 12px; font-size: 13px;
  background: var(--card-2); border: 1px solid var(--line); color: var(--text); }
.pf-stand.weg { opacity: .75; }
.pf-stand.gut { border-color: rgba(87,210,154,.45); color: #57d29a; }
/* 📨 Das Postfach in der App: Gespräche, die auf Antwort warten, stehen
   oben und tragen einen Rand — man soll sie nicht suchen müssen. */
.pf-karte { cursor: pointer; }
.pf-karte.wartet { border-color: var(--brand); }
.pf-oben { display: flex; align-items: center; gap: 8px; }
.pf-oben b { font-size: 15px; }
.pf-wartet { margin-left: auto; font-size: 11.5px; font-weight: 800; color: var(--on-brand);
  background: var(--grad); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pf-letzter { margin-top: 5px; font-size: 13.5px; line-height: 1.45; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pf-fuss { margin-top: 6px; font-size: 11.5px; color: var(--muted); }
/* Die Spur der Zugangsnummer in der Bewerbungsliste (Verwaltungsraum). */
.bw-aud { font-size: 12px; }
.bw-aud.jetzt { color: var(--brand); font-weight: 700; }
.bw-aud.gut { color: #57d29a; }
.bw-aud.schlecht { color: #ff8a8a; }
/* Die Zwischentür: Stand + Gespräch mit der Teamleitung. */
.bs-kopf { display: flex; align-items: center; gap: 11px; margin: 14px 0 10px; padding: 11px 13px;
  border-radius: 14px; background: var(--card-2); }
.bs-kopf > span { font-size: 24px; }
.bs-kopf div { display: flex; flex-direction: column; }
.bs-kopf b { font-size: 15px; }
.bs-kopf div span { font-size: 13px; color: var(--muted); }
.bs-chat { max-height: 42vh; overflow-y: auto; display: flex; flex-direction: column; gap: 7px;
  padding: 4px 2px; }
.bs-m { align-self: flex-end; max-width: 86%; padding: 9px 12px; border-radius: 16px 16px 4px 16px;
  background: var(--grad); color: var(--on-brand); display: flex; flex-direction: column; gap: 3px; }
.bs-m.team { align-self: flex-start; border-radius: 16px 16px 16px 4px; background: var(--card-2);
  color: var(--text); border: 1px solid var(--line); }
.bs-m span { font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.bs-m i { font-size: 11px; opacity: .75; font-style: normal; align-self: flex-end; }
.bs-schreib { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.bs-schreib textarea { flex: 1; resize: none; }
/* Bewerbung: erst die Richtung, dann die Fragen. */
.bw-rollen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 14px; }
.bw-rolle { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: 13px 9px; border-radius: 16px; border: 1px solid var(--line); background: var(--card-2);
  color: var(--text); }
.bw-rolle b { font-size: 14.5px; }
.bw-rolle span:last-child { color: var(--muted); font-size: 12px; line-height: 1.35; }
.bwr-ic { font-size: 24px; }
.bw-rolle.an { border-color: transparent; background: var(--grad); color: var(--on-brand); }
.bw-rolle.an span:last-child { color: rgba(255,255,255,.85); }
.bw-rolle:active { transform: scale(.97); }
/* Der dritte Weg auf dem Anmeldebildschirm: Bewerben. Bewusst etwas
   zurückhaltender als die beiden darüber — wer schon dabei ist, soll
   zuerst seinen eigenen Weg finden. */
.weg.weg-neu { border-color: rgba(240,190,90,.38); background: rgba(240,190,90,.08); }
.weg.weg-neu .weg-ic { filter: drop-shadow(0 4px 10px rgba(240,190,90,.35)); }
/* 🙂 Anstupser fürs Profilbild — freundlich, nicht mahnend. */
.av-stups { position: relative; display: flex; gap: 12px; align-items: flex-start;
  margin: 0 0 12px; padding: 14px 40px 14px 14px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); }
.avs-kreis { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-size: 22px; background: var(--grad); box-shadow: 0 6px 18px var(--brand-glow); }
.avs-mid { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.avs-mid b { font-size: 15.5px; }
.avs-sub { color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.avs-mid .btn { align-self: flex-start; margin-top: 4px; }
/* 🏷️ Sticker: groß, ohne Blase — er IST die Nachricht. */
.bubble-stk { background: none !important; border: 0 !important; box-shadow: none !important; padding: 2px 0 !important; }
.stk { font-size: 58px; line-height: 1.05; display: block; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
.stk-a4 { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font-size: 0; }
.stk-a4 img { width: 64px; height: 64px; filter: drop-shadow(0 6px 14px var(--brand-glow)); }
.stk-a4 b { font-size: 15px; font-weight: 900; letter-spacing: 1.5px;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stk-waehl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.stk-w { padding: 8px 4px; border-radius: 14px; border: 1px solid var(--line); background: var(--card-2);
  display: grid; place-items: center; min-height: 74px; }
.stk-w:active { transform: scale(.94); }
.stk-w .stk { font-size: 34px; }
.stk-w .stk-a4 img { width: 38px; height: 38px; }
.stk-w .stk-a4 b { font-size: 10px; letter-spacing: .8px; }
/* 🧵 Der Faden */
.ch-faden { display: inline-flex; align-items: center; gap: 5px; margin: 2px 0 0; padding: 4px 10px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--card-2);
  color: var(--brand); font-size: 12.5px; font-weight: 800; }
.ch-faden:active { transform: scale(.96); }
.fd-kopf { border-left: 3px solid var(--brand); padding-left: 8px; margin-bottom: 10px; }
.fd-liste { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
/* Im Blatt ist weniger Platz als im Kanal — die Blasen dürfen ihn nutzen,
   sonst steht jedes Wort einzeln untereinander.
   ⚠️ Die Spalten-Regel des Chats hängt an `.chat-msgs` und greift hier
   nicht; ohne diese Zeilen schrumpft die Spalte auf die Breite des
   längsten Wortes. */
.fd-kopf .msg-col, .fd-liste .msg-col { display: flex; flex-direction: column; gap: 3px;
  flex: 1; min-width: 0; max-width: 88%; }
.fd-kopf .bubble, .fd-liste .bubble { max-width: 100%; }
.fd-liste .msg.mine .msg-col { align-items: flex-end; }
.fd-schreib { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; }
.fd-schreib textarea { flex: 1; resize: none; min-height: 42px; max-height: 120px; }
/* 🗓️ Terminvorschlag */
.ch-termin { display: flex; flex-direction: column; gap: 8px; min-width: 210px; }
.ct-kopf { display: flex; align-items: center; gap: 9px; }
.ct-ic { font-size: 22px; }
.ct-kopf div { display: flex; flex-direction: column; line-height: 1.2; }
.ct-kopf b { font-size: 14.5px; }
.ct-kopf span { font-size: 13px; color: var(--muted); }
.ct-frage { font-size: 14.5px; }
.ct-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ct-opt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--card-2); color: var(--text);
  font-size: 13px; font-weight: 700; }
.ct-opt b { font-size: 12px; color: var(--muted); min-height: 14px; }
.ct-opt.voted { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 18%, transparent); }
.ct-opt:disabled { opacity: .9; }
/* Auf der eigenen Blase liegt der Markenverlauf — darauf ist das gedämpfte
   Grau nicht mehr zu lesen. Dort also helle Schrift und dunklere Knöpfe. */
.msg.mine .ct-kopf span,
.msg.mine .ch-termin .cp-total { color: rgba(255,255,255,.88); }
.msg.mine .ct-opt { background: rgba(0,0,0,.30); border-color: rgba(255,255,255,.34); color: #fff; }
.msg.mine .ct-opt b { color: rgba(255,255,255,.78); }
.msg.mine .ct-opt.voted { background: rgba(0,0,0,.45); border-color: #fff; }
.tv-wann { display: flex; gap: 8px; }
.tv-wann input { flex: 1; min-width: 0; }
/* 📌 Angeheftet: eine Zeile unter der Kopfzeile, antippbar. */
.ch-pin { display: flex; align-items: center; gap: 6px; margin: 0 0 6px;
  padding: 8px 10px; border-radius: 12px; background: var(--card-2);
  border-left: 3px solid var(--brand); }
.chp-go { flex: 1; display: flex; align-items: center; gap: 9px; text-align: left; min-width: 0;
  background: none; border: 0; color: var(--text); padding: 0; }
.chp-ic { font-size: 15px; flex: none; }
.chp-txt { min-width: 0; display: flex; flex-direction: column; }
.chp-txt b { font-size: 12.5px; color: var(--brand); }
.chp-txt span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chp-weg { flex: none; background: none; border: 0; color: var(--muted); font-size: 15px; padding: 4px 6px; }
/* Kurz aufleuchten, wenn man aus der Suche oder vom Angehefteten herspringt. */
.msg-blink { animation: msgBlink 2.2s ease; }
@keyframes msgBlink { 0%, 60% { background: color-mix(in srgb, var(--brand) 22%, transparent); border-radius: 12px; } 100% { background: transparent; } }
/* 🔍 Suche im Kanal */
.chs-liste { max-height: 56vh; overflow-y: auto; margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.chs-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; text-align: left; width: 100%;
  padding: 10px 12px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); color: var(--text); }
.chs-row b { font-size: 13.5px; }
.chs-zeit { font-size: 11.5px; color: var(--muted); }
.chs-txt { grid-column: 1 / -1; font-size: 13.5px; color: var(--muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chs-txt mark { background: color-mix(in srgb, var(--brand) 38%, transparent); color: var(--text); border-radius: 4px; padding: 0 2px; }
/* Die Anleitung „So teilst du deinen Stream": Nummer, Text, Bild. */
.th-schritt { display: grid; grid-template-columns: 30px 1fr; gap: 10px 12px; align-items: start;
  margin: 14px 0; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.th-schritt:last-of-type { border-bottom: 0; }
.th-nr { width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: var(--on-brand);
  display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.th-txt { display: flex; flex-direction: column; gap: 3px; }
.th-txt b { font-size: 15.5px; }
.th-txt span { color: var(--muted); font-size: 14px; line-height: 1.45; }
.th-bild { grid-column: 1 / -1; width: 100%; border-radius: 14px; border: 1px solid var(--line);
  box-shadow: 0 8px 22px rgba(0,0,0,.4); }
.th-danach { margin: 16px 0 10px; padding: 12px 14px; border-radius: 14px; background: var(--card-2);
  display: flex; flex-direction: column; gap: 7px; font-size: 14px; line-height: 1.4; }
.th-danach b { font-size: 15px; }
.th-android { margin: 10px 0; padding: 11px 14px; border-radius: 14px; background: rgba(255,255,255,.04);
  display: flex; flex-direction: column; gap: 4px; }
.th-android span { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.tc-teilwand .btn.ghost.sm { min-width: 0; font-size: 13.5px; }
/* „Mehr anzeigen" unter den ersten drei Kommentaren. */
.cmt-mehr { display: block; width: 100%; margin: 2px 0 8px; font-weight: 700; color: var(--muted); }
/* Hinweis auf der Teilen-Wand, wenn die App-Fassung zu alt ist. */
.tw-alt { display: flex; flex-direction: column; gap: 3px; margin-bottom: 4px; padding: 10px 12px;
  border-radius: 12px; background: rgba(255,170,0,.14); border: 1px solid rgba(255,170,0,.4); }
.tw-alt span { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
/* Teilen-Wand statt Schreibfeld: ein Knopf, eine Zeile Erklärung. */
.tc-teilwand { display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 14px 16px calc(var(--safe-bottom) + 16px); text-align: center; }
.tc-teilwand .btn { min-width: 220px; font-size: 16px; }
/* Was von Natur aus breiter sein kann, wird eingefangen statt zu schieben. */
img, video, canvas, svg, iframe, table, pre { max-width: 100%; }
/* Ein langer Link ohne Leerzeichen hat früher die Seite aufgespannt. */
p, li, td, .card, .post-text, .msg-text, .gb-text { overflow-wrap: anywhere; }
/* Dunkel auch aufs html – sonst blitzt beim Überscrollen/unter dem Inhalt der weiße Standard durch. */
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: .1px;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--brand-2); text-decoration: none; }
button { font-family: inherit; }
img { max-width: 100%; display: block; }

/* ── Scrollbalken: unsichtbar ─────────────────────────────────────────
   Der helle Standardbalken des Browsers war in einem dunklen Blatt das
   Hellste auf dem Schirm. Ihn nur einzufärben hat das Grundproblem nicht
   gelöst: Ein Balken ist eine Bedienhilfe aus der Mauszeit – auf dem
   Handy wischt man ohnehin, und angefasst hat ihn hier nie jemand.

   Also weg damit. Damit trotzdem sichtbar bleibt, dass unten noch etwas
   liegt, bekommen lange Listen stattdessen eine weiche Kante (siehe
   .kante weiter unten): Der Inhalt verläuft am Rand ins Nichts, statt
   abgeschnitten dazustehen. Das sagt dasselbe, ohne einen Streifen. */
html { scrollbar-width: none; -ms-overflow-style: none; }
::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ── Weiche Kante statt Balken ─────────────────────────────────────────
   Die Maske liegt auf dem Behälter, nicht auf dem Inhalt – sie scrollt
   also nicht mit, sondern bleibt am Rand stehen. Die zwei Klassen setzt
   kantenBeobachten() in app.js: oben nur, wenn schon gescrollt wurde,
   unten nur, solange noch etwas kommt. Am Ende der Liste ist die Kante
   weg – sonst sähe das letzte Element für immer halb verschluckt aus. */
.kante {
  --k-o: 0px; --k-u: 0px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--k-o),
    #000 calc(100% - var(--k-u)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--k-o),
    #000 calc(100% - var(--k-u)), transparent 100%);
}
.kante.kante-oben { --k-o: 24px; }
.kante.kante-unten { --k-u: 28px; }
/* Waagerechte Streifen (Kartenhand, Chip-Reihen) verlaufen zur Seite. */
.kante.quer {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--k-o),
    #000 calc(100% - var(--k-u)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--k-o),
    #000 calc(100% - var(--k-u)), transparent 100%);
}

/* Boot-Splash: markiger Ladebildschirm beim App-Start */
.boot { min-height: 100dvh; display: grid; place-items: center; color: var(--muted);
  background: radial-gradient(120% 80% at 50% -10%, rgba(177,75,255,.22), transparent 60%),
    radial-gradient(100% 60% at 50% 112%, rgba(255,77,157,.15), transparent 60%),
    var(--bg); background: radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 60%),
    radial-gradient(100% 60% at 50% 112%, rgba(255,77,157,.15), transparent 60%),
    var(--bg); }
.boot-inner { display: flex; flex-direction: column; align-items: center; text-align: center; animation: bootIn .5s ease both; }
.boot-logo { width: min(230px, 62vw); height: auto; filter: drop-shadow(0 8px 34px rgba(177,75,255,.55)); filter: drop-shadow(0 8px 34px color-mix(in srgb, var(--brand) 55%, transparent));
  animation: bootFloat 3.4s ease-in-out infinite, rgbLauf 9s linear infinite; }
.boot-title { font-weight: 900; font-size: 34px; letter-spacing: 1px; line-height: 1; color: var(--text); margin-top: 2px;
  text-shadow: 0 0 10px rgba(232,190,85,.6), 0 0 26px rgba(201,137,12,.45);
  text-shadow: 0 0 10px color-mix(in srgb, var(--brand) 60%, transparent), 0 0 26px color-mix(in srgb, var(--brand-2) 55%, transparent); }
.boot-title span { background: linear-gradient(120deg, var(--brand-2), var(--accent, #37e0c8)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.boot-ver { margin-top: 14px; font-size: 11px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: #d9c9ff;
  padding: 5px 15px; border-radius: 999px; background: rgba(120,90,255,.1); background: color-mix(in srgb, var(--brand) 10%, transparent); background: color-mix(in srgb, var(--brand) 10%, transparent);
  border: 1px solid transparent; background-clip: padding-box; position: relative; }
.boot-ver::before { content: ''; position: absolute; inset: 0; border-radius: 999px; padding: 1px; pointer-events: none;
  background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }
.boot-tag { margin-top: 22px; font-size: 10.5px; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase; color: var(--muted); }
@keyframes bootFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes bootIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Das Logo läuft durch die Farben (RGB) ────────────────────────────
   Kein zweites Bild und keine Bilderfolge: Die Acht ist EIN PNG, das
   durch den Farbkreis gedreht wird - genau wie beim Zeichen im Profil.
   Neun Sekunden für eine ganze Runde, damit es schimmert und nicht
   blinkt. Wer schnelle Farbwechsel schlecht verträgt, bekommt sie
   über prefers-reduced-motion gar nicht erst zu sehen. */
/* Bleibt für das persoenliche Emblem stehen, wird vom Logo aber nicht
   mehr benutzt – dort dreht sonst der Farbton durch den ganzen Kreis. */
@keyframes rgbLauf {
  0%   { filter: drop-shadow(0 10px 34px rgba(255,206,84,.45)) hue-rotate(0deg)   saturate(1.15); }
  50%  { filter: drop-shadow(0 10px 34px rgba(120,190,255,.45)) hue-rotate(180deg) saturate(1.3); }
  100% { filter: drop-shadow(0 10px 34px rgba(255,206,84,.45)) hue-rotate(360deg) saturate(1.15); }
}
@media (prefers-reduced-motion: reduce) { .boot-logo, .boot-inner, .nh-logo-img { animation: none; } }

/* Zentraler In-App-Ladezustand (beim Seiten-/Datenladen) */
.page-load { min-height: 52vh; display: grid; place-items: center; grid-auto-flow: row; gap: 14px;
  /* Erst nach 150 ms: Bei schnellen Antworten blitzte der Ring sonst fuer
     ein, zwei Bilder auf – die Seite wirkte unruhig statt schnell. */
  animation: fade-in .2s ease .15s backwards; }
.page-load .load-ring { width: 42px; height: 42px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 8%, var(--brand) 62%, var(--brand-2) 96%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: spin .9s linear infinite; }
.page-load .load-txt { font-size: 12px; font-weight: 700; letter-spacing: .5px; color: var(--muted); }
[hidden] { display: none !important; }

/* ── App-Gerüst ─────────────────────────────────────────────────── */
.app-shell { min-height: 100dvh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  height: calc(var(--topbar-h) + var(--safe-top));
  padding-top: var(--safe-top);
  display: flex; align-items: center; gap: 10px;
  padding-left: calc(16px + var(--safe-left)); padding-right: calc(12px + var(--safe-right));
  background: rgba(11,11,18,.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar .brand { display: flex; align-items: center; gap: 9px; font-weight: 800; letter-spacing: .2px; }
.topbar .brand .dot {
  width: 26px; height: 26px; border-radius: 9px; background: var(--grad);
  display: grid; place-items: center; font-size: 14px; box-shadow: 0 4px 14px var(--brand-glow);
}
.topbar .brand b { font-size: 17px; }
.topbar .brand span { color: var(--muted); font-weight: 600; font-size: 13px; }
.topbar .spacer { flex: 1; }
.topbar .icon-btn {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); font-size: 18px; display: grid; place-items: center;
  transition: transform .08s ease, filter .08s ease;
}
/* Profilbild und Lupe reagierten nicht sichtbar auf den Finger. */
.topbar .icon-btn:active { transform: scale(.92); filter: brightness(1.15); }
.topbar .avatar-btn { padding: 0; overflow: hidden; }

.main {
  flex: 1; width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: 14px calc(16px + var(--safe-right)) calc(var(--safe-bottom) + 28px) calc(16px + var(--safe-left));
}
.bottom-nav a .ic { font-size: 21px; line-height: 1; transition: transform .15s; }
.bottom-nav a.active { color: var(--text); }
.bottom-nav a.active .ic { transform: translateY(-1px) scale(1.06); }
.bottom-nav a.active::before {
  content: ''; position: absolute; top: 8px; width: 30px; height: 30px; border-radius: 10px;
  background: radial-gradient(circle, rgba(177,75,255,.28), transparent 70%); background: radial-gradient(circle, color-mix(in srgb, var(--brand) 28%, transparent), transparent 70%);
}

/* ── Karten / Sektionen ─────────────────────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 12px; }
.section-title { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: .6px; margin: 22px 4px 10px; }
.section-title:first-child { margin-top: 6px; }
.stack > * + * { margin-top: 12px; }
.muted { color: var(--muted); }
.tiny { font-size: 12.5px; }
.center { text-align: center; }

.empty { text-align: center; color: var(--muted); padding: 40px 16px; }
.empty .big { font-size: 40px; margin-bottom: 10px; opacity: .8; }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  appearance: none; border: 1px solid var(--line); background: var(--card-2); color: var(--text);
  padding: 12px 16px; border-radius: 13px; font-size: 15px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .08s, filter .15s;
}
.btn:active { transform: scale(.97); }
.btn.block { display: flex; width: 100%; }
.btn.primary { background: var(--grad); border: none; color: var(--on-brand); box-shadow: 0 6px 18px var(--brand-glow); }
.btn.ghost { background: transparent; }
.btn.ok { background: rgba(46,212,122,.14); border-color: rgba(46,212,122,.4); color: #7EF0AE; }
.btn.danger { background: rgba(255,90,90,.12); border-color: rgba(255,90,90,.4); color: #FF8A8A; }
.btn.sm { padding: 8px 12px; font-size: 13px; border-radius: 10px; }

/* ── Ein Knopf bricht NIE mitten im Wort ─────────────────────────────
   Weiter oben steht `p, li, td, .card, … { overflow-wrap: anywhere; }`,
   damit ein langer Link oder ein langer Name den Kasten nicht sprengt.
   Diese Eigenschaft vererbt sich — auch an jeden Knopf in einem Kasten.
   Und `anywhere` ist nicht dasselbe wie `break-word`: Es erlaubt dem
   Knopf, SCHMALER zu werden als sein längstes Wort. In den Einstellungen
   stand deshalb „Kana/l" und „Öffne/n" — und auf einem schmalen Telefon
   wurde daraus ein Buchstabe pro Zeile, senkrecht.
   Die Beschriftung erbt das hier wieder ab. */
.btn { overflow-wrap: normal; word-break: normal; hyphens: none; }

/* ── Dasselbe für ALLE kurzen Beschriftungen, nicht nur für Knöpfe ────
   Das Problem ist nie der Knopf gewesen, sondern die Vererbung: Was in
   einem Kasten steht, erbt `overflow-wrap: anywhere` — also auch jedes
   Fähnchen, jeder Zähler, jede Statusmarke. Ein Status „abgelaufen" kann
   damit zu „abgelau/fen" werden, und auf einem schmalen Telefon zu einem
   Buchstaben pro Zeile.
   Nach MUSTER statt nach Liste: Eine Aufzählung von dreißig Klassennamen
   wäre beim nächsten neuen Fähnchen schon wieder unvollständig. Alles, was
   „chip", „badge", „pill", „status", „count" oder „flag" im Klassennamen
   trägt, ist eine kurze Marke — und kurze Marken bricht man nicht.
   Eine Regel, die ein Element DIREKT trifft, schlägt immer das, was es nur
   geerbt hat; auf Spezifität kommt es hier also nicht an. Wer für ein
   bestimmtes Element doch umbrechen will, schreibt es weiterhin selbst hin
   (so wie `.gb-link` mit `break-all`) und gewinnt damit. */
button, select, summary,
[class*="chip"], [class*="badge"], [class*="pill"],
[class*="status"], [class*="count"], [class*="flag"] {
  overflow-wrap: normal; word-break: normal;
}

/* ── Zeile „Text links, Knopf rechts" ────────────────────────────────
   Nachgeben soll der TEXT, nie der Knopf. `white-space: nowrap` hält die
   Beschriftung einzeilig; dadurch ist die Mindestbreite des Knopfes sein
   ganzes Wort, und er kann gar nicht mehr gequetscht werden.
   Rutscht der Knopf dadurch in die nächste Zeile, ist das gewollt — siehe
   die Regel bei `.row-between`. */
.row-between > .btn { flex: 0 0 auto; white-space: nowrap; }
/* Wann rutscht der Knopf nach unten? An dieser Zahl.
   Flexbox entscheidet den Umbruch an der WUNSCHbreite der Kinder, nicht an
   ihrer Mindestbreite. Ohne eine Grundbreite wäre die Wunschbreite des
   Textes sein ganzer Satz in einer Zeile — damit passte NIE etwas daneben
   und der Knopf rutschte selbst auf einem breiten Bildschirm ab.
   15rem Grundbreite + Abstand + Knopf heisst: Unter rund 340 px geht der
   Knopf in die nächste Zeile, darüber bleibt er rechts stehen. `1 1`, damit
   der Text den restlichen Platz trotzdem ausfüllt. */
.row-between > :not(.btn) { flex: 1 1 15rem; min-width: 0; }
.btn.pill { border-radius: 999px; }
.btn:disabled { opacity: .5; }
.btn-row { display: flex; gap: 10px; }
.btn-row > .btn { flex: 1; }
/* ⚖️ Akte direkt in der Mitgliederzeile – schmal, damit der Name Platz behält */
.mem-akte { flex: none; min-width: 0; padding-left: 11px; padding-right: 11px; text-decoration: none; }

/* ── Formulare ──────────────────────────────────────────────────── */
label.field { display: block; margin-top: 14px; }
label.field > span { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
input, textarea, select {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  padding: 13px 14px; border-radius: 12px; font-size: 16px; font-family: inherit; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
/* Sichtbarer Fokus für Tastatur-/iPad-Tastatur-Bedienung – nur bei echter Tastatur, nicht bei Touch/Maus. */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.hint { font-size: 12.5px; color: var(--muted-2); margin-top: 6px; }
.hint.ok { color: var(--ok); }
.hint.bad { color: var(--danger); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── Auth ───────────────────────────────────────────────────────── */
.auth-wrap { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--safe-top) + 24px) 20px calc(var(--safe-bottom) + 24px); max-width: 460px; margin: 0 auto; }
.auth-logo { text-align: center; margin-bottom: 22px; }
/* Moderations-Login (mcp/acp) */
.mod-logo { text-align: center; margin-bottom: 24px; }
.mod-shield { width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 24px; display: grid; place-items: center; font-size: 42px;
  background: var(--grad); box-shadow: 0 12px 34px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.25); animation: floaty 4.5s ease-in-out infinite; }
.mod-logo h1 { margin: 0; font-size: 26px; font-weight: 900; letter-spacing: .5px; color: #fff; }
.mod-logo p { margin: 7px 0 0; color: var(--muted); font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.auth-logo .mark { width: 66px; height: 66px; border-radius: 20px; margin: 0 auto 12px; background: var(--grad);
  display: grid; place-items: center; font-size: 30px; box-shadow: 0 10px 30px var(--brand-glow); }
.auth-logo h1 { margin: 0; font-size: 23px; letter-spacing: .3px; }
.auth-logo p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.auth-switch { text-align: center; margin-top: 18px; color: var(--muted); font-size: 14px; }
.auth-switch b { color: var(--brand-2); cursor: pointer; }
.auth-back { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 14px; cursor: pointer; margin-bottom: 6px; }
.feat { display: flex; align-items: center; gap: 13px; padding: 14px 16px; }
.feat .fic { font-size: 24px; width: 30px; text-align: center; flex: none; }
.feat b { font-size: 15px; }

/* Übergang Startseite ⇄ Login/Registrieren (richtungsabhängig, mit Blur+Scale) */
#authbox { will-change: transform, opacity, filter; }
.auth-leave-fwd  { animation: authLeaveL .22s ease forwards; }
.auth-leave-back { animation: authLeaveR .22s ease forwards; }
.auth-enter-fwd  { animation: authEnterR .40s cubic-bezier(.16,.8,.24,1) both; }
.auth-enter-back { animation: authEnterL .40s cubic-bezier(.16,.8,.24,1) both; }
@keyframes authLeaveL { to { opacity: 0; transform: translateX(-30px) scale(.94); filter: blur(6px); } }
@keyframes authLeaveR { to { opacity: 0; transform: translateX(30px) scale(.94); filter: blur(6px); } }
@keyframes authEnterR { from { opacity: 0; transform: translateX(38px) scale(.97); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes authEnterL { from { opacity: 0; transform: translateX(-38px) scale(.97); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
/* Logo gibt beim Wechsel einen kleinen Puls (Anker-Gefühl) */
.auth-logo.switching .mark { animation: markPulse .5s ease; }
@keyframes markPulse { 30% { transform: scale(1.12) rotate(-4deg); } 60% { transform: scale(.96); } }

/* ── Avatare ────────────────────────────────────────────────────── */
.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--card-2); flex: none; }
.avatar.lg { width: 84px; height: 84px; }
.avatar.sm { width: 34px; height: 34px; }
.avatar.ph { display: grid; place-items: center; font-weight: 800; color: var(--on-brand); background: var(--grad); }

/* ── Badges / Chips ─────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700;
  padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.badge.in   { background: rgba(46,212,122,.14); color: #7EF0AE; border-color: rgba(46,212,122,.35); }
.badge.out  { background: rgba(255,90,90,.12); color: #FF9A9A; border-color: rgba(255,90,90,.3); }
.badge.open { background: rgba(55,224,200,.12); color: var(--accent); border-color: rgba(55,224,200,.3); }
.badge.locked { background: rgba(255,176,32,.12); color: var(--warn); border-color: rgba(255,176,32,.3); }
.badge.admin { background: var(--grad); color: var(--on-brand); border: none; }
.badge.lead { background: rgba(255,176,32,.18); color: var(--warn); border: 1px solid rgba(255,176,32,.4); }
.badge.mod { background: rgba(55,224,200,.16); color: var(--accent); border: 1px solid rgba(55,224,200,.35); }

/* ── PK-Event-Karten ────────────────────────────────────────────── */
.pk-card { position: relative; overflow: hidden; }
/* PK-Countdown im Banner */
.pk-cd { margin-top: 10px; padding: 8px 12px; border-radius: 11px; font-size: 13.5px; font-weight: 800;
  text-align: center; background: rgba(255,255,255,.07); border: 1px solid var(--line-soft); color: var(--text); }
.pk-cd.soon { background: linear-gradient(120deg, rgba(255,60,120,.22), rgba(255,140,60,.22));
  border-color: rgba(255,95,158,.5); color: #ffd6e4; animation: pkPulse 1.6s ease-in-out infinite; }
.pk-cd.live { background: linear-gradient(120deg, #ff3c78, #ff7a3c); border-color: transparent; color: #fff;
  box-shadow: 0 6px 20px -6px rgba(255,60,120,.7); animation: pkPulse 1s ease-in-out infinite; }
@keyframes pkPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .pk-cd.soon, .pk-cd.live { animation: none; } }
/* PK-Teilnahme bestätigen */
.pk-confirmed { margin-top: 12px; text-align: center; font-size: 14px; font-weight: 800; color: #9fe6c2;
  background: rgba(34,197,94,.13); border: 1px solid rgba(34,197,94,.42); border-radius: 12px; padding: 11px 12px; }
.pk-confirm-btn { animation: pkPulse 1.8s ease-in-out infinite; }
.badge.pk-nc { background: rgba(255,170,0,.16); color: #ffcf7a; border: 1px solid rgba(255,170,0,.4); }
/* ⚔️ PK-Ankündigung */
.pk-banner { width: 100%; border-radius: 14px; margin: 12px 0 4px; display: block; border: 1px solid var(--line-soft); }
.pka-banner { display: grid; place-items: center; min-height: 120px; border-radius: 14px; margin-bottom: 12px; cursor: pointer;
  border: 2px dashed rgba(120,90,255,.4); border: 2px dashed color-mix(in srgb, var(--brand) 40%, transparent); background: rgba(120,90,255,.07); background: color-mix(in srgb, var(--brand) 7%, transparent); color: var(--muted); font-weight: 700; overflow: hidden; text-align: center; padding: 12px; }
.pka-banner.has { border-style: solid; padding: 0; }
.pka-banner img { width: 100%; display: block; border-radius: 12px; }
.pka-modes { display: flex; gap: 8px; margin: 4px 0 12px; }
.pka-mode, .pka-ann { flex: 1; padding: 9px 8px; border-radius: 11px; border: 1px solid var(--line); background: var(--bg-2);
  color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.pka-mode.on, .pka-ann.on { border-color: var(--brand); background: rgba(120,90,255,.16); background: color-mix(in srgb, var(--brand) 16%, transparent); background: color-mix(in srgb, var(--brand) 16%, transparent); color: #fff; }
.pka-prev-open { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(120,90,255,.1); background: color-mix(in srgb, var(--brand) 10%, transparent); background: color-mix(in srgb, var(--brand) 10%, transparent);
  border: 1px solid rgba(120,90,255,.3); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); font-size: 13px; font-weight: 700; line-height: 1.5; }
.pka-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.pka-mem { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--bg-2); border-radius: 12px; }
.pka-mem.on { border-color: var(--brand); background: rgba(120,90,255,.14); background: color-mix(in srgb, var(--brand) 14%, transparent); background: color-mix(in srgb, var(--brand) 14%, transparent); }
.pka-mem-main { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 46px; text-align: left; padding: 8px 12px;
  border: none; background: none; color: var(--text); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pka-mem-main .avatar { width: 38px; height: 38px; min-height: 38px; border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; flex: 0 0 auto; align-self: center; }
.pka-mem-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pka-mem-n { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pka-mem-id { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pka-opt { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 4px; }
.pka-mem-chk { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; flex: 0 0 auto; background: rgba(255,255,255,.08); }
.pka-mem.on .pka-mem-chk { background: var(--brand); color: var(--on-brand); }
.pka-mem-timerow { display: flex; align-items: center; gap: 9px; padding: 0 12px 11px; }
.pka-mem-timerow .pka-tl { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.pka-mem-time { flex: 1; max-width: 150px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--brand); background: var(--card); color: var(--text); font: inherit; font-size: 15px; }
/* Live-Vorschau */
.pka-prev-label { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.pka-preview { border-radius: 16px; overflow: hidden; border: 1px solid rgba(120,90,255,.28); border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent); background: linear-gradient(165deg, rgba(20,17,38,.85), rgba(9,8,18,.9)); }
.pka-prev-banner { width: 100%; display: block; }
.pka-prev-body { padding: 13px 14px; }
.pka-prev-title { font-size: 17px; font-weight: 800; }
.pka-prev-date { font-size: 13px; color: var(--muted); margin-top: 3px; }
.pka-prev-parts { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.pka-prev-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 7px 10px; border-radius: 9px; background: rgba(255,255,255,.04); }
.pka-prev-row .pp-n { font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pka-prev-row .pp-id { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.pka-prev-row .pp-t { font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 📢 Ankündigungen-Kategorie */
.an-cat { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin: 20px 0 10px; }
.an-pk-headline { font-size: 16px; font-weight: 900; margin: 6px 0 10px; display: flex; align-items: baseline; gap: 7px; }
.an-pk-headline span { font-size: 12px; font-weight: 700; color: var(--brand-2); }
/* 🏁 PK-Reihenfolge */
.pl-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.pl-row { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: 13px; border: 1px solid var(--line-soft);
  background: var(--bg-2); text-decoration: none; color: var(--text); }
.pl-row:active { transform: scale(.99); }
.pl-row .avatar { width: 34px; height: 34px; }
.pl-time { width: 50px; text-align: center; font-weight: 800; font-size: 15px; color: var(--brand-2); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.pl-mid { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.pl-name { font-weight: 800; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-tag { font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; margin-left: 4px; }
.pl-tag.next { color: #ffb3c2; background: rgba(255,95,158,.18); }
.pl-tag.live { color: #fff; background: #e23b4a; }
.pl-row.next { border-color: var(--brand-2); background: rgba(255,95,158,.1); }
.pl-row.next .pl-time { color: #ff5f9e; }
.pl-row.live { border-color: rgba(226,59,74,.6); background: rgba(226,59,74,.12); }
.pl-row.live .pl-time { color: #ff6b6b; }
.an-pk-card { display: block; border-radius: 15px; overflow: hidden; border: 1px solid rgba(120,90,255,.24); border: 1px solid color-mix(in srgb, var(--brand) 24%, transparent);
  background: linear-gradient(165deg, rgba(20,17,38,.8), rgba(9,8,18,.9)); margin-bottom: 10px; text-decoration: none; color: var(--text); }
.an-pk-card:active { transform: scale(.99); }
/* ⚠️ Hier stand object-fit:cover mit 200 px Deckel — und genau das
   zerschnitt die Bigo-Karte in der Mitte: Die untere Hälfte mit den
   +Follow-Knöpfen und der Punkteleiste war weg, und weil die dunkle Zeile
   direkt an der Schnittkante anschloss, sah es aus, als läge sie auf dem
   Bild. Auf so einer Karte steht, WER GEGEN WEN antritt — sie zuzuschneiden
   wirft die Information weg, um derentwillen sie da ist.
   Deshalb: ganz zeigen, notfalls mit Rand. */
.an-pk-banner {
  width: 100%; display: block;
  max-height: 52vh; object-fit: contain;
  background: #0A0A11;
}
.an-pk-body { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.an-pk-date { flex: 0 0 auto; width: 46px; text-align: center; display: flex; flex-direction: column; line-height: 1;
  background: var(--grad); border-radius: 11px; padding: 8px 0; color: #fff; }
.an-pk-date .d { font-size: 19px; font-weight: 800; }
.an-pk-date .m { font-size: 10px; text-transform: uppercase; margin-top: 2px; opacity: .9; }
.an-pk-title { font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-pk-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.an-pk-go { flex: 0 0 auto; font-size: 22px; color: var(--muted); font-weight: 700; }
/* Edel-Rot: PK-Ankündigung mit vornehmem roten Rahmen */
.an-pk-card.pk-edelrot { border: 1.5px solid rgba(196,42,58,.5);
  background: linear-gradient(165deg, rgba(40,13,17,.92), rgba(12,6,9,.96));
  box-shadow: 0 14px 40px -18px rgba(196,42,58,.75); }
.an-pk-card.pk-edelrot .an-pk-date { background: linear-gradient(135deg, #b32436, #7a1420); box-shadow: 0 4px 14px -4px rgba(196,42,58,.7); }
.an-pk-card.pk-edelrot .an-pk-go { color: rgba(255,130,140,.75); }
.an-pk-cd { margin: 0; border-radius: 0; border: none; border-top: 1px solid rgba(196,42,58,.32);
  background: rgba(196,42,58,.12); color: #ffcbd1; letter-spacing: .2px; }
.pk-card .date-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line);
  flex: none; line-height: 1;
}
.pk-card .date-tab .d { font-size: 21px; font-weight: 800; }
.pk-card .date-tab .m { font-size: 11px; color: var(--muted); text-transform: uppercase; margin-top: 2px; }
.pk-head { display: flex; gap: 13px; align-items: center; }
.pk-head .title { font-weight: 800; font-size: 16.5px; }
.pk-head .sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.pk-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.countdown { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; color: var(--accent); }
.countdown.soon { color: var(--warn); }
.countdown.closed { color: var(--muted-2); }
.pk-desc { color: #C9C9D8; font-size: 14.5px; margin-top: 10px; white-space: pre-wrap; }

/* Slot-Liste (wer wann dran ist) */
.slot { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.slot:first-child { border-top: none; }
.slot .time { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 58px; }
.slot .who { flex: 1; }
.slot .who .n { font-weight: 700; }
.slot .who .vs { color: var(--muted); font-size: 13px; }
.slot.mine { background: linear-gradient(90deg, rgba(177,75,255,.10), transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 10%, transparent), transparent); margin: 0 -16px; padding: 11px 16px; border-radius: 12px; }

/* ── Timeline-Beiträge ──────────────────────────────────────────── */
.post .top { display: flex; align-items: center; gap: 11px; }
.post .top .n { font-weight: 700; }
.post .top .id { color: var(--muted-2); font-size: 12px; font-weight: 600; }
.post .top .t { margin-left: auto; color: var(--muted-2); font-size: 12px; }
.post .body { margin-top: 10px; white-space: pre-wrap; font-size: 15.5px; line-height: 1.5; }
.post .photo { margin-top: 11px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-soft); }
.post .photo img { width: 100%; }
.post .actions { display: flex; gap: 18px; margin-top: 12px; color: var(--muted); font-size: 14px; }
.post .actions button { background: none; border: none; color: inherit; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; }
.post .actions button.liked { color: var(--brand-2); }

/* Composer */
.composer .row { display: flex; gap: 11px; align-items: flex-start; }
.composer textarea { border: none; background: transparent; padding: 8px 0; min-height: 46px; }
.composer .foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
/* FB/Jappy-Composer: großes Textfeld + klare „Hinzufügen"-Werkzeugleiste + großer Posten-Button */
.composer.c-fb textarea { min-height: 84px; font-size: 17px; line-height: 1.5; }
.c-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 11px 13px;
  border: 1px solid var(--line-soft); border-radius: 15px; background: var(--card-2); }
.c-tb-label { font-weight: 800; font-size: 14px; color: var(--text); margin-right: 2px; }
.c-tb-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.c-tool { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--text); font-weight: 700; font-size: 13.5px;
  cursor: pointer; transition: transform .08s, background .15s, border-color .15s; }
.c-tool:hover { background: var(--card-2); }
.c-tool:active { transform: scale(.95); }
.c-tool.on { border-color: var(--brand); background: rgba(177,75,255,.16); background: color-mix(in srgb, var(--brand) 16%, transparent); }
.c-tool:disabled { opacity: .4; cursor: default; }
.c-tool .c-tool-ic { font-size: 17px; line-height: 1; }
.c-foot2 { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.c-foot2 .c-count { color: var(--muted); font-size: 13px; }
.c-postbtn { margin-left: auto; min-width: 130px; font-weight: 800; padding: 12px 22px; font-size: 15.5px; }
.composer .preview { margin-top: 10px; position: relative; border-radius: 12px; overflow: hidden; }
.composer .preview button { position: absolute; top: 8px; right: 8px; }
.profile-head .name { font-size: 21px; font-weight: 800; margin-top: 10px; }
.profile-head .id { color: var(--muted-2); font-size: 13px; font-weight: 600; }
.profile-head .mood { color: var(--accent); margin-top: 8px; font-size: 14.5px; }
.profile-head .facts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.avatar-edit { position: relative; }
.avatar-edit .cam { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--grad); border: 3px solid var(--bg); display: grid; place-items: center; font-size: 14px; }

/* Geburtstage */
.bday { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.bday:first-child { border-top: none; }
.bday .when { margin-left: auto; text-align: right; }
.bday .when .d { font-weight: 800; }
.bday .when .s { color: var(--muted); font-size: 12px; }
.bday.today { background: linear-gradient(90deg, rgba(255,77,157,.12), transparent); margin: 0 -16px; padding: 12px 16px; border-radius: 12px; }

/* ── Admin: Slot-Editor ─────────────────────────────────────────── */
.slot-edit { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.slot-edit:first-child { border-top: none; }
.slot-edit .who { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.slot-edit .inputs { display: grid; grid-template-columns: 116px 1fr; gap: 8px; }
.slot-edit input { padding: 9px 11px; font-size: 14px; }

/* ── Modal / Sheet ──────────────────────────────────────────────── */
/* Ohne Weichzeichner: 60 % Schwarz traegt allein, und der Vollbild-Blur
   griff auf iPhones vor iOS 18 ohnehin nicht (ohne -webkit-Praefix).
   Dafuer blendet der Vorhang weich ein und – mit .zu – weich wieder aus. */
/* ⚠️ Der Vorhang blendet NICHT sich selbst ein, sondern nur seine Farbe.
   Grund: Eine laufende Animation ueberschreibt jede statische Regel. Stand
   `fade-in` still - App im Hintergrund, Energiesparen, Blatt geht vor dem
   ersten Bild auf -, blieb der Vorhang auf Bild 0 stehen: opacity 0, aber
   `pointer-events` weiter auf `auto` und ueber dem GANZEN Bildschirm. Man
   sah die Seite, tippte auf einen Knopf, und nichts geschah. Genau daran
   scheiterte eine Familienchefin an ihrer Zusage. Ueber die Hintergrundfarbe
   kann derselbe Stillstand nichts mehr verdecken: Das Blatt selbst bleibt
   sichtbar und anfassbar. */
/* Das eigene Angebot im Verwaltungsraum. Bewusst NICHT rot — rot ist hier
   ausschliesslich die Warnung. Es ist eine Frage, keine Beanstandung. */
.angebot-ich { border-color: var(--brand); }
.angebot-ich .as-kopf { color: var(--on-brand, var(--brand)); }
.angebot-ich .as-ich-text { font-size: 13.5px; line-height: 1.5; margin-top: 6px; }

.sheet-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.6);
  display: flex; align-items: flex-end; justify-content: center; opacity: 1;
  animation: vorhang-auf .18s ease; }
@keyframes vorhang-auf { from { background: rgba(0,0,0,0); } to { background: rgba(0,0,0,.6); } }
.sheet-backdrop.zu { opacity: 0; transition: opacity .18s ease; pointer-events: none; }
.sheet-backdrop.zu .sheet { transform: translateY(40px); transition: transform .18s ease-in; }
/* Im Gespraech lag das Blatt HINTER dem deckenden Anruf-Fenster (60 gegen
   4000). Wer auf 📖 tippte, sah das Vorlesescript nie; ➕ und jede Rueckfrage
   ebenso wenig - die Knoepfe wirkten kaputt. Nur waehrend eines Gespraechs
   angehoben, damit sich sonst nichts verschiebt. 4100: ueber dem Fenster,
   unter dem Toast (4200), damit Meldungen auch ueber offenem Blatt stehen. */
body:has(#rtc-overlay.rtc) .sheet-backdrop { z-index: 4100; }
.sheet { background: var(--bg-2); width: 100%; max-width: var(--maxw); border-radius: 22px 22px 0 0;
  border: 1px solid var(--line); border-bottom: none; padding: 20px 18px calc(var(--safe-bottom) + 22px);
  max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
  box-shadow: var(--shadow); animation: sheet-up .22s ease; }
@keyframes sheet-up { from { transform: translateY(40px); opacity: .5; } to { transform: none; opacity: 1; } }
.sheet .grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: -6px auto 14px; }
.sheet h3 { margin: 0 0 4px; font-size: 18px; }

/* Kopierbares ID-Feld */
.copybox { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px;
  font-family: ui-monospace, Menlo, monospace; font-size: 14px; white-space: pre-wrap; max-height: 220px; overflow-y: auto; }

/* ── Toast ──────────────────────────────────────────────────────── */
.toast { position: fixed; left: 50%; bottom: calc(var(--safe-bottom) + 22px); transform: translateX(-50%);
  z-index: 80; background: #23233A; color: #fff; border: 1px solid var(--line); padding: 12px 18px; border-radius: 14px;
  font-size: 14.5px; font-weight: 600; box-shadow: var(--shadow); max-width: 90%; text-align: center;
  animation: toast-in .2s ease; }
.toast.err { background: #3A2030; border-color: rgba(255,90,90,.5); }
/* Waehrend eines Gespraechs lag der Toast UNTER dem Anruf-Fenster (z-index
   80 gegen 4000) - der Pruefer sah keine einzige Rueckmeldung. Auch nicht
   die wichtigste: "Dein Mikrofon ist stumm - deine Fragen kommen NICHT mit
   auf die Aufnahme." Er haette es erst beim Anhoeren gemerkt. */
.toast { z-index: 4200; }
/* Und dann ueber der Knopfleiste, nicht darauf. */
body:has(#rtc-overlay.rtc) .toast { bottom: calc(var(--safe-bottom, 0px) + 210px); }
.toast.ok  { background: #1E3A2C; border-color: rgba(46,212,122,.5); }
@keyframes toast-in { from { transform: translate(-50%, 12px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* ── Diverses ───────────────────────────────────────────────────── */
.spinner { width: 30px; height: 30px; border-radius: 50%; margin: 30px auto;
  background: conic-gradient(from 0deg, transparent 8%, var(--brand) 62%, var(--brand-2) 96%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  animation: spin .85s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.link { color: var(--brand-2); font-weight: 600; cursor: pointer; }
.divider { height: 1px; background: var(--line-soft); margin: 16px 0; }
/* ── Text links, Knopf rechts — und wenn es eng wird, Knopf nach unten ──
   Der Inhaber am 03.10.2026: „Ja, einfach in die nächste Zeile rutschen.
   Dann eine Zeile leer. Dass Luft nach unten ist, bevor die nächste Sache
   kommt."
   `flex-wrap` lässt den Knopf abrutschen, statt ihn zu quetschen.
   `row-gap` greift NUR, wenn wirklich umbrochen wurde — in einer einzeiligen
   Zeile kostet es nichts. Deshalb ist die Luft genau dann da, wenn sie
   gebraucht wird, und sonst nicht.
   Bewusst KEIN `min-width: 0` beim Text: Dürfte er auf null schrumpfen,
   passte immer alles in eine Zeile — der Knopf würde nie abrutschen,
   sondern bis zur Unlesbarkeit gequetscht. */
.row-between { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; row-gap: 12px; padding-bottom: 2px; }

/* ══════════════════════════════════════════════════════════════════
   Bewegung & Effekte — dynamisch, aber performant (nur transform/opacity)
   ══════════════════════════════════════════════════════════════════ */

/* Animierter Aurora-Hintergrund (drei driftende Neon-Blobs) */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .30; will-change: transform; }
.aurora .a1 { width: 62vmax; height: 62vmax; top: -22%; left: -14%;
  background: radial-gradient(circle, var(--brand), transparent 62%); animation: drift1 20s ease-in-out infinite; }
.aurora .a2 { width: 55vmax; height: 55vmax; bottom: -20%; right: -16%;
  background: radial-gradient(circle, var(--brand-2), transparent 62%); animation: drift2 26s ease-in-out infinite; }
.aurora .a3 { width: 40vmax; height: 40vmax; top: 32%; right: 8%;
  background: radial-gradient(circle, var(--accent), transparent 65%); opacity: .16; animation: drift3 32s ease-in-out infinite; }
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(8vw, 6vh) scale(1.15); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1.05); } 50% { transform: translate(-7vw, -5vh) scale(.9); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-6vw, 8vh); } }

/* Gestaffeltes Einblenden von Inhalten */
.reveal { opacity: 0; animation: reveal .5s cubic-bezier(.2,.75,.25,1) both; }
@keyframes reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Karten & Links reagieren auf Druck */
.card, a.card, .btn, .bottom-nav a, .slot, .bday { transition: transform .12s ease, box-shadow .2s ease, filter .2s ease; }
a.card:active, .pk-card:active { transform: scale(.985); }
.card.tap { animation: cardtap .3s ease; }
@keyframes cardtap { 50% { transform: scale(.97); } }

/* Ripple auf Buttons */
.btn { position: relative; overflow: hidden; }
.rip { position: absolute; border-radius: 50%; background: rgba(255,255,255,.45); transform: scale(0);
  pointer-events: none; animation: rip .6s ease-out forwards; mix-blend-mode: overlay; }
@keyframes rip { to { transform: scale(2.6); opacity: 0; } }

/* Primär-Button: leiser Glanz-Sweep beim Hover */
.btn.primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-120%); }
.btn.primary:hover::after { animation: sheen .8s ease; }
@keyframes sheen { to { transform: translateX(120%); } }

/* Like: Herz-Pop + aufsteigende Herzen */
.post .actions button.liked .hz { animation: heartpop .45s ease; display: inline-block; }
@keyframes heartpop { 0% { transform: scale(1); } 30% { transform: scale(1.5); } 55% { transform: scale(.85); } 100% { transform: scale(1); } }

/* Bottom-Nav Tap-Hüpfer */
.bottom-nav a.tap .ic { animation: navpop .4s ease; }
@keyframes navpop { 40% { transform: translateY(-5px) scale(1.2); } }

/* Countdown „bald" pulsiert; LIVE-Badge pulsiert */
.countdown.soon { animation: softpulse 1.4s ease-in-out infinite; }
@keyframes softpulse { 50% { opacity: .5; } }
.badge.live { background: rgba(255,90,90,.16); color: #FF9A9A; border-color: rgba(255,90,90,.5); animation: livepulse 1.8s ease-out infinite; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(255,90,90,.5); } 70% { box-shadow: 0 0 0 9px rgba(255,90,90,0); } 100% { box-shadow: 0 0 0 0 rgba(255,90,90,0); } }
.pk-card .date-tab { position: relative; overflow: hidden; }
.pk-card .date-tab::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%);
  transform: translateX(-100%); animation: shine 5s ease-in-out infinite; }
@keyframes shine { 0%, 70% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }

/* Logo schwebt (Login) */
.auth-logo .mark { animation: floaty 4.5s ease-in-out infinite; }
@keyframes floaty { 50% { transform: translateY(-7px); } }

/* Rotierender Verlaufs-Ring ums Profilbild */
.avatar-edit { padding: 3px; }
.avatar-edit::before { content: ''; position: absolute; inset: 0; border-radius: 50%; padding: 3px;
  background: conic-gradient(from 0deg, var(--brand), var(--brand-2), var(--accent), var(--brand));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 6s linear infinite; }

/* Skeleton-Ladeanimation */
.skel { position: relative; overflow: hidden; }
.skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.skel-line { height: 12px; border-radius: 6px; background: var(--card-2); margin: 8px 0; }
.skel-line.w40 { width: 40%; } .skel-line.w60 { width: 60%; } .skel-line.w80 { width: 80%; }
.skel-av { width: 44px; height: 44px; border-radius: 50%; background: var(--card-2); flex: none; }

/* Konfetti */
.confetti { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -24px; width: 9px; height: 14px; border-radius: 2px; opacity: .95; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(112vh) rotate(760deg); } }

/* Rücksicht auf Nutzer, die wenig Bewegung wollen */
@media (prefers-reduced-motion: reduce) {
  .aurora { display: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ══════════════════════════════════════════════════════════════════
   Edge-Menüs im Samsung-Galaxy-Edge-Stil (links = Navigation, rechts = Konto)
   ══════════════════════════════════════════════════════════════════ */
/* Die Griffe am Rand: schmal ANZUSEHEN, breit ZU TREFFEN.
   Gemessen: 17 px Breite auf halber Bildschirmhoehe. Apple nennt 44 Punkte
   als kleinste Flaeche, die ein Finger sicher trifft — 17 heisst zielen
   statt tippen. Und die halbe Hoehe ist genau der Bereich, fuer den man
   das Telefon umgreift.
   Jetzt: derselbe schlanke Streifen, aber 46 px unsichtbare Trefferflaeche
   davor, und tiefer gesetzt in den Daumenbogen. */
.edge-handle {
  position: fixed; top: 62%; transform: translateY(-50%); z-index: 46;
  width: 17px; height: 84px; cursor: pointer;
  display: grid; grid-template-columns: 1fr 1fr; align-content: center; justify-items: center; gap: 7px 4px;
  animation: edgeGlow 2.8s ease-in-out infinite;
  transition: box-shadow .2s, filter .15s;
}
/* Die unsichtbare Trefferflaeche. Sie steht VOR dem Streifen, damit der
   Daumen auch dann trifft, wenn er neben dem Rand landet. */
.edge-handle::after{
  content:''; position:absolute; top:-16px; bottom:-16px;
  left:-14px; right:-14px;
}
.edge-handle.left::after{ left:0; right:-30px; }
.edge-handle.right::after{ right:0; left:-30px; }
.edge-handle i { width: 3.5px; height: 3.5px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 0 4px rgba(255,255,255,.45); }
.edge-handle:active { filter: brightness(1.18); }
.edge-handle.left  { left: 0;  border-radius: 0 11px 11px 0; background: linear-gradient(180deg, var(--brand), var(--brand-2)); box-shadow: 0 0 18px var(--brand-glow); }
.edge-handle.right { right: 0; border-radius: 11px 0 0 11px; background: linear-gradient(180deg, var(--brand-2), var(--accent)); box-shadow: 0 0 18px rgba(255,77,157,.6); }
@keyframes edgeGlow { 50% { opacity: .6; } }
/* Bei offenem Menue liegen die Griffe unter dem Vorhang – ihr Gluehen
   wurde trotzdem jedes Bild neu gemalt. */
.app-shell.menu-open .edge-handle { animation: none; visibility: hidden; }

/* Fester Weichzeichner-Radius, geblendet wird nur die Deckkraft. Vorher
   wuchs der Radius mit (3 → 7 px): eine halbe Sekunde lang in jedem Bild
   eine neue Vollbild-Rechnung – genau waehrend die neue Seite gebaut wird.
   Zu geht es schneller als auf. */
.edge-backdrop { position: fixed; inset: 0; z-index: 47; background: rgba(0,0,0,.5);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  opacity: 0; pointer-events: none;
  transition: opacity .22s cubic-bezier(.4,0,.2,1); }
.edge-backdrop.show { opacity: 1; pointer-events: auto; transition: opacity .5s cubic-bezier(.4,0,.2,1); }

.edge-panel {
  position: fixed; top: 0; bottom: 0; z-index: 48; width: min(80vw, 312px);
  display: flex; flex-direction: column; gap: 6px;
  padding: calc(var(--safe-top) + 20px) 14px calc(var(--safe-bottom) + 20px);
  background: rgba(18,18,28,.86); backdrop-filter: saturate(150%) blur(22px); -webkit-backdrop-filter: saturate(150%) blur(22px);
  box-shadow: 0 0 60px rgba(0,0,0,.65);
  /* Ruhiger, gewichtiger Lauf beim ÖFFNEN: .36s wirkte hastig, mit .52s
     und einer weichen Bremskurve hat die Schublade Gewicht.
     Zu geht es in .3s mit anziehender Kurve: Wer einen Punkt gewaehlt hat,
     will die Seite sehen, nicht der Schublade zuschauen.
     Animiert wird NUR transform – das laeuft auf dem Grafikchip, auch
     waehrend route() die neue Seite baut. Der Schatten wuchs frueher mit
     und musste dafuer in jedem Bild neu gemalt werden; jetzt springt er
     (siehe unten). Beim Oeffnen liegt die Haelfte da noch draussen. */
  transition: transform .3s cubic-bezier(.4,0,1,1);
}
.edge-panel.open { transition: transform .52s cubic-bezier(.19,1,.28,1); }
.edge-panel.left  { left: 0;  transform: translateX(-105%); border-right: 1px solid var(--line); border-radius: 0 28px 28px 0; }
.edge-panel.right { right: 0; transform: translateX(105%);  border-left: 1px solid var(--line);  border-radius: 28px 0 0 28px; }
/* Beide Menüs können lang werden (rechts viele Punkte, links viele Kanäle) → scrollbar, Balken unsichtbar. */
.edge-panel.right, .edge-panel.left { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; }
.edge-panel.right::-webkit-scrollbar, .edge-panel.left::-webkit-scrollbar { width: 0; height: 0; display: none; }
.edge-panel.open { transform: translateX(0); }
.edge-panel .ep-head { display: flex; align-items: center; gap: 11px; padding: 4px 8px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line-soft); }
.edge-panel .ep-head .n { font-weight: 800; font-size: 16px; }
.edge-panel .ep-dot { width: 30px; height: 30px; border-radius: 9px; background: var(--grad); display: grid; place-items: center; font-size: 15px; flex: none; }
.edge-item { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px;
  color: var(--text); font-weight: 700; font-size: 15.5px; cursor: pointer; transition: background .15s, transform .08s; }
.edge-item .ei { font-size: 21px; width: 26px; text-align: center; flex: none; }
.edge-item:active { transform: scale(.98); background: var(--card-2); }
.edge-item.active { background: linear-gradient(90deg, rgba(177,75,255,.20), transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 20%, transparent), transparent); }
.edge-panel.right .edge-item.active { background: linear-gradient(90deg, rgba(255,77,157,.20), transparent); }
.edge-item.danger { color: #FF8A8A; }

/* Schnell-Aktionen oben im rechten Menü (Status / Beitrag) – Verben, klar von den Seiten getrennt. */
.ep-actions { display: flex; gap: 8px; margin: 2px 0 12px; }
.ep-action { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 10px; border-radius: 13px; font-weight: 800; font-size: 14px; cursor: pointer;
  white-space: nowrap; color: var(--text); border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(177,75,255,.16), rgba(255,77,157,.09)), var(--card-2); background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 16%, transparent), rgba(255,77,157,.09)), var(--card-2);
  transition: transform .08s ease, filter .15s; }
.ep-action .ei { font-size: 18px; }
.ep-action:active { transform: scale(.97); filter: brightness(1.12); }
@media (hover: hover) { .ep-action:hover { filter: brightness(1.1); } }

/* ── Beide Menü-Seiten gleichzeitig (aufgeteilt): links Navigation, rechts Konto/Agentur ── */
.app-shell .edge-panel.left,
.app-shell .edge-panel.right { width: min(50vw, 300px); }
.app-shell .edge-panel.left  { border-radius: 0 22px 22px 0; border-right: 1px solid var(--line); }
.app-shell .edge-panel.right { border-radius: 22px 0 0 22px; }
/* Auf schmalen Geräten füllen beide Hälften den Bildschirm → innere Kanten flach, damit sie sauber aneinanderstoßen. */
@media (max-width: 620px) {
  .app-shell .edge-panel.left  { border-radius: 0; }
  .app-shell .edge-panel.right { border-radius: 0; }
  .app-shell .edge-item { padding: 12px 10px; gap: 10px; font-size: 14.5px; }
  .app-shell .edge-item .ei { font-size: 19px; width: 22px; }
  .app-shell .ep-lbl { padding-left: 10px; padding-right: 10px; }
  /* Schmales geteiltes Menü: Schnell-Knöpfe kompakter, damit „Beitrag" nicht abgeschnitten wird. */
  .app-shell .ep-actions { gap: 6px; }
  .app-shell .ep-action { padding: 10px 4px; gap: 5px; font-size: 12px; }
  .app-shell .ep-action .ei { font-size: 15px; }
}
/* Am Handy decken beide Haelften zusammen die ganze Breite. Der Vollbild-
   Weichzeichner darunter war verdeckt – und wurde trotzdem jedes Bild
   gerechnet (die Haelften decken nur zu 86 %). Jetzt: Vorhang ohne
   Weichzeichner, Haelften fester, und der Glanz kommt als Marken-Schimmer
   oben statt als teures saturate(150%) blur(22px). */
@media (max-width: 620px) {
  .edge-backdrop, .edge-backdrop.show { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(0,0,0,.6); }
  .edge-panel {
    /* Grundfarbe und Schimmer als ZWEI Eigenschaften: Faellt die color-mix-
       Zeile auf altem WebKit (< 16.2) beim Berechnen durch, verschwindet nur
       das Verlaufsbild – der deckende Grund bleibt. Als eine einzige
       `background`-Kurzschreibweise waere die Haelfte durchsichtig gewesen. */
    background-color: rgba(18,18,28,.93);
    background-image: linear-gradient(180deg, rgba(177,75,255,.12), transparent 45%);
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--brand) 12%, transparent), transparent 45%);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
}
/* ══ Menü-Kacheln: alle Menüpunkte als 2er-Raster (Kacheln nebeneinander) ══ */
.edge-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin: 2px 0; align-items: stretch; }
/* Unter .app-shell geschachtelt → schlägt die Split-Schrumpf-Regeln (höhere Spezifität).
   Bewusst NICHT mehr an .menu-open (11.09.2026): Das Menue ist auch
   geschlossen fertig gebaut. Vorher nahm closePanels die Klasse im selben
   Augenblick weg wie .open – die Haelften sprangen mitten in der Fahrt von
   188 auf 300 px, und die Kacheln fielen zu Zeilen auseinander, bevor sie
   verschwanden. .menu-open schaltet nur noch Leiste, Stift, Reel-Knopf,
   Glocke, Griffe und ✕. */
.app-shell .edge-grid .edge-item {
  position: relative; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 6px; padding: 13px 6px; min-height: 78px;
  border-radius: 15px; border: 1px solid var(--line);
  overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto;
  background: linear-gradient(162deg, rgba(177,75,255,.12), rgba(255,77,157,.05)), var(--card-2); background: linear-gradient(162deg, color-mix(in srgb, var(--brand) 12%, transparent), rgba(255,77,157,.05)), var(--card-2);
  font-size: 12.5px; font-weight: 700; line-height: 1.2;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  transition: transform .1s ease, filter .15s ease, background .15s ease, border-color .15s ease;
}
.app-shell .edge-panel.right .edge-grid .edge-item {
  background: linear-gradient(162deg, rgba(255,77,157,.12), rgba(177,75,255,.05)), var(--card-2); background: linear-gradient(162deg, rgba(255,77,157,.12), color-mix(in srgb, var(--brand) 5%, transparent)), var(--card-2);
}
.app-shell .edge-grid .edge-item .ei { font-size: 25px; width: auto; text-shadow: 0 2px 5px rgba(0,0,0,.35); }
.app-shell .edge-grid .edge-item .nav-ch-name { white-space: normal; overflow: visible; text-overflow: clip; flex: none; }
.app-shell .edge-grid .edge-item:active { transform: scale(.96); filter: brightness(1.12); }
@media (hover: hover) { .app-shell .edge-grid .edge-item:hover { filter: brightness(1.08); border-color: rgba(177,75,255,.42); border-color: color-mix(in srgb, var(--brand) 42%, transparent); border-color: color-mix(in srgb, var(--brand) 42%, transparent); } }
/* Aktiver Punkt: voll gefüllte Kachel in Markenfarbe */
.app-shell .edge-grid .edge-item.active {
  background: linear-gradient(160deg, rgba(177,75,255,.34), rgba(255,77,157,.16)), var(--card-2); background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 34%, transparent), rgba(255,77,157,.16)), var(--card-2);
  border-color: rgba(177,75,255,.5); border-color: color-mix(in srgb, var(--brand) 50%, transparent); box-shadow: 0 4px 16px var(--brand-glow);
}
.app-shell .edge-panel.right .edge-grid .edge-item.active {
  background: linear-gradient(160deg, rgba(255,77,157,.34), rgba(177,75,255,.16)), var(--card-2); background: linear-gradient(160deg, rgba(255,77,157,.34), color-mix(in srgb, var(--brand) 16%, transparent)), var(--card-2);
  border-color: rgba(255,77,157,.5); box-shadow: 0 4px 16px rgba(255,77,157,.3);
}
/* Volle Breite (Abmelden, Platzhalter „Lädt…") */
.edge-grid .nav-ch-load { grid-column: 1 / -1; }
/* Platzhalter-Kacheln, bis die Kanaele da sind: gleiche Hoehe wie die
   echten, damit beim ersten Oeffnen nichts springt. */
.edge-grid .nav-ch-gerippe { pointer-events: none; opacity: .4; }
.app-shell .edge-grid .edge-item.full { grid-column: 1 / -1; flex-direction: row; min-height: 54px; gap: 12px; }
/* Abmelden als dezent rote Kachel */
.app-shell .edge-grid .edge-item.danger {
  background: linear-gradient(160deg, rgba(255,80,80,.15), rgba(255,80,80,.04)), var(--card-2);
  border-color: rgba(255,95,95,.32); color: #FF9A9A;
}
/* Zähler/Badges in die Kachel-Ecke oben rechts (statt ans Zeilenende) */
.app-shell .edge-grid .edge-item .nav-unread,
.app-shell .edge-grid .edge-item .edge-badge,
.app-shell .edge-grid .edge-item .nav-warn { position: absolute; top: 6px; right: 6px; margin: 0; }
.app-shell .edge-grid .edge-item.edge-warn::after { position: absolute; top: 9px; right: 9px; margin: 0; }

/* Schließen-Knopf mittig oben, wo beide Hälften zusammentreffen. */
.edge-close {
  position: fixed; bottom: calc(var(--safe-bottom) + 30px); left: 50%; transform: translateX(-50%) scale(.55);
  z-index: 49; width: 66px; height: 66px; border: 2px solid transparent; border-radius: 50%;
  /* visibility statt display:none: Aus display:none heraus laeuft kein
     Uebergang – das Nachfedern (scale .55 → 1) war nie zu sehen, und beim
     Schliessen verschwand der Knopf schlagartig. visibility sperrt Klicks
     genauso und springt erst NACH dem Ausblenden um. */
  display: grid; visibility: hidden; place-items: center; cursor: pointer; font-size: 26px; line-height: 1; color: var(--text);
  /* Verlaufsring außen, dunkler Kern innen – wirkt wie ein „richtiger" Knopf */
  background:
    radial-gradient(120% 120% at 50% 28%, rgba(30,30,46,.98), rgba(14,14,22,.98)) padding-box,
    linear-gradient(150deg, var(--brand), var(--brand-2)) border-box;
  box-shadow: 0 12px 34px rgba(0,0,0,.55), 0 0 26px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.16);
  opacity: 0; transition: opacity .3s ease, transform .32s cubic-bezier(.16,.84,.24,1), box-shadow .25s ease, visibility 0s linear .32s;
}
.app-shell.menu-open .edge-close { visibility: visible; opacity: 1; transform: translateX(-50%) scale(1); transition-delay: 0s; }
.edge-close:hover { box-shadow: 0 14px 40px rgba(0,0,0,.6), 0 0 34px rgba(255,77,157,.5), inset 0 1px 0 rgba(255,255,255,.2); }
.edge-close:active { transform: translateX(-50%) scale(.9); }

/* ══════════════════════════════════════════════════════════════════
   Premium-Metallic: Ränge Bronze · Silber · Gold · Platin
   ══════════════════════════════════════════════════════════════════ */
:root {
  --bronze-1: #E8A56B; --bronze-2: #94551F;
  --silber-1: #F5F7F9; --silber-2: #A3ACB7;
  --gold-1:   #FFE486; --gold-2:   #C99A1E;
  --platin-1: #F3F8FB; --platin-2: #9BB3C0;
}
.tier-badge {
  display: inline-flex; align-items: center; gap: 4px; position: relative; overflow: hidden;
  font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  padding: 3px 9px 3px 8px; border-radius: 999px; color: #2a1e0e;
  border: 1px solid rgba(255,255,255,.4); box-shadow: 0 1px 5px rgba(0,0,0,.4);
}
.tier-badge::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,.7) 50%, transparent 64%);
  transform: translateX(-120%); animation: tierShine 4.8s ease-in-out infinite; }
@keyframes tierShine { 0%, 62% { transform: translateX(-120%); } 82%, 100% { transform: translateX(120%); } }
.tier-bronze { background: linear-gradient(135deg, var(--bronze-1), var(--bronze-2)); }
.tier-silber { background: linear-gradient(135deg, var(--silber-1), var(--silber-2)); color: #1c232b; }
.tier-gold   { background: linear-gradient(135deg, var(--gold-1), var(--gold-2)); }
.tier-platin { background: linear-gradient(135deg, var(--platin-1), var(--platin-2)); color: #1a2329; }
.tier-badge.sm { font-size: 9.5px; padding: 2px 7px; }

/* Metallic-Ring ums Profilbild je Rang (überschreibt den bunten Standardring) */
.avatar-edit.tier-bronze::before { background: conic-gradient(from 0deg, var(--bronze-1), var(--bronze-2), var(--bronze-1)); }
.avatar-edit.tier-silber::before { background: conic-gradient(from 0deg, var(--silber-1), var(--silber-2), var(--silber-1)); }
.avatar-edit.tier-gold::before   { background: conic-gradient(from 0deg, var(--gold-1), var(--gold-2), var(--gold-1)); }
.avatar-edit.tier-platin::before { background: conic-gradient(from 0deg, var(--platin-1), var(--platin-2), var(--platin-1)); }

/* Rang-Auswahl im Kontrollraum */
.tier-pick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.tier-opt { flex: 1; min-width: 66px; text-align: center; padding: 10px 6px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg-2); font-weight: 800; font-size: 12px; color: var(--muted); }
.tier-opt.sel { color: #1a1a1a; border-color: transparent; box-shadow: 0 0 0 2px var(--brand); }
.tier-opt.sel.tier-bronze, .tier-opt.b { background: linear-gradient(135deg, var(--bronze-1), var(--bronze-2)); color: #2a1e0e; }
.tier-opt.s { background: linear-gradient(135deg, var(--silber-1), var(--silber-2)); color: #1c232b; }
.tier-opt.g { background: linear-gradient(135deg, var(--gold-1), var(--gold-2)); color: #2a1e0e; }
.tier-opt.p { background: linear-gradient(135deg, var(--platin-1), var(--platin-2)); color: #1a2329; }

/* ── Ausschluss-Screen (edel, würdevoll) ── */
.exclude-screen { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 16px; padding: calc(var(--safe-top) + 30px) 26px calc(var(--safe-bottom) + 30px); max-width: 460px; margin: 0 auto; }
.exclude-seal { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; font-size: 44px;
  background: radial-gradient(circle at 35% 30%, #2a2f36, #12151a);
  border: 2px solid transparent; background-clip: padding-box;
  box-shadow: 0 12px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
  position: relative; }
.exclude-seal::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg, var(--platin-1), var(--gold-2), var(--silber-2), var(--platin-1)); animation: spin 8s linear infinite; }
.exclude-screen h1 { margin: 4px 0 0; font-size: 22px; letter-spacing: .3px;
  background: linear-gradient(135deg, var(--platin-1), var(--gold-1)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.exclude-screen p { color: var(--muted); font-size: 15px; line-height: 1.55; }
.exclude-count { font-weight: 800; font-variant-numeric: tabular-nums; color: #2a2329;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2)); padding: 12px 20px; border-radius: 14px;
  box-shadow: 0 6px 20px rgba(201,154,30,.35); }
.exclude-note { font-size: 13px; color: var(--muted-2); max-width: 340px; }

/* ── Anonymisierte Beiträge (Autor gelöscht) ── */
.post.anon .top .n { color: var(--muted); font-style: italic; font-weight: 600; }
.avatar.ghost, .avatar.ghost.sm { background: linear-gradient(135deg, #2a2a3c, #191922); color: var(--muted-2); }

/* Änderungs-Anträge (nur mit Freigabe änderbare Felder) */
.req-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.req-row:first-of-type { border-top: none; }
.req-row .rv { font-weight: 700; margin-top: 1px; }

/* ══════════════════════════════════════════════════════════════════
   Timeline v2 — Collage · Reaktionen · Kommentare · rote Box · Status-Chips
   ══════════════════════════════════════════════════════════════════ */

/* Status-Vorschläge im Composer */
.prompts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.prompt-chip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2);
  font-size: 13px; cursor: pointer; color: var(--muted); transition: transform .08s; }
.prompt-chip:active { transform: scale(.96); background: var(--card-2); }
/* Diese Regeln hingen am Vorfahren .composer — das Schreibfenster liegt
   aber nicht darin, und seine angehaengten Fotos hatten deshalb GAR KEINE
   Groessenregel: ein 1280-px-Bild in voller Breite. Jetzt gelten sie
   ueberall, wo eine Vorschau steht. */
.previews { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.previews .pv { position: relative; width: 74px; height: 74px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-soft); }
.previews .pv img { width: 100%; height: 100%; object-fit: cover; }
.previews .pv button { position: absolute; top: 3px; right: 3px; padding: 2px 7px; }
.composer .wichtig { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13.5px; font-weight: 600; color: #FF9A9A; }
.composer .wichtig input { width: auto; }

/* Bild-Collage (quadratisch, aneinandergepackt) */
.imgs { display: grid; gap: 3px; margin-top: 11px; border-radius: 14px; overflow: hidden; }
.imgs.c1 { grid-template-columns: 1fr; }
.imgs.c2 { grid-template-columns: 1fr 1fr; }
.imgs.c3 { grid-template-columns: 1fr 1fr 1fr; }
.imgs .im { position: relative; overflow: hidden; background: var(--card-2); cursor: pointer; }
.imgs:not(.c1) .im { aspect-ratio: 1 / 1; }
.imgs .im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imgs.c1 .im { background: var(--card-2); }
.imgs.c1 .im img { height: auto; max-height: 85vh; object-fit: contain; }
.imgs .im .more { position: absolute; inset: 0; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; font-size: 24px; font-weight: 800; }

/* Reaktionen + Aktionsleiste */
.actions { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; position: relative; }
.react-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card-2); font-size: 13px; font-weight: 700; cursor: pointer; }
.react-chip.mine { border-color: var(--brand); background: rgba(177,75,255,.18); background: color-mix(in srgb, var(--brand) 18%, transparent); }
.react-add, .cmt-btn, .tp-speak { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card-2); font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
.cmt-btn.on { color: var(--text); border-color: var(--brand); }
.tp-speak.on { color: #fff; border-color: rgb(var(--tpc,255,90,90)); background: rgba(var(--tpc,255,90,90),.22); }
.react-picker { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 5; display: flex; gap: 4px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 8px 10px; box-shadow: var(--shadow); animation: reveal .18s ease both; }
.react-picker span { font-size: 24px; cursor: pointer; padding: 3px 5px; border-radius: 10px; transition: transform .1s; }
.react-picker span:hover, .react-picker span:active { transform: scale(1.25); background: var(--card-2); }

/* Kommentare (mit Antworten + @Erwähnungen) */
.comments { margin-top: 12px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.cmt { display: flex; gap: 9px; padding: 7px 0; }
.cmt.reply { margin-left: 32px; }
.cmt .cbody { flex: 1; }
.cmt .cbody .cn { font-weight: 700; font-size: 13.5px; }
.cmt .cbody .ct { color: var(--muted-2); font-size: 11px; margin-left: 6px; }
.cmt .cbody .cx { font-size: 14.5px; margin-top: 2px; white-space: pre-wrap; line-height: 1.45; }
.cmt .cbody .cx .mention { color: var(--brand-2); font-weight: 700; }
.cmt .creply { color: var(--brand-2); font-size: 12px; font-weight: 600; cursor: pointer; margin-top: 3px; display: inline-block; }
.cmt-form { display: flex; gap: 8px; margin-top: 10px; position: relative; }
.cmt-form input { flex: 1; padding: 10px 12px; font-size: 14.5px; }
.cmt-empty { color: var(--muted-2); font-size: 13px; padding: 6px 0; }

/* Rote Box für wichtige Admin-Infos */
.post.important { border: 1px solid rgba(255,90,90,.5); background: linear-gradient(180deg, rgba(255,90,90,.12), var(--card) 60%); }
.imp-tag { display: inline-flex; align-items: center; gap: 6px; color: #FF9A9A; font-weight: 800; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px; }
.imp-read { margin-top: 14px; }

/* Install-/Homescreen-Hinweis */
.ios-steps { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.ios-step { display: flex; align-items: center; gap: 12px; }
.ios-step .n { width: 28px; height: 28px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; font-weight: 800; flex: none; }
.ios-step .ic { font-size: 22px; }

/* Geburtstags-Banner mit Live-Timer */
.bday-banner { position: relative; overflow: hidden; border: 1px solid rgba(177,75,255,.28); border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent); }
.bday-banner .bb-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 12% 0%, rgba(177,75,255,.30), transparent 60%),
              radial-gradient(120% 90% at 100% 100%, rgba(255,77,157,.24), transparent 60%); background: radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 60%),
              radial-gradient(120% 90% at 100% 100%, rgba(255,77,157,.24), transparent 60%); }
.bday-banner .bb-inner { position: relative; display: flex; align-items: center; gap: 16px; }
.bday-banner .bb-label { font-size: 11px; font-weight: 800; letter-spacing: .7px; color: var(--brand-2); }
.bday-banner .bb-name { font-size: 21px; font-weight: 800; margin-top: 2px; }
.bday-banner .bb-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.bday-banner .bb-count { margin-top: 9px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent); font-size: 15px; }
.bday-banner.today { border-color: rgba(255,77,157,.55); }
.bday-banner.today .bb-count { color: var(--brand-2); }
.feed-bday .accent { color: var(--accent); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── Design-Politur (edler, „cooler") ── */
body { background: radial-gradient(150% 100% at 50% -12%, #16121f 0%, var(--bg) 52%) fixed; }
.topbar .brand b { background: linear-gradient(120deg, #ffffff 20%, var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.topbar { border-bottom: 1px solid rgba(177,75,255,.14); border-bottom: 1px solid color-mix(in srgb, var(--brand) 14%, transparent); }
.card { border-radius: 20px; border-color: rgba(255,255,255,.055);
  box-shadow: 0 14px 34px -16px rgba(0,0,0,.55), 0 2px 5px -2px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06); }
.section-title { display: flex; align-items: center; gap: 8px; letter-spacing: .07em; }
.section-title::before { content: ''; width: 4px; height: 13px; border-radius: 3px; background: var(--grad); flex: none; }
.btn.primary { box-shadow: 0 7px 22px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.28); }
.pk-card .date-tab { box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.profile-cover.has { background-color: var(--card-2); }
.profile-cover .cover-cam { position: absolute; right: 12px; bottom: 12px; z-index: 2; padding: 7px 12px; border-radius: 10px;
  border: none; background: rgba(0,0,0,.5); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; backdrop-filter: blur(6px); }
.profile-card .avatar-edit .avatar.lg { border: 4px solid var(--card); }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.gallery .gal-im, .gallery .gal-add { aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; cursor: pointer; }
.gallery .gal-im img { width: 100%; height: 100%; object-fit: cover; }
.gallery .gal-add { display: grid; place-items: center; background: var(--bg-2); border: 1px dashed var(--line); color: var(--muted); font-size: 24px; font-weight: 800; line-height: 1; }
.gallery .gal-add span { display: block; font-size: 11px; font-weight: 700; margin-top: 2px; }

.pm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pm-item { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; cursor: pointer; }
.pm-item img { width: 100%; height: 100%; object-fit: cover; }
.pm-item .pm-badge { position: absolute; left: 4px; bottom: 4px; }

.photo-review { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pr-item { background: var(--card-2); border-radius: 14px; overflow: hidden; }
.pr-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.pr-item .pr-by { padding: 8px 10px 4px; font-weight: 700; font-size: 13px; }
.pr-item .btn-row { padding: 6px 10px 10px; }

/* ══ Die Bildschau (Vollbild) ═══════════════════════════════════════
   `.lightbox` hieß sie früher und konnte genau eines: ein Bild zeigen.
   Die Namen bleiben nur dort stehen, wo sie noch gebraucht werden. */
.bildschau {
  position: fixed; inset: 0; z-index: 95; background: rgba(0,0,0,.94);
  display: flex; flex-direction: column;
  animation: reveal .18s ease both; touch-action: none; overscroll-behavior: contain;
  /* Nach unten wischen: Der Hintergrund wird durchsichtiger, während das
     Bild fällt — man sieht, dass man es gerade weglegt. */
  opacity: calc(1 - var(--bs-weg, 0) * .55);
}
.bildschau.geht { animation: bs-weg .19s ease forwards; }
@keyframes bs-weg { to { opacity: 0; } }
.bs-kopf {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--safe-top) + 12px) 16px 10px; gap: 12px;
  color: #fff; position: relative; z-index: 2;
}
.bs-zaehler { font-size: 13.5px; font-weight: 700; letter-spacing: .04em; opacity: .85; }
.bs-x {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,.14); border: 0; color: #fff; font-size: 17px;
  cursor: pointer; display: grid; place-items: center;
}
.bs-buehne {
  flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden;
  padding: 0 8px; touch-action: none;
}
.bs-bild {
  max-width: 100%; max-height: 100%; border-radius: 10px;
  will-change: transform; user-select: none; -webkit-user-drag: none;
}
.bildschau.gezoomt .bs-bild { border-radius: 0; }
.bs-fuss {
  flex: none; color: #fff; padding: 12px 18px calc(var(--safe-bottom) + 16px);
  background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
  max-height: 34vh; overflow-y: auto;
}
.bs-wer { font-size: 13px; opacity: .8; margin-bottom: 3px; }
.bs-text { font-size: 15px; line-height: 1.45; }
/* Pfeile nur am Rechner: Auf dem Telefon wischt man, und zwei Knöpfe
   über dem Bild nähmen genau die Fläche weg, auf der man wischt. */
.bs-pfeil {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.14); color: #fff; font-size: 26px; line-height: 1;
  cursor: pointer; display: none; place-items: center;
}
.bs-pfeil.links { left: 12px; }
.bs-pfeil.rechts { right: 12px; }
@media (hover: hover) and (pointer: fine) {
  .bildschau:not(.allein) .bs-pfeil { display: grid; }
}
@media (prefers-reduced-motion: reduce) { .bildschau { animation: none; } }
/* Bilder im Chat sind antippbar — das darf man auch sehen. */
.ch-img { cursor: zoom-in; }
/* ── Legendäres Profil-Hero (immersiv, eigenständig) ── */
.hero { position: relative; border-radius: 22px; overflow: hidden; min-height: 322px; display: flex; align-items: flex-end;
  background: linear-gradient(150deg, var(--brand), var(--brand-2)); background-size: cover; background-position: center; box-shadow: var(--shadow); }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,18,.06) 0%, rgba(11,11,18,.44) 44%, rgba(11,11,18,.95) 100%); }
.hero .cover-cam { position: absolute; top: 12px; right: 12px; z-index: 3; padding: 7px 12px; border-radius: 10px; border: none;
  background: rgba(0,0,0,.5); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; backdrop-filter: blur(6px); }
.hero-content { position: relative; z-index: 2; width: 100%; padding: 24px 20px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero-av { margin-bottom: 0; }
.hero-av .avatar.lg { width: 110px; height: 110px; border: 3px solid rgba(255,255,255,.92); box-shadow: 0 12px 36px rgba(0,0,0,.6); }
.hero-av img.avatar { cursor: zoom-in; }

/* ── Level-Ring ums Profilbild ────────────────────────────────────────
   Der Ring füllt sich beim Öffnen des Profils. Er zeigt, wie weit jemand
   ist – aber nirgends steht, wofür es Punkte gibt. Das soll neugierig
   machen, nicht zum Ausrechnen einladen. */
.hero-ring { position: relative; width: 140px; height: 140px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 32px; }
.hr-svg { position: absolute; inset: 0; width: 140px; height: 140px;
  transform: rotate(-90deg); overflow: visible; }
.hr-bg { fill: none; stroke: rgba(255,255,255,.20); stroke-width: 5; }
.hr-fg { fill: none; stroke: url(#hrGrad); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 402.1; stroke-dashoffset: 402.1;
  filter: drop-shadow(0 0 7px var(--brand-glow));
  animation: hrFuellen 1.25s .3s cubic-bezier(.2,.85,.3,1) forwards; }
@keyframes hrFuellen { to { stroke-dashoffset: var(--ziel); } }
/* Die Zahl sitzt unten am Ring wie ein angehängtes Schildchen. */
.hr-lvl { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  display: flex; flex-direction: column; align-items: center; line-height: 1;
  padding: 5px 12px 4px; border-radius: 999px; background: rgba(12,12,20,.72);
  border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(9px);
  box-shadow: 0 5px 16px rgba(0,0,0,.45); }
.hr-lvl b { font-size: 16px; font-weight: 900; color: #fff; }
.hr-lvl span { font-size: 8.5px; font-weight: 800; letter-spacing: 1.1px;
  text-transform: uppercase; color: rgba(255,255,255,.62); margin-top: 2px; }
.hero-av .cam { z-index: 3; }

.hero-name { font-size: 27px; font-weight: 900; letter-spacing: .3px; line-height: 1.1; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.55); }
.hero-zeile { margin-top: 4px; }
/* Im Hero wird aus dem farbigen Namensschild Milchglas: Auf einem fremden
   Titelbild soll es dazugehören und nicht dagegen anschreien. Das
   Geschlecht bleibt lesbar – als getönte Schrift statt als Farbklotz. */
.hero-zeile .idchip.g-m, .hero-zeile .idchip.g-w, .hero-zeile .idchip.g-d {
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.30);
  backdrop-filter: blur(10px); font-size: 15px; padding: 6px 15px 6px 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.34); }
.hero-zeile .idchip.g-m { box-shadow: 0 6px 20px rgba(0,0,0,.34), inset 0 0 22px rgba(58,160,255,.30); }
.hero-zeile .idchip.g-w { box-shadow: 0 6px 20px rgba(0,0,0,.34), inset 0 0 22px rgba(255,111,176,.30); }
.hero-zeile .idchip.g-d { box-shadow: 0 6px 20px rgba(0,0,0,.34), inset 0 0 22px rgba(177,75,255,.32); }
.hero-zeile .idchip.g-m .ga { color: #A8D6FF; opacity: 1; }
.hero-zeile .idchip.g-w .ga { color: #FFB3D6; opacity: 1; }
.hero-zeile .idchip.g-d .ga { color: #DDB2FF; opacity: 1; }

.hero-chips { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; margin-top: 11px; }
/* Die Bigo-ID ist zum Antippen da – man kopiert vor allem FREMDE IDs,
   um die Person auf Bigo wiederzufinden. */
/* Bigo-ID und Geburtstag teilen sich eine Zeile – so bleibt darüber die
   ganze Breite für „Verheiratet mit <Name>". */
.hero-fakten { display: flex; align-items: center; justify-content: center;
  gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.hero-fakt { display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  color: rgba(255,255,255,.85); background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(8px); }
.hero-id { display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px; font: inherit; font-size: 12.5px;
  font-weight: 700; letter-spacing: .2px; cursor: pointer;
  color: rgba(255,255,255,.88); background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(8px);
  -webkit-tap-highlight-color: transparent; transition: background .14s ease, transform .1s ease; }
.hero-id:hover { background: rgba(255,255,255,.18); }
.hero-id:active { transform: scale(.96); }
.hi-kop { font-size: 11px; opacity: .55; }
/* Die Beziehungszeile darf jetzt lang werden, ohne zu brechen. */
.hero-chips .rel-chip { max-width: 100%; }
.badge.glass { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); color: #fff; }
.btn.glass { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff; backdrop-filter: blur(8px); }

/* Profil-Aktionen: Kacheln (Icon oben, Wort darunter).
   Gebaut war die Reihe einmal für DREI Kacheln. Inzwischen sind es bis zu
   sechs — Nachricht, Schenken, Anrufen, Video, Melden und die
   Schnell-Moderation. In einer Flex-Reihe konnten sie nicht schmaler werden
   als ihr Wort und wuchsen rechts aus dem Bild: Die vierte war
   angeschnitten, der Rest lag ganz draußen (gemeldet 20.09.2026).
   Im Raster bricht die Zeile stattdessen um. */
.prof-actions { display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin-top: 18px; width: 100%; max-width: 340px; }
/* Auf sehr schmalen Geräten lieber drei je Zeile als vier gequetschte. */
@media (max-width: 345px) { .prof-actions { grid-template-columns: repeat(3, 1fr); } }
/* Aufräumen in der letzten Zeile — nur bei vier Spalten, sonst rechnet sich
   das Raster kaputt:
     bleibt EINE Kachel übrig  → sie nimmt die ganze Zeile, Zeichen und Wort
                                 nebeneinander (allein unten links sähe sie
                                 aus wie vergessen),
     bleiben ZWEI übrig        → jede eine halbe Zeile. */
@media (min-width: 346px) {
  .prof-actions .pa-btn:nth-child(5):last-child {
    grid-column: 1 / -1; flex-direction: row; gap: 9px; padding: 11px 10px; min-height: 52px; }
  .prof-actions .pa-btn:nth-child(5):nth-last-child(2),
  .prof-actions .pa-btn:nth-child(6):last-child { grid-column: span 2; }
}
.prof-actions .pa-btn { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-height: 76px; padding: 12px 3px; border-radius: 16px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.10);
  color: #fff; font-weight: 800; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(8px); transition: transform .12s ease, background .12s ease, box-shadow .12s ease; }
.prof-actions .pa-btn:hover { background: rgba(255,255,255,.17); }
.prof-actions .pa-btn:active { transform: scale(.94); }
.prof-actions .pa-btn.primary { background: var(--grad); border-color: transparent; box-shadow: 0 8px 22px var(--brand-glow); }
/* Jede Handlung hat ihre Farbe — man trifft die richtige Kachel, ohne zu
   lesen. Zurückhaltend getönt, damit die wichtigste (Nachricht, im
   Markenverlauf) die einzige bleibt, die wirklich leuchtet. */
.prof-actions .pa-btn.pa-gift  { background: rgba(240,190,90,.16); border-color: rgba(240,190,90,.40); }
.prof-actions .pa-btn.pa-call  { background: rgba(80,220,150,.14);  border-color: rgba(80,220,150,.36); }
.prof-actions .pa-btn.pa-video { background: rgba(95,170,255,.14);  border-color: rgba(95,170,255,.36); }
.prof-actions .pa-btn.mod { background: rgba(255,170,0,.16); border-color: rgba(255,170,0,.42); }
/* Das Zeichen bekommt etwas Tiefe, sonst schwimmt es auf dem Milchglas. */
.prof-actions .pa-ic { filter: drop-shadow(0 2px 5px rgba(0,0,0,.4)); }
/* Beim Drücken kurz ein Schein in der eigenen Farbe statt nur Schrumpfen. */
.prof-actions .pa-btn.pa-gift:active  { box-shadow: 0 6px 18px rgba(240,190,90,.35); }
.prof-actions .pa-btn.pa-call:active  { box-shadow: 0 6px 18px rgba(80,220,150,.32); }
.prof-actions .pa-btn.pa-video:active { box-shadow: 0 6px 18px rgba(95,170,255,.32); }
/* ⚡ Schnell-Moderation Aktions-Sheet */
.qm-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.qm-actions { display: flex; flex-direction: column; gap: 8px; }
.qm-act { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 13px 15px;
  border-radius: 13px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text);
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.qm-act:active { transform: scale(.98); }
.qm-act .qm-ic { font-size: 19px; }
.qm-act.warn { border-color: rgba(255,170,0,.42); color: #ffcf7a; }
.qm-act.danger { border-color: rgba(255,90,90,.42); color: #ff8f8f; }
.prof-actions .pa-ic { font-size: 23px; line-height: 1; }
/* Das Wort soll GANZ dastehen, in einer Zeile: „Nach-richt" quer über zwei
   Zeilen liest sich wie ein Druckfehler, drei Punkte wie eine Panne. Also
   eine Spur kleiner und ohne Trennstriche — passt bis hinunter auf 320 px.
   Nur wenn es wirklich nicht reicht (sehr lange Wörter in anderen Sprachen),
   bricht es um, statt aus der Kachel zu laufen. */
.prof-actions .pa-lb { font-size: 11.5px; letter-spacing: 0; max-width: 100%;
  line-height: 1.2; text-align: center; overflow-wrap: break-word; hyphens: none; }

/* Zusammenhängender Identitäts-Chip: „w22 Lisa" in EINEM farbigen Element */
.idchip { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px; padding: 3px 12px 3px 8px;
  border-radius: 999px; color: #fff; text-decoration: none; box-shadow: 0 2px 9px rgba(0,0,0,.32); vertical-align: middle; }
/* Geschlecht und Alter stehen NEBEN dem Namen, nicht in einem zweiten
   Kringel darin. Eine Pille in der Pille sieht aus wie zwei Angaben, dabei
   ist es eine: „w 21 EyMinion". Die Abstufung macht jetzt die Deckkraft. */
.idchip .ga { font-weight: 800; font-size: 12.5px; text-transform: lowercase;
  padding: 0; background: none; letter-spacing: .4px; opacity: .82; }
.idchip.g-m { background: linear-gradient(135deg, #3AA0FF, #2C6FE0); }
.idchip.g-w { background: linear-gradient(135deg, #FF6FB0, #E0468C); }
.idchip.g-d { background: linear-gradient(135deg, #B14BFF, #8A2CE0); }
.rot-slide.on { opacity: 1; transform: none; pointer-events: auto; }
.rot-txt .rot-s .accent { color: var(--accent); font-variant-numeric: tabular-nums; }
.rot-dot.on { background: var(--brand-2); width: 16px; border-radius: 3px; }

/* ── Sprach-Kommentare ── */
.cmt-audio { width: 100%; max-width: 260px; height: 38px; margin-top: 5px; }
.cmt-form .cmt-rec.rec { color: #FF5A5A; animation: softpulse 1s infinite; }
.cmt-audio-prev { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.cmt-audio-prev audio { max-width: 220px; height: 34px; }

/* ── Profil-Hintergrund-Wähler ── */
.bg-picker { display: flex; flex-wrap: wrap; gap: 9px; }
.bg-sw { width: 42px; height: 42px; border-radius: 12px; cursor: pointer; border: 2px solid transparent; position: relative;
  display: grid; place-items: center; font-size: 18px; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.bg-sw.bg-icon { background: var(--card-2); }
.bg-sw.sel { border-color: #fff; box-shadow: 0 0 0 2px var(--brand), inset 0 1px 0 rgba(255,255,255,.2); }
.bg-sw.sel:not(.bg-icon)::after { content: '✓'; position: absolute; font-size: 15px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.bg-custom input[type=color] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Composer heftig */
.composer.framed { box-shadow: 0 10px 34px var(--brand-glow), 0 5px 18px rgba(0,0,0,.35); }
.composer textarea { font-size: 16.5px; }

/* ══════════════════════════════════════════════════════════════════
   WOW-Landing mit Neon-Licht
   ══════════════════════════════════════════════════════════════════ */
/* Landing – edler Schwarz/Lila/Blau-Look */
.neon-hero { position: relative; border-radius: 26px; padding: 36px 22px 28px; text-align: center;
  background: linear-gradient(180deg, rgba(14,11,28,.94), rgba(5,5,12,.97)); backdrop-filter: blur(16px); overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(90,70,255,.6); }
.neon-hero::before { content: ''; position: absolute; inset: -30%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 24% -6%, rgba(150,80,255,.5), transparent 52%),
              radial-gradient(circle at 84% 110%, rgba(64,110,255,.44), transparent 52%); }
.neon-hero::after { content: ''; position: absolute; inset: 0; border-radius: 26px; padding: 1.5px; pointer-events: none;
  background: linear-gradient(120deg, #9a4dff, #4d7fff, #9a4dff); background-size: 300% 300%;
  animation: neonflow 7s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.neon-hero > * { position: relative; z-index: 1; }
@keyframes neonflow { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
.nh-badge { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: #d9c8ff; padding: 5px 13px; border-radius: 999px;
  background: rgba(120,90,255,.15); border: 1px solid rgba(120,90,255,.44); margin-bottom: 15px; }
.nh-logo { width: 72px; height: 72px; border-radius: 22px; margin: 0 auto 14px; display: grid; place-items: center; font-size: 34px;
  background: linear-gradient(135deg, #9a4dff, #4d7fff); box-shadow: 0 0 38px rgba(100,80,255,.7); animation: floaty 4.5s ease-in-out infinite; }
.neon-title { margin: 0; font-weight: 900; line-height: .92; letter-spacing: 1px; font-size: 44px; color: #fff;
  text-shadow: 0 0 10px rgba(122,90,255,.72), 0 0 28px rgba(77,127,255,.55), 0 0 52px rgba(122,90,255,.35); }
.neon-title span { display: block; font-size: 31px; background: linear-gradient(120deg, #b98bff, #5b8cff);
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.nh-sub { color: #b6b1cf; font-size: 15px; margin: 12px 0 0; line-height: 1.5; }
.nh-sub b { color: #fff; }
.neon-btn { box-shadow: 0 0 24px rgba(122,90,255,.55), 0 8px 22px rgba(64,110,255,.4) !important; }

/* Vertrauens-Leiste unter dem Hero */
.trust-strip { display: flex; justify-content: center; gap: 6px; margin: 16px 0 4px; }
.trust-item { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #a7a2c2; white-space: nowrap;
  background: rgba(16,14,30,.7); border: 1px solid rgba(120,90,255,.22); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); border-radius: 999px; padding: 6px 11px; }
.trust-item span { font-size: 12.5px; }

.wow-label { text-align: center; font-size: 11px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: #8f8ab0; margin: 28px 0 12px; }
.wow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.wow-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  background: linear-gradient(165deg, rgba(20,17,38,.85), rgba(9,8,18,.9)); border: 1px solid rgba(120,90,255,.16); border: 1px solid color-mix(in srgb, var(--brand) 16%, transparent); border-radius: 17px; padding: 16px 14px;
  transition: transform .15s, border-color .2s, box-shadow .2s; }
.wow-card:active { transform: scale(.97); }
.wow-card:hover { border-color: rgba(120,90,255,.5); border-color: color-mix(in srgb, var(--brand) 50%, transparent); border-color: color-mix(in srgb, var(--brand) 50%, transparent); box-shadow: 0 10px 30px -14px rgba(100,80,255,.6); }
.wow-card .wow-ic { font-size: 22px; width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 11px; border-radius: 13px;
  background: linear-gradient(135deg, rgba(150,80,255,.26), rgba(64,110,255,.22)); border: 1px solid rgba(120,90,255,.32); border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent); }
.wow-card b { display: block; font-size: 14.5px; color: #f3f1fb; }
.wow-card span { display: block; font-size: 12px; color: #9994b6; margin-top: 3px; line-height: 1.4; }
.land-foot { text-align: center; font-size: 11.5px; color: #6f6a86; margin: 24px 0 8px; line-height: 1.6; }
.land-foot b { color: #8b8cff; cursor: pointer; }

/* ── Geburtstags-Post ── */
.bday-post { background: linear-gradient(180deg, rgba(255,77,157,.16), var(--card) 62%); }
.bday-post .bp-sub { color: var(--muted); margin-top: 3px; font-size: 13px; }
.bday-post .actions { justify-content: center; margin-top: 14px; }
/* 🎂 Geburtstags-Torte in der Identitätszeile – überall gleich */
.bday-cake { font-size: 1.1em; filter: drop-shadow(0 0 6px rgba(255,77,157,.75)); }

/* ── Kommentar-Reaktionen ── */
.crow { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; position: relative; }
.creact-chips { display: inline-flex; gap: 5px; }
.creact-chip { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--card-2); cursor: pointer; }
.creact-chip.mine { border-color: var(--brand); background: rgba(177,75,255,.18); background: color-mix(in srgb, var(--brand) 18%, transparent); }
.creact-add { cursor: pointer; font-size: 15px; opacity: .7; }
.creact-add:hover { opacity: 1; }
.creact-picker { position: absolute; bottom: calc(100% + 4px); left: 0; z-index: 5; display: flex; gap: 3px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 14px; padding: 6px 8px; box-shadow: var(--shadow); animation: reveal .16s ease both; }
.creact-picker span { font-size: 21px; cursor: pointer; padding: 2px 4px; border-radius: 8px; }
.creact-picker span:active { background: var(--card-2); }

/* ── Jappy-Status hinter dem Namen + Gefühls-Chips ── */
.status-txt { display: inline-block; color: var(--accent); font-size: 12px; font-weight: 600;
  background: rgba(55,224,200,.13); padding: 1px 9px; border-radius: 999px; margin-left: 4px;
  vertical-align: middle; line-height: 1.6; white-space: nowrap; }
.status-txt.emoji-only { background: none; padding: 0; margin-left: 0; font-size: 15px; line-height: 1; cursor: pointer; }
.tiptip {
  position: fixed; z-index: 9999; pointer-events: none;
  background: #1c1723; color: #fff; font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: 9px; box-shadow: 0 8px 20px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12); white-space: nowrap; max-width: 72vw;
  overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(4px); transition: opacity .16s ease, transform .16s ease;
}
.tiptip.show { opacity: 1; transform: translateY(0); }
.feelings { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.feel-chip { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2); font-size: 13px; cursor: pointer; transition: transform .08s, background .15s; }
.feel-chip:active { background: var(--card-2); transform: scale(.96); }

/* ══════════════════════════════════════════════════════════════════
   Chat / Direktnachrichten
   ══════════════════════════════════════════════════════════════════ */
.conv-row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; text-decoration: none; color: inherit; border-top: 1px solid var(--line-soft); }
.conv-row:first-child { border-top: none; }
.conv-mid { flex: 1; min-width: 0; }
.conv-name { font-weight: 700; }
.conv-last { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.conv-right { text-align: right; flex: none; }
.conv-time { color: var(--muted-2); font-size: 11px; }
.conv-badge { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brand-2); color: var(--on-brand); font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; margin-top: 4px; }
#nc-list { max-height: 60vh; overflow-y: auto; }

/* Chat: Main auf Viewport-Höhe fixieren → Nachrichten scrollen INTERN, Eingabeleiste bleibt unten stehen. */
.main.chat-mode { display: flex; flex-direction: column; overflow: hidden; padding: 12px 14px 0;
  flex: none; height: calc(100dvh - var(--topbar-h) - var(--safe-top)); }
.chat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex: none; }
.chat-head-u { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.chat-head-n { font-weight: 800; font-size: 16px; }
/* Kopf-Werkzeuge (🤖 Fidolin-Hilfe + 👀 Auto-Scroll) rechts gebündelt */
.chat-head-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.chat-head-tools .btn { font-size: 17px; }
/* 🤖 Fidolin-Hilfe: Schnell-Chips */
.fido-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.fido-chip { font-size: 13.5px; padding: 9px 14px; border-radius: 999px; cursor: pointer; font-weight: 700;
  background: rgba(177,75,255,.14); background: color-mix(in srgb, var(--brand) 14%, transparent); border: 1px solid rgba(177,75,255,.4); border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); color: var(--text);
  transition: transform .08s, background .15s; }
.fido-chip:hover { background: rgba(177,75,255,.24); background: color-mix(in srgb, var(--brand) 24%, transparent); }
.fido-chip:active { transform: scale(.96); }
.tc-eyes.on { background: rgba(177,75,255,.22); background: color-mix(in srgb, var(--brand) 22%, transparent); border-color: var(--brand); box-shadow: 0 0 12px var(--brand-glow); }
/* Ungelesen-Trenner im Team-Chat */
.tc-divider { display: flex; align-items: center; gap: 10px; margin: 12px 4px; color: #ff7ac0; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.tc-divider::before, .tc-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,122,192,.6), transparent); }
/* Team-Chat-Benachrichtigungsmodus (Auswahl) */
.np-tcsel { background: var(--card-2); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; font-size: 13.5px; font-weight: 700; max-width: 62%; }
.chat-on { color: #7EF0AE; font-size: 12px; font-weight: 700; }
.chat-msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; scrollbar-width: none; -ms-overflow-style: none; }
.chat-msgs::-webkit-scrollbar { width: 0; height: 0; display: none; }
.msg { display: flex; }
.msg.mine { justify-content: flex-end; }
/* Swipe-to-Reply: Nachricht folgt dem Finger; ↩ erscheint im aufgehenden Spalt (bleibt stehen). */
.msg.swiping { position: relative; will-change: transform; }
.msg.swiping::before {
  content: "↩"; position: absolute; left: 6px; top: 50%;
  transform: translate(calc(-1 * var(--sw, 0px)), -50%) scale(calc(.7 + .3 * var(--swp, 0)));
  font-size: 20px; font-weight: 800; color: var(--brand-2);
  opacity: var(--swp, 0); pointer-events: none; z-index: 2;
}
.msg.swipe-armed::before { color: #fff; text-shadow: 0 0 10px var(--brand-2); }
/* Nach links gewischt: Der Pfeil steht rechts, im Spalt, der dort aufgeht —
   und zeigt in die Richtung, aus der man zieht. */
.msg.swipe-links.swiping::before {
  left: auto; right: 6px;
  transform: translate(var(--sw, 0px), -50%) scale(calc(.7 + .3 * var(--swp, 0))) scaleX(-1);
}
.msg .bubble { max-width: 80%; padding: 9px 13px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--line-soft); font-size: 15px; line-height: 1.4; word-break: break-word; }
.msg.mine .bubble { background: linear-gradient(135deg, var(--brand), var(--brand-2)); border: none; color: var(--on-brand); }
.msg .msg-time { display: block; font-size: 10px; opacity: .72; margin-top: 3px; text-align: right; }
/* @-Erwähnungen im Chat: klar sichtbarer Chip – auch auf farbigen/eigenen Blasen. */
.mention { color: var(--brand-2); font-weight: 800; text-decoration: none; }
.bubble .mention, .ch-txt .mention, .mtext .mention, .msg-t .mention {
  background: rgba(120,90,255,.3); background: color-mix(in srgb, var(--brand) 30%, transparent); background: color-mix(in srgb, var(--brand) 30%, transparent); color: #e4d8ff; padding: 1px 6px; border-radius: 7px; white-space: nowrap; }
.bubble.mine .mention, .msg.mine .bubble .mention, .bubble.colored .mention {
  background: rgba(255,255,255,.3); color: var(--on-brand); }
.msg .cmt-audio { margin-top: 4px; max-width: 220px; }
.chat-composer { display: flex; align-items: flex-end; gap: 8px; padding: 10px 0 calc(var(--safe-bottom) + 10px); flex: none; position: relative; }
/* @-Vorschläge im Team-Chat öffnen nach OBEN (Eingabefeld sitzt unten).
   ⚠️ Die Auswahl MUSS staerker sein als `.c-mention` weiter unten in dieser
   Datei: beide waeren sonst gleich stark, die spaetere gewinnt — und dann
   stehen `top` UND `bottom` gleichzeitig. Ein absolut gesetztes Feld mit
   beidem rechnet seine Hoehe aus dem Abstand aus, hier 2 Pixel. Die Liste
   war da, mit acht Namen drin, und trotzdem unsichtbar. */
.chat-composer .c-mention.ch-mention { top: auto; bottom: calc(100% - 4px); }
/* Kein Platz nach unten (Kommentarfeld am Bildrand) → sie klappt nach oben.
   Dieselbe Stärke-Falle wie oben: Sie muss `.c-mention` schlagen, sonst
   stehen `top` und `bottom` gleichzeitig und die Liste ist 2 px hoch. */
.c-mention.c-mention.oben { top: auto; bottom: calc(100% + 4px); }
.chat-composer input { flex: 1; }
/* Eingabe wächst beim Schreiben mit (mehrzeilig statt einzeilig abgeschnitten) */
.chat-composer textarea { flex: 1; resize: none; overflow-y: auto; line-height: 1.4; min-height: 44px; max-height: 150px; }
/* Scrollbalken beim Mitwachsen ausblenden (Scrollen bleibt) – sieht sauberer aus. */
.chat-composer textarea, .composer .c-textwrap textarea { scrollbar-width: none; -ms-overflow-style: none; }
.chat-composer textarea::-webkit-scrollbar, .composer .c-textwrap textarea::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* 🎈 Fliegende Emoji-Reaktionen (Bigo-Style) */
.fly-emoji { position: fixed; bottom: 92px; z-index: 88; pointer-events: none; will-change: transform, opacity;
  animation: flyUp 2.2s cubic-bezier(.3,.7,.4,1) forwards; filter: drop-shadow(0 3px 7px rgba(0,0,0,.45)); }
@keyframes flyUp {
  0% { transform: translate(0,0) scale(.4) rotate(0deg); opacity: 0; }
  14% { opacity: 1; transform: translate(0,-12px) scale(1.15) rotate(0deg); }
  100% { transform: translate(var(--dx,0), -64vh) scale(1) rotate(var(--rot,0deg)); opacity: 0; }
}
/* Fly-Bar über der Eingabe */
.tc-flybar { display: flex; gap: 6px; justify-content: center; padding: 2px 0 6px; flex: none; }
.tc-fly-b { border: none; background: var(--card-2); border-radius: 999px; width: 42px; height: 34px; font-size: 19px;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s ease, background .12s ease; }
.tc-fly-b:hover { background: var(--card); }
.tc-fly-b:active { transform: scale(.8); }
/* Live-Präsenz-Strip */
.tc-present { display: flex; align-items: center; gap: 0; min-height: 22px; margin: -2px 2px 6px; flex: none; }
.tc-present:empty { display: none; }
.tc-pres-dot { width: 8px; height: 8px; border-radius: 50%; background: #35D07F; box-shadow: 0 0 8px #35D07F; flex: none;
  margin-right: 8px; animation: presPulse 1.8s ease-in-out infinite; }
@keyframes presPulse { 0%,100% { opacity: .5 } 50% { opacity: 1 } }
.tc-pres-av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; margin-left: -6px;
  border: 2px solid var(--bg); flex: none; }
.tc-pres-av:first-of-type { margin-left: 0; }
.tc-pres-av.ph { display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--on-brand); background: var(--grad); }
.tc-pres-n { font-size: 12px; color: var(--muted); margin-left: 8px; font-weight: 600; }
/* ✨ „Was hab ich verpasst?"-Zusammenfassung */
.fido-summary { margin-top: 12px; background: linear-gradient(160deg, rgba(177,75,255,.14), var(--card-2)); background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 14%, transparent), var(--card-2)); border: 1px solid rgba(177,75,255,.3);
  border-radius: 14px; padding: 14px 16px; font-size: 15px; line-height: 1.55; color: var(--text); }

/* 📊 Blitz-Umfrage im Chat */
.ch-poll { min-width: 230px; }
.cp-q { font-weight: 800; font-size: 15px; margin-bottom: 9px; }
.cp-opts { display: flex; flex-direction: column; gap: 6px; }
.cp-opt { position: relative; overflow: hidden; text-align: left; border: 1px solid var(--line-soft);
  background: var(--card-2); border-radius: 10px; padding: 9px 11px; cursor: pointer; color: var(--text);
  display: flex; align-items: center; gap: 8px; font-size: 14px; -webkit-tap-highlight-color: transparent; transition: transform .1s ease; }
.cp-opt:active { transform: scale(.985); }
.cp-opt.voted { border-color: var(--brand); }
.cp-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(177,75,255,.38), rgba(255,79,163,.30)); background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 38%, transparent), rgba(255,79,163,.30)); transition: width .45s cubic-bezier(.3,.8,.4,1); }
.cp-opt.voted .cp-bar { background: linear-gradient(90deg, rgba(177,75,255,.6), rgba(255,79,163,.45)); background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 60%, transparent), rgba(255,79,163,.45)); }
.cp-lbl { position: relative; z-index: 1; flex: 1; font-weight: 600; }
.cp-pct { position: relative; z-index: 1; font-weight: 800; font-size: 13px; color: var(--muted); min-width: 34px; text-align: right; }
.cp-opt.voted .cp-pct { color: #fff; }
.cp-total { margin-top: 8px; font-size: 12px; color: var(--muted); }

/* 🔴 „Gleich live"-Karte im Chat */
.ch-live { min-width: 220px; }
.cl-top { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.cl-dot { width: 10px; height: 10px; border-radius: 50%; background: #FF3B49; box-shadow: 0 0 9px #FF3B49; flex: none;
  animation: presPulse 1.3s ease-in-out infinite; }
.cl-note { margin-top: 6px; font-size: 14px; }
.cl-sub { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.cl-btn { display: inline-block; margin-top: 10px; padding: 8px 16px; border-radius: 999px; font-weight: 800; font-size: 14px;
  text-decoration: none; color: #fff; background: linear-gradient(90deg, #FF3B49, #FF4D9D); box-shadow: 0 6px 18px rgba(255,59,73,.4); }
.cl-btn:active { transform: scale(.96); }

/* Laufzeit: „seit 23 Min live" – zählt im Chat weiter.
   Auf schmalen Handys rutscht sie unter den Namen statt den Text zu zerreißen. */
.cl-top { flex-wrap: wrap; }
.cl-state { white-space: nowrap; font-weight: 700; }
.cl-since { margin-left: auto; padding-left: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .2px;
  color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Beendeter Stream: ruhig stellen, damit Laufendes heraussticht.
   ⚠️ Hier stand `opacity: .62` auf der GANZEN Karte. Das blendet den Text
   gleich mit ab — zusammen mit `--muted` auf lila Grund war „Stream
   beendet." praktisch unlesbar. Jetzt wird nur das Laute leiser
   (Punkt, Knopf, Glanz), der Text bleibt scharf. */
.ch-live.is-over .cl-dot { background: var(--muted-2); box-shadow: none; animation: none; }
.ch-live.is-over .cl-btn { opacity: .7; }
.ch-live.is-over .cl-sup { opacity: .8; }
.cl-btn.off { background: var(--card-2); color: var(--muted); box-shadow: none; }

/* 💜 Wer kommt vorbei */
.cl-sup { display: flex; align-items: center; gap: 5px; margin-top: 9px; flex-wrap: wrap; }
.cl-face { display: inline-flex; }
.cl-face .avatar { width: 26px; height: 26px; font-size: 10px;
  border: 2px solid var(--card); box-shadow: 0 0 0 1.5px var(--brand); }
.cl-face.fam .avatar { box-shadow: 0 0 0 1.5px var(--fam-1); }   /* Familie = grün */
.cl-face + .cl-face { margin-left: -9px; }                        /* leicht überlappen */
.cl-more { margin-left: -4px; padding: 0 7px; height: 26px; display: inline-grid; place-items: center;
  border-radius: 999px; background: var(--card-2); color: var(--muted); font-size: 11.5px; font-weight: 800; }
.cl-supn { margin-left: 5px; font-size: 12.5px; color: var(--muted); font-weight: 600; }

/* Knopfreihe unter der Karte – auf schmalen Handys umbrechen, aber eng bleiben.
   Die margin-top der einzelnen Knöpfe wird hier neutralisiert, sonst reißt beim
   Umbruch eine doppelte Lücke auf (margin + gap). */
.cl-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.cl-actions > * { margin-top: 0; }
.cl-come, .cl-share { border: 0; cursor: pointer; font-family: inherit;
  transition: transform .12s ease, filter .12s ease; }
.cl-come { padding: 8px 15px; border-radius: 999px; font-size: 14px; font-weight: 800; color: var(--on-brand);
  background: linear-gradient(90deg, var(--brand), var(--brand-2)); box-shadow: 0 6px 18px var(--brand-glow); }
.cl-come.on { background: rgba(47,208,127,.16); color: var(--fam-1);
  box-shadow: inset 0 0 0 1.5px rgba(47,208,127,.5); }
.cl-come:active, .cl-share:active { transform: scale(.94); }
.cl-come:disabled { opacity: .6; }
.cl-share { width: 38px; height: 38px; border-radius: 12px; font-size: 17px; line-height: 1;
  background: var(--card-2); color: var(--text); }
.lc-chk { display: flex; align-items: center; gap: 9px; margin-top: 10px; font-size: 14px; font-weight: 600; }
.lc-chk input { width: 18px; height: 18px; accent-color: var(--brand); }

/* 💬 Chat-Aktionen-Menü (hinter ⋯) */
.chat-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ca-row { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; border: 1px solid var(--line-soft);
  background: var(--card-2); border-radius: 14px; padding: 12px 14px; cursor: pointer; color: var(--text); transition: transform .1s ease, background .12s ease; }
.ca-row:hover { background: var(--card); }
.ca-row:active { transform: scale(.99); }
.ca-ic { font-size: 22px; flex: none; width: 26px; text-align: center; }
.ca-txt { display: flex; flex-direction: column; gap: 1px; }
.ca-txt b { font-size: 15px; }

/* 🎨 Team-Pinnwand */
.board-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.board-title { font-weight: 800; font-size: 17px; flex: 1; }
.board { position: relative; width: 100%; aspect-ratio: 3 / 4; touch-action: none; overflow: hidden; user-select: none;
  background-color: #b0824f;
  background-image:
    radial-gradient(rgba(0,0,0,.10) 1px, transparent 1.6px),
    radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.6px),
    radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.10), transparent 60%);
  background-size: 13px 13px, 19px 19px, 100% 100%;
  background-position: 0 0, 6px 8px, 0 0; }
.bp { position: absolute; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); cursor: grab; touch-action: none;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); transition: filter .15s ease; }
.bp.bp-drag { cursor: grabbing; filter: drop-shadow(0 16px 22px rgba(0,0,0,.55)); transition: none; }
@keyframes bpPop {
  0% { transform: translate(-50%,-50%) rotate(var(--rot,0deg)) scale(.2); }
  60% { transform: translate(-50%,-50%) rotate(var(--rot,0deg)) scale(1.15); }
  100% { transform: translate(-50%,-50%) rotate(var(--rot,0deg)) scale(1); }
}
.bn-col.on { border-color: var(--text); transform: scale(1.12); }

/* 📹 Teamsitzung */
.ts-card { padding: 16px; }
.ts-hero { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.ts-ic { font-size: 34px; line-height: 1; filter: drop-shadow(0 3px 8px rgba(0,0,0,.4)); }
.ts-title { font-size: 20px; font-weight: 900; }
.ts-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.ts-topic { background: var(--card-2); border-radius: 14px; padding: 13px 15px; margin-bottom: 14px; border-left: 4px solid var(--brand); }
.ts-topic.empty { color: var(--muted); font-style: italic; border-left-color: var(--line-soft); }
.ts-topic-lbl { display: block; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.ts-topic b { font-size: 16.5px; }
.ts-desc { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--text); white-space: pre-wrap; }
.ts-live { margin-top: 14px; }
.ts-live-h { font-size: 13px; font-weight: 800; margin-bottom: 8px; }
.ts-live-h.muted { color: var(--muted); font-weight: 600; }
.ts-live-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ts-live-av { display: inline-block; }

/* Profil/Gästebuch-Tabs */
.ptabs { display: flex; gap: 6px; margin: 2px 0 14px; background: var(--card-2); padding: 5px; border-radius: 14px; }
.ptab { flex: 1; text-align: center; padding: 9px 8px; border-radius: 10px; font-weight: 800; font-size: 14px; color: var(--muted); text-decoration: none; transition: background .15s, color .15s; }
.ptab:active { transform: scale(.98); }
.ptab.on { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: var(--on-brand); box-shadow: 0 4px 12px var(--brand-glow); }

/* 🌐 Community – Kanal-Übersicht */
.cmty-hint { color: var(--muted); font-size: 13px; margin: -2px 2px 12px; }
.cmty-list { display: flex; flex-direction: column; }
.cmty-row { display: flex; align-items: center; gap: 12px; padding: 11px 8px; border-radius: 14px; cursor: pointer; }
.cmty-row:active { background: var(--card-2); }
.cmty-row + .cmty-row { border-top: 1px solid var(--line-soft); }
.cmty-ic { width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid; place-items: center; font-size: 23px;
  background: linear-gradient(135deg, rgba(177,75,255,.3), rgba(255,77,157,.2)); background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 30%, transparent), rgba(255,77,157,.2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.cmty-ic.ann { background: linear-gradient(135deg, rgba(255,64,64,.34), rgba(226,75,74,.16)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 14px rgba(255,64,64,.28); }
.cmty-row.ann { background: rgba(255,64,64,.06); border: 1px solid rgba(255,64,64,.28); border-radius: 16px; margin-bottom: 4px; }
.cmty-mid { min-width: 0; flex: 1; }
.cmty-name { font-weight: 800; font-size: 15px; }
.cmty-badge { font-size: 10px; font-weight: 800; color: #ff6b6b; background: rgba(255,64,64,.18); border-radius: 999px; padding: 1px 7px; vertical-align: middle; text-transform: uppercase; letter-spacing: .04em; }
.cmty-prev { font-size: 12.7px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmty-prev b { color: #c9c1da; font-weight: 700; }
.cmty-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.cmty-t { font-size: 11px; color: var(--muted-2, #726a83); }
.cmty-pill { background: var(--grad); color: var(--on-brand); font-size: 11.5px; font-weight: 800; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; }
/* Das Zahnrad war 15px groß und ohne Polsterung – auf dem Handy kaum zu
   treffen. Die Fläche ist jetzt 34px, das Symbol bleibt gleich groß. */
.cmty-edit { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin: -6px -6px -6px 0; border-radius: 10px;
  background: none; border: none; cursor: pointer; font-size: 15px; opacity: .6;
  -webkit-tap-highlight-color: transparent; transition: opacity .14s ease, background .14s ease; }
.cmty-edit:hover { opacity: 1; background: color-mix(in srgb, var(--text) 8%, transparent); }
.cmty-edit:active { transform: scale(.9); }
/* Kanal-Editor */
.ce-emos { display: flex; flex-wrap: wrap; gap: 7px; }
.ce-emo { width: 40px; height: 38px; border-radius: 10px; border: 1px solid var(--line-soft); background: var(--card-2); cursor: pointer; font-size: 19px; }
.ce-emo.on { border-color: var(--brand); background: rgba(177,75,255,.16); background: color-mix(in srgb, var(--brand) 16%, transparent); transform: scale(1.06); }
.ce-types { display: flex; gap: 9px; }
.ce-type { flex: 1; background: var(--card-2); border: 1px solid var(--line-soft); border-radius: 12px; padding: 11px 10px; text-align: center; cursor: pointer; color: var(--text); }
.ce-type.on { border-color: var(--brand); background: rgba(177,75,255,.16); background: color-mix(in srgb, var(--brand) 16%, transparent); }
.ce-type b { display: block; font-size: 14px; }
.ce-type small { font-size: 11px; color: var(--muted); }
.tc-composer-wrap { flex: none; }

/* Lese-Bestätigung in Ankündigungs-Kanälen */
.ch-ackrow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.15); }
.ch-ack { background: #2ed47a; color: #06371c; border: none; border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.ch-ack:active { transform: scale(.97); }
.ch-ack.done { background: rgba(46,212,122,.18); color: #2ed47a; font-weight: 700; padding: 7px 12px; border-radius: 999px; }
.ch-ack-cnt { font-size: 11.5px; color: var(--muted); font-weight: 700; }

/* Menü-Abschnitts-Label im rechten Panel */
.ep-lbl { font-size: 10.5px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted-2, #726a83); padding: 4px 12px 2px; }

/* 🎲 Figurenwahl – Gruppen als Raster, die gewählte deutlich hervorgehoben. */
.fig-lbl { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2, #726a83); margin: 14px 0 7px; }
.fig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; }
.fig { aspect-ratio: 1; display: grid; place-items: center; font-size: 25px; cursor: pointer;
  border-radius: 14px; border: 1.5px solid var(--line-soft, rgba(255,255,255,.08));
  background: var(--card-2, rgba(255,255,255,.04)); transition: transform .12s, border-color .12s, background .12s; }
.fig:active { transform: scale(.92); }
.fig.an { border-color: var(--brand); background: rgba(177,75,255,.18); background: color-mix(in srgb, var(--brand) 18%, transparent); box-shadow: 0 0 0 3px var(--brand-glow); }
.fig-stein { width: 25px; height: 25px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff, #cbb6e8 42%, #7a5ea8 100%);
  box-shadow: inset 0 -2px 4px rgba(0,0,0,.35), 0 2px 5px rgba(0,0,0,.4); }

/* 📱 Meine Geräte – eine Zeile je Anmeldung, das eigene Gerät hervorgehoben. */
.ger-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ger-zeile { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 14px;
  background: var(--card-2, rgba(255,255,255,.04)); border: 1px solid var(--line-soft, rgba(255,255,255,.07)); }
.ger-zeile.jetzt { border-color: rgba(177,75,255,.45); border-color: color-mix(in srgb, var(--brand) 45%, transparent); border-color: color-mix(in srgb, var(--brand) 45%, transparent); background: rgba(177,75,255,.1); background: color-mix(in srgb, var(--brand) 10%, transparent); }
.ger-ic { font-size: 20px; flex: none; }
.ger-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ger-txt b { font-size: 13.5px; font-weight: 800; }
.ger-txt span { font-size: 11.5px; color: var(--muted-2, #726a83); }
.ger-hier { flex: none; font-size: 11px; font-weight: 800; color: #d9c2ff; text-transform: uppercase; letter-spacing: .08em; }
.ger-weg { flex: none; }

/* 🎮 Einladungs-Streifen: „X fordert dich heraus", „X ist live".
   Kommt von oben herein, bleibt 15 Sekunden und geht wieder – laut genug,
   dass man es nicht übersieht, leise genug, dass es nicht nervt. */
.einladung {
  position: fixed; left: 10px; right: 10px; top: calc(env(safe-area-inset-top, 0px) + 8px);
  z-index: 9500; display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  border-radius: 16px; border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(120deg, #2a1747, #1a1030);
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
  transform: translateY(-140%); opacity: 0; transition: transform .28s cubic-bezier(.2,.9,.3,1.2), opacity .28s;
}
.einladung.an { transform: translateY(0); opacity: 1; }
.einladung.live { background: linear-gradient(120deg, #3a1030, #1f0c22); border-color: rgba(255,95,158,.4); }
.ein-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ein-txt b { font-size: 14px; font-weight: 800; color: #fff; }
.ein-txt span { font-size: 12.5px; color: var(--muted, #b9b0c9); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ein-go { flex: none; padding: 8px 14px; border: 0; border-radius: 999px; font-size: 13px; font-weight: 800; color: var(--on-brand);
  background: var(--grad); cursor: pointer; }
.ein-zu { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.1); color: #fff; font-size: 13px; }
@media (min-width: 560px) { .einladung { left: 50%; right: auto; transform: translate(-50%, -140%); width: 420px; }
  .einladung.an { transform: translate(-50%, 0); } }

/* Reich-Schild im Menü (mcp = Verwaltungsraum · cp = Hochsicherheit).
   Sagt beim Aufklappen sofort, wo man gerade ist – die beiden Adressen sehen
   sich sonst zum Verwechseln ähnlich. */
.ep-realm {
  margin: 2px 12px 10px; padding: 7px 12px; border-radius: 999px; text-align: center;
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #e7d6ff;
  background: linear-gradient(120deg, rgba(177,75,255,.28), rgba(255,95,158,.22)); background: linear-gradient(120deg, color-mix(in srgb, var(--brand) 28%, transparent), rgba(255,95,158,.22));
  border: 1px solid rgba(255,255,255,.16);
}

/* 🛡️ Kein Zutritt – Verwaltungsraum ohne Verwaltungs-Aufgabe.
   Ruhig gehalten: Das ist keine Fehlermeldung und kein Vorwurf, sondern eine
   Auskunft mit zwei Auswegen. */
.kz-wrap { max-width: 460px; margin: 8vh auto 0; padding: 26px 22px 30px; text-align: center;
  border-radius: 22px; background: linear-gradient(160deg, #221436, #140c22);
  box-shadow: 0 14px 34px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1); }
.kz-shield { font-size: 46px; line-height: 1; margin-bottom: 10px; filter: drop-shadow(0 6px 14px rgba(177,75,255,.5)); filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--brand) 50%, transparent)); }
.kz-title { font-size: 21px; font-weight: 900; color: #fff; margin: 0 0 12px; letter-spacing: -.01em; }
.kz-text { font-size: 14.5px; line-height: 1.55; color: var(--muted, #b9b0c9); margin: 0 0 12px; }
.kz-text b { color: #e7d6ff; }
.kz-actions { display: flex; flex-direction: column; gap: 9px; margin: 20px 0 14px; }
.kz-actions .btn { width: 100%; text-align: center; text-decoration: none; }
.kz-hint { font-size: 12.5px; line-height: 1.5; color: var(--muted-2, #726a83); }

/* 🛡️ Kontrollraum – Highend-Startseite (mcp/acp) */
.mcp-hero {
  border-radius: 22px; padding: 18px 18px 20px; margin: 2px 0 14px; position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 100% 0%, rgba(255,95,158,.28), transparent 55%),
    radial-gradient(120% 90% at 0% 100%, rgba(177,75,255,.3), transparent 55%),
    linear-gradient(160deg, #221436, #140c22); background: radial-gradient(120% 90% at 100% 0%, rgba(255,95,158,.28), transparent 55%),
    radial-gradient(120% 90% at 0% 100%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 55%),
    linear-gradient(160deg, #221436, #140c22);
  box-shadow: 0 14px 34px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1);
}
.mcp-hero-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mcp-realm { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #e7d6ff;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 5px 12px; }
.mcp-exit { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,.1); font-size: 15px; text-decoration: none; }
.mcp-greet { font-size: 23px; font-weight: 900; color: #fff; letter-spacing: -.01em; }
.mcp-greet b { background: linear-gradient(120deg, #ff9bd0, #c9a6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mcp-todo { margin-top: 6px; font-size: 13.5px; font-weight: 700; }
.mcp-todo.hot { color: #ffd0dc; } .mcp-todo.hot b { color: #ff5f9e; font-size: 15px; }
.mcp-todo.ok { color: #9fe6c2; }
button.mcp-todo { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255,95,158,.4);
  background: rgba(255,95,158,.12); padding: 7px 13px; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700; }
button.mcp-todo:active { transform: scale(.98); }
/* 📥 Moderations-Posteingang */
.mi-sec { margin-top: 16px; }
.mi-h { font-size: 13px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mi-n { background: var(--brand-2); color: var(--on-brand); border-radius: 999px; padding: 0 8px; font-size: 11px; min-width: 18px; text-align: center; }
.mi-item { display: flex; align-items: center; gap: 10px; justify-content: space-between; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 13px; padding: 11px 13px; margin-bottom: 8px; transition: opacity .18s ease; }
.mi-txt { min-width: 0; flex: 1; }
.mi-ex { font-size: 13.5px; margin-top: 3px; font-style: italic; opacity: .9; word-break: break-word; }
.mi-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.mi-photo { background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 13px; padding: 8px; text-align: center; transition: opacity .18s ease; }
.mi-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 9px; margin-bottom: 6px; }
.mi-pby { font-size: 12px; font-weight: 700; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-photo .btn-row { justify-content: center; }

.mcp-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.mcp-metric { display: flex; flex-direction: column; align-items: flex-start; position: relative; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 16px; padding: 13px 14px; color: var(--text);
  transition: transform .12s, border-color .2s; }
.mcp-metric:active { transform: scale(.97); }
.mcp-metric.hot { border-color: rgba(255,95,158,.5); background: linear-gradient(160deg, rgba(255,95,158,.12), rgba(177,75,255,.06)); background: linear-gradient(160deg, rgba(255,95,158,.12), color-mix(in srgb, var(--brand) 6%, transparent)); }
.mcp-metric-ic { font-size: 17px; margin-bottom: 4px; }
.mcp-metric-n { font-size: 27px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.mcp-metric.hot .mcp-metric-n { color: #ff6b9d; }
.mcp-metric-l { font-size: 11.5px; color: var(--muted); font-weight: 700; margin-top: 3px; }
.kr-lbl { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2, #726a83); margin: 0 2px 10px; }

/* 🤖 KI-Diktat-Block (Was ist neu / Akte) */
.ai-dictate { margin-top: 12px; padding: 12px 13px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(177,75,255,.13), rgba(255,77,157,.05)); background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 13%, transparent), rgba(255,77,157,.05)); border: 1px solid rgba(177,75,255,.32); }
.ai-dictate-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; margin-bottom: 9px; }
.ai-dictate-h .muted { flex-basis: 100%; margin-top: 1px; }
.ai-dictate textarea { width: 100%; margin-bottom: 9px; }

/* 🎖️ Rechte-Editor – gruppierte Toggle-Karten */
.perm-presets { display: flex; gap: 8px; margin: 10px 0 4px; }
.perm-presets .btn { flex: 1; }
.perm-group-lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2, #726a83); margin: 13px 2px 8px; }
.perm-cards { display: flex; flex-direction: column; gap: 8px; }
.perm-card { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line-soft); cursor: pointer; transition: border-color .15s, background .15s; }
.perm-card.on { border-color: var(--brand); background: rgba(177,75,255,.1); background: color-mix(in srgb, var(--brand) 10%, transparent); }
.perm-card .perm-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.perm-card .perm-txt b { font-size: 14px; font-weight: 700; }
.perm-card .perm-txt span { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.perm-card input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.perm-sw { flex: none; width: 44px; height: 26px; border-radius: 999px; background: rgba(255,255,255,.13); position: relative; transition: background .18s; }
.perm-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .18s; }
.perm-card.on .perm-sw { background: var(--grad); }
.perm-card.on .perm-sw::after { transform: translateX(18px); }

/* 🔎 Protokoll (Audit-Log) */
.au-row { padding: 9px 2px; border-bottom: 1px solid var(--line-soft); }
.au-row:last-child { border-bottom: none; }
.au-txt { font-size: 13.5px; line-height: 1.4; }

.kr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.kr-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 18px; padding: 15px 14px 15px; cursor: pointer; color: var(--text);
  min-height: 120px; transition: transform .12s, border-color .2s; }
.kr-card:active { transform: scale(.97); }
/* Nur mit Maus – am Finger blieb der Rand nach dem Tippen haengen. */
@media (hover: hover) { .kr-card:hover { border-color: rgba(177,75,255,.4); border-color: color-mix(in srgb, var(--brand) 40%, transparent); border-color: color-mix(in srgb, var(--brand) 40%, transparent); } }
.kr-ic { font-size: 27px; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; margin-bottom: 8px;
  background: linear-gradient(135deg, rgba(177,75,255,.26), rgba(255,77,157,.16)); background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 26%, transparent), rgba(255,77,157,.16)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.kr-name { font-weight: 800; font-size: 15px; }
.kr-desc { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.kr-badge { position: absolute; top: 12px; right: 12px; background: var(--grad); color: var(--on-brand); font-size: 12px; font-weight: 800; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; }

/* 📖 Gästebuch (Jappy-Style) */
/* Gästebuch-Seite: warmer, gemütlicher Orange-Look */
.gb-page {
  margin: -4px -2px 0;
  padding: 14px 14px 22px;
  border-radius: 22px;
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(255,255,255,.22), transparent 55%),
    linear-gradient(160deg, #ffb25a 0%, #ff8a2b 40%, #f2701a 72%, #e05e10 100%);
  box-shadow: 0 14px 34px rgba(224,94,16,.32), inset 0 1px 0 rgba(255,255,255,.28);
}
.gb-hero {
  display: flex; align-items: center; gap: 13px; position: relative;
  padding: 4px 4px 16px;
}
.gb-hero-back {
  position: absolute; top: -2px; left: -2px;
  width: 34px; height: 34px; border-radius: 50%;
  border: none; cursor: pointer; font-size: 22px; line-height: 1; font-weight: 800;
  color: #fff; background: rgba(255,255,255,.2);
  display: grid; place-items: center;
}
.gb-hero-back:hover { background: rgba(255,255,255,.34); }
.gb-hero-book {
  font-size: 40px; line-height: 1; margin-left: 34px;
  filter: drop-shadow(0 4px 8px rgba(120,50,0,.4));
  transform: rotate(-8deg);
}
.gb-hero-txt { display: flex; flex-direction: column; line-height: 1.15; color: #fff; }
.gb-hero-kick { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .82; }
.gb-hero-name { font-size: 23px; font-weight: 900; text-shadow: 0 2px 6px rgba(150,60,0,.4); word-break: break-word; }
.gb-hero-count { font-size: 12.5px; font-weight: 700; opacity: .9; margin-top: 2px; }
.gb-write-btn {
  background: rgba(255,255,255,.96); color: #d6560c; font-weight: 900; border: none;
  box-shadow: 0 6px 16px rgba(150,60,0,.28); margin-bottom: 16px;
}
.gb-write-btn:hover { background: #fff; transform: translateY(-1px); }
.gb-page .gb-list { margin-top: 0; }
.gb-page .gb-t { color: rgba(255,255,255,.72); }
.gb-page .gb-del { color: #fff; opacity: .7; }
.gb-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 26px 12px; text-align: center; color: #fff;
  font-size: 34px; background: rgba(255,255,255,.14);
  border: 2px dashed rgba(255,255,255,.4); border-radius: 16px;
}
.gb-empty span { font-size: 14px; font-weight: 700; }
.gb-actions .btn { flex: 1; }
.gb-list { margin-top: 12px; display: flex; flex-direction: column; gap: 14px; }
.gb-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.gb-by { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.gb-by b { font-size: 14px; }
.gb-idrow { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.gb-t { font-size: 11px; color: var(--muted); }
.gb-del { margin-left: auto; background: none; border: none; cursor: pointer; font-size: 15px; opacity: .55; }
.gb-del:hover { opacity: 1; }
.gb-card { position: relative; border-radius: 16px; padding: 16px; box-shadow: 0 8px 20px rgba(0,0,0,.32); word-break: break-word; }
.gb-card.gb-priv { outline: 2px dashed rgba(255,255,255,.5); outline-offset: -6px; }
.gb-priv-badge { position: absolute; top: 8px; right: 8px; font-size: 10.5px; font-weight: 800; background: rgba(0,0,0,.42);
  color: #fff; padding: 3px 8px; border-radius: 999px; }
.gb-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 700; word-break: break-all; }
/* YouTube-Vorschau */
.gbc-yts { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.gb-yt { position: relative; border-radius: 12px; overflow: hidden; cursor: pointer; aspect-ratio: 16/9; background: #000; }
.gb-yt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gb-yt-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; color: #fff;
  background: rgba(0,0,0,.28); text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.gb-yt.playing { cursor: default; }
.gb-yt.playing iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Fußzeile: Reaktionen + Kommentare */
.gb-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.gb-rchips { display: flex; gap: 5px; flex-wrap: wrap; }
.gb-rchip { background: var(--card-2); border: 1px solid var(--line-soft); border-radius: 999px; padding: 2px 9px; font-size: 13px; font-weight: 700; cursor: pointer; }
.gb-rchip.mine { border-color: var(--brand); background: rgba(177,75,255,.18); background: color-mix(in srgb, var(--brand) 18%, transparent); }
.gb-react-btn, .gb-cmt-btn { background: var(--card-2); border: 1px solid var(--line-soft); border-radius: 999px; padding: 4px 10px; font-size: 13px; cursor: pointer; color: var(--text); }
.gb-cmt-btn .cc { font-weight: 800; color: var(--muted); }
.gb-comments { margin-top: 10px; }
.gbc-list { display: flex; flex-direction: column; gap: 10px; }
.gbc-c { display: flex; gap: 8px; align-items: flex-start; }
.gbc-cbody { flex: 1; background: var(--card-2); border-radius: 12px; padding: 8px 11px; min-width: 0; }
.gbc-cn { font-size: 12.5px; } .gbc-cn b { font-weight: 800; }
.gbc-ct { color: var(--muted); font-size: 11px; margin-left: 4px; }
.gbc-ctext { font-size: 14px; margin-top: 2px; word-break: break-word; }
.gbc-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; flex: none; }
.gbc-add { display: flex; gap: 8px; margin-top: 10px; position: relative; }
.gbc-add .gbc-in { flex: 1; }
.gbc-add .gbc-send { flex: none; }
.gbc-msg { font-size: 16px; line-height: 1.5; text-shadow: 0 1px 6px rgba(0,0,0,.28); }
/* Textgröße & Ausrichtung */
.gb-card.gb-sz-sm .gbc-msg { font-size: 13.5px; }
.gb-card.gb-sz-lg .gbc-msg { font-size: 21px; font-weight: 600; }
.gb-card.gb-al-center .gbc-msg { text-align: center; }
.gb-card.gb-al-right .gbc-msg { text-align: right; }
/* Sticker (Ecken-Stempel) */
.gb-card.has-sticker { padding-right: 48px; }
.gb-sticker { position: absolute; top: 8px; right: 10px; font-size: 30px; line-height: 1; transform: rotate(11deg); filter: drop-shadow(0 2px 5px rgba(0,0,0,.4)); pointer-events: none; z-index: 1; }
.gb-card.gb-priv .gb-sticker { top: 30px; }
.gbc-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.gbc-img { max-width: 100%; max-height: 210px; border-radius: 10px; border: 3px solid rgba(255,255,255,.72); box-shadow: 0 3px 8px rgba(0,0,0,.3); }
/* Composer */
.gb-preview :first-child { margin-top: 2px; }
.gb-ctrls { margin-top: 12px; display: flex; flex-direction: column; gap: 11px; }
.gb-crow { display: flex; align-items: center; gap: 10px; }
.gb-clbl { font-size: 12.5px; font-weight: 800; color: var(--muted); width: 108px; flex: none; }
.gb-opts { display: flex; gap: 7px; flex-wrap: wrap; }
.gb-bg, .gb-col { width: 30px; height: 30px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.gb-bg { border-radius: 8px; }
.gb-col { border-radius: 50%; }
.gb-bg.on, .gb-col.on { border-color: var(--text); transform: scale(1.1); }
.gb-fnt { min-width: 40px; height: 32px; border-radius: 8px; border: 1px solid var(--line-soft); background: var(--card-2); color: var(--text); cursor: pointer; font-size: 15px; }
.gb-fnt.on { border-color: var(--brand); background: rgba(177,75,255,.16); background: color-mix(in srgb, var(--brand) 16%, transparent); }
.gb-sz, .gb-al { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-soft); background: var(--card-2); color: var(--text); cursor: pointer; font-size: 13px; font-weight: 700; }
.gb-sz.on, .gb-al.on { border-color: var(--brand); background: rgba(177,75,255,.16); background: color-mix(in srgb, var(--brand) 16%, transparent); }
.gb-stk { width: 38px; height: 34px; border-radius: 8px; border: 1px solid var(--line-soft); background: var(--card-2); color: var(--muted); cursor: pointer; font-size: 18px; }
.gb-stk.on { border-color: var(--brand); background: rgba(177,75,255,.16); background: color-mix(in srgb, var(--brand) 16%, transparent); transform: scale(1.08); }
.chat-composer .btn { flex: none; }
#dm-send { min-width: 46px; font-size: 18px; }
.dm-rec.rec { color: #FF5A5A; animation: softpulse 1s infinite; }
.nav-unread { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--brand-2); color: var(--on-brand); font-size: 11px; font-weight: 800; display: inline-grid; place-items: center; }

/* Kanäle direkt in der linken Menüleiste */
.nav-channels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.nav-ch .nav-ch-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-ch.nav-ch-ann .nav-ch-name { color: var(--accent); }
.nav-ch-manage { color: var(--muted, #9a92ad); font-weight: 700; font-size: 14px; }
.nav-ch-manage .ei { font-size: 18px; }
.nav-ch-load { padding: 10px 14px; color: var(--muted, #9a92ad); font-size: 13px; }

/* 🎧 Lounge-Panel (Video & Audio) oben im Kanal */
.lounge-bar { margin: 0 0 8px; padding: 14px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(177,75,255,.16), rgba(255,77,157,.10)), var(--card); background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 16%, transparent), rgba(255,77,157,.10)), var(--card);
  border: 1px solid var(--line); box-shadow: 0 8px 22px rgba(0,0,0,.28); }
.lounge-top { display: flex; align-items: center; gap: 12px; }
.lounge-ic { width: 44px; height: 44px; border-radius: 13px; flex: none; display: grid; place-items: center; font-size: 24px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 6px 18px var(--brand-glow); }
.lounge-tt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lounge-tt b { font-size: 15.5px; font-weight: 800; }
.lounge-tt span { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.lounge-live { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 12px; min-height: 26px; }
.lounge-live .ll-h { font-size: 12px; font-weight: 800; color: var(--text); margin-right: 2px; }
.lounge-live .ll-av { line-height: 0; }
.lounge-live .ll-av .avatar { width: 30px; height: 30px; }
.lounge-actions { display: flex; gap: 8px; margin-top: 13px; flex-wrap: wrap; }
.lounge-actions .btn { flex: 1; min-width: 120px; }
.lounge-actions .btn.ghost { flex: 1 1 100%; }

/* 🔍 Globale Schnellsuche */
.gs-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.gs-inwrap { flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm, 0 4px 12px rgba(0,0,0,.2)); }
.gs-inwrap:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.gs-mag { font-size: 16px; opacity: .8; }
.gs-input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--text); font-size: 16px; padding: 13px 0; }
.gs-input::placeholder { color: var(--muted-2, #6E6E85); }
.gs-clear { border: 0; background: var(--card-2); color: var(--muted); width: 24px; height: 24px; border-radius: 50%; font-size: 12px; cursor: pointer; flex: none; }
.gs-hint { color: var(--muted); font-size: 14px; text-align: center; padding: 40px 16px; }
.gs-sect { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2, #6E6E85); margin: 16px 4px 7px; }
.gs-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line); margin-bottom: 7px; color: var(--text); }
.gs-row:active { transform: scale(.99); background: var(--card-2); }
.gs-ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; font-size: 20px;
  background: var(--card-2); border-radius: 11px; }
.gs-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gs-mid b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-mid span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-go { color: var(--muted-2, #6E6E85); font-size: 20px; flex: none; }

/* 🏆 PK-Ergebnis-Badges + Bilanz-Rang */
.badge.pk-win  { background: rgba(55,224,200,.18); color: #6ff0da; border: 1px solid rgba(55,224,200,.42); }
.badge.pk-loss { background: rgba(255,90,120,.16); color: #ff8fa3; border: 1px solid rgba(255,90,120,.4); }
.badge.pk-draw { background: rgba(154,154,176,.16); color: #c8c8d8; border: 1px solid rgba(154,154,176,.35); }

/* 👋 Einladung zur Fidolin-Tour (Startseite) */
.tour-invite { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 10px;
  border-radius: 16px; color: var(--text); border: 1px solid rgba(177,75,255,.34); border: 1px solid color-mix(in srgb, var(--brand) 34%, transparent);
  background: linear-gradient(150deg, rgba(177,75,255,.20), rgba(255,77,157,.10) 60%), var(--card);
  box-shadow: 0 8px 22px rgba(0,0,0,.28); }
.tour-invite .ti-av { width: 46px; height: 46px; border-radius: 50%; flex: none; object-fit: cover;
  border: 2px solid rgba(255,255,255,.16); }
.tour-invite .ti-mid { flex: 1; min-width: 0; }
.tour-invite .ti-mid b { font-size: 15px; font-weight: 800; display: block; }
/* Darf umbrechen: „Fidolins Rundgang durc…" sah kaputt aus, nicht knapp. */
.tour-invite .ti-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px;
  line-height: 1.35; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tour-invite .ti-go { font-size: 20px; flex: none; margin-right: 14px; }
.tour-invite .ti-x { position: absolute; top: 6px; right: 8px; width: 22px; height: 22px; border: 0; cursor: pointer;
  border-radius: 50%; background: transparent; color: var(--muted-2, #6E6E85); font-size: 12px; line-height: 1; }
.tour-invite .ti-x:active { background: var(--card-2); }

/* 🤖 Fidolin erklärt's – Figur + Tour */
.tour-wrap { display: flex; flex-direction: column; gap: 12px; }
.tour-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 18px 14px 20px; border-radius: 22px;
  background: radial-gradient(320px 220px at 50% 8%, rgba(177,75,255,.22), transparent 70%), var(--card); background: radial-gradient(320px 220px at 50% 8%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%), var(--card);
  border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(0,0,0,.32); }
.fid { width: 168px; height: 172px; flex: none; overflow: visible; }
.fid-shadow { fill: rgba(0,0,0,.42); }
.fid-hair { fill: url(#fidg); }
.fid-face { fill: #EFC6A2; }
.fid-neck { fill: #E0B08C; }
.fid-top { fill: url(#fidtop); }
.fid-brow { fill: none; stroke: #7B2FA6; stroke-width: 3.4; stroke-linecap: round; }
.fid-lash { fill: none; stroke: #241633; stroke-width: 2.6; stroke-linecap: round; }
.fid-cheek { fill: rgba(255,120,150,.34); }
.fid-nose { fill: none; stroke: #C99570; stroke-width: 2.4; stroke-linecap: round; }
.fid-eye { fill: #fff; }
.fid-pupil { fill: #241633; }
.fid-glint { fill: #fff; }
.fid-mouth { fill: #E8536F; transform-box: fill-box; transform-origin: center; }
.fid-band { fill: none; stroke: #2A2A3C; stroke-width: 9; stroke-linecap: round; }
.fid-ear { fill: #2A2A3C; }
.fid-body { transform-box: fill-box; transform-origin: center; animation: fidBob 3.4s ease-in-out infinite; }
.fid-eyes { transform-box: fill-box; transform-origin: center; animation: fidBlink 5s infinite; }
@keyframes fidBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes fidBlink { 0%,93%,100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
/* Mund bewegt sich nur, während wirklich gesprochen wird */
.fid.speaking .fid-mouth { animation: fidTalk .26s ease-in-out infinite alternate; }
@keyframes fidTalk { from { transform: scaleY(.35); } to { transform: scaleY(1.7); } }

.tour-bubble { position: relative; background: var(--card-2); border: 1px solid var(--line); border-radius: 16px;
  padding: 14px 16px; font-size: 15px; line-height: 1.5; color: var(--text); max-width: 100%; }
.tour-bubble::before { content: ''; position: absolute; top: -9px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 16px; height: 16px; background: var(--card-2); border-left: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: 3px; }
.tour-chapter { display: flex; align-items: center; gap: 9px; font-size: 15px; }
.tour-chapter .tc-ic { font-size: 20px; }
.tour-chapter .tc-count { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tour-bar { height: 5px; border-radius: 999px; background: var(--card-2); overflow: hidden; }
.tour-bar span { display: block; height: 100%; border-radius: 999px; transition: width .4s ease;
  background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.tour-ctl { display: flex; align-items: center; gap: 8px; }
.tour-ctl .btn.primary { flex: 1; }
.tour-list { display: flex; flex-direction: column; gap: 6px; }
.tour-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; cursor: pointer;
  padding: 11px 13px; border-radius: 13px; font-size: 14.5px; font-weight: 700; color: var(--text);
  background: var(--card); border: 1px solid var(--line); }
.tour-item .ti-ic { font-size: 18px; flex: none; }
.tour-item .ti-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tour-item.on { border-color: var(--brand); background: linear-gradient(90deg, rgba(177,75,255,.20), transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 20%, transparent), transparent); }
@media (prefers-reduced-motion: reduce) {
  .fid-body, .fid-eyes, .fid.speaking .fid-mouth { animation: none; }
}

/* 🔴 Ein-Tipp-Live auf der Startseite */
.golive-cta { display: flex; align-items: center; gap: 12px; padding: 13px 14px; margin-bottom: 10px;
  border-radius: 16px; border: 1px solid rgba(255,70,100,.3);
  background: linear-gradient(150deg, rgba(140,16,40,.30), var(--card) 62%);
  box-shadow: 0 8px 22px rgba(0,0,0,.28); }
.golive-cta .gl-ic { font-size: 22px; flex: none; }
.golive-cta .gl-mid { flex: 1; min-width: 0; }
.golive-cta .gl-mid b { font-size: 15px; font-weight: 800; display: block; }
.golive-cta .gl-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px;
  line-height: 1.35; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.golive-cta .btn { flex: none; white-space: nowrap; }
.golive-cta.is-live { border-color: rgba(255,60,80,.55); }

/* 🔴 Live gehen: Schritt-Anleitung + Zwischenablage-Knopf */
.lv-steps { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; }
.lv-step { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.lv-step b { color: var(--text); }
.lv-step .n { flex: none; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 800; color: var(--on-brand); margin-top: 1px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 3px 9px var(--brand-glow); }
.btn.lv-paste { font-weight: 800; font-size: 15px; padding: 14px;
  color: var(--text); border: 1.5px dashed rgba(55,224,200,.55);
  background: linear-gradient(160deg, rgba(55,224,200,.14), rgba(177,75,255,.08)); background: linear-gradient(160deg, rgba(55,224,200,.14), color-mix(in srgb, var(--brand) 8%, transparent)); }
.btn.lv-paste:active { transform: scale(.98); filter: brightness(1.12); }

/* ⚔️ VS-Matchup-Karten (High-End) */
.vs-list { display: flex; flex-direction: column; gap: 12px; }
.vs-card { position: relative; display: flex; align-items: stretch; gap: 6px; padding: 20px 12px;
  border-radius: 20px; overflow: hidden; isolation: isolate;
  background: linear-gradient(150deg, rgba(120,12,32,.42), rgba(23,23,35,.96) 55%, rgba(30,16,40,.6));
  border: 1px solid rgba(255,70,100,.28);
  box-shadow: 0 14px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05); }
.vs-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(130px 130px at 20% 42%, rgba(177,75,255,.30), transparent 70%),
              radial-gradient(130px 130px at 80% 58%, rgba(255,77,157,.26), transparent 70%); background: radial-gradient(130px 130px at 20% 42%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 70%),
              radial-gradient(130px 130px at 80% 58%, rgba(255,77,157,.26), transparent 70%); }
.vs-side { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center;
  transition: opacity .35s ease, transform .35s cubic-bezier(.16,.84,.24,1), filter .35s ease; }
.vs-av { position: relative; }
.vs-av .avatar, .vs-av-ph { width: 66px; height: 66px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(255,255,255,.14); box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.vs-av-ph { display: grid; place-items: center; font-size: 26px; font-weight: 800; color: #fff;
  background: linear-gradient(140deg, #3a3a4d, #23233a); }
.vs-crown { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); font-size: 21px;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.55)); }
.vs-name { font-size: 15px; font-weight: 800; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-id { font-size: 11.5px; color: var(--muted); }
.vs-mid { flex: none; width: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; }
.vs-emblem { font-size: 31px; font-weight: 900; letter-spacing: 1px; line-height: 1;
  background: linear-gradient(120deg, var(--brand-2), var(--brand) 60%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 8px rgba(177,75,255,.45)); filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--brand) 45%, transparent)); }
.vs-state { font-size: 11px; font-weight: 800; text-align: center; color: var(--text); line-height: 1.15;
  padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); white-space: nowrap; }

/* 🔴 läuft gerade */
.vs-card.vs-live { border-color: rgba(255,60,80,.6); animation: vsLive 1.8s ease-in-out infinite; }
.vs-card.vs-live .vs-state { background: rgba(255,50,80,.92); border-color: transparent; color: #fff; box-shadow: 0 0 14px rgba(255,50,80,.6); }
@keyframes vsLive { 0%,100% { box-shadow: 0 14px 34px rgba(0,0,0,.42), 0 0 0 rgba(255,50,80,0); } 50% { box-shadow: 0 14px 40px rgba(0,0,0,.42), 0 0 28px rgba(255,50,80,.5); } }

/* 🏆 Ergebnis-Zustände */
.vs-card.vs-win  .vs-state { background: linear-gradient(135deg,#37E0C8,#2ba58f); color: #06231e; border-color: transparent; }
.vs-card.vs-loss .vs-state { background: linear-gradient(135deg,#ff5d7a,#c9384f); color: #fff; border-color: transparent; }
.vs-card.vs-draw .vs-state { background: rgba(154,154,176,.85); color: #14141f; border-color: transparent; }
.vs-side.vs-winner { transform: scale(1.06); }
.vs-side.vs-winner .vs-av .avatar, .vs-side.vs-winner .vs-av-ph { border-color: #ffd76a; box-shadow: 0 0 22px rgba(255,200,60,.55); }
.vs-side.vs-loser { opacity: .42; filter: grayscale(.6); }

@media (prefers-reduced-motion: reduce) { .vs-card.vs-live { animation: none; } }

/* Systemmeldung: „Neu vom Team"-Update-Banner (oben im Feed, bis gelesen) */
#update-banner:empty { display: none; }
.upd-banner { display: flex; align-items: center; gap: 11px; margin: 4px 0 14px; padding: 12px 13px;
  border-radius: 15px; cursor: pointer; color: var(--on-brand); position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--brand), var(--brand-2));
  box-shadow: 0 8px 22px -10px var(--brand-2); animation: updIn .4s cubic-bezier(.2,.9,.3,1.2); }
.upd-banner:active { transform: scale(.99); }
.upd-ic { font-size: 22px; flex: 0 0 auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.upd-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.upd-txt b { font-size: 14px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upd-teaser { font-size: 12px; opacity: .9; line-height: 1.3; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
.upd-more { font-size: 11px; font-weight: 800; opacity: .95; margin-top: 1px; }
.upd-go { flex: 0 0 auto; font-size: 12px; font-weight: 800; padding: 6px 11px; border-radius: 999px;
  background: rgba(255,255,255,.22);
  background: color-mix(in srgb, var(--on-brand) 18%, transparent); white-space: nowrap; }
/* Sitzt AUF der Markenfläche – Schleier und Schrift folgen deshalb der
   Farbwelt, sonst steht Weiß auf Gold. */
.upd-x { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: none; padding: 0;
  background: rgba(255,255,255,.16);
  background: color-mix(in srgb, var(--on-brand) 15%, transparent);
  color: var(--on-brand); font-size: 13px; cursor: pointer; line-height: 28px; }
.upd-x:active { background: rgba(255,255,255,.3); background: color-mix(in srgb, var(--on-brand) 28%, transparent); }
@keyframes updIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* „Legendäre" Buttons/Tap-Targets auf dem Smartphone */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 48px; font-size: 15.5px; }
  .btn.sm { min-height: 40px; }
  .edge-item { min-height: 54px; }
  .conv-row, .lb-row, .slot, .bday { min-height: 52px; }
  .prompt-chip, .feel-chip, .react-chip, .tier-opt, .creact-chip { min-height: 36px; display: inline-flex; align-items: center; }
}
.rel-chip { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 12px; padding: 4px 11px; border-radius: 999px;
  background: rgba(255,77,157,.24); color: #FFC7DE; border: 1px solid rgba(255,77,157,.45); }
.rel-chip.single { background: rgba(46,212,122,.20); color: #9FF0C2; border-color: rgba(46,212,122,.45); }
.rel-chip.complicated { background: rgba(255,176,32,.20); color: #FFDD97; border-color: rgba(255,176,32,.45); }

/* ── Präsenz „gerade aktiv" ── */
.av-wrap { position: relative; display: inline-block; line-height: 0; }
.online-dot { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: #2ED47A;
  border: 2px solid var(--card); box-shadow: 0 0 7px rgba(46,212,122,.85); }
.hero-av .online-dot { width: 18px; height: 18px; border-width: 3px; }
.active-strip .as-av .avatar.sm { border: 2px solid var(--card); }

/* ── PK-Bestenliste ── */
.lb-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line-soft); color: inherit; text-decoration: none; }
.lb-row:first-child { border-top: none; }

/* ── Edler Gradient-Rahmen für markante Container ── */
.card.framed { position: relative; }
.card.framed::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 1;
  background: linear-gradient(135deg, rgba(177,75,255,.75), rgba(255,77,157,.35) 45%, rgba(55,224,200,.6)); background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 75%, transparent), rgba(255,77,157,.35) 45%, rgba(55,224,200,.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

/* ═══ Rich-Composer: Zielgruppe, Farb-Hintergründe ═══ */
.composer .c-head { display: flex; gap: 11px; align-items: center; }
.composer .c-headmid { display: flex; flex-direction: column; gap: 3px; }
.composer .c-name { font-weight: 800; font-size: 14.5px; }
.aud-btn { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.aud-btn .caret { opacity: .7; }
.aud-btn.custom { color: #FF9ED0; border-color: rgba(255,77,157,.4); background: rgba(255,77,157,.1); }
.composer .c-textwrap { margin-top: 11px; border-radius: 14px; transition: background .2s; }
.composer .c-textwrap textarea { width: 100%; border: none; background: transparent; padding: 8px 2px; min-height: 46px; resize: none; color: var(--text); font: inherit; }
.composer .c-textwrap.has-bg { padding: 22px 16px; min-height: 120px; display: grid; place-items: center; box-shadow: inset 0 1px 20px rgba(0,0,0,.25); }
.composer .c-textwrap.has-bg textarea { text-align: center; font-size: 21px; font-weight: 800; color: #fff; min-height: 40px;
  text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.composer .c-textwrap.has-bg textarea::placeholder { color: rgba(255,255,255,.75); }

.bgsw-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.bgsw-aa { font-weight: 900; font-size: 15px; background: linear-gradient(135deg, var(--brand), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-right: 2px; }
.bgsw { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); cursor: pointer; flex: none; transition: transform .12s; }
.bgsw:active { transform: scale(.9); }
.bgsw.off { background: var(--bg-2); }
.bgsw.selected { border-color: var(--card); box-shadow: 0 0 0 2px var(--accent); transform: scale(1.06); }

/* Farb-Text-Beitrag in der Timeline */
.post .post-bg { margin-top: 11px; border-radius: 16px; min-height: 150px; display: grid; place-items: center; padding: 26px 20px; box-shadow: inset 0 1px 24px rgba(0,0,0,.28); }
.post .post-bg .pb-text { color: #fff; font-size: 22px; font-weight: 800; line-height: 1.35; text-align: center; text-shadow: 0 2px 12px rgba(0,0,0,.42); word-break: break-word; }
.post .post-bg .pb-text a { color: #fff; text-decoration: underline; }
.vis-badge { margin-left: 7px; opacity: .8; font-size: 12px; }

/* Zielgruppen-Sheet */
.aud-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; margin-bottom: 8px;
  border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); cursor: pointer; }
.aud-opt.static { cursor: default; }
.aud-opt.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.aud-opt .ao-ic { font-size: 20px; flex: none; }
.au-list { max-height: 46vh; overflow-y: auto; margin: 0 -4px; }
.au-row { display: flex; align-items: center; gap: 11px; padding: 9px 4px; border-top: 1px solid var(--line-soft); cursor: pointer; }
.au-row .au-mid { flex: 1; min-width: 0; }
.au-row .au-cb { width: 22px; height: 22px; accent-color: var(--accent); flex: none; }

/* ═══ Anrufe (WebRTC) — Overlay ═══ */
.call-btn { margin-left: 2px; font-size: 17px; }
.chat-head .call-btn:last-child { margin-right: 2px; }
#rtc-overlay.rtc { position: fixed; inset: 0; z-index: 4000; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: #fff; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #241633, #0b0b12 70%); animation: rtcIn .25s ease; }
@keyframes rtcIn { from { opacity: 0; } to { opacity: 1; } }

.rtc .rtc-glow { position: absolute; top: 14%; width: 320px; height: 320px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(177,75,255,.5), transparent 65%); background: radial-gradient(circle, color-mix(in srgb, var(--brand) 50%, transparent), transparent 65%); filter: blur(20px); animation: rtcPulse 2.4s ease-in-out infinite; }
@keyframes rtcPulse { 0%,100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.15); opacity: 1; } }

.rtc-peer { display: flex; flex-direction: column; align-items: center; gap: 14px; z-index: 1; text-align: center; padding: 0 24px; }
.rtc-av { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,.22);
  box-shadow: 0 12px 48px rgba(0,0,0,.5); }
.rtc-av-ph { display: grid; place-items: center; font-size: 52px; font-weight: 800;
  background: var(--grad); color: var(--on-brand); }
.rtc-name.big { font-size: 26px; font-weight: 800; }
.rtc-sub { font-size: 15px; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; }

/* left/right sind hier keine Feinheit, sondern tragend: Ohne sie wird die
   absolut gesetzte Leiste von ihrem INHALT breit gemacht. Folge bisher:
   `justify-content:center` lief ins Leere (die Leiste klebte auch am Rechner
   linksbuendig bei left:0), und auf dem Handy schob sie sich mit 738px aus
   dem Bild - Aufnahme und Auflegen waren nicht erreichbar. Schlimmer noch:
   der Ueberlauf machte den Anzeigebereich selbst 738px breit, weshalb keine
   @media-Regel fuer schmale Schirme mehr greifen konnte. */
.rtc-actions, .rtc-controls { display: flex; gap: 30px; align-items: center; justify-content: center; z-index: 2;
  position: absolute; left: 0; right: 0; flex-wrap: wrap;
  bottom: calc(var(--safe-bottom, 0px) + 46px); }
.rtc.video .rtc-controls { bottom: calc(var(--safe-bottom, 0px) + 34px); }
.rtc-ctl { width: 66px; height: 66px; border-radius: 50%; border: none; cursor: pointer; font-size: 26px;
  display: grid; place-items: center; background: rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(6px);
  transition: transform .12s, background .15s; }
.rtc-ctl:active { transform: scale(.9); }
.rtc-ctl.off { background: #fff; color: #12121c; }
.rtc-ctl.accept { background: #22C55E; box-shadow: 0 8px 28px rgba(34,197,94,.5); animation: rtcBob 1.1s ease-in-out infinite; }
.rtc-ctl.decline, .rtc-ctl.hang { background: #FF3B49; box-shadow: 0 8px 28px rgba(255,59,73,.45); }
@keyframes rtcBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Die Leiste steht absolut, aber OHNE left/right - sie wird also von ihrem
   Inhalt breit gemacht. Bei acht Knoepfen sind das 738px; auf einem iPhone
   lagen Aufnahme und Auflegen ausserhalb des Bildes. Gemessen: nur vier von
   acht Knoepfen waren erreichbar. Ab hier darf sie umbrechen. Der Rechner
   bleibt unangetastet - dort greift die Regel nicht. */
/* 780 und nicht 560: In voller Groesse braucht die Leiste 758px. Zwischen
   561 und 758 waere sie sonst umgebrochen, ohne dass die kleineren
   Knoepfe greifen - genau das kaputte Band. Ab 781px bleibt der Rechner
   exakt wie er war. */
@media (max-width: 780px) {
  .rtc-actions, .rtc-controls {
    left: 0; right: 0; flex-wrap: wrap; gap: 12px 14px; padding: 0 10px;
  }
  .rtc-ctl { width: 56px; height: 56px; font-size: 22px; }
  /* Auflegen bricht nie in eine eigene Zeile ab, wo man es sucht. */
  .rtc-ctl.hang { order: 99; }
  /* Auflegen laesst sich nicht zurueckholen. Etwas Abstand davor, damit
     der Daumen es nicht mit dem Aufnahme-Stopp daneben verwechselt. */
  .rtc-controls .rtc-ctl.hang { margin-left: 20px; }
}

/* Die Aufnahme ist der Beleg fuer ihre Einwilligung - sie darf nicht
   aussehen wie "Hand heben". Laufend: rot und pulsend, nicht zu uebersehen.
   Rot ist hier bewusst gesetzt, wie beim Auflegen: ein Zustand, den man
   sofort erkennen muss. */
.rtc-ctl.rec-an {
  background: #FF3B49; color: #fff;
  box-shadow: 0 8px 28px rgba(255,59,73,.45);
  animation: recPuls 1.6s ease-in-out infinite;
}
@keyframes recPuls {
  0%, 100% { box-shadow: 0 8px 28px rgba(255,59,73,.45); }
  50%      { box-shadow: 0 8px 34px rgba(255,59,73,.85); }
}
@media (prefers-reduced-motion: reduce) {
  .rtc-ctl.rec-an { animation: none; }
}
/* Wie lange laeuft sie schon? Ohne das weiss niemand, ob 20 Sekunden oder
   20 Minuten aufgezeichnet werden. */
.rec-uhr {
  position: absolute; z-index: 3;
  top: calc(var(--safe-top, 0px) + 74px); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 10px; border-radius: 999px;
  background: rgba(255,59,73,.92); color: #fff;
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
}
.rec-uhr::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%; background: #fff;
  animation: recPunkt 1.6s ease-in-out infinite;
}
@keyframes recPunkt { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .rec-uhr::before { animation: none; }
}

/* Video-Ansicht */
.rtc.video { background: #05050a; }
.rtc-topbar { position: absolute; top: calc(var(--safe-top, 0px) + 16px); left: 16px; z-index: 3; display: flex;
  flex-direction: column; gap: 3px; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.rtc-topbar .rtc-name { font-size: 19px; font-weight: 800; }
.rtc-topbar .rtc-dur { font-size: 13px; color: rgba(255,255,255,.8); font-variant-numeric: tabular-nums; }

/* 📖 Der Vorlese-Text zum Mitlesen (Prüfer-Seite) */
.aud-skript { margin-top: 12px; padding: 14px; border-radius: 14px;
  background: var(--card-2); border: 1px solid var(--line-soft);
  white-space: pre-wrap; font-size: 15.5px; line-height: 1.8;
  max-height: 52vh; overflow-y: auto; }

/* 🗂️ Protokoll nach Monaten */
.mon { border-top: 1px solid var(--line-soft); }
.mon:first-child { border-top: 0; }
.mon > summary { list-style: none; cursor: pointer; padding: 10px 2px;
  display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.mon > summary::-webkit-details-marker { display: none; }
.mon > summary::after { content: '▾'; margin-left: auto; opacity: .5;
  transition: transform .18s; }
.mon[open] > summary::after { transform: rotate(180deg); }
.mon-zahl { font-size: 11.5px; font-weight: 800; color: var(--muted);
  background: var(--card-2); border-radius: 999px; padding: 2px 9px;
  font-variant-numeric: tabular-nums; }
.mon[open] > summary { border-bottom: 1px solid var(--line-soft); }

/* 🎬 Audition-Aufnahmen: abspielen und herunterladen */
.aud-aufn { margin-top: 4px; }
.aufn-karte { margin-top: 10px; border: 1px solid var(--line-soft); border-radius: 14px;
  overflow: hidden; background: var(--card-2); }
.aufn-karte video { width: 100%; display: block; background: #05050a; max-height: 46vh; }
.aufn-fuss { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 11px; }

/* 👥 Gruppenanruf – Kachel-Raster */
.rtc.group { justify-content: flex-start; }
.rtc-grid { position: absolute; inset: calc(var(--safe-top,0px) + 60px) 10px calc(var(--safe-bottom,0px) + 110px) 10px;
  display: grid; gap: 8px; z-index: 1; }
/* Diese beiden Regeln muessen HINTER .rtc-grid und .rec-uhr stehen:
   .rtc-grid setzt sein bottom ueber die Kurzform `inset`, und bei
   gleicher Spezifitaet gewinnt die spaetere Regel. Weiter oben im
   @media-Block waeren sie wirkungslos gewesen. */
@media (max-width: 780px) {
  /* Zwei Reihen Knoepfe brauchen mehr Platz als eine - sonst liegt die
     Leiste auf dem Bild der Bewerberin. Gemessen waren es 48px. */
  .rtc-grid { bottom: calc(var(--safe-bottom, 0px) + 184px); }
  /* Die Uhr steht links UNTER der Ueberschrift: mittig traefe sie den
     Titel, rechts die kleinen Kacheln der Pruefer. Der Titel endet bei
     rund 66px, die Uhr beginnt bei 74px. */
  .rec-uhr { left: 12px; right: auto; transform: none; }
}
.rtc-grid.g1, .rtc-grid.g2 { grid-template-columns: 1fr; }
/* Zu zweit: der andere gross, man selbst klein in der Ecke.
   Vorher waren es zwei Zeilen - auf einem breiten Bildschirm ergab das zwei
   5:1-Streifen, und object-fit:cover schnitt von den Gesichtern alles ausser
   Stirn und Augen weg. Bei einer Audition schaut man auf die Bewerberin; das
   eigene Bild ist nur zur Kontrolle da. */
.rtc-grid.g2 { grid-template-rows: 1fr; place-items: center; }
/* Quadratisch und mittig statt volle Breite: Ein Mensch passt schlecht in
   einen Breitwand-Streifen. */
.rtc-grid.g2 .rtc-tile:not(.self) {
  aspect-ratio: 1 / 1; height: 100%; width: auto; max-width: 100%; margin: 0 auto;
}
/* Sie kommt vom Handy, also im Hochformat. Mit cover schnitt das Bild oben und
   unten weg - man sah nur noch den Kopf. Bei einer Audition will man den
   Oberkoerper sehen: Haltung, Haende, ob jemand einen Ausweis hochhaelt.
   Lieber zwei schwarze Streifen als ein angeschnittener Mensch. */
.rtc-grid.g2 .rtc-tile:not(.self) .rtc-tile-v { object-fit: contain; }
.rtc-grid.g2 .rtc-tile.self {
  position: absolute; right: 10px; bottom: 10px;
  width: min(26%, 200px); aspect-ratio: 4 / 3; height: auto; min-height: 0;
  z-index: 2; border-radius: 14px; box-shadow: 0 8px 26px rgba(0,0,0,.55);
}
/* Auf dem Handy waere ein Viertel der Breite zu klein zum Erkennen. */
@media (max-width: 560px) {
  .rtc-grid.g2 .rtc-tile.self { width: 34%; right: 8px; bottom: 8px; }
}
.rtc-grid.g3, .rtc-grid.g4 { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
.rtc-tile { position: relative; border-radius: 16px; overflow: hidden; background: #12121c;
  border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; min-height: 120px; }
.rtc-tile.self { border-color: rgba(177,75,255,.5); border-color: color-mix(in srgb, var(--brand) 50%, transparent); border-color: color-mix(in srgb, var(--brand) 50%, transparent); }
.rtc-tile-v { width: 100%; height: 100%; object-fit: cover; background: #05050a; }
.rtc-tile-av { display: grid; place-items: center; width: 100%; height: 100%;
  background: radial-gradient(circle at 50% 40%, rgba(177,75,255,.18), #12121c 72%); background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--brand) 18%, transparent), #12121c 72%); }
.rtc-tile-av .rtc-av { width: 84px; height: 84px; }
.rtc-tile-n { position: absolute; left: 8px; bottom: 8px; font-size: 13px; font-weight: 700;
  background: rgba(0,0,0,.55); padding: 3px 9px; border-radius: 999px; max-width: 80%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.rtc-tile-st { position: absolute; top: 8px; left: 8px; font-size: 11px; color: rgba(255,255,255,.8);
  background: rgba(0,0,0,.5); padding: 2px 8px; border-radius: 999px; }
.rtc-kick { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%;
  border: none; cursor: pointer; background: rgba(255,59,73,.9); color: #fff; font-size: 13px; font-weight: 800;
  display: grid; place-items: center; }
.rtc-ctl.add { background: var(--grad); box-shadow: 0 8px 24px var(--brand-glow); }

/* ═══ Audition: SIE gross, wir alle klein und quadratisch in ihrem Bild ═══
   Ein Raster, in dem alle gleich gross sind, lenkt vom Wesentlichen ab -
   der Pruefer schaut auf ihr Gesicht. Sie fuellt also die Flaeche, und wir
   stehen als kleine Quadrate darin, gestapelt ueber `--i`.
   MUSS hinter den .rtc-grid.gN-Regeln stehen: gleiche Spezifitaet, die
   spaetere gewinnt. */
.rtc-grid.audition { display: block; }
.rtc-grid.audition .rtc-tile.bewerberin {
  position: absolute; inset: 0; width: auto; height: auto;
  max-width: none; margin: 0; aspect-ratio: auto; border-radius: 14px;
}
/* Ihr Bild kommt hochkant vom Handy. `contain` statt `cover`: lieber zwei
   schwarze Streifen als ein angeschnittener Mensch - man will den
   Oberkoerper sehen, Haltung, Haende, den hochgehaltenen Ausweis. */
.rtc-grid.audition .rtc-tile.bewerberin .rtc-tile-v { object-fit: contain; }
.rtc-grid.audition .rtc-tile.klein {
  position: absolute; right: 10px; top: calc(10px + var(--i, 0) * 114px);
  width: 104px; height: auto; aspect-ratio: 1 / 1; min-height: 0;
  max-width: none; margin: 0; bottom: auto; left: auto;
  z-index: 2; border-radius: 13px;
  border: 2px solid rgba(255,255,255,.5);
  box-shadow: 0 6px 20px rgba(0,0,0,.55);
}
/* Quadratisch heisst: das Gesicht fuellt das Quadrat, nicht Balken drumherum. */
.rtc-grid.audition .rtc-tile.klein .rtc-tile-v { object-fit: cover; }
.rtc-grid.audition .rtc-tile.klein .rtc-tile-n { font-size: 11px; left: 5px; bottom: 5px; padding: 2px 7px; }
.rtc-grid.audition .rtc-tile.klein .rtc-tile-st { font-size: 10px; top: 5px; left: 5px; padding: 1px 6px; }
.rtc-grid.audition .rtc-tile.klein .rtc-kick { width: 21px; height: 21px; font-size: 11px; top: 4px; right: 4px; }
@media (max-width: 780px) {
  .rtc-grid.audition .rtc-tile.klein {
    width: 84px; top: calc(10px + var(--i, 0) * 92px);
  }
}

/* ═══ Marken-Emblem (4ever1.tv) statt Schwerter ═══ */
.topbar .brand .brand-logo { height: 30px; width: auto; display: block; filter: drop-shadow(0 1px 5px rgba(0,0,0,.55)); }
.auth-logo .mark-logo { width: min(280px, 74vw); height: auto; margin: 0 auto 14px; display: block;
  filter: drop-shadow(0 6px 22px rgba(201,162,39,.4)); animation: floaty 4.5s ease-in-out infinite; }
.nh-logo-img { width: min(300px, 80vw); height: auto; margin: 2px auto 16px; display: block;
  filter: drop-shadow(0 10px 34px rgba(255,206,84,.45));
  animation: floaty 5s ease-in-out infinite, rgbLauf 9s linear infinite; }
.edge-panel .ep-head .ep-logo { height: 30px; width: auto; display: block; filter: drop-shadow(0 1px 4px rgba(0,0,0,.5)); }

/* ═══ Gelesen-Markierung + anonyme Admin-Posts ═══ */
.c-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.aud-btn.on { color: #12121c; background: var(--accent); border-color: var(--accent); font-weight: 800; }

.new-badge { display: inline-block; margin-left: 7px; padding: 2px 8px; border-radius: 999px; font-size: 10px;
  font-weight: 900; letter-spacing: .4px; color: var(--on-brand); background: linear-gradient(135deg, var(--brand), var(--brand-2));
  vertical-align: middle; cursor: pointer; animation: newPulse 1.8s ease-in-out infinite; }
@keyframes newPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.post.unread { position: relative; }
.post.unread::after { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px;
  background: linear-gradient(var(--accent), var(--brand)); }

.avatar.ph.mask { background: linear-gradient(135deg,#2a2a3c,#12121c); }
.anon-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px;
  font-weight: 800; color: var(--muted); border: 1px solid var(--line); background: var(--bg-2); vertical-align: middle; }
.post.admin-anon { border-color: rgba(154,154,176,.25); }

/* ═══ „Was ist neu" – Team-Posts (rötlich) ═══ */
.team-post { position: relative; overflow: hidden;
  background: linear-gradient(160deg, rgba(255,74,90,.16), rgba(255,74,90,.05) 55%, var(--card));
  border: 1px solid rgba(255,90,90,.32); }
.team-post::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(#FF5A5A, #FF4D9D); }
.team-post .tp-flag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800;
  letter-spacing: .3px; color: #FFB4B4; text-transform: uppercase; margin-bottom: 8px; }
.team-post .tp-title { font-size: 18px; font-weight: 800; margin: 2px 0 6px; }
.team-post .tp-body { font-size: 15px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.team-post .tp-img { margin-top: 11px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-soft); }
.team-post .tp-img img { width: 100%; display: block; }
.team-post .tp-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(255,90,90,.18); font-size: 12.5px; color: var(--muted); }
.team-post .tp-by { font-weight: 700; color: var(--text); }
.team-post.unread { box-shadow: 0 0 0 1px rgba(255,90,90,.35), 0 8px 30px rgba(255,74,90,.15); }

/* ═══ Team-Post Farben (rot/orange/gelb/grün) + Event-Paarungen ═══ */
.team-post.c-red    { --tpc: 255,90,90; }
.team-post.c-orange { --tpc: 255,154,60; }
.team-post.c-yellow { --tpc: 255,200,60; }
.team-post.c-green  { --tpc: 53,208,127; }
.team-post { background: linear-gradient(160deg, rgba(var(--tpc,255,90,90),.16), rgba(var(--tpc,255,90,90),.05) 55%, var(--card));
  border-color: rgba(var(--tpc,255,90,90),.32); }
.team-post::before { background: linear-gradient(rgb(var(--tpc,255,90,90)), rgba(var(--tpc,255,90,90),.55)); }
.team-post .tp-flag { color: rgb(var(--tpc,255,90,90)); }
.team-post .tp-foot { border-top-color: rgba(var(--tpc,255,90,90),.18); }
.team-post.unread { box-shadow: 0 0 0 1px rgba(var(--tpc,255,90,90),.35), 0 8px 30px rgba(var(--tpc,255,90,90),.15); }

/* Reaktionen + Kommentare unter „Was ist neu"-Posts */
.team-post .tp-social { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; position: relative;
  margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(var(--tpc,255,90,90),.18); }
.team-post .tp-comments { margin-top: 6px; }
.team-post .tp-ack { display: block; width: 100%; margin-top: 12px; font-weight: 800;
  background: rgb(var(--tpc,255,90,90)); color: #fff; border: none; }
.team-post .tp-ack:active { transform: scale(.98); }
/* Fidolins Moderations-Hinweis + Vorlagen-Chips */
.cmt-templates { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 4px; }
.cmt-tpl { font-size: 13px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  background: var(--chip, rgba(255,255,255,.06)); border: 1px solid var(--line-soft); color: var(--text);
  transition: transform .08s ease, background .15s ease; }
.cmt-tpl:hover { background: rgba(124,140,255,.16); }
.cmt-tpl:active { transform: scale(.96); }
.cmt-modnote { margin: 8px 0 2px; padding: 10px 13px; border-radius: 13px; font-size: 13.5px; line-height: 1.45;
  background: rgba(124,92,255,.12); border: 1px solid rgba(124,92,255,.4); color: var(--text); }
.cmt-modnote .mod-fido { font-weight: 800; color: #b39dff; margin-right: 4px; }

/* VS-Banner */
.tp-matches { margin-top: 12px; border-radius: 13px; padding: 10px 13px; background: rgba(0,0,0,.28);
  border: 1px solid rgba(var(--tpc,255,90,90),.28); }
.tp-matches-h { font-size: 11px; font-weight: 800; letter-spacing: .4px; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; }
.tp-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.tp-vs:first-of-type { border-top: none; }
.tp-vs .vid { font-weight: 800; font-size: 15.5px; word-break: break-word; }
.tp-vs .vid:first-child { text-align: right; }
.tp-vs .vs { font-size: 11px; font-weight: 900; color: var(--on-brand); background: var(--grad);
  padding: 3px 9px; border-radius: 999px; }

/* Farb-Auswahl im Admin-Formular */
.tp-colors { display: flex; gap: 8px; flex-wrap: wrap; }
.tp-color { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2);
  color: var(--text); font-weight: 700; font-size: 13px; cursor: pointer; }
.tp-color.c-red{--tpc:255,90,90;} .tp-color.c-orange{--tpc:255,154,60;} .tp-color.c-yellow{--tpc:255,200,60;} .tp-color.c-green{--tpc:53,208,127;}
.tp-color.sel { border-color: rgb(var(--tpc)); box-shadow: 0 0 0 1px rgb(var(--tpc)); background: rgba(var(--tpc),.12); }

/* Paarungs-Baukasten */
.tp-mrow { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 8px; margin-bottom: 8px; }
.tp-mrow input { width: 100%; background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 9px 11px; font: inherit; }
.tp-mvs { font-size: 11px; font-weight: 900; color: var(--muted); }
.tp-count.soon { animation: newPulse 1.4s ease-in-out infinite; }
.tp-count.live { background: rgba(255,59,73,.28); border-color: #FF3B49; }
.tp-count.past { opacity: .55; }

.tp-match { padding: 8px 0; border-top: 1px solid var(--line-soft); }
.tp-match:first-of-type { border-top: none; }
.tp-match .tp-vs { border-top: none; padding: 2px 0; }
.tp-match.first { background: rgba(255,216,77,.06); border-radius: 10px; padding: 8px 8px; margin: 0 -8px; }

/* Dunkler nativer Datums-Picker */
.field input[type="datetime-local"] { color-scheme: dark; }

/* ═══ Match-Karte (Spielplan-Stil) + segmentierter Timer ═══ */
.tp-match2 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 12px 0 6px;
  padding: 16px 14px; border-radius: 14px; background: rgba(0,0,0,.28); border: 1px solid rgba(var(--tpc,255,90,90),.28); }
.tp-match2 .tm-side { text-align: center; min-width: 0; }
.tp-match2 .tm-id { font-size: 18px; font-weight: 900; word-break: break-word; }
.tp-match2 .tm-vs { font-size: 12px; font-weight: 900; color: var(--on-brand); background: var(--grad);
  padding: 6px 11px; border-radius: 999px; }
.tm-kick { text-align: center; color: var(--muted); font-weight: 700; font-size: 13.5px; margin: 2px 0 8px; }

.tp-timer { display: flex; gap: 8px; justify-content: center; margin: 4px 0 6px; flex-wrap: wrap; }
.tp-timer .seg { min-width: 58px; padding: 8px 6px; border-radius: 12px; text-align: center;
  background: rgba(var(--tpc,255,90,90),.16); border: 1px solid rgba(var(--tpc,255,90,90),.4); }
.tp-timer .seg b { display: block; font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tp-timer .seg span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.tp-timer.soon .seg { border-color: #FF3B49; }
.tp-timer .tp-status { font-weight: 800; font-size: 15px; padding: 9px 16px; border-radius: 12px;
  background: rgba(var(--tpc,255,90,90),.18); border: 1px solid rgba(var(--tpc,255,90,90),.45); }
.tp-timer.live .tp-status { color: #fff; background: rgba(255,59,73,.28); border-color: #FF3B49; animation: newPulse 1.3s ease-in-out infinite; }
.tp-timer.past .tp-status { opacity: .6; }

/* „Als Nächstes dran" */
.tp-nextslot:empty { display: none; }
.tp-nextbadge { display: inline-block; margin-bottom: 9px; font-size: 11px; font-weight: 900; letter-spacing: .4px;
  color: #12121c; background: linear-gradient(135deg,#FFD84D,#FF9A3C); padding: 3px 11px; border-radius: 999px; }
.team-post.next-event { box-shadow: 0 0 0 2px rgba(255,216,77,.5), 0 10px 34px rgba(255,154,60,.2); }

/* Match-Baukasten (Admin) */
.tp-mrow2 { padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); margin-bottom: 10px; }
.tp-mrow2 .tp-mvs { font-size: 11px; font-weight: 900; color: var(--muted); text-align: center; }
.tp-mbottom { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.tp-mbottom .tp-mat { flex: 1; background: var(--card); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 9px 11px; font: inherit; color-scheme: dark; }

/* ═══ Auffälliger „Zum Startbildschirm"-Hinweis nach Login ═══ */
.ih-backdrop { position: fixed; inset: 0; z-index: 3500; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(6,6,12,.74); backdrop-filter: blur(5px); opacity: 0; transition: opacity .26s;
  padding: 0 12px calc(var(--safe-bottom,0px) + 14px); }
.ih-backdrop.show { opacity: 1; }
.ih-card { position: relative; width: 100%; max-width: 440px; text-align: center;
  background: linear-gradient(165deg, #1d1233 0%, #12121c 70%); border: 1px solid var(--line);
  border-radius: 24px; padding: 26px 22px 18px; transform: translateY(30px);
  transition: transform .32s cubic-bezier(.2,.85,.25,1); box-shadow: 0 -12px 70px var(--brand-glow); }
.ih-backdrop.show .ih-card { transform: translateY(0); }
.ih-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(135deg, rgba(177,75,255,.8), rgba(255,77,157,.4) 50%, rgba(55,224,200,.7)); background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 80%, transparent), rgba(255,77,157,.4) 50%, rgba(55,224,200,.7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.ih-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.1); color: var(--text); font-size: 15px; cursor: pointer; }
.ih-logo { width: min(210px, 62vw); height: auto; margin: 4px auto 8px; display: block;
  filter: drop-shadow(0 8px 26px rgba(177,75,255,.45)); filter: drop-shadow(0 8px 26px color-mix(in srgb, var(--brand) 45%, transparent)); }
.ih-badge { display: inline-block; font-size: 11px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase;
  color: var(--on-brand); background: var(--grad); padding: 4px 12px; border-radius: 999px; }
.ih-title { font-size: 22px; font-weight: 900; line-height: 1.25; margin: 10px 0 16px; }
.ih-benefits { list-style: none; text-align: left; display: grid; gap: 11px; margin: 0 0 18px; padding: 0 6px; }
.ih-benefits li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 600; }
.ih-benefits li span { font-size: 19px; flex: none; }
.ih-later { margin-top: 8px; background: none; border: none; color: var(--muted); font-size: 14px; padding: 9px; cursor: pointer; width: 100%; }

/* Benachrichtigungs-Zeile + „ausblenden?"-Rückfrage im Install-Hero */
.ih-notif { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left;
  margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid var(--line-soft); }
.ih-notif > div:first-child { min-width: 0; }
.ih-confirm { text-align: center; padding: 8px 4px 4px; }
.ih-cface { font-size: 44px; margin-bottom: 6px; }
.ih-csub { color: var(--muted); font-size: 14px; margin: 6px 0 18px; }

/* ═══ Spiele-Hub ═══ */
.game-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.game-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
  padding: 20px 12px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.game-card .gc-ic { font-size: 30px; }
.game-card .gc-name { font-weight: 800; font-size: 15px; }
.game-card .gc-sub { font-size: 11.5px; color: var(--muted); }
.game-card .gc-go { margin-top: 4px; font-size: 12.5px; font-weight: 800; color: var(--accent); }
.game-card.soon { opacity: .55; }
.game-card .gc-badge { position: absolute; top: 8px; right: 8px; font-size: 9.5px; font-weight: 900; letter-spacing: .4px;
  text-transform: uppercase; color: #12121c; background: linear-gradient(135deg,#FFD84D,#FF9A3C); padding: 2px 8px; border-radius: 999px; }

/* Schere-Stein-Papier */
.rps-arena { margin-top: 14px; text-align: center; }
.rps-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 6px 0 4px; }
.rps-hand { font-size: 62px; line-height: 1; }
.rps-hand#rps-cpu { transform: scaleX(-1); }
.rps-hand.shake { animation: rpsShake .35s ease-in-out infinite; }
@keyframes rpsShake { 0%,100% { transform: translateY(0) scaleX(-1); } 50% { transform: translateY(-14px) scaleX(-1); } }
.rps-mid { font-size: 13px; font-weight: 900; color: var(--on-brand); background: var(--grad); padding: 5px 11px; border-radius: 999px; }
.rps-result { font-size: 20px; font-weight: 900; margin: 8px 0 14px; min-height: 26px; }
.rps-result.win { color: #35D07F; } .rps-result.loss { color: #FF5A5A; } .rps-result.draw { color: var(--muted); }
.rps-picks { display: flex; justify-content: center; gap: 14px; }
.rps-pick { width: 76px; height: 76px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg-2);
  font-size: 38px; cursor: pointer; transition: transform .12s, border-color .15s; }
.rps-pick:active { transform: scale(.9); }
.rps-pick:hover { border-color: var(--accent); }
.rps-pick:disabled { opacity: .5; }

.rps-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 14px 0; }
.rps-stat { text-align: center; padding: 12px 6px; border-radius: 14px; background: var(--card); border: 1px solid var(--line-soft); }
.rps-stat b { display: block; font-size: 26px; font-weight: 900; }
.rps-stat span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.rps-stat.win b { color: #35D07F; } .rps-stat.loss b { color: #FF5A5A; } .rps-stat.draw b { color: var(--muted); }

/* Spiele-Bestenliste */
.lb-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.lb-row:first-child { border-top: none; }
.lb-pos { width: 30px; text-align: center; font-size: 20px; flex: none; }
.lb-pos .lb-rank { font-size: 14px; font-weight: 800; color: var(--muted); }
.lb-mid { flex: 1; min-width: 0; }
.lb-score { text-align: right; flex: none; }
.lb-score b { display: block; font-size: 18px; font-weight: 900; color: var(--accent); }
.lb-score span { font-size: 10px; color: var(--muted); text-transform: uppercase; }

/* ═══ „Gerade online"-Strip (Engagement) ═══ */
.online-strip { margin-top: 14px; padding: 13px 14px; border-radius: 16px; background: var(--card); }
.os-head { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 7px; margin-bottom: 11px; }
.os-head b { color: var(--text); }
.os-dot { width: 9px; height: 9px; border-radius: 50%; background: #35D07F; box-shadow: 0 0 0 0 rgba(53,208,127,.6);
  animation: osPulse 2s infinite; flex: none; }
@keyframes osPulse { 0% { box-shadow: 0 0 0 0 rgba(53,208,127,.5); } 70% { box-shadow: 0 0 0 8px rgba(53,208,127,0); } 100% { box-shadow: 0 0 0 0 rgba(53,208,127,0); } }
.os-avatars { display: flex; flex-wrap: wrap; gap: 8px; }
.os-av { display: flex; align-items: center; gap: 9px; max-width: 100%; text-decoration: none;
  background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 999px; padding: 5px 14px 5px 5px; }
.os-av:active { background: var(--card-2); }
.os-av .os-ava { position: relative; flex: 0 0 auto; }
.os-av .os-ava .avatar { width: 34px; height: 34px; font-size: 14px; }
.os-txt { display: flex; flex-direction: column; min-width: 0; }
.os-av .os-name { font-size: 13.5px; font-weight: 600; color: var(--text); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-playic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 17px;
  background: linear-gradient(135deg, var(--brand), var(--accent)); }

/* ═══ Push-Einstellungen (pro Kategorie) ═══ */
.np-list { margin-top: 8px; }
.np-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 2px;
  border-top: 1px solid var(--line-soft); font-size: 14.5px; font-weight: 600; cursor: pointer; }
.np-row:first-child { border-top: none; }
.np-cb { width: 24px; height: 24px; accent-color: var(--accent); flex: none; cursor: pointer; }

/* ═══ Team-Chat: Gruppen-Sprechblasen ═══ */
.chat-msgs .msg-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 78%; }
.chat-msgs .msg-name { font-size: 11.5px; font-weight: 800; color: var(--muted); margin-left: 4px; }
.chat-msgs .msg-col .bubble { max-width: 100%; }
.ch-img { max-width: 220px; width: 100%; border-radius: 12px; display: block; margin-bottom: 4px; }
.ch-txt { white-space: pre-wrap; word-break: break-word; }
.story-ring.seen { background: var(--line); }
.story-ring.add { background: var(--line); }
.story-ring .avatar { border: 2.5px solid var(--bg); }
.sv-bar span.done { width: 100%; }
@keyframes svFill { from { width: 0; } to { width: 100%; } }
.sv-stage.text { padding: 40px 26px; }
.sv-stage.text .sv-text { position: static; font-size: 26px; font-weight: 800; text-align: center; }
.sv-nav.left { left: 0; } .sv-nav.right { right: 0; width: 60%; }
.sa-prev { margin-top: 10px; border-radius: 14px; overflow: hidden; }
.sa-prev img { width: 100%; display: block; }
.lc-bar { margin-top: 11px; height: 10px; border-radius: 999px; background: var(--bg-2); overflow: hidden; border: 1px solid var(--line-soft); }
/* War fest goldverdrahtet (#FFF7D6 → #A96E05) – ein Rest aus der Gold-Zeit.
   In der violetten App standen dadurch goldene Balken in der Rangliste,
   und in jeder anderen Farbwelt passten sie erst recht nicht. Jetzt
   nimmt der Balken die Marke – und fließt leise, wie der große auf der
   Rang-Seite. */
.lc-bar span { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(100deg, var(--brand), var(--brand-2), var(--accent), var(--brand-2), var(--brand));
  background-size: 260% 100%; animation: rgFliessen 7s linear infinite; transition: width .5s ease; }
.lc-bar.sm { height: 6px; margin-top: 6px; }
.lb-list { max-height: 62vh; overflow-y: auto; margin: 0 -4px; }

/* ═══ Tier-Ring am Avatar: nur der Ring, kein gefülltes Quadrat dahinter ═══ */
.avatar-edit.tier-bronze, .avatar-edit.tier-silber,
.avatar-edit.tier-gold, .avatar-edit.tier-platin { background: transparent; border-radius: 50%; }
.avatar-edit.tier-bronze { box-shadow: 0 0 22px rgba(140,90,43,.4); }
.avatar-edit.tier-silber { box-shadow: 0 0 22px rgba(159,184,196,.4); }
.avatar-edit.tier-gold   { box-shadow: 0 0 24px rgba(201,154,30,.45); }
.avatar-edit.tier-platin { box-shadow: 0 0 26px rgba(159,184,196,.5); }
/* Ring etwas kräftiger + sauberer Abstand zum Bild */
.avatar-edit[class*="tier-"] { padding: 4px; }
.avatar-edit[class*="tier-"]::before { padding: 3.5px; }
.hero-av .avatar.lg { border-width: 4px; }

/* ═══ Team-Chat: Antworten ═══ */
.chat-msgs .msg { align-items: center; }
.ch-replybtn { flex: none; width: 26px; height: 26px; border-radius: 50%; border: none; background: transparent;
  color: var(--muted); font-size: 14px; cursor: pointer; opacity: .5; transition: opacity .15s, background .15s; }
.ch-replybtn:hover { opacity: 1; background: rgba(255,255,255,.08); }
.msg.mine .ch-replybtn { order: -1; }
.ch-reply { border-left: 3px solid var(--accent); padding: 4px 8px; margin-bottom: 6px; border-radius: 6px;
  background: rgba(255,255,255,.06); font-size: 12.5px; line-height: 1.35; opacity: .9; }
.ch-reply b { display: block; color: var(--accent); font-size: 11.5px; }
.msg.mine .ch-reply { border-left-color: rgba(255,255,255,.7); }
.msg.mine .ch-reply b { color: rgba(255,255,255,.9); }
.ch-replybar { padding: 8px 12px; border-top: 1px solid var(--line-soft); }
.ch-replybar .chr-in { position: relative; border-left: 3px solid var(--accent); padding: 4px 26px 4px 9px; border-radius: 6px; background: var(--card-2); }
.ch-replybar .chr-t { font-size: 12px; color: var(--muted); }
.ch-replybar .chr-body { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-replybar .chr-x { position: absolute; top: 6px; right: 8px; cursor: pointer; color: var(--muted); font-size: 14px; }
/* 🤫 Flüster-Leiste im Composer + Flüster-Bubbles */
.ch-whisperbar { padding: 8px 12px; border-top: 1px solid var(--line-soft); }
.ch-whisperbar .chr-in { position: relative; border-left: 3px solid var(--brand); padding: 4px 26px 4px 9px; border-radius: 6px; background: rgba(177,75,255,.12); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.ch-whisperbar .chr-t { font-size: 12px; color: #cbb3ff; }
.ch-whisperbar .chr-body { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-whisperbar .chr-x { position: absolute; top: 6px; right: 8px; cursor: pointer; color: var(--muted); font-size: 14px; }
.msg.whisper .wbubble { background: linear-gradient(160deg, rgba(177,75,255,.22), rgba(177,75,255,.1)); background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 22%, transparent), color-mix(in srgb, var(--brand) 10%, transparent)); border: 1px dashed rgba(177,75,255,.55); }
.msg.whisper .wlabel { display: block; font-size: 11px; font-weight: 800; color: #cbb3ff; margin-bottom: 3px; letter-spacing: .02em; }
.msg.whisper .wtext { word-break: break-word; }
.msg.whisper .wlocked { color: #cbb3ff; font-size: 13px; cursor: pointer; text-decoration: underline dotted; }
.msg.whisper-out { justify-content: center; }
.msg.whisper-out .wbar-out { font-size: 12px; color: var(--muted); font-style: italic; text-align: center; padding: 4px 12px; background: rgba(177,75,255,.07); background: color-mix(in srgb, var(--brand) 7%, transparent); border-radius: 999px; border: 1px solid rgba(177,75,255,.2); border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent); }
.msg.whisper-out .wbar-out b { color: #b9a0e8; font-style: normal; }

/* ═══ Match: Anzeigename + Bigo-ID (Streamer vs Streamer) ═══ */
.tp-match2 .tm-name { display: block; font-size: 17px; font-weight: 900; word-break: break-word; line-height: 1.2; }
.tp-match2 .tm-bid { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }

/* Match-Baukasten: zwei Streamer-Spalten + VS */
.tp-mrow2 { display: grid; grid-template-columns: 1fr auto 1fr; gap: 9px; align-items: start; }
.tp-mstreamer { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tp-mstreamer input { width: 100%; background: var(--card); border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 9px 11px; font: inherit; }
.tp-mvs2 { align-self: center; font-size: 13px; font-weight: 900; color: var(--muted); padding-top: 8px; }
.tp-mrow2 .tp-mbottom { grid-column: 1 / -1; margin-top: 8px; }

/* ═══ Livestreams ═══ */
.lv-dot { width: 9px; height: 9px; border-radius: 50%; background: #FF3B49; flex: none;
  box-shadow: 0 0 0 0 rgba(255,59,73,.6); animation: osPulse 1.6s infinite; }
.lv-dot.big { width: 12px; height: 12px; }
/* ⚠️ Der rote Schimmer liegt auf einer UNDURCHSICHTIGEN Flaeche — zwei Lagen
   in EINER Angabe: oben der Verlauf, darunter var(--card).

   Vorher war der Streifen selbst durchscheinend. Steht ein Hintergrundbild
   dahinter (und auf der Startseite steht oft eins), schlug das Foto durch:
   Der Name verschwand im hellen Brautkleid, „komm supporten" war grau auf
   bunt. Gemeldet am 04.10.2026 mit Bild — „Das passt da leider nicht so
   richtig."

   Die zweite Zeile nimmt deshalb auch nicht mehr var(--muted): Grau ist auf
   einer roten Flaeche zu wenig Unterschied. Sie ist jetzt gedimmtes Weiss,
   also dieselbe Farbe wie die Ueberschrift, nur leiser. */
.live-banner { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 15px; border-radius: 16px;
  text-decoration: none; color: var(--text);
  background: linear-gradient(135deg, rgba(255,59,73,.26), rgba(177,75,255,.14)), #171723;
  background: linear-gradient(135deg, rgba(255,59,73,.26), color-mix(in srgb, var(--brand) 14%, transparent)), var(--card);
  border: 1px solid rgba(255,59,73,.45); box-shadow: 0 6px 24px rgba(255,59,73,.18); }
.live-banner b { font-size: 15px; letter-spacing: -.01em; }
.live-banner .lv-bnames { font-size: 12.5px; color: rgba(236,236,243,.74); margin-top: 1px; }
.live-banner .lv-cta { margin-left: auto; font-weight: 800; color: #FF8A93; font-size: 13.5px; white-space: nowrap; }
.live-mine { background: linear-gradient(135deg, rgba(255,59,73,.14), var(--card)); border-color: rgba(255,59,73,.35); margin-top: 12px; }

.live-card { border: 1px solid rgba(255,59,73,.28); }
.live-card .lv-top { display: flex; align-items: center; gap: 11px; }
.live-card .lv-mid { flex: 1; min-width: 0; }
.live-card .lv-name { font-weight: 700; }
.live-card .lv-since { font-size: 12px; color: var(--muted); }
.live-card .lv-badge { font-size: 10px; font-weight: 900; letter-spacing: .5px; color: #fff; background: #FF3B49;
  padding: 3px 9px; border-radius: 999px; flex: none; }
.live-card .lv-note { margin: 11px 0; font-size: 14.5px; line-height: 1.45; }
.live-card .lv-open { margin-top: 12px; }

/* ═══════════════════════════════════════════════════════════════════
   RUHIGER & AUFGERÄUMTER — dezenterer Look (weniger Neon/Glühen)
   ═══════════════════════════════════════════════════════════════════ */
/* Hintergrund-Aurora deutlich zurücknehmen */
.aurora span { opacity: .12; filter: blur(100px); }
/* Ohne eigenes Hintergrundbild ist die Aurora unsichtbar: html hat einen
   eigenen Grund, deshalb malt der deckende body-Verlauf („Design-Politur")
   UEBER ihr z-index:-1. Drei bildschirmgrosse Flecken mit 100 px
   Weichzeichner liefen trotzdem endlos – fuer nichts. Mit eigenem
   Hintergrund (body durchsichtig) bleibt sie. */
body:not(.hat-hintergrund) .aurora { display: none; }

/* Gradient-Rahmen dünner & dezenter (überall wo .framed genutzt wird) */
.card.framed::before { padding: 1px;
  background: linear-gradient(135deg, rgba(177,75,255,.28), rgba(255,77,157,.08) 50%, rgba(55,224,200,.20)); background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 28%, transparent), rgba(255,77,157,.08) 50%, rgba(55,224,200,.20)); }
.composer.framed { box-shadow: 0 6px 20px rgba(0,0,0,.30); }

/* Buttons: weniger Glühen, ruhigerer Schatten */
.neon-btn { box-shadow: 0 4px 15px var(--brand-glow) !important; }

/* ✨ Edle, stimmige Buttons – „wie zuhause": weiche Tiefe, sanfter Druck, warmer Schimmer */
.btn { border-radius: 14px; letter-spacing: .2px;
  transition: transform .13s cubic-bezier(.2,.8,.3,1.2), box-shadow .22s ease, background .2s ease, border-color .2s ease, filter .2s ease; }
.btn:active { transform: scale(.965); }
.btn.primary { background: var(--grad); border: none; color: var(--on-brand);
  box-shadow: 0 9px 24px -8px var(--brand-glow), 0 2px 5px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.32); }
.btn.primary:active { transform: translateY(1px) scale(.98); box-shadow: 0 5px 14px -6px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.28); }
.btn.ghost { background: rgba(255,255,255,.03); border-color: var(--line); }
.btn.ok, .btn.danger { box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.btn.glass { box-shadow: inset 0 1px 0 rgba(255,255,255,.22); }
@media (hover: hover) {
  .btn.primary:hover { filter: brightness(1.05); transform: translateY(-1.5px);
    box-shadow: 0 14px 34px -10px var(--brand-glow), 0 3px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.36); }
  .btn.ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
  .btn.ok:hover { background: rgba(46,212,122,.22); }
  .btn.danger:hover { background: rgba(255,90,90,.22); }
  .btn.glass:hover { background: rgba(255,255,255,.2); }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: filter .2s ease; } .btn:active, .btn.primary:hover, .btn.primary:active { transform: none; } }

/* Glühende Kleinteile beruhigen */
.edge-handle.left, .edge-handle.right { box-shadow: 0 0 8px var(--brand-glow); }
.section-title::before { opacity: .85; }

/* Menü: dezente Gruppen-Trennung */
.edge-sep { height: 1px; background: var(--line-soft); margin: 9px 12px; }

/* Live: kleiner Hinweis unterm Öffnen-Button */
.lv-hint { text-align: center; font-size: 11.5px; color: var(--muted); margin-top: 7px; }

/* ── Spielereien: Tages-Gruß, Schnell-Spaß, Easter-Egg ─────────── */
.greet-line { font-size: 13.5px; color: var(--muted); margin: 2px 4px 12px; }

/* Täglicher Login-Bonus – Feier-Popup */
.daily-pop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px); padding: 24px; animation: fade-in .2s ease; }
.daily-card { width: 100%; max-width: 300px; text-align: center; padding: 26px 22px 22px;
  background: linear-gradient(160deg, var(--card-2), var(--card)); border: 1px solid var(--line);
  border-radius: 22px; box-shadow: var(--shadow); animation: daily-in .4s cubic-bezier(.2,1.2,.3,1); }
.daily-flame { font-size: 52px; line-height: 1; animation: daily-flicker 1.4s ease-in-out infinite; }
.daily-streak { font-size: 60px; font-weight: 900; line-height: 1; margin-top: 2px;
  background: linear-gradient(135deg, var(--accent), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.daily-days { font-size: 13px; color: var(--muted); letter-spacing: .5px; margin-top: -2px; }
.daily-xp { display: inline-block; margin-top: 12px; padding: 5px 14px; border-radius: 20px; font-weight: 800;
  color: var(--ok); background: rgba(46,212,122,.14); }
.daily-msg { font-size: 13.5px; color: var(--text); margin-top: 12px; line-height: 1.4; }
@keyframes daily-in { from { transform: scale(.7) translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes daily-flicker { 0%,100% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(1.12) rotate(3deg); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.fun-card .fun-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.fun-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px; font-size: 26px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; transition: transform .1s, background .15s; }
.fun-btn span { font-size: 12px; color: var(--muted); }
.fun-btn:hover { background: rgba(177,75,255,.12); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.fun-btn:active { transform: scale(.94); }
.fun-result { margin-top: 12px; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px;
  text-align: center; font-size: 15px; color: var(--text); background: var(--card-2); border-radius: var(--radius-sm); padding: 12px; }
.fun-result .fun-big { font-size: 30px; }
.fun-result b { font-weight: 800; }
.fun-fortune { font-size: 14px; }
.fun-cookie { font-size: 26px; }
.fun-spin { font-size: 30px; display: inline-block; animation: fun-spin .6s linear infinite; }
@keyframes fun-spin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
.fun-result.pop { animation: fun-pop .35s ease; }
@keyframes fun-pop { 0% { transform: scale(.8); opacity: .3; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }

/* Kommentar löschen (eigener oder Moderator) */
.cdel { cursor: pointer; opacity: .45; font-size: 12px; margin-left: 2px; }
.cdel:hover { opacity: 1; }

/* Ende-zu-Ende-Verschlüsselung: Schloss + gesperrte Nachricht */
.msg-lock { font-size: 10px; opacity: .65; }
.mtext.locked { font-style: italic; opacity: .7; }

/* WhatsApp-Haken: ✓ gesendet · ✓✓ zugestellt (grau) · ✓✓ gelesen (blau) + „schreibt …" */
.tick { opacity: .7; }
.tick.read { color: #4ea1ff; opacity: 1; }
.chat-typing { color: var(--accent); font-size: 11px; font-weight: 700; margin-left: 6px; }

/* Nachrichten-Farben (Bubble mit weißer Schrift) + Farb-Picker */
.bubble.colored .ch-txt, .bubble.colored .mtext, .bubble.colored .msg-t,
.bubble.colored .msg-time, .bubble.colored .msg-lock, .bubble.colored .tick { color: inherit; }
.bubble.colored .msg-t, .bubble.colored .msg-time { opacity: .78; }
.bubble.colored .tick.read { opacity: 1; }
.bubble.colored .ch-reply { background: rgba(127,127,127,.22); color: inherit; }
.cc-prev { display: flex; justify-content: flex-end; margin: 12px 0; }
.cc-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.ccw { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; flex: none; padding: 0; transition: transform .1s; }
.ccw:active { transform: scale(.9); }
.ccw.sel { border-color: var(--text); box-shadow: 0 0 0 2px var(--accent); transform: scale(1.08); }
.ccw-def { width: auto; height: 34px; border-radius: 18px; padding: 0 14px; background: var(--card-2); color: var(--muted); font-size: 12px; font-weight: 700; }

/* Chat-Reaktionen (Emoji auf Nachrichten) */
.msg { position: relative; }
.msg-react-btn { background: none; border: 0; cursor: pointer; font-size: 14px; opacity: .32; align-self: center; padding: 2px 3px; }
.msg-react-btn:hover { opacity: 1; }
.msg-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.mreact { font-size: 12px; background: rgba(127,127,127,.24); border-radius: 11px; padding: 1px 7px; cursor: pointer; line-height: 1.5; }
.mreact.mine { background: rgba(177,75,255,.30); background: color-mix(in srgb, var(--brand) 30%, transparent); box-shadow: 0 0 0 1px var(--brand); }
.msg-react-picker { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); display: flex; gap: 5px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 22px; padding: 6px 10px; box-shadow: var(--shadow); z-index: 20; margin-bottom: 4px; }
.msg-react-picker span { cursor: pointer; font-size: 20px; transition: transform .1s; }
.msg-react-picker span:hover { transform: scale(1.25); }

/* Team-Chat: eigene Nachricht bearbeiten/löschen */
.ch-own-acts { display: inline-flex; gap: 1px; align-self: center; opacity: .4; }
.ch-own-acts:hover { opacity: 1; }
.ch-own-acts button { background: none; border: 0; cursor: pointer; font-size: 13px; padding: 2px 3px; line-height: 1; }
.msg-t + .ch-edited, .ch-edited { color: var(--muted-2); }

/* Passwort-Stärke-Anzeige */
.pw-meter { height: 6px; background: var(--line); border-radius: 4px; overflow: hidden; margin: 6px 2px 2px; }
.pw-bar { height: 100%; width: 0; transition: width .2s, background .2s; background: var(--danger); }
.pw-bar[data-s="2"] { background: var(--warn); }
.pw-bar[data-s="3"] { background: #8bd450; }
.pw-bar[data-s="4"] { background: var(--ok); }
.pw-lbl { font-size: 11px; color: var(--muted); margin: 0 2px 4px; min-height: 14px; }

/* ── Schiffe versenken ─────────────────────────────────────────── */
/* Vorher var(--danger): rot und pulsierend — Rot heisst bei uns nur
   Warnung. Eine offene Runde ist eine Einladung, keine Gefahr. */
.gc-badge.live { background: var(--brand); color: #fff; box-shadow: 0 0 10px rgba(255,90,90,.5); animation: bs-pulse 1.6s ease-in-out infinite; }
@keyframes bs-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }

.bs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 2px 0 14px; }
.bs-stat { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 12px 6px; text-align: center; }
.bs-stat b { display: block; font-size: 24px; font-weight: 800; line-height: 1.1; }
.bs-stat span { font-size: 11px; color: var(--muted); }
.bs-stat.win b { color: var(--ok); }
.bs-stat.loss b { color: var(--danger); }

.bs-row { display: flex; align-items: center; gap: 11px; padding: 10px 4px; border-bottom: 1px solid var(--line-soft); text-decoration: none; color: var(--text); }
.bs-row:last-child { border-bottom: 0; }
.bs-row-mid { flex: 1; min-width: 0; }
.bs-row-n { font-weight: 700; font-size: 14.5px; }
.bs-row-go { color: var(--muted-2); font-size: 20px; }
.bs-inc-btns { display: flex; gap: 6px; }
.bs-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; margin-top: 3px; }
.bs-tag.turn { background: rgba(46,212,122,.16); color: var(--ok); }
.bs-tag.wait { background: rgba(154,154,176,.14); color: var(--muted); }
.bs-tag.won  { background: rgba(255,176,32,.16); color: var(--warn); }
.bs-tag.lost { background: rgba(255,90,90,.14); color: var(--danger); }

.bs-banner { border-radius: var(--radius-sm); padding: 11px 14px; font-weight: 700; font-size: 14px; text-align: center; margin-bottom: 12px; }
.bs-banner.turn { background: linear-gradient(135deg, rgba(55,224,200,.18), rgba(46,212,122,.10)); color: var(--accent); border: 1px solid rgba(55,224,200,.3); }
.bs-banner.wait { background: var(--card-2); color: var(--muted); border: 1px solid var(--line-soft); }
.bs-banner.won  { background: linear-gradient(135deg, rgba(255,176,32,.2), rgba(255,77,157,.12)); color: var(--warn); border: 1px solid rgba(255,176,32,.35); }
.bs-banner.lost { background: rgba(255,90,90,.12); color: var(--danger); border: 1px solid rgba(255,90,90,.3); }

.bs-section { margin-bottom: 16px; }
.bs-label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 13px; margin: 0 2px 7px; }
.bs-prog { font-size: 11.5px; font-weight: 600; color: var(--muted); }

.bs-board { display: grid; gap: 4px; width: 100%; max-width: 380px; margin: 0 auto; aspect-ratio: 1; }
.bs-cell { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 6px; background: var(--card-2); font-size: 15px; line-height: 1; display: grid; place-items: center; padding: 0; cursor: default; transition: transform .1s, background .15s; }
.bs-cell.water { background: rgba(55,224,200,.06); }
.bs-cell[data-fire] { cursor: pointer; background: rgba(55,224,200,.10); border-color: rgba(55,224,200,.28); }
.bs-cell[data-fire]:hover { background: rgba(55,224,200,.22); transform: scale(1.06); }
.bs-cell[data-fire]:active { transform: scale(.94); }
.bs-cell.ship { background: linear-gradient(135deg, var(--muted-2), var(--muted)); border-color: var(--muted); }
.bs-cell.miss { background: var(--card); color: var(--muted-2); }
.bs-cell.miss::after { content: '•'; color: var(--muted-2); font-size: 13px; }
.bs-cell.hit  { background: rgba(255,90,90,.22); border-color: var(--danger); }
.bs-cell.sunk { background: rgba(255,90,90,.4); border-color: var(--danger); }
.bs-cell.firing { animation: bs-fire .4s ease; }
@keyframes bs-fire { 0% { transform: scale(1); } 50% { transform: scale(1.25); background: rgba(255,176,32,.5); } 100% { transform: scale(1); } }

/* ═══ Wünsche ═══════════════════════════════════════════════════ */
.wish-ta{width:100%;box-sizing:border-box;background:var(--bg-2);border:1px solid var(--line);
  border-radius:12px;color:var(--text);padding:11px 12px;font:inherit;resize:vertical;line-height:1.45}
.wish-ta:focus{outline:none;border-color:var(--brand)}
.wish-meta .avatar.sm{width:22px;height:22px;font-size:11px}
.wish-badge.offen  {background:#2A2A3C;color:#B9B9CC}
.wish-badge.geplant{background:rgba(55,224,200,.15);color:#37E0C8}
.wish-badge.arbeit {background:rgba(255,176,32,.16);color:#FFB020}
.wish-badge.fertig {background:rgba(64,200,120,.16);color:#5CD98A}
.wish-badge.nein   {background:rgba(255,90,90,.13);color:#FF7A7A}

/* Fidolin-Bestätigungs-Dialog */
.wish-flow{padding:4px 2px 2px}
.wish-flow-btns{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.wish-flow-btns .btn{flex:1;min-width:140px}
@keyframes wishPulse{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.18);opacity:1}}

/* ═══ Wünsche: Diktat, Screenshot-Markierung, Ideen-Chips ═══════════ */
.wish-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.wish-tool.rec{background:rgba(255,45,85,.16);border-color:#ff2d55;color:#ff2d55;animation:wishRec 1s ease-in-out infinite}
.wish-tool.busy{opacity:.7;cursor:default}
@keyframes wishRec{0%,100%{opacity:1}50%{opacity:.55}}
.wc-shot-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 12px}
.wc-shot-row .muted{flex:1;min-width:130px}

/* Pflicht-Push-Kategorie (nicht abschaltbar) */
.np-row.locked{opacity:.9}
.np-lock{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--accent);
  background:rgba(55,224,200,.12);border-radius:999px;padding:4px 11px;white-space:nowrap}
.wv{display:inline-flex;align-items:center;gap:6px;background:var(--bg-2);border:1px solid var(--line);
  color:var(--muted);border-radius:999px;padding:6px 13px;font:inherit;font-size:13.5px;cursor:pointer;transition:.12s}
.wv b{font-variant-numeric:tabular-nums}
.wv.up:hover{border-color:#40c878;color:#5CD98A}
.wv.down:hover{border-color:var(--danger);color:#FF7A7A}
.wv.up.on{background:rgba(64,200,120,.16);border-color:#40c878;color:#5CD98A}
.wv.down.on{background:rgba(255,90,90,.14);border-color:var(--danger);color:#FF7A7A}
.wish-cmt-toggle:hover,.wish-cmt-toggle.open{border-color:var(--brand);color:var(--text)}
.wc-item{display:flex;align-items:flex-start;gap:8px}
.wc-item .avatar.sm{width:28px;height:28px;font-size:12px;flex:0 0 auto}
.wc-del{background:none;border:none;color:var(--muted-2);cursor:pointer;font-size:14px;padding:2px;flex:0 0 auto}
.wc-del:hover{color:var(--danger)}
.wc-add .wc-send{flex:0 0 auto;align-self:center}

/* ═══ Status setzen (Vorlagen-Picker) ══════════════════════════════ */
.st-cur{margin:10px 0 4px;padding:9px 12px;background:var(--bg-2);border-radius:10px;color:var(--muted);font-size:13.5px}
.st-cur b{color:var(--text)}
.st-cats{margin-top:6px;max-height:46vh;overflow-y:auto}
.st-cat{margin-top:12px}
.st-cat-h{font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted-2);margin-bottom:7px}
/* ══ Status-Vorlagen als Kacheln ═══════════════════════════════════
   Dieselbe Sprache wie die Menue-Kacheln: grosses Zeichen, Wort darunter,
   eine Flaeche zum Antippen. Vorher waren es schmale Pillen in zwoelf
   wechselnden Farben — nebeneinander sah das nach Jahrmarkt aus, und auf
   schmalen Geraeten brach jede Zeile anders um.
   Die Farbe je Vorlage kommt als Stil-Angabe aus stChip (--stf), damit hier
   kein color-mix noetig ist: Das koennen iPhones vor iOS 16.2 nicht. */
.st-chips, .st-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px}
.st-chip{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  min-height:94px;padding:14px 8px;border-radius:16px;border:1px solid var(--line);
  background-color:var(--card-2);color:var(--text);
  font:inherit;font-size:13px;font-weight:700;line-height:1.25;text-align:center;
  overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  transition:transform .1s ease,border-color .15s ease,box-shadow .2s ease,filter .15s ease}
.st-chip .stk-ic{font-size:28px;line-height:1;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.st-chip:active{transform:scale(.96)}
@media (hover:hover){ .st-chip:hover{filter:brightness(1.1)} }
/* Gewaehlt: der eigene Farbton als Rand und Ring, dazu ein Haken oben rechts.
   Kein Fuellen der ganzen Flaeche — das Zeichen soll lesbar bleiben. */
.st-chip.on{border-color:var(--stf,var(--brand));
  box-shadow:0 6px 20px rgba(0,0,0,.4), inset 0 0 0 1px var(--stf,var(--brand))}
.st-chip.on::after{content:'✓';position:absolute;top:6px;right:9px;font-size:14px;font-weight:800;color:var(--stf,var(--brand))}
.st-actions{display:flex;gap:9px;margin-top:16px}
.st-actions .btn{flex:1}

/* ═══ Status-Picker v2 (Suche/Autofill, GPS, Kommentar-Schalter) ════ */
.st-search{width:100%;box-sizing:border-box;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;
  color:var(--text);padding:11px 14px;font:inherit;font-size:15px;margin-top:10px}
.st-search:focus{outline:none;border-color:var(--brand)}
.st-zuletzt{margin-top:12px}
.st-zuletzt .st-cat-h{margin-bottom:7px}
.st-results{margin-top:10px;max-height:42vh;overflow-y:auto;padding:2px}
.st-results:empty{display:none}
/* Eigener Text: ueber die ganze Breite, gestrichelt — sichtbar etwas anderes
   als eine fertige Vorlage. */
.st-custom{grid-column:1 / -1;min-height:66px;border-style:dashed !important;border-color:var(--brand) !important}
.st-custom .stk-ic{font-size:22px}
.st-place-row{display:flex;gap:8px}
.st-place-row input{flex:1;min-width:0;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:9px 12px;font:inherit}
.st-place-row input:focus{outline:none;border-color:var(--brand)}
.st-place-row .btn{flex:0 0 auto;white-space:nowrap}
.st-toggle{display:flex;align-items:center;gap:9px;margin-top:12px;color:var(--muted);font-size:14px;cursor:pointer}
.st-toggle input{width:18px;height:18px;accent-color:var(--brand)}
/* Kommentare gesperrt */
.cmt-locked{padding:10px 4px;color:var(--muted-2);font-size:13px}
/* Online: Status unter Namen */
.os-status{display:block;max-width:190px;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.rot-avs .avatar{width:28px;height:28px;font-size:11px;border:2px solid var(--card)}

/* ═══ Composer v2: Emoji, @Erwähnungen, Zähler, Auto-Grow ═══════════ */
.c-textwrap{position:relative}
#c_body{resize:none;overflow-y:auto}
/* ══ Der Namensfinder (@) ═══════════════════════════════════════════
   Milchglas statt Kasten, weil die Liste ueber dem Gespraech liegt und
   nicht so tun soll, als waere sie eine Seite fuer sich. Die Randlinie
   oben traegt die Markenfarbe — daran erkennt man im Augenwinkel, dass
   das hier die App ist und nicht die Vorschlagszeile der Tastatur. */
.c-mention{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;
  background:rgba(23,23,35,.94);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:0 22px 50px -18px rgba(0,0,0,.75), 0 2px 10px rgba(0,0,0,.4);
  padding:4px}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  /* Nicht durchsichtiger machen: Darunter liegt das Gespraech, und bei
     .78 las man die Nachricht dahinter quer durch den ersten Namen. */
  .c-mention{background:rgba(23,23,35,.93);-webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5)}
}
.c-mention::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--grad);opacity:.9}
.c-mkopf{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 12px 5px;font-size:10.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted-2)}
.c-mkopf:empty{display:none}
.c-mtipp{font-weight:700;letter-spacing:.04em;color:var(--muted-2);opacity:.8;
  border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.c-mrow{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;
  color:var(--text);padding:8px 10px;font:inherit;cursor:pointer;text-align:left;
  border-radius:12px;position:relative}
.c-mrow:hover{background:var(--bg-2)}
.c-mrow .avatar.sm{width:34px;height:34px;font-size:13px;flex:0 0 auto}
.c-mrow .av-wrap{flex:0 0 auto}
.c-mtext{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.c-mn{font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-msub{font-size:11.5px;color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Die Buchstaben, die man selbst getippt hat. Ohne sie sieht man nicht,
   WARUM jemand in der Liste steht. */
.c-mn mark,.c-msub mark{background:none;color:var(--brand-2);font-weight:800;padding:0}
.c-mflag{flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:.03em;
  color:var(--accent);border:1px solid var(--accent);border-radius:999px;
  padding:2px 7px;opacity:.85;white-space:nowrap}
.c-mleer{padding:12px 14px;font-size:13px;color:var(--muted-2);text-align:center}
.c-emoji{display:flex;flex-wrap:wrap;gap:2px;max-height:168px;overflow-y:auto;margin-top:8px;padding:6px;
  background:var(--bg-2);border:1px solid var(--line-soft);border-radius:12px}
.c-emoji-b{background:none;border:none;font-size:22px;line-height:1;padding:5px;border-radius:8px;cursor:pointer}
.c-emoji-b:hover{background:var(--card-2)}
.c-count{font-size:12px;color:var(--muted-2);align-self:center;min-width:24px;text-align:center}
.c-count.warn{color:var(--danger);font-weight:700}

/* ═══ 🚨 Warnung: Menüpunkt, Warn-Seite, rote Warn-Ankündigung ══════ */
.edge-item.edge-warn{color:#ff6b6b;font-weight:800}
.edge-item.edge-warn .ei{filter:drop-shadow(0 0 6px rgba(255,90,90,.6))}
.edge-item.edge-warn::after{content:'';margin-left:auto;width:8px;height:8px;border-radius:50%;background:#ff4d4d;box-shadow:0 0 8px #ff4d4d;animation:warnPulse 1.2s ease-in-out infinite}
@keyframes warnPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

.warn-page{padding:8px 2px 40px}
.warn-card{background:linear-gradient(160deg,rgba(255,45,45,.20),rgba(120,10,10,.28));
  border:2px solid rgba(255,80,80,.7);border-radius:20px;padding:26px 20px;text-align:center;
  box-shadow:0 0 0 4px rgba(255,60,60,.10),0 14px 40px rgba(255,40,40,.18)}
.warn-ic{font-size:56px;line-height:1;animation:warnBlink 1s steps(1) infinite}
@keyframes warnBlink{50%{opacity:.35}}
.warn-h{font-size:26px;font-weight:900;letter-spacing:1px;color:#ff5a5a;margin:10px 0 4px;text-transform:uppercase}
.warn-p{color:var(--text);font-size:14.5px;line-height:1.55;margin:16px 4px;text-align:left}
.warn-quote{margin:16px 0;padding:12px 16px;border-left:4px solid #ff5a5a;background:rgba(0,0,0,.25);
  border-radius:8px;color:#ffd9d9;font-style:italic;font-size:15px;line-height:1.5;text-align:left}

.team-post.tp-warn{background:linear-gradient(160deg,rgba(255,45,45,.16),rgba(120,10,10,.14));
  border:2px solid rgba(255,80,80,.65);box-shadow:0 0 0 3px rgba(255,60,60,.10),0 10px 34px rgba(255,40,40,.20)}
.team-post.tp-warn .tp-flag{color:#ff6b6b}
.team-post.tp-warn .tp-title{color:#ff5a5a}
.team-post.tp-warn::before{width:6px}

/* ═══ Warnungen v2: mehrere Karten, Gelesen-Button, Wer-hat-gelesen ═ */
.warn-card{margin-bottom:16px}
.warn-body{color:#fff;font-size:15px;line-height:1.55;white-space:pre-wrap;word-break:break-word;text-align:left;margin:8px 2px 0}
.warn-ackbtn{display:block;width:100%;margin-top:18px;background:#ff3b3b;color:#fff;font-weight:800;font-size:16px;
  padding:14px;border:none;border-radius:14px;box-shadow:0 6px 20px rgba(255,40,40,.4);cursor:pointer}
.warn-ackbtn:hover{background:#ff2020}
.warn-acked{margin-top:18px;background:rgba(64,200,120,.18);border:1px solid rgba(64,200,120,.5);color:#8ce6ab;
  font-weight:700;text-align:center;padding:13px;border-radius:14px}
.warn-admin{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,90,90,.25)}
.warn-count{margin-top:14px;text-align:center;color:var(--muted);font-size:13px}
.warn-empty{padding:26px 16px;text-align:center;color:var(--muted)}
.wa-sec{margin-top:14px}
.wa-h{font-size:13px;font-weight:800;margin-bottom:8px;letter-spacing:.3px}
.wa-h.ok{color:#5CD98A}
.wa-h.no{color:#FFB020}
.wa-row{display:flex;align-items:center;gap:9px;padding:6px 2px}
.wa-row .avatar.sm{width:28px;height:28px;font-size:12px;flex:0 0 auto}
.wa-n{font-weight:600}
.wa-t{margin-left:auto;color:var(--muted-2);font-size:12px}

/* ═══ „Wer hat reagiert?" ═══════════════════════════════════════════ */
.rx-sec{margin-top:14px}
.rx-sec:first-child{margin-top:6px}
.rx-h{font-size:14px;font-weight:800;margin-bottom:8px;color:var(--muted);display:flex;align-items:center;gap:6px}
.rx-h b{color:var(--text)}
.rx-row{display:flex;align-items:center;gap:10px;padding:7px 2px;text-decoration:none;color:var(--text)}
.rx-row:active{background:var(--bg-2);border-radius:10px}
.rx-row .avatar.sm{width:34px;height:34px;font-size:14px;flex:0 0 auto}
.rx-n{font-weight:600}

/* Kontrollraum-Badge: wie viel wartet auf Freigabe */
.edge-item .edge-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:#ff3b3b;color:#fff;font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 0 8px rgba(255,60,60,.6)}

/* ═══ 📖 Bigo-Regelwerk ════════════════════════════════════════════ */
.rules-progress{display:flex;align-items:center;gap:10px;margin-top:10px}
.rp-bar{flex:1;height:8px;border-radius:999px;background:var(--bg-2);overflow:hidden}
.rp-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--accent));transition:width .3s}
.rp-txt{font-size:12.5px;color:var(--muted);white-space:nowrap;font-weight:600}
.rules-list{display:flex;flex-direction:column;gap:11px;margin-top:6px}
.rule-card{background:var(--card);border:1px solid var(--line-soft);border-radius:16px;padding:14px 15px}
.rule-card.warn{border-color:rgba(255,90,90,.5);background:linear-gradient(160deg,rgba(255,45,45,.10),transparent)}
.rule-card.read{opacity:.82}
.rule-head{display:flex;align-items:center;gap:9px;font-size:15.5px}
.rule-ic{font-size:22px}
.rule-check{margin-left:auto;color:#5CD98A;font-weight:900}
.rule-points{margin:10px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.rule-points li{color:var(--text);font-size:14px;line-height:1.45}
.rule-card.warn .rule-points li{color:#ffdadada}
.rule-acts{display:flex;gap:8px;margin-top:12px}
.rule-speak.on{background:rgba(55,224,200,.16);border-color:var(--accent);color:var(--accent)}
.rules-foot{margin-top:16px;padding:14px 16px;background:var(--bg-2);border-radius:14px;color:var(--muted);font-size:13.5px;line-height:1.5;text-align:center}

/* ═══ ⚖️ Akte / Verwarnungen (Master Control Page) ═════════════════ */
.akte-head{display:flex;align-items:center;gap:13px;margin:4px 0 4px}
.akte-name{font-size:19px;font-weight:800}

/* ── Steckbrief: wer ist das, auf einen Blick ───────────────────────── */
.ak-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:15px 16px;margin-bottom:10px}
.ak-card .akte-head{margin:0}
.ak-ident{min-width:0}
.ak-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ak-badges:empty{display:none}
.ak-card .mem-badges{margin-top:10px}

/* Hinweisband – nur wenn etwas nicht in Ordnung ist */
.ak-band{display:flex;gap:11px;align-items:flex-start;margin-top:12px;padding:11px 13px;border-radius:13px;
  font-size:13.5px;line-height:1.4}
.ak-band.warn{background:rgba(255,176,32,.10);border:1px solid rgba(255,176,32,.34);color:#FFD489}
.ak-band.bad {background:rgba(255,59,78,.10); border:1px solid rgba(255,59,78,.34); color:#FF9AA6}
.ak-band-ic{font-size:17px;line-height:1.2;flex:none}
.ak-band b{color:var(--text);font-weight:700}
.ak-band-sub{color:var(--muted);font-size:12.5px;margin-top:2px}

/* Eckdaten */
.ak-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:1px;margin-top:13px;
  background:var(--line);border-radius:12px;overflow:hidden}
.ak-facts:empty{display:none}
.ak-fact{background:var(--card);padding:9px 11px;display:flex;flex-direction:column;gap:2px;min-width:0}
.ak-fact span{font-size:10.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted-2)}
.ak-fact b{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Kennzahlen ────────────────────────────────────────────────────── */
.ak-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:4px}
.ak-stat{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:12px 10px;
  display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;min-width:0}
.ak-sv{font-size:26px;font-weight:800;letter-spacing:-1px;font-variant-numeric:tabular-nums;line-height:1.05}
.ak-sv i{font-style:normal;color:var(--muted-2);font-weight:600;margin:0 1px}
.ak-sl{font-size:11.5px;font-weight:700;color:var(--muted)}
.ak-sx{font-size:10.5px;color:var(--muted-2);line-height:1.25}
/* Verwarnungs-Kachel färbt sich nach Lage */
.ak-stat.ok  .ak-sv{color:var(--fam-1)}
.ak-stat.mid .ak-sv{color:#FFB020}
.ak-stat.hot{border-color:rgba(255,59,78,.45);background:rgba(255,59,78,.07)}
.ak-stat.hot .ak-sv{color:#FF6B7C}

/* PK-Ergebnis im Verlauf */
.ak-res{font-size:12px;font-weight:700;white-space:nowrap;flex:none}
.ak-res.win{color:var(--fam-1)} .ak-res.loss{color:#FF6B7C}
.ak-res.draw{color:#FFB020}     .ak-res.open{color:var(--muted-2);font-weight:600}
.akte-tabs{display:flex;gap:8px;margin:8px 0 12px;overflow-x:auto}
.akte-tab{flex:0 0 auto;background:var(--bg-2);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:8px 14px;font:inherit;font-size:13px;cursor:pointer}
.akte-tab.on{background:var(--brand);border-color:var(--brand);color: var(--on-brand);font-weight:700}
.akte-warn-card{background:linear-gradient(160deg,rgba(255,45,45,.10),transparent);border:1px solid rgba(255,90,90,.4);border-radius:14px;padding:13px 15px;margin-bottom:11px}
.aw-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.aw-seq{background:#ff3b3b;color:#fff;font-weight:800;font-size:12px;padding:3px 10px;border-radius:999px}
.aw-cat{color:#ff8a8a;font-weight:600;font-size:13px}
.aw-date{color:var(--muted-2);font-size:12px;margin:6px 0 8px}
.aw-body,.mw-body{color:var(--text);font-size:14.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.akte-log{display:flex;flex-direction:column;gap:6px}
/* 📋 Aktivitäts-Akte */
.act-chips{display:flex;gap:7px;overflow-x:auto;padding:2px 0 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.act-chips::-webkit-scrollbar{display:none}
.act-chip{flex:0 0 auto;background:var(--bg-2);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:6px 12px;font:inherit;font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.act-chip.on{background:var(--brand);border-color:var(--brand);color: var(--on-brand);font-weight:700}
.act-n{background:rgba(0,0,0,.14);border-radius:999px;padding:0 6px;font-size:11px;font-weight:800;min-width:16px;text-align:center}
.act-chip.on .act-n{background:rgba(255,255,255,.26)}
.act-list{display:flex;flex-direction:column;gap:8px}
.act-item{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:12px;padding:10px 12px}
.act-meta{display:flex;align-items:center;gap:7px;margin-bottom:4px;font-size:12px;color:var(--muted)}
.act-ic{font-size:14px}
.act-lbl{font-weight:700}
.act-time{margin-left:auto;font-size:11.5px;white-space:nowrap}
.act-text{font-size:14px;line-height:1.4;white-space:pre-wrap;word-break:break-word}
.al-row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--bg-2);border-radius:10px;padding:9px 12px;font-size:13.5px}
.akte-imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.ai-item{position:relative;display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line-soft)}
.ai-item img{width:100%;height:96px;object-fit:cover;display:block}
.ai-src{position:absolute;left:0;bottom:0;right:0;background:rgba(0,0,0,.6);color:#fff;font-size:10.5px;padding:2px 6px}
.wc-cat{width:100%;box-sizing:border-box;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:10px 12px;font:inherit}
.wc-prev-h{margin:16px 0 6px;font-weight:700;color:var(--accent)}
.warn-preview{background:linear-gradient(160deg,rgba(255,45,45,.12),transparent);border:1px solid rgba(255,90,90,.45);border-radius:14px;padding:14px 15px;color:#fff;font-size:15px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.mywarn-card{background:linear-gradient(160deg,rgba(255,45,45,.12),transparent);border:1.5px solid rgba(255,90,90,.5);border-radius:14px;padding:13px 15px;margin-bottom:11px}
.mw-seq{background:#ff3b3b;color:#fff;font-weight:800;font-size:12px;padding:3px 10px;border-radius:999px}
.mw-cat{color:#ff8a8a;font-weight:600;font-size:13px}
.mw-date{color:var(--muted-2);font-size:12px;margin:5px 0 8px}
/* Einklappbare Verwarnungskarten + Bestätigen/Antworten */
.mw-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;cursor:pointer;user-select:none}
.mw-chev{margin-left:auto;transition:transform .2s;color:var(--muted)}
.mywarn-card.collapsed .mw-chev{transform:rotate(-90deg)}
.mw-collapse{overflow:hidden;max-height:1400px;transition:max-height .28s ease,opacity .2s;opacity:1}
.mywarn-card.collapsed .mw-collapse{max-height:0;opacity:0;margin:0}
.mywarn-card.acked{background:linear-gradient(160deg,rgba(60,80,120,.14),transparent);border-color:rgba(120,140,180,.4)}
.mywarn-card.acked .mw-seq{background:#5a6b8c}
.mw-ok{background:rgba(53,208,127,.2);color:#4ade80;font-weight:800;font-size:12px;padding:3px 10px;border-radius:999px}
.mw-open{background:rgba(255,176,74,.2);color:#ffb04a;font-weight:800;font-size:12px;padding:3px 10px;border-radius:999px}
.mw-ack{background:#ff3b3b;color:#fff;border:none;font-weight:800;display:block;width:100%;margin:10px 0 6px}
.mw-replies{display:flex;flex-direction:column;gap:7px;margin:8px 0}
.mw-reply{background:rgba(255,255,255,.05);border-radius:11px;padding:8px 11px;font-size:14px}
.mw-reply>div{margin-top:2px;color:var(--text)}
.mw-replyform{display:flex;gap:7px;margin-top:8px}
.mw-replyform .mw-replyinput{flex:1;min-width:0;background:var(--card-2);border:1px solid var(--line-soft);border-radius:11px;padding:9px 12px;color:var(--text);font-size:14px}
.edge-item .nav-warn{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#ff3b3b;color:#fff;font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 8px rgba(255,60,60,.6)}

/* Wasserzeichen: @Name dezent über allem → Screenshots rückverfolgbar */
.wm{position:fixed;inset:-40%;z-index:9990;pointer-events:none;overflow:hidden;
  display:flex;flex-wrap:wrap;align-content:flex-start;gap:64px 46px;
  transform:rotate(-24deg);opacity:.045}
.wm span{font-size:15px;font-weight:800;color:#fff;white-space:nowrap;letter-spacing:.5px}
@media (max-width:520px){ .wm{gap:52px 34px} .wm span{font-size:13px} }

/* Screenshot-Log */
.ss-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.ss-row{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line-soft);border-radius:12px;padding:9px 12px}
.ss-row .avatar.sm{width:32px;height:32px;font-size:13px;flex:0 0 auto}
.ss-mid{display:flex;flex-direction:column;min-width:0;flex:1}
.ss-time{white-space:nowrap;flex:0 0 auto}
.tts-count{white-space:nowrap;flex:0 0 auto;font-weight:800;font-size:13px;color: var(--on-brand);background:var(--grad);padding:3px 11px;border-radius:999px}
.mod-row{text-decoration:none;color:inherit;transition:border-color .15s,background .15s}
.mod-row:active{background:var(--card-2)}
.mod-go{white-space:nowrap;flex:0 0 auto;font-weight:800;font-size:12.5px;color:#ff8a8a}
/* 🧹 Aufräumen */
.cl-stats{display:flex;gap:8px;margin:12px 0}
.cl-stat{flex:1;background:var(--card-2);border:1px solid var(--line-soft);border-radius:14px;padding:12px 8px;text-align:center}
.cl-num{display:block;font-weight:900;font-size:17px;color:var(--text)}
.cl-lbl{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.cl-cnt{white-space:nowrap;flex:0 0 auto;font-weight:800;font-size:13px;color: var(--on-brand);background:var(--grad);padding:3px 11px;border-radius:999px}
.cl-cnt.zero{background:rgba(255,255,255,.08);color:var(--muted)}
/* 📊 Aktivität */
.act-insight{padding:13px 15px;font-size:14.5px;line-height:1.5;background: linear-gradient(160deg,rgba(177,75,255,.14),transparent); background: linear-gradient(160deg,color-mix(in srgb, var(--brand) 14%, transparent),transparent);border:1px solid rgba(177,75,255,.35)}
.act-hours{display:flex;align-items:flex-end;gap:2px;height:110px;padding:6px 2px 20px;position:relative}
.act-hbar{flex:1;height:100%;display:flex;align-items:flex-end;position:relative}
.act-hfill{width:100%;min-height:2px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--brand),rgba(177,75,255,.45))}
.act-hbar.peak .act-hfill{background:linear-gradient(180deg,#ff4d9d,#b14bff)}
.act-hlabel{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--muted)}
.act-days{display:flex;gap:8px;align-items:flex-end}
.act-dcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.act-dbar{width:100%;height:80px;display:flex;align-items:flex-end;background:rgba(255,255,255,.04);border-radius:8px}
.act-dfill{width:100%;min-height:3px;border-radius:8px;background:linear-gradient(180deg,var(--brand),rgba(177,75,255,.45))}
.act-dfill.peak{background:linear-gradient(180deg,#ff4d9d,#b14bff)}
.act-dlabel{font-size:12px;font-weight:700;color:var(--text)}
.act-dn{font-size:10px;color:var(--muted)}
.act-rank{flex:0 0 auto;width:22px;text-align:center;font-weight:800;color:var(--muted)}
.act-count{white-space:nowrap;flex:0 0 auto;font-weight:800;font-size:13px;color: var(--on-brand);background:var(--grad);padding:3px 11px;border-radius:999px}
.wh-row{text-decoration:none;color:inherit;width:100%;text-align:left;cursor:pointer;background:var(--card);border:1px solid var(--line-soft)}
.wh-go{white-space:nowrap;flex:0 0 auto;font-weight:800;font-size:12.5px;color:var(--brand-2)}
/* 🚩 Schutz-Meldungen (mcp) */
.flag-card{border-left:4px solid var(--line);padding:13px 15px}
.flag-card.flag-crisis{border-left-color:#ff9f43;background:linear-gradient(160deg,rgba(255,159,67,.1),transparent)}
.flag-card.flag-danger{border-left-color:#ff3b3b;background:linear-gradient(160deg,rgba(255,59,59,.12),transparent)}
.flag-card.flag-bully{border-left-color:#b14bff;background:linear-gradient(160deg,rgba(177,75,255,.1),transparent)}
.flag-card.done{opacity:.55}
.flag-lbl{font-weight:800;font-size:13.5px}
.flag-who{display:flex;align-items:center;gap:8px;margin:7px 0}
.flag-ex{font-size:14.5px;line-height:1.5;color:var(--text);font-style:italic;word-break:break-word}
/* Nutzungsbedingungen */
.terms-card{padding:16px 18px}
.terms-card h3{font-size:15.5px;margin:16px 0 5px}
.terms-card h3:first-child{margin-top:0}
.terms-card p{font-size:14.5px;line-height:1.6;color:var(--text-2,#c9c9d4);margin:0 0 6px}
.terms-card ul{margin:4px 0 8px;padding-left:20px}
.terms-card li{font-size:14.5px;line-height:1.55;margin-bottom:5px}
.terms-card b{color:var(--text)}
/* Farbenfrohe Status-Karte im Feed (aus „Status setzen") */
.status-post{display:flex;align-items:center;gap:14px;margin-top:11px;padding:18px 20px;border-radius:20px;
  background:linear-gradient(135deg,var(--sc),color-mix(in srgb,var(--sc) 68%,#000));
  box-shadow:0 8px 26px color-mix(in srgb,var(--sc) 40%,transparent);border:1px solid color-mix(in srgb,var(--sc) 60%,#fff)}
.status-post .sp-emoji{font-size:38px;line-height:1;flex:0 0 auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.status-post .sp-label{font-size:20px;font-weight:900;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35);word-break:break-word;flex:1}
.status-post .sp-place{font-size:13px;font-weight:700;color:#fff;background:rgba(0,0,0,.22);padding:4px 10px;border-radius:999px;white-space:nowrap;flex:0 0 auto}

/* ═══ 🎲 Rausgeworfen! ═══ */
.ludo-boardwrap{max-width:360px;margin:10px auto;padding:8px;background:var(--card);border:1px solid var(--line-soft);border-radius:18px}
.ludo-board{width:100%;height:auto;display:block}
.ludo-piece.movable{cursor:pointer}
.ludo-piece.movable .lp-ring{animation:lpulse 1s ease-in-out infinite}
@keyframes lpulse{0%,100%{opacity:.4}50%{opacity:1}}
.ludo-players{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px}
.ludo-pl{display:flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:var(--card-2);border:1px solid var(--line-soft);font-weight:700;font-size:13px}
.ludo-pl.active{border-color:var(--brand);box-shadow:0 0 12px var(--brand-glow)}
.ludo-pl.left{opacity:.45;text-decoration:line-through}
.ludo-dot{width:13px;height:13px;border-radius:50%;flex:none;box-shadow:0 0 4px rgba(0,0,0,.4)}
.ludo-turn{text-align:center;font-size:15px;margin-bottom:8px}
.ludo-dicebar{display:flex;align-items:center;justify-content:center;gap:14px}
.ludo-die{width:52px;height:52px;border-radius:12px;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.35);display:grid;place-items:center;flex:none;font-size:26px}
.ludo-die.empty{background:var(--card-2);opacity:.6}
.ludo-pips{width:38px;height:38px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px}
.ludo-pips span{border-radius:50%}
.ludo-pips span.on{background:#1a1a26}
.ludo-hint{font-size:13px;color:var(--brand-2);font-weight:700}
.ludo-log{margin-top:10px;background:var(--card-2);border-radius:12px;padding:8px 12px;font-size:12.5px;color:var(--muted);line-height:1.6}
.ludo-lobby,.ludo-play,.ludo-done{margin-top:6px}
.ludo-done{text-align:center;font-size:17px;font-weight:800;padding:12px;background: linear-gradient(160deg,rgba(177,75,255,.16),transparent); background: linear-gradient(160deg,color-mix(in srgb, var(--brand) 16%, transparent),transparent);border:1px solid rgba(177,75,255,.4);border-radius:14px}
.ludo-mini{width:34px;height:34px;border-radius:10px;background:var(--card-2);display:grid;place-items:center;font-size:18px;flex:none}

/* 🎲 Politur: Timer, Würfel-Wurf, Tiefe */
.ludo-boardwrap{background:radial-gradient(circle at 50% 42%,rgba(177,75,255,.10),var(--card) 70%)}
.ludo-piece{filter:drop-shadow(0 1.5px 1.5px rgba(0,0,0,.55))}
.ludo-die.rolling{animation:dieRoll .5s cubic-bezier(.3,1.4,.5,1)}
@keyframes dieRoll{0%{transform:rotate(-18deg) scale(.7)}40%{transform:rotate(12deg) scale(1.12)}70%{transform:rotate(-5deg) scale(.97)}100%{transform:rotate(0) scale(1)}}
.ludo-turn{display:flex;align-items:center;justify-content:center;gap:8px}
.ludo-tdot{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:0 0 8px currentColor}
.lu-timer{margin-left:6px;font-size:13px;font-weight:800;color:var(--muted);background:var(--card-2);border:1px solid var(--line-soft);border-radius:999px;padding:2px 10px;font-variant-numeric:tabular-nums}
.lu-timer.urgent{color:#fff;background:#ff3b3b;border-color:#ff3b3b;animation:pulseUrg 1s ease-in-out infinite}
@keyframes pulseUrg{0%,100%{opacity:.75}50%{opacity:1}}
.ludo-pl.active{animation:plActive 1.6s ease-in-out infinite}
@keyframes plActive{0%,100%{box-shadow:0 0 8px var(--brand-glow)}50%{box-shadow:0 0 16px var(--brand-glow)}}

/* 🎲 3D-Brett + Effekte */
.ludo-boardwrap{perspective:1100px;perspective-origin:50% 38%}
.ludo-board{transform-origin:50% 58%;transform:rotateX(15deg);transition:transform .3s;filter:drop-shadow(0 26px 26px rgba(0,0,0,.6))}
.ludo-board.lu-in{animation:boardIn .6s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes boardIn{from{transform:rotateX(0deg) scale(.94);opacity:.4}to{transform:rotateX(15deg) scale(1);opacity:1}}
.ludo-piece{filter:drop-shadow(0 3px 2px rgba(0,0,0,.65));transition:filter .2s}
.ludo-piece.movable{filter:drop-shadow(0 5px 3px rgba(0,0,0,.7))}
.ludo-hint.warn{color:#ff8a3d;font-weight:800;animation:pulseUrg 1s ease-in-out infinite}

/* 🎲 Glänzende 3D-Steine + kleine Figuren-Animationen */
.ludo-piece{transform-box:fill-box;transform-origin:center}
.ludo-piece.movable{animation:pieceBob 1.25s ease-in-out infinite}
@keyframes pieceBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.2px)}}
.ludo-piece.just-moved{animation:piecePop .5s cubic-bezier(.34,1.6,.5,1)}
@keyframes piecePop{0%{transform:scale(.25)}55%{transform:scale(1.3)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.ludo-piece.movable,.ludo-piece.just-moved{animation:none}}

/* 🎨 Figuren-Wähler (Lobby) + Emoji-Figur im Spieler-Chip */
.ludo-dot{position:relative;display:inline-grid;place-items:center}
.ludo-dotfig{font-size:10px;line-height:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.ludo-skinpick{margin-top:12px;background:var(--card-2);border:1px solid var(--line-soft);border-radius:14px;padding:10px 12px}
.ludo-skinpick-lbl{font-size:12.5px;font-weight:800;color:var(--muted);margin-bottom:8px}
.ludo-skinrow{display:flex;flex-wrap:wrap;gap:7px}
.ludo-skin{width:38px;height:38px;border-radius:11px;border:1.5px solid var(--line-soft);background:var(--card);display:grid;place-items:center;font-size:20px;cursor:pointer;transition:transform .12s,border-color .12s,box-shadow .12s;padding:0}
.ludo-skin:hover{transform:translateY(-2px) scale(1.06)}
.ludo-skin.on{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-glow);background:rgba(177,75,255,.12)}
.ludo-skinclassic{width:20px;height:20px;border-radius:50%;box-shadow:inset -2px -3px 4px rgba(0,0,0,.4),inset 3px 3px 5px rgba(255,255,255,.55)}

/* ══ Mitglieds-Abzeichen: Streamer / Familie (Freischaltung im Kontrollraum) ══ */
.mem-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.mem-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 800;
  padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.mem-badge.streamer { color: #d9c2ff; background: rgba(177,75,255,.16); background: color-mix(in srgb, var(--brand) 16%, transparent); border-color: rgba(177,75,255,.4); border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.mem-badge.family   { color: #F5D0BC; background: rgba(232,163,120,.16); border-color: rgba(232,163,120,.42); }

/* ══════════════════════════════════════════════════════════════════
   ey.4ever1.tv – Familien-Startseite in Rose Gold
   Warm & einladend, klar abgesetzt vom Lila/Pink der Streamer-Seite.
   ══════════════════════════════════════════════════════════════════ */
:root {
  --rg-1: #F7C9A9;   /* helles Rosé-Gold */
  --rg-2: #E8A87C;   /* warmes Kupfer   */
  --rg-3: #D98BA0;   /* Altrosa         */
}
.fam-hero { background:
    radial-gradient(680px 380px at 12% -10%, rgba(247,201,169,.20), transparent 62%),
    radial-gradient(620px 380px at 100% 0%, rgba(217,139,160,.16), transparent 58%),
    var(--card); border-color: rgba(232,168,124,.34); }
.fam-badge { color: #FFE7D6; background: rgba(232,168,124,.18); border: 1px solid rgba(232,168,124,.45); }
.fam-title { color: #fff; }
.fam-title span { background: linear-gradient(100deg, var(--rg-1), var(--rg-2) 55%, var(--rg-3));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.fam-btn { background: linear-gradient(135deg, var(--rg-2), var(--rg-3)) !important;
  box-shadow: 0 10px 26px rgba(232,168,124,.42) !important; }
.fam-label { color: var(--rg-1); }
.fam-card { border-color: rgba(232,168,124,.26);
  background: linear-gradient(162deg, rgba(247,201,169,.10), rgba(217,139,160,.05)), var(--card-2); }
/* Die drei Familien als Chips */
.fam-fams { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 16px 0 2px; }
.fam-chip { font-size: 13px; font-weight: 800; padding: 8px 14px; border-radius: 999px;
  color: #FFE7D6; background: rgba(232,168,124,.12); border: 1px solid rgba(232,168,124,.34); }
/* Leucht-Rahmen & Schein der Familien-Startseite in Rose Gold statt Lila/Blau */
.fam-hero { box-shadow: 0 30px 70px -30px rgba(232,168,124,.6); }
.fam-hero::before {
  background: radial-gradient(circle at 24% -6%, rgba(247,201,169,.42), transparent 52%),
              radial-gradient(circle at 84% 110%, rgba(217,139,160,.38), transparent 52%); }
.fam-hero::after { background: linear-gradient(120deg, #F7C9A9, #D98BA0, #E8A87C, #F7C9A9); background-size: 300% 300%; }
.fam-hero .auth-switch b { color: var(--rg-1); }
/* Familien-Auswahl bei der Registrierung (ey.4ever1.tv) */
.fam-pick { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.fam-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  padding: 13px 15px; border-radius: 14px; font-size: 15px; font-weight: 800; color: var(--text);
  background: var(--card-2); border: 1.5px solid var(--line); transition: border-color .15s, background .15s, transform .08s; }
.fam-opt .fo-em { font-size: 24px; }
.fam-opt:active { transform: scale(.985); }
.fam-opt.on { border-color: var(--rg-2); color: #fff;
  background: linear-gradient(160deg, rgba(247,201,169,.20), rgba(217,139,160,.08)), var(--card-2);
  box-shadow: 0 6px 20px rgba(232,168,124,.28); }
/* Schritt-Überschriften im Registrierungs-Formular */
.reg-step { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px;
  font-size: 12px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.reg-step:first-of-type { margin-top: 8px; }
.reg-step .rs-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-size: 12px; color: var(--on-brand); background: var(--grad); letter-spacing: 0; }

/* ══ Einladungscodes im Kontrollraum ══ */
.ic-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.ic-row .ic-main { min-width: 0; flex: 1; }
.ic-tasten { display: flex; flex-direction: column; gap: 6px; flex: none; }
/* Zwei Zeilen grauer Fliesstext waren schwer zu ueberfliegen. Chips trennen
   „was ist das" von „wie steht es" auf einen Blick. */
.ic-chip {
  /* margin-bottom, weil zwei Chips bei langen Texten umbrechen und
     sonst aufeinanderkleben. */
  display: inline-block; margin: 0 6px 4px 0; padding: 2px 8px;
  border-radius: 999px; font-size: 11.5px; font-weight: 700;
  background: var(--surface-2, rgba(255,255,255,.05));
  border: 1px solid var(--line-soft); color: var(--muted);
}
.ic-klein { font-size: 11.5px; opacity: .8; }

/* ── Frisch erstellt ───────────────────────────────────────────────
   Der Moment, um den es auf dieser Seite geht: Der Code ist da und muss
   jetzt zu einem Menschen. Deshalb steht er gross, und der Weg dorthin
   liegt direkt darunter. */
.ic-frisch {
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--brand) 12%, var(--card)),
    var(--card));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 12%, transparent),
              0 10px 30px rgba(0,0,0,.28);
  animation: icFrisch .4s ease both;
}
@keyframes icFrisch { from { opacity: 0; transform: translateY(-8px); } }
.ic-frisch-lbl {
  font-size: 11px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--brand-2, var(--brand));
}
.ic-gross {
  margin: 8px 0 2px;
  font-size: clamp(30px, 11vw, 44px); font-weight: 900;
  letter-spacing: .16em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--fg); cursor: pointer;
  -webkit-user-select: all; user-select: all;
}
.ic-gross:active { transform: scale(.98); }
.ic-frisch-sub { font-size: 12.5px; color: var(--muted); }
.ic-frisch-hint { margin-top: 8px; font-size: 11.5px; color: var(--muted); opacity: .85; }
@media (prefers-reduced-motion: reduce) { .ic-frisch { animation: none; } }
.ic-row:last-child { border-bottom: 0; }
.ic-main { flex: 1; min-width: 0; }
.ic-code { display: inline-flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 900;
  letter-spacing: 2.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer;
  padding: 5px 12px; border-radius: 11px; background: var(--card-2); border: 1px solid var(--line); }
.ic-code:active { transform: scale(.98); }
.ic-cp { font-size: 13px; opacity: .65; letter-spacing: 0; }
.ic-meta { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.ic-by { font-size: 12.5px; color: var(--accent, #37E0C8); margin-top: 4px; font-weight: 700; }
.ic-row.ic-free .ic-code { border-color: rgba(55,224,200,.42); }
.ic-row.ic-partly .ic-code { border-color: rgba(232,163,61,.45); }
.ic-row.ic-done, .ic-row.ic-off { opacity: .55; }
.ic-row.ic-off .ic-code { text-decoration: line-through; }

/* ══════════════════════════════════════════════════════════════════
   Familien-Modus: die ganze App in Rose Gold, sobald ein
   Familienmitglied eingeloggt ist (<body class="fam-mode">).
   Streamer bleiben bei Lila/Pink.
   ══════════════════════════════════════════════════════════════════ */
body.fam-mode {
  --brand:   #E8A87C;
  --brand-2: #D98BA0;
  --grad: linear-gradient(135deg, #E8A87C, #D98BA0);
}
body.fam-mode .topbar .brand b { background: linear-gradient(100deg, #F7C9A9, #D98BA0);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
body.fam-mode .edge-handle i { background: linear-gradient(180deg, #F7C9A9, #D98BA0); }
body.fam-mode .app-shell .edge-panel.right .edge-grid .edge-item {
  background: linear-gradient(162deg, rgba(247,201,169,.13), rgba(217,139,160,.05)), var(--card-2); }
body.fam-mode .app-shell .edge-grid .edge-item.active {
  background: linear-gradient(160deg, rgba(232,168,124,.34), rgba(217,139,160,.16)), var(--card-2);
  border-color: rgba(232,168,124,.55); box-shadow: 0 4px 16px rgba(232,168,124,.3); }
body.fam-mode .edge-close { box-shadow: 0 12px 34px rgba(0,0,0,.55), 0 0 26px rgba(232,168,124,.45), inset 0 1px 0 rgba(255,255,255,.16); }

/* ══ Familien-Ansichten: PK-Termine & Wer ist live ══ */
.fam-pk { padding: 0; overflow: hidden; }
.fp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(160deg, rgba(247,201,169,.12), transparent); }
.fp-head b { font-size: 16px; }
.fp-date { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.fp-list { display: flex; flex-direction: column; }
.fp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.fp-row:last-child { border-bottom: 0; }
.fp-row:active { background: var(--card-2); }
.fp-name { min-width: 0; } .fp-name b { font-size: 15px; }
.fp-vs { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.fp-right { display: flex; align-items: center; gap: 8px; flex: none; }
.fp-slot { font-size: 13px; font-weight: 800; color: var(--rg-1, #F7C9A9); }
.fp-res { font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.fp-res.fp-win  { color: #FFE9A8; background: rgba(232,163,61,.18); border: 1px solid rgba(232,163,61,.42); }
.fp-res.fp-loss { color: #CFC9DE; background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.fp-res.fp-draw { color: #BFE9E1; background: rgba(55,224,200,.14); border: 1px solid rgba(55,224,200,.34); }

.fam-live { display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--text); }
.fl-dot { width: 11px; height: 11px; border-radius: 50%; background: #FF3B3B; flex: none;
  box-shadow: 0 0 0 0 rgba(255,59,59,.7); animation: flPulse 1.6s infinite; }
@keyframes flPulse { 70% { box-shadow: 0 0 0 11px rgba(255,59,59,0); } 100% { box-shadow: 0 0 0 0 rgba(255,59,59,0); } }
.fl-main { flex: 1; min-width: 0; } .fl-main b { font-size: 15.5px; }
.fl-note { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.fl-go { font-size: 13px; font-weight: 800; color: var(--rg-1, #F7C9A9); flex: none; }

/* ══ Konto direkt anlegen (Inhaber/acp) ══ */
.nu-box { padding: 14px 16px; }
.nu-sum { cursor: pointer; font-weight: 800; font-size: 15.5px; list-style: none; }
.nu-sum::-webkit-details-marker { display: none; }
.nu-sum::before { content: '▸ '; color: var(--brand-2); }
details[open] .nu-sum::before { content: '▾ '; }
.nu-ok { margin-top: 12px; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(55,224,200,.14), rgba(177,75,255,.06)), var(--card-2); background: linear-gradient(160deg, rgba(55,224,200,.14), color-mix(in srgb, var(--brand) 6%, transparent)), var(--card-2);
  border: 1px solid rgba(55,224,200,.34); }
.nu-cred { margin-top: 8px; font-size: 14px; color: var(--muted); }
.nu-cred span { display: inline-block; margin-left: 4px; padding: 4px 11px; border-radius: 9px; cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; font-weight: 800; color: var(--text);
  background: var(--bg2, #12121C); border: 1px solid var(--line); }
.nu-cred span:active { transform: scale(.98); }
/* Benutzername in Verwaltungslisten – deutlich lesbar, klar vom Anzeigenamen getrennt */
.uname { font-size: 12.5px; font-weight: 700; color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--card-2); border: 1px solid var(--line);
  padding: 1px 7px; border-radius: 7px; margin-left: 4px; }

/* ══ mcp/acp: eigene Identität in der Kopfzeile ══ */
.brand.brand-mod { gap: 9px; }
.brand-shield { font-size: 22px; filter: drop-shadow(0 2px 6px rgba(177,75,255,.6)); filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--brand) 60%, transparent)); }
.brand.brand-mod b { background: linear-gradient(100deg, #C79BFF, #FF7BC0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: .5px; font-size: 19px; }
.ih-shield { font-size: 62px; text-align: center; margin-bottom: 6px;
  filter: drop-shadow(0 6px 20px rgba(177,75,255,.65)); filter: drop-shadow(0 6px 20px color-mix(in srgb, var(--brand) 65%, transparent)); }

/* ══ Aufklappbarer Kurz-Tipp statt Textwand (wichtig auf dem Handy) ══ */
.tip-box { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(177,75,255,.12), rgba(255,77,157,.05)), var(--card); background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 12%, transparent), rgba(255,77,157,.05)), var(--card);
  border: 1px solid var(--line); }
.tip-sum { cursor: pointer; list-style: none; font-weight: 800; font-size: 14.5px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tip-sum::-webkit-details-marker { display: none; }
.tip-more { font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  color: var(--brand-2); background: rgba(255,77,157,.12); border: 1px solid rgba(255,77,157,.3);
  padding: 3px 9px; border-radius: 999px; }
details[open] .tip-more { opacity: 0; }
.tip-steps { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.tip-steps li { font-size: 14px; color: #D7D5E4; line-height: 1.45; }
.tip-note { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft);
  font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ══ Kanal-Zielgruppe: wer sieht den Kanal? (klare Farben) ══
   🎬 Nur Streamer = lila · 🤝 Alle = grün · 👪 Nur Familie = rosé  */
.ce-auds { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ce-aud { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
  text-align: left; cursor: pointer; padding: 12px 14px; border-radius: 14px;
  background: var(--card-2); border: 1.5px solid var(--line); color: var(--text);
  transition: border-color .15s, background .15s, transform .08s; }
.ce-aud b { font-size: 15px; } .ce-aud small { font-size: 12.5px; color: var(--muted); }
.ce-aud:active { transform: scale(.985); }
.ce-aud.aud-s.on { border-color: var(--brand); background: linear-gradient(160deg, rgba(177,75,255,.22), transparent), var(--card-2); background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 22%, transparent), transparent), var(--card-2);
  box-shadow: 0 6px 18px var(--brand-glow); }
.ce-aud.aud-b.on { border-color: #2FD07F; background: linear-gradient(160deg, rgba(47,208,127,.22), transparent), var(--card-2);
  box-shadow: 0 6px 18px rgba(47,208,127,.28); }
.ce-aud.aud-b.on small, .ce-aud.aud-b.on b { color: #fff; }
.ce-aud.aud-f.on { border-color: #E8A87C; background: linear-gradient(160deg, rgba(232,168,124,.22), transparent), var(--card-2);
  box-shadow: 0 6px 18px rgba(232,168,124,.28); }

/* Abzeichen in der Kanal-Liste (nur fürs Team sichtbar) */
.aud-badge { display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 800;
  padding: 2px 9px; border-radius: 999px; border: 1px solid transparent; }
.aud-badge.aud-s { color: #D9BCFF; background: rgba(177,75,255,.15); background: color-mix(in srgb, var(--brand) 15%, transparent); border-color: rgba(177,75,255,.38); border-color: color-mix(in srgb, var(--brand) 38%, transparent); }
.aud-badge.aud-b { color: #A8ECC8; background: rgba(47,208,127,.16); border-color: rgba(47,208,127,.42); }
.aud-badge.aud-f { color: #FFD9BE; background: rgba(232,168,124,.16); border-color: rgba(232,168,124,.42); }

/* ══════════════════════════════════════════════════════════════════
   👪 Familien-Verwaltung – alles Familien-bezogene in GRÜN,
   damit es sich in der Moderations-App klar abhebt.
   ══════════════════════════════════════════════════════════════════ */
:root { --fam-1: #2FD07F; --fam-2: #1FA862; }
.kr-card.kr-fam { border-color: rgba(47,208,127,.42);
  background: linear-gradient(162deg, rgba(47,208,127,.16), rgba(47,208,127,.04)), var(--card-2); }
.kr-card.kr-fam .kr-name { color: #A8ECC8; }

.fa-hint { border-color: rgba(47,208,127,.34) !important;
  background: linear-gradient(160deg, rgba(47,208,127,.14), transparent), var(--card) !important; }
.fa-card { padding: 0; overflow: hidden; border-color: rgba(47,208,127,.3); }
.fa-head { display: flex; align-items: center; gap: 13px; padding: 14px 16px;
  background: linear-gradient(160deg, rgba(47,208,127,.16), transparent); }
.fa-em { font-size: 30px; filter: drop-shadow(0 3px 8px rgba(0,0,0,.4)); }
.fa-meta { flex: 1; min-width: 0; } .fa-meta b { font-size: 16px; display: block; }
.fa-cnt { font-size: 12.5px; color: #8FD9B4; font-weight: 700; }
.fa-list { display: flex; flex-direction: column; }
.fa-person { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 16px; border-top: 1px solid var(--line-soft); cursor: pointer; }
.fa-person:active { background: var(--card-2); }
.fa-pname { font-weight: 700; font-size: 14.5px; }
.fa-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
.fa-dot.on { background: var(--fam-1); box-shadow: 0 0 8px rgba(47,208,127,.8); }
.fa-tag { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  color: #A8ECC8; background: rgba(47,208,127,.14); border: 1px solid rgba(47,208,127,.36); }
.fa-tag.warn { color: #FFD9A8; background: rgba(232,163,61,.14); border-color: rgba(232,163,61,.4); }
.fa-empty { padding: 14px 16px; font-size: 13.5px; color: var(--muted); border-top: 1px solid var(--line-soft); }
.btn.fa-add, .btn.fa-save { background: linear-gradient(135deg, var(--fam-1), var(--fam-2)) !important;
  color: #06210F !important; font-weight: 900 !important;
  box-shadow: 0 8px 22px rgba(47,208,127,.34) !important; margin-top: 14px; }
/* „Nur Familie" ebenfalls grün (statt rosé) – konsistent in der Moderation */
.ce-aud.aud-f.on { border-color: var(--fam-1);
  background: linear-gradient(160deg, rgba(47,208,127,.22), transparent), var(--card-2);
  box-shadow: 0 6px 18px rgba(47,208,127,.28); }
.aud-badge.aud-f { color: #A8ECC8; background: rgba(47,208,127,.16); border-color: rgba(47,208,127,.42); }
.aud-badge.aud-b { color: #BFE9E1; background: rgba(55,224,200,.14); border-color: rgba(55,224,200,.36); }
.mem-badge.family { color: #A8ECC8; background: rgba(47,208,127,.16); border-color: rgba(47,208,127,.42); }

/* ══════════════════════════════════════════════════════════════════
   👑 acp.4ever1.tv – Inhaber-Reich in Gold.
   Klar unterscheidbar vom lila McP: wer hier ist, hat volle Kontrolle.
   ══════════════════════════════════════════════════════════════════ */
:root { --own-1: #FFD97A; --own-2: #E0A22B; --own-3: #8A5A05; }

/* Anmeldeseite */
.own-shield { background: linear-gradient(150deg, var(--own-1), var(--own-2) 55%, var(--own-3)) !important;
  box-shadow: 0 12px 34px rgba(224,162,43,.5) !important; }
.auth-own .mod-logo h1 { background: linear-gradient(100deg, var(--own-1), var(--own-2));
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* In der App */
body.own-mode { --brand: #E0A22B; --brand-2: #FFD97A;
  --grad: linear-gradient(135deg, #E0A22B, #FFD97A); }
body.own-mode .brand-shield { filter: drop-shadow(0 2px 6px rgba(224,162,43,.7)); }
body.own-mode .brand.brand-mod b { background: linear-gradient(100deg, var(--own-1), var(--own-2));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
body.own-mode .edge-handle i { background: linear-gradient(180deg, var(--own-1), var(--own-2)); }
body.own-mode .edge-close { box-shadow: 0 12px 34px rgba(0,0,0,.55), 0 0 26px rgba(224,162,43,.5), inset 0 1px 0 rgba(255,255,255,.16); }
body.own-mode .app-shell .edge-grid .edge-item.active {
  background: linear-gradient(160deg, rgba(224,162,43,.34), rgba(255,217,122,.14)), var(--card-2);
  border-color: rgba(224,162,43,.55); box-shadow: 0 4px 16px rgba(224,162,43,.3); }
/* Kontrollraum-Kacheln im Gold-Reich */
body.own-mode .kr-card { border-color: rgba(224,162,43,.26); }
body.own-mode .kr-card .kr-ic { filter: drop-shadow(0 3px 8px rgba(224,162,43,.35)); }
/* Familien bleiben grün – auch im Gold-Reich (bewusst nicht überschrieben) */
body.own-mode .kr-card.kr-fam { border-color: rgba(47,208,127,.42); }
/* Anmelde-Knopf im Inhaber-Reich ebenfalls in Gold */
.auth-own .btn.primary { background: linear-gradient(135deg, var(--own-2), var(--own-1)) !important;
  color: #2A1B00 !important; font-weight: 900 !important;
  box-shadow: 0 10px 26px rgba(224,162,43,.45) !important; }
.auth-own .auth-switch b, .auth-own [data-auth] { color: var(--own-1); }
/* Untertitel ohne störenden Hintergrund */
.auth-own .mod-logo p { background: none; color: var(--muted); }

/* ══════════════════════════════════════════════════════════════════
   🛡️ mcp.4ever1.tv – Moderation in Rosa · knalligem Pink · Blau.
   Klar unterscheidbar vom Gold des Inhaber-Reichs (acp).
   ══════════════════════════════════════════════════════════════════ */
:root { --mcp-rose: #FFC2DE; --mcp-pink: #FF2E93; --mcp-blue: #2246D6; --mcp-blue-2: #7A2BC4; }

/* Anmeldeseite */
.auth-mcp .mod-shield { background: linear-gradient(155deg, var(--mcp-rose) 0%, var(--mcp-pink) 42%, var(--mcp-blue) 100%) !important;
  box-shadow: 0 12px 34px rgba(255,46,147,.45) !important; }
.auth-mcp .mod-logo h1 { background: linear-gradient(100deg, var(--mcp-rose), var(--mcp-pink) 55%, #7FA8FF);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-mcp .btn.primary { background: linear-gradient(135deg, var(--mcp-pink), var(--mcp-blue)) !important;
  box-shadow: 0 10px 26px rgba(255,46,147,.42) !important; }
.auth-mcp .auth-switch b, .auth-mcp [data-auth] { color: var(--mcp-rose); }
.auth-mcp .mod-logo p { background: none; }

/* In der App */
body.mcp-mode { --brand: #FF2E93; --brand-2: #FFC2DE;
  --grad: linear-gradient(135deg, #FF2E93, #7A2BC4 60%, #2246D6); }
body.mcp-mode .brand-shield { filter: drop-shadow(0 2px 7px rgba(255,46,147,.7)); }
body.mcp-mode .brand.brand-mod b { background: linear-gradient(100deg, var(--mcp-rose), var(--mcp-pink) 55%, #7FA8FF);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
body.mcp-mode .edge-handle i { background: linear-gradient(180deg, var(--mcp-rose), var(--mcp-pink) 55%, var(--mcp-blue)); }
body.mcp-mode .edge-close { box-shadow: 0 12px 34px rgba(0,0,0,.55), 0 0 26px rgba(255,46,147,.5), inset 0 1px 0 rgba(255,255,255,.16); }
body.mcp-mode .app-shell .edge-grid .edge-item.active {
  background: linear-gradient(160deg, rgba(255,46,147,.3), rgba(34,70,214,.16)), var(--card-2);
  border-color: rgba(255,46,147,.55); box-shadow: 0 4px 16px rgba(255,46,147,.28); }
body.mcp-mode .kr-card { border-color: rgba(255,46,147,.24); }
body.mcp-mode .kr-card .kr-ic { filter: drop-shadow(0 3px 8px rgba(255,46,147,.35)); }
/* Familien bleiben grün – auch hier bewusst nicht überschrieben */
body.mcp-mode .kr-card.kr-fam { border-color: rgba(47,208,127,.42); }
/* Anmeldeseite der internen Bereiche: bewusst wortkarg (verrät nichts über Rollen/Zweck) */
.mod-quiet { color: var(--muted) !important; background: none !important;
  font-size: 12px !important; letter-spacing: .08em !important; opacity: .7; }

/* ══════════════════════════════════════════════════════════════════
   Melden & Blockieren
   Der „⋯"-Knopf sitzt an jedem fremden Inhalt. Er soll da sein, wenn
   man ihn braucht – und sonst nicht ins Auge stechen. Deshalb blass,
   und erst beim Antippen deutlich.
   ══════════════════════════════════════════════════════════════════ */
.more-btn { background: none; border: 0; color: var(--muted-2); font-size: 19px; line-height: 1;
  padding: 2px 7px; border-radius: 9px; cursor: pointer; opacity: .55; flex: 0 0 auto;
  transition: opacity .16s ease, background .16s ease, color .16s ease; }
.more-btn:hover, .more-btn:focus-visible { opacity: 1; color: var(--text); background: var(--card-2); }
.more-btn:active { transform: scale(.9); }
.post-acts { margin-left: auto; display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.crow .more-btn { font-size: 16px; padding: 0 5px; }
.msg > .more-btn, .gb-head > .more-btn, .gbc-c > .more-btn { align-self: center; }

/* Melde-Blatt: ein Tipp genügt.
   Die Gründe stehen als Kachel-Raster – zwei Spalten, Symbol über dem Wort.
   So passt die ganze Auswahl ohne Scrollen auf den Bildschirm. */
.rep-ex { margin-top: 10px; padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--card-2); border: 1px solid var(--line-soft); color: var(--muted);
  font-size: 13.5px; font-style: italic; max-height: 84px; overflow: auto; }
.rep-warn { margin-top: 8px; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 12.5px;
  background: rgba(55,224,200,.09); border: 1px solid rgba(55,224,200,.28); color: var(--text); }
.rep-extra { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 4px; }
.rep-x { border: 1px solid var(--line-soft); background: var(--card-2); color: var(--muted);
  border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.rep-x.on { border-color: var(--brand); color: var(--text);
  background: linear-gradient(135deg, rgba(177,75,255,.2), rgba(255,77,157,.12)); background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 20%, transparent), rgba(255,77,157,.12)); }
.rep-note { width: 100%; margin-top: 8px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--card-2); border: 1px solid var(--line-soft); color: var(--text);
  font-family: inherit; font-size: 14.5px; resize: vertical; }
.rep-lbl { margin: 14px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted-2); }
.rep-reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.rep-r { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; min-height: 80px; padding: 12px 8px; text-align: center; cursor: pointer;
  border-radius: var(--radius-sm); background: var(--card-2); border: 1px solid var(--line-soft);
  color: var(--text); font-size: 13.5px; font-weight: 600; line-height: 1.25;
  transition: border-color .14s ease, background .14s ease, transform .1s ease; }
.rep-r:active { transform: scale(.96); }
.rep-r .rep-ic { font-size: 23px; line-height: 1; }
.rep-r.on { border-color: var(--brand); background: linear-gradient(135deg, rgba(177,75,255,.2), rgba(255,77,157,.12)); background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 20%, transparent), rgba(255,77,157,.12));
  box-shadow: 0 0 0 1px var(--brand) inset; }
.rep-foot { margin-top: 12px; font-size: 11.5px; color: var(--muted-2); text-align: center; line-height: 1.45; }

/* Kontrollraum: Meldungs-Karten */
.rep-line { margin-top: 6px; font-size: 13px; color: var(--text); display: flex;
  flex-wrap: wrap; align-items: baseline; gap: 5px; }
.rep-tag { color: var(--muted-2); font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; }
.seg { display: inline-flex; gap: 3px; margin: 10px 0 4px; padding: 3px;
  background: var(--card-2); border: 1px solid var(--line-soft); border-radius: 999px; }
.seg-b { border: 0; background: none; color: var(--muted); cursor: pointer;
  padding: 6px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.seg-b.on { background: var(--grad); color: var(--on-brand); box-shadow: var(--shadow-sm); }
.ca-row.danger .ca-txt b { color: #FF8A8A; }
/* Meldungs-Karte: langer Grund darf umbrechen, Datum rutscht nicht weg */
.flag-card .row-between { align-items: flex-start; gap: 10px; }
.flag-card .flag-lbl { line-height: 1.25; }
.flag-card .row-between > .muted.tiny { flex: 0 0 auto; white-space: nowrap; padding-top: 2px; }
/* Der ⋯-Knopf in Sonderlagen: Pinnwand-Zettel, Story-Kopf, Wunsch-Karte */
.bp .more-btn { position: absolute; right: 2px; bottom: 0; font-size: 15px; opacity: .4; }
.sv-head .more-btn { color: #fff; opacity: .75; font-size: 22px; }
.wish-top .more-btn { margin-left: auto; }

/* ══════════════════════════════════════════════════════════════════
   Schreibfeld: zugeklappt eine Zeile
   Ausgeklappt war es 575 px hoch – auf einem 320er-Handy höher als der
   ganze Bildschirm. Man musste zwei Bildschirmlängen scrollen, bevor der
   erste Beitrag kam. Jetzt: eine Zeile, ein Tipp, dann alles wie gehabt.
   ══════════════════════════════════════════════════════════════════ */
.composer.collapsed > *:not(.c-stub) { display: none; }
.composer:not(.collapsed) > .c-stub { display: none; }
.composer.collapsed { padding: 9px; }
.c-stub { display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 8px; border: 0; background: none; cursor: pointer; text-align: left; }
.c-stub .avatar { flex: 0 0 auto; }
.c-stub-txt { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 999px;
  background: var(--card-2); border: 1px solid var(--line-soft); color: var(--muted);
  font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-stub-ic { flex: 0 0 auto; font-size: 20px; padding-right: 4px; }
.c-stub:active .c-stub-txt { border-color: var(--brand); }
/* Ganz kleine Handys (≤360 px): Der Fragesatz im Schreibfeld passt sonst
   nicht in die Pille und wird mitten im Namen abgeschnitten. */
@media (max-width: 360px) {
  .c-stub { gap: 8px; padding: 6px 4px; }
  .c-stub-txt { padding: 9px 11px; font-size: 13.5px; }
  .c-stub .avatar.sm { width: 30px; height: 30px; font-size: 12px; }
  .c-stub-ic { font-size: 18px; }
}

/* ══════════════════════════════════════════════════════════════════
   🔴 Live gehen in der Kopfleiste
   War vorher nur auf der Startseite erreichbar – die wichtigste Handlung
   im Alltag hinter einem Scrollvorgang. Jetzt von überall, ein Tipp.
   ══════════════════════════════════════════════════════════════════ */
.golive-btn { font-size: 17px; }
.golive-btn.on { animation: live-puls 1.7s ease-in-out infinite;
  box-shadow: 0 0 0 2px rgba(255,60,80,.5), 0 0 16px rgba(255,60,80,.55); }
@keyframes live-puls {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255,60,80,.5), 0 0 14px rgba(255,60,80,.45); }
  50%      { box-shadow: 0 0 0 2px rgba(255,60,80,.8), 0 0 24px rgba(255,60,80,.8); }
}
@media (prefers-reduced-motion: reduce) { .golive-btn.on { animation: none; } }

/* ══════════════════════════════════════════════════════════════════
   Der Empfang auf der Startseite
   Ein warmer Block in den 4ever1-Farben statt drei grauer Streifen.
   Alles gleichzeitig sichtbar – kein Karussell, auf das man warten muss.
   ══════════════════════════════════════════════════════════════════ */
.home-hero { position: relative; overflow: hidden; margin: 2px 0 12px;
  padding: 15px 16px 14px; border-radius: var(--radius);
  background: radial-gradient(120% 150% at 0% 0%, rgba(177,75,255,.28), transparent 58%),
    radial-gradient(110% 140% at 100% 10%, rgba(255,77,157,.22), transparent 60%),
    linear-gradient(155deg, var(--card-2), var(--card) 78%); background: radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--brand) 28%, transparent), transparent 58%),
    radial-gradient(110% 140% at 100% 10%, rgba(255,77,157,.22), transparent 60%),
    linear-gradient(155deg, var(--card-2), var(--card) 78%);
  border: 1px solid rgba(177,75,255,.26);
  box-shadow: 0 12px 32px -18px var(--brand-glow), var(--shadow-sm); }
/* Der Lichtschimmer oben rechts – die Unendlichkeitsschleife als Andeutung. */
.home-hero .hh-glow { position: absolute; right: -34px; top: -46px; width: 168px; height: 168px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(55,224,200,.20), transparent 66%); }
.hh-row { display: flex; align-items: center; gap: 10px; position: relative; }
.hh-greet { font-size: 19px; font-weight: 800; letter-spacing: -.2px; line-height: 1.2;
  flex: 1; min-width: 0; }
.hh-greet b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hh-streak { flex: 0 0 auto; font-size: 12.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px;
  background: rgba(255,176,32,.15); border: 1px solid rgba(255,176,32,.4); color: #FFCB6B; }
.hh-hype { margin-top: 3px; font-size: 13.5px; color: var(--muted); line-height: 1.35; position: relative; }
.hh-chips { display: flex; gap: 7px; margin-top: 12px; position: relative;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hh-chips::-webkit-scrollbar { display: none; }
.hh-chip { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: rgba(255,255,255,.055); border: 1px solid var(--line-soft); color: var(--text); }
.hh-chip:active { transform: scale(.96); }
.hh-chip.hot { background: linear-gradient(135deg, rgba(177,75,255,.3), rgba(255,77,157,.2)); background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 30%, transparent), rgba(255,77,157,.2));
  border-color: rgba(255,77,157,.5); }
.hh-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 8px var(--ok); }
@media (max-width: 360px) {
  .home-hero { padding: 13px 13px 12px; }
  .hh-greet { font-size: 17.5px; }
}
/* Der 🔴-Knopf in der Kopfleiste kostet Platz: Auf schmalen Geräten brach
   „PK-Board" sonst auf zwei Zeilen um und die Leiste wurde doppelt hoch. */
.topbar .brand { min-width: 0; flex-shrink: 1; }
.topbar .brand b { white-space: nowrap; }
@media (max-width: 380px) {
  .topbar .brand b { font-size: 15px; }
  .topbar .brand { gap: 7px; }
  .topbar .brand .brand-logo { height: 26px; }
  .topbar .icon-btn { width: 38px; height: 38px; }
}
/* Ganz schmal: Das Logo IST die Marke – das Wort kann weg, bevor es bricht. */
@media (max-width: 330px) {
  .topbar .brand b { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   Passwort vergessen
   Zwei Wege ohne Mailserver: Push aufs eigene Handy oder ein Code,
   den die Teamleitung vorliest.
   ══════════════════════════════════════════════════════════════════ */
.pw-or { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px;
  color: var(--muted-2); font-size: 12px; }
.pw-or::before, .pw-or::after { content: ''; flex: 1; height: 1px; background: var(--line-soft); }
.pw-done { font-size: 42px; text-align: center; margin-bottom: 8px; line-height: 1; }
/* Code-Eingabe: gesperrt breit und groß, damit man sich beim Abtippen nicht vertut. */
.pw-code { text-transform: uppercase; letter-spacing: .16em; font-size: 18px !important;
  font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.pw-codebox { margin: 14px 0; padding: 16px 12px; border-radius: var(--radius-sm);
  background: var(--card-2); border: 1px dashed rgba(177,75,255,.5); border: 1px dashed color-mix(in srgb, var(--brand) 50%, transparent);
  text-align: center; font-size: 27px; font-weight: 900; letter-spacing: .16em;
  font-variant-numeric: tabular-nums; user-select: all;
  background-image: linear-gradient(135deg, rgba(177,75,255,.1), rgba(255,77,157,.06)); background-image: linear-gradient(135deg, color-mix(in srgb, var(--brand) 10%, transparent), rgba(255,77,157,.06)); }
@media (max-width: 360px) { .pw-codebox { font-size: 22px; letter-spacing: .1em; } }

/* ══════════════════════════════════════════════════════════════════
   Das Logo wandert durch die Farben
   Langsam (12 s) und in vollen Runden – schnelles Blinken wäre Kirmes
   und würde beim Lesen der Kopfzeile stören. Wer im System „weniger
   Bewegung" eingestellt hat, sieht das Logo unverändert.
   ══════════════════════════════════════════════════════════════════ */
@keyframes logo-regenbogen {
  0%   { filter: hue-rotate(0deg)   saturate(1)    drop-shadow(0 1px 5px rgba(0,0,0,.55)); }
  50%  { filter: hue-rotate(180deg) saturate(1.25) drop-shadow(0 1px 7px rgba(0,0,0,.55)); }
  100% { filter: hue-rotate(360deg) saturate(1)    drop-shadow(0 1px 5px rgba(0,0,0,.55)); }
}
.topbar .brand .brand-logo,
.auth-logo .mark-logo,
.edge-panel .ep-logo {
  animation: logo-regenbogen 12s linear infinite;
}
/* Unter dem offenen Menue sieht man das Kopfleisten-Logo nicht. */
.app-shell.menu-open .topbar .brand .brand-logo { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .topbar .brand .brand-logo,
  .auth-logo .mark-logo,
  .edge-panel .ep-logo { animation: none; }
}

/* Wer sein Zeichen festgehalten hat, bekommt es in SEINER Farbe: dieselbe
   Acht, nur anders eingefärbt (Migration 094). Ein Bild für alle – acht
   Dateien zu pflegen wäre acht Gelegenheiten, eine zu vergessen. */
body.emblem-fest .topbar .brand .brand-logo,
body.emblem-fest .auth-logo .mark-logo,
body.emblem-fest .edge-panel .ep-logo {
  animation: none;
  filter: hue-rotate(var(--emblem-hue, 0deg)) saturate(var(--emblem-sat, 1))
          drop-shadow(0 1px 5px rgba(0,0,0,.55));
}

/* ══════════════════════════════════════════════════════════════════
   PK: mitmachen – oder eben nicht
   Beides direkt auf der Karte. Wer zusagt, soll einmal tippen müssen;
   wer nicht mag, soll genauso leicht absagen können, ohne sich
   durchklicken zu müssen. Absagen ist kein Fehler, deshalb ist der
   Knopf ruhig und nicht rot.
   ══════════════════════════════════════════════════════════════════ */
.an-pk-card > .an-pk-link { display: block; color: inherit; }
.an-pk-yn { display: flex; gap: 8px; padding: 0 12px 12px; }
.pk-yn { flex: 1; padding: 10px 8px; border-radius: 999px; cursor: pointer;
  font-size: 13.5px; font-weight: 800; font-family: inherit;
  border: 1px solid var(--line-soft); background: rgba(255,255,255,.05); color: var(--text);
  transition: transform .1s ease, border-color .15s ease, background .15s ease; }
.pk-yn:active { transform: scale(.96); }
.pk-yn:disabled { opacity: .55; }
.pk-yn.in.on { background: linear-gradient(135deg, var(--ok), #17b06a); border-color: transparent;
  color: #04240f; box-shadow: 0 6px 18px -8px rgba(46,212,122,.8); }
.pk-yn.out.on { background: var(--card-2); border-color: var(--line); color: var(--muted); }
.pk-yn.in:not(.on) { border-color: rgba(46,212,122,.45); color: #8CF0BC; }

/* ══════════════════════════════════════════════════════════════════
   🔎 Verläufe – die Leseansicht der Moderation
   Bewusst KEINE Sprechblasen: eine Spur, eine Zeile pro Sache, Herkunft
   und Uhrzeit immer sichtbar. Wer moderiert, will überfliegen können,
   nicht mitlesen.
   ══════════════════════════════════════════════════════════════════ */
.vl-filter { display: flex; gap: 7px; margin-top: 8px; flex-wrap: wrap; }
.vl-inp { flex: 1 1 130px; min-width: 0; padding: 9px 11px; border-radius: var(--radius-sm);
  background: var(--card-2); border: 1px solid var(--line-soft); color: var(--text);
  font-family: inherit; font-size: 13.5px; }
.vl-liste { display: flex; flex-direction: column; }
.vl-row { display: flex; gap: 10px; padding: 10px 2px; border-top: 1px solid var(--line-soft); }
.vl-row:first-child { border-top: 0; }
.vl-row.weg { opacity: .62; }
.vl-row.weg .vl-text { text-decoration: line-through; text-decoration-color: rgba(255,90,90,.6); }
.vl-when { flex: 0 0 auto; width: 52px; font-size: 11.5px; color: var(--muted-2);
  font-variant-numeric: tabular-nums; line-height: 1.5; padding-top: 2px; }
.vl-mid { flex: 1; min-width: 0; }
.vl-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 2px; }
.vl-tag { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted-2); }
.vl-ort { font-size: 10.5px; padding: 1px 7px; border-radius: 999px;
  background: var(--card-2); border: 1px solid var(--line-soft); color: var(--muted); }
.vl-del { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; font-weight: 800;
  background: rgba(255,90,90,.14); border: 1px solid rgba(255,90,90,.4); color: #FF9C9C; }
.vl-edit { font-size: 10.5px; padding: 1px 7px; border-radius: 999px;
  background: rgba(255,176,32,.12); border: 1px solid rgba(255,176,32,.35); color: #FFCB6B; }
.vl-who { font-size: 13px; font-weight: 800; }
.vl-who a { color: var(--text); }
.vl-text { font-size: 14px; line-height: 1.4; margin-top: 2px; overflow-wrap: anywhere; }
.vl-ziel, .vl-img, .vl-att { display: block; font-size: 11.5px; color: var(--muted-2); margin-top: 3px; }
.vl-img { color: var(--brand-2); }
.vl-acts { flex: 0 0 auto; display: flex; align-items: flex-start; gap: 4px; padding-top: 2px; }
.btn.xs { padding: 4px 8px; font-size: 12px; border-radius: 9px; }
@media (max-width: 360px) { .vl-when { width: 44px; font-size: 11px; } }

/* ══════════════════════════════════════════════════════════════════
   Verwaltungsraum & Hochsicherheit
   Einladend, aber nicht laut. Wer hier arbeitet, trifft Entscheidungen
   über Menschen – das darf sich ruhig anfühlen. Kein Neon, keine
   Dauer-Animation; Wärme kommt aus Farbe und Abstand, nicht aus Effekt.
   ══════════════════════════════════════════════════════════════════ */
body.mcp-mode, body.own-mode { --grad: linear-gradient(135deg, #7C4DFF, #C86DD7 60%, #4A7BFF); }

/* Ruhigerer Empfang statt Neon-Banner */
body.mcp-mode .mcp-hero, body.own-mode .mcp-hero {
  border-radius: var(--radius); padding: 18px 18px 16px; margin-bottom: 14px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 16px 40px -26px rgba(0,0,0,.9); }
body.mcp-mode .mcp-hero {
  background:
    radial-gradient(120% 150% at 0% 0%, rgba(124,77,255,.26), transparent 60%),
    radial-gradient(100% 130% at 100% 0%, rgba(200,109,215,.16), transparent 62%),
    linear-gradient(160deg, #1a1526, #14111c 80%); }
body.own-mode .mcp-hero {
  background:
    radial-gradient(120% 150% at 0% 0%, rgba(224,162,43,.22), transparent 60%),
    radial-gradient(100% 130% at 100% 0%, rgba(255,90,90,.12), transparent 62%),
    linear-gradient(160deg, #1e1a12, #14120e 80%);
  border-color: rgba(224,162,43,.26); }

.mcp-realm { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); }
.mcp-greet { font-size: 21px; font-weight: 800; letter-spacing: -.3px; margin-top: 8px; line-height: 1.2; }
.mcp-greet b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mcp-sub { margin-top: 5px; font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.mcp-todo { margin-top: 14px; width: 100%; padding: 12px 14px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 700; font-family: inherit; text-align: left; cursor: pointer;
  border: 1px solid var(--line-soft); background: rgba(255,255,255,.05); color: var(--text); }
.mcp-todo.hot { border-color: rgba(255,176,32,.45); background: rgba(255,176,32,.12); color: #FFD79A; }
.mcp-todo.ok { cursor: default; color: var(--muted); }

/* Kennzahlen: sachlich, gleich groß, ohne Glühen */
.mcp-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.mcp-metric { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 12px; border-radius: var(--radius-sm); cursor: pointer; font-family: inherit;
  background: var(--card); border: 1px solid var(--line-soft); color: var(--text); text-align: left; }
.mcp-metric.hot { border-color: rgba(255,176,32,.4); }
.mcp-metric-ic { font-size: 16px; }
.mcp-metric-n { font-size: 22px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mcp-metric-l { font-size: 11px; color: var(--muted); line-height: 1.25; }

/* Bereichs-Kacheln: klar lesbar, kein Karneval */
body.mcp-mode .kr-card, body.own-mode .kr-card {
  border-color: var(--line-soft); background: var(--card); box-shadow: none; }
body.mcp-mode .kr-card:active, body.own-mode .kr-card:active { transform: scale(.985); }
body.mcp-mode .kr-card .kr-ic, body.own-mode .kr-card .kr-ic { filter: none; }
body.mcp-mode .kr-card.kr-fam { border-color: rgba(47,208,127,.34); }
.kr-lbl { margin: 20px 2px 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); }

/* Im Verwaltungsraum ruht die Aurora – der Hintergrund soll nicht wabern */
body.mcp-mode .aurora, body.own-mode .aurora { display: none; }

/* ══════════════════════════════════════════════════════════════════
   🎬 Auditions & 🛡️ Hochsicherheit
   ══════════════════════════════════════════════════════════════════ */
.au-flow { display: flex; align-items: stretch; gap: 6px; margin: 4px 0 14px; }
.au-step { flex: 1; display: flex; gap: 8px; align-items: center; padding: 10px;
  border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--line-soft); }
.au-step b { display: block; font-size: 12.5px; line-height: 1.2; }
.au-step .tiny { font-size: 10.5px; }
.au-n { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad); color: var(--on-brand); font-size: 11px; font-weight: 900; }
.au-arrow { align-self: center; color: var(--muted-2); font-size: 14px; }
@media (max-width: 420px) { .au-flow { flex-direction: column; } .au-arrow { display: none; } }
.au-go { margin-top: 4px; }
.au-code { flex: 0 0 auto; font-weight: 900; font-size: 14px; letter-spacing: .08em;
  font-variant-numeric: tabular-nums; }

.si-lage { display: flex; gap: 12px; align-items: center; padding: 15px;
  border-radius: var(--radius); margin-bottom: 12px; border: 1px solid var(--line-soft); background: var(--card); }
.si-lage .si-ic { font-size: 30px; line-height: 1; }
.si-lage b { font-size: 17px; }
.si-lage.ok { border-color: rgba(46,212,122,.45); background: linear-gradient(150deg, rgba(46,212,122,.1), var(--card) 70%); }
.si-lage.warn { border-color: rgba(255,176,32,.5); background: linear-gradient(150deg, rgba(255,176,32,.12), var(--card) 70%); }
.si-lage.bad { border-color: rgba(255,90,90,.55); background: linear-gradient(150deg, rgba(255,90,90,.14), var(--card) 70%); }
.si-hinweis { padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13.5px; line-height: 1.4;
  background: rgba(255,176,32,.1); border: 1px solid rgba(255,176,32,.35); color: #FFD79A; }
.si-hinweis.bad { background: rgba(255,90,90,.12); border-color: rgba(255,90,90,.45); color: #FFB9B9; }
.si-ip { flex: 0 0 auto; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); }

/* ══════════════════════════════════════════════════════════════════
   Konferenz: Melden und Stummschalten
   Bei acht Leuten im Gespräch ist „wer redet gerade" die halbe Miete.
   Deshalb sieht man Stumm und erhobene Hand direkt auf der Kachel.
   ══════════════════════════════════════════════════════════════════ */
.rtc-hand { position: absolute; top: 6px; left: 6px; font-size: 20px;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.7)); animation: hand-winkt 1.6s ease-in-out infinite; }
@keyframes hand-winkt { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.rtc-tile.meldet { outline: 2px solid var(--warn); outline-offset: -2px; }
.rtc-ctl.an { background: var(--grad); color: var(--on-brand); }
@media (prefers-reduced-motion: reduce) { .rtc-hand { animation: none; } }
/* Auszeit-Stufen: eine Spalte, große Ziele – man wählt sie im Ärger, nicht in Ruhe */
.az-stufen { display: flex; flex-direction: column; gap: 7px; }
.az-stufen .rep-r { flex-direction: row; justify-content: center; min-height: 0; padding: 12px; font-size: 14.5px; }
/* KI-Einwilligung: was hingeht und was nicht, auf einen Blick */
.ki-box { display: flex; flex-direction: column; gap: 9px; margin: 14px 0; }
.ki-zeile { display: flex; gap: 10px; padding: 11px 12px; border-radius: var(--radius-sm);
  background: var(--card-2); border: 1px solid var(--line-soft); font-size: 13px; line-height: 1.4; }
.ki-zeile > span { font-size: 17px; flex: 0 0 auto; }
.ki-zeile.ja { border-color: rgba(46,212,122,.35); }
.ki-zeile.nein { border-color: rgba(55,224,200,.4); background: rgba(55,224,200,.07); }

/* ═══════════════════════════════════════════════════════════════════
   🃏 Eins! – echte Karten, komplett in CSS.
   Keine Bilder: lädt sofort, bleibt auf jedem Bildschirm scharf und lässt
   sich in jeder Größe verwenden (Hand, Ablage, kleine Vorschau).
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --uno-r: #ee2b2b; --uno-g: #17a54a; --uno-b: #1f6fe0; --uno-y: #ffb703;
}
.uk {
  position: relative; width: 68px; height: 100px; flex: none;
  border-radius: 10px; border: 2.5px solid #fdfdfd; overflow: hidden;
  background: #333; box-shadow: 0 5px 14px rgba(0,0,0,.5);
  transition: transform .16s cubic-bezier(.2,.9,.3,1.3), box-shadow .16s, filter .16s;
}
.uk.klein { width: 44px; height: 65px; border-width: 2px; border-radius: 7px; }
.uk.f-r { background: var(--uno-r); } .uk.f-g { background: var(--uno-g); }
.uk.f-b { background: var(--uno-b); } .uk.f-y { background: var(--uno-y); }
.uk.wunsch { background: #1a1a1a; }
/* ── Eigener Kartenlook ──────────────────────────────────────────────
   Bewusst OHNE die schräge weiße Ellipse: Die ist das Erkennungszeichen
   einer bekannten Kartenmarke und damit fremdes Design. Unsere Karte lebt
   von der satten Farbfläche, einer großen weißen Zahl und einem feinen
   Lichtstreifen. Das liest sich in klein sogar besser – eine weiße Ziffer
   auf Farbe hat mehr Kontrast als eine farbige Ziffer auf Weiß. */
.uk-glanz {
  position: absolute; left: 0; right: 0; top: 0; height: 52%;
  background: linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,0));
  border-radius: 8px 8px 60% 60% / 8px 8px 26% 26%;
}
/* Hairline-Rahmen innen: lässt die Karte gedruckt wirken statt aufgemalt. */
.uk::before {
  content: ''; position: absolute; inset: 0; border-radius: 7px; z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 2px 6px rgba(255,255,255,.1),
              inset 0 -10px 18px rgba(0,0,0,.18);
}
/* Das Zeichen der Agentur, hauchzart hinter der Zahl. Man sieht es erst auf
   den zweiten Blick – genau so soll eine Marke auf einer Spielkarte sitzen. */
.uk:not(.rueck)::after {
  content: ''; position: absolute; left: 50%; bottom: 8%; width: 56%; height: 17%;
  transform: translateX(-50%); z-index: 1; opacity: .22; pointer-events: none;
  background-image: url('/logo.png?v=3');
  background-size: contain; background-position: center; background-repeat: no-repeat;
  filter: brightness(0) invert(1);          /* rein weiße Silhouette */
  mix-blend-mode: overlay;
}
.uk.klein:not(.rueck)::after { bottom: 7%; height: 18%; }
.uk-mid {
  position: absolute; inset: 0 0 12% 0; display: grid; place-items: center;
  font-size: 42px; font-weight: 900; line-height: 1; letter-spacing: -.04em;
  color: #fff; z-index: 2;
  /* Harter Versatz statt Weichzeichner: Ein weicher Schatten frisst die
     Kanten und lässt Weiß grau aussehen. */
  text-shadow: 0 2px 0 rgba(0,0,0,.3);
}
.uk.klein .uk-mid { font-size: 25px; text-shadow: 0 1.5px 0 rgba(0,0,0,.3); }
.uk-ecke {
  position: absolute; font-size: 13px; font-weight: 900; color: #fff; z-index: 3;
  opacity: .92; text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.uk-ecke.lo { top: 5px; left: 6px; }
.uk-ecke.ru { bottom: 5px; right: 6px; transform: rotate(180deg); }
.uk.klein .uk-ecke { font-size: 9px; }

/* Wunschkarte: vier getrennte Farbpunkte statt eines Farbrads. */
.uk.wunsch { background: linear-gradient(160deg, #241a30, #14101c); }
.uk-punkte {
  position: absolute; inset: 0; display: grid; place-items: center;
  grid-template-columns: 1fr 1fr; gap: 26% 26%; padding: 16%;
}
.uk-punkte i { width: 100%; aspect-ratio: 1; border-radius: 50%; display: block; }
.uk-punkte i:nth-child(1) { background: var(--uno-r); }
.uk-punkte i:nth-child(2) { background: var(--uno-y); }
.uk-punkte i:nth-child(3) { background: var(--uno-g); }
.uk-punkte i:nth-child(4) { background: var(--uno-b); }
.uk.wunsch .uk-mid { font-size: 30px; text-shadow: 0 2px 6px rgba(0,0,0,.7); }
.uk.klein.wunsch .uk-mid { font-size: 18px; }

/* ── Rückseite: unser Zeichen ────────────────────────────────────────
   Die Rückseite sieht man häufiger als jede Vorderseite – Ziehstapel und
   die Hände der Mitspieler bestehen nur daraus. Also gehört dort das
   Logo hin und nicht ein Platzhalter-Schriftzug. */
.uk.rueck {
  background:
    radial-gradient(70% 55% at 50% 45%, rgba(255,255,255,.16), transparent 70%),
    linear-gradient(150deg, #3a1a5c 0%, #24123a 55%, #160c22 100%);
  display: grid; place-items: center; overflow: hidden;
}
/* Feiner Doppelrahmen wie bei einer gedruckten Karte. */
.uk.rueck::before {
  content: ''; position: absolute; inset: 6px; border-radius: 5px;
  border: 1px solid rgba(255,255,255,.16);
}
.uk.klein.rueck::before { inset: 4px; }
/* Zartes Rautenmuster im Hintergrund – gibt Tiefe, ohne laut zu sein. */
.uk.rueck::after {
  content: ''; position: absolute; inset: 0; opacity: .12;
  background-image:
    repeating-linear-gradient(45deg, #fff 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, #fff 0 1px, transparent 1px 9px);
}
.uk-logo {
  position: relative; z-index: 2;
  display: block; width: 74%; height: 42%;
  background-image: url('/logo.png?v=3');
  background-size: contain; background-position: center; background-repeat: no-repeat;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(255,95,158,.35));
  text-indent: -9999px; overflow: hidden;
}

/* Spielbare Karte hebt sich an – man sieht sofort, was geht. */
.uk.spielbar { cursor: pointer; box-shadow: 0 0 0 2px #fff, 0 8px 18px rgba(0,0,0,.5); }
.uk.spielbar:hover { transform: translateY(-12px); }
.uk.spielbar:active { transform: translateY(-6px) scale(.97); }
.uk:not(.spielbar):not(.rueck) { filter: brightness(.62) saturate(.7); }
.uk.gelegt { transform: translateY(-60px) scale(.8); opacity: 0; }

/* Auffächern – in der Lobby und als Vorschau. */
.uno-fan { display: flex; justify-content: center; }
.uno-fan .uk:not(:first-child) { margin-left: -18px; }
.uno-fan .uk:nth-child(1) { transform: rotate(-9deg); }
.uno-fan .uk:nth-child(2) { transform: rotate(-3deg); }
.uno-fan .uk:nth-child(3) { transform: rotate(3deg); }
.uno-fan .uk:nth-child(4) { transform: rotate(9deg); }

.uno-intro { text-align: center; padding: 14px 6px 4px; }
.uno-intro-t { margin-top: 14px; font-size: 13.5px; line-height: 1.55; color: var(--muted, #b9b0c9); }
.uno-row-ic { font-size: 21px; width: 34px; text-align: center; flex: none; }

.uno-lobby { text-align: center; padding: 16px 8px; }
.uno-lobby-n { margin-top: 14px; font-size: 16px; font-weight: 800; }
.uno-sitz { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 14px 0; }
.uno-sitzplatz { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px;
  background: var(--card-2, rgba(255,255,255,.05)); font-size: 13px; font-weight: 700; }

/* Gegner oben: Avatar, Kartenzahl, „Eins!“-Ruf, „Erwischt!" */
.uno-gegner { display: flex; gap: 9px; overflow-x: auto; padding: 10px 2px; scrollbar-width: none; }
.uno-gegner::-webkit-scrollbar { display: none; }
.uno-g { flex: none; min-width: 92px; text-align: center; padding: 9px 8px; border-radius: 15px;
  background: var(--card-2, rgba(255,255,255,.04)); border: 1.5px solid transparent; position: relative; }
.uno-g.dran { border-color: var(--brand); background: rgba(177,75,255,.13); background: color-mix(in srgb, var(--brand) 13%, transparent); box-shadow: 0 0 16px var(--brand-glow); }
.uno-g-n { font-size: 12px; font-weight: 800; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uno-g-k { font-size: 12.5px; color: var(--muted, #b9b0c9); margin-top: 2px; }
.uno-ruf { margin-top: 5px; font-size: 10.5px; font-weight: 900; letter-spacing: .08em; color: var(--on-brand);
  background: var(--grad); border-radius: 999px; padding: 2px 8px; display: inline-block; }
.uno-fang { margin-top: 5px; width: 100%; border: 0; border-radius: 999px; padding: 5px 8px; cursor: pointer;
  font-size: 11px; font-weight: 900; color: #1a1a1a; background: var(--uno-y); animation: unoBlink 1.1s ease-in-out infinite; }
@keyframes unoBlink { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* Der Tisch: Ziehstapel links, Ablage rechts. */
.uno-tisch {
  display: flex; justify-content: center; align-items: center; gap: 30px;
  padding: 22px 0 16px; margin: 4px 0 2px; border-radius: 20px; position: relative;
  background: radial-gradient(80% 70% at 50% 40%, rgba(177,75,255,.16), transparent 70%),
    linear-gradient(160deg, #1b1226, #120c1b); background: radial-gradient(80% 70% at 50% 40%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%),
    linear-gradient(160deg, #1b1226, #120c1b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 24px rgba(0,0,0,.35);
}
.uno-stapel { cursor: pointer; transition: transform .14s; position: relative; }
.uno-stapel::before, .uno-stapel::after {
  content: ''; position: absolute; inset: 0; border-radius: 10px; background: #1d1d1d; border: 3px solid #fff;
  transform: translate(3px, 3px); z-index: -1; }
.uno-stapel::after { transform: translate(6px, 6px); opacity: .6; }
.uno-stapel:active { transform: scale(.94); }
.uno-ablage { border-radius: 14px; padding: 7px; transition: box-shadow .2s; }
.uno-ablage.farbe-r { box-shadow: 0 0 0 3px var(--uno-r), 0 0 26px rgba(226,55,42,.5); }
.uno-ablage.farbe-g { box-shadow: 0 0 0 3px var(--uno-g), 0 0 26px rgba(47,158,68,.5); }
.uno-ablage.farbe-b { box-shadow: 0 0 0 3px var(--uno-b), 0 0 26px rgba(28,111,208,.5); }
.uno-ablage.farbe-y { box-shadow: 0 0 0 3px var(--uno-y), 0 0 26px rgba(245,180,0,.5); }

.uno-farbe-zeile { text-align: center; font-size: 12.5px; color: var(--muted, #b9b0c9); }
.uf-r { color: var(--uno-r); } .uf-g { color: var(--uno-g); }
.uf-b { color: #6aa8f0; } .uf-y { color: var(--uno-y); }
.uno-richtung { margin-left: 8px; font-size: 15px; }
.uno-rest { margin-left: auto; font-size: 11.5px; color: var(--muted-2, #726a83); }

.uno-status { text-align: center; margin: 12px 0 6px; font-size: 14px; font-weight: 700; color: var(--muted, #b9b0c9); }
.uno-status.dran { color: #fff; font-size: 15.5px; font-weight: 900; }

/* Die eigene Hand: waagerecht scrollbar, leicht überlappend. */
.uno-hand { display: flex; gap: 0; overflow-x: auto; padding: 22px 10px 14px; scrollbar-width: none; }
.uno-hand::-webkit-scrollbar { display: none; }
.uno-hand .uk:not(:first-child) { margin-left: -22px; }
.uno-hand .uk { transform-origin: bottom center; }

.uno-knoepfe { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; padding: 0 10px 10px; }
.uno-rufen { animation: unoPuls 1s ease-in-out infinite; font-weight: 900; letter-spacing: .04em; }
@keyframes unoPuls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

.uno-log { margin: 10px 10px 30px; padding: 11px 13px; border-radius: 14px; font-size: 12px; line-height: 1.65;
  color: var(--muted-2, #8a819c); background: var(--card-2, rgba(255,255,255,.03)); max-height: 160px; overflow-y: auto; }

/* Farbwahl nach einer Wunschkarte. */
.uno-farbwahl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.ufw { display: flex; align-items: center; gap: 10px; padding: 15px 14px; border: 0; border-radius: 15px; cursor: pointer;
  font-size: 15px; font-weight: 800; color: #fff; background: var(--card-2, rgba(255,255,255,.05)); }
.ufw span { width: 24px; height: 24px; border-radius: 50%; flex: none; box-shadow: inset 0 -2px 4px rgba(0,0,0,.3); }
.ufw.f-r span { background: var(--uno-r); } .ufw.f-g span { background: var(--uno-g); }
.ufw.f-b span { background: var(--uno-b); } .ufw.f-y span { background: var(--uno-y); }
.ufw:active { transform: scale(.96); }

/* 🎵 Profil-Musik – kleiner Spieler mit tanzendem Balken. */
.lied-karte { overflow: hidden; }
.lied-zeile { display: flex; align-items: center; gap: 12px; }
.lied-play { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  font-size: 15px; color: var(--on-brand); background: var(--grad);
  box-shadow: 0 4px 14px var(--brand-glow); }
.lied-play:active { transform: scale(.93); }
.lied-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lied-txt b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lied-txt span { font-size: 11.5px; color: var(--muted-2, #726a83); }
.lied-welle { display: flex; align-items: flex-end; gap: 2px; height: 26px; flex: none; }
.lied-welle i { width: 3px; height: 4px; border-radius: 2px; background: linear-gradient(var(--brand), var(--brand-2)); opacity: .35; }
.lied-welle.an i { animation: liedTanz .9s ease-in-out infinite; opacity: 1; }
@keyframes liedTanz { 0%, 100% { height: 4px; } 50% { height: 22px; } }

/* 🎥 „Nebenbei quatschen" am Spieltisch. */
.uno-chill { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 2px 2px; }
.uno-chill > span { font-size: 12px; color: var(--muted-2, #726a83); margin-right: auto; }
.uno-g.istbot { opacity: .72; border-style: dashed; border-color: rgba(255,255,255,.18); }
.uno-botmark { margin-top: 4px; font-size: 10px; font-weight: 800; color: var(--muted-2, #8a819c); }

/* ✋ Anstehen – „bei der nächsten Runde bin ich dabei". */
.uno-warte { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 16px; margin-bottom: 14px;
  background: var(--card-2, rgba(255,255,255,.04)); border: 1.5px solid var(--line-soft, rgba(255,255,255,.07)); }
.uno-warte.an { border-color: rgba(177,75,255,.5); border-color: color-mix(in srgb, var(--brand) 50%, transparent); border-color: color-mix(in srgb, var(--brand) 50%, transparent); background: rgba(177,75,255,.12); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.uw-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.uw-txt b { font-size: 13.5px; }
.uw-txt span { font-size: 11.5px; line-height: 1.45; color: var(--muted-2, #726a83); }

/* Kleine Herkunftszeile in der Lobby: das Spiel gehört zu uns. */
.uno-marke { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 14px; }
.uno-marke img { height: 20px; opacity: .9; }
.uno-marke span { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-2, #726a83); }

/* ═══ Zustimmungs-Schranke (Richtlinie 1.2) ═══════════════════════════
   Steht nach dem Anmelden vor der App, bis die Regeln angenommen sind.
   Bewusst freundlich statt behördlich: Wer hier landet, soll nicht das
   Gefühl haben, ausgesperrt zu werden, sondern begrüßt zu werden. */
.terms-gate{
  max-width:640px; margin:0 auto;
  /* Oben den sicheren Bereich beachten – sonst sitzt das Symbol hinter der
     Dynamic Island, unten hinter dem Home-Balken. */
  padding:calc(env(safe-area-inset-top, 0px) + 26px) 18px calc(env(safe-area-inset-bottom, 0px) + 40px);
  display:flex; flex-direction:column; gap:20px;
}
.tg-kopf{ text-align:center; display:flex; flex-direction:column; gap:9px; align-items:center; }
.tg-mark{
  width:62px; height:62px; border-radius:19px; display:grid; place-items:center;
  font-size:31px; background:linear-gradient(135deg,var(--brand),var(--brand2));
  box-shadow:0 10px 28px var(--brand-glow);
}
.tg-kopf h1{ font-size:25px; margin:4px 0 0; letter-spacing:-.4px; }
.tg-kopf p{ color:var(--muted); font-size:15px; margin:0; max-width:44ch; line-height:1.55; }

/* Der Text scrollt in sich – die Knöpfe bleiben immer erreichbar, auch
   auf einem kleinen Bildschirm. */
.tg-text{
  max-height:44vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:15px; background:var(--card);
  padding:2px 14px;
}
.tg-text .terms-card{ background:none; border:0; padding:6px 0; margin:0; }

.tg-fuss{ display:flex; flex-direction:column; gap:11px; }
.tg-check{
  display:flex; gap:11px; align-items:flex-start;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:14px 15px; font-size:14px; line-height:1.5; cursor:pointer;
}
.tg-check input{ width:21px; height:21px; flex:none; margin-top:1px; accent-color:var(--brand); }
.tg-check b{ color:var(--text); }

/* ═══ 🎨 Farbwelt-Auswahl ═════════════════════════════════════════════
   Jede Kachel zeigt die Welt, statt sie zu beschreiben: der Verlauf aus
   den beiden Marken-Farben, darauf ein Punkt in der Akzentfarbe. Wer
   „Ozean" liest, weiß nichts – wer den Verlauf sieht, weiß alles. */
.fw-liste{ display:flex; flex-direction:column; gap:9px; margin-top:14px; }
.fw-kachel{
  display:flex; align-items:center; gap:13px; width:100%;
  background:var(--card-2); border:1px solid var(--line); border-radius:14px;
  padding:12px 14px; text-align:left; cursor:pointer; color:var(--text);
  transition:border-color .16s ease, transform .12s ease;
}
.fw-kachel:active{ transform:scale(.985); }
.fw-kachel.on{ border-color:var(--brand); box-shadow:0 0 0 1px var(--brand) inset; }
.fw-probe{
  width:46px; height:46px; border-radius:13px; flex:none;
  display:grid; place-items:center; box-shadow:0 4px 14px -4px rgba(0,0,0,.6);
}
.fw-probe i{ width:13px; height:13px; border-radius:50%; display:block; }
.fw-txt{ flex:1; display:flex; flex-direction:column; gap:1px; min-width:0; }
.fw-txt b{ font-size:15px; }
.fw-txt span{ line-height:1.35; }
.fw-haken{ flex:none; font-size:17px; color:var(--brand); opacity:0; transition:opacity .16s ease; }
.fw-kachel.on .fw-haken{ opacity:1; }

/* Dein Zeichen: dieselben Kacheln, aber die Vorschau ist das echte Logo –
   man soll sehen, was man bekommt, nicht einen Farbklecks daneben. */
.em-kachel{
  display:flex; align-items:center; gap:13px; width:100%;
  background:var(--card-2); border:1px solid var(--line); border-radius:14px;
  padding:11px 14px; text-align:left; cursor:pointer; color:var(--text);
  transition:border-color .16s ease, transform .12s ease;
}
.em-kachel:active{ transform:scale(.985); }
.em-kachel.on{ border-color:var(--brand); box-shadow:0 0 0 1px var(--brand) inset; }
.em-kachel .fw-haken{ opacity:0; }
.em-kachel.on .fw-haken{ opacity:1; }
.em-probe{ height:30px; width:auto; flex:none; display:block; }

/* Vorschau der Knopffarbe: der Schreib-Knopf selbst, in klein. */
.kf-probe{
  width:46px; height:46px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-size:21px; line-height:1;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.6);
}

/* ═══ Drei Knöpfe unten ═══════════════════════════════════════════════
   Schwebt über dem Inhalt, nicht in ihm: So bleibt die Timeline ruhig und
   die Leiste immer erreichbar, egal wie weit man gescrollt hat.

   Der mittlere Knopf ist größer und ragt heraus – er ist eine Handlung,
   die anderen beiden sind Wege. Das darf man sehen. */
.quickbar{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--safe-bottom) + 14px);
  /* Über dem Inhalt, aber UNTER allem, was sich davorlegt: Menü (47–49),
     Sheets (60), Hinweise (80), Bildansicht (95), Anruf (4000). Sonst
     schwebt sie über einem offenen Menü und verdeckt dessen ✕. */
  z-index:44;
  display:flex; align-items:center; gap:6px;
  padding:7px 8px;
  border-radius:26px;
  background:color-mix(in srgb, var(--card) 88%, transparent);
  border:1px solid var(--line);
  box-shadow:0 14px 38px -12px rgba(0,0,0,.72), 0 2px 8px -2px rgba(0,0,0,.5);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  transition:opacity .2s ease, transform .2s ease;
}
.quickbar.aus{ opacity:0; pointer-events:none; transform:translateX(-50%) translateY(14px); }
/* Bei offenem Menü ganz weg – ein Streifen quer über der Menükarte sieht
   nach Panne aus, und der ✕-Knopf liegt genau dort. */
.app-shell.menu-open .quickbar{ opacity:0; pointer-events:none; transform:translateX(-50%) translateY(14px); backdrop-filter:none; -webkit-backdrop-filter:none; }

.qb-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-width:86px; padding:7px 12px 6px;
  background:none; border:0; border-radius:19px; cursor:pointer;
  color:var(--muted); transition:color .15s ease, background .15s ease, transform .1s ease;
}
.qb-btn:active{ transform:scale(.93); }
/* Nur mit echter Maus. Am Finger bleibt der Hover-Zustand sonst kleben und
   sieht aus wie „hier bist du gerade" – obwohl man längst weiter ist. */
@media (hover:hover){
  .qb-btn:hover{ color:var(--text); background:var(--card-2); }
}
/* Wo man gerade ist. */
.qb-btn.on{ color:var(--text); }
.qb-btn.on .qb-ic{ filter:drop-shadow(0 0 7px color-mix(in srgb, var(--qb-glow, var(--brand)) 70%, transparent)); }
.qb-ic{ font-size:19px; line-height:1; }
/* Einzeilig – „Meine PKs" auf zwei Zeilen sieht nach Panne aus. */
.qb-lbl{ font-size:10.5px; font-weight:600; letter-spacing:.1px; white-space:nowrap; }

/* Der mittlere: erhöht, in den Marken-Farben, mit Schein. */
.qb-mitte{
  min-width:0; width:56px; height:56px; margin:-14px 2px 0;
  border-radius:50%;
  /* --qb-grad/--qb-glow setzt die eigene Knopffarbe (Migration 095).
     Ohne eigene Wahl fällt beides auf die Farbwelt zurück. */
  background:var(--qb-grad, var(--grad));
  box-shadow:0 10px 26px -6px color-mix(in srgb, var(--qb-glow, var(--brand)) 62%, transparent);
  color: var(--on-brand);
}
@media (hover:hover){
  .qb-mitte:hover{ background:var(--qb-grad, var(--grad)); color: var(--on-brand); }
}
.qb-plus{ font-size:23px; line-height:1; }

/* Platz schaffen, damit die Leiste nichts verdeckt. */
body.hat-quickbar .main{ padding-bottom:calc(var(--safe-bottom) + 92px); }

@media (max-width:360px){
  .qb-btn{ min-width:72px; padding:7px 8px 6px; }
  .qb-lbl{ font-size:10px; }
}
@media (prefers-reduced-motion: reduce){
  .quickbar, .qb-btn{ transition:none; }
}

/* ══════════════════════════════════════════════════════════════════
   Eigenes Hintergrundbild (Migration 096)

   Das Bild liegt hinter ALLEM, die App liegt darauf. Damit das gut geht,
   braucht es drei Dinge, und alle drei sind hier:

   1. Einen Schleier. Ohne ihn steht weißer Text irgendwann auf einem
      weißen T-Shirt. Wie dick er ist, wählt jeder selbst (--hg-schleier).
   2. Karten, die ihren eigenen Grund behalten – leicht durchscheinend,
      damit man das Bild noch ahnt, aber fest genug, dass jede Zeile
      lesbar bleibt.
   3. Einen dunklen Grund darunter (html), falls das Bild noch lädt oder
      nicht mehr da ist. Sonst blitzt kurz Weiß auf.
   ══════════════════════════════════════════════════════════════════ */
#eigenerHintergrund{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
#eigenerHintergrund::after{
  content:''; position:absolute; inset:0;
  background:rgba(5,5,11,var(--hg-schleier,.62));
}
body.hat-hintergrund{ background:transparent; }
body.hat-hintergrund .app-shell{ background:transparent; }

/* Karten und Leisten: durchscheinend, aber tragfähig. */
body.hat-hintergrund .card,
body.hat-hintergrund .sheet{
  background:color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter:blur(12px) saturate(1.1);
  -webkit-backdrop-filter:blur(12px) saturate(1.1);
}
/* Das Blatt liegt ueber einem abgedunkelten Vorhang – fester statt
   weichgezeichnet sieht gleich aus und rechnet nichts.
   Nur wo color-mix geht (WebKit ab 16.2), sonst bleibt es beim Weichzeichner. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  body.hat-hintergrund .sheet{
    background:color-mix(in srgb, var(--card) 94%, transparent);
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
}
body.hat-hintergrund .topbar{
  background:color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
body.hat-hintergrund .quickbar{
  background:color-mix(in srgb, var(--card) 82%, transparent);
}

/* Vorschau in den Einstellungen */
.hg-vorschau{
  margin-top:10px; height:150px; border-radius:14px;
  border:1px solid var(--line); background:var(--card-2);
  background-size:cover; background-position:center;
  display:grid; place-items:center; color:var(--muted); font-size:14px;
}
.hg-vorschau.leer{ border-style:dashed; }
.hg-stufen{ display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
.hg-stufen.aus{ display:none; }
.hg-stufen .btn.on{ border-color:var(--brand); color:var(--text); }

/* Text, der NICHT auf einer Karte steht, braucht auf einem Foto mehr als
   einen Schatten: Auf einem hellen Wasserfall verschwindet graue Schrift
   auch mit Schatten. Deshalb bekommt freistehender Text eine eigene, leicht
   abgedunkelte Fläche – dann ist jede Zeile lesbar, egal welches Bild
   dahinterliegt.

   Bewusst nur DIREKTE Kinder von .main: Hinweise INNERHALB einer Karte
   stehen schon auf festem Grund und bekämen sonst einen zweiten Kasten. */
body.hat-hintergrund .main > .section-title,
body.hat-hintergrund .main > .hint,
body.hat-hintergrund .main > .an-pk-headline,
body.hat-hintergrund .main > .muted{
  background:rgba(5,5,11,.62);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-radius:12px;
  padding:8px 12px;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}
body.hat-hintergrund .main > .section-title{
  color:var(--text);
  display:inline-block; margin-left:0;
}
body.hat-hintergrund .main > .hint{ color:var(--text); }
/* Die Beschriftungen im Menü liegen ebenfalls frei. */
body.hat-hintergrund .ep-lbl{ text-shadow:0 1px 4px rgba(0,0,0,.9); }
/* Auch der „noch nichts da"-Hinweis steht frei auf dem Bild. */
body.hat-hintergrund .empty{
  background:rgba(5,5,11,.62);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-radius:14px; color:var(--text);
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}

/* Wer hat gesehen / bestätigt (Ankündigungs-Kanäle) */
.ch-ack-wer{
  background:none; border:0; padding:0 2px; cursor:pointer;
  color:var(--brand); font-size:12px; font-weight:700; text-decoration:underline;
}
.wg-liste{ display:flex; flex-direction:column; gap:2px; margin-top:12px; max-height:52vh; overflow-y:auto; }
.wg-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 11px; border-radius:11px; background:var(--card-2);
}
.wg-name{ font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wg-status{ flex:none; font-size:12.5px; color:var(--muted); }
.wg-status.ok{ color:var(--ok); }
.wg-status.offen{ color:var(--warn); }

/* ══════════════════════════════════════════════════════════════════
   Lademoment: die 4ever1-Acht zeichnet sich selbst

   Kein GIF. Ein GIF wäre für immer pink – dieses hier nimmt die Farbwelt
   an, ist bei jeder Größe scharf und wiegt nichts.

   pathLength="1" im SVG normiert die Linie auf die Länge 1. Deshalb
   funktionieren dasharray/dashoffset hier mit glatten Zahlen, ohne dass
   jemand die echte Pfadlänge kennen müsste.
   ══════════════════════════════════════════════════════════════════ */
.lade-acht{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  margin:34px auto;
}
.lade-acht svg{ width:104px; height:52px; overflow:visible; display:block; }
.lade-acht path{
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:acht-zeichnen 1.9s ease-in-out infinite;
  filter:drop-shadow(0 0 9px color-mix(in srgb, var(--brand) 55%, transparent));
}
.lade-txt{ font-size:13px; color:var(--muted); font-weight:600; }

@keyframes acht-zeichnen{
  0%   { stroke-dashoffset:1;  opacity:.35; }
  45%  { stroke-dashoffset:0;  opacity:1; }
  70%  { stroke-dashoffset:0;  opacity:1; }
  100% { stroke-dashoffset:-1; opacity:.35; }
}

/* Wer keine Bewegung mag, bekommt die fertige Acht, die sanft atmet. */
@media (prefers-reduced-motion: reduce){
  .lade-acht path{ stroke-dashoffset:0; animation:acht-atmen 2.2s ease-in-out infinite; }
  @keyframes acht-atmen{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
}

/* Auf dem Startbildschirm der App (index.html) ersetzt sie den Ring. */
.boot .lade-acht{ margin-top:26px; }

/* Entwürfe auf „Meine PKs" – sichtbar, aber ruhig: noch ist nichts passiert. */
.entwurf-karte{ border-style:dashed; }
.ew-kopf{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }

/* Teilnehmerliste: umschalten zwischen „Namen + IDs" und „nur IDs" */
.idl-umschalt{ display:flex; gap:8px; margin:12px 0 10px; }
.idl-umschalt .btn{ flex:1; }

/* ── Zwei Sorten Neuigkeiten ─────────────────────────────────────────
   Team-News und PK-News lagen vorher untereinander auf einer langen
   Seite. Wer nur wissen wollte, wann die nächste PK ist, musste an den
   App-Neuigkeiten vorbeiscrollen. Jetzt: ein Umschalter. */
.nw-tabs{
  display:flex; gap:8px; margin:12px 0 14px;
  background:var(--card-2); padding:5px; border-radius:15px;
  border:1px solid var(--line);
}
/* Symbol oben, Wort darunter. Nebeneinander passte „Ankündigungen" bei drei
   Reitern auf keinem Handy – abgeschnittene Beschriftungen sehen nach Panne
   aus, und raten soll niemand müssen. */
.nw-tab{
  flex:1; min-width:0; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:8px 3px; border:0; border-radius:11px;
  background:none; color:var(--muted); cursor:pointer;
  transition:background .16s ease, color .16s ease;
}
.nw-ic{ font-size:17px; line-height:1; }
.nw-lbl{
  font-size:11.5px; font-weight:700; letter-spacing:-.1px;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width:360px){ .nw-lbl{ font-size:10.5px; } }
.nw-tab.on{ background:var(--card); color:var(--text); box-shadow:var(--shadow-sm); }
.nw-dot{
  position:absolute; top:6px; right:5px; width:6px; height:6px;
  border-radius:50%; background:var(--brand); display:block;
}
.nw-seite[hidden]{ display:none; }

/* Sorte beim Schreiben wählen */
.tp-arten{ display:flex; gap:8px; margin:10px 0 14px; }
.tp-art{
  flex:1; padding:11px 8px; border-radius:13px; cursor:pointer;
  background:var(--card-2); border:1px solid var(--line); color:var(--muted);
  font-size:14px; font-weight:700;
}
.tp-art.on{ border-color:var(--brand); color:var(--text); box-shadow:0 0 0 1px var(--brand) inset; }

/* ══════════════════════════════════════════════════════════════════
   Jahreszeiten: Herbstblätter und Schneeflocken

   Liegt VOR dem Inhalt – Schnee, der hinter der Schrift fällt, sieht
   aus wie ein Fehler. Damit das trotzdem nichts stört:
     · pointer-events:none  – fängt niemals einen Tipp ab
     · niedrige Deckkraft   – man liest hindurch, ohne es zu merken
     · nur transform        – die Grafikeinheit macht die Arbeit, nicht
                              der Hauptprozessor; das schont den Akku

   14 Teilchen. Das klingt wenig und ist genau richtig: Man soll denken
   „schön", nicht „was flimmert da".
   ══════════════════════════════════════════════════════════════════ */
.jz{
  position:fixed; inset:0; z-index:41;
  pointer-events:none; overflow:hidden;
}
.jz-t{
  position:absolute; top:-8vh; display:block;
  will-change:transform;
  animation-name:jz-fallen;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@keyframes jz-fallen{
  0%   { transform:translate3d(0,-10vh,0) rotate(0deg);      opacity:0; }
  8%   { opacity:1; }
  50%  { transform:translate3d(26px,52vh,0) rotate(180deg);  }
  92%  { opacity:1; }
  100% { transform:translate3d(-14px,112vh,0) rotate(360deg); opacity:0; }
}
/* Blätter taumeln, Flocken schweben – deshalb nicht dieselbe Deckkraft. */
.jz-herbst .jz-t{ opacity:.72; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.jz-winter .jz-t{ opacity:.62; color:#EAF4FF; filter:drop-shadow(0 0 6px rgba(190,225,255,.55)); }
/* Flocken drehen sich kaum – ein rotierender Schneekristall wirkt hektisch. */
.jz-winter .jz-t{ animation-name:jz-schweben; }
@keyframes jz-schweben{
  0%   { transform:translate3d(0,-10vh,0) rotate(0deg);     opacity:0; }
  10%  { opacity:1; }
  50%  { transform:translate3d(18px,52vh,0) rotate(28deg);  }
  90%  { opacity:1; }
  100% { transform:translate3d(-10px,112vh,0) rotate(-20deg); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .jz{ display:none; } }
.jz-schalter{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--text); cursor:pointer; }
.jz-schalter input{ width:19px; height:19px; accent-color:var(--brand); }

/* ── Nachricht: Werkzeuge unter die Sprechblase ──────────────────────
   Vorher standen Reagieren, Antworten und ⋯ RECHTS neben der Blase und
   nahmen rund ein Viertel der Breite. Bei drei Zeilen Text brach dadurch
   jede Zeile zu früh um, und Fidolins Bild wurde an den Rand gedrängt.
   Jetzt liegen sie darunter - die Blase bekommt die volle Breite. */
.chat-msgs .msg-col{ max-width:86%; }
.msg .msg-tools{
  display:flex; align-items:center; gap:2px;
  padding:1px 2px 0; opacity:.55;
  transition:opacity .15s ease;
}
.msg .msg-tools:hover{ opacity:1; }
.msg.mine .msg-col{ align-items:flex-end; }
.msg.mine .msg-tools{ justify-content:flex-end; }
/* Die Knöpfe selbst dürfen kleiner sein, sie stehen jetzt für sich. */
.msg .msg-tools > *{ font-size:15px; }

/* ── Fidolin als Bild, mit Mundbewegung ──────────────────────────────
   Zwei Bilder derselben Pose übereinander: Mund zu, Mund auf. Beim
   Sprechen wird zwischen ihnen umgeblendet — so machen es Trickfilme,
   und es ist der einzige Weg, der bei einem gerenderten Gesicht nicht
   nach aufgeklebtem Mund aussieht.

   steps(1) statt eines weichen Übergangs: Ein Mund geht auf oder er ist
   zu. Ein halb überblendeter Mund sieht aus wie ein Geist. */
.fid-foto{ position:relative; width:186px; height:186px; flex:none; }
.fid-foto img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center bottom;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.55));
}
.fid-foto .fid-auf{ opacity:0; }
.fid-foto.speaking .fid-auf{ animation:fidMundFoto .23s steps(1, end) infinite alternate; }
@keyframes fidMundFoto{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .fid-foto.speaking .fid-auf{ animation:none; opacity:.5; }
}

/* Fidolin freigestellt, in ganzer Größe. Sie atmet leicht — eine Figur,
   die völlig stillsteht, wirkt tot. Beim Sprechen wippt sie minimal mit. */
.fid-ganz{ width:auto; height:250px; flex:none; display:grid; place-items:end center; }
.fid-ganz img{
  height:250px; width:auto; display:block;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.55));
  animation:fidAtmen 4.2s ease-in-out infinite;
  transform-origin:50% 100%;
}
@keyframes fidAtmen{
  0%,100%{ transform:translateY(0) scale(1); }
  50%    { transform:translateY(-3px) scale(1.008); }
}
.fid-ganz.speaking img{ animation:fidAtmen 4.2s ease-in-out infinite, fidWippen .38s ease-in-out infinite alternate; }
@keyframes fidWippen{ from{ filter:drop-shadow(0 14px 28px rgba(0,0,0,.55)); } to{ filter: drop-shadow(0 14px 30px rgba(177,75,255,.45)); filter: drop-shadow(0 14px 30px color-mix(in srgb, var(--brand) 45%, transparent)); } }
@media (prefers-reduced-motion: reduce){ .fid-ganz img{ animation:none; } }

/* ── Spiel-Karten: gezeichnete Symbole statt Emoji ───────────────────
   Emoji sehen auf jedem Gerät anders aus, haben nichts mit unseren
   Farben zu tun und wirken beliebig — ausgerechnet auf der Seite, die
   Lust aufs Spielen machen soll. Die neuen Symbole nehmen die Farbwelt
   an: Wer die App in Ozean hat, spielt auch in Ozean. */
.game-card .gc-svg{
  width:56px; height:56px; display:block;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.5));
  transition:transform .18s ease;
}
.game-card:active .gc-svg{ transform:scale(.92); }
.game-card .gc-ic{ font-size:0; line-height:0; margin-bottom:2px; }

/* Die Karte selbst bekommt Tiefe: ein Schein in Markenfarbe, der beim
   Antippen aufleuchtet. */
.game-card{
  background:linear-gradient(160deg, var(--card-2) 0%, var(--card) 62%);
  transition:border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.game-card::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120px 80px at 50% -10%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 70%);
}
.game-card:active{ transform:scale(.985); border-color:var(--brand); }
@media (hover:hover){
  .game-card:hover{ border-color:var(--brand); box-shadow:0 10px 26px -10px color-mix(in srgb, var(--brand) 55%, transparent); }
}

/* ── Familien-Rechte (nur im Inhaber-Reich) ──────────────────────── */
.fr-zeile{
  display:flex; align-items:center; gap:13px;
  padding:13px 2px; border-top:1px solid var(--line-soft); cursor:pointer;
}
.fr-zeile:first-child{ border-top:none; }
.fr-ic{ font-size:22px; flex:none; width:28px; text-align:center; }
.fr-txt{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.fr-txt b{ font-size:15px; }
.fr-zeile input{ width:24px; height:24px; flex:none; accent-color:var(--brand); cursor:pointer; }

/* ── Familie: Auswahl und Antrag ─────────────────────────────────── */
.fam-liste{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.fam-karte{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:15px 16px; border-radius:16px; cursor:pointer; color:var(--text);
  background:var(--card-2);
  border:1px solid var(--line);
  border-left:5px solid var(--fam-farbe, var(--brand));
  transition:border-color .16s ease, transform .12s ease;
}
.fam-karte:active{ transform:scale(.985); }
.fam-karte:disabled{ cursor:default; opacity:.72; }
.fam-karte.drin{ border-color:var(--fam-farbe, var(--brand)); opacity:1; }
.fam-emblem{ font-size:30px; flex:none; }
.fam-txt{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.fam-txt b{ font-size:16px; }
.fam-pfeil{ flex:none; font-size:22px; color:var(--muted); }
.fam-haken{ flex:none; font-size:12.5px; font-weight:700; color:var(--ok); }
.fam-lauft{ border-left:5px solid var(--warn); }
.fam-drin{ border-left:5px solid var(--ok); }

/* ── Registrierung: Streamer oder Familie ────────────────────────── */
.rolle-wahl{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px; }
.rolle-karte{
  display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center;
  padding:16px 10px; border-radius:16px; cursor:pointer; color:var(--text);
  background:var(--card-2); border:1.5px solid var(--line);
  transition:border-color .16s ease, box-shadow .16s ease, transform .12s ease;
}
.rolle-karte:active{ transform:scale(.98); }
.rolle-karte.on{ border-color:var(--brand); box-shadow:0 0 0 1px var(--brand) inset, 0 8px 22px -10px color-mix(in srgb, var(--brand) 60%, transparent); }
.rk-ic{ font-size:30px; line-height:1; }
.rolle-karte b{ font-size:15px; }

/* ── Registrierung: Hinweise direkt am Feld ──────────────────────────
   Vorher kam ein Fehler nach dem anderen als kurze Meldung oben. Bei
   sechs Feldern waren das sechs Anläufe. */
.field .feld-hilfe{
  display:block; margin-top:5px; font-size:12px; color:var(--muted); line-height:1.45;
}
.field .feld-fehler{
  display:none; margin-top:5px; font-size:12.5px; font-weight:600;
  color:var(--danger); line-height:1.45;
}
.field .feld-fehler.an{ display:block; }
.field input.falsch{
  border-color:var(--danger);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent) inset;
}

/* Passwort-Stärke: vier Balken, ehrlich benannt */
.pw-staerke{ display:flex; gap:5px; margin-top:7px; }
.pw-staerke i{
  flex:1; height:4px; border-radius:2px; background:var(--line);
  transition:background .2s ease;
}
.pw-staerke[data-st="1"] i:nth-child(-n+1){ background:var(--danger); }
.pw-staerke[data-st="2"] i:nth-child(-n+2){ background:var(--warn); }
.pw-staerke[data-st="3"] i:nth-child(-n+3){ background:var(--accent); }
.pw-staerke[data-st="4"] i{ background:var(--ok); }

/* ── Applaus nach der PK ─────────────────────────────────────────────
   Nach einer PK gibt es ein Ergebnis. Das ist eine Zahl. Hier steht,
   was die Zahl nicht sagt. Bewusst ruhig gestaltet — kein Pokal, keine
   Rangliste, kein Gold. Ein Dankeschön ist kein Preis. */
.ap-liste{ display:flex; flex-direction:column; gap:9px; margin-top:12px; }
.ap-zeile{
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 12px; border-radius:13px; background:var(--card-2);
  border:1px solid var(--line-soft);
}
.ap-hand{ font-size:19px; flex:none; line-height:1.3; }
.ap-txt{ flex:1; font-size:14px; line-height:1.5; min-width:0; }
.ap-wort{ display:block; margin-top:3px; color:var(--muted); font-style:italic; }

.ap-wahlliste{ display:flex; flex-direction:column; gap:8px; margin-top:12px; max-height:44vh; overflow-y:auto; }
.ap-wahl{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:10px 12px; border-radius:13px; cursor:pointer; color:var(--text);
  background:var(--card-2); border:1.5px solid var(--line);
  font-size:15px; font-weight:600;
  transition:border-color .16s ease, transform .12s ease;
}
.ap-wahl:active{ transform:scale(.985); }
.ap-wahl.on{ border-color:var(--brand); box-shadow:0 0 0 1px var(--brand) inset; }

/* ── Audition im Verwaltungsraum ─────────────────────────────────────
   Der Warteraum steht oben, auch wenn er meistens leer ist. Wenn jemand
   wartet, ist das das Einzige, was zählt — dann darf man nicht erst
   scrollen müssen. */
.aud-leer{ border-style:dashed; }
.aud-voll{ border-color:var(--ok); box-shadow:0 0 0 1px var(--ok) inset; }
.aud-liste{ display:flex; flex-direction:column; gap:9px; margin-top:12px; }
.aud-zeile{
  display:flex; align-items:center; gap:12px;
  padding:12px 13px; border-radius:13px;
  background:var(--card-2); border:1px solid var(--line);
}
.aud-zeile.dran{ border-color:var(--warn); }
.aud-mid{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.aud-mid b{ font-size:15.5px; }
.aud-akt{ display:flex; align-items:center; gap:8px; flex:none; }
.aud-badge{
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.3px;
  color:var(--warn); background:color-mix(in srgb, var(--warn) 16%, transparent);
  padding:3px 9px; border-radius:999px;
}
.aud-erg{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }

/* Auf dem Handy hat eine starre Zeile keine Chance: links Name und Bilder,
   rechts Abzeichen und bis zu drei Knoepfe, die alle nicht schrumpfen
   duerfen. Der Name wurde dabei auf null gequetscht. Ab hier steht die
   Aktion deshalb UNTER den Angaben, und die Knoepfe teilen sich die
   Breite - damit laesst sich eine Audition auch vom Telefon aus fuehren. */
@media (max-width:560px){
  .aud-zeile{ flex-direction:column; align-items:stretch; gap:10px; }
  /* In einer Spalte streckt sich sonst jede Plakette auf volle Breite
     und sieht aus wie ein Balken. Sie sollen sich an ihren Text halten. */
  .aud-mid > .aud-bzahl{ align-self:flex-start; }
  .aud-akt{ flex-wrap:wrap; gap:7px; }
  .aud-akt .btn{ flex:1 1 auto; min-width:0; }
  /* Das ✕ bleibt schmal - es soll nicht so gross wirken wie die
     Knoepfe, die man wirklich braucht. */
  .aud-akt .btn[data-audzu]{ flex:0 0 auto; padding-left:13px; padding-right:13px; }
  .aud-badge{ flex:1 1 100%; text-align:center; }
  .au-zeile{ flex-wrap:wrap; }
}

/* Vergebene Nummern */
.au-zeile{ display:flex; align-items:center; gap:11px; padding:12px 14px; }
.au-zmid{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.au-zmid b{ font-family:ui-monospace,Menlo,monospace; font-size:16px; letter-spacing:1.5px; }
.au-st{ flex:none; font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:.3px; padding:3px 9px; border-radius:999px; }
.au-st.offen{ color:var(--ok); background:color-mix(in srgb, var(--ok) 16%, transparent); }
.au-st.benutzt{ color:var(--muted); background:var(--card-2); }
.au-st.weg{ color:var(--muted); background:var(--card-2); text-decoration:line-through; }
.au-code-karte{ margin-top:12px; }
.au-code{
  font-family:ui-monospace,Menlo,monospace; font-size:38px; font-weight:900;
  letter-spacing:8px; text-align:center; padding:8px 0 4px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ── Zwei Wege auf der Startseite ────────────────────────────────────
   Vorher stand hier ein einziges „Konto anlegen". Das war für Streamer
   schlicht falsch: Sie werden über eine Audition aufgenommen, nicht über
   ein Formular. Wer beides in einen Knopf steckt, schickt die Hälfte in
   die falsche Richtung.

   Die Farbe am linken Rand unterscheidet die beiden auf einen Blick:
   Türkis für die Audition, Violett für die Familie. */
.wege-label{
  margin:18px 0 9px; text-align:center;
  font-size:12px; font-weight:800; letter-spacing:2px;
  text-transform:uppercase; color:var(--muted);
}
.wege{ display:flex; flex-direction:column; gap:10px; }
.weg{
  display:flex; align-items:center; gap:13px;
  padding:15px 16px; border-radius:16px;
  text-decoration:none; color:var(--text);
  background:var(--card-2); border:1px solid var(--line);
  border-left:4px solid var(--line);
  transition:border-color .16s ease, transform .12s ease;
}
.weg:active{ transform:scale(.985); }
.weg-streamer{ border-left-color:var(--accent); }
.weg-familie{ border-left-color:var(--brand); }
@media (hover:hover){
  .weg-streamer:hover{ border-color:var(--accent); }
  .weg-familie:hover{ border-color:var(--brand); }
}
.weg-ic{ font-size:27px; flex:none; }
.weg-txt{ flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.weg-txt b{ font-size:15.5px; }
.weg-txt span{ font-size:12.5px; color:var(--muted); line-height:1.45; }
.weg-pfeil{ flex:none; font-size:22px; color:var(--muted); }
/* Bilder der Bewerberin im Warteraum — der Prüfer soll wissen, wen er
   abholt, bevor er abholt. */
.aud-bilder{ display:flex; align-items:center; gap:5px; margin-top:6px; flex-wrap:wrap; }
.aud-bilder img{ width:38px; height:38px; border-radius:8px; object-fit:cover;
  border:1px solid var(--line); display:block; }
.aud-bzahl{ font-size:11px; font-weight:800; padding:2px 8px; border-radius:999px;
  color:var(--muted); background:var(--card); }
.aud-bzahl.ok{ color:var(--ok); background:color-mix(in srgb, var(--ok) 15%, transparent); }
.aud-bzahl.warn{ color:var(--warn); background:color-mix(in srgb, var(--warn) 15%, transparent);
  margin-top:6px; display:inline-block; }

/* Vorlagen für den Akte-Grund: schnell antippbar, aber jede ist ein Satz. */
.grund-vorlagen { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.grund-vorlagen .grund-v { flex:0 1 auto; font-size:13px; }
#grund-txt { width:100%; margin-top:6px; padding:10px 12px; border-radius:12px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05);
  color:var(--ink); font:inherit; resize:vertical; }
#grund-hilfe.warn { color:var(--warn); }

/* „Dein Zugriff wurde vermerkt" – ruhig, aber nicht zu übersehen. */
.ak-vermerk { display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  margin:8px 0 12px; padding:10px 12px; border-radius:12px; font-size:13px;
  line-height:1.5; color:var(--dim);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); }
.ak-vermerk b { color:var(--ink); }
.ak-zug-liste { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.ak-zug { padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10); font-size:14px; line-height:1.5; }
.ak-zug .muted { display:block; }

/* ── Vermerke in der Akte ─────────────────────────────────────────────
   Sachlich, nicht hübsch: Das hier wird gelesen, wenn es unangenehm wird. */
.vm-neu { padding:12px; border-radius:14px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10); }
#vm-txt { width:100%; padding:10px 12px; border-radius:12px; resize:vertical;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05);
  color:var(--ink); font:inherit; }
.vm-leiste { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.vm-leiste .rec { background:var(--danger); border-color:var(--danger); color:#fff; }
.vm-anhang { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.vm-a { position:relative; }
.vm-a img { max-height:120px; border-radius:10px; display:block; }
.vm-a audio { max-width:240px; }
.vm-a .btn { position:absolute; top:-6px; right:-6px; border-radius:50%; }
.vm-liste { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.vm-eintrag { padding:12px; border-radius:14px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10); }
.vm-kopf { display:flex; justify-content:space-between; align-items:baseline;
  gap:10px; margin-bottom:6px; }
.vm-text { font-size:14px; line-height:1.55; white-space:pre-wrap; }
.vm-bild { max-width:100%; border-radius:12px; margin-top:8px; display:block; }
.vm-audio { width:100%; margin-top:8px; }

/* ── Momente & geordnete Emojis ───────────────────────────────────────
   Der Moment fängt den Satz an, statt eine Frage zu stellen – deshalb
   trägt er dieselbe Farbe wie der Status, den er ergänzt. */
.prompt-chip { display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line); border-radius:999px; padding:6px 12px;
  font-size:13px; font-weight:600; cursor:pointer;
  /* Ausdrücklich hell: Die ältere .prompt-chip-Regel weiter oben setzt
     color:var(--muted). Ohne diese Zeile hätte der Moment einen bunten
     Rahmen und graue Schrift – genau der Bruch zwischen Grau und Bunt,
     den der ganze Umbau beseitigen sollte. */
  color:var(--ink);
  transition:transform .08s, filter .15s; }
.prompt-chip:active { transform:scale(.96); filter:brightness(1.25); }
.prompt-chip .pc-e { font-size:15px; line-height:1; }

/* Emoji-Fenster: vier kleine Überschriften statt einer Wand aus 74. */
.c-emoji { max-height:290px; overflow-y:auto; }
.ce-gruppe + .ce-gruppe { margin-top:12px; }
.ce-titel { font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--dim); margin:0 0 6px 2px; }
.ce-reihe { display:flex; flex-wrap:wrap; gap:4px; }

/* „Alle 54 anzeigen" führt zur vollen Auswahl, statt sie hier zu wiederholen. */
.feel-mehr { text-decoration:none; color:var(--ink); opacity:.85; }
.feel-mehr:hover { opacity:1; }

/* Vorschau im Status-Wähler: zeigt die eigene Zeile, wie sie gleich im
   Feed steht. Ruhig gehalten – sie soll zeigen, nicht ablenken. */
.st-vorschau { margin:10px 0 14px; padding:12px 14px; border-radius:14px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); }
.st-v-titel { font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--dim); margin-bottom:8px; }
.st-v-zeile { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }

/* Ort beim Status: freiwillig, deshalb ruhig gehalten – ein Feld, das
   nicht drängt. Das Pin-Zeichen sitzt innen, damit klar ist, wofür es ist. */
.st-ort { display:flex; align-items:center; gap:8px; margin:0 0 8px;
  padding:0 12px; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); }
.st-ort-ic { font-size:15px; line-height:1; opacity:.85; }
.st-ort input { flex:1; border:0; background:none; color:var(--ink);
  font:inherit; padding:11px 0; outline:none; }
.st-ort input::placeholder { color:var(--dim); }
.st-ort:focus-within { border-color:var(--accent); }

/* „Dein Status ist von vor X Tagen" – ein Hinweis, keine Rüge. Deshalb
   warm statt rot, und die Frist steht gleich daneben. */
.st-alt { margin:-6px 0 12px; padding:10px 13px; border-radius:12px;
  font-size:13px; line-height:1.6;
  background:rgba(252,196,25,.10); border:1px solid rgba(252,196,25,.30); }
.st-alt .muted { display:block; margin-top:2px; }

/* Bigo-ID beim Zusagen: groß genug, dass ein Zahlendreher auffällt,
   bevor die Liste an Bigo geht. */
.bid-zeigen { margin:12px 0; padding:14px; border-radius:14px; text-align:center;
  font-size:24px; font-weight:800; letter-spacing:2px; font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.06); border:1px dashed rgba(255,255,255,.28); }
.bid-feld { width:100%; margin-top:10px; padding:13px 14px; border-radius:12px;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05);
  color:var(--ink); font:inherit; font-size:18px; letter-spacing:1px;
  font-variant-numeric:tabular-nums; text-align:center; outline:none; }
.bid-feld:focus { border-color:var(--accent); }

/* ── 🛟 Nicht rausfliegen ─────────────────────────────────────────────
   Der Satz muss lesbar sein, bevor er abgeschickt wird – deshalb groß,
   mit Ziffernabstand, damit ein Zahlendreher in der Bigo-ID auffällt. */
.nr-satz-box { margin:12px 0 18px; padding:14px; border-radius:16px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); }
.nr-lbl { font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--dim); margin-bottom:8px; }
.nr-satz { padding:14px; border-radius:12px; font-size:15px; line-height:1.65;
  background:rgba(0,0,0,.28); border:1px dashed rgba(255,255,255,.24);
  font-variant-numeric:tabular-nums; user-select:text; -webkit-user-select:text; }

/* Die Bigo-ID steht als Eingabefeld MITTEN im Satz. Sie soll aussehen wie ein
   Teil des Satzes, nur eben ausfuellbar - deshalb keine Kastenoptik, sondern
   eine gestrichelte Linie darunter. Feste Breite: Waechst das Feld beim
   Tippen mit, springt der ganze Satz, und das liest sich unruhig. */
.nr-id-feld { display:inline-block; width:11ch; min-width:11ch;
  padding:1px 4px; margin:0 2px; border:0;
  border-bottom:1.5px dashed var(--brand, #b14bff); border-radius:0;
  background:transparent; color:inherit; font:inherit; font-weight:800;
  text-align:center; }
.nr-id-feld::placeholder { color:var(--gedaempft, #8b8ba3); font-weight:600; }
.nr-id-feld:focus { outline:0; border-bottom-color:var(--on-brand, #ff4d9d);
  background:rgba(177,75,255,.10); border-radius:6px 6px 0 0; }
.nr-hinweis { margin-top:8px; text-align:center; font-size:13px; color:var(--dim); }
.nr-hinweis.ok { color:#7ef0a0; }
.nr-schritte { display:flex; flex-direction:column; gap:12px; margin:6px 0 16px; }
.nr-schritt { display:flex; gap:12px; align-items:flex-start;
  padding:12px 14px; border-radius:14px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); }
.nr-nr { flex:none; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; background:var(--accent); color:#0B0B12; }
.nr-warn { padding:12px 14px; border-radius:12px; font-size:13px; line-height:1.6;
  background:rgba(252,196,25,.10); border:1px solid rgba(252,196,25,.30); }

/* ── Anmeldefrist auf der PK-Karte ────────────────────────────────────
   Der Streifen darüber (.an-pk-cd) zählt bis zum PK-START. Dieser hier
   beantwortet die andere Frage: „Wie lange habe ich noch Zeit, mich zu
   melden?" Er steht deshalb direkt über den zwei Knöpfen, dort wo die
   Entscheidung fällt – ruhig, solange Zeit ist, und deutlich, wenn es
   knapp wird. Rot bleibt den echten Warnungen vorbehalten. */
.an-pk-frist {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 0 12px 8px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card-2); color: var(--muted);
  font-size: 13px; font-weight: 600; letter-spacing: .2px;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.an-pk-frist:empty { display: none; }
.an-pk-frist.knapp {
  color: var(--warn); border-color: rgba(255,176,32,.45);
  background: rgba(255,176,32,.10);
  animation: fristPuls 2.4s ease-in-out infinite;
}
.an-pk-frist.zu {
  color: var(--muted); border-color: var(--line);
  background: transparent; opacity: .7; animation: none;
}
@keyframes fristPuls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,176,32,0); }
  50%      { box-shadow: 0 0 0 4px rgba(255,176,32,.12); }
}
@media (prefers-reduced-motion: reduce) { .an-pk-frist.knapp { animation: none; } }
.pk-yn:disabled { cursor: default; }

/* ── „Du bekommst keine PK-Erinnerungen" ──────────────────────────────
   Bewusst in Warn-Orange und NICHT in Rot: Rot ist hier den echten
   Warnungen der Leitung vorbehalten. Es steht ueber dem Update-Banner,
   weil eine stumme App das dringendere Problem ist als ein ungelesener
   Beitrag. */
#push-banner:empty { display: none; }
.pb-banner {
  display: flex; align-items: center; gap: 11px; margin: 4px 0 12px; padding: 12px 13px;
  border-radius: 15px; position: relative; overflow: hidden;
  background: linear-gradient(120deg, rgba(255,176,32,.16), rgba(255,176,32,.07));
  border: 1px solid rgba(255,176,32,.42);
  animation: updIn .4s cubic-bezier(.2,.9,.3,1.2);
}
.pb-ic { font-size: 22px; flex: 0 0 auto; }
.pb-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.pb-txt b { font-size: 14px; line-height: 1.25; color: var(--warn); }
.pb-sub { font-size: 12px; line-height: 1.35; color: var(--text); opacity: .9; }
.pb-hilfe {
  font-size: 12px; line-height: 1.4; color: var(--muted);
  border-left: 2px solid rgba(255,176,32,.5); padding-left: 8px; margin-top: 3px;
}
.pb-go {
  flex: 0 0 auto; font-size: 12.5px; font-weight: 800; padding: 9px 14px; border-radius: 999px;
  border: none; cursor: pointer; white-space: nowrap;
  background: var(--warn); color: #241800;
}
.pb-go:active { transform: scale(.96); }
.pb-go:disabled { opacity: .6; cursor: default; }
.pb-x {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: none; padding: 0;
  background: rgba(255,255,255,.10); color: var(--muted); font-size: 13px; cursor: pointer; line-height: 28px;
}
.pb-x:active { background: rgba(255,255,255,.2); }
@media (max-width: 380px) {
  .pb-banner { flex-wrap: wrap; }
  .pb-go { width: 100%; order: 3; }
}

/* ── Erreichbarkeits-Liste im Push-Bereich (nur Inhaber/cp) ─────────── */
.er-kopf { font-size: 14px; line-height: 1.4; padding: 10px 12px; border-radius: 12px; margin-bottom: 8px; }
.er-kopf.warnung { background: rgba(255,176,32,.12); border: 1px solid rgba(255,176,32,.4); color: var(--text); }
.er-kopf.gut     { background: rgba(46,212,122,.12); border: 1px solid rgba(46,212,122,.4); color: var(--text); }
.er-kopf b { color: var(--warn); }
.er-kopf.gut b { color: var(--ok); }
.er-rat { font-size: 12.5px; color: var(--muted); line-height: 1.4; margin-bottom: 10px; }
.er-liste { display: flex; flex-direction: column; gap: 2px; }
.er-zeile { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 10px; font-size: 13px; }
.er-zeile:nth-child(odd) { background: rgba(255,255,255,.03); }
.er-zeile.stumm { background: rgba(255,176,32,.10); }
.er-ic { flex: 0 0 auto; font-size: 15px; }
.er-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.er-fam { font-size: 10px; font-weight: 700; color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 6px; margin-left: 4px; }
.er-weg { flex: 0 0 auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.er-zeile.stumm .er-weg { color: var(--warn); font-weight: 700; }
.er-zeit { flex: 0 0 auto; font-size: 11px; color: var(--dim); white-space: nowrap; min-width: 74px; text-align: right; }
.er-fuss { font-size: 11px; color: var(--dim); margin-top: 8px; text-align: right; }
@media (max-width: 400px) { .er-zeit { display: none; } }

/* ── 📖 Gästebuch auf dem Profil ───────────────────────────────────────
   Die Einträge selbst bringen ihre eigene Farbe mit (gb-card). Der Rahmen
   drumherum haelt sich deshalb bewusst zurueck: eine warme Buchseite, auf
   der die bunten Karten liegen — nicht ein zweites buntes Ding daneben. */
.gbp-card { padding: 14px; }

/* Die Eintraege selbst kommen aus gbEntryHtml und bringen ihr Aussehen
   (.gb-list/.gb-entry/.gb-card) schon mit — hier wird nur der Rahmen
   angepasst, damit es auf dem Profil etwas gedrungener sitzt. */
.gbp-liste { margin-top: 0; }
.gbp-liste .gb-card { padding: 14px; border-radius: 14px; }
.gbp-liste .gb-card.has-sticker { padding-right: 46px; }
.gbp-liste .gbc-imgs img { max-height: 150px; }

/* ── Antworten auf Gästebuch-Kommentare ───────────────────────────────
   Zwei Ebenen, mehr nicht: Die Antworten ruecken um eine Avatar-Breite ein
   und haengen an einer Linie, damit auf einen Blick klar ist, wozu sie
   gehoeren. Tiefer verschachtelt wird es auf einem Handy unlesbar. */
.gbc-add { flex-direction: column; gap: 7px; }
.gbc-eingabe { display: flex; gap: 8px; position: relative; }
.gbc-eingabe .gbc-in { flex: 1; }
.gbc-eingabe .gbc-send { flex: none; }

.gbc-antworten {
  margin: 8px 0 0 20px; padding-left: 14px;
  border-left: 2px solid var(--line);
  display: flex; flex-direction: column; gap: 9px;
}
.gbc-c.ist-antwort .gbc-cbody { background: rgba(255,255,255,.045); }
.gbc-c.ist-antwort .gbc-ctext { font-size: 13.5px; }

.gbc-cact { margin-top: 3px; }
.gbc-reply {
  background: none; border: none; padding: 3px 0; margin: 0;
  color: var(--muted); font-size: 11.5px; font-weight: 700; cursor: pointer; letter-spacing: .2px;
}
.gbc-reply:hover, .gbc-reply:active { color: var(--brand-2); }

/* „Antwort an …" – damit man beim Tippen sieht, wo es landet. */
.gbc-antwort-an {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(177,75,255,.13); background: color-mix(in srgb, var(--brand) 13%, transparent); border: 1px solid rgba(177,75,255,.34); border: 1px solid color-mix(in srgb, var(--brand) 34%, transparent);
  font-size: 12px; font-weight: 700; color: var(--brand-2);
  animation: updIn .25s ease;
}
.gbc-antwort-an[hidden] { display: none; }
.gbc-aa-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbc-aa-x {
  border: none; background: rgba(255,255,255,.12); color: var(--brand-2);
  font-size: 11px; cursor: pointer; width: 20px; height: 20px; border-radius: 50%;
  padding: 0; line-height: 20px; flex: 0 0 auto;
}
.gbc-aa-x:active { background: rgba(255,255,255,.24); }
@media (max-width: 380px) { .gbc-antworten { margin-left: 10px; padding-left: 10px; } }

/* Namenszeile im Kommentar.
   Drei Sachen, die vorher schiefgingen:
   · „vor 40 Min" brach mitten im Wort um  → nowrap auf der Zeit
   · der Namens-Chip selbst brach um („m / 29") → nowrap auf dem Chip
   · die Zeit stand rechtsbuendig immer allein auf Zeile zwei
     → sie laeuft jetzt einfach mit und rutscht nur runter, wenn es eng wird */
.gbc-cn { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; row-gap: 3px; }
.gbc-ct { white-space: nowrap; margin-left: 0; }
.idchip { white-space: nowrap; }
.idchip .ga { white-space: nowrap; }
/* Im Kommentar etwas kompakter als im Profilkopf – hier zaehlt der Text. */
.gbc-cn .idchip { font-size: 12.5px; padding: 2px 10px 2px 6px; }
.gbc-cn .idchip .ga { font-size: 11.5px; padding: 0; }
.gbc-c.ist-antwort .gbc-cn .idchip { font-size: 12px; }

/* Lange Namen im Identitaets-Chip.
   Der Chip nimmt so viel Platz, wie er braucht – aber nie mehr, als da ist.
   Passt der Name nicht, wird ER gekuerzt; das Geschlecht-Alter-Abzeichen
   bleibt immer vollstaendig, denn es ist die kuerzere und wichtigere Info. */
.idchip { max-width: 100%; min-width: 0; overflow: hidden; }
.idchip .ga { flex: 0 0 auto; }
.idchip .idnm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Eigenes Bild als Hintergrund ─────────────────────────────────────
   Auf einem Foto ist Text nur lesbar, wenn man ihm hilft: Der Schleier
   kommt aus dem Hintergrund-Wert selbst, hier kommt der Schatten dazu.
   Ohne beides verschwindet weisse Schrift auf jedem hellen Urlaubsbild. */
.gb-card.hat-bgbild {
  /* Foto oben sichtbar, Text unten im dunklen Teil des Verlaufs – so bleibt
     beides erkennbar: das Bild UND die Schrift. Eine flache Karte hätte vom
     Foto nur einen zufälligen Ausschnitt gezeigt. */
  min-height: 175px;
  display: flex; flex-direction: column; justify-content: flex-end;
  text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 0 16px rgba(0,0,0,.35);
}
.gb-card.hat-bgbild .gbc-msg { font-weight: 600; }
.gb-card.hat-bgbild .gbc-imgs { margin-bottom: 8px; }
/* Auf dem Profil ist die Vorschau kompakter – dort reicht weniger Hoehe. */
.gbp-liste .gb-card.hat-bgbild { min-height: 150px; }
.gb-bg-eigen {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
  background: var(--card-2); border: 2px dashed var(--line);
}
.gb-bg-eigen.on { border-style: solid; border-color: var(--text); }

/* ── Bild in einem Kommentar ──────────────────────────────────────────
   Ein Kommentar ist eine Antwort, keine Galerie: EIN Bild, gedeckelt in
   der Hoehe, damit die Unterhaltung nicht auseinandergerissen wird. */
.gbc-bild { margin-top: 7px; }
.gbc-bild img {
  display: block; max-width: 100%; max-height: 220px;
  border-radius: 12px; cursor: zoom-in;
  border: 1px solid var(--line-soft);
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.6);
}
.gbc-bild img:active { transform: scale(.99); }

/* Angehaengtes Bild, bevor es abgeschickt ist. */
.gbc-bildvorschau { position: relative; align-self: flex-start; }
.gbc-bildvorschau[hidden] { display: none; }
.gbc-bv-img {
  display: block; max-height: 88px; max-width: 140px;
  border-radius: 11px; border: 1px solid var(--line);
  object-fit: cover;
}
.gbc-bv-x {
  position: absolute; top: -7px; right: -7px;
  width: 22px; height: 22px; border-radius: 50%; border: none; padding: 0;
  background: var(--danger); color: #fff; font-size: 11px; line-height: 22px;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.gbc-bild-knopf {
  flex: 0 0 auto; width: 38px; border: 1px solid var(--line-soft); border-radius: 11px;
  background: var(--card-2); color: var(--text); font-size: 16px; cursor: pointer; padding: 0;
}
.gbc-bild-knopf:active { background: rgba(255,255,255,.09); }

/* ── Das Menü kommt in Etappen herein ─────────────────────────────────
   Vorher erschien alles gleichzeitig – korrekt, aber flach. Jetzt setzen
   sich die Abschnitte nacheinander, mit 34 Millisekunden Abstand: Kopf,
   Schnellknöpfe, dann Gruppe für Gruppe. Das Auge folgt der Bewegung und
   liest dabei schon mit.

   Bewusst nur die ABSCHNITTE, nicht jeder einzelne Punkt – sonst flimmert
   es. Und beim Schließen läuft nichts einzeln: Die Schublade fährt als
   Ganzes zu, alles andere wäre zappelig. */
.edge-panel.open > * {
  /* 'backwards' statt 'both': Der Grundzustand der Punkte ist SICHTBAR.
     Laeuft die Animation aus irgendeinem Grund nicht, steht das Menue
     trotzdem da. Mit 'forwards' haette ein unterbrochener Lauf sie
     unsichtbar festgehalten - ein leeres Menue waere der schlimmste
     denkbare Fehler an dieser Stelle. */
  animation: edgeRein .34s cubic-bezier(.19,1,.28,1) backwards;
}
/* Kurze Staffelung, 22 ms je Abschnitt und nach dem sechsten Schluss.
   Der letzte Abschnitt ist damit bei .29 s fertig – die Schublade selbst
   braucht .52 s. Die Etappen laufen also WÄHREND der Fahrt ab und sind
   vorbei, wenn sie steht. Man sieht die Bewegung, wartet aber nie darauf.
   Eine längere Staffelung sah beim ersten Mal edel aus und beim zwanzigsten
   Öffnen zäh – und dieses Menü macht man dutzendfach am Tag auf. */
.edge-panel.open > *:nth-child(1) { animation-delay: .04s; }
.edge-panel.open > *:nth-child(2) { animation-delay: .062s; }
.edge-panel.open > *:nth-child(3) { animation-delay: .084s; }
.edge-panel.open > *:nth-child(4) { animation-delay: .106s; }
.edge-panel.open > *:nth-child(5) { animation-delay: .128s; }
.edge-panel.open > *:nth-child(n+6) { animation-delay: .15s; }
.edge-panel.left.open > *  { --edge-von: -14px; }
.edge-panel.right.open > * { --edge-von: 14px; }
@keyframes edgeRein {
  from { opacity: 0; transform: translateX(var(--edge-von, 14px)); }
  to   { opacity: 1; transform: none; }
}

/* Beim Öffnen legt sich der Schatten dazu – geschlossen braucht er ihn nicht.
   Er springt, ohne Uebergang (siehe .edge-panel): Ein 70-px-Schatten, der
   mitwaechst, muss in jedem Bild der Fahrt neu gemalt werden. NICHT fest
   auf die geschlossene Haelfte legen – bei translateX(-105%) liegt sie nur
   etwa 9 px draussen, der Schatten schiene ins Bild. */
.edge-panel { box-shadow: 0 0 0 rgba(0,0,0,0); }
.edge-panel.open { box-shadow: 0 0 70px rgba(0,0,0,.7); }

/* Geschlossen ist die Schublade nur hinausgeschoben, nicht weg. Was darin
   pulsiert (Warnpunkt, Live-Ring, Menue-Logo), lief also unsichtbar
   weiter. Angehalten, nicht gestrichen: Beim Oeffnen laeuft es weiter. */
.edge-panel:not(.open) *, .edge-panel:not(.open) *::after { animation-play-state: paused; }

/* Wer Bewegung reduziert haben will, bekommt sie sofort und ohne Etappen. */
@media (prefers-reduced-motion: reduce) {
  .edge-panel, .edge-panel.open { transition: transform .01s linear; }
  .edge-panel.open > * { animation: none; }
  .edge-backdrop, .edge-backdrop.show { transition: opacity .01s linear; }
}

/* ── 🌍 Außerhalb von Bigo ─────────────────────────────────────────────
   Ruhig gehalten: Die Angaben sollen sich lesen wie ein kurzer Absatz über
   einen Menschen, nicht wie ein ausgefüllter Fragebogen. */
.ab-karte { display: flex; flex-direction: column; gap: 12px; }
.ab-text { font-size: 14.5px; line-height: 1.55; color: var(--text); }
.ab-zeilen { display: flex; flex-direction: column; gap: 1px; }
.ab-zeile {
  display: flex; align-items: baseline; gap: 9px;
  padding: 9px 2px; font-size: 14px; line-height: 1.4;
  border-top: 1px solid var(--line-soft);
}
.ab-zeile:first-child { border-top: none; }
.ab-ic { flex: 0 0 auto; font-size: 15px; }
.ab-lbl { flex: 0 0 62px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .3px; }
.ab-wert { flex: 1; min-width: 0; word-break: break-word; }

.ab-leer {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px;
  padding: 24px 18px;
}
.ab-leer-ic { font-size: 32px; margin-bottom: 2px; }
.ab-leer b { font-size: 15px; }
.ab-leer span { font-size: 13px; color: var(--muted); line-height: 1.5; max-width: 320px; }
.ab-leer .btn { margin-top: 8px; min-width: 190px; }
@media (max-width: 380px) { .ab-lbl { flex-basis: 54px; } }

/* ── 📨 Fertige Zugangs-Nachricht (mcp) ───────────────────────────────
   Bewusst als Vorschau des echten Textes, nicht als Formular: Man sieht,
   was gleich in WhatsApp steht, bevor man auf Kopieren tippt. */
.zug-nachricht {
  white-space: pre-wrap; word-break: break-word;
  font-size: 13.5px; line-height: 1.6;
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px; margin: 12px 0 14px;
  max-height: 46vh; overflow-y: auto;
  font-family: var(--font);
}

/* ── 🌍 „… hat was von sich erzählt" (Timeline) ────────────────────────
   Warm, aber ruhiger als die Geburtstagskarte – es ist eine Einladung,
   kein Fest. Das Zitat steht eingerückt wie ein Ausschnitt aus dem Profil. */
.profil-post .pp-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.profil-post .pp-zitat {
  margin: 11px 0 10px; padding: 11px 13px;
  border-left: 3px solid var(--brand);
  border-radius: 0 12px 12px 0;
  background: linear-gradient(100deg, rgba(177,75,255,.12), rgba(177,75,255,.03)); background: linear-gradient(100deg, color-mix(in srgb, var(--brand) 12%, transparent), color-mix(in srgb, var(--brand) 3%, transparent));
  font-size: 14.5px; line-height: 1.55; word-break: break-word;
}
.profil-post .pp-hin {
  display: inline-block; font-size: 12.5px; font-weight: 800; text-decoration: none;
  color: var(--brand-2); padding: 7px 13px; border-radius: 999px;
  background: rgba(177,75,255,.12); background: color-mix(in srgb, var(--brand) 12%, transparent);
}
.profil-post .pp-hin:active { background: rgba(177,75,255,.24); background: color-mix(in srgb, var(--brand) 24%, transparent); }

/* ── 🎤 Sprachnachricht im Gästebuch-Kommentar ────────────────────────── */
.gbc-ton-knopf {
  flex: 0 0 auto; width: 38px; border: 1px solid var(--line-soft); border-radius: 11px;
  background: var(--card-2); color: var(--text); font-size: 16px; cursor: pointer; padding: 0;
}
.gbc-ton-knopf:active { background: rgba(255,255,255,.09); }
.gbc-ton-knopf.rec { background: var(--danger); border-color: transparent; animation: tonPuls 1.1s ease-in-out infinite; }
@keyframes tonPuls { 0%,100% { box-shadow: 0 0 0 0 rgba(255,90,90,.5); } 50% { box-shadow: 0 0 0 7px rgba(255,90,90,0); } }
.gbc-tonvorschau { display: flex; align-items: center; gap: 8px; }
.gbc-tonvorschau[hidden] { display: none; }
.gbc-tonvorschau .cmt-audio { flex: 1; min-width: 0; }
.gbc-ton { display: block; width: 100%; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .gbc-ton-knopf.rec { animation: none; } }

/* Foto als Hintergrund im Schreibfeld – man sieht beim Tippen schon,
   wie der Beitrag aussehen wird. */
.c-textwrap.hat-bgbild { border-radius: 16px; padding: 6px; }
.c-textwrap.hat-bgbild textarea {
  background: transparent; color: #fff; font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.c-textwrap.hat-bgbild textarea::placeholder { color: rgba(255,255,255,.75); }
.c-tool.an { background: rgba(177,75,255,.22); background: color-mix(in srgb, var(--brand) 22%, transparent); border-color: var(--brand); color: var(--text); }

/* ── 💬 Teamleitung per WhatsApp erreichen ─────────────────────────────
   Das Grün ist WhatsApps eigene Farbe und bleibt es – daran erkennt man
   sofort, wohin der Knopf führt. Alles andere trägt die Hausfarbe. */
/* ── 💬 Wendet euch an uns ─────────────────────────────────────────────
   Drei nebeneinander statt drei untereinander: Der Block hat vorher ein
   Drittel des ersten Bildschirms belegt, um dreimal denselben
   Briefumschlag zu zeigen. Jetzt steht dort das echte Gesicht, ein
   grüner Punkt bei Anwesenheit und darunter, wann die Person zuletzt da
   war – die Frage ist ja nicht „wer ist zuständig", sondern „wen
   erreiche ich jetzt". */
.lt-karte { padding: 13px; }
.lt-hin { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin-bottom: 12px; }
.lt-reihe { display: flex; gap: 8px; }
.lt-kachel { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  align-items: center; gap: 6px; padding: 11px 5px 9px; border-radius: 15px;
  text-decoration: none; color: var(--text); background: var(--card-2);
  border: 1px solid var(--line); -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, border-color .12s ease, background .12s ease; }
.lt-kachel:hover { background: color-mix(in srgb, var(--brand) 8%, var(--card-2)); }
.lt-kachel:active { transform: scale(.96); }
/* Wer gerade da ist, bekommt einen Rand in Markenfarbe – so sieht man
   die erreichbare Person, ohne die Beschriftung zu lesen. */
.lt-kachel.da { border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  box-shadow: 0 6px 18px -12px var(--brand-glow); }
.lt-bild .avatar { width: 46px; height: 46px; font-size: 17px; }
.lt-bild { position: relative; }
.lt-nm { font-size: 12px; font-weight: 700; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-da { font-size: 10.5px; font-weight: 800; letter-spacing: .3px; color: var(--ok); }
.lt-weg { font-size: 10.5px; font-weight: 600; color: var(--muted-2);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Das Logo atmet, statt die Farbe zu wechseln: Der Goldschein wird kurz
   heller und wieder ruhiger. Bewegung ohne die Marke aufzugeben. */
@keyframes goldGlimmen {
  0%, 100% { filter: drop-shadow(0 10px 34px rgba(255,206,84,.38)) saturate(1); }
  50%      { filter: drop-shadow(0 12px 42px rgba(255,222,122,.62)) saturate(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .nh-logo-img { animation: none; }
}

/* ── 📨 Bewerbungen im Kontrollraum ────────────────────────────────────
   Gebaut um die eine Handlung, die zählt: Zugangsnummer schicken. Der
   Zustand steht als Farbe am linken Rand, damit man beim Scrollen sieht,
   was noch offen ist, ohne zu lesen. */
.bw-kopf { padding: 13px 15px; border-radius: 14px; margin-bottom: 14px; line-height: 1.45; }
.bw-kopf b { display: block; font-size: 15px; margin-bottom: 2px; }
.bw-kopf span { font-size: 12.5px; color: var(--muted); }
.bw-kopf.offen { background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 38%, transparent); }
.bw-kopf.offen b { color: var(--brand); }
.bw-kopf.ruhig { background: rgba(46,212,122,.10); border: 1px solid rgba(46,212,122,.32); }
.bw-kopf.ruhig b { color: var(--ok); }

.bw-karte { position: relative; padding: 14px 14px 12px 16px; margin-bottom: 12px; overflow: hidden; }
.bw-karte::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--line); }
.bw-karte.bw-neu::before { background: var(--grad); }
.bw-karte.bw-raus::before { background: var(--warn); }
.bw-karte.bw-fertig::before { background: var(--ok); }
.bw-karte.bw-weg::before { background: var(--muted-2); }
.bw-karte.bw-weg { opacity: .62; }

.bw-oben { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.bw-name { font-size: 16px; font-weight: 800; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bw-status { flex: 0 0 auto; font-size: 11px; font-weight: 800; padding: 3px 9px;
  border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); color: var(--muted); }
.bw-karte.bw-neu .bw-status { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 42%, transparent); }

.bw-kontakt { font-size: 13.5px; margin-bottom: 9px; word-break: break-word; }
.bw-kontakt a { color: var(--brand-2); text-decoration: none; font-weight: 600; }
.bw-zeilen { display: flex; flex-direction: column; gap: 1px; margin-bottom: 9px; }
.bw-zeile { display: flex; align-items: baseline; gap: 8px; font-size: 13px;
  padding: 5px 0; border-top: 1px solid var(--line-soft); }
.bw-zeile:first-child { border-top: none; }
.bw-ic { flex: 0 0 auto; }
.bw-lbl { flex: 0 0 46px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .3px; }
.bw-wert { flex: 1; min-width: 0; word-break: break-word; }
.bw-text { font-size: 13.5px; line-height: 1.55; padding: 9px 11px; border-radius: 11px;
  background: var(--card-2); border-left: 3px solid var(--brand); margin-bottom: 9px; word-break: break-word; }
.bw-code { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.bw-code b { color: var(--text); letter-spacing: 1px; }
.bw-fuss { font-size: 11px; color: var(--dim); margin-bottom: 10px; }
.bw-knoepfe { display: flex; gap: 7px; flex-wrap: wrap; }
.bw-knoepfe .btn { flex: 1 1 auto; min-width: 0; }

/* „Wann brauchst du das?" – die Frage, die sich jede stellt, bevor sie
   den Knopf drückt. Ruhig gehalten, es ist kein Alarm. */
.nr-wann { margin-top: 14px; padding: 12px 14px; border-radius: 13px;
  background: var(--card-2); border-left: 3px solid var(--brand);
  font-size: 13.5px; line-height: 1.6; color: var(--text); }
.nr-wann b { color: var(--brand); }

/* ── Namenszeile im Profilkopf ─────────────────────────────────────────
   Dieselbe Form wie in Listen und Kommentaren, nur größer: Der Chip mit
   Geschlecht und Alter steht VOR dem Namen, Torte und Status dahinter.

   EINE Größe für alles.
   Vorher standen hier drei: der Name groß, der Status mittel, die
   Abzeichen klein. Drei Größen auf zehn Zentimetern lesen sich wie drei
   verschiedene Wichtigkeiten – dabei gehört alles zur selben Person.
   Jetzt haben alle Pillen dieselbe Höhe und Schriftgröße; die Betonung
   macht allein die Schriftstärke und die Farbe. */
.hero-zeile { display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px; row-gap: 7px; max-width: 94%; }

/* Die gemeinsame Pillen-Form für den ganzen Kopf. */
.hero-zeile .idchip,
.hero-zeile .status-txt,
.hero-chips .badge,
.hero-chips .rel-chip,
.hero-chips .tier-badge {
  font-size: 15px;
  line-height: 1.35;
  min-height: 34px;
  padding: 5px 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}
.hero-zeile .idchip { padding-left: 7px; gap: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.42); }
.hero-zeile .idchip .ga { font-size: 14px; padding: 0; }
.hero-zeile .idnm { font-weight: 900; letter-spacing: .2px; }
.hero-zeile .bday-cake { font-size: 20px; line-height: 1; }
.hero-zeile .status-txt { margin-left: 0; white-space: normal; }
.hero-chips { gap: 8px; row-gap: 7px; margin-top: 10px; }

@media (max-width: 380px) {
  .hero-zeile .idchip,
  .hero-zeile .status-txt,
  .hero-chips .badge,
  .hero-chips .rel-chip,
  .hero-chips .tier-badge { font-size: 13.5px; min-height: 31px; padding: 4px 12px; }
  .hero-zeile .idchip { padding-left: 6px; }
  .hero-zeile .idchip .ga { font-size: 12.5px; padding: 0; }
}

/* ── Schlichter Hintergrund zur Überbrückung ───────────────────────────
   Für Profile, deren Person noch kein eigenes Bild gewählt hat. Ruhiger
   Verlauf in den Hausfarben statt eines leeren Profils – und statt des
   Bildes, das gerade zufällig beim Betrachter hing. */
#eigenerHintergrund.schlicht {
  background-image:
    radial-gradient(120% 80% at 20% -10%, color-mix(in srgb, var(--brand) 34%, transparent), transparent 62%),
    radial-gradient(110% 80% at 85% 105%, color-mix(in srgb, var(--brand-2) 30%, transparent), transparent 60%),
    linear-gradient(170deg, var(--bg-2), var(--bg));
  background-size: cover;
}

/* ── 💞 Beziehung zu zweit ─────────────────────────────────────────────
   Eine Beziehung hat zwei Seiten – deshalb steht hier ein Namensschild
   und kein bloßer Text. Es ist keine Behauptung, sondern bestätigt. */
.paar-zeile { display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px; margin: 12px auto 0; font-size: 14px; }
.paar-ic { font-size: 17px; }
.paar-wort { color: var(--muted); font-weight: 600; }

/* Die offene Anfrage. Auffällig, aber nicht laut: Es ist eine Frage,
   keine Warnung. Deshalb ein weiches Leuchten statt eines Alarmrahmens. */
.paar-karte { position: relative; overflow: hidden; margin-top: 14px;
  padding: 15px; border-radius: 18px;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--brand) 15%, var(--card)),
    color-mix(in srgb, var(--brand-2) 9%, var(--card)));
  border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  box-shadow: 0 10px 30px -18px var(--brand-glow);
  animation: updIn .45s cubic-bezier(.2,.9,.3,1.2); }
/* Ein wandernder Schimmer – die Karte soll sich anfühlen wie ein Brief,
   den man gerade aufmacht. */
.paar-karte::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%,
    rgba(255,255,255,.13) 50%, transparent 62%);
  transform: translateX(-120%); animation: paarSchimmer 4.5s ease-in-out 1s infinite; }
@keyframes paarSchimmer { 0%,72% { transform: translateX(-120%); }
  100% { transform: translateX(120%); } }
.paar-karte.laeuft { background: var(--card-2);
  border-color: var(--line); box-shadow: none; }
.paar-karte.laeuft::after { display: none; }

.pa-kopf { display: flex; align-items: flex-start; gap: 11px; }
.pa-kopf b { font-size: 14.5px; }
.pa-herz { flex: 0 0 auto; font-size: 20px; line-height: 1.25;
  animation: paarPuls 2.4s ease-in-out infinite; }
.paar-karte.laeuft .pa-herz { animation: none; opacity: .75; }
@keyframes paarPuls { 0%,100% { transform: scale(1); } 45% { transform: scale(1.18); } }
.pa-unter { display: block; margin-top: 2px; font-size: 13px;
  line-height: 1.5; color: var(--muted); }
.pa-person { display: flex; align-items: center; justify-content: center;
  gap: 9px; margin: 13px 0; padding: 9px; border-radius: 14px;
  background: color-mix(in srgb, var(--text) 5%, transparent); }
.pa-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; }
.pa-knoepfe .btn { flex: 1 1 auto; }
/* Kommen mehrere Anfragen, sagen wir vorher, was passiert. */
.pa-nur-eine { margin-top: 13px; padding: 9px 12px; border-radius: 11px;
  font-size: 12.5px; line-height: 1.5; color: var(--muted);
  background: color-mix(in srgb, var(--text) 5%, transparent); }

/* Suche im Editor */
.pa-box { margin-top: 12px; padding: 13px; border-radius: 14px;
  background: var(--card-2); border: 1px solid var(--line); }
.pa-box.verbunden { border-color: color-mix(in srgb, var(--brand) 42%, transparent); }
.pa-titel { font-size: 14px; font-weight: 800; margin-bottom: 3px; }
.pa-suche { width: 100%; box-sizing: border-box; margin-top: 10px; }
.pa-treffer { display: flex; align-items: center; gap: 10px; width: 100%;
  margin-top: 8px; padding: 8px 10px; border-radius: 12px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); color: var(--text); }
.pa-treffer:active { border-color: var(--brand); transform: scale(.99); }
.pa-treffer:disabled { opacity: .55; }
.pa-name { flex: 1; min-width: 0; text-align: left; }
.pa-fragen { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: var(--brand-2); }
.pa-warte { margin-top: 10px; padding: 11px 13px; border-radius: 12px; font-size: 13.5px;
  line-height: 1.5; background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 34%, transparent); }

/* ── 🏅 Mein Rang ──────────────────────────────────────────────────────
   Eigene Seite statt Kästchen im Profil. Sie zeigt den eigenen Lauf –
   Level, Platz, Punkte pro Tag – aber NIRGENDS, wofür es wie viele
   Punkte gibt. Ein Tarif lädt zum Ausrechnen ein; ein Tagesbalken lädt
   zum Weitermachen ein. */
.rang-wrap { padding-bottom: 12px; }
.rang-kopf { position: relative; overflow: hidden; padding: 26px 18px 20px;
  border-radius: 22px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--brand) 26%, var(--card)),
    color-mix(in srgb, var(--brand-2) 15%, var(--card)) 55%, var(--card));
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  box-shadow: 0 22px 50px -30px var(--brand-glow); }
.rang-kopf::before { content: ''; position: absolute; width: 260px; height: 260px;
  top: -140px; right: -90px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--brand-glow), transparent 70%); }
.rang-kopf > * { position: relative; z-index: 1; }

.rang-ring { position: relative; width: 160px; height: 160px;
  display: flex; align-items: center; justify-content: center; }
.rang-ring svg { position: absolute; inset: 0; width: 160px; height: 160px;
  transform: rotate(-90deg); overflow: visible; }
.rg-bg { fill: none; stroke: color-mix(in srgb, var(--text) 12%, transparent); stroke-width: 9; }
.rg-fg { fill: none; stroke: url(#rgGrad); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 439.8; stroke-dashoffset: 439.8;
  filter: drop-shadow(0 0 10px var(--brand-glow));
  animation: hrFuellen 1.35s .25s cubic-bezier(.2,.85,.3,1) forwards; }
.rg-mitte { display: flex; flex-direction: column; align-items: center; line-height: 1; }
/* In der Ringmitte steht jetzt das Rang-Abzeichen. Die alte Regel hier
   färbte JEDES <b> darin durchsichtig (Farbverlauf-Schrift) – dadurch
   verschwand die Stufenzahl auf dem Abzeichen spurlos. */
/* Fortschritt zum nächsten Level – als Balken mit der Zahl darin, damit
   man ihn ohne Nachdenken liest. Der Ring darüber ist das Schöne, dieser
   Balken das Genaue. */
.rg-fort { width: 100%; max-width: 330px; margin-top: 16px; }
.rg-fort-titel { font-size: 12.5px; font-weight: 800; color: var(--muted);
  letter-spacing: .2px; margin-bottom: 7px; }
.rg-fort-bar { height: 26px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--text) 11%, transparent);
  border: 1px solid var(--line); }
.rg-fort-bar span { position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: flex-end;
  height: 100%; padding-right: 9px; box-sizing: border-box; border-radius: 999px;
  font-size: 11.5px; font-weight: 900; color: var(--on-brand);
  box-shadow: 0 3px 14px -4px var(--brand-glow);
  /* Der Verlauf ist doppelt so breit wie der Balken und wandert - dadurch
     fliesst die Farbe, statt still zu stehen. */
  background: linear-gradient(100deg, var(--brand), var(--brand-2), var(--accent),
    var(--brand-2), var(--brand));
  background-size: 260% 100%;
  animation: rgBalken 1.1s .2s cubic-bezier(.2,.85,.3,1) both,
             rgFliessen 7s linear 1.2s infinite; }
@keyframes rgBalken { from { width: 0 !important; } }
@keyframes rgFliessen { from { background-position: 0% 50%; }
  to { background-position: -260% 50%; } }
/* Ein Glanz laeuft alle paar Sekunden durch - so wirkt der Balken lebendig,
   ohne dass staendig etwas blinkt. */
.rg-fort-bar span::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%,
    rgba(255,255,255,.42) 50%, transparent 65%);
  transform: translateX(-130%); animation: rgGlanz 4.2s ease-in-out 1.4s infinite; }
@keyframes rgGlanz { 0%, 68% { transform: translateX(-130%); }
  100% { transform: translateX(130%); } }
/* Die Prozentzahl liegt ueber dem Glanz, nicht darunter – und bekommt
   einen leisen Schatten, damit sie auch in dem Moment lesbar bleibt, in
   dem der Glanz genau unter ihr durchlaeuft. */
.rg-fort-bar span { isolation: isolate; }
.rg-fort-bar span > b { position: relative; z-index: 1; font-weight: 900;
  text-shadow: 0 1px 3px rgba(0,0,0,.42); }
.rg-fort-zahl { margin-top: 7px; font-size: 12.5px; color: var(--muted); }
.rg-fort-zahl b { color: var(--text); font-weight: 800; }

.rg-zahlen { display: flex; gap: 8px; margin-top: 16px; width: 100%; max-width: 330px; }
.rg-kachel { flex: 1; padding: 11px 6px; border-radius: 14px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 3px; }
.rg-kachel b { font-size: 19px; font-weight: 900; }
.rg-kachel span { font-size: 11px; font-weight: 700; color: var(--muted); }
.rg-kachel.gut b { color: var(--ok); }

.rg-titel { font-size: 15px; font-weight: 800; }
/* Die Tagesbalken. Sie beantworten „wie lief meine Woche" – ohne zu
   verraten, was eine einzelne Handlung wert ist. */
.rg-balken { display: flex; align-items: flex-end; gap: 4px; height: 132px; margin-top: 12px; }
.rg-tag { flex: 1; min-width: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.rg-wert { font-size: 9.5px; font-weight: 800; color: var(--muted); height: 12px; }
.rg-saeule { width: 100%; max-width: 22px; border-radius: 6px 6px 3px 3px;
  background: var(--grad); box-shadow: 0 3px 12px -4px var(--brand-glow);
  transform-origin: bottom; animation: rgWachsen .6s cubic-bezier(.2,.9,.3,1.15) both; }
.rg-tag:nth-child(2) .rg-saeule { animation-delay: .03s } .rg-tag:nth-child(3) .rg-saeule { animation-delay: .06s }
.rg-tag:nth-child(4) .rg-saeule { animation-delay: .09s } .rg-tag:nth-child(5) .rg-saeule { animation-delay: .12s }
.rg-tag:nth-child(6) .rg-saeule { animation-delay: .15s } .rg-tag:nth-child(7) .rg-saeule { animation-delay: .18s }
.rg-tag:nth-child(8) .rg-saeule { animation-delay: .21s } .rg-tag:nth-child(9) .rg-saeule { animation-delay: .24s }
.rg-tag:nth-child(10) .rg-saeule { animation-delay: .27s } .rg-tag:nth-child(11) .rg-saeule { animation-delay: .3s }
.rg-tag:nth-child(12) .rg-saeule { animation-delay: .33s } .rg-tag:nth-child(13) .rg-saeule { animation-delay: .36s }
.rg-tag:nth-child(14) .rg-saeule { animation-delay: .39s }
@keyframes rgWachsen { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* Ein Tag mit Abzug bekommt einen Fuß in Warnfarbe – auffällig genug,
   um nachzusehen, aber ohne den Tag „rot durchzustreichen". */
.rg-tag.minus .rg-saeule { box-shadow: 0 3px 12px -4px var(--brand-glow), 0 3px 0 0 var(--warn); }
.rg-wt { font-size: 10px; font-weight: 700; color: var(--muted); }
/* Der letzte Balken ist heute – der bekommt den Namen. */
.rg-tag:last-child .rg-wt { color: var(--brand-2); font-weight: 900; }

.rg-abz-zeile { display: flex; align-items: center; gap: 11px; padding: 9px 0;
  border-top: 1px solid var(--line); }
.rg-abz-zeile:first-of-type { border-top: none; }
.rg-minus { flex: 0 0 auto; min-width: 46px; text-align: center; padding: 5px 8px;
  border-radius: 9px; font-size: 13.5px; font-weight: 900; color: var(--warn);
  background: rgba(255,176,32,.13); border: 1px solid rgba(255,176,32,.34); }
.rg-grund { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rg-grund b { font-size: 13.5px; font-weight: 700; }
.rg-grund span { font-size: 11.5px; color: var(--muted); }
/* Das Level-Schildchen am Ring führt auf die eigene Rang-Seite. */
.hr-lvl.klick { text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background .12s ease; }
.hr-lvl.klick:hover { background: rgba(12,12,20,.85); transform: translateX(-50%) scale(1.06); }
.hr-lvl.klick:active { transform: translateX(-50%) scale(.96); }

/* Der Verlauf im Jappy-Stil: links Zeit und Sorte, rechts die Bewegung und
   der Stand danach. Die Sorte ist mit Absicht allgemein („Aktivitätsbonus")
   – nur bei Abzügen steht der echte Grund. */
.rg-verlauf { margin-top: 10px; }
.rg-v { display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--line); }
.rg-v:first-child { border-top: none; }
.rg-v-links { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rg-v-zeit { font-size: 11px; color: var(--muted); }
.rg-v-links b { font-size: 14px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rg-v-rechts { flex: 0 0 auto; display: flex; align-items: baseline; gap: 10px; }
.rg-v-delta { font-size: 15px; font-weight: 900; color: var(--ok); }
.rg-v-stand { font-size: 13px; font-weight: 700; color: var(--muted);
  min-width: 44px; text-align: right; }
/* Ein Abzug fällt auf, ohne die Zeile zu „durchzustreichen". */
.rg-v.ab { background: rgba(255,176,32,.07); border-radius: 10px;
  margin: 0 -8px; padding: 10px 8px; }
.rg-v.ab .rg-v-delta { color: var(--warn); }
.rg-v.ab .rg-v-links b { color: var(--warn); }

/* ── Rang-Abzeichen ────────────────────────────────────────────────────
   Es bewegt sich – aber als Zeichnung, nicht als GIF: So bleibt es in
   jeder Größe scharf, kostet ein paar hundert Byte statt hundert
   Kilobyte, und die Farbwelt der App färbt es mit ab. */
.rang-ab { position: relative; display: inline-flex; align-items: center;
  justify-content: center; width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 11px; overflow: hidden; vertical-align: middle;
  background: linear-gradient(150deg, var(--ra), var(--rb));
  box-shadow: 0 4px 14px -4px var(--rb), inset 0 1px 0 rgba(255,255,255,.45); }
/* Der Lichtstrahl wandert alle paar Sekunden einmal durch. */
.rang-ab::after { content: ''; position: absolute; inset: -30%;
  background: linear-gradient(115deg, transparent 40%,
    rgba(255,255,255,.6) 50%, transparent 60%);
  transform: translateX(-130%); animation: raGlanz 3.6s ease-in-out infinite; }
@keyframes raGlanz { 0%, 62% { transform: translateX(-130%); }
  100% { transform: translateX(130%); } }
.rang-ab i { font-size: 15px; font-style: normal; line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
/* Die Zahl sitzt als kleine Marke in der Ecke – so bleibt das Zeichen
   das Erste, was man sieht, und die Stufe das Zweite. */
/* Die Stufe als eigene kleine Marke – auf der hellen Abzeichenfläche
   verschwand sie vorher, egal wie stark der Schatten war. */
.rang-ab b { position: absolute; right: 2px; bottom: 2px; min-width: 13px;
  padding: 1px 3px; border-radius: 5px; font-size: 9px; font-weight: 900;
  color: #fff; background: rgba(12,12,20,.72); line-height: 1.25;
  text-align: center; }
.rang-ab.gr { width: 84px; height: 84px; border-radius: 26px;
  box-shadow: 0 12px 34px -10px var(--rb), inset 0 2px 0 rgba(255,255,255,.5); }
.rang-ab.gr i { font-size: 38px; }
.rang-ab.gr b { right: 7px; bottom: 7px; min-width: 24px; padding: 3px 6px;
  border-radius: 9px; font-size: 14px; }

/* Der Rang-Name auf der Rang-Seite. */
.rg-rang { margin-top: 13px; font-size: 22px; font-weight: 900; letter-spacing: .3px;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; }
.rg-naechst { margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.rg-naechst b { color: var(--text); }
/* Im Profilkopf steht der Rang-Name statt des Wortes „Level". */
.hr-lvl { flex-direction: row; gap: 6px; padding: 4px 12px 4px 5px; }
.hr-lvl .rang-ab { width: 26px; height: 26px; border-radius: 9px; }
.hr-lvl .rang-ab i { font-size: 12px; }
.hr-lvl .rang-ab b { right: 0; bottom: 0; font-size: 8px; min-width: 11px;
  padding: 0 2px; border-radius: 4px; }
.hr-lvl span { margin-top: 0; font-size: 11px; font-weight: 800;
  letter-spacing: .5px; text-transform: none; color: rgba(255,255,255,.92); }

/* ── Ausklappbare „mehr"-Zeile ─────────────────────────────────────────
   Ein <details> statt eines eigenen Auf-/Zuklapp-Mechanismus: Der Browser
   kann das, es funktioniert ohne JavaScript, und der Inhalt ist auch
   zugeklappt im Dokument – die Ja/Nein-Knöpfe darin sind also schon
   verdrahtet, wenn jemand aufklappt. */
.mehr-klapp { border-radius: 14px; }
.mehr-klapp > summary { display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 11px 14px; border-radius: 14px; cursor: pointer;
  list-style: none; font-size: 13px; font-weight: 800; letter-spacing: .2px;
  color: var(--muted); background: var(--card); border: 1px solid var(--line);
  -webkit-tap-highlight-color: transparent;
  transition: background .14s ease, color .14s ease, border-color .14s ease; }
.mehr-klapp > summary::-webkit-details-marker { display: none; }
.mehr-klapp > summary:hover { color: var(--text);
  border-color: color-mix(in srgb, var(--brand) 38%, transparent); }
.mehr-klapp > summary:active { transform: scale(.99); }
.mk-pfeil { font-size: 11px; transition: transform .2s cubic-bezier(.2,.9,.3,1.2); }
.mehr-klapp[open] > summary { color: var(--text); border-radius: 14px 14px 0 0;
  border-bottom-color: transparent; }
.mehr-klapp[open] .mk-pfeil { transform: rotate(180deg); }
.mehr-klapp[open] > .stack { animation: updIn .3s cubic-bezier(.2,.9,.3,1.1); }

/* ── Zurück auf Unterseiten ────────────────────────────────────────────
   Bewusst zurückhaltend: Es ist ein Weg, keine Handlung. Deshalb kein
   voller Knopf, sondern eine Zeile, die man trotzdem gut trifft. */
.seiten-zurueck { display: inline-flex; align-items: center; gap: 5px;
  margin: 0 0 12px; padding: 8px 14px 8px 10px; border-radius: 999px;
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  color: var(--muted); background: var(--card); border: 1px solid var(--line);
  -webkit-tap-highlight-color: transparent;
  transition: color .14s ease, border-color .14s ease, transform .1s ease; }
.seiten-zurueck:hover { color: var(--text);
  border-color: color-mix(in srgb, var(--brand) 38%, transparent); }
.seiten-zurueck:active { transform: scale(.96); }
.sz-pfeil { font-size: 19px; line-height: 1; margin-top: -2px; color: var(--brand-2); }

/* Frisches Konto: leere Balken sehen aus wie ein Fehler, nicht wie ein Anfang. */
.rg-frisch { margin-top: 10px; padding: 11px 13px; border-radius: 12px;
  font-size: 12.5px; line-height: 1.55; color: var(--muted);
  background: color-mix(in srgb, var(--brand) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent); }
.rg-balken.blass { opacity: .35; height: 84px; }

/* Die Lücke, wo der Status stünde. Zurückhaltend – es ist eine Einladung,
   keine Aufforderung: gestrichelt statt gefüllt, und nur auf dem eigenen
   Profil. Elf von dreizehn Mitgliedern hatten nie einen Status gesetzt,
   weil der Knopf dafür unter dem Bild steht und nach Einstellungen
   aussieht. Hier steht er da, wo die Lücke ist. */
.status-luecke { margin-left: 7px; padding: 5px 12px; border-radius: 999px;
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  color: rgba(255,255,255,.8); background: rgba(255,255,255,.08);
  border: 1px dashed rgba(255,255,255,.34); backdrop-filter: blur(8px);
  vertical-align: middle; -webkit-tap-highlight-color: transparent;
  transition: background .14s ease, border-color .14s ease, transform .1s ease; }
.status-luecke:hover { background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.6); color: #fff; }
.status-luecke:active { transform: scale(.95); }

/* Der Verschlüsselungs-Zustand im Chat. Er gehört sichtbar über die
   Nachrichten, nicht in die Nutzungsbedingungen: Die App hat pauschal
   Ende-zu-Ende versprochen und ist still auf Klartext zurückgefallen,
   wenn einer der beiden kein Chat-Passwort hatte. */
.e2e-zeile { font-size: 12.5px; line-height: 1.5; padding: 8px 13px;
  border-radius: 11px; margin: 0 0 8px; }
.e2e-zeile:empty { display: none; }
.e2e-zeile.zu { color: var(--ok);
  background: rgba(46,212,122,.10); border: 1px solid rgba(46,212,122,.28); }
.e2e-zeile.offen { color: var(--warn);
  background: rgba(255,176,32,.10); border: 1px solid rgba(255,176,32,.30); }
.e2e-los { margin-left: 6px; padding: 3px 10px; border-radius: 999px;
  font: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
  color: var(--warn); background: rgba(255,176,32,.16);
  border: 1px solid rgba(255,176,32,.45); }
.e2e-los:active { transform: scale(.96); }

/* Der Hymnen-Knopf auf dem Anmeldebildschirm. Klein, unten rechts, und nur
   dort – in der laufenden App gibt es ihn nicht, weil dort gearbeitet wird.
   Die Chatblase steht unten rechts, also sitzt er eine Reihe darüber: Der
   Weg zu uns geht vor, die Musik ist Beiwerk. */
.hymne-knopf { position: fixed; right: 16px; bottom: calc(74px + var(--safe-bottom));
  z-index: 60; display: flex; align-items: center; gap: 4px;
  height: 42px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--muted);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  border: 1px solid var(--line); backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px -14px #000;
  -webkit-tap-highlight-color: transparent;
  transition: color .16s ease, border-color .16s ease, transform .1s ease; }
.hymne-knopf:hover { color: var(--text);
  border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.hymne-knopf:active { transform: scale(.95); }
.hymne-knopf i { width: 2px; height: 5px; border-radius: 1px;
  background: currentColor; opacity: .5; }
.hymne-knopf[aria-pressed="true"] { color: var(--brand-2);
  border-color: color-mix(in srgb, var(--brand-2) 45%, transparent); }
.hymne-knopf[aria-pressed="true"] i { opacity: 1;
  animation: hymneWelle .9s ease-in-out infinite; }
.hymne-knopf[aria-pressed="true"] i:nth-of-type(2) { animation-delay: .15s; }
.hymne-knopf[aria-pressed="true"] i:nth-of-type(3) { animation-delay: .3s; }
@keyframes hymneWelle { 0%,100% { height: 5px } 50% { height: 15px } }
@media (prefers-reduced-motion: reduce) { .hymne-knopf i { animation: none !important } }

/* ── Startbildschirm: das echte Logo legt sich frei ─────────────────────
   Dieselbe Bewegung wie auf 4ever1.tv – die beiden Häuser sollen sich
   gleich anfühlen. Vorher stand hier das fertige Logo UND darunter eine
   generische Acht, die sich zeichnete: zwei Dinge, die dasselbe sagen.

   BEWUSST NUR HIER. Beim Wechsel zwischen Ansichten bleibt es bei den
   schlichten Platzhaltern – ein Marken-Aufbau bei jedem Antippen würde
   die App langsamer wirken lassen, als sie ist, und nach dem dritten Mal
   nur noch nerven. Ein solcher Moment trägt genau einmal: beim Ankommen. */
.boot-mark { width: min(74vw, 300px); height: auto; display: block;
  filter: drop-shadow(0 16px 42px var(--brand-glow)); }
.boot-zug { stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: bootFrei 2.05s cubic-bezier(.5,.02,.28,1) .12s forwards; }
@keyframes bootFrei { to { stroke-dashoffset: 0 } }
@media (prefers-reduced-motion: reduce) {
  .boot-zug { animation: none; stroke-dashoffset: 0 }
}

/* ═══ Sprachumschaltung auf der Startseite ═══
   Ganz oben, noch vor dem Logo: Ein Pruefer bei Apple liest Englisch und
   soll nicht erst ein Konto brauchen oder scrollen muessen, um umzuschalten.
   Zurueckhaltend gehalten - sie ist Werkzeug, nicht Hauptdarsteller. */
.sprach-wahl {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 0 0 14px;
}
.sprach-wahl .sw-ic { font-size: 14px; opacity: .65; margin-right: 2px; }
.sprach-wahl .sw-knopf {
  border: 1px solid var(--line); background: transparent;
  color: var(--muted); cursor: pointer;
  font-size: 12.5px; font-weight: 700; font-family: inherit;
  padding: 5px 12px; border-radius: 999px;
  transition: color .15s, border-color .15s, background .15s;
}
.sprach-wahl .sw-knopf:active { transform: scale(.96); }
.sprach-wahl .sw-knopf.an {
  background: var(--grad); color: var(--on-brand);
  border-color: transparent; box-shadow: 0 4px 14px var(--brand-glow);
}
.sprach-wahl .sw-knopf:disabled { opacity: .6; cursor: default; }
@media (hover: hover) {
  .sprach-wahl .sw-knopf:not(.an):hover { color: var(--text); border-color: var(--brand); }
}

/* ═══ ✍️ Schreiben mit einer Hand ═════════════════════════════════════
   Der Stift sitzt in der Ecke der Schreibhand, das Schreibfenster legt
   sich über alles, und die Werkzeuge stehen als senkrechte Leiste am
   Rand – dort, wo der Daumen ohnehin liegt.

   Höhenordnung: Stift 45 (über der Leiste, 44) · Fenster 52 (über dem
   Menü, 47–49) · Blätter bleiben bei 60 und liegen damit ÜBER dem
   Fenster, sonst wäre jede Auswahl unsichtbar. */
.stift{
  position:fixed; z-index:45;
  right:calc(14px + env(safe-area-inset-right, 0px));
  bottom:calc(var(--safe-bottom) + 82px);
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center; font-size:25px; line-height:1;
  border:0; cursor:pointer; color:var(--on-brand);
  background:var(--grad);
  box-shadow:0 14px 32px -10px var(--brand-glow), 0 3px 10px -3px rgba(0,0,0,.55);
  transition:opacity .2s ease, transform .16s ease;
}
.stift:active{ transform:scale(.92); }
.stift.aus{ opacity:0; pointer-events:none; transform:translateY(14px) scale(.9); }
.stift:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
body.hand-links .stift{ right:auto; left:calc(14px + env(safe-area-inset-left, 0px)); }
/* Bei offenem Menü genauso weg wie die Leiste. */
.app-shell.menu-open .stift{ opacity:0; pointer-events:none; }

/* Welche Hand? Ein Schalter in den Einstellungen — nicht mehr eine
   Frage, die sich vor das Schreiben stellt. Der gewählte Teil ist gefüllt,
   damit man den Zustand sieht, ohne ihn anzutippen. */
.hand-schalter{
  display:flex; gap:4px; flex:none; padding:3px; border-radius:12px;
  background:var(--bg-2); border:1px solid var(--line);
}
.hand-opt{
  padding:7px 11px; border-radius:9px; cursor:pointer; white-space:nowrap;
  background:transparent; border:0; color:var(--muted); font:inherit;
  font-size:13px; font-weight:700;
  transition:background .16s ease, color .16s ease, transform .12s ease;
}
.hand-opt.an{ background:var(--grad); color:var(--on-brand); }
.hand-opt:active{ transform:scale(.95); }
.hand-opt:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ── Das Schreibfenster ───────────────────────────────────────────── */
.schreibfenster{
  position:fixed; inset:0; z-index:52;
  background:var(--bg);
  opacity:0; pointer-events:none; transform:translateY(18px);
  transition:opacity .22s ease, transform .26s cubic-bezier(.2,.85,.25,1);
}
.schreibfenster.auf{ opacity:1; pointer-events:auto; transform:none; }
.sf-flaeche{
  /* Der Boden des Fensters endet ueber der Tastatur.
     EINE Zeile statt drei Rechnungen: Weil hier der Rand sitzt, wandern
     Textfeld, Leiste und Zuklapp-Stift von selbst mit - sie haengen alle an
     diesem Boden. Ohne das lagen sie hinter der Tastatur, und von neun
     Knoepfen war einer erreichbar. */
  position:absolute; inset:0 0 var(--sf-tastatur, 0px) 0;
  display:flex; flex-direction:column;
  max-width:var(--maxw); margin:0 auto; width:100%;
}
.sf-kopf{
  flex:none; display:flex; align-items:center; gap:10px;
  padding:calc(var(--safe-top) + 10px) 12px 10px;
  border-bottom:1px solid var(--line); background:var(--bg-2);
}
.sf-zu{
  width:36px; height:36px; flex:none; border-radius:50%;
  background:var(--card-2); border:1px solid var(--line); color:var(--text);
  font-size:16px; cursor:pointer; display:grid; place-items:center;
}
.sf-titel{ font-weight:700; font-size:16px; letter-spacing:-.01em; }
.sf-post{ margin-left:auto; border-radius:999px; padding:9px 20px; font-weight:700; }
/* ⚠️ Hier stand `margin-top:auto` — das schob den ganzen Inhalt an den
   unteren Rand, damit das Textfeld im Daumenbogen liegt. Auf einem Telefon
   ist das richtig. Auf einem breiten oder hohen Bildschirm entstand daraus
   ein Loch von mehreren hundert Pixeln zwischen Kopfzeile und Feld: Man
   oeffnete das Fenster und sah erst einmal Nichts.

   Der Abstandhalter bleibt hier OHNE Obergrenze: Am Telefon ist genau das
   richtig, das Feld soll unten liegen. Fuer Maus und Zeiger faellt er in
   der Medienabfrage weiter unten ganz weg — dort folgt der Knopf dem
   Inhalt, statt am anderen Ende des Bildes zu kleben.

   ⚠️ Nicht in der Mitte deckeln: Ein Abstandhalter mit Obergrenze schob
   das Feld aus dem Daumenbogen nach oben UND liess unten trotzdem eine
   Luecke. Damit war es an beiden Enden falsch. */
.sf-rumpf::before { content:''; flex:1 1 0; min-height:0; }

.sf-rumpf{
  flex:1; overflow-y:auto;
  /* Alles sitzt UNTEN.
     Vorher stand das Textfeld oben unter dem Namen – um es zu treffen,
     musste man mit dem rechten Daumen quer über den Bildschirm greifen und
     das Telefon dabei umfassen. Genau dabei fällt es einem aus der Hand.
     Jetzt wächst der Inhalt von unten nach oben: Das Feld liegt im
     Daumenbogen, Anhänge und Bilder schieben sich darüber. */
  /* ⚠️ NICHT justify-content:flex-end benutzen: Damit laeuft der Inhalt nach
     OBEN ueber, und dieser Teil gehoert nicht zum scrollbaren Bereich — er
     war nicht weggescrollt, sondern unerreichbar. Dasselbe Ergebnis ohne die
     Falle: Das erste Kind bekommt margin-top:auto und schiebt alles nach
     unten, der Ueberlauf bleibt oben scrollbar. */
  display:flex; flex-direction:column;
  gap:10px;
  /* Unten nur noch Luft. Die 86 px waren der Platz, den der schwebende
     ✓-Knopf brauchte — der steht jetzt in der Reihe darunter. */
  padding:14px 12px 8px;
  /* ⚠️ min-height:0 ist Pflicht, nicht Kosmetik.
     Ein Flex-Kind hat von Haus aus `min-height:auto` und schrumpft
     deshalb NICHT unter seinen Inhalt — auch dann nicht, wenn es
     `flex:1` und `overflow-y:auto` hat. Folge: Bei vollem Fenster
     schob dieser Bereich den „Posten"-Knopf unter den Bildschirmrand.
     Auf dem Bildschirmfoto war er angeschnitten. */
  min-height:0;
}
/* Das Feld endet knapp links neben der Leiste und fängt daneben wieder an –
   sonst liegt die Leiste auf dem Text, den man gerade schreibt. */
.sf-textwrap{ flex:none; }

.sf-wer{ order:-1; }
.sf-wer{ display:flex; gap:10px; align-items:center; margin-bottom:12px; }
.sf-name{ font-size:14.5px; font-weight:600; margin-bottom:4px; }
.sf-textwrap{ border-radius:var(--radius-sm); overflow:hidden; position:relative; }
.sf-textwrap textarea{
  width:100%; min-height:96px; max-height:34vh; background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  color:var(--text); font:inherit; font-size:16px; line-height:1.5;
  padding:12px; resize:none; outline:none;
}
.sf-textwrap textarea:focus{ border-color:var(--brand); }
.sf-textwrap.has-bg textarea, .sf-textwrap.hat-bgbild textarea{
  background:transparent; border-color:transparent; color:#fff;
  font-weight:700; font-size:20px; text-align:center; min-height:170px;
  display:flex; align-items:center; padding-top:52px;
}
.sf-anhang{ display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
/* ⚠️ Leere Felder kosten trotzdem Platz: .sf-rumpf ist eine Flex-Spalte mit
   gap:10px, und ein leeres Kind bekommt seinen Zwischenraum genauso wie ein
   volles. Zwei davon standen zwischen Vorschau und Textfeld — eine Lücke,
   die aussah, als fehle dort etwas. */
.sf-rumpf > .previews:empty, .sf-rumpf > .sf-anhang:empty,
.sf-rumpf > .sf-zaehler:empty { display:none; }
.sf-marke{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; padding:5px 7px 5px 11px; border-radius:999px;
  background:var(--card-2); border:1px solid var(--line);
}
.sf-marke.ort{ border-color:color-mix(in srgb, var(--accent) 55%, transparent); }
.sf-weg{ background:none; border:0; color:var(--muted-2); font-size:14px; cursor:pointer; padding:0 2px; line-height:1; }
.sf-momente{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.sf-zaehler{ font-size:12px; color:var(--muted-2); text-align:right; margin-top:8px; }
.sf-zaehler.warn{ color:var(--warn); }

/* ── Die Leiste der Unterknöpfe ───────────────────────────────────── */
.sf-leiste{
  /* Quer statt senkrecht.
     Senkrecht musste die Leiste kurz bleiben, sonst wuchs sie bis in die
     Bildschirmmitte und man streckte den Daumen nach oben – genau das, was
     sie vermeiden sollte. Quer ist der Weg immer gleich weit: Der Daumen
     bleibt liegen und schiebt die Knoepfe an sich vorbei.
     Sie steht IM Fluss, direkt ueber dem Textfeld – nicht mehr schwebend
     daneben. Dadurch bekommt das Feld die 74 px zurueck, die vorher fuer
     die Leiste freigehalten wurden. */
  flex:none; z-index:3;
  /* ⚠️ Sie schiebt nicht mehr.
     Vorher lag sie quer und scrollte, weil rechts 76 px für den
     schwebenden ✓-Knopf freigehalten wurden — von 375 px Bildschirm
     blieben damit 299 für neun Werkzeuge. Es passten sechs. Die drei
     anderen lagen außerhalb des Bildes, und weil das je nach Hand die
     falschen drei waren, musste die App vorher fragen, welche Hand.
     Jetzt teilen sich alle Werkzeuge die volle Breite: Was da ist, ist
     zu sehen, und die Frage erübrigt sich. */
  display:flex; flex-direction:row; align-items:stretch; gap:3px;
  padding:7px 5px;
  background:rgba(23,23,35,.86);
  border:1px solid var(--line); border-radius:999px;
  box-shadow:0 14px 32px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(16px) saturate(1.25);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);
  transition:opacity .2s ease, transform .24s cubic-bezier(.2,.85,.25,1);
}
.sf-leiste::-webkit-scrollbar{ width:0; height:0; }

/* Zugeklappt faehrt sie nach unten weg, nicht mehr zur Seite. */
.schreibfenster.leiste-zu .sf-leiste{ opacity:0; pointer-events:none; transform:translateY(24px) scale(.96); }


.sf-knopf{
  /* flex:1 mit min-width:0 — alle gleich breit, alle sichtbar. Ohne
     min-width:0 bestimmt der längste Text die Breite und die Leiste
     läuft doch wieder über den Rand hinaus. */
  flex:1 1 0; min-width:0; padding:6px 2px 5px; border-radius:13px;
  background:transparent; border:1px solid transparent; color:var(--text);
  line-height:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  cursor:pointer; position:relative;
  transition:transform .14s ease, border-color .16s ease, background .16s ease;
}
.sf-ic{ font-size:20px; line-height:1; }
/* Die Beschriftung ist absichtlich klein: Sie soll erklären, nicht rufen. */
.sf-kurz{
  font-size:9px; font-weight:700; letter-spacing:-.02em; color:var(--muted);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sf-knopf:active{ transform:scale(.9); }
.sf-knopf:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.sf-knopf.haupt{ background:var(--grad); border-color:transparent; color:var(--on-brand);
  box-shadow:0 8px 18px -8px var(--brand-glow); }
.sf-knopf.haupt .sf-kurz{ color:var(--on-brand); opacity:.92; }
.sf-punkt{
  position:absolute; top:3px; right:calc(50% - 17px); width:9px; height:9px; border-radius:50%;
  background:var(--accent); border:2px solid var(--card); display:none;
}
.sf-knopf.gesetzt{ background:rgba(55,224,200,.12); border-color:rgba(55,224,200,.4); }
.sf-knopf.gesetzt .sf-punkt{ display:block; }
@media (max-width:340px){ .sf-kurz{ display:none; } .sf-knopf{ padding:9px 2px; } }
/* Der Knopf unten rechts: veroeffentlichen.
   Er sitzt an der bequemsten Stelle des ganzen Bildschirms — dort, wo der
   Daumen ohnehin liegt. „Posten" oben rechts bleibt fuer Rechner und fuer
   alle, die es dort suchen; beide tun dasselbe. */
/* ⚠️ Er schwebt nicht mehr in einer Ecke.
   Eine Ecke gehört immer nur einem Daumen — deshalb gab es vorher eine
   Regel dafür, welche. Über die ganze Breite erreichen ihn beide, er
   trifft sich blind, und er sieht nach dem aus, was er ist: der Knopf,
   auf den es hier ankommt. */
.sf-los{
  position:static; z-index:3; width:100%; flex:none;
  height:54px; padding:0 20px; border-radius:16px; border:0;
  /* Eigene Zeile unter dem Fensterinhalt, mit Abstand zum Rand und zur
     Home-Leiste des Telefons. */
  width:calc(100% - 24px); margin:0 12px calc(var(--safe-bottom) + 12px);
  background:var(--grad); color:var(--on-brand); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px; font:inherit;
  font-size:16px; font-weight:800; letter-spacing:-.01em;
  box-shadow:0 14px 32px -12px var(--brand-glow);
  transition:transform .16s ease, opacity .2s ease, filter .16s ease;
}
.sf-los:active{ transform:scale(.94); }
.sf-los:disabled{
  opacity:.42; background:var(--card-2); color:var(--muted);
  box-shadow:none; cursor:default;
}
.sf-los-ic{ font-size:17px; line-height:1; }
.sf-los:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
/* Während er abschickt: Er füllt sich, statt nur grau zu werden. */
.sf-los.faehrt{ pointer-events:none; }
.sf-los.faehrt .sf-los-txt::after{ content:' …'; }

/* Die Vorschau: dieselbe Karte, die gleich im Feed steht.
   Gedeckelt und rechts freigehalten — sonst quetscht sie das Textfeld
   zusammen und schiebt sich unter die Werkzeugleiste. Beides passiert
   sofort, wenn ein Bild oder ein Video dazukommt. */
.sf-vorschau{
  margin-bottom:12px;
  max-height:40vh; overflow-y:auto; flex:0 1 auto; min-height:0;
}

.sf-vorschau::-webkit-scrollbar{ width:0; }
/* Solange die Tastatur oben ist, gehört der Platz dem Schreiben. */
.schreibfenster.tastatur-auf .sf-vorschau{ display:none; }
.sf-v-titel{
  font-family:inherit; font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted-2); margin:0 2px 7px; font-weight:700;
}
.sf-v-karte .card.post{ pointer-events:none; }
.sf-v-karte .actions{ opacity:.5; }
.sf-v-karte .previews{ display:flex; gap:6px; flex-wrap:wrap; }
.sf-v-karte .previews .pv img{ width:58px; height:58px; object-fit:cover; border-radius:9px; }

/* Der alte Zuklapp-Stift — bleibt fuer den Fall, dass ihn noch etwas ruft. */
.sf-stift-innen{
  position:absolute; z-index:3;
  right:14px; bottom:calc(var(--safe-bottom) + 18px);
  width:54px; height:54px; border-radius:50%; border:1px solid var(--line);
  background:var(--card-2); color:var(--text); font-size:23px; line-height:1;
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 12px 28px -10px rgba(0,0,0,.7);
  transition:transform .16s ease;
}
.sf-stift-innen:active{ transform:scale(.92); }
body.hand-links .sf-stift-innen{ right:auto; left:14px; }
.schreibfenster.leiste-zu .sf-stift-innen{ background:var(--grad); border-color:transparent; color:var(--on-brand); }

/* ── Zeilen in den Blättern (Ort, Foto, Datei) ────────────────────── */
.sf-zeile{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:11px 6px; background:none; border:0; border-bottom:1px solid var(--line);
  color:var(--text); font:inherit; text-align:left; cursor:pointer;
}
.sf-zeile:last-of-type{ border-bottom:0; }
.sf-zeile:active{ background:var(--card-2); }
.sf-z-ic{
  width:40px; height:40px; flex:none; border-radius:12px;
  background:var(--card-2); border:1px solid var(--line);
  display:grid; place-items:center; font-size:19px;
}
.sf-z-mid{ flex:1; min-width:0; display:flex; flex-direction:column; }
.sf-z-mid b{ font-size:14.5px; font-weight:600; }
.sf-z-mid span{ font-size:12.5px; color:var(--muted); }
.sf-z-weit{ flex:none; font-size:12.5px; color:var(--accent); font-variant-numeric:tabular-nums; }

.wo-lade{ display:flex; align-items:center; gap:11px; padding:22px 4px; color:var(--muted); font-size:14px; }
.wo-kreisel{
  width:18px; height:18px; flex:none; border-radius:50%;
  border:2px solid var(--line); border-top-color:var(--brand);
  animation:wo-dreh .8s linear infinite;
}
@keyframes wo-dreh{ to{ transform:rotate(360deg); } }

.wv-bild{ position:relative; margin-top:12px; border-radius:12px; overflow:hidden; }
.wv-bild img{ width:100%; display:block; }

/* YouTube-Karte unter einem Beitrag – dieselbe Optik wie im Gästebuch. */
.post-yts{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }

@media (prefers-reduced-motion:reduce){
  .schreibfenster, .sf-leiste, .stift{ transition:none; }
  .wo-kreisel{ animation:none; }
}

/* ── 🔎 Verläufe: Zitat und Handgriff ─────────────────────────────── */
.vl-zitat{
  background:var(--card-2); border:1px solid var(--line); border-left:3px solid var(--brand);
  border-radius:10px; padding:10px 12px; margin:10px 0 4px;
  font-size:13px; line-height:1.5; color:var(--muted);
  max-height:130px; overflow:auto; word-break:break-word;
}
.vl-mehr{
  width:30px; height:30px; border-radius:9px; flex:none;
  background:var(--card-2); border:1px solid var(--line); color:var(--muted);
  font-size:16px; line-height:1; cursor:pointer;
}
.vl-mehr:active{ transform:scale(.92); }
.vl-mehr:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.vl-acts{ display:flex; align-items:center; gap:6px; }
/* Die Liste steht jetzt auf einer Karte statt nackt auf dem Grund – sonst
   liest man kleine Zeilen auf allem, was dahinterliegt. */
.vl-liste.card{ padding:4px 12px; }

/* ═══ 🎬 Reels ════════════════════════════════════════════════════════
   Der Knopf sitzt ÜBER dem Stift, auf derselben Seite wie er – zwei
   Handlungen übereinander, beide im Daumenbogen. */
.reelknopf{
  position:fixed; z-index:45;
  right:calc(19px + env(safe-area-inset-right, 0px));
  bottom:calc(var(--safe-bottom) + 148px);
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; font-size:21px; line-height:1;
  border:1px solid var(--line); cursor:pointer; color:var(--text);
  background:color-mix(in srgb, var(--card) 90%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.7);
  transition:opacity .2s ease, transform .16s ease;
}
.reelknopf:active{ transform:scale(.92); }
.reelknopf.aus{ opacity:0; pointer-events:none; transform:translateY(14px) scale(.9); }
.reelknopf:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
body.hand-links .reelknopf{ right:auto; left:calc(19px + env(safe-area-inset-left, 0px)); }
.app-shell.menu-open .reelknopf{ opacity:0; pointer-events:none; backdrop-filter:none; -webkit-backdrop-filter:none; }

.reel-vorschau{ margin:12px 0; border-radius:14px; overflow:hidden; background:#000; }
.reel-vorschau img{ width:100%; display:block; max-height:230px; object-fit:cover; }

/* ── Die Ansicht: schwarz, Vollbild, alles Bedienbare unten ──────── */
.reelfenster{
  position:fixed; inset:0; z-index:70; background:#000;
  display:flex; flex-direction:column;
  opacity:0; pointer-events:none; transition:opacity .22s ease;
}
.reelfenster.auf{ opacity:1; pointer-events:auto; }
body.reels-auf{ overflow:hidden; }

.rl-balken{
  position:absolute; top:calc(var(--safe-top) + 8px); left:10px; right:10px; z-index:3;
  display:flex; gap:4px;
}
.rl-strich{ flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,.28); }
.rl-strich.voll{ background:#fff; }
.rl-strich.jetzt{ background:var(--brand-2); }

.rl-kopf{
  position:absolute; top:calc(var(--safe-top) + 20px); left:12px; right:12px; z-index:3;
  display:flex; align-items:center; gap:10px;
}
.rl-wer{ display:flex; align-items:center; gap:9px; min-width:0; }
.rl-wer-txt{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.rl-wer-txt b{ color:#fff; font-size:14px; text-shadow:0 1px 4px rgba(0,0,0,.9); }
.rl-wer-txt span{ color:rgba(255,255,255,.72); font-size:11.5px; text-shadow:0 1px 4px rgba(0,0,0,.9); }
.rl-zu{
  margin-left:auto; width:38px; height:38px; border-radius:50%; flex:none;
  background:rgba(0,0,0,.42); border:0; color:#fff; font-size:17px; cursor:pointer;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}

.rl-buehne{ position:relative; flex:1; min-height:0; background:#000; }
.rl-buehne video{ width:100%; height:100%; object-fit:contain; display:block; background:#000; }
/* Zwei unsichtbare Hälften: links zurück, rechts weiter. Für zwei Hände
   der schnellste Weg – einhändig wischt man stattdessen. */
.rl-seite{ position:absolute; top:0; bottom:0; width:38%; border:0; background:transparent; cursor:pointer; }
.rl-seite.links{ left:0; } .rl-seite.rechts{ right:0; }
.rl-pause{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:52px; pointer-events:none; text-shadow:0 3px 14px rgba(0,0,0,.7);
}

.rl-fuss{
  flex:none; padding:12px 14px calc(var(--safe-bottom) + 14px);
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.86) 34%);
  display:flex; flex-direction:column; gap:11px;
}
.rl-text{ color:#fff; font-size:14.5px; line-height:1.45; text-shadow:0 1px 5px rgba(0,0,0,.9); }
.rl-reaktionen{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.rl-reak{
  width:46px; height:46px; border-radius:50%; font-size:22px; line-height:1;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  cursor:pointer; transition:transform .14s ease, background .16s ease;
}
.rl-reak:active{ transform:scale(.88); }
.rl-reak.meine{ background:var(--grad); border-color:transparent; transform:scale(1.06); }
.rl-reak:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.rl-aktionen{ display:flex; gap:9px; justify-content:center; }
.rl-akt{
  display:flex; align-items:center; gap:6px; padding:9px 15px; border-radius:999px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
  color:#fff; font:inherit; font-size:13.5px; cursor:pointer;
}
.rl-akt span{ font-size:16px; line-height:1; }
.rl-akt:active{ transform:scale(.95); }
.rl-akt.weg{ background:rgba(255,90,90,.16); border-color:rgba(255,90,90,.4); }

.rk-liste{ max-height:46vh; overflow:auto; display:flex; flex-direction:column; gap:2px; }
.rk-zeile{ display:flex; gap:10px; padding:9px 2px; border-bottom:1px solid var(--line); }
.rk-zeile:last-child{ border-bottom:0; }
.rk-mid{ min-width:0; flex:1; }
.rk-mid b{ font-size:13.5px; }
.rk-body{ font-size:14px; line-height:1.45; word-break:break-word; margin:1px 0 2px; }
.rk-neu{ display:flex; gap:8px; margin-top:12px; align-items:center; }
.rk-neu .st-search{ flex:1; margin:0; }

@media (prefers-reduced-motion:reduce){
  .reelfenster, .reelknopf, .rl-reak{ transition:none; }
}

/* ═══ 🎤 Aufnahme läuft ═══════════════════════════════════════════════
   Eine Leiste über der Tastatur statt eines blinkenden Knopfes. Sie
   beantwortet die drei Fragen, die man beim Aufnehmen hat: Läuft es?
   Wie lange schon? Hört mich das Ding überhaupt?

   Rot ist hier die Ausnahme von der Hausregel: Der Aufnahmepunkt ist seit
   je rot, überall auf der Welt. Alles andere in der Leiste bleibt neutral. */
.aufn{
  position:fixed; left:50%; transform:translateX(-50%) translateY(16px);
  bottom:calc(var(--safe-bottom) + 78px);
  z-index:58; display:flex; align-items:center; gap:11px;
  padding:11px 16px; border-radius:999px;
  background:color-mix(in srgb, var(--card) 92%, transparent);
  border:1px solid var(--line);
  box-shadow:0 16px 40px -14px rgba(0,0,0,.75);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .2s cubic-bezier(.2,.85,.25,1), border-color .2s ease;
  max-width:calc(100vw - 28px);
}
.aufn.an{ opacity:1; transform:translateX(-50%); }
.aufn-punkt{
  width:11px; height:11px; border-radius:50%; background:#FF5A5A; flex:none;
  animation:aufn-puls 1.1s ease-in-out infinite;
}
@keyframes aufn-puls{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(.82)} }
.aufn-uhr{
  font-variant-numeric:tabular-nums; font-size:15px; font-weight:600;
  min-width:38px; flex:none;
}
.aufn-pegel{ display:flex; align-items:center; gap:2.5px; height:22px; flex:none; }
.aufn-pegel i{
  width:3px; height:22px; border-radius:2px; display:block;
  background:var(--grad); transform:scaleY(.16); transform-origin:center;
  transition:transform .06s linear;
}
.aufn-hinweis{
  font-size:12px; color:var(--muted); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
/* Beim Wischen nach oben: Die Leiste sagt vorher, was passiert. */
.aufn.weg{ border-color:#FF5A5A; }
.aufn.weg .aufn-hinweis{ color:#FF9090; }
.aufn.weg .aufn-hinweis::before{ content:'🗑️ '; }
.aufn.weg .aufn-pegel{ opacity:.35; }

@media (prefers-reduced-motion:reduce){
  .aufn{ transition:none; }
  .aufn-punkt{ animation:none; }
  .aufn-pegel i{ transition:none; }
}

/* ═══ 🖥️ Systemzustand im AcP ═════════════════════════════════════════
   Die Kacheln tragen ihre Aussage in der Farbe, nicht nur in der Zahl:
   Wer hier hinsieht, will in einer Sekunde wissen, ob etwas brennt —
   und nicht acht Zahlen vergleichen müssen. */
.lg-kopf{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:2px 0 12px;
}
.lg-kopf b{ font-size:17px; letter-spacing:-.01em; }
.lg-gitter{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(148px, 1fr));
  gap:9px;
}
.lg-kachel{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:12px 13px; display:flex; flex-direction:column; gap:1px;
  position:relative; overflow:hidden;
}
/* Ein Streifen an der Kante statt einer eingefärbten Fläche — die Zahl
   bleibt lesbar, die Aussage sieht man trotzdem aus dem Augenwinkel. */
.lg-kachel::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--line);
}
.lg-kachel.ok::before{ background:var(--ok); }
.lg-kachel.warn::before{ background:var(--warn); }
.lg-kachel.bad::before{ background:var(--danger); }
.lg-kachel.bad{ border-color:color-mix(in srgb, var(--danger) 45%, transparent); }
.lg-ic{ font-size:16px; line-height:1; }
.lg-wert{
  font-size:21px; font-weight:700; letter-spacing:-.02em; line-height:1.15;
  font-variant-numeric:tabular-nums; margin-top:3px;
}
.lg-label{ font-size:12px; color:var(--muted); }
.lg-zusatz{ font-size:11px; color:var(--muted-2); margin-top:3px; line-height:1.35; }
.lg-kachel.bad .lg-zusatz{ color:var(--danger); }

.lg-zeile{
  display:flex; flex-wrap:wrap; gap:7px 16px; margin-top:11px;
  font-size:12.5px; color:var(--muted);
}
.lg-zeile b{ color:var(--text); font-variant-numeric:tabular-nums; }
.lg-rot, .lg-rot b{ color:var(--danger); }

.lg-was{
  margin-top:14px; background:var(--card-2); border:1px solid var(--line);
  border-radius:12px; padding:11px 14px;
}
.lg-was summary{ cursor:pointer; font-size:13.5px; font-weight:600; }
.lg-was ul{ margin:10px 0 2px; padding-left:18px; }
.lg-was li{ font-size:13px; color:var(--muted); line-height:1.55; margin-bottom:6px; }
.lg-was li b{ color:var(--text); }

/* ═══ 🧭 Was benutzen sie? ════════════════════════════════════════════
   Balken statt Zahlenkolonne: Man soll auf einen Blick sehen, was oben
   und was unten steht — nicht 22 Zahlen vergleichen müssen. Eine Spalte,
   weil das hier am Handy gelesen wird. */
.nz-wahl{ display:flex; gap:7px; margin-top:12px; }
.nz-t{
  flex:1; padding:10px 6px; border-radius:12px; cursor:pointer;
  background:var(--card-2); border:1px solid var(--line); color:var(--muted);
  font:inherit; font-size:13.5px; font-weight:600;
}
.nz-t.on{ border-color:var(--brand); color:var(--text); background:color-mix(in srgb, var(--brand) 14%, transparent); }
.nz-t:active{ transform:scale(.97); }

.nz-liste{ display:flex; flex-direction:column; gap:11px; margin-top:10px; }
.nz-zeile{
  background:var(--card); border:1px solid var(--line);
  border-radius:13px; padding:11px 13px;
}
.nz-kopf{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.nz-kopf b{ font-size:14.5px; }
.nz-kopf span{ font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.nz-balken{
  height:7px; border-radius:4px; background:var(--card-2);
  margin:8px 0 6px; overflow:hidden;
}
.nz-balken i{ display:block; height:100%; border-radius:4px; background:var(--grad); }
.nz-fuss{ font-size:11.5px; color:var(--muted-2); }

.nz-tot{ display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.nz-tot-chip{
  font-size:12.5px; padding:6px 11px; border-radius:999px;
  background:var(--card-2); border:1px dashed var(--line); color:var(--muted);
}

/* ═══ 🙋 Eine neue Anmeldung ═══════════════════════════════════════════
   Absichtlich anders als der Rest des Verwaltungsraums: heller, breiter,
   mit Bewegung. Da wartet ein Mensch auf eine Antwort — das darf nicht
   aussehen wie „3 Sachen warten". */
.mcp-neu{
  display:flex; align-items:center; gap:13px; width:100%;
  margin:0 0 10px; padding:15px 17px; border-radius:16px; cursor:pointer;
  background:var(--grad); border:0; color:var(--on-brand);
  box-shadow:0 14px 34px -12px var(--brand-glow);
  text-align:left; font:inherit;
  position:relative;
}
/* Der Puls laeuft ueber ein ::after mit festem Schatten; animiert wird nur
   dessen Deckkraft – das kann der Grafikchip. Vorher wurde box-shadow
   selbst animiert: jedes Bild neu gemalt, solange die Anmeldung wartet. */
.mcp-neu::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:0 18px 44px -10px var(--brand-glow); opacity:0; animation:mcp-neu-puls 2.6s ease-in-out infinite; }
.mcp-neu:active{ transform:scale(.985); }
@keyframes mcp-neu-puls{
  50%{ opacity:1; }
}
.mcp-neu-ic{ font-size:27px; line-height:1; flex:none; }
.mcp-neu-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mcp-neu-txt b{ font-size:16px; font-weight:700; letter-spacing:-.01em; }
.mcp-neu-txt span{ font-size:13px; opacity:.85; }
@media (prefers-reduced-motion:reduce){ .mcp-neu, .mcp-neu::after{ animation:none; } }

/* Die Zeile fuer Tester: klein, ehrlich, nicht im Weg. Wer kein Tester ist,
   soll sie ueberlesen koennen — fuer ihn stimmt der Hauptknopf. */
.ih-test{
  display:block; text-align:center; margin-top:9px;
  font-size:12.5px; color:var(--muted); text-decoration:none;
  padding:7px; border-radius:10px; border:1px dashed var(--line);
}
.ih-test:active{ background:var(--card-2); }

/* ── ⏰ Das Scrollrad für Uhrzeiten ───────────────────────────────────
   Ein Textfeld für eine Uhrzeit ist am Handy die schlechteste Lösung:
   Tastatur auf, zwei Zahlen tippen, Doppelpunkt suchen. Ein Rad dreht
   man mit dem Daumen — und es kann keinen Unsinn erzeugen, weil nur
   echte Uhrzeiten daraufstehen. */
.rad-wrap{ position:relative; margin-top:14px; }
.rad{
  height:220px; overflow-y:auto; scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent);
}
.rad::-webkit-scrollbar{ width:0; }
.rad-luft{ height:88px; }               /* damit der erste/letzte Wert in die Mitte kommt */
.rad-w{
  height:44px; display:flex; align-items:center; justify-content:center;
  scroll-snap-align:center; font-size:19px; color:var(--muted-2);
  cursor:pointer; transition:color .15s ease, transform .15s ease;
  font-variant-numeric:tabular-nums;
}
.rad-w.an{ color:var(--text); font-weight:700; transform:scale(1.14); }
.rad-marke{
  position:absolute; left:8px; right:8px; top:88px; height:44px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  border-radius:10px; background:color-mix(in srgb, var(--brand) 9%, transparent);
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){ .rad{ scroll-behavior:auto; } .rad-w{ transition:none; } }

/* Die Uhrzeit in der Teilnehmerliste und der Teilen-Knopf daneben. */
.ab-zeit{
  display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px;
  background:color-mix(in srgb, var(--accent) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color:var(--accent); font-size:11.5px; font-weight:600;
}
.pk-zu-titel{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }

/* ══════════════════════════════════════════════════════════════════
   📗 Das Handbuch
   Kapitel als <details>, damit ohne eine Zeile JavaScript auf- und
   zugeklappt wird — und damit die Suchfunktion des Browsers (⌘F) auch
   in geschlossenen Kapiteln findet, was drinsteht.
   ══════════════════════════════════════════════════════════════════ */
.hb-liste{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.hb-kap{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
}
.hb-kap>summary{
  display:flex; align-items:center; gap:12px; padding:14px 14px;
  cursor:pointer; list-style:none; -webkit-tap-highlight-color:transparent;
}
.hb-kap>summary::-webkit-details-marker{ display:none; }
.hb-ic{ font-size:24px; line-height:1; flex:none; width:30px; text-align:center; }
.hb-kopf{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.hb-kopf b{ font-size:15.5px; }
.hb-kopf span{ font-size:12.5px; color:var(--muted); }
.hb-pfeil{ flex:none; color:var(--muted-2); transition:transform .18s ease; }
.hb-kap[open]>summary{ border-bottom:1px solid var(--line-soft); }
.hb-kap[open] .hb-pfeil{ transform:rotate(180deg); }
.hb-inhalt{ padding:4px 14px 16px; }
.hb-text{ margin:12px 0 0; font-size:14px; line-height:1.6; color:var(--text); }

/* Die Schritte sind nummeriert — die Ziffern gehören zu denen im Bild. */
.hb-schritte{ list-style:none; margin:12px 0 0; padding:0; counter-reset:hbs; }
.hb-schritte li{
  counter-increment:hbs; position:relative; padding:0 0 0 34px; margin-bottom:12px;
}
.hb-schritte li::before{
  content:counter(hbs); position:absolute; left:0; top:0;
  width:24px; height:24px; border-radius:50%;
  background:var(--grad); color:var(--on-brand);
  font-size:12.5px; font-weight:800; display:grid; place-items:center;
}
.hb-schritte li b{ display:block; font-size:14px; line-height:1.4; }
.hb-schritte li span{ display:block; font-size:13px; line-height:1.55; color:var(--muted); margin-top:2px; }

/* Merksätze. „stopp" ist bewusst NICHT rot: Rot gehört in dieser App
   allein den Warnungen. Ein Verbotshinweis im Handbuch ist keine. */
.hb-merk{
  display:flex; gap:10px; margin-top:12px; padding:11px 12px;
  border-radius:14px; font-size:13.5px; line-height:1.55;
  background:var(--card-2); border:1px solid var(--line);
}
.hb-merk-ic{ flex:none; font-size:17px; line-height:1.3; }
.hb-merk.gut{ border-color:color-mix(in srgb, var(--ok) 42%, transparent);
  background:color-mix(in srgb, var(--ok) 9%, var(--card-2)); }
.hb-merk.warn{ border-color:color-mix(in srgb, var(--warn) 46%, transparent);
  background:color-mix(in srgb, var(--warn) 10%, var(--card-2)); }
.hb-merk.stopp{ border-color:color-mix(in srgb, var(--brand) 46%, transparent);
  background:color-mix(in srgb, var(--brand) 10%, var(--card-2)); }

/* .hb-trenner ist entfallen: Seit die Handbücher nach ADRESSE getrennt
   sind, gibt es in keinem von beiden eine gemischte Liste mehr. */

/* ── Die Zeichnungen ──────────────────────────────────────────────
   Gezeichnet statt fotografiert: Ein Bildschirmfoto ist nach dem
   nächsten Ausrollen falsch, und niemand merkt es. Die Farben kommen
   aus der eingestellten Farbwelt, damit das Bild zu der App passt,
   die daneben offen ist. */
.hb-bild{ margin:16px 0 0; text-align:center; }
.hb-bild figcaption{
  margin-top:7px; font-size:12.5px; line-height:1.5; color:var(--muted);
}
.hb-svg{ width:100%; max-width:250px; height:auto; display:block; margin:0 auto;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.35)); }
.hb-svg text{ font-family:inherit; font-weight:600; }

.hbs-rahmen{ fill:var(--line); }
.hbs-schirm{ fill:var(--bg); }
.hbs-notch { fill:var(--line); }
.hbs-kopf  { fill:var(--card-2); }
.hbs-karte { fill:var(--card); }
.hbs-blatt { fill:var(--card-2); }
.hbs-feld  { fill:var(--bg-2); }
.hbs-linie { fill:var(--line); }
.hbs-balken{ fill:var(--muted-2); opacity:.42; }
.hbs-bild  { fill:var(--line); }
.hbs-rund  { fill:var(--card-2); stroke:var(--line); stroke-width:1; }
.hbs-marke { fill:var(--brand); }
.hbs-ok    { fill:var(--ok); }
.hbs-warn  { fill:var(--warn); }
.hbs-gelb  { fill:#FFE066; }
.hbs-danger{ fill:var(--danger); }
.hbs-akzent{ fill:var(--accent); }
.hbs-chip  { fill:var(--accent); opacity:.16; }
.hbs-wahl  { fill:var(--brand); opacity:.20; }
.hbs-hervor{ fill:var(--brand); opacity:.15; }
.hbs-geist { fill:var(--card-2); stroke:var(--line); stroke-width:1; }
.hbs-dunkel{ fill:#12101E; }
.hbs-zeile { fill:#FFFFFF; opacity:.055; }
.hbs-gold  { fill:#C9A227; }
.hbs-lila  { fill:var(--brand); }

.hbs-t  { fill:var(--text);   font-size:10px; }
.hbs-k  { fill:var(--muted);  font-size:9px;  font-weight:500; }
.hbs-k-r{ fill:var(--muted);  font-size:9px;  font-weight:500; text-anchor:end; }
.hbs-w  { fill:var(--on-brand); font-size:10px; font-weight:800; }
.hbs-lbl{ fill:var(--muted-2); font-size:8px; font-weight:800; letter-spacing:.09em; }
.hbs-akzent-t  { fill:var(--accent); font-size:9px;  font-weight:800; }
.hbs-akzent-t-r{ fill:var(--accent); font-size:10px; font-weight:800; text-anchor:end; }
.hbs-warn-t{ fill:var(--warn); font-size:9px; font-weight:600; }
.hbs-gross { font-size:17px; fill:var(--text); }
.hbs-mittel{ font-size:13px; fill:var(--text); }
.hbs-hell  { fill:#FFFFFF; font-size:10px; font-weight:700; }
.hbs-logo  { fill:#FFFFFF; font-size:17px; font-weight:800; }
.hbs-acht  { fill:#FFFFFF; font-size:26px; font-weight:800; }
.hbs-nr circle{ fill:var(--brand); }
.hbs-nr text  { fill:var(--on-brand); font-size:11px; font-weight:800; }

/* Auf grünen und goldenen Flächen wäre die Schrift von --on-brand in
   manchen Farbwelten zu hell. Die grünen Knöpfe bekommen deshalb ihre
   eigene, immer dunkle Schrift. */
.hbs-ok + text.hbs-w{ fill:#08210F; }

/* ══════════════════════════════════════════════════════════════════
   ✉️ Private Nachrichten im Menüflügel
   Ein eigener Punkt unter den Kanälen: Ein Kanal ist eine Gruppe, ein
   Zweiergespräch ist etwas anderes — und es ist verschlüsselt.
   ══════════════════════════════════════════════════════════════════ */
.nav-dm{
  margin-top:8px; padding-top:10px;
  border-top:1px solid var(--line-soft);
}

/* Die Vorschau auf das Bild für die Bigo-Gruppe. */
.pkb-vorschau{
  margin-top:12px; border-radius:14px; overflow:hidden;
  border:1px solid var(--line); background:var(--bg-2);
  max-height:46vh; overflow-y:auto;
}
.pkb-vorschau img{ display:block; width:100%; height:auto; }

/* Gliederung und Suche im Handbuch — ab dreißig Kapiteln ist Blättern
   keine Antwort mehr. */
.hb-suche{
  display:flex; align-items:center; gap:8px; margin-top:12px;
  padding:0 12px; height:44px; border-radius:14px;
  background:var(--bg-2); border:1px solid var(--line);
}
.hb-suche span{ color:var(--muted-2); font-size:15px; }
.hb-suche input{
  flex:1; min-width:0; background:none; border:0; outline:none;
  color:var(--text); font-size:15px; font-family:inherit;
}
.hb-suche input::-webkit-search-cancel-button{ display:none; }
.hb-x{ background:none; border:0; color:var(--muted); font-size:15px; padding:6px; cursor:pointer; }
.hb-nix{ margin-top:16px; padding:16px; border-radius:14px; background:var(--card-2);
  border:1px solid var(--line); color:var(--muted); font-size:13.5px; line-height:1.6; }

.hb-gruppe{ margin-top:20px; }
.hb-gtitel{
  display:flex; align-items:center; gap:8px; margin-bottom:2px;
  font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted-2);
}
.hb-gtitel span{
  font-size:11px; font-weight:700; letter-spacing:0;
  padding:1px 7px; border-radius:999px;
  background:var(--card-2); border:1px solid var(--line); color:var(--muted);
}

/* ── Aufnahme: festgestellt und kurz davor ────────────────────────────
   „weg" (rot) gab es schon fürs Abbrechen. Neu sind zwei Zustände:
   kurz vor dem Feststellen — und festgestellt, wenn der Finger weg darf. */
.aufn.gleich-sperr{ border-color:var(--accent); }
.aufn.gleich-sperr .aufn-hinweis{ color:var(--accent); font-weight:600; }
.aufn.sperr{ border-color:var(--accent); }
.aufn.sperr .aufn-hinweis{ color:var(--accent); font-weight:600; }
.aufn.sperr .aufn-hinweis::before{ content:'🔒 '; }
/* Festgestellt heißt: es läuft von allein weiter. Der Punkt pulst dann
   ruhiger, damit „läuft" nicht wie „gleich vorbei" aussieht. */
.aufn.sperr .aufn-punkt{ animation-duration:1.9s; }
.aufn.weg .aufn-punkt{ background:#FF5A5A; }
/* Nur im festgestellten Zustand ist die Leiste anfassbar — sonst liegt sie
   als reine Anzeige ueber dem Bild und darf nichts abfangen. */
.aufn.sperr{ pointer-events:auto; }
.aufn-stop{
  flex:none; width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
  background:var(--danger); color:#fff; font-size:15px; line-height:1;
  display:grid; place-items:center;
}
.aufn-stop:active{ transform:scale(.92); }

/* ── Das Zeichen des Livestream-Kanals ────────────────────────────────
   Unsere Acht mit einem pulsenden Live-Punkt statt eines blanken 🔴. */
.lz{ width:1em; height:1em; display:block; }
.cmty-ic.live .lz{ width:100%; height:100%; }
.cmty-ic.live{ padding:0; overflow:hidden; border-radius:14px; background:none; }
.ei-lz{ display:inline-grid; place-items:center; }
.ei-lz .lz{ width:1.15em; height:1.15em; border-radius:6px; }
.lz-grund{ fill:var(--bg-2); }
.lz-punkt{ fill:var(--danger); }
.lz-saum { fill:var(--bg-2); }
.lz-ring{ fill:var(--danger); opacity:.28; transform-origin:398px 118px; animation:lz-puls 1.8s ease-out infinite; }
@keyframes lz-puls{
  0%   { transform:scale(.62); opacity:.42; }
  70%  { transform:scale(1.18); opacity:0; }
  100% { transform:scale(1.18); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .lz-ring{ animation:none; opacity:.3; } }

/* Eine Zeile, die Fidolin gerade aus dem Bigo-Bild gefüllt hat — damit man
   sieht, was übernommen wurde und was man selbst getippt hat. */
.slot-edit.slot-gelesen{
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* ── Der Bigo-Banner auf der PK-Seite ─────────────────────────────────
   Für die Teamleitung ist er anfassbar: Antippen lädt ein neues Bild und
   liest Uhrzeit und Gegner daraus. */
.pk-bannerbox{ position:relative; border-radius:14px; overflow:hidden; }
.pk-bannerbox.tauschbar{ cursor:pointer; }
.pk-bannerbox.tauschbar:active{ transform:scale(.995); }
.pk-banner-hinweis{
  position:absolute; left:8px; bottom:8px;
  padding:5px 10px; border-radius:999px;
  background:rgba(10,10,17,.78); color:#fff;
  font-size:11.5px; font-weight:600;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.pk-bannerleer{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  width:100%; min-height:104px; margin:10px 0; padding:14px; cursor:pointer;
  border:2px dashed color-mix(in srgb, var(--brand) 40%, transparent);
  border-radius:14px; background:color-mix(in srgb, var(--brand) 7%, transparent);
  color:var(--text); font:inherit; font-size:14.5px; font-weight:700;
}
.pk-bannerleer span{ font-size:12px; font-weight:500; color:var(--muted); }
.pk-bannerbox.laedt, .pk-bannerleer.laedt{ opacity:.55; pointer-events:none; }
/* Während der Banner im Ankündigungs-Formular gelesen wird. */
.pka-banner.liest{ opacity:.6; }

/* Der Knopf, der Banner und Aufstellung in Übereinstimmung bringt. Er steht
   genau dort, wo der Widerspruch sichtbar wird — über den Matchups. */
.btn.bannersync{
  margin: 4px 0 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent); font-weight: 700;
}

/* Das Livestream-Zeichen MIT Schriftzug — nur dort, wo Platz dafür ist. */
.lz-breit{ width:auto; height:1.6em; display:block; }
.lzb-marke{ fill:var(--text); font-size:23px; font-weight:800; letter-spacing:-.01em; }
.lzb-wort { fill:var(--muted); font-size:15px; font-weight:700; letter-spacing:.16em; }

/* In der Kanal-Kopfzeile trägt das Livestream-Zeichen den Namen selbst.
   Es muss zur Zeilenhöhe passen und darf die Zeile nicht auseinanderziehen. */
.chat-head-n{ display:flex; align-items:center; gap:9px; min-width:0; }
.chat-head-n .lz-breit{ height:30px; flex:none; }

/* ══════════════════════════════════════════════════════════════════
   Chat, Kommentare und Gästebuch für die linke Hand
   ══════════════════════════════════════════════════════════════════
   Das Schreibfenster kannte links und rechts längst — der Chat nicht.
   Dort lagen ➤ und 🎤 immer rechts, also für Linkshänder quer über dem
   Bildschirm. Genau der Griff, bei dem einem das Telefon aus der Hand
   fällt.

   Hier ist Spiegeln erlaubt: Diese Leisten SCROLLEN NICHT. Bei der
   waagerechten Werkzeugleiste im Schreibfenster wäre row-reverse ein
   Fehler — dort liefe das Schieben verkehrt herum, deshalb dreht sich
   dort die Reihenfolge im Markup. Zwei verschiedene Wege, aus einem
   Grund. */
body.hand-links .chat-composer,
body.hand-links .cmt-form,
body.hand-links .gbc-eingabe { flex-direction: row-reverse; }

/* Die Vorschlagsliste beim @-Nennen braucht KEINE eigene Regel: Sie liegt
   absolut mit left:0 UND right:0, spannt also ohnehin die volle Breite und
   wird von der Reihenfolge gar nicht berührt. Eine „Korrektur" hier würde
   sie zusammenfallen lassen. */

/* ══════════════════════════════════════════════════════════════════
   🔔 Die Glocke
   Der Push weckt, die Glocke erinnert. Deshalb hat sie einen festen
   Platz in der Kopfleiste — nicht nur ein Piepen, das man wegwischt.
   ══════════════════════════════════════════════════════════════════ */
/* Die Glocke sass hier oben in der Leiste. .glocke-btn bleibt stehen,
   weil .glocke-zahl darauf aufbaut — der Knopf selbst wird nicht mehr
   gebaut, die Zahl haengt jetzt an der schwebenden Glocke. */
.glocke-btn { position: relative; }
.glocke-zahl {
  position: absolute; top: 1px; right: 0;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--brand-2); color: var(--on-brand);
  font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}
/* Ein kurzes Kippen, wenn etwas Neues da ist — einmal, nicht in Schleife.
   Eine dauernd wackelnde Glocke ist Tapete, kein Hinweis. */
.glocke-btn.hat-neues { animation: glocke-kipp .9s ease-in-out 1; }
@keyframes glocke-kipp {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-13deg); }  30% { transform: rotate(11deg); }
  45% { transform: rotate(-8deg); }   60% { transform: rotate(6deg); }
  75% { transform: rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) { .glocke-btn.hat-neues { animation: none; } }

.glocke-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 10px;
  max-height: 62vh; overflow-y: auto; }
.glocke-zeile {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 12px; border-radius: 13px; cursor: pointer;
  background: var(--card-2); border: 1px solid var(--line);
  color: var(--text); font: inherit; text-align: left;
}
.glocke-zeile:active { transform: scale(.99); }
/* Ungelesen wird durch die Markenfarbe markiert, nicht durch Rot —
   Rot gehört den Warnungen. */
.glocke-zeile.neu { border-color: color-mix(in srgb, var(--brand) 48%, transparent);
  background: color-mix(in srgb, var(--brand) 9%, var(--card-2)); }
.gz-ic { flex: none; width: 30px; text-align: center; font-size: 19px; }
.gz-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gz-titel { font-size: 14px; font-weight: 700; line-height: 1.35; }
.gz-text { font-size: 12.5px; color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.gz-zeit { flex: none; font-size: 11.5px; color: var(--muted-2); }

/* ── „Aus dem Banner gelesen" ──────────────────────────────────────
   Ersetzt den kompletten Matchup-Abschnitt, wenn das Bild schon alles
   hergibt. Vorher stand dieselbe Paarung zweimal auf der Seite — einmal
   im Banner, einmal als VS-Karte, und die Karte sagte „offen". */
.pk-ausbild {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 4px; padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--ok) 38%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  color: var(--ok); font-weight: 600; font-size: .92rem;
}
.pk-ausbild.sanft { opacity: .72; font-weight: 500; margin-top: 10px; }

/* ── Live-Karte auf der eigenen (lila) Blase lesbar halten ──────────
   Die eigene Nachricht liegt auf `linear-gradient(--brand, --brand-2)`.
   `--muted` ist aber für den dunklen Kartengrund gemischt — auf Lila
   verschwindet es fast. Beweisstück: „war 1 Min live" und „Stream
   beendet." waren auf dem Screenshot kaum zu erkennen.
   Deshalb hier eigene, aus der Schriftfarbe abgeleitete Werte statt
   einer festen Graustufe. */
.msg.mine .bubble .cl-sub,
.msg.mine .bubble .cl-since,
.msg.mine .bubble .cl-supn,
.bubble.colored .cl-sub,
.bubble.colored .cl-since,
.bubble.colored .cl-supn {
  color: color-mix(in srgb, var(--on-brand) 78%, transparent);
}
.msg.mine .bubble .cl-state,
.bubble.colored .cl-state { color: var(--on-brand); }

/* Weitergegebener Stream: kein pulsierender roter Punkt.
   Rot heißt bei uns „es brennt gerade" — das gilt für den eigenen
   Stream. Bei einem weitergereichten wissen wir nicht einmal, ob er
   noch läuft, also darf die Karte auch nicht so tun. */
.ch-live.ist-fremd .cl-dot {
  background: var(--brand-2); box-shadow: none; animation: none;
}
.ch-live.ist-fremd .cl-state { font-weight: 600; opacity: .95; }

/* ── Die nächste PK, auf jeder Seite ───────────────────────────────
   Sitzt zwischen Kopfleiste und Inhalt. Bewusst KEIN position:fixed:
   Auf dem Handy schiebt die Tastatur feste Elemente über das
   Schreibfeld — dieselbe Falle, die schon beim Einhand-Schreiben zugebissen
   hat. Sie scrollt also mit und ist trotzdem beim Öffnen sofort da. */
.pk-leiste {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin: 0 0 10px; padding: 10px 14px;
  border: 0; border-radius: 14px;
  font: inherit; text-align: left; cursor: pointer;
  color: var(--on-brand);
  background: linear-gradient(100deg, var(--brand), var(--brand-2));
  box-shadow: 0 6px 20px color-mix(in srgb, var(--brand) 32%, transparent);
  animation: pklRein .32s cubic-bezier(.2,.9,.3,1.2);
}
.pk-leiste:active { transform: scale(.985); }
.pkl-mid { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.pkl-mid b { font-size: 14.5px; font-weight: 800; letter-spacing: .1px; }
/* Die zweite Zeile ist die wichtige (»noch 12 Min«) — sie darf NICHT
   in --muted verschwinden, das ist für dunklen Grund gemischt. */
.pkl-sub {
  font-size: 12.5px; font-weight: 600;
  color: color-mix(in srgb, var(--on-brand) 82%, transparent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pkl-pfeil { font-size: 20px; font-weight: 700; opacity: .8; flex: none; }

/* Läuft gerade: rot, und der Rand atmet. Rot ist bei uns sonst nur für
   Warnungen reserviert — eine PK, die JETZT läuft und die man verpasst,
   ist genau das. */
.pk-leiste.laeuft {
  background: linear-gradient(100deg, #FF3B49, #FF4D9D);
  box-shadow: 0 6px 22px rgba(255,59,73,.42);
  animation: pklPuls 1.6s ease-in-out infinite;
}
@keyframes pklRein { from { opacity: 0; transform: translateY(-8px); } }
@keyframes pklPuls {
  0%,100% { box-shadow: 0 6px 22px rgba(255,59,73,.42); }
  50%     { box-shadow: 0 6px 30px rgba(255,59,73,.68); }
}
@media (prefers-reduced-motion: reduce) {
  .pk-leiste, .pk-leiste.laeuft { animation: none; }
}

/* ── „Kamera aus" muss man SEHEN ───────────────────────────────────
   Ein schwarzes Videofeld sieht aus wie ein Fehler: kaputte Kamera,
   dunkles Zimmer, abgerissene Verbindung. Deshalb steht es jetzt drauf.
   Gilt für die eigene Kachel und für die der anderen — beide bekommen
   dasselbe Schild, damit niemand rätselt. */
.rtc-camaus {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 6px; z-index: 2;
  font-size: 12.5px; font-weight: 700; letter-spacing: .2px;
  color: rgba(255,255,255,.9);
  background: rgba(10,10,16,.72);
  backdrop-filter: blur(2px);
  pointer-events: none;
}
/* Der Knopf sagt den Zustand mit Symbol UND Farbe – nicht nur mit
   einem hellen Hintergrund, den man leicht übersieht. */
.rtc-ctl#rtc-cam.off {
  background: #fff; color: #12121c;
  box-shadow: 0 0 0 2px rgba(255,255,255,.35);
}

/* ── Streaming-Ecke: wo gerade jemand sitzt oder sendet ────────────
   Steht ÜBER dem Spiele-Raster, weil ein besetzter Tisch mehr wert ist
   als vier stille Kacheln. Vorher konnte man fremde Tische überhaupt
   nicht sehen — beide Listen zeigten nur Partien, in denen man schon
   drinsaß. */
.ecke-titel { margin-top: 16px; }
.ecke-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ecke-karte {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 14px;
  background: var(--card-2); border: 1px solid var(--line-soft);
  color: inherit; text-decoration: none;
}
.ecke-karte:active { transform: scale(.99); }
.ecke-ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; font-size: 21px; }
.ecke-ic .gc-svg { width: 30px; height: 30px; }
.ecke-mid { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ecke-mid b { font-size: 14.5px; font-weight: 700; }
.ecke-sub {
  font-size: 12.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ecke-go { flex: none; font-size: 12.5px; font-weight: 700; color: var(--brand-2); }

/* Wo ich schon sitze: der Tisch wartet auf MICH, nicht umgekehrt. */
.ecke-karte.meiner {
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  background: color-mix(in srgb, var(--brand) 10%, var(--card-2));
}
/* Jemand sendet gerade. Rot bleibt sonst der Warnung vorbehalten – ein
   laufender Stream ist der eine Fall, wo es dasselbe meint: jetzt oder
   nie. Deshalb nur der Punkt, nicht die ganze Karte. */
.ecke-karte.live .ecke-ic {
  color: #FF3B49;
  filter: drop-shadow(0 0 7px rgba(255,59,73,.55));
  animation: presPulse 1.3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .ecke-karte.live .ecke-ic { animation: none; } }

/* ── Schachbrett ───────────────────────────────────────────────────
   Quadratisch über die volle Breite, damit auf dem Handy noch etwas zu
   treffen ist: Bei 8 Feldern bleiben pro Feld gut 40 px — das ist die
   Untergrenze für einen Daumen. Deshalb auch keine Beschriftung am
   Rand; sie würde genau diese Fläche wegnehmen. */
.sch-brett {
  display: grid; grid-template-columns: repeat(8, 1fr);
  aspect-ratio: 1 / 1; width: 100%;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line-soft);
  box-shadow: 0 8px 26px rgba(0,0,0,.28);
  margin: 6px 0;
}
.sch-brett.dran { box-shadow: 0 8px 26px color-mix(in srgb, var(--brand) 38%, transparent); }
.sf {
  border: 0; padding: 0; margin: 0; cursor: pointer;
  display: grid; place-items: center; position: relative;
  background: #efe4d0; font-family: inherit;
}
.sf.dunkel { background: #9a7b5a; }
.sfig {
  font-size: clamp(20px, 6.4vw, 34px); line-height: 1;
  /* Beide Farben brauchen eine Kontur, sonst verschwindet Weiß auf dem
     hellen und Schwarz auf dem dunklen Feld. */
  text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 0 2px rgba(255,255,255,.5);
}
/* Wohin die angetippte Figur darf: Punkt für ein leeres Feld, Ring für
   eine schlagbare — dasselbe Zeichen für beides wäre eine Lüge. */
.sf.ziel::after {
  content: ''; width: 26%; height: 26%; border-radius: 50%;
  background: rgba(30,120,60,.55);
}
.sf.schlagbar { box-shadow: inset 0 0 0 4px rgba(200,40,40,.65); }
.sf.gewaehlt { box-shadow: inset 0 0 0 4px var(--brand); }
.sf:disabled { cursor: default; }

.sp-zeile { display: flex; align-items: center; gap: 8px; padding: 6px 2px; font-size: 14px; }
.sp-stein { width: 14px; height: 14px; border-radius: 50%; flex: none; border: 1px solid rgba(0,0,0,.35); }
.sp-stein.hell { background: #f2e9d8; }
.sp-stein.dunkel { background: #2a2118; }
.sp-dran { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--brand-2); }

.sch-schach {
  margin-top: 10px; padding: 9px 14px; border-radius: 12px; font-weight: 700;
  color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
}
.sch-ende {
  margin-top: 10px; padding: 11px 14px; border-radius: 12px; font-weight: 700;
  background: var(--card-2); border: 1px solid var(--line-soft);
}
.sch-um { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.sch-um .btn { font-size: 15px; }
.gc-ic.gc-emoji { font-size: 40px; line-height: 1; display: grid; place-items: center; }

/* ── Team-Chat griffiger ───────────────────────────────────────────
   Die Knöpfe im Schreibfeld waren rund 33×37 px. Apple und Google
   nennen beide 44 px als Mindestmaß für etwas, das ein Daumen treffen
   soll — und der 🎤 muss obendrein GEHALTEN werden. Wer knapp daneben
   kommt, löst gar nichts aus; genau das fühlt sich an wie „geht nicht". */
/* ⚠️ NUR im Kanal (.tc-composer-wrap). Die Direktnachricht benutzt
   dieselbe Klasse .chat-composer, hat dort aber einen Knopf MIT TEXT
   („🎤 Diktieren") — den hätte min-width/padding:0 10px zusammengequetscht. */
.tc-composer-wrap .chat-composer .btn.sm {
  min-width: 44px; min-height: 44px;
  padding: 0 10px; font-size: 17px;
  display: inline-grid; place-items: center;
}
.tc-composer-wrap .chat-composer .btn.sm.primary { font-size: 19px; }
.tc-composer-wrap .chat-composer { gap: 6px; }
.tc-composer-wrap .chat-composer textarea { min-height: 44px; }

/* Auf einem iPhone SE (320 px) blieben dem Textfeld nur 142 px, weil drei
   44-px-Knöpfe danebenstehen. WhatsApp löst das seit jeher so: Solange
   nichts geschrieben ist, gibt es KEINEN Senden-Knopf — und sobald etwas
   dasteht, verschwindet das Mikrofon. Es sind immer nur zwei statt drei. */
.tc-composer-wrap .chat-composer.hat-inhalt [data-chrec] { display: none; }
.tc-composer-wrap .chat-composer:not(.hat-inhalt) #ch-send { display: none; }
@media (max-width: 360px) {
  .tc-composer-wrap .chat-composer { gap: 4px; }
  .tc-composer-wrap .chat-composer .btn.sm { min-width: 42px; padding: 0 6px; }
}

/* Bildvorschau – die gab es bisher nur für Ton. Ohne sie wusste
   niemand, ob das Bild wirklich hängt. */
.cmt-bild-prev {
  max-height: 88px; max-width: 60%; border-radius: 10px;
  border: 1px solid var(--line-soft); object-fit: cover;
}

/* ── Lange auf eine Blase drücken = Menü ──────────────────────────
   Das Wischen zum Antworten macht wireSwipeReply() (nach rechts) — hier
   steht NUR das Halten. Ein zweites Wisch-System auf derselben Liste
   stritte sich mit dem ersten um denselben Finger.

   user-select/touch-callout: Ohne diese Zeilen markiert ein langer Druck
   gleichzeitig den Text und ruft auf dem iPhone die Lupe. Man hätte dann
   das Menü UND eine blau markierte Nachricht. */
.msg[data-mid] {
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
}
/* Der Text selbst bleibt markierbar — Kopieren per Hand muss möglich
   bleiben, nur eben nicht als Nebenwirkung des Haltens. */
.msg[data-mid] .ch-txt { -webkit-user-select: text; user-select: text; }
.msg.haelt-lang { transform: scale(.97); transition: transform .12s ease; }

/* Textfeld darf mitwachsen – die Grenze setzt JavaScript nach der
   VERFÜGBAREN Höhe (EINGABE_MAX). Wieder nur im Kanal: In den
   Direktnachrichten bleibt es bei der alten Grenze aus autoGrowInput. */
.tc-composer-wrap .chat-composer textarea { max-height: none; }

/* Die winzigen ✏️/🗑️ an der Blase fliegen raus: 17 px groß und zu 60 %
   durchsichtig, sichtbar nur bei Hover — den es am Telefon nicht gibt.
   Beides steckt jetzt im Menü, das langes Drücken öffnet. */
.ch-acts-kanal { display: none; }

.bm-liste .btn { text-align: left; justify-content: flex-start; font-size: 15px; padding: 13px 16px; }
.bm-rest { margin-left: 6px; font-size: 12px; font-weight: 600; opacity: .65; }

/* Die ausgewählte Zeile in der @-Liste – ohne sie weiß niemand, was
   Enter gleich einsetzt.
   ⚠️ KEIN color-mix(… var(…) …): Auf WebKit vor 16.2 ist das ungültig,
   und dann fällt die GANZE Eigenschaft weg — die Zeile wäre unsichtbar
   markiert. Feste rgba-Werte tun es hier genauso. */
.c-mrow.aktiv {
  background: linear-gradient(90deg, rgba(177,75,255,.26), rgba(255,77,157,.14));
  box-shadow: inset 0 0 0 1px rgba(177,75,255,.45);
}
.c-mrow.aktiv::before {
  content: ''; position: absolute; left: 3px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 3px; background: var(--grad);
}
/* Die Liste darf scrollen, wenn acht Leute drinstehen. */
.c-mention { max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Die Zeilen kommen versetzt herein – acht Namen auf einmal sind eine
   Wand, nacheinander sind es Menschen. --mv ist die Nummer der Zeile. */
@keyframes c-mrow-auf { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.c-mrow { animation: c-mrow-auf .17s cubic-bezier(.2,.8,.3,1) both; animation-delay: calc(var(--mv, 0) * 22ms); }
/* Kurzes Aufleuchten im Textfeld: Der Blick liegt auf der Liste, nicht
   auf dem Feld – ohne das Signal merkt man nicht, dass es geklappt hat. */
@keyframes mention-blitz { 0% { box-shadow: 0 0 0 0 rgba(177,75,255,.55); } 100% { box-shadow: 0 0 0 9px rgba(177,75,255,0); } }
.mention-blitz { animation: mention-blitz .42s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .c-mrow, .mention-blitz { animation: none; }
}

/* ── Sofort abgeschickt, im Hintergrund unterwegs ──────────────────
   Die Blase ist schon da, während der Server noch antwortet. Leicht
   blass, damit man den Unterschied sieht — aber lesbar, nicht versteckt. */
.msg.vorlaeufig.unterwegs .bubble { opacity: .62; }
.msg.vorlaeufig .vb-lage { font-style: italic; }
/* Ging etwas schief, bleibt die Nachricht STEHEN statt verloren zu gehen –
   antippen schickt sie noch einmal. */
.msg.vorlaeufig.gescheitert .bubble {
  opacity: 1; cursor: pointer;
  outline: 1px solid color-mix(in srgb, var(--warn) 55%, transparent);
}
.msg.vorlaeufig.gescheitert .vb-lage { color: var(--warn); font-style: normal; font-weight: 600; }

/* ── Wo du Mitteilungen bekommst ───────────────────────────────────
   Bis hierher war das eine Blackbox: an- und abschalten ging, aber
   nicht sehen, WOHIN sie gehen. */
.pz-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.pz-zeile {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  background: var(--card-2); border: 1px solid var(--line-soft);
}
.pz-zeile.hier { border-color: color-mix(in srgb, var(--brand) 50%, transparent); }
.pz-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-hier { font-size: 11px; font-weight: 700; color: var(--brand-2); }
.pz-seit { font-size: 11.5px; color: var(--muted); flex: none; }
.pz-weg { flex: none; min-width: 36px; }

/* ── Glocke: aufräumen können ──────────────────────────────────────
   Vorher war die Liste eine Einbahnstraße: ansehen ja, wegräumen nein.
   Nach ein paar Wochen stand da alles seit Anbeginn. */
.glocke-kopf { display: flex; justify-content: flex-end; margin: 2px 0 6px; }
.glocke-reihe { display: flex; align-items: stretch; gap: 4px; }
.glocke-reihe .glocke-zeile { flex: 1; min-width: 0; }
.gz-weg {
  flex: none; width: 38px; border: 0; background: none; cursor: pointer;
  color: var(--muted); font-size: 15px; border-radius: 10px;
  font-family: inherit;
}
.gz-weg:hover, .gz-weg:active { background: var(--card-2); color: var(--danger); }
.gz-weg:disabled { opacity: .4; cursor: default; }
/* Worum es geht, bevor man tippt: Update, PK, Umfrage … */
.gz-art {
  display: inline-block; margin-top: 3px; padding: 1px 7px;
  border-radius: 999px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .3px; text-transform: uppercase;
  background: var(--card-2); color: var(--muted);
}
.glocke-zeile.neu .gz-art { background: color-mix(in srgb, var(--brand) 20%, transparent); color: var(--brand-2); }

/* ── Umfrage ───────────────────────────────────────────────────────
   Vor der Stimme: Knöpfe. Danach: Balken mit Prozenten und ein Haken
   an der eigenen Wahl — die kennt aber NUR dieses Gerät. In der
   Datenbank gibt es keine Verbindung zwischen Person und Antwort. */
.umfrage { margin-top: 12px; }
.umf-liste { display: flex; flex-direction: column; gap: 7px; }
.umf-opt {
  width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  padding: 12px 15px; border-radius: 12px; font-size: 15px; font-weight: 600;
  color: inherit; background: var(--card-2);
  border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
}
.umf-opt:active { transform: scale(.99); }
.umf-opt:disabled { opacity: .5; cursor: default; }

.umf-erg {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 12px;
  background: var(--card-2); border: 1px solid var(--line-soft);
  font-size: 14.5px;
}
.umf-balken {
  position: absolute; inset: 0 auto 0 0; z-index: 0;
  background: color-mix(in srgb, var(--brand) 22%, transparent);
  transition: width .45s cubic-bezier(.2,.9,.3,1);
}
.umf-txt { position: relative; z-index: 1; flex: 1; min-width: 0; font-weight: 600; }
.umf-zahl { position: relative; z-index: 1; font-weight: 800; flex: none; }
.umf-erg.meine { border-color: color-mix(in srgb, var(--brand) 60%, transparent); }
.umf-erg.meine .umf-balken { background: color-mix(in srgb, var(--brand) 34%, transparent); }

.umf-fuss {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 9px; font-size: 12px; color: var(--muted);
}
.umf-schloss { font-weight: 600; }
.umf-gesamt { flex: none; font-weight: 700; }
.umf-hinweis { margin-top: 6px; font-size: 12px; color: var(--muted); font-style: italic; }

/* Antwort mit Vorteil: Was spricht dafür? Ohne diese Zeile stimmt man
   über Wörter ab, nicht über Inhalte. */
.umf-opt { display: flex; flex-direction: column; gap: 3px; }
.umf-o-t { font-weight: 700; }
.umf-o-v {
  display: block; font-size: 12.5px; font-weight: 500;
  color: var(--muted); line-height: 1.35;
}
.umf-erg .umf-o-v { margin-top: 2px; }
.umf-erg { align-items: flex-start; }
.umf-erg .umf-zahl { align-self: center; }

/* Ersteller: Antwort und Vorteil gehören sichtbar zusammen. */
.umf-paar {
  display: flex; flex-direction: column; gap: 5px;
  padding: 9px 10px; border-radius: 12px;
  background: var(--card-2); border: 1px solid var(--line-soft);
}
.umf-verwalten { margin-top: 10px; display: flex; justify-content: flex-end; }

/* ── Die Jahreszeit im Chat ────────────────────────────────────────
   Ein paar Blätter beim Betreten, dann Ruhe. KEINE Dauertapete: Ein
   Effekt, der ununterbrochen läuft, ist nach zwei Tagen keine Freude
   mehr, sondern Unruhe — und er kostet auf jedem Handy Strom.

   pointer-events:none ist Pflicht, sonst fängt ein Blatt den Tipp ab,
   der eigentlich einer Nachricht galt. */
.jz-blatt {
  position: fixed; top: -40px; z-index: 3;
  pointer-events: none; user-select: none;
  will-change: transform, opacity;
  animation: jzFallen linear forwards;
  opacity: 0;
}
@keyframes jzFallen {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: .85; }
  85%  { opacity: .7; }
  100% { transform: translate3d(var(--drift, 0), 105vh, 0) rotate(var(--dreh, 360deg)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .jz-blatt { display: none; } }

/* ── Reaktionen sichtbarer machen ──────────────────────────────────
   Sie standen als kleine graue Pillen zwischen den Fußzeilen und gingen
   unter — ein „💜 3" in 13 Pixeln neben einem grauen „😊 ＋" fällt
   niemandem auf. Reaktionen sind aber genau das, was einen Beitrag
   lebendig macht: Man sieht, dass jemand da war.

   Größer, farbiger, und der Zähler bekommt eigenes Gewicht. */
.react-chip {
  padding: 7px 13px; font-size: 15px; gap: 7px;
  transition: transform .12s ease, background .15s ease;
}
.react-chip:active { transform: scale(.94); }
.react-chip.mine {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 45%, transparent);
  font-weight: 800;
}
/* Der Einladungs-Knopf soll wie eine Einladung aussehen, nicht wie
   ausgegraut. */
.react-add {
  font-size: 15px; padding: 7px 13px;
  color: var(--text);
  border-color: color-mix(in srgb, var(--brand) 40%, transparent);
  background: color-mix(in srgb, var(--brand) 9%, var(--card-2));
}
.react-add:active { transform: scale(.94); }

/* Eine frische Reaktion soll man SEHEN — einmal kurz aufpoppen. */
@keyframes reaktionRein {
  0%   { transform: scale(.4); opacity: 0; }
  60%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); }
}
.react-chip.frisch { animation: reaktionRein .34s cubic-bezier(.2,.9,.3,1.4); }
@media (prefers-reduced-motion: reduce) { .react-chip.frisch { animation: none; } }

/* Die Zeile darunter bekommt Luft, damit die Pillen nicht am Text kleben. */
.tp-social { gap: 8px; padding-top: 4px; }
.rc-e { font-size: 16px; line-height: 1; }
.rc-n { font-size: 13px; font-weight: 800; opacity: .9; }

/* ── Umfrage: die Auswahl begreifbar machen ────────────────────────
   Drei Antworten untereinander sind eine Textwand. Mit Nummer, Titel
   und Vorteil in drei Ebenen sieht man auf einen Blick, WAS man wählt
   und WARUM es dafür spricht. */
.umf-opt {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 12px;
  padding: 14px 15px;
}
.umf-o-nr {
  font-size: 21px; line-height: 1; flex: none;
  color: var(--brand-2); font-weight: 700;
}
.umf-o-mid { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.umf-o-pfeil { font-size: 19px; opacity: .45; flex: none; }
.umf-opt .umf-o-t { font-size: 15.5px; }

/* Vor der Stimme: WER schon mitgemacht hat — aber NICHT, wie. Wer die
   Verteilung vorher sieht, wählt die Mehrheit statt seine Meinung.
   Namen ohne Zahlen sind dagegen harmlos und ziehen mit. */
.umf-anstoss {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 10px 13px; border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 10%, var(--card-2));
  border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent);
  font-size: 12.5px; color: var(--muted); line-height: 1.4;
}
.umf-anstoss.leer { border-style: dashed; }
.umf-anstoss-ic { font-size: 19px; line-height: 1; flex: none; }
.umf-anstoss-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.umf-anstoss-t b { color: var(--fg); font-size: 13px; font-weight: 700; }
/* Die Köpfe überlappen wie ein Gruppenfoto — fünf Bilder in der Breite
   von dreien, und man sieht auf einen Blick „da sind schon welche". */
.umf-koepfe { display: flex; flex: none; align-items: center; }
.umf-koepfe .avatar {
  width: 26px; height: 26px; font-size: 10px;
  border: 2px solid var(--card);
  margin-left: -9px;
}
.umf-koepfe .avatar:first-child { margin-left: 0; }
/* Nach der Stimme: Prozent groß, die absolute Zahl klein darunter —
   sonst rätselt man, ob 33 % eine Stimme sind oder dreißig. */
.umf-zahl { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.umf-zahl small { font-size: 10.5px; font-weight: 600; opacity: .6; }
.umf-erg .umf-txt { display: flex; flex-direction: column; gap: 3px; }

/* ── Umfrage mit Bildern ───────────────────────────────────────────
   Ein Bild nimmt dem Auge die Arbeit ab: Man erkennt die Antwort, statt
   sie zu lesen. Deshalb steht es links und groß genug, um etwas darauf
   zu sehen — nicht als Briefmarke. */
.umf-o-bild {
  width: 62px; height: 62px; object-fit: cover; border-radius: 12px;
  flex: none; border: 1px solid var(--line-soft);
}
.umf-o-ic { font-size: 30px; line-height: 1; flex: none; width: 38px; text-align: center; }
.umf-opt.mit-bild { padding: 10px 13px; gap: 13px; }

.umf-e-bild {
  position: relative; z-index: 1;
  width: 40px; height: 40px; object-fit: cover; border-radius: 9px;
  flex: none; border: 1px solid var(--line-soft);
}
.umf-erg.mit-bild { gap: 11px; }

/* Ersteller: Symbol und Antwort in einer Zeile, Bild darunter. */
.umf-kopf { display: flex; gap: 7px; }
.umf-ic { width: 56px; flex: none; text-align: center; font-size: 19px; }
.umf-kopf .umf-o { flex: 1; min-width: 0; }
.umf-bildzeile { display: flex; align-items: center; gap: 9px; }
.umf-bild-vor { display: flex; align-items: center; gap: 5px; }
.umf-bild-vor img {
  width: 44px; height: 44px; object-fit: cover; border-radius: 9px;
  border: 1px solid var(--line-soft);
}
.umf-bild-weg {
  border: 0; background: none; cursor: pointer; font-family: inherit;
  color: var(--muted); font-size: 15px; padding: 4px 7px; border-radius: 8px;
}
.umf-bild-weg:hover { color: var(--danger); background: var(--card-2); }
.umf-fuss-r { display: inline-flex; align-items: center; gap: 8px; }
.umf-teilen {
  border: 1px solid var(--line-soft); background: var(--card-2);
  border-radius: 999px; padding: 4px 10px; font-size: 14px;
  cursor: pointer; font-family: inherit; color: inherit;
}
.umf-teilen:active { transform: scale(.94); }

/* ── Unser Zeichen auf der Umfrage ─────────────────────────────────
   Eine Umfrage wird abfotografiert und in die Bigo-Gruppe geschickt —
   dann soll man sehen, woher sie kommt. Das Zeichen liegt HINTER dem
   Inhalt, nicht darüber: lesbar bleibt lesbar.

   pointer-events:none, sonst fängt es den Tipp auf die Antwort ab. */
.umfrage { position: relative; }
.umfrage::after {
  content: '';
  /* Nicht ganz in die Ecke: Dort sitzt der Teilen-Knopf, und die Acht
     lag genau dahinter — sichtbar hinter dem Symbol, das man antippen
     soll. Am Bildschirm ausprobiert, nicht geschaetzt. */
  position: absolute; right: 46px; bottom: -2px;
  width: 100px; height: 100px;
  background: url('/icons/mark-180.png') no-repeat center / contain;
  opacity: .09;
  pointer-events: none;
  z-index: 0;
}
/* Alles Bedienbare gehört über das Zeichen. */
.umf-liste, .umf-fuss, .umf-anstoss, .umf-hinweis, .umf-verwalten { position: relative; z-index: 1; }

/* Im hellen Farbschema trägt das Zeichen weniger — dort etwas mehr. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .umfrage::after { opacity: .1; }
}

/* Die Zeile darunter macht einen Screenshot selbsterklärend: Wer das Bild
   in einer Bigo-Gruppe sieht, weiß, woher es kommt — ohne dass jemand
   „das ist von 4ever1" danebenschreiben muss. */
.umf-marke {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--line-soft);
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  color: var(--muted); opacity: .8;
}
.umf-marke img { width: 15px; height: 15px; opacity: .85; }

/* ── Teilen-Blatt ──────────────────────────────────────────────────
   Zwei Reihen große Ziele statt einer Symbolwand: Auf dem Handy wird
   das mit dem Daumen bedient, oft im Gehen. */
.teil-vorschau {
  white-space: pre-wrap; word-break: break-word;
  max-height: 132px; overflow: auto;
  margin: 2px 0 10px; padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2, rgba(255,255,255,.05));
  border: 1px solid var(--line-soft);
  font-size: 13px; line-height: 1.45; color: var(--fg);
}
.teil-wege { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.teil-weg {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 12px; min-height: 52px;
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  background: var(--surface-2, rgba(255,255,255,.04));
  color: var(--fg); font: inherit; font-weight: 600; font-size: 14px;
  text-align: left; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, border-color .12s ease;
}
.teil-weg:active { transform: scale(.97); border-color: var(--brand, #d4af37); }
.teil-ic { font-size: 20px; line-height: 1; }
/* WhatsApp ist der Weg, der hier zu 90 % gemeint ist — der darf sich
   von den anderen abheben, ohne die Farbwelt zu sprengen. */
#tl-wa { grid-column: 1 / -1; border-color: rgba(37,211,102,.45); background: rgba(37,211,102,.10); }

/* Ein geteilter Link zeigt auf eine Karte — die muss man auch finden. */
.tp-gezeigt { animation: tpGezeigt 2.4s ease; }
@keyframes tpGezeigt {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  15%, 60% { box-shadow: 0 0 0 3px var(--brand-glow, rgba(212,175,55,.55)); }
}
@media (prefers-reduced-motion: reduce) { .tp-gezeigt { animation: none; } }

/* ── 🔔 Die schwebende Glocke ──────────────────────────────────────────
   Sie liegt UNTER der Schnellleiste (44): Wenn jemand sie ausgerechnet
   nach ganz unten schiebt, gewinnt die Leiste – die braucht man taeglich.
   Menue (47–49), Blaetter (60) und Hinweise (80) liegen ohnehin darueber.

   Im Ruhezustand durchscheinend, damit man DARUNTER sehen kann. Voll da
   ist sie nur, wenn wirklich etwas Neues wartet – dann soll sie ja
   auffallen. */
.glocke-schwebt {
  position: fixed;
  z-index: 43;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 86%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(0,0,0,.32);
  font-size: 24px; line-height: 1; color: var(--fg);
  cursor: grab; opacity: .72;
  /* Ohne das scrollt der Browser beim Ziehen die Seite statt die Glocke. */
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  transition: opacity .18s ease, transform .16s ease, box-shadow .18s ease;
}
.glocke-schwebt:hover, .glocke-schwebt:focus-visible { opacity: 1; }
.glocke-schwebt:active { transform: scale(.94); }
/* Beim Ziehen absichtlich durchsichtiger: Man will ja sehen, worueber
   man sie gerade schiebt. */
.glocke-schwebt.zieht {
  opacity: .5; cursor: grabbing; transform: scale(1.08);
  transition: none;
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
}
/* Das Zurueckschnappen an die Kante darf man sehen – sonst wirkt es wie
   ein Sprung. */
.glocke-schwebt.schnappt { transition: left .26s cubic-bezier(.2,.9,.3,1.2), top .26s ease, opacity .18s ease; }
/* Etwas Neues: voll sichtbar, in den Hausfarben, einmal anschlagen. */
.glocke-schwebt.hat-neues {
  opacity: 1;
  border-color: color-mix(in srgb, var(--brand) 60%, transparent);
  box-shadow: 0 6px 20px rgba(0,0,0,.32), 0 0 0 3px var(--brand-glow);
  animation: glocke-kipp .9s ease-in-out 1;
}
.glocke-schwebt .glocke-zahl { top: -3px; right: -3px; }
/* .hat-neues steht weiter oben NACH .zieht und gewann bei gleicher
   Spezifitaet — mit Ungelesenem blieb die Glocke beim Ziehen voll
   deckend, man sah nicht, worueber man sie schob. */
.glocke-schwebt.hat-neues.zieht { opacity: .5; }
/* Weg, wo etwas anderes das ganze Bild braucht: beim Schreiben, im Menue,
   hinter einem offenen Blatt. Gleiche Regel wie bei der Schnellleiste. */
body.schreibt .glocke-schwebt,
body.menu-offen .glocke-schwebt,
body.blatt-offen .glocke-schwebt,
body:has(#rtc-overlay.rtc) .glocke-schwebt {
  opacity: 0; pointer-events: none; transform: scale(.8);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
@media (prefers-reduced-motion: reduce) {
  .glocke-schwebt, .glocke-schwebt.schnappt { transition: opacity .18s ease; }
  .glocke-schwebt.hat-neues { animation: none; }
}
/* Auf Touch-Geraeten die drei schwebenden Knoepfe ohne Weichzeichner:
   Durch sie schienen nur 10–14 % durch, der Weichzeichner musste beim
   Scrollen trotzdem jedes Bild neu rechnen. Dafuer fester (96 %) und mit
   einem feinen Ring in der Hausfarbe, damit der Glanz bleibt. */
/* ⚠️ @supports ist hier Pflicht: color-mix() kann WebKit erst ab 16.2
   (iPhone 6s/7/SE bleiben bei iOS 15). Ein Rueckfall in der Nachbarzeile
   rettet nichts – eine Deklaration mit var() gewinnt die Kaskade und faellt
   erst beim BERECHNEN durch, die Flaeche waere dann durchsichtig. So behalten
   alte Geraete einfach ihren bisherigen Weichzeichner. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
@media (hover: none) {
  .quickbar, .glocke-schwebt, .reelknopf { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .quickbar { background: color-mix(in srgb, var(--card) 96%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent), 0 14px 38px -12px rgba(0,0,0,.72), 0 2px 8px -2px rgba(0,0,0,.5); }
  .reelknopf { background: color-mix(in srgb, var(--card) 96%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent), 0 10px 26px -10px rgba(0,0,0,.7); }
  .glocke-schwebt { background: color-mix(in srgb, var(--card) 96%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent), 0 6px 20px rgba(0,0,0,.32); }
}
}

/* „erkannt" am vorgewählten Knopf: Der Name aus dem Bigo-Text passt zum
   eigenen. Ein Hinweis, keine Entscheidung – getippt wird trotzdem. */
.lv-erkannt {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  border-radius: 999px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .3px; text-transform: uppercase;
  background: color-mix(in srgb, var(--ok) 24%, transparent);
  color: var(--ok);
}

/* ── Verwaltungsraum-Uebersicht (11.09.2026) ───────────────────────────
   Vorher: 2,6 Handy-Bildschirme, die Kacheln fingen erst ganz unten am
   ersten an, und ueber allen 17 stand nur „Bereiche". Jetzt Gruppen mit
   eigener Ueberschrift und kompakte Kacheln — Symbol links, Text rechts. */
.mcp-hero.kompakt { padding-bottom: 14px; }
.mcp-jetzt { margin-top: 10px; }
.mcp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* Bernstein bzw. Markenfarbe — nie Rot. Rot ist Warnungen vorbehalten. */
.mcp-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12.5px; color: #fff;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  -webkit-tap-highlight-color: transparent;
}
.mcp-chip b { font-variant-numeric: tabular-nums; }
.mcp-chip:active { transform: scale(.96); }
.mcp-todo.warn { color: #ffd9a8; }
.mcp-todo.warn a { color: inherit; text-decoration: underline; }
.kr-lbl { color: var(--muted); margin-top: 18px; }
.kr-grid.kompakt { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 0; }
.kr-grid.kompakt .kr-card { flex-direction: row; align-items: center; gap: 10px; padding: 12px 12px;
  /* Die alte .kr-card-Regel setzt min-height: 120px — ohne dieses Zuruecksetzen
     blieb jede „kompakte" Kachel fast so hoch wie vorher. */
  min-height: 0; }
/* Die Zahl sitzt oben rechts; ohne Platz dafuer lag sie auf langen Namen. */
.kr-grid.kompakt .kr-card:has(.kr-badge) { padding-right: 34px; }
/* Eine Gruppe mit nur einer Kachel (z. B. „Zu erledigen") nimmt die ganze
   Breite — eine halbe Kachel allein in der Zeile sah nach Luecke aus. */
.kr-grid.kompakt > .kr-card:only-child { grid-column: 1 / -1; }
.kr-grid.kompakt .kr-txt { flex: 1; }
/* „Einladungscodes" lief ueber den Kachelrand hinaus. */
.kr-grid.kompakt .kr-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kr-grid.kompakt .kr-ic { width: 38px; height: 38px; font-size: 21px; margin: 0; flex: none; border-radius: 11px; }
.kr-grid.kompakt .kr-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kr-grid.kompakt .kr-name { font-size: 14px; }
.kr-grid.kompakt .kr-desc { font-size: 11px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kr-grid.kompakt .kr-badge { top: 7px; right: 7px; }

/* ── Familien-Anträge im Verwaltungsraum (11.09.2026) ─────────────────
   Grün wie alles Familien-Bezogene. Die Knöpfe rechts unten, damit man
   sie mit dem Daumen erreicht; Ablehnen bewusst schlicht (ghost), nicht rot. */
.fa-antraege { border-color: rgba(47,208,127,.42); }
.fa-antrag { padding: 11px 0; }
.fa-antrag + .fa-antrag { border-top: 1px solid var(--line-soft); }
.fa-antrag-kopf { display: flex; align-items: center; gap: 10px; }
.fa-antrag-wer { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.fa-antrag-wer b { font-size: 14.5px; }
.fa-antrag-wer .uname { font-size: 11.5px; }
.fa-antrag-zu { font-size: 12.5px; font-weight: 700; color: #8FD9B4; white-space: nowrap; }
.fa-antrag-msg { margin: 8px 0 0 46px; font-size: 13px; font-style: italic; color: var(--fg); opacity: .9; word-break: break-word; }
.fa-antrag-fuss { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.fa-antrag-tasten { display: flex; gap: 6px; margin-left: auto; }
.fa-antrag-id { font-size: 11px; color: var(--muted); margin-top: 1px; }
/* Lange Woerter wie „Namens-/ID-/Geburtstags-Änderungen" brachen mitten im
   Wort ab; so rutschen sie in die zweite Zeile. */
.kr-grid.kompakt .kr-desc { overflow-wrap: anywhere; }

/* ── Vorschaubild auf der Live-Karte (11.09.2026) ─────────────────────
   Klein, oben rechts, antippbar wie „Zum Stream". Die Karte bekommt
   rechts Platz, damit Name und Status nicht darunter laufen. */
.ch-live { position: relative; }
.ch-live.mit-bild { padding-right: 96px; min-height: 92px; }
.cl-bild { position: absolute; top: 10px; right: 10px; width: 76px; height: 76px;
  border-radius: 14px; overflow: hidden; display: block;
  border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(0,0,0,.35); background: var(--card-2); }
.cl-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-bild:active { transform: scale(.96); }
.ch-live.is-over .cl-bild img { filter: grayscale(1) brightness(.7); }
.cl-bigo { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.cl-bigo b { color: var(--text); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════
   🎁 DAS WICHTELDORF
   ──────────────────────────────────────────────────────────────────
   Bewusst OHNE color-mix(): Eine color-mix()-Angabe, in der ein var()
   steckt, ist auf WebKit vor 16.2 zur Laufzeit ungültig — die ganze
   Eigenschaft fällt dann weg, und eine rgba-Zeile daneben rettet das
   nicht. Auf iOS 15/16.0 wären Streifen und Knöpfe unsichtbar geworden.
   Hier stehen deshalb nur rgba-Werte und Verläufe.
   ══════════════════════════════════════════════════════════════════ */

/* ── Kopf ─────────────────────────────────────────────────────────── */
.dorf-kopf { margin: 6px 0 12px; }
.dk-oben { display: flex; align-items: center; gap: 10px; }
.dk-titel { font-size: 19px; font-weight: 800; flex: 1; letter-spacing: .2px; }
.dk-steine {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 12px 6px 8px; color: var(--text);
  font-weight: 800; font-size: 15px; cursor: pointer;
}
.dk-steine img { width: 20px; height: 20px; object-fit: contain; }
.dk-steine .dk-max { font-weight: 600; font-size: 12px; color: var(--muted-2); }
.dk-gruss {
  display: flex; align-items: center; gap: 12px; margin-top: 10px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px;
}
.dk-gruss b { font-size: 15px; }
.dk-wichtel { width: 46px; height: 46px; object-fit: contain; flex: 0 0 auto; }
.dk-gruss-t { color: var(--muted); font-size: 13px; margin-top: 2px; line-height: 1.45; }

/* ── Fortschritt ──────────────────────────────────────────────────── */
.d-fortschritt {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px;
}
.df-zeile { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--muted); }
.df-zeile b { font-size: 20px; color: var(--text); font-weight: 800; }
.df-bar { height: 10px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; margin: 8px 0 0; }
.df-bar i { display: block; height: 100%; border-radius: 999px; background: var(--grad); transition: width .5s cubic-bezier(.2,.7,.3,1); }
.df-bar.gold i { background: linear-gradient(135deg, #F0BE5A 0%, #FFE29A 100%); }
.df-teile { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12px; color: var(--muted-2); }
/* Am ersten Tag ist dieser Kasten leer — dann soll er auch weg sein und
   nicht als leerer Rahmen zwischen Gruß und Dorf stehen. */
.d-fortschritt:empty { display: none; }

/* ── 📬 Post vom Team ─────────────────────────────────────────────────
   Ein Brief soll nach Brief aussehen, nicht nach Listeneintrag. Ungelesene
   bekommen deshalb einen warmen Rand und eine Marke — gelesene werden ruhig
   und treten zurück, ohne zu verschwinden. */
/* ⚠️ `color` MUSS hier stehen. Ein <button> erbt die Textfarbe NICHT — er
   nimmt die des Browsers, und die ist fast schwarz. Auf der dunklen Karte
   war der Titel damit kaum zu lesen (gemeldet am 04.10.2026, mit Bild).
   `.kr-card` macht es seit jeher richtig; hier fehlte es. */
.bf-brief { display: block; width: 100%; text-align: left; cursor: pointer; color: var(--text); }
.bf-brief .bf-mid b { font-weight: 700; letter-spacing: -.01em; }
.bf-brief.neu { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand-glow); }
.bf-kopf { display: flex; align-items: center; gap: 12px; }
.bf-ic { font-size: 26px; line-height: 1; flex: 0 0 auto; }
.bf-mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.bf-mid b { font-size: 15px; }
.bf-neu {
  flex: 0 0 auto; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
  background: var(--grad); color: var(--on-brand);
}
.bf-auf { text-align: center; }
.bf-siegel { font-size: 54px; line-height: 1.1; margin-bottom: 6px; }
.bf-text {
  margin-top: 10px; text-align: left; font-size: 15px; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
/* Der Umschlag wackelt, bevor man ihn aufmacht — dieselbe Vorfreude wie
   beim Geschenk, nur dezenter: Ein Brief hüpft nicht, er zittert. */
.bf-schachtel { animation: bf-zittern 2.4s ease-in-out infinite; }
@keyframes bf-zittern {
  0%, 88%, 100% { transform: rotate(0deg); }
  91% { transform: rotate(-4deg); }
  94% { transform: rotate(4deg); }
  97% { transform: rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) { .bf-schachtel { animation: none; } }

/* Der Anhang-Knopf in der Vorschau: Er sieht aus wie der echte, führt aber
   nirgends hin — in der Vorschau gibt es die Datei noch nicht. Deshalb kein
   Zeigefinger und etwas zurückgenommen, damit man ihn nicht erwartungsvoll
   antippt. */
.bf-probe { opacity: .72; cursor: default; }

/* ── 📬 Einen Brief schreiben (Verwaltungsraum) ───────────────────────
   Alles auf EINER Seite: wählen, schreiben, anhängen, vorher ansehen,
   abschicken. Die Treffer-Liste bekommt eine feste Höhe mit eigenem
   Scrollbalken — sonst schiebt sie bei 25 Namen das Schreibfeld aus dem
   Bild, und man tippt blind. */
.bri-treffer { display: grid; gap: 6px; margin-top: 8px; max-height: 232px; overflow-y: auto; }
.bri-treff {
  display: flex; flex-direction: column; gap: 1px; text-align: left;
  padding: 9px 11px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card-2); color: var(--text);
}
.bri-treff b { font-size: 14px; }
.bri-treff:hover, .bri-treff:focus-visible { border-color: var(--brand); }
/* Gewählter Empfänger und gewählter Anhang sehen absichtlich gleich aus:
   Es sind dieselbe Sorte Zusage — „das steht jetzt fest, und so nimmst du
   es wieder weg". */
.bri-chip {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 8px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
  background: var(--card-2);
}
.bri-chip b { font-size: 14.5px; }
.bri-weg {
  margin-left: auto; flex: none; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  cursor: pointer; font-size: 13px; line-height: 1;
}
.bri-weg:hover { color: var(--text); border-color: var(--text); }
.bri-vorlagen { display: flex; gap: 8px; flex-wrap: wrap; }
.bri-vl {
  padding: 8px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--line); background: var(--card-2); color: var(--text);
  font-size: 13px; font-weight: 700;
}
.bri-vl:hover { border-color: var(--brand); }
.bri-vl.on { background: var(--grad); color: var(--on-brand); border-color: transparent; }
.bri-log { display: flex; flex-direction: column; gap: 2px; }

/* ── Die Sorte eines Briefes ──────────────────────────────────────────
   „Systemnachrichten können nicht nur Geschenke sein. Können auch
   anderweitige Inhalte sein. Nicht so schöne Sachen."

   Deshalb sieht man schon beim Schreiben, was man gerade baut: Der
   gewählte Knopf trägt die Farbe der Sorte, nicht immer die Hausfarbe.
   Ernst ist bernsteinfarben — nicht rot: Rot ist bei uns die Warnung an
   ALLE, und ein Brief an einen ist etwas anderes. */
.bri-sorten { display: flex; gap: 8px; flex-wrap: wrap; }
.bri-sorte {
  padding: 9px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--line); background: var(--card-2); color: var(--text);
  font-size: 13.5px; font-weight: 700;
}
.bri-sorte:hover { border-color: var(--brand); }
.bri-sorte.on { background: var(--grad); color: var(--on-brand); border-color: transparent; }
.bri-sorte[data-art="sachlich"].on {
  background: var(--card-2); color: var(--text); border-color: var(--text);
}
.bri-sorte[data-art="ernst"].on {
  background: color-mix(in srgb, var(--warn) 22%, transparent);
  color: var(--warn); border-color: var(--warn);
}

/* ── Ein ernster Brief sieht anders aus — überall gleich ──────────────
   In der Liste, im Umschlag und im aufgeschlagenen Blatt. Nur die Farbe
   und ein ruhigerer Auftritt; der Text selbst bleibt unangetastet. */
.bf-brief.bf-ernst { border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.bf-brief.bf-ernst.neu { box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent); }
.bf-ernst .bf-siegel { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--warn) 45%, transparent)); }
.bf-ernst h3 { color: var(--warn); }
/* Der Schluss-Knopf heißt dort „Verstanden ✓" und trägt deshalb Gewicht —
   aber in der Farbe der Sorte, nicht in der Hausfarbe. */
.gs-paket.bf-ernst .btn.primary, .bf-auf.bf-ernst .btn.primary {
  background: var(--warn); color: #231a05; border-color: transparent;
}

/* ── Auch die Häuser stehen, sie schweben nicht ───────────────────────
   Dasselbe wie bei den Trümmern, nur eine Nummer größer: Ein Haus wirft
   einen längeren Schatten als ein Haufen Bretter. Der Inhaber: „Dann schaue
   auch, das die Häuser nicht schweben."

   `dz-haus` sind die vier eigenen Gebäude, `dz-welt` Brunnen und Dorftor,
   `dz-zug` die Waggons, `dz-deko` die aufgestellten Stücke. `dz-geruest`
   bleibt AUSSEN vor: Das Gerüst steht als Überzug über einem Haus, das
   seinen Schatten schon hat — zwei Schatten übereinander sehen aus wie
   Dreck auf dem Bildschirm. */
.dz-haus, .dz-welt, .dz-zug, .dz-deko {
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .75))
          drop-shadow(0 12px 20px rgba(0, 0, 0, .45));
}

/* Figuren und Tiere bekommen denselben Bodenschatten wie die Trümmer —
   sonst schweben sie genauso. Die Lichterkette NICHT: Sie hängt ja. */
.dz-leben { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .8))
                    drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
.dz-kette { filter: drop-shadow(0 2px 8px rgba(255, 200, 90, .35)); }

/* ── Trümmer liegen, sie schweben nicht ───────────────────────────────
   Jedes Trümmerbild bringt seine eigene kleine Bodeninsel mit (die helle
   Gras- oder Sandfläche). Die liegt als harte Scheibe auf dem Dorfboden,
   mit anderem Licht und scharfer Kante — dadurch wirkt das Stück aufgesetzt
   statt daraufliegend. Der Inhaber dazu: „Also ob was schwebt?"

   Zwei Schatten statt einem, und das ist der ganze Trick:
   · ein harter, dicht darunter  → der KONTAKT zum Boden
   · ein weicher, grösserer      → das Streulicht ringsum
   Einer allein sieht entweder nach Aufkleber oder nach Nebel aus.

   Am Knopf und nicht am Bild: So kann das Bild seine eigene
   Licht­korrektur behalten (die neuen Grafiken kamen zu sonnig), ohne dass
   eine der beiden Regeln die andere überschreibt. */
.dz-schutt {
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .85))
          drop-shadow(0 9px 14px rgba(0, 0, 0, .5));
}

/* ── Schnee in der Szene ──────────────────────────────────────────────
   Nicht über der ganzen Seite (das macht schon .jz), sondern NUR im Bild:
   `overflow:hidden` an der Bühne schneidet die Flocken an der Bildkante ab.
   `pointer-events:none`, damit man weiterhin die Häuser antippt und nicht
   eine Flocke. Nur `transform` und `opacity` werden bewegt — das kostet
   kein Ruckeln, auch auf einem älteren Telefon. */
.dz-schnee { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 20; }
.dz-flocke {
  position: absolute; top: -8%; display: block; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0%, rgba(255,255,255,.85) 55%, rgba(255,255,255,0) 72%);
  animation: dz-fall linear infinite;
}
@keyframes dz-fall {
  0%   { transform: translate3d(0, -10%, 0); }
  100% { transform: translate3d(14px, 760%, 0); }
}
@media (prefers-reduced-motion: reduce) { .dz-schnee { display: none; } }

/* ── Die Bühne ────────────────────────────────────────────────────── */
.dz-buehne {
  position: relative; width: 100%; aspect-ratio: 16 / 10;
  border-radius: var(--radius); overflow: hidden;
  background-size: cover; background-position: center bottom;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  margin-bottom: 12px;
}
/* Kein aspect-ratio? Dann eine feste Höhe, sonst klappt die Bühne zu. */
@supports not (aspect-ratio: 16 / 10) { .dz-buehne { height: 58vw; max-height: 400px; } }
.dz-stueck {
  position: absolute; transform: translateX(-50%);
  padding: 0; border: 0; background: none; line-height: 0;
}
.dz-stueck img { width: 100%; height: auto; display: block; }
button.dz-stueck { cursor: pointer; transition: transform .18s ease; }
button.dz-stueck:active { transform: translateX(-50%) scale(.94); }
.dz-wichtel { pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.dz-zug { animation: dz-fahrt 1.2s cubic-bezier(.2,.8,.3,1) both; }
@keyframes dz-fahrt { from { opacity: 0; transform: translateX(-120%); } to { opacity: 1; transform: translateX(-50%); } }
/* Ein Trümmerhaufen ruft leise nach Aufmerksamkeit. */
.dz-ruf {
  position: absolute; top: -4px; right: 2px; width: 20px; height: 20px; line-height: 20px;
  border-radius: 50%; background: var(--warn); color: #1A1208; font-weight: 900; font-size: 13px;
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.dz-gabe { position: absolute; top: -6px; right: -2px; font-size: 13px; line-height: 1; }
.dz-tun { animation: dz-wink 2.6s ease-in-out infinite; }
@keyframes dz-wink {
  0%, 88%, 100% { transform: translateX(-50%) rotate(0); }
  92% { transform: translateX(-50%) rotate(-4deg); }
  96% { transform: translateX(-50%) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .dz-tun, .dz-zug { animation: none; }
}
.dz-plaetze { position: absolute; inset: 0; pointer-events: none; }
.dz-buehne.schmuecken .dz-plaetze { pointer-events: auto; }
.dz-buehne.schmuecken::after {
  content: ''; position: absolute; inset: 0; background: rgba(11,11,18,.42); pointer-events: none;
}
.dz-frei {
  position: absolute; transform: translateX(-50%); aspect-ratio: 1;
  border-radius: 50%; border: 2px dashed rgba(255,255,255,.65);
  background: rgba(177,75,255,.28); color: #fff; font-size: 18px; font-weight: 800;
  display: grid; place-items: center; cursor: pointer; z-index: 30;
  animation: dz-puls 2s ease-in-out infinite;
}
@keyframes dz-puls { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

/* ── Leiste + Päckchen ────────────────────────────────────────────── */
.d-leiste { display: flex; gap: 8px; margin-bottom: 14px; }
.d-paket {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--card); border: 1px solid rgba(240,190,90,.5);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px;
  color: var(--text); cursor: pointer;
}
.d-paket img { width: 44px; height: 44px; object-fit: contain; animation: dp-wackel 2.4s ease-in-out infinite; }
@keyframes dp-wackel { 0%, 90%, 100% { transform: rotate(0); } 93% { transform: rotate(-7deg); } 97% { transform: rotate(7deg); } }
@media (prefers-reduced-motion: reduce) { .d-paket img { animation: none; } }
.d-paket > div { flex: 1; }
.dp-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.dp-go { color: #F0BE5A; font-weight: 700; font-size: 13px; }

/* ── Aufgaben ─────────────────────────────────────────────────────── */
.d-aufgaben { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.da-zeile { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); }
.da-zeile:last-child { border-bottom: 0; }
.da-zeile.fertig { opacity: .55; }
.da-ic { font-size: 20px; width: 26px; text-align: center; flex: 0 0 auto; }
.da-mid { flex: 1; min-width: 0; }
.da-mid b { font-size: 14px; }
.da-sub { color: var(--muted-2); font-size: 12px; margin-top: 1px; }
.da-haken { color: var(--ok); font-weight: 900; font-size: 17px; }
.da-lohn { color: var(--muted-2); font-size: 12px; font-weight: 700; white-space: nowrap; }
.da-tagwerk { padding: 11px 14px; background: rgba(240,190,90,.12); color: #F0BE5A; font-weight: 700; font-size: 13px; text-align: center; }

/* ── Bauen ────────────────────────────────────────────────────────── */
.d-bauen { display: grid; gap: 10px; }
.db-karte {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px 10px 10px;
}
.db-karte.fertig { border-color: rgba(46,212,122,.4); }
.db-karte > img { width: 58px; height: 58px; object-fit: contain; flex: 0 0 auto; }
.db-mid { flex: 1; min-width: 0; }
.db-mid b { font-size: 14px; }
.db-sub { color: var(--muted-2); font-size: 12px; margin: 1px 0 6px; }
.db-stufen { display: flex; gap: 4px; }
.db-stufen.mitte { justify-content: center; margin: 10px 0 14px; }
.db-stufen i { width: 22px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.14); }
.db-stufen i.voll { background: var(--grad); }
.db-fertig { color: var(--ok); font-size: 12px; font-weight: 800; }
.d-fertig-txt { text-align: center; color: var(--ok); font-weight: 700; padding: 6px 0 14px; }

/* ── Der gemeinsame Platz ─────────────────────────────────────────── */
.d-platz { background: var(--card); border: 1px solid rgba(240,190,90,.34); border-radius: var(--radius); padding: 12px 14px; }
.dpz-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.dpz-kopf b { font-size: 14px; }
.dpz-sub { color: var(--muted); font-size: 13px; margin-top: 8px; }
.dpz-hinweis { color: var(--muted-2); font-size: 11.5px; margin-top: 8px; line-height: 1.45; }
.dpz-liste { margin: 10px 0; display: grid; gap: 3px; }
.dpz-e { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted-2); }
.dpz-e span { width: 20px; text-align: center; flex: 0 0 auto; }
.dpz-e b { flex: 1; font-weight: 600; }
.dpz-e i { font-style: normal; opacity: .6; }
.dpz-e.hat { color: #F0BE5A; }
.dpz-e.hat b { font-weight: 700; }

/* ── Schenken + Fuß ───────────────────────────────────────────────── */
.d-schenken { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.ds-text { color: var(--muted); font-size: 13px; line-height: 1.5; margin-bottom: 10px; }
.d-fuss { text-align: center; color: var(--muted-2); font-size: 11.5px; margin: 22px 0 8px; line-height: 1.5; }

/* ── Vorgeschichte und Kapitel ────────────────────────────────────── */
.d-intro { text-align: center; }
.d-intro h3 { margin: 12px 0 8px; }
.di-bild { margin: 0 auto; width: 120px; }
.di-bild.gross { width: 100%; max-width: 420px; border-radius: var(--radius); overflow: hidden; }
/* Freigestellte Figuren (der Weihnachtsmann im Gips): größer als die
   kleinen Wichtel, aber ohne Rahmen — sie stehen frei auf dem Blatt. */
.di-bild.mittel { width: min(300px, 88%); }
.di-bild.mittel img { filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); }
.di-bild img { width: 100%; height: auto; display: block; }
.di-text { color: var(--text); opacity: .88; font-size: 14.5px; line-height: 1.6; text-align: left; margin-bottom: 16px; }
/* Post vom Weihnachtsmann (Dorfplatz). Ein Brief, kein Kasten: warmes
   Papier, handschriftliche Anmutung, leicht schief — wie vom Krankenbett
   gekritzelt. Gold statt Rot (Rot heißt hier Warnung). */
.d-brief { text-align: left; margin: 0 2px 16px; padding: 12px 14px 13px; border-radius: 12px;
  background: linear-gradient(160deg, rgba(240,190,90,.16), rgba(240,190,90,.06));
  border: 1px solid rgba(240,190,90,.35); transform: rotate(-.6deg); }
/* Der Weihnachtsmann beim Schreiben, oben rechts an den Brief gelehnt. */
.d-brief { position: relative; }
.d-brief-bild { float: right; width: 112px; margin: -26px -8px 4px 8px; transform: rotate(.6deg);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.d-brief-kopf { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #F0BE5A; margin-bottom: 6px; }
.d-brief-text { font-family: 'Segoe Script','Snell Roundhand','Brush Script MT',cursive; font-size: 16px;
  line-height: 1.5; color: var(--text); }
@media (prefers-reduced-motion: reduce) { .d-brief { transform: none; } }
/* Die neun Rentiere: wie viele schon zurück sind. Noch keins da = das
   Bild blass, als wäre es nur eine Erinnerung. */
.d-rentiere { display: flex; gap: 12px; align-items: center; text-align: left; margin: 0 2px 16px;
  padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); }
.d-rentiere img { width: 72px; flex: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.d-rentiere.weg img { opacity: .35; filter: grayscale(.8); }
.d-rentiere b { display: block; font-size: 14px; }
.dr-punkte { display: flex; gap: 4px; margin: 5px 0 4px; }
.dr-punkte i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.14); }
.dr-punkte i.da { background: #F0BE5A; box-shadow: 0 0 6px rgba(240,190,90,.6); }
.di-kap { color: var(--brand-2); font-weight: 800; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; margin-top: 10px; }
.di-punkte { display: flex; gap: 6px; justify-content: center; margin-bottom: 14px; }
.di-punkte i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.22); }
.di-punkte i.an { background: var(--brand-2); width: 20px; border-radius: 999px; }

.d-regeln { display: grid; gap: 10px; text-align: left; margin: 4px 0 16px; }
.dr { display: flex; gap: 12px; align-items: flex-start; background: var(--card-2); border-radius: var(--radius-sm); padding: 11px 13px; }
.dr > span { font-size: 20px; line-height: 1.2; flex: 0 0 auto; }
.dr b { display: block; font-size: 14px; margin-bottom: 3px; }
.dr > div { font-size: 13px; color: var(--muted); line-height: 1.5; }

.d-kaplist { display: grid; gap: 8px; }
.dkl { display: flex; gap: 12px; align-items: flex-start; background: var(--card-2); border-radius: var(--radius-sm); padding: 11px 13px; }
.dkl.zu { opacity: .5; }
.dkl-nr { width: 26px; height: 26px; border-radius: 50%; background: var(--grad); color: var(--on-brand);
          display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: 0 0 auto; }
.dkl.zu .dkl-nr { background: rgba(255,255,255,.1); }
.dkl b { font-size: 14px; }
.dkl-s { font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 3px; }

.d-steine-gross { text-align: center; font-size: 42px; font-weight: 900; line-height: 1.1; }
.d-steine-gross span { font-size: 18px; color: var(--muted-2); font-weight: 700; }

/* ── Laden und Schuppen ───────────────────────────────────────────── */
.d-abschnitt { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
               color: var(--muted); margin: 16px 0 8px; }
.d-laden { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.dl-kachel {
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 8px 6px; display: grid; justify-items: center; gap: 2px; cursor: pointer; color: var(--text);
}
.dl-kachel img { width: 46px; height: 46px; object-fit: contain; }
.dl-kachel span { font-size: 11.5px; text-align: center; line-height: 1.25; }
.dl-kachel b { font-size: 11.5px; color: var(--muted-2); }
.dl-kachel b.frei { color: var(--ok); }
.dl-kachel.arm { opacity: .42; }
.dl-kachel:active { transform: scale(.95); }
.d-stueck { text-align: center; }
.d-stueck img { width: 110px; height: auto; }
.d-stueck.gross img { width: 150px; }

/* ── Päckchen und Schenken ────────────────────────────────────────── */
.d-pakete { display: grid; gap: 8px; }
.dp-karte { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
            background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
            padding: 10px 12px; color: var(--text); cursor: pointer; }
.dp-karte img { width: 42px; height: 42px; object-fit: contain; }
.dp-karte > div { flex: 1; min-width: 0; }
.dp-gruss { color: var(--muted); font-size: 12.5px; font-style: italic; margin-top: 2px; }

.d-wem { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.dw-p { background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
        padding: 8px 4px; display: grid; justify-items: center; gap: 4px; color: var(--text); cursor: pointer; }
.dw-p img, .dw-ini { width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
                     display: grid; place-items: center; background: var(--card); font-size: 20px; }
.dw-p span { font-size: 11.5px; text-align: center; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dw-p.an { border-color: var(--brand-2); background: rgba(255,77,157,.14); }

.d-inhalt { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.di-w { background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
        padding: 8px 4px; display: grid; justify-items: center; gap: 3px; color: var(--text); cursor: pointer; }
.di-w img { width: 38px; height: 38px; object-fit: contain; }
.di-w span { font-size: 11px; text-align: center; line-height: 1.2; }
.di-w.an { border-color: var(--brand-2); background: rgba(255,77,157,.14); }

.d-papier { display: flex; gap: 10px; justify-content: center; }
.dpa { background: none; border: 2px solid transparent; border-radius: var(--radius-sm); padding: 6px; cursor: pointer; }
.dpa img { width: 56px; height: 56px; object-fit: contain; }
.dpa.an { border-color: var(--brand-2); background: rgba(255,77,157,.12); }

.d-gruesse { display: flex; flex-wrap: wrap; gap: 6px; }
.dg { background: var(--card-2); border: 1px solid var(--line); border-radius: 999px;
      padding: 7px 12px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.dg.an { border-color: var(--brand-2); color: var(--text); background: rgba(255,77,157,.14); }

/* ── Der Streifen auf der Startseite ──────────────────────────────── */
.dorf-streifen {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 14px 10px 10px; margin-bottom: 12px;
}
.dorf-streifen.neu { border-color: rgba(240,190,90,.5); background-image: linear-gradient(120deg, rgba(240,190,90,.1), transparent 60%); }
.dst-w { width: 42px; height: 42px; object-fit: contain; flex: 0 0 auto; }
.dst-mid { flex: 1; min-width: 0; }
.dst-mid b { font-size: 13.5px; }
.dst-bar { height: 5px; border-radius: 999px; background: rgba(255,255,255,.09); overflow: hidden; margin: 5px 0 4px; }
.dst-bar i { display: block; height: 100%; border-radius: 999px; background: var(--grad); }
.dst-sub { color: var(--muted-2); font-size: 11.5px; }
.dst-go { color: #F0BE5A; font-weight: 700; font-size: 13px; white-space: nowrap; }
.dst-steine { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 14px; white-space: nowrap; }
.dst-steine img { width: 18px; height: 18px; object-fit: contain; }

/* ── Kachel auf der Spiele-Seite ──────────────────────────────────── */
.dorf-kachel {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text);
  background: var(--card); border: 1px solid rgba(240,190,90,.34);
  border-radius: var(--radius); padding: 12px 14px; margin: 12px 0;
}
.dorf-kachel img { width: 44px; height: 44px; object-fit: contain; }
.dorf-kachel .dk-mid { flex: 1; min-width: 0; }
.dorf-kachel .dk-sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.dorf-kachel .dk-go { color: #F0BE5A; font-weight: 700; font-size: 13px; white-space: nowrap; }

/* ── Der Schalter im Inhaber-Reich ────────────────────────────────── */
.dorf-schalter { padding: 14px; }
.dorf-schalter.an { border-color: rgba(46,212,122,.45); }
.dsch-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dsch-kopf img { width: 48px; height: 48px; object-fit: contain; }
.ad-regler { display: block; margin: 12px 0 6px; font-size: 13px; color: var(--muted); }
.ad-regler input { width: 100%; margin-top: 6px; }

/* ── Die neun Bilder, die vorher ungenutzt lagen ──────────────────── */
/* Bauplatz: der Fleck Erde unter jedem Haus. EIN Bild für alle vier. */
.dz-platz { pointer-events: none; opacity: .45; }
/* Gerüst: liegt ÜBER dem halbfertigen Haus und sagt „hier wird gearbeitet".
   Ohne pointer-events: none würde es den Tipp aufs Haus abfangen. */
.dz-geruest { pointer-events: none; opacity: .95; }
/* Schutt vom Sturm — verschwindet Stück für Stück, während der Hof wächst. */
.dz-schutt { pointer-events: none; animation: dz-weg .6s ease both; }
@keyframes dz-weg { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dz-schutt { animation: none; } }
/* Werkzeug statt Emoji in der Aufgabenliste. */
.da-ic img { width: 26px; height: 26px; object-fit: contain; display: block; margin: 0 auto; }
/* Hammer neben der Überschrift „Bauen". */
.section-title .st-item { width: 18px; height: 18px; object-fit: contain; vertical-align: -3px; }
/* Das Holz, das beim Trümmerhaufen schon bereitliegt. */
.db-bild { position: relative; display: block; width: 58px; height: 58px; flex: 0 0 auto; }
.db-bild > img { width: 100%; height: 100%; object-fit: contain; display: block; }
.db-holz { position: absolute; right: -6px; bottom: -4px; width: 26px !important; height: 26px !important; }

/* Knopf-Zeile im Wichtel-Blatt (wie .dr, nur antippbar). */
.dr-knopf { width: 100%; text-align: left; border: 0; cursor: pointer; color: var(--text); font: inherit; }
.dr-knopf > span img { width: 26px; height: 26px; object-fit: contain; display: block; }
.dr-knopf:active { transform: scale(.98); }
/* Der Dorfplatz-Kasten ist jetzt ein Knopf. */
button.d-platz { width: 100%; text-align: left; color: var(--text); font: inherit; cursor: pointer; display: block; }

/* Was noch nie im Hof stand, steht im Laden vorn und trägt ein Fähnchen —
   nur diese Sorten bringen die Prozentanzeige weiter. */
.d-neu-zeile { margin: 10px 0 0; padding: 8px 12px; border-radius: var(--radius-sm);
               background: rgba(240,190,90,.12); color: #F0BE5A; font-size: 12.5px; font-weight: 700; }
.dl-kachel.neu { border-color: rgba(240,190,90,.55); }
.dl-kachel.neu::after { content: '✨'; position: absolute; top: 2px; right: 4px; font-size: 11px; }
.dl-kachel { position: relative; }

/* Die Winterzeit (1.–27.12.): der Weg zu Heiligabend, in Tagen. */
.dpz-advent { margin-top: 8px; padding: 7px 11px; border-radius: var(--radius-sm);
              background: rgba(240,190,90,.13); color: #F0BE5A; font-size: 12.5px; font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════
   👪 DER FAMILIEN-WÄHLER
   ──────────────────────────────────────────────────────────────────
   EIN Bauteil für vier Stellen: Anmeldung, Einladungscode, neues Konto,
   Mitgliedschaft ändern. Vorher waren drei davon ein <select> — eine Zeile
   Text, kein Wappen, kein Satz, keine Größe.
   ══════════════════════════════════════════════════════════════════ */
/* grid-template-columns: minmax(0, 1fr) ist Pflicht, nicht Geschmack:
   Ein Grid-Kind hat von Haus aus min-width:auto und darf deshalb BREITER
   werden als sein Kasten, sobald darin Text mit white-space:nowrap steht.
   Genau das ist passiert — die Karten liefen rechts aus dem Formular, der
   Haken war abgeschnitten. */
.fam-wahl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 6px; }
.famw-karte {
  --fam-farbe: var(--brand);
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--card-2); border: 1.5px solid var(--line);
  border-radius: var(--radius); padding: 11px 12px; color: var(--text); cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, transform .12s ease;
}
.famw-karte:active { transform: scale(.985); }
.famw-karte.on { border-color: var(--fam-farbe); background: var(--card); }
/* Der Schein liegt als eigene Schicht darunter, nicht als box-shadow mit
   color-mix — siehe die Warnung im Dorf-Block: color-mix mit var() ist auf
   WebKit vor 16.2 ungültig und nimmt die ganze Eigenschaft mit. */
.famw-karte.on::before {
  content: ''; position: absolute; inset: -1px; border-radius: var(--radius);
  box-shadow: 0 0 0 3px rgba(177,75,255,.16); pointer-events: none;
}
.famw-karte { position: relative; }
.fk-bild { flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center;
           border-radius: 12px; background: rgba(255,255,255,.05); overflow: hidden; }
.fk-logo { width: 100%; height: 100%; object-fit: cover; display: block; }
.fk-logo.gross { border-radius: 14px; }
.fk-emo { font-size: 24px; line-height: 1; }
.fk-emo.gross { font-size: 34px; }
.fk-mid { flex: 1; min-width: 0; }
.fk-kopf { display: flex; align-items: baseline; gap: 8px; }
.fk-mid b { font-size: 15px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-zahl { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--muted-2);
           background: rgba(255,255,255,.06); border-radius: 999px; padding: 2px 7px; }
.fk-sub { color: var(--muted); font-size: 12px; margin-top: 2px; display: block;
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-haken { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
            border: 1.5px solid var(--line); color: transparent; font-weight: 900; font-size: 13px;
            display: grid; place-items: center; }
.famw-karte.on .fk-haken { background: var(--fam-farbe); border-color: var(--fam-farbe);
                          color: var(--on-brand); }
.fam-frei .fk-bild { background: rgba(255,255,255,.04); }

/* Familien-Karte: Wappen, Satz und der Verlauf „wer ist dazugekommen". */
.fa-beschr { display: block; color: var(--muted); font-size: 12.5px; margin: 2px 0 1px; }
.fa-head .fa-em { display: grid; place-items: center; width: 52px; height: 52px;
                  border-radius: 14px; background: rgba(255,255,255,.05); overflow: hidden; flex: 0 0 auto; }
.fa-logo-box { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.fa-logo-vor { width: 72px; height: 72px; border-radius: 16px; overflow: hidden; flex: 0 0 auto;
               display: grid; place-items: center; background: var(--card-2); border: 1px solid var(--line); }
.fa-logo-vor img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fa-logo-tasten { display: grid; gap: 8px; }

.zu-box { margin-top: 10px; border-top: 1px solid var(--line-soft); padding-top: 8px; }
/* Die Zahl stand als float:right in der Zusammenfassung — und ein Float in
   einem <summary> rechnet nicht mit dem Kasten, in dem er sitzt. Auf schmalen
   Geräten lief „3 aufgenommen · 0 abgelehnt" rechts aus der Karte heraus.
   Jetzt eine echte Zeile: Beschriftung links, Zahl rechts, und wenn es zu eng
   wird, rutscht die Zahl in die nächste Zeile statt zu verschwinden. */
.zu-box summary { cursor: pointer; font-size: 13px; font-weight: 700; list-style: none;
                  display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; }
.zu-box summary::-webkit-details-marker { display: none; }
.zu-box summary::after { content: '›'; margin-left: 2px; color: var(--muted-2);
                         transition: transform .18s ease; display: inline-block; }
.zu-box[open] summary::after { transform: rotate(90deg); }
.zu-zahl { margin-left: auto; color: var(--muted-2); font-size: 11.5px; font-weight: 600;
           white-space: nowrap; }
.zu-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin-top: 8px; }
.zu-zeile { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; padding: 3px 0;
             flex-wrap: wrap; }
.zu-wer { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.zu-ic { width: 16px; flex: 0 0 auto; text-align: center; }
.zu-wer { font-weight: 600; }
.zu-box { min-width: 0; }
.zu-was { color: var(--muted); }
/* Wann · woher · von wem bekommt eine EIGENE Zeile, unter dem Namen
   eingerückt — statt rechts an den Rand gequetscht zu werden.
   Zwei Gründe: „vor 3 Tagen · Antrag · eykeepcool" ist auf 320 px schlicht
   länger als der Platz, und am rechten Rand liegen die Wisch-Griffe der App
   darüber. Was dort steht, liest niemand. */
.zu-wann { flex: 1 0 100%; margin-left: 24px; color: var(--muted-2);
           font-size: 11px; text-align: left; min-width: 0; }
@media (min-width: 560px) {
  /* Auf breiten Geräten ist rechts genug Platz — dort bleibt es in der Zeile. */
  .zu-wann { flex: 0 1 auto; margin-left: auto; text-align: right; }
}
.zu-zeile.zu-ja .zu-ic { color: var(--ok); }
.zu-zeile.zu-nein { opacity: .68; }
.zu-zeile.zu-wart .zu-ic { color: var(--warn); }

/* ── 👑 Der Familienchef ──────────────────────────────────────────── */
.chef-karte { --fam-farbe: var(--brand); border-color: var(--fam-farbe); padding: 14px; }
.chef-kopf { display: flex; align-items: center; gap: 12px; }
.chef-bild { width: 54px; height: 54px; border-radius: 14px; overflow: hidden; flex: 0 0 auto;
             display: grid; place-items: center; background: rgba(255,255,255,.05); }
.chef-mid { flex: 1; min-width: 0; }
.chef-mid b { font-size: 16px; display: block; }
.chef-rolle { display: block; font-size: 11px; font-weight: 800; letter-spacing: .8px;
              text-transform: uppercase; color: var(--fam-farbe); }
.chef-antraege { display: grid; gap: 10px; }
.chef-antrag { background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 12px; }
.chef-antrag-kopf { display: flex; align-items: center; gap: 10px; }
.chef-antrag-wer { flex: 1; min-width: 0; }
.chef-antrag-wer b { display: block; font-size: 14px; }
.chef-antrag-msg { margin-top: 8px; font-size: 13px; color: var(--muted); font-style: italic; line-height: 1.45; }
.chef-leer { color: var(--muted-2); font-size: 13px; text-align: center; padding: 14px 0 4px; }
.chef-fuss { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft);
             color: var(--muted-2); font-size: 11.5px; line-height: 1.5; }
/* 👋 Der Weg hinaus. Leise und ganz unten: Er soll da sein, nicht locken.
   Bewusst KEIN Rot — Rot ist hier den Warnungen vorbehalten, und ein
   Rücktritt ist eine Absprache, kein Alarm. */
.chef-abgeben {
  display: block; width: 100%; margin-top: 12px; padding: 9px 12px;
  background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); cursor: pointer; font: inherit; font-size: 12px;
}
.chef-abgeben:disabled { opacity: .5; cursor: default; }
/* Chef ernennen (Verwaltungsraum) */
.chef-wahl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 6px; }
.chef-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
            background: var(--card-2); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
            padding: 9px 12px; color: var(--text); cursor: pointer; font-size: 14px; }
.chef-opt.on { border-color: var(--brand); background: var(--card); }
.chef-opt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Der Waehler zeigt zwei Gruppen: wer schon in der Familie ist, und wer in
   gar keiner steht. Ohne Zwischenzeile stuenden beide als eine Liste da. */
.chef-gruppe { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
               color: var(--muted-2); margin: 10px 2px 2px; }
.chef-neu { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--muted);
            background: var(--bg-2); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
#fa-chef-suche { margin-top: 6px; }
/* Wer fuehrt die Familie? Stand auf der Uebersichtskarte nirgends. */
.fa-chefzeile { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.fa-krone { border-color: rgba(212,175,55,.45); }

/* ══════════════════════════════════════════════════════════════════
   🩺 SYSTEMWACHT — Kaputtes zuerst, Grünes zuletzt
   ══════════════════════════════════════════════════════════════════ */
.wz-fazit { border-radius: var(--radius); padding: 14px 16px; font-size: 16px; font-weight: 800;
            text-align: center; margin-bottom: 12px; }
.wz-fazit.gut { background: rgba(46,212,122,.12); color: var(--ok); }
.wz-fazit.warn { background: rgba(255,176,32,.12); color: var(--warn); }
.wz-fazit.bad { background: rgba(255,90,90,.14); color: var(--danger); }
.wz-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.wz-liste { display: grid; gap: 8px; }
.wz-karte { background: var(--card); border: 1px solid var(--line); border-left-width: 4px;
            border-radius: var(--radius-sm); padding: 11px 13px; }
.wz-karte.wz-ok { border-left-color: var(--ok); }
.wz-karte.wz-warn { border-left-color: var(--warn); }
.wz-karte.wz-bad { border-left-color: var(--danger); }
.wz-karte.wz-unk { border-left-color: var(--muted-2); }
.wz-kopf { display: flex; align-items: center; gap: 8px; }
.wz-kopf b { flex: 1; font-size: 14.5px; }
.wz-ic { font-size: 16px; }
.wz-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
          color: var(--muted-2); }
.wz-karte.wz-bad .wz-tag { color: var(--danger); }
.wz-karte.wz-warn .wz-tag { color: var(--warn); }
.wz-satz { font-size: 13px; color: var(--text); opacity: .9; margin-top: 5px; line-height: 1.5; }
.wz-tun { margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-sm);
          background: rgba(255,255,255,.04); font-size: 12.5px; line-height: 1.55;
          white-space: pre-line; }
.wz-detail { margin-top: 6px; font-size: 11.5px; color: var(--muted-2); line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════════
   🧼 WORTFILTER
   ══════════════════════════════════════════════════════════════════ */
.wf-zeile { display: flex; align-items: center; gap: 10px; padding: 9px 2px;
            border-bottom: 1px solid var(--line-soft); }
.wf-zeile:last-child { border-bottom: 0; }
.wf-zeile.aus { opacity: .45; }
.wf-mid { flex: 1; min-width: 0; }
.wf-mid b { font-size: 14px; margin-right: 8px; }
.wf-tag { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 7px;
          border-radius: 999px; background: rgba(255,255,255,.07); color: var(--muted-2); }
.wf-tag.stop { background: rgba(255,90,90,.16); color: var(--danger); }
.wf-tag.melde { background: rgba(255,176,32,.16); color: var(--warn); }
.wf-treffer { font-size: 12px; color: var(--muted-2); font-weight: 700; white-space: nowrap; }
.wf-probe-out { min-height: 20px; font-size: 13px; }
.wf-treffer-ja { color: var(--warn); font-weight: 700; }
.wf-treffer-nein { color: var(--ok); font-weight: 700; }
.wf-stufen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 6px; }
.wf-stufe { text-align: left; background: var(--card-2); border: 1.5px solid var(--line);
            border-radius: var(--radius-sm); padding: 10px 12px; color: var(--text); cursor: pointer; }
.wf-stufe b { display: block; font-size: 14px; margin-bottom: 2px; }
.wf-stufe span { font-size: 12px; color: var(--muted); line-height: 1.45; }
.wf-stufe.on { border-color: var(--brand); background: var(--card); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ── 📊 Deine Zahlen ─────────────────────────────────────────────── */
/* ⚠️ „Das klebt irgendwie aneinander." — stimmte.
   14 px Rand, 12 px zwischen den Abschnitten und ein Hinweis darunter mit
   margin-top:0: Karte und Text stiessen ohne Zwischenraum aneinander, und
   innen lag alles dicht an dicht. Zahlen brauchen Luft, sonst liest man
   sie als Block statt als einzelne Angaben. */
.st-karte { padding: 18px 16px; }
.st-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.st-titel { font-size: 15px; font-weight: 800; }
.st-fam { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
          border: 1px solid var(--fam-farbe); color: var(--fam-farbe);
          border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.st-fam img { width: 16px; height: 16px; border-radius: 4px; object-fit: cover; }
.st-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-top: 16px;
  /* Alle Reihen gleich hoch. Ohne das richtet sich jede Reihe nach ihrer
     längsten Beschriftung — „Beiträge & Kommentare" bricht zweizeilig um,
     und die Kacheln stehen stufig untereinander. */
  grid-auto-rows: 1fr; }
.st-kachel { background: var(--card-2); border-radius: var(--radius-sm); padding: 13px 9px;
             display: grid; justify-items: center; gap: 3px; text-align: center;
             /* Gleich hohe Kacheln, auch wenn eine Beschriftung zweizeilig
                wird („Beiträge & Kommentare"). Sonst steht eine Reihe
                stufig da. */
             align-content: start; min-height: 92px; }
.st-ic { font-size: 17px; }
.st-kachel b { font-size: 17px; font-weight: 800; line-height: 1.2; }
.st-kachel span:last-child { font-size: 11px; color: var(--muted-2); line-height: 1.25; }
.st-wochen { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.st-wochen-kopf { font-size: 12.5px; font-weight: 700; margin-bottom: 12px; }
.st-balken { display: flex; align-items: flex-end; gap: 5px; height: 70px; }
.st-b { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end;
        align-items: center; height: 100%; gap: 4px; }
.st-b i { width: 100%; max-width: 20px; border-radius: 4px 4px 2px 2px;
          background: var(--grad); height: var(--h); min-height: 3px; display: block; }
/* Eine Woche ohne einen einzigen Tag: der Strich bleibt, aber blass.
   Er sagt „hier war nichts", statt so zu tun, als gäbe es die Woche nicht. */
.st-b.leer i { background: var(--line); opacity: .75; }
.st-b em { font-style: normal; font-size: 9.5px; color: var(--muted-2); }
.st-fuss { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft);
           color: var(--muted-2); font-size: 12px; line-height: 1.55; }

/* ══════════════════════════════════════════════════════════════════
   👪 FAMILIEN-KARTEN: mehr Luft
   ──────────────────────────────────────────────────────────────────
   Die Karten wirkten gequetscht: 14 px Rand, 11 px je Person, der Verlauf
   klebte am Rahmen. Auf einem Handy ist eine Liste mit engen Zeilen keine
   Liste, sondern eine Wand. Hier steht deshalb bewusst mehr Weißraum —
   die Werte überschreiben die knapperen von oben.
   ══════════════════════════════════════════════════════════════════ */
.fa-card { margin-bottom: 14px; }
.fa-head { padding: 18px 18px 16px; gap: 15px; align-items: flex-start; }
.fa-head .fa-em { width: 58px; height: 58px; border-radius: 16px; }
.fa-meta b { font-size: 17px; line-height: 1.3; }
.fa-beschr { margin: 4px 0 6px; line-height: 1.45; }
.fa-cnt { display: block; margin-top: 2px; }
.fa-person { padding: 14px 18px; gap: 10px; }
.fa-pname { font-size: 15px; }
.fa-empty { padding: 18px; }
/* Der Verlauf bekommt eigenen Rand statt am Rahmen zu kleben. */
.zu-box { margin: 0; padding: 14px 18px 16px; border-top: 1px solid var(--line-soft); }
.zu-box summary { padding: 2px 0; }
.zu-liste { margin-top: 12px; }
.zu-zeile { padding: 6px 0; }
/* Der Zahnrad-Knopf saß bündig am Text — er braucht Abstand und Fläche. */
.fa-head > .btn { margin-left: 4px; min-width: 40px; min-height: 40px; }

/* 👑 Das Angebot, eine Familie zu führen — auf #/familie, in der normalen App. */
.chef-angebot { --fam-farbe: var(--brand); border-color: var(--fam-farbe); padding: 18px; margin-bottom: 14px; }
.ca-kopf { display: flex; align-items: center; gap: 14px; }
.ca-bild { width: 56px; height: 56px; border-radius: 15px; overflow: hidden; flex: 0 0 auto;
           display: grid; place-items: center; background: rgba(255,255,255,.05); }
.ca-rolle { display: block; font-size: 11px; font-weight: 800; letter-spacing: .8px;
            text-transform: uppercase; color: var(--fam-farbe); margin-bottom: 2px; }
.ca-kopf b { font-size: 16.5px; line-height: 1.3; }
.ca-text { margin-top: 12px; font-size: 13.5px; line-height: 1.6; }
.ca-text.muted { color: var(--muted); font-size: 12.5px; }
.chef-wartet { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--warn);
               background: rgba(255,176,32,.14); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }

/* Prüfrunden-Verlauf und Zugangsliste in der Systemwacht. */
.wz-runden { display: grid; gap: 3px; }
.wz-runde { display: flex; align-items: baseline; gap: 8px; font-size: 12px; padding: 4px 0;
            border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.wz-runde:last-child { border-bottom: 0; }
.wz-r-ic { width: 16px; flex: 0 0 auto; }
.wz-r-zeit { color: var(--muted-2); min-width: 92px; }
.wz-r-was { flex: 1; min-width: 0; color: var(--muted); }
.wz-runde.bad .wz-r-was { color: var(--danger); }
.wz-runde.warn .wz-r-was { color: var(--warn); }
.cz-zeile { display: flex; align-items: center; gap: 10px; padding: 10px 2px;
            border-bottom: 1px solid var(--line-soft); }
.cz-zeile:last-child { border-bottom: 0; }
.cz-zeile.aus { opacity: .45; }
.cz-art { font-size: 17px; }
.cz-mid { flex: 1; min-width: 0; }
.cz-mid b { font-size: 14px; }
.cz-neu { margin-top: 10px; }

/* ── Antworten in Privatnachrichten ────────────────────────────────────
   Das Zitat ist antippbar: Es springt zur zitierten Nachricht und lässt
   sie kurz aufleuchten. Ohne das muss man selbst suchen, worauf sich
   eine Antwort bezieht — und genau dann gibt man es auf. */
.dm-zitat { cursor: pointer; }
.dm-zitat:active { opacity: .7; }
@keyframes msg-blitz {
  0%, 100% { box-shadow: none; }
  25%, 65% { box-shadow: 0 0 0 3px rgba(177,75,255,.55); }
}
.msg-blitz .bubble { animation: msg-blitz 1.2s ease-in-out; border-radius: 16px; }
@media (prefers-reduced-motion: reduce) { .msg-blitz .bubble { animation: none; } }

/* ── Der Beitrag hebt ab ───────────────────────────────────────────────
   Zwischen „Posten" gedrückt und dem Feed liegt eine gute halbe Sekunde
   Netz. Vorher passierte in dieser Zeit nichts, dann war das Fenster
   plötzlich zu — und man wusste nicht, ob es geklappt hat. Jetzt fliegt
   die Vorschaukarte nach oben aus dem Bild: derselbe Moment, nur sichtbar. */
@keyframes beitrag-fliegt {
  0%   { transform: none; opacity: 1; }
  30%  { transform: scale(.97); opacity: 1; }
  100% { transform: translateY(-62vh) scale(.84) rotate(-2deg); opacity: 0; }
}
.sf-v-karte .card.fliegt, .sf-textwrap.fliegt {
  animation: beitrag-fliegt .38s cubic-bezier(.45,0,.55,1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .sf-v-karte .card.fliegt, .sf-textwrap.fliegt { animation: none; opacity: 0; }
}

/* ── Ältere Nachrichten werden geholt ──────────────────────────────────
   Ein Punkt oben im Chat, während nachgeladen wird — und danach, wenn
   nichts mehr kommt, eine Zeile, die das sagt. Ohne sie scrollt man
   immer wieder nach oben und wartet auf etwas, das nicht mehr kommt. */
.ch-mehr {
  text-align: center; padding: 12px 0 6px; color: var(--muted-2);
  font-size: 20px; letter-spacing: .18em; line-height: 1;
  animation: ch-mehr-puls 1.1s ease-in-out infinite;
}
@keyframes ch-mehr-puls { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
.ch-anfang {
  text-align: center; padding: 14px 12px 10px; color: var(--muted-2);
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) { .ch-mehr { animation: none; opacity: .6; } }

/* ── Was andere zum Bild sagen ─────────────────────────────────────────
   Das Blatt liegt ÜBER dem Bild, nicht neben ihm: Auf einem Telefon gibt
   es kein „neben". Es nimmt die untere Hälfte und lässt das Bild oben
   stehen — man sieht beim Schreiben noch, worüber man schreibt. */
.bs-reden {
  margin-left: auto; margin-right: 6px; flex: none;
  height: 34px; padding: 0 13px; border-radius: 17px; border: 0;
  background: rgba(255,255,255,.14); color: #fff; font: inherit;
  font-size: 13.5px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 5px;
}
.bs-rn:empty { display: none; }
.bs-reden-blatt {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  max-height: 62%; display: flex; flex-direction: column;
  background: var(--card); border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  padding: 0 0 calc(var(--safe-bottom) + 8px);
  box-shadow: 0 -18px 50px -20px rgba(0,0,0,.9);
  animation: bs-blatt-auf .2s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes bs-blatt-auf { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.bs-rb-kopf {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px 9px; font-size: 14px; border-bottom: 1px solid var(--line-soft);
}
.bs-rb-x { background: none; border: 0; color: var(--muted); font-size: 16px; cursor: pointer; padding: 2px 4px; }
.bs-rb-liste { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 14px; }
.bs-k { display: flex; gap: 9px; padding: 7px 0; align-items: flex-start; }
.bs-k .avatar.sm { width: 30px; height: 30px; font-size: 12px; flex: 0 0 auto; }
.bs-k-txt { min-width: 0; flex: 1; }
.bs-k-n { font-size: 13px; font-weight: 700; }
.bs-k-n a { color: inherit; text-decoration: none; }
.bs-k-t { font-weight: 500; font-size: 11.5px; color: var(--muted-2); margin-left: 6px; }
.bs-k-b { font-size: 14.5px; line-height: 1.4; word-break: break-word; }
.bs-k-weg { background: none; border: 0; color: var(--muted-2); cursor: pointer; font-size: 13px; flex: none; }
.bs-k-leer { text-align: center; color: var(--muted-2); font-size: 13px; padding: 18px 0; }
.bs-rb-schreib { flex: none; display: flex; gap: 8px; padding: 9px 14px 4px; position: relative; }
.bs-rb-feld {
  flex: 1; min-width: 0; height: 42px; border-radius: 12px; padding: 0 13px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  font: inherit; font-size: 15px; outline: none;
}
.bs-rb-feld:focus { border-color: var(--brand); }
/* Während das Blatt offen ist, rückt das Bild nach oben — sonst liegt das
   Blatt auf genau dem Teil, über den gerade geschrieben wird. */
.bildschau.redet .bs-buehne { align-items: start; padding-bottom: 56%; }
.bildschau.redet .bs-fuss { display: none; }
/* Die Kachel sagt, dass darunter geredet wird. */
.gal-im { position: relative; }
.gal-k {
  position: absolute; left: 6px; bottom: 6px; z-index: 2;
  font-size: 11px; font-weight: 700; color: #fff;
  background: rgba(0,0,0,.55); border-radius: 999px; padding: 2px 7px;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .bs-reden-blatt { animation: none; } }

/* ── 🎟️ Einladecodes der Familienchefin ───────────────────────────────
   Die Nummer ist groß und antippbar: Sie wird weitergegeben, also muss
   man sie in einem Zug kopieren können — nicht markieren und zielen. */
.chef-codes { margin-top: 10px; }
.chef-code {
  border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px;
  margin-top: 8px; background: var(--bg-2);
}
.chef-code.zu { opacity: .58; }
.cc-kopf { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cc-nr {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 19px; font-weight: 800; letter-spacing: .16em;
  background: none; border: 0; color: var(--text); cursor: pointer; padding: 0;
}
.chef-code.offen .cc-nr { color: var(--brand-2); }
.cc-z { font-size: 11.5px; font-weight: 700; color: var(--muted); }
/* 📤 Weitergeben steht VOR dem Zurückziehen und nimmt den Abstand nach
   rechts. Es ist die Handlung, für die der Code überhaupt da ist — deshalb
   in der Markenfarbe, während „Zurückziehen" grau bleibt. */
.cc-teil {
  margin-left: auto; background: none; border: 1px solid var(--brand);
  border-radius: 999px; padding: 3px 11px; font: inherit; font-size: 11.5px;
  font-weight: 700; color: var(--brand-2); cursor: pointer;
}
/* Ohne diese Zeile teilen sich ZWEI auto-Ränder den freien Platz und
   reißen die Zeile auseinander. */
.cc-teil ~ .cc-weg { margin-left: 0; }
.cc-weg {
  margin-left: auto; background: none; border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 10px; font-size: 11.5px;
  color: var(--muted); cursor: pointer; font: inherit; font-size: 11.5px;
}
.cc-meta { font-size: 12px; color: var(--muted-2); margin-top: 4px; }
.cc-wer { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.cc-w {
  font-size: 11.5px; background: var(--card-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 9px;
}
.cc-w i { color: var(--muted-2); font-style: normal; margin-left: 4px; }

/* ══ 🎤 Sprachnachricht ════════════════════════════════════════════════
   Die Striche sind ein Fortschrittsbalken, solange die echte Wellenform
   noch nicht gerechnet ist (das passiert beim ersten Abspielen). Deshalb
   stehen sie erst alle gleich hoch: Sie behaupten nichts, was sie noch
   nicht wissen. */
.ton {
  --ton-p: 0;
  display: flex; align-items: center; gap: 10px;
  margin-top: 5px; max-width: 270px; min-width: 190px;
}
.ton-ab {
  flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: var(--grad); color: var(--on-brand); cursor: pointer;
  font-size: 13px; line-height: 1; display: grid; place-items: center;
  box-shadow: 0 6px 16px -8px var(--brand-glow);
}
.ton.laedt .ton-ab { opacity: .6; }
.ton-mitte { flex: 1; min-width: 0; }
.ton-welle {
  position: relative; height: 26px; cursor: pointer; touch-action: none;
}
.ton-reihe {
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: 2px;
}
.ton-reihe i {
  flex: 1; min-width: 0; border-radius: 2px;
  height: calc(4px + var(--h, .38) * 22px);
  background: var(--muted-2); opacity: .55;
}
/* Der abgespielte Teil ist DIESELBE Welle, nur beschnitten. Ein Rechteck
   darüber hätte die Striche verdeckt, statt sie zu färben. */
.ton-voll {
  -webkit-clip-path: inset(0 calc((1 - var(--ton-p, 0)) * 100%) 0 0);
  clip-path: inset(0 calc((1 - var(--ton-p, 0)) * 100%) 0 0);
}
.ton-voll i { background: var(--brand-2); opacity: 1; }
/* Kann der Browser nicht beschneiden, läge die farbige Reihe IMMER voll
   da — das sähe aus, als sei alles schon gehört. Dann lieber weg. */
@supports not (clip-path: inset(0 10% 0 0)) { .ton-voll { display: none; } }
.ton-fuss {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 3px;
}
.ton-zeit { font-size: 11.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.ton-tempo {
  background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font: inherit; font-size: 10.5px; font-weight: 800;
  padding: 1px 7px; cursor: pointer; line-height: 1.5;
}
.ton.spielt .ton-tempo { border-color: var(--brand); color: var(--brand-2); }
/* In der eigenen (farbigen) Blase muss der Ton hell bleiben. */
.msg.mine .ton-welle i { background: rgba(255,255,255,.55); }
.msg.mine .ton-zeit { color: rgba(255,255,255,.8); }
.msg.mine .ton-tempo { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.35); }
.msg.mine .ton-ab { background: rgba(255,255,255,.22); color: #fff; box-shadow: none; }
.msg.mine .ton-voll i { background: #fff; opacity: .95; }
.msg .ton { max-width: 230px; }

/* Woher jemand kommt: Der Code steht an der Karte, damit die Chefin sieht,
   dass DIESE Person über IHREN Zettel hereingekommen ist. */
.chef-antrag.neu { border-color: rgba(55,224,200,.4); }
.chef-code-herkunft {
  margin-top: 7px; font-size: 12px; color: var(--muted);
  background: var(--bg-2); border-radius: 9px; padding: 6px 9px;
}
.chef-code-herkunft b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .1em; color: var(--accent);
}
.chef-offen { color: var(--accent); }

/* ── Das Ende des Feeds ────────────────────────────────────────────────
   Ein Feed, der einfach aufhört, fühlt sich an wie ein Ladefehler — man
   scrollt weiter und wartet auf etwas. Hier steht, dass Schluss ist, und
   dass das in Ordnung ist. Das ist kein Deko-Element: Ein sichtbarer
   Schlusspunkt ist der Unterschied zwischen „ich bin durch" und „ich
   sollte mal wieder nachsehen". */
.feed-ende {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-align: center; padding: 28px 20px calc(var(--safe-bottom) + 92px);
  color: var(--muted-2);
}
.fe-haken {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 3px;
  background: rgba(46,212,122,.14); color: var(--ok);
  font-size: 16px; font-weight: 800;
}
.feed-ende b { color: var(--muted); font-size: 14px; }
.feed-ende span:last-child { font-size: 12.5px; max-width: 260px; line-height: 1.45; }

/* ── 🎁 Prämien & Post ─────────────────────────────────────────────────
   Die Erklärung steht ÜBER dem Formular, nicht darunter. Nach einer
   Wohnanschrift fragt man nicht beiläufig. */
.praemie-karte .pr-kopf { display: flex; align-items: center; gap: 11px; }
.pr-ic { font-size: 26px; line-height: 1; }
.pr-text { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.pr-text p { margin: 0 0 9px; }
.pr-text p:last-child { margin-bottom: 0; }
.pr-regeln { list-style: none; margin: 13px 0 0; padding: 0; display: grid; gap: 8px; }
.pr-regeln li {
  font-size: 13px; line-height: 1.45; color: var(--muted);
  background: var(--bg-2); border-radius: 11px; padding: 9px 11px;
}
.pr-regeln b { color: var(--text); }
.pr-steht {
  margin-top: 13px; padding: 12px 14px; border-radius: 13px;
  background: var(--bg-2); border: 1px solid var(--line);
  font-size: 14.5px; line-height: 1.5;
}
.pr-zeile { white-space: pre-wrap; word-break: break-word; }
.pr-blick {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px;
}
.pr-blick:last-child { border-bottom: 0; }
.feld-reihe { display: flex; gap: 9px; }
.feld-reihe .feld { min-width: 0; }

/* Eine Sendung. Unterwegs ist sie warm, angekommen ist sie ruhig. */
.sendung {
  border: 1px solid var(--line); border-radius: 15px; padding: 13px 14px;
  background: var(--card);
}
.sendung:not(.da) { border-color: rgba(177,75,255,.45); box-shadow: 0 10px 28px -18px var(--brand-glow); }
.sendung.da { opacity: .78; }
.sd-kopf { display: flex; align-items: center; gap: 11px; }
.sd-ic { font-size: 24px; line-height: 1; }
.sd-mid { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sd-notiz { margin-top: 9px; font-size: 14px; line-height: 1.45; color: var(--text); font-style: italic; }
.sd-nr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.sd-kopier {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 4px 9px; color: var(--text); cursor: pointer;
}

/* ── Schreibfenster auf grossen Bildschirmen ───────────────────────────
   Am Telefon gehoert „Posten" an den unteren Rand: Dort liegt der Daumen,
   und das Textfeld soll im Daumenbogen sitzen. Auf einem breiten oder
   hohen Bildschirm ergibt dasselbe Layout ein Loch von mehreren hundert
   Pixeln zwischen Werkzeugleiste und Knopf — man sucht den Knopf am
   anderen Ende des Bildes.

   Mit Maus und Zeiger folgt der Knopf deshalb dem Inhalt, statt unten zu
   kleben. Die Abfrage geht ueber den ZEIGER, nicht ueber die Breite: Ein
   Telefon quer ist breit und trotzdem ein Telefon. */
@media (hover: hover) and (pointer: fine) {
  .sf-flaeche { justify-content: flex-start; }
  .sf-rumpf { flex: 0 1 auto; }
  .sf-rumpf::before { display: none; }   /* der Abstandhalter oben entfaellt */
  .sf-los { max-width: 320px; margin-left: 12px; margin-right: auto; }
}

/* ── 🚪 Wenn etwas nicht lädt ──────────────────────────────────────────
   Vorher stand hier „Konnte nicht laden." und sonst nichts — kein Grund,
   kein Knopf, kein Weg zurück. Ein Zimmer ohne Klinke.
   Jetzt: was los ist, und eine Hand zum Nochmal-Versuchen. */
.ladefehler {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  text-align: center; padding: 42px 24px; color: var(--muted-2);
}
.lf-ic { font-size: 40px; line-height: 1; margin-bottom: 4px; }
.ladefehler b { color: var(--text); font-size: 16px; }
.ladefehler span { font-size: 13.5px; line-height: 1.5; max-width: 270px; }
.ladefehler .btn { margin-top: 10px; min-width: 170px; }

/* Ein Ausgang aus dem leeren Bildschirm. Nur dort, wo man aus Versehen
   gelandet ist (alter Link, gelöschtes Konto) — nicht bei „noch keine
   Beiträge": Da ist nichts kaputt, da ist man einfach die erste Person. */
.empty-weg { margin-top: 14px; display: inline-flex; }

/* Das Angebot, eine Familie zu führen: Was die Aufgabe bedeutet, steht
   HIER — nicht als Privatnachricht von jemandem. Eine Systemnachricht
   hat keinen Absender; sonst sieht es aus, als hätte jemand persönlich
   geschrieben, und man antwortet ins Leere. */
.ca-liste { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.ca-liste li {
  font-size: 13.5px; line-height: 1.5; color: var(--muted);
  background: var(--bg-2); border-radius: 11px; padding: 10px 12px;
}
.ca-liste b { color: var(--text); }

/* ── „Wie dürfen wir dich ansprechen?" ────────────────────────────────
   Zwei grosse Flaechen statt eines Auswahlfeldes: Die Frage ist mit EINEM
   Tipp beantwortet, ohne Tastatur und ohne Aufklappen. Die Farben sind
   dieselben wie im Namens-Chip (.idchip.g-w / .g-m) — wer waehlt, sieht
   vorher, wie es danach neben seinem Namen aussehen wird. */
.gs-wahl{ display:flex; gap:10px; margin-top:14px; }
.gs-opt{
  flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:18px 10px; border-radius:16px; cursor:pointer;
  background:var(--bg-2); border:1px solid var(--line); color:var(--text);
  font:inherit; font-size:14px; font-weight:700;
  transition:border-color .16s ease, background .16s ease, transform .12s ease;
}
.gs-ic{ font-size:30px; line-height:1; }
.gs-opt[data-gs="w"] .gs-ic{ color:#FF6FB0; }
.gs-opt[data-gs="m"] .gs-ic{ color:#3AA0FF; }
.gs-opt:active{ transform:scale(.96); }
.gs-opt:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.gs-opt[data-gs="w"].an{ background:linear-gradient(135deg,#FF6FB0,#E0489A); border-color:transparent; color:#fff; }
.gs-opt[data-gs="m"].an{ background:linear-gradient(135deg,#3AA0FF,#2C6FE0); border-color:transparent; color:#fff; }
.gs-opt.an .gs-ic{ color:#fff; }
.gs-opt:disabled{ cursor:default; }

/* ── ⌚ Uhr verbinden ──────────────────────────────────────────────────
   Die Zahl ist das Einzige, worauf es hier ankommt: Sie wird von einem
   Display auf ein anderes abgetippt, oft mit ausgestrecktem Arm. Deshalb
   gross, in Zweiergruppen und mit Ziffern gleicher Breite — sonst wandert
   die Zahl beim Herunterzaehlen hin und her. */
.uhr-code{
  margin-top:14px; padding:18px 10px; border-radius:16px; text-align:center;
  background:var(--bg-2); border:1px solid var(--line);
  font-size:34px; font-weight:800; letter-spacing:.10em;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}
.uhr-code.alt{ opacity:.38; text-decoration:line-through; }
.uhr-rest{ text-align:center; margin-top:7px; font-variant-numeric:tabular-nums; }
.uhr-was{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:9px; }
.uhr-was li{ font-size:13px; line-height:1.5; color:var(--muted); }
.uhr-was b{ color:var(--text); font-weight:700; }
.uhr-zeile{
  display:flex; align-items:center; gap:10px; padding:9px 0;
  border-bottom:1px solid var(--line-soft);
}
.uhr-zeile:last-child{ border-bottom:0; }
.uhr-ic{ font-size:19px; flex:none; }
.uhr-name{ flex:1 1 auto; min-width:0; font-size:13.5px; font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.uhr-name .muted{ font-weight:400; }

/* Der Teilen-Knopf im Livestream-Kanal: Er ist der Grund, warum es diesen
   Kanal gibt — also darf er aussehen wie etwas, das man antippt, und nicht
   wie noch ein graues Zeichen neben dem Mikrofon. */
.ch-live-b{
  color:#FF4D6D;
  animation:chLivePuls 2.6s ease-in-out infinite;
}
@keyframes chLivePuls{
  0%,100%{ transform:scale(1);   filter:drop-shadow(0 0 0 rgba(255,77,109,0)); }
  50%    { transform:scale(1.13);filter:drop-shadow(0 0 5px rgba(255,77,109,.65)); }
}
@media (prefers-reduced-motion: reduce){ .ch-live-b{ animation:none; } }

/* „Wessen Stream ist das?" — zwei Flächen statt eines Häkchens.
   Die Antwort entscheidet, ob jemand als live gilt; sie darf deshalb
   nicht als kleines Kästchen unter dem Feld verschwinden. */
.lc-wer{ display:flex; gap:8px; margin:12px 0 4px; }
.lc-opt{
  flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:12px 8px; border-radius:13px; cursor:pointer;
  background:var(--bg-2); border:1px solid var(--line); color:var(--muted);
  font:inherit; font-size:12.5px; font-weight:700; text-align:center;
  transition:border-color .16s ease, background .16s ease, color .16s ease, transform .12s ease;
}
.lc-ic{ font-size:20px; line-height:1; }
.lc-opt:active{ transform:scale(.96); }
.lc-opt:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.lc-opt.an{ background:var(--grad); border-color:transparent; color:var(--on-brand); }

/* Der Weg ins Familienhandbuch, direkt aus dem Angebot heraus.
   Wer entscheiden soll, ob er eine Familie führt, muss vorher lesen
   können, was das heißt — und darf dafür nicht suchen müssen. */
.ca-buch{
  display:block; margin-top:12px; padding:11px 13px; border-radius:12px;
  background:var(--bg-2); border:1px solid var(--line);
  color:var(--text); text-decoration:none; font-size:13.5px; font-weight:700;
  transition:border-color .16s ease, background .16s ease;
}
.ca-buch:active{ transform:scale(.98); }

/* „Ist das Angebot angekommen?" — Klartext statt Schweigen.
   Ein Angebot, das ungelesen in einer Glocke liegt, sieht von außen aus
   wie eines, das nie verschickt wurde. Diese Kachel sagt den Unterschied. */
.angebot-stand{
  margin-top:11px; padding:12px 13px; border-radius:13px;
  background:var(--bg-2); border:1px solid var(--line);
}
.as-kopf{ font-size:13px; font-weight:800; margin-bottom:8px; }
.as-liste{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.as-liste li{ font-size:12.5px; line-height:1.5; color:var(--muted); }
.as-liste b{ color:var(--text); font-weight:700; }
/* Rot bleibt der Warnung vorbehalten — „nicht erreichbar" IST eine. */
.as-liste li.as-warn b{ color:var(--danger); }
.as-liste li.as-ok b{ color:var(--ok); }

/* Anstupsen: nur bei denen, die man gar nicht erreicht. */
.er-stups{ flex:none; padding:4px 9px; margin-left:6px; }

/* „Du gehörst zu keiner Familie mehr" — eine Tür mit Griff, kein Schlusswort.
   Bewusst ohne Rot: Das ist kein Fehler und keine Warnung, sondern ein
   Zustand, aus dem es einen Weg heraus gibt. */
.of-screen{ max-width:420px; margin:0 auto; padding:38px 22px; text-align:center; }
.of-ic{ font-size:46px; line-height:1; margin-bottom:12px; }
.of-screen h1{ font-size:21px; font-weight:800; margin:0 0 10px; }
.of-screen p{ font-size:13.5px; line-height:1.6; color:var(--muted); margin:0 0 18px; }
.of-box{
  padding:16px; border-radius:16px; text-align:left;
  background:var(--bg-2); border:1px solid var(--line);
}
.of-box b{ font-size:14px; }

/* Die Mitgliederliste der Chefin. */
.chef-leute{ display:grid; gap:2px; margin-top:6px; }
.chef-person{
  display:flex; align-items:center; gap:10px; padding:8px 0;
  border-bottom:1px solid var(--line-soft);
}
.chef-person:last-child{ border-bottom:0; }
.cp-bild{ flex:none; }
.cp-name{ flex:1 1 auto; min-width:0; font-size:13.5px; font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-name .muted{ font-weight:400; display:block; }
.cp-on{ display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--ok); vertical-align:middle; margin-left:3px; }
.of-schritte{ margin:10px 0 0; padding-left:20px; display:grid; gap:7px; }
.of-schritte li{ font-size:13px; line-height:1.55; color:var(--muted); }
.of-schritte b{ color:var(--text); }
.of-fuss{ margin-top:14px; font-size:12px; color:var(--muted); }

/* 🔁 Familienwechsel: Woher jemand kommt, wohin jemand will.
   Die Zeile steht ÜBER den Knöpfen, nicht darunter — wer bürgt, soll es
   gelesen haben, bevor er tippt. */
.ca-herkunft{
  margin-top:8px; padding:7px 10px; border-radius:9px;
  font-size:12px; line-height:1.5; color:var(--muted);
  /* Erst der einfache Wert, dann der gemischte: `color-mix()` mit `var()`
     ist auf WebKit vor 16.2 ungueltig — die Zeile wird dort verworfen und
     die davor gilt. Genau so macht es der Rest dieser Datei. */
  background:rgba(177,75,255,.11);
  background:color-mix(in srgb, var(--brand) 11%, transparent);
  border:1px solid rgba(177,75,255,.26);
  border:1px solid color-mix(in srgb, var(--brand) 26%, transparent);
}
.ca-herkunft b{ color:var(--text); font-weight:700; }
.ca-frei{ color:var(--ok) !important; }
.chef-antrag.wechsel{ border-left:3px solid var(--brand); }

/* „Du verlässt damit X" — steht ÜBER dem Textfeld, nicht darunter.
   Wer einen Wechsel beantragt, soll die Folge gelesen haben, bevor er
   schreibt. Kein Rot: Das ist kein Fehler, sondern eine Bedingung. */
.fa-wechsel{
  margin-top:12px; padding:11px 13px; border-radius:12px;
  font-size:12.5px; line-height:1.55; color:var(--muted);
  background:rgba(177,75,255,.11);
  background:color-mix(in srgb, var(--brand) 11%, transparent);
  border:1px solid rgba(177,75,255,.26);
  border:1px solid color-mix(in srgb, var(--brand) 26%, transparent);
}
.fa-wechsel b{ color:var(--text); display:block; margin-bottom:4px; font-size:13.5px; }

/* Der Entfernen-Knopf in der Mitgliederliste des Verwaltungsraums.
   Unauffällig, bis man ihn braucht — er ist die harte Fassung. */
.fa-raus{ flex:none; margin-left:auto; padding:2px 8px; opacity:.45; }
.fa-person:hover .fa-raus,
.fa-raus:focus-visible{ opacity:1; }

/* ── „Einen Moment …" — der Server startet gerade neu ──────────────────
   Beim Ausrollen ist er ein paar Sekunden weg. Frueher landete man dann im
   Anmeldeformular, obwohl der Ausweis gueltig war; beim erneuten Anmelden
   flog wegen der Zwei-Geraete-Grenze woanders eine Sitzung raus. Jetzt
   steht hier ein ruhiger Satz und die App holt sich selbst zurueck.
   Bewusst KEIN Rot: Das ist eine Wartezeit, keine Warnung. */
.server-warte {
  min-height: 70dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  gap: 10px; padding: 32px 22px; max-width: 420px; margin: 0 auto;
}
.server-warte .sw-acht { transform: scale(.85); opacity: .9; }
.server-warte h2 { margin: 4px 0 0; font-size: 20px; }
.server-warte p { margin: 0; color: var(--muted-2, #9A93B5); font-size: 14.5px; line-height: 1.55; }
.server-warte .btn { margin-top: 12px; }

/* ═══════════════════════════════════════════════════════════════════
   🎁 Geschenke & ∞-Ringe (Migration 160)
   ─────────────────────────────────────────────────────────────────
   Kein Rot, auch nicht im Feuerwerk: Rot ist den Warnungen vorbehalten.
   Das Gold ist das der Marke (4ever1.tv) und steht hier fest, weil ein
   Ring in jeder Farbwelt golden bleibt.
   ═══════════════════════════════════════════════════════════════════ */
:root { --ring-gold: #F0BE5A; --ring-gold-bg: rgba(240,190,90,.14); }

.gs-chip {
  appearance: none; border: 1px solid var(--line); background: var(--card-2); color: var(--muted);
  font: 700 13px/1 var(--font); padding: 9px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.gs-chip.on { background: var(--grad); border-color: transparent; color: var(--on-brand); }
.gs-chip:focus-visible, .gs-karte:focus-visible, .vt-stueck:focus-visible { outline: 2px solid var(--ring-gold); outline-offset: 2px; }

/* Das Bild eines Geschenks — mit ∞ auf Gold, solange es noch keins gibt. */
.gs-bild { position: relative; display: grid; place-items: center; width: 56px; height: 56px; flex: none; }
.gs-bild img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.gs-bild i { display: none; font-style: normal; }
.gs-bild.ohne { border-radius: 16px; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.18), transparent 60%), linear-gradient(135deg, #F0BE5A, #B8862F); }
.gs-bild.ohne i { display: block; font-size: 30px; font-weight: 900; color: #3A2A08; }
.gs-bild.gross { width: 120px; height: 120px; }
.gs-bild.gross.ohne { border-radius: 28px; }
.gs-bild.gross.ohne i { font-size: 64px; }
/* Das Zeichen (Emoji) statt des ∞: auf einer zarten Kachel in den Hausfarben,
   nicht auf Gold — das Emoji bringt seine eigenen Farben mit. */
.gs-bild.ohne.zeichen { border-radius: 16px; border: 1px solid rgba(240,190,90,.35);
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.16), transparent 62%),
              linear-gradient(135deg, rgba(177,75,255,.30), rgba(255,77,157,.22)); }
.gs-bild.ohne.zeichen i { font-size: 30px; font-weight: 400; color: inherit; line-height: 1; }
.gs-bild.gross.ohne.zeichen { border-radius: 28px; }
.gs-bild.gross.ohne.zeichen i { font-size: 66px; }
.vt-stueck .gs-bild.ohne.zeichen i { font-size: 21px; }
.vt-stueck .gs-bild.ohne { border-radius: 9px; }

/* Das Laden-Blatt */
.gs-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.gs-kopf h3 { margin: 0; }
.gs-stand { font-size: 13px; color: var(--muted); }
.gs-stand b { font-size: 20px; color: var(--ring-gold); font-variant-numeric: tabular-nums; }
.gs-stand em, .gs-preis em, .rgs-zahl em { font-style: normal; color: var(--ring-gold); margin-left: 2px; }
.gs-kats { display: flex; gap: 6px; overflow-x: auto; padding: 12px 0 4px; scrollbar-width: none; }
.gs-kats::-webkit-scrollbar { display: none; }
.gs-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 10px; }
.gs-karte {
  appearance: none; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
  padding: 12px 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--card-2);
  color: var(--text); cursor: pointer; font: inherit; font-size: 12.5px; line-height: 1.2;
  transition: transform .15s ease, border-color .15s ease;
}
.gs-karte:active { transform: scale(.96); }
.gs-karte { min-width: 0; }
/* „Freundschaftsbänder" ist länger als eine Kachel breit — trennen statt
   über den Rand ragen. hyphens braucht lang="de" (steht im html-Kopf). */
.gs-karte b { font-weight: 700; max-width: 100%; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.gs-karte.rar { border-color: rgba(240,190,90,.55); background: linear-gradient(180deg, var(--ring-gold-bg), var(--card-2)); }
.gs-karte.aus { opacity: .45; cursor: default; }
.gs-preis { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
.gs-rar { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; color: #2A1E04;
  background: var(--ring-gold); border-radius: 6px; padding: 2px 6px; font-variant-numeric: tabular-nums; }
.gs-rar.gross { font-size: 12px; padding: 4px 9px; margin-top: 6px; }
.gs-fuss { margin-top: 12px; text-align: center; }

.gs-auswahl { display: flex; align-items: center; gap: 14px; margin: 12px 0; }
.gs-auswahl h3 { margin: 0 0 3px; }
.gs-sicht { display: grid; gap: 6px; margin-bottom: 10px; }
.gs-s { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--card-2); cursor: pointer; }
.gs-s.on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.gs-s input { position: absolute; opacity: 0; pointer-events: none; }
.gs-s-ic { font-size: 20px; line-height: 1.2; }
.gs-s b { display: block; }
.gs-s .tiny { display: block; margin-top: 1px; }
.gs-rechnung { margin: 10px 0; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Auspacken */
.gs-paket { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 6px 0 4px; }
.gs-paket h3 { margin: 4px 0 0; }
.gs-paket .btn-row { width: 100%; justify-content: center; flex-wrap: wrap; }
.gs-schachtel span { display: block; font-size: 84px; line-height: 1; animation: gs-wackeln 1.6s ease-in-out infinite; }
@keyframes gs-wackeln { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-9deg); } 80% { transform: rotate(8deg); } 90% { transform: rotate(-4deg); } }
.gs-paket.offen .gs-bild { animation: gs-auf .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes gs-auf { from { transform: scale(.4) rotate(-8deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.gs-gruss { margin: 4px 0; padding: 10px 14px; border-left: 3px solid var(--ring-gold); background: var(--card-2);
  border-radius: 0 10px 10px 0; font-style: italic; text-align: left; max-width: 100%; }

/* Die Teilchen */
.gs-effekt { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.gs-effekt i { position: absolute; font-style: normal; }
.gs-konfetti i { top: -16px; left: var(--x); width: 8px; height: 13px; background: var(--h); border-radius: 2px;
  transform: rotate(var(--r)); animation: gs-fallen 2.6s var(--d) cubic-bezier(.25,.6,.5,1) forwards; }
@keyframes gs-fallen { to { transform: translate3d(0, 105vh, 0) rotate(calc(var(--r) + 540deg)); } }
.gs-herzen i { bottom: -40px; left: var(--x); font-size: 26px; animation: gs-steigen 2.8s var(--d) ease-out forwards; }
@keyframes gs-steigen { to { transform: translate3d(0, -110vh, 0) scale(1.3); opacity: 0; } }
.gs-feuerwerk i { width: 6px; height: 6px; border-radius: 50%; background: var(--h); opacity: 0;
  box-shadow: 0 0 8px var(--h); animation: gs-knall 1.5s var(--d) ease-out forwards; }
@keyframes gs-knall { 0% { opacity: 1; transform: translate3d(0,0,0) scale(1.4); }
  80% { opacity: .9; } 100% { opacity: 0; transform: translate3d(var(--dx), calc(var(--dy) + 40px), 0) scale(.6); } }
@media (prefers-reduced-motion: reduce) { .gs-effekt { display: none; } .gs-schachtel span { animation: none; } }

/* Die Vitrine im Profil */
.vt-regal { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.vt-stueck { appearance: none; position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 100%;
  border-radius: 11px; border: 1px solid var(--line); background: var(--card-2); cursor: pointer; padding: 3px; text-decoration: none; }
.vt-stueck .gs-bild { width: 100%; height: 100%; }
.vt-stueck.privat .gs-bild { background: var(--bg-2); border-radius: 12px; }
.vt-stueck.privat .gs-bild i { display: block; font-size: 22px; }
.vt-stueck.versteckt { opacity: .4; }
.vt-nr { position: absolute; right: 3px; bottom: 3px; font-size: 9.5px; font-weight: 800; color: #2A1E04;
  background: var(--ring-gold); border-radius: 5px; padding: 1px 4px; font-variant-numeric: tabular-nums; }

/* Meine Ringe & Geschenke */
.rgs-stand { text-align: center; }
.rgs-zahl { font-size: 44px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.rgs-stand .tiny { margin-top: 8px; max-width: 46ch; margin-inline: auto; }
.rgs-reiter { display: flex; gap: 6px; overflow-x: auto; margin: 14px 0 10px; scrollbar-width: none; }
.rgs-reiter::-webkit-scrollbar { display: none; }
.rgs-liste { padding-top: 4px; padding-bottom: 4px; }
.rgs-zeile { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--line); }
.rgs-zeile:last-child, .rgs-buch:last-child { border-bottom: none; }
.rgs-zeile.versteckt { opacity: .55; }
.rgs-mitte { flex: 1; min-width: 0; }
.rgs-gruss { margin: 3px 0; font-style: italic; color: var(--text); overflow-wrap: anywhere; }
.rgs-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.rgs-buch { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rgs-buch.versteckt { opacity: .5; }
.rgs-delta { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rgs-delta .tiny { display: block; font-weight: 500; }
.rgs-delta.plus { color: var(--ring-gold); }
.rgs-regel { margin: 8px 0; padding-left: 0; list-style: none; display: grid; gap: 6px; }

/* Kontrollraum */
.ag-feld { display: grid; gap: 4px; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.ag-feld .input { color: var(--text); }
.ag-art { display: grid; gap: 6px; margin: 4px 0 12px; }
.ag-pakete { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.ag-bl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ag-bl:last-child { border-bottom: none; }
.ag-bl .rgs-mitte { flex-basis: 160px; }
.ag-tage { width: 72px; }
.ag-target { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
/* Die allgemeine Regel macht jedes Eingabefeld 100 % breit — ein Häkchen
   stand dadurch mitten im Kasten, weit weg von seinem Text. */
.ag-target input[type="checkbox"] { width: auto; flex: none; margin: 2px 0 0; }
.ag-target:has(.tiny) { display: flex; align-items: flex-start; gap: 10px; }
.cl-stat .cl-num { font-variant-numeric: tabular-nums; }

/* ── Die Geschenke-Seite (#/geschenke/<name>): mittlere Größe ───────── */
.gs-bild.mittel { width: 88px; height: 88px; }
/* Mit echtem Bild (Migration 164) etwas größer: Die Canva-Bilder tragen
   Einzelheiten, die in 88/120 px verschwinden. Die Ersatz-Kachel mit dem
   Zeichen bleibt bei ihrer Größe. */
.gs-bild.mittel:not(.ohne) { width: 108px; height: 108px; }
.gs-bild.gross:not(.ohne) { width: 150px; height: 150px; }
.gs-bild.mittel.ohne { border-radius: 22px; }
.gs-bild.mittel.ohne i { font-size: 44px; }
.gs-bild.mittel.ohne.zeichen i { font-size: 46px; }
.gsz-liste { display: grid; gap: 12px; }
.gsz-karte { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--card); scroll-margin-top: calc(var(--topbar-h) + 16px); }
.gsz-karte.privat { align-items: center; }
.gsz-karte.privat .gs-bild i { display: block; }
.gsz-karte.versteckt { opacity: .6; }
.gsz-karte.fokus { border-color: var(--ring-gold); box-shadow: 0 0 0 1px var(--ring-gold) inset, 0 10px 30px -18px rgba(240,190,90,.6); }
.gsz-mitte { flex: 1; min-width: 0; display: grid; gap: 6px; }
.gsz-von { color: var(--muted); font-size: 14px; }
@media (max-width: 420px) { .gsz-karte { flex-direction: column; align-items: stretch; } }

/* Die gestaltete Botschaft — die Gästebuch-Karte, etwas kompakter */
.gs-botschaft { width: 100%; text-align: left; }
.gs-botschaft .gb-card { margin: 0; min-height: 0; }
.gs-paket .gs-botschaft { max-width: 420px; }

/* Der Gestalter im Laden */
.gs-bs { display: grid; gap: 8px; margin: 4px 0 6px; }
.gs-bs-kopf { font-size: 14px; }
.gs-bs-mehr summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--muted); padding: 4px 0; list-style: none; }
.gs-bs-mehr summary::-webkit-details-marker { display: none; }
.gs-bs-mehr[open] summary { color: var(--text); }

/* 🎬 Audition-Belege in der Akte (Reiter „Herkunft") */
.akb{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:10px}
.akb-feld{background:var(--bg-2);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.akb-titel{font-size:12.5px;font-weight:700;opacity:.8}
.akb-ausweis{display:block;border-radius:10px;overflow:hidden;background:#000;max-height:220px}
.akb-ausweis img{width:100%;max-height:220px;object-fit:contain;display:block}
.akb-video{width:100%;max-height:260px;border-radius:10px;background:#000}
.akb-unter{font-size:12px;opacity:.75}
.akb-leer{font-size:13px;padding:8px 0;color:var(--warn,#e0a200)}

/* 🗂️ Audition-Vermerke (Akte, Warteraum, Kontrollraum) */
.vm-eintrag{background:var(--bg-2);border-radius:12px;padding:10px 12px;margin-top:8px}
.vm-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.vm-grund{margin-top:6px;font-size:13.5px;white-space:pre-wrap;word-break:break-word}
.aud-rekonto{display:flex;gap:10px;align-items:flex-start;margin-top:10px;background:var(--bg-2);border-radius:12px;padding:10px 12px;font-size:13.5px}
.aud-rekonto input{margin-top:3px;flex:0 0 auto}
a.aud-bzahl,button.aud-bzahl{cursor:pointer;text-decoration:none;border:0;font:inherit}
.vm-suche{margin:10px 0}
.vm-suche input{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2);color:var(--text);font:inherit}

/* 🎬 Angeordnete Re-Audition — Kachel auf dem eigenen Profil */
.reaud-karte{margin-top:14px;background:linear-gradient(135deg,rgba(177,75,255,.18),rgba(255,77,157,.14));
  border:1px solid rgba(177,75,255,.45);border-radius:16px;padding:14px}
.reaud-kopf{font-size:16px;margin-bottom:4px}
.reaud-text{font-size:14px;opacity:.9}
.reaud-grund{margin-top:8px;background:var(--bg-2);border-radius:10px;padding:9px 11px;font-size:13.5px;white-space:pre-wrap}

/* Hier standen kurz feste Seitenmenüs für breite Bildschirme.
   Wieder entfernt am 25.09.2026 auf Wunsch des Inhabers: „Mit dem Menü
   gleichzeitig raus und wieder rein. Das war schon stylisch." Beide
   Hälften fahren also überall zusammen aus und wieder ein — das ist die
   Bewegung, die die App ausmacht. Die Zahlen an den Menüpunkten (.mz)
   bleiben, die hingen nicht daran. */ }
}

/* 🔢 Zahlen an Menüpunkten: wo etwas wartet, sieht man es vor dem Klicken. */
.edge-item .mz { margin-left: auto; flex: none; min-width: 20px; padding: 1px 7px;
  border-radius: 999px; background: var(--grad); color: var(--on-brand, #fff);
  font-size: 12px; font-weight: 800; line-height: 1.6; text-align: center;
  font-variant-numeric: tabular-nums; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
/* Im Kachel-Menü (Handy) sitzt die Zahl in der Ecke statt in der Zeile. */
.app-shell .edge-grid .edge-item .mz { position: absolute; top: 6px; right: 6px; margin: 0; }

/* ══ 🌍 Der öffentliche Teil auf der Startseite (ohne Anmeldung) ═══════
   Wer die App zum ersten Mal öffnet, sieht hier etwas Echtes: wer gerade
   sendet. Es erscheinen nur Streamerinnen, die zugestimmt haben. */
.oe-label { font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: 18px 0 8px; }
.oe-liste { display: flex; flex-direction: column; gap: 8px; }
.oe-karte { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 16px; }
.oe-karte.oe-an { border-color: rgba(255,77,157,.45);
  background: linear-gradient(135deg, rgba(255,77,157,.12), transparent 70%), var(--card-2); }
.oe-bild { position: relative; width: 46px; height: 46px; flex: none; border-radius: 50%;
  overflow: hidden; background: var(--grad); display: grid; place-items: center; color: #fff; font-weight: 800; }
.oe-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oe-punkt { position: absolute; right: 1px; bottom: 1px; width: 12px; height: 12px; border-radius: 50%;
  background: #ff2d55; border: 2px solid var(--card-2); animation: oePuls 1.6s ease-in-out infinite; }
@keyframes oePuls { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.25); opacity: .65 } }
@media (prefers-reduced-motion: reduce) { .oe-punkt { animation: none } }
.oe-mid { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.oe-mid b { font-size: 15px; }
.oe-mid span { font-size: 12.5px; color: var(--muted); }
.oe-hinweis { margin-top: 8px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* ══ 🌍 Einladung auf die öffentliche Startseite ══════════════════════
   Steht im Feed, aber leiser als der Update-Banner: Es ist eine Frage,
   keine Meldung. Deshalb Karte statt Markenfläche, und das „was nicht"
   steht gleichberechtigt neben dem „was schon" — wer zustimmt, soll
   wissen, wozu. */
.oe-ein { margin: 4px 0 14px; padding: 13px 14px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line-soft);
  box-shadow: 0 10px 26px -18px rgba(0,0,0,.5);
  animation: updIn .4s cubic-bezier(.2,.9,.3,1.2); }
.oe-ein-kopf { display: flex; align-items: flex-start; gap: 11px; }
.oe-ein-ic { font-size: 22px; flex: 0 0 auto; line-height: 1.2; }
.oe-ein-kopf > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.oe-ein-kopf b { font-size: 14.5px; line-height: 1.25; }
.oe-ein-sub { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
/* Bewusst ein ganzer Knopf und kein kleines ✕ oben rechts: Dort schwebt die
   Glocke, die genau darauf liegen kann. Ein „Später" unter der Zusage ist
   immer erreichbar - und liest sich freundlicher. */
.oe-ein-x { margin-top: 8px; font-size: 13px; }
.oe-ein-liste { display: flex; flex-direction: column; gap: 5px; margin: 11px 0 12px;
  padding: 10px 11px; border-radius: 12px; background: var(--card-2); }
.oe-ein-ja, .oe-ein-nein { font-size: 12px; line-height: 1.35; }
.oe-ein-ja { color: var(--ok, #34d399); }
.oe-ein-nein { color: var(--muted); }
.oe-ein-go { margin-top: 2px; }
.oe-ein-fuss { font-size: 11px; line-height: 1.4; color: var(--muted); margin-top: 10px; }
.oe-ein-fertig { display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; padding: 16px 14px; text-align: center; }

/* ══ 🪑 Warteraum-Karte: auch auf dem Handy lesbar ═══════════════════
   Zwei Dinge gingen schief, sobald die Karte schmal wurde:

   1. Zeile 486 setzt für jede `.card` `overflow-wrap: anywhere`. Das ist
      für Fließtext richtig (eine lange Adresse soll die Karte nicht
      sprengen), hier aber falsch: Es macht die Mindestbreite eines
      Abzeichens winzig, die Spalte fällt zusammen, und „hereingekommen"
      steht als „hereingeko mmen" da.
   2. Text und Knöpfe blieben nebeneinander, obwohl 390 px dafür nicht
      reichen. Ab hier stehen die Knöpfe darunter — in voller Breite,
      also auch mit dem Daumen gut zu treffen. */
.aud-mid, .aud-mid * { overflow-wrap: break-word; word-break: normal; }
.aud-bzahl { align-self: flex-start; max-width: 100%; line-height: 1.35; }
.aud-zeile { flex-wrap: wrap; }

@media (max-width: 760px) {
  .aud-zeile { flex-direction: column; align-items: stretch; gap: 11px; }
  .aud-akt { width: 100%; flex-wrap: wrap; gap: 7px; }
  .aud-akt .btn { flex: 1 1 auto; min-height: 38px; }
  /* „bei eyfahrlehrer" ist eine Information, kein Knopf — es bekommt
     deshalb eine eigene Zeile und drängelt sich nicht zwischen sie. */
  .aud-akt .aud-badge { flex: 1 1 100%; text-align: center; padding: 5px 10px; }
  .aud-bilder img { width: 44px; height: 44px; }
}

/* ⬇️ Die Aufnahme als Datei — für die Plattform-Prüfung bei Bigo. */
.akb-laden { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; }
/* Die Formatwahl: eine Zeile, die umbricht statt zu drängeln. */
.akb-laden-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 9px; }

/* ══ 🪪 Ausweis-Kamera mit Selbstauslöser ════════════════════════════
   Der Rahmen ist kein Schmuck: Er sagt, wie groß der Ausweis im Bild sein
   soll. Alles außerhalb wird abgedunkelt, damit das Auge weiß, worauf es
   ankommt — und die Zeile darunter sagt in einem Satz, woran es gerade
   noch fehlt. */
.awk-buehne { position: relative; margin-top: 12px; border-radius: 14px; overflow: hidden;
  background: #0d0d16; aspect-ratio: 3/2; }
.awk-buehne video { width: 100%; height: 100%; object-fit: cover; display: block; }
.awk-rahmen { position: absolute; inset: 12% 8%; border: 2px dashed rgba(255,255,255,.8);
  border-radius: 12px; pointer-events: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.3); }
.awk-rahmen.awk-rund { inset: 6% 18%; border-radius: 50%; }
.awk-sagt { position: absolute; left: 0; right: 0; bottom: 0; padding: 9px 12px;
  background: rgba(0,0,0,.62); font-size: 13px; line-height: 1.4; text-align: center; }
.awk-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 62px; height: 62px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 27px; font-weight: 900; color: #fff;
  background: rgba(177,75,255,.55); border: 3px solid rgba(255,255,255,.85); }

/* 🤖 Das Bot-Abzeichen: sachlich, nicht golden. Fidolin schreibt für die
   Agentur, aber sie gehört ihr nicht. */
.badge.bot { background: rgba(120,140,255,.18); color: #B9C6FF; border: 1px solid rgba(120,140,255,.4); }
.akb-mehr { margin-top: 7px; }
.akb-mehr > summary { font-size: 11.5px; color: var(--muted); cursor: pointer; list-style: none; }
.akb-mehr > summary::-webkit-details-marker { display: none; }
.akb-mehr > summary::before { content: '▸ '; }
.akb-mehr[open] > summary::before { content: '▾ '; }

/* ══ 🪪 Ausweis-Kachel ═══════════════════════════════════════════════
   Ein Weg mit vier Zuständen: drei Schritte · abschicken · warten ·
   „bitte noch einmal". Jeder Zustand sieht anders aus, damit man mit
   einem Blick weiß, wo man steht — und nicht lesen muss. */
.aw-karte { border-radius: 16px; padding: 14px; margin-bottom: 12px;
  background: var(--card); border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  box-shadow: 0 10px 28px -20px var(--brand-2); }
.aw-kopf { font-size: 15.5px; display: flex; align-items: center; gap: 7px; }
.aw-text { font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 6px; }
.aw-grund { margin-top: 9px; padding: 9px 11px; border-radius: 11px; font-size: 13px;
  background: var(--card-2); border-left: 3px solid var(--brand); }
.aw-zurueck { margin-top: 9px; padding: 10px 12px; border-radius: 12px; font-size: 13px;
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 42%, transparent); }
.aw-zurueck div { margin-top: 3px; color: var(--muted); }

.aw-schritte { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.aw-schritt { display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border-radius: 12px; background: var(--card-2); }
.aw-schritt.fertig { background: color-mix(in srgb, var(--ok) 13%, transparent); }
.aw-nr { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900; background: var(--brand); color: var(--on-brand); }
.aw-schritt.fertig .aw-nr { background: var(--ok); color: #05130c; }
.aw-txt { display: flex; flex-direction: column; min-width: 0; }
.aw-txt b { font-size: 13.5px; }
.aw-txt span { font-size: 11.5px; color: var(--muted); }
.aw-rest { margin-top: 9px; text-align: center; font-size: 11.5px; color: var(--muted); }

.aw-wartet { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.aw-sicher { margin-top: 11px; display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; color: var(--muted); padding: 10px 11px; border-radius: 12px;
  background: var(--card-2); }

/* 🗓️ Fristen und 🧾 Verlauf in der Akte — sichtbar, nicht im Kleingedruckten. */
.akb-frist { margin-top: 8px; font-size: 11.5px; line-height: 1.45; color: var(--muted);
  padding: 8px 10px; border-radius: 10px; background: var(--card-2); }
.akb-verlauf { margin-top: 9px; }
.akb-verlauf > summary { font-size: 12px; color: var(--muted); cursor: pointer; list-style: none; }
.akb-verlauf > summary::-webkit-details-marker { display: none; }
.akb-verlauf > summary::before { content: '▸ '; }
.akb-verlauf[open] > summary::before { content: '▾ '; }
.akb-vl { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.akb-vz { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px;
  border-radius: 10px; background: var(--card-2); font-size: 12.5px; }
.akb-vt { font-size: 12px; color: var(--muted); font-style: italic; }

/* ══ Die Vorgeschichte als kleiner Film ════════════════════════════════
 *
 * Eine Bühne statt eines Bildes: hinten die Landschaft, davor die Figur,
 * darüber Schnee (drinnen: Kerzenlicht). Das Blatt wird dafür randlos —
 * ein Film mit 14 Pixel Rand links und rechts ist kein Film.
 *
 * Die Textabsätze blenden mit `backwards` ein, NICHT mit `forwards` auf
 * opacity:0 gestartet: Wo Animationen abgeschaltet sind (Systemeinstellung,
 * Energiesparen, alter Browser), stünde der Text sonst für immer auf
 * unsichtbar. So ist der Ruhezustand „sichtbar", und die Animation ist die
 * Zugabe.
 */
.sheet.film { padding-left: 0; padding-right: 0; }
.sheet.film .d-intro { padding: 0 14px 2px; }
.df-buehne { position: relative; aspect-ratio: 5 / 4; max-height: 42vh; overflow: hidden;
  background: #0a1220; margin-bottom: 14px; }
.df-buehne .df-hg { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }
.df-buehne .df-vg { position: absolute; left: 50%; bottom: 5%; width: 58%; height: 62%;
  object-fit: contain; object-position: bottom center; transform: translateX(-50%);
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.55)); }
.df-buehne .df-vg.mittel { width: 78%; height: 76%; bottom: 1%; }
.df-rand { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,12,22,.5) 0%, transparent 26%,
              transparent 48%, rgba(8,12,22,.88) 100%); }
.df .df-kopf { position: absolute; left: 14px; right: 14px; bottom: 9px; text-align: left; }
.df .df-kopf span { display: block; font-size: 10.5px; letter-spacing: 1.4px;
  text-transform: uppercase; font-weight: 800; color: var(--brand-2); }
.df .df-kopf h3 { margin: 2px 0 0; font-size: 19px; color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.7); }
.df-text { text-align: left; font-size: 14.5px; line-height: 1.62; color: var(--text);
  opacity: .93; margin-bottom: 12px; }
.df-text p { margin: 0 0 10px; animation: df-auf .5s ease backwards; }
.df-text p:last-child { margin-bottom: 0; }
.df-reihe { display: flex; gap: 8px; align-items: stretch; }
.df-reihe .btn.primary { flex: 1; }
.df-ton { flex: 0 0 50px; width: 50px; padding: 0; font-size: 17px; }
.df-ton.an { color: var(--brand-2); border-color: color-mix(in srgb, var(--brand-2) 55%, transparent); }

/* Ken-Burns: drei Fahrten im Wechsel, damit zwei Teile nacheinander nicht
 * gleich aussehen. Langsam (18 s) und `forwards` — am Ende steht das Bild
 * still, statt zurückzuspringen. */
@keyframes df-fahrt0 { from { transform: scale(1.03); } to { transform: scale(1.15) translate(-1.5%, -1%); } }
@keyframes df-fahrt1 { from { transform: scale(1.15) translate(1.5%, 1%); } to { transform: scale(1.03); } }
@keyframes df-fahrt2 { from { transform: scale(1.06) translate(1.5%, 0); } to { transform: scale(1.17) translate(-1.5%, -1.5%); } }
.df-hg.fahrt0 { animation: df-fahrt0 18s ease-out forwards; }
.df-hg.fahrt1 { animation: df-fahrt1 18s ease-out forwards; }
.df-hg.fahrt2 { animation: df-fahrt2 18s ease-out forwards; }
@keyframes df-auf { from { opacity: 0; transform: translateY(7px); } }

/* Schnee: ein Muster aus zwölf Punkten, das nach unten wandert. Kein Bild,
 * kein Netz, kein Canvas — das kostet weniger als ein einziges Foto. */
.df-schnee { position: absolute; inset: 0; pointer-events: none; opacity: .8;
  background-repeat: repeat;
  background-image:
    radial-gradient(1.7px 1.7px at 8% 6%, #fff 60%, transparent 62%),
    radial-gradient(1.4px 1.4px at 23% 19%, rgba(255,255,255,.85) 60%, transparent 62%),
    radial-gradient(2px 2px at 41% 9%, #fff 60%, transparent 62%),
    radial-gradient(1.3px 1.3px at 58% 26%, rgba(255,255,255,.8) 60%, transparent 62%),
    radial-gradient(1.8px 1.8px at 73% 13%, #fff 60%, transparent 62%),
    radial-gradient(1.4px 1.4px at 88% 31%, rgba(255,255,255,.85) 60%, transparent 62%),
    radial-gradient(1.5px 1.5px at 15% 44%, #fff 60%, transparent 62%),
    radial-gradient(1.2px 1.2px at 34% 52%, rgba(255,255,255,.75) 60%, transparent 62%),
    radial-gradient(1.9px 1.9px at 52% 38%, #fff 60%, transparent 62%),
    radial-gradient(1.3px 1.3px at 67% 49%, rgba(255,255,255,.8) 60%, transparent 62%),
    radial-gradient(1.6px 1.6px at 81% 41%, #fff 60%, transparent 62%),
    radial-gradient(1.2px 1.2px at 95% 55%, rgba(255,255,255,.7) 60%, transparent 62%);
  background-size: 100% 58%;
  animation: df-fallen 11s linear infinite;
}
@keyframes df-fallen { from { background-position: 0 -58%; } to { background-position: 4% 58%; } }

/* Drinnen beim Weihnachtsmann fällt kein Schnee — da flackert die Kerze. */
.df-kerze { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 48% at 22% 60%, rgba(255,186,96,.32), transparent 72%);
  animation: df-flackern 2.7s ease-in-out infinite; }
@keyframes df-flackern { 0%, 100% { opacity: .5; } 42% { opacity: .95; } 68% { opacity: .68; } }

@media (prefers-reduced-motion: reduce) {
  .df-text p { animation: none; }
  .df-hg.fahrt0, .df-hg.fahrt1, .df-hg.fahrt2 { animation: none; }
}

/* ── Die Uhren des Dorfes ─────────────────────────────────────────────
 * Eine Zahl, die läuft, muss ruhig stehen: Ziffern in gleicher Breite
 * (tabular-nums), sonst zappelt die Zeile bei jedem Sekundenschlag.
 */
.d-uhr { font-style: normal; font-variant-numeric: tabular-nums; font-weight: 700; }
.dz-uhr { position: absolute; left: 50%; top: -6px; transform: translateX(-50%);
  background: rgba(10,14,24,.82); border: 1px solid rgba(255,255,255,.14);
  color: #fff; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  white-space: nowrap; pointer-events: none; }
.db-baut { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px;
  font-weight: 700; color: var(--brand-2); white-space: nowrap; }
.d-baustelle { display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  margin-bottom: 10px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--brand-2) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-2) 28%, transparent); }
.d-baustelle img { width: 38px; height: auto; flex: 0 0 38px; }
.d-baustelle b { font-size: 14px; }
.da-uhr { margin-top: 8px; padding-top: 9px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted); text-align: center; }

/* Die Nutzungsbedingungen vor dem Anmelden (Apple 1.2). Leise, aber lesbar —
 * ein Hinweis, den man erst im Impressum findet, ist kein Hinweis. */
.auth-agb { margin-top: 14px; font-size: 11.5px; line-height: 1.55; color: var(--muted); text-align: center; }
.auth-agb b { color: var(--text); font-weight: 700; }
.auth-agb a { color: var(--brand-2); text-decoration: underline; }

/* ── „So läuft das bei uns" auf der öffentlichen Seite ────────────────
 * Vier Schritte mit großer Nummer links. Die Nummer ist der Anker fürs
 * Auge: Wer nur überfliegt, sieht sofort, dass es ein Weg ist und kein
 * Werbeblock. */
.ablauf-label { margin: 22px 0 10px; font-size: 12px; font-weight: 800;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--brand-2); text-align: center; }
.ablauf { display: flex; flex-direction: column; gap: 10px; }
.ab-schritt { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.ab-nr { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.ab-txt b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.ab-txt span { display: block; font-size: 13px; line-height: 1.55; color: var(--muted); }
.ablauf-fuss { margin: 10px 2px 0; font-size: 12px; line-height: 1.5;
  color: var(--muted); text-align: center; }

/* Die zweite Stufe des öffentlichen Schalters: Zeichen statt Foto (191).
 * Die Vorschau zeigt genau die Karte, die draußen steht — wer sein Gesicht
 * nicht hergeben will, soll vorher sehen, was stattdessen dort steht. */
/* `.oe-bild img` setzt object-fit: cover — und schlaegt `.oe-emblem` in der
 * Spezifitaet (0,1,1 gegen 0,1,0). Genau deshalb war die Acht im ersten
 * Anlauf beschnitten und las sich als „EVER1". Mit `img.oe-emblem` gewinnt
 * die Regel, die gemeint ist. */
.oe-bild img.oe-emblem { object-fit: contain; padding: 6px 3px;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), transparent 70%); }
.oe-vorschau { margin-top: 11px; }
.oe-vor-label { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.oe-karte-probe { pointer-events: none; opacity: .95; }

/* 🔨 Die Werkstatt im Dorf (Migration 192). Eigene Karte über „Bauen":
 * Sie ist kein Haus mehr, das man nur ausbaut, sondern eine Werkbank, an
 * der etwas läuft — deshalb steht sie zwischen Aufgaben und Bauen. */
.d-werk { display: flex; align-items: center; gap: 12px; padding: 11px 13px; margin-bottom: 12px;
  border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.d-werk.aus { opacity: .75; }
.d-werk > img { width: 52px; height: auto; flex: 0 0 52px; }
.d-werk .dw-mid { flex: 1; min-width: 0; }
.d-werk b { font-size: 14.5px; }
.dw-lager { margin-top: 5px; font-size: 12.5px; font-weight: 700; color: var(--brand-2); }

/* „Ich gehöre zu keiner Familie" — der Ausweg im Familien-Wähler.
 * Er steht dort, wo man stecken bleibt, und nicht in einer Hilfeseite. */
.fam-keine { display: block; width: 100%; margin-top: 10px; padding: 10px 12px;
  border-radius: var(--radius); border: 1px dashed var(--line);
  background: transparent; color: var(--muted); font-size: 12.5px; text-align: center;
  cursor: pointer; }
.fam-keine:hover { color: var(--text); border-color: var(--brand-2); }

/* „Für wen?“ beim Einladecode: zwei Kacheln statt eines Dropdowns.
 * Bewusst dieselbe Bauart wie der Familien-Wähler darunter — eine Liste
 * aus Kacheln, in der eine ausgewählt ist. */
.ic-typ { display: flex; flex-direction: column; gap: 8px; }
.ic-karte { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 13px;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--card);
  color: var(--text); text-align: left; cursor: pointer; }
.ic-karte:hover { border-color: color-mix(in srgb, var(--brand-2) 45%, transparent); }
.ic-karte.an { border-color: var(--brand-2);
  background: color-mix(in srgb, var(--brand-2) 12%, var(--card)); }
.ic-k-ic { font-size: 22px; flex: none; }
.ic-k-t { flex: 1; min-width: 0; }
.ic-k-t b { display: block; font-size: 14.5px; }
.ic-k-t span { display: block; font-size: 12px; color: var(--muted); }
.ic-k-haken { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid;
  place-items: center; font-size: 12px; font-weight: 800; color: transparent;
  border: 1px solid var(--line); }
.ic-karte.an .ic-k-haken { color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); }

/* Chips für „für wie viele" und „gültig für". Vier, fünf Antworten, die
 * alle auf eine Zeile passen — die muss man nicht aufklappen. */
.ic-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ic-chip-k { padding: 8px 13px; border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; }
.ic-chip-k:hover { color: var(--text); border-color: color-mix(in srgb, var(--brand-2) 45%, transparent); }
.ic-chip-k.an { color: #fff; border-color: transparent; font-weight: 700;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.ic-zwei { display: grid; gap: 0 18px; }
@media (min-width: 560px) { .ic-zwei { grid-template-columns: 1fr 1fr; } }

/* ── Das Haus-Blatt im Dorf ───────────────────────────────────────────
 * Vorher: Bild, ein Satz, vier Punkte, ein grauer Knopf „Es fehlen 10".
 * Jetzt erzählt es die Geschichte des Hauses — Stand, Stufen mit Kosten
 * und Wirkung, und bei leerem Lager der Weg zu Bausteinen. */
.dh-kopf { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.dh-kopf > img { width: 92px; height: auto; flex: 0 0 92px;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.45)); }
.dh-stand { font-size: 12px; font-weight: 800; letter-spacing: .3px; color: var(--brand-2);
  margin: 3px 0 4px; }
.dh-stufen { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.dhs { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line-soft); }
.dhs.hat { opacity: .62; }
.dhs.dran { border-color: var(--brand-2);
  background: color-mix(in srgb, var(--brand-2) 10%, var(--card)); }
.dhs-nr { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; background: rgba(255,255,255,.07); color: var(--muted); }
.dhs.hat .dhs-nr { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; }
.dhs.dran .dhs-nr { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; }
.dhs-t { flex: 1; min-width: 0; }
.dhs-t b { display: block; font-size: 13.5px; }
.dhs-t span { display: block; font-size: 11.5px; color: var(--muted); }
.dhs-p { flex: none; font-size: 12px; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.dh-fehlt { margin-bottom: 12px; }
.dh-balken { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.dh-balken i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.dh-fehlt-t { margin-top: 7px; font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; }
.dh-woher { padding: 11px 13px; border-radius: var(--radius); background: var(--card);
  border: 1px solid var(--line-soft); }
.dh-woher > b { display: block; font-size: 12.5px; margin-bottom: 7px; }
.dhw { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted);
  padding: 3px 0; }
.dhw span { flex: none; width: 20px; text-align: center; }
.dhw i { margin-left: auto; font-style: normal; font-weight: 800; color: var(--text); }

/* Das Rentier trottet. Es ist kein Wackeln wie bei den anderen Aufgaben:
 * Ein Tier, das über den Platz geht, sieht lebendig aus — und zieht den
 * Blick auf eine Aufgabe, die sonst nur in der Liste steht.
 *
 * Wichtig: `.dz-stueck` positioniert mit translateX(-50%). Jede eigene
 * Bewegung MUSS das mitführen, sonst springt das Stück beim ersten
 * Animationsbild um seine halbe Breite zur Seite. */
.dz-rentier { animation: dz-trotten 11s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes dz-trotten {
  0%   { transform: translateX(-50%) translateX(-9%) scaleX(1); }
  44%  { transform: translateX(-50%) translateX(9%) scaleX(1); }
  48%  { transform: translateX(-50%) translateX(9%) scaleX(-1); }   /* dreht um */
  94%  { transform: translateX(-50%) translateX(-9%) scaleX(-1); }
  98%  { transform: translateX(-50%) translateX(-9%) scaleX(1); }
  100% { transform: translateX(-50%) translateX(-9%) scaleX(1); }
}
/* Das Feuer atmet, statt zu wackeln. */
.dz-feuer { animation: dz-glimmen 2.4s ease-in-out infinite; }
@keyframes dz-glimmen {
  0%, 100% { transform: translateX(-50%) scale(1);    filter: brightness(1)    drop-shadow(0 0 6px rgba(255,170,60,.25)); }
  50%      { transform: translateX(-50%) scale(1.04); filter: brightness(1.18) drop-shadow(0 0 14px rgba(255,170,60,.5)); }
}
@media (prefers-reduced-motion: reduce) { .dz-rentier, .dz-feuer { animation: none; } }

/* ── „Heute zu tun" auf Handyhöhe ─────────────────────────────────────
 * Vorher: sechs Zeilen à 64 Pixel, dazu drei für die Verdienste — die
 * Seite war länger als der Bildschirm, bevor überhaupt etwas passiert war.
 * Jetzt: ein Streifen und ein Raster. */
.da-lohnreihe { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dal { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px;
  font-size: 11.5px; color: var(--muted); background: rgba(255,255,255,.05);
  border: 1px solid var(--line-soft); }
.dal i { font-style: normal; font-weight: 800; color: var(--text); }
.dal.hat { opacity: .55; }
.dal.hat i { color: var(--ok, #4ade80); }
.da-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dak { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 11px 6px 9px; border-radius: var(--radius); cursor: pointer;
  background: var(--card); border: 1px solid var(--line); color: var(--text); }
.dak:hover { border-color: color-mix(in srgb, var(--brand-2) 50%, transparent); }
.dak-ic { font-size: 23px; line-height: 1; height: 30px; display: grid; place-items: center; }
.dak-ic img { width: 30px; height: 30px; object-fit: contain; }
.dak-t { font-size: 11.5px; font-weight: 600; text-align: center; line-height: 1.25; }
.dak.hat { opacity: .45; cursor: default; }
.dak-haken { position: absolute; top: 5px; right: 6px; font-size: 12px; color: var(--ok, #4ade80); }
.dak:disabled { pointer-events: none; }

/* Vier Häuser nebeneinander statt untereinander. */
.d-bauen.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.d-bauen.zwei .db-karte { flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: 10px 8px; border: 1px solid var(--line-soft); border-radius: var(--radius); }
.d-bauen.zwei .db-bild { width: 66px; }
.d-bauen.zwei .db-mid b { font-size: 13px; }
.d-bauen.zwei .db-stufen { justify-content: center; margin-top: 4px; }

/* Die neuen Stücke kommen aus einer hellen Bildwelt, die Bühne ist Nacht.
 * Ohne diese Zeile leuchtet das Rentier wie ein Scheinwerfer zwischen den
 * Häusern — gemalt ist es richtig, es steht nur im falschen Licht. */
.dz-rentier img, .dz-feuerkalt img, .dz-schnee img { filter: brightness(.82) saturate(.92); }
.dz-feuerkalt { animation: dz-wink 2.6s ease-in-out infinite; }

/* ══ Das Laufband ═════════════════════════════════════════════════
   Die PKs des Tages, über jeder Seite. Nur an Tagen, an denen etwas
   ansteht — sonst steht das Element gar nicht da (hidden).

   Es sitzt zwischen Kopfzeile und Inhalt und schiebt die Seite ein
   Stück nach unten, statt über ihr zu schweben. Eine Leiste, die
   überdeckt, verdeckt irgendwann etwas Wichtiges.                  */
.pkt {
  position: relative;
  display: flex; align-items: center;
  background: linear-gradient(90deg, var(--card-2), var(--card));
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  /* Keine feste Höhe: Wächst die Schrift (Systemeinstellung), wächst
     die Leiste mit, statt den Text abzuschneiden. */
  padding: 7px 0;
  flex: none;
}
.pkt[hidden] { display: none; }

/* Zwei gleiche Spuren nebeneinander, die zusammen um genau eine
   Spurbreite wandern — danach fängt es von vorn an, und die Naht ist
   nicht zu sehen. */
.pkt-lauf { display: flex; width: max-content; animation: pkt-wandern var(--pkt-dauer, 20s) linear infinite; }
.pkt-spur { display: flex; align-items: center; gap: 22px; padding-right: 22px; white-space: nowrap; }
@keyframes pkt-wandern { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.pkt:hover .pkt-lauf, .pkt:focus-within .pkt-lauf,
/* .pkt-halt setzt app.js, solange ein Finger auf der Leiste liegt —
   :hover gibt es auf dem Telefon nicht. */
.pkt.pkt-halt .pkt-lauf { animation-play-state: paused; }

.pkt-e {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--muted); text-decoration: none;
  font-size: .86rem; line-height: 1.3;
}
.pkt-e b { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 700; }
.pkt-e i { color: var(--muted-2); font-style: normal; }
.pkt-e.naechste b { color: var(--accent); }
.pkt-e.laeuft b { color: var(--brand-2); }
.pkt-e.mein { color: var(--text); }
.pkt-e.mein b { color: var(--brand); }
.pkt-du {
  background: var(--grad); color: var(--on-brand);
  border-radius: 999px; padding: 1px 8px; font-size: .72rem; font-weight: 700;
}
/* Der Punkt an der laufenden PK. Er pulst – aber nur, wenn das Gerät
   Bewegung zulässt (siehe unten). */
.pkt-punkt {
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand-2);
  box-shadow: 0 0 0 0 var(--brand-2); animation: pkt-puls 1.8s ease-out infinite;
}
@keyframes pkt-puls {
  0%   { box-shadow: 0 0 0 0 rgba(255,77,157,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(255,77,157,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,77,157,0); }
}

.pkt-zu {
  position: absolute; right: 0; top: 0; bottom: 0;
  /* 44 px, nicht 34: Alles darunter trifft man mit dem Daumen nur
     mit Glueck — und daneben liegt ein Verweis, der dann die Seite
     wechselt, statt die Leiste zu schliessen. */
  width: 44px; border: 0; cursor: pointer;
  color: var(--muted-2); font-size: 1.1rem; line-height: 1;
  /* Der Verlauf nach links sorgt dafür, dass kein Text unter dem
     Kreuz hervorschaut – sonst läuft ein halber Name dagegen. */
  background: linear-gradient(90deg, transparent, var(--card) 42%);
}
.pkt-zu:hover { color: var(--text); }

/* Wer Bewegung abgestellt hat, bekommt keine. Dann steht die Leiste
   still und lässt sich mit dem Finger schieben – derselbe Inhalt, nur
   ohne Lauf. Die zweite Spur wäre dabei eine Dopplung, also weg. */
@media (prefers-reduced-motion: reduce) {
  .pkt { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pkt-lauf { animation: none; width: auto; }
  .pkt-lauf .pkt-spur:nth-child(2) { display: none; }
  .pkt-punkt { animation: none; }
}

/* Am Telefon ein bisschen enger – aber nicht kleiner: Was man im
   Vorbeigehen lesen soll, darf nicht winzig sein. */
@media (max-width: 520px) {
  .pkt-spur { gap: 16px; padding-right: 16px; }
}

/* Passt alles schon nebeneinander: nichts wandert, und die zweite Spur
   wäre nur eine sichtbare Dopplung. Bei einer einzigen PK steht sie
   einfach da — ein Laufband mit einem Eintrag ist kein Laufband. */
.pkt.pkt-ruhig { padding-left: 14px; }
.pkt.pkt-ruhig .pkt-lauf { animation: none; }
.pkt.pkt-ruhig .pkt-spur:nth-child(2) { display: none; }

/* ══ Markierungen vor dem Container ═══════════════════════════════
   Der @Name stand bisher nur im Fließtext — und ging dort unter. Hier
   stehen die Markierten mit Bild über dem Text, antippbar, ohne den
   Beitrag zu öffnen. Im Satz bleibt der Name trotzdem stehen: dort ist
   er eine Anrede und gehört hin.                                    */
.mk-leiste {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 10px 0 2px;
}
.mk-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--card-2); border: 1px solid var(--line-soft);
  border-radius: 999px; padding: 3px 12px 3px 3px;
  color: var(--text); text-decoration: none;
  font-size: .82rem; line-height: 1.25;
  /* min-width: 0 und das Kürzen unten: Ein langer verzierter Name soll
     den Chip nicht aus der Karte schieben. Hier IST Kürzen richtig —
     das Bild daneben und der Verweis sagen schon, wer gemeint ist. */
  max-width: 100%; min-width: 0;
}
.mk-chip span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.mk-chip .avatar { width: 24px; height: 24px; flex: none; }
.mk-chip:active { transform: scale(.98); }

/* Das Schild ganz oben — nur, wenn man SELBST gemeint ist. Dieselbe
   Stelle wie „📢 Wichtig", damit man nicht zwei Orte absuchen muss. */
.mk-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--grad); color: var(--on-brand);
  border-radius: 999px; padding: 3px 12px;
  font-size: .76rem; font-weight: 700; letter-spacing: .01em;
  margin-bottom: 9px;
}
.post.mk-gemeint {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}

/* ══ „Wie geht's dir?" ════════════════════════════════════════════
   Die Stimmung gab es längst — nur fragte niemand danach. Hier steht
   die Frage da, wo man ohnehin hinsieht, und ein Tipp genügt.        */
.stm {
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: 16px; padding: 13px 14px; margin-bottom: 12px;
}
.stm-kopf {
  font-weight: 600; font-size: .94rem; color: var(--text); margin-bottom: 10px;
}
.stm-kopf b { color: var(--brand); font-weight: 700; }
.stm-reihe { display: flex; flex-wrap: wrap; gap: 7px; }
.stm-chip {
  border: 1px solid var(--line); background: var(--card-2); color: var(--text);
  border-radius: 999px; padding: 7px 14px; font-size: .87rem; line-height: 1.2;
  cursor: pointer; white-space: nowrap;
  /* 36 px hoch: Ein Chip, den man mit dem Daumen trifft. Darunter wird
     Antippen zum Zielen, und das macht niemand zweimal am Tag. */
  min-height: 36px;
}
.stm-chip:active { transform: scale(.97); }
.stm-chip:disabled { opacity: .55; }
.stm-chip.an {
  background: var(--grad); color: var(--on-brand);
  border-color: transparent; font-weight: 700;
}
.stm-chip.stm-eigen { border-style: dashed; color: var(--muted); }
.stm-chip.stm-weg { color: var(--muted-2); }

/* Am Telefon soll die Reihe schieben statt zu stapeln: Vier Zeilen
   Chips vor dem Schreibfeld wären eine Mauer. */
@media (max-width: 520px) {
  .stm-reihe {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .stm-reihe::-webkit-scrollbar { display: none; }
  .stm-chip { flex: none; }
}

/* ══ Was gerade gilt — hinter dem Namen ═══════════════════════════
   Zwei Angaben, die überall in der Namenszeile stehen: wer gerade live
   ist, und wer heute eine PK hat. Sie stehen VOR Geburtstag und Status,
   weil sie nur Stunden wahr sind — und weil man genau danach sucht.    */
.idz {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 999px; padding: 1px 8px;
  font-size: .72rem; font-weight: 700; line-height: 1.5;
  white-space: nowrap; vertical-align: middle;
  /* Nicht schrumpfen, aber auch nicht den Namen verdrängen: Die Zeile
     ist flex-wrap, das Chip rutscht notfalls in die nächste Zeile. */
  flex: none;
}
.idz.live { background: rgba(255,90,90,.16); color: #FF8A9E; }
.idz.pk   { background: rgba(177,75,255,.18); color: #D9A8FF; }
.idz-pt {
  width: 6px; height: 6px; border-radius: 50%; background: #FF5A5A; flex: none;
  animation: idz-puls 1.8s ease-out infinite;
}
@keyframes idz-puls {
  0%   { box-shadow: 0 0 0 0 rgba(255,90,90,.55); }
  70%  { box-shadow: 0 0 0 6px rgba(255,90,90,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,90,90,0); }
}
@media (prefers-reduced-motion: reduce) { .idz-pt { animation: none; } }

/* Am Telefon wird es enger: Das PK-Chip verliert seine Beschriftung
   nicht, aber die Schrift wird kleiner. Der Name darf nie weichen. */
@media (max-width: 420px) {
  .idz { font-size: .68rem; padding: 1px 7px; }
}

/* ── Eure Agentur: Einstellungen und Vorschau (Kontrollraum) ────────
   Die Vorschau zeigt die Karte so, wie sie auf pkboard.tv erscheint.
   Absichtlich etwas kleiner als dort: sie soll erkennbar eine Vorschau
   sein und nicht so tun, als waere man schon auf der Vorderseite. */
.ag-karte{background:var(--card2,#1a1822);border:1px solid var(--line,rgba(255,255,255,.09));
  border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px}
.ag-kopf{display:flex;align-items:center;gap:12px;min-width:0}
.ag-kopf>span:last-child{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.ag-zeichen{width:42px;height:42px;border-radius:13px;color:#15070c;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px}
.ag-text{font-size:15px;line-height:1.5;word-break:break-word}
.ag-marke{align-self:flex-start;font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px}
.ag-feld{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.ag-feld>span:first-child{font-size:13px;font-weight:700;opacity:.75}
.ag-feld input[type=text],.ag-feld textarea{width:100%;box-sizing:border-box;font:inherit;
  color:inherit;background:var(--bg,#0d0c11);border:1px solid var(--line,rgba(255,255,255,.18));
  border-radius:10px;padding:11px 13px;min-height:44px}
.ag-feld textarea{resize:vertical;min-height:76px}
/* Ein Farbwaehler ist auf dem Handy winzig, wenn man ihn laesst, wie er
   ist — 44px, damit man ihn mit dem Daumen trifft. */
.ag-feld input[type=color]{width:64px;height:44px;padding:2px;border-radius:10px;
  border:1px solid var(--line,rgba(255,255,255,.18));background:transparent;cursor:pointer}