/* DER SAAL
   Stil von Xinelum: schwarzer Grund, Creme, Popcorn-Gold, SF-Systemschrift.
   Apple-Muster: Musik „Jetzt läuft“ (Plakat und Band), Wetter (Karten),
   Live-Aktivitäten (Stationen), Nachrichten (Liste der Unterhaltungen, Foyer
   und Privatchats), Einstellungen (Listen, Schalter „Mitteilungen“).
   Keine Fremdschriften, keine CDNs, kein Systemblau. */

:root {
  --schwarz: #000;
  --grund-foyer: #070708;
  --karte: #121214;
  --karte-hell: #1c1c1f;
  --blase: #232327;
  --linie: rgba(255, 255, 255, .09);
  --linie-stark: rgba(255, 255, 255, .16);
  --text: #f5f5f7;
  --creme: #fbeed3;
  --leise: #a1a1a6;
  --leiser: #6e6e73;
  --gold: #e8b45a;
  --gold-hell: #f6dca8;
  --gold-tief: #a66f16;
  --gold-hauch: rgba(232, 180, 90, .14);
  --rot: #ff453a;
  --orange: #ff9f0a;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --weich: cubic-bezier(.22, .61, .36, 1);
  --kopf-hoehe: 56px;
  --reiter-hoehe: 0px;
  --rand: 40px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--schwarz); }
body {
  background: var(--schwarz);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
}
img { display: block; }
button, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }
::selection { background: var(--gold); color: #000; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 8px; }
.symbole { position: absolute; width: 0; height: 0; overflow: hidden; }
.nur-inhalt { display: contents; }

/* Die Wortmarke wie überall bei Xinelum: SF fett, gesperrt 0,42 em, Creme */
.wortmarke {
  font-weight: 700;
  letter-spacing: .42em;
  margin-right: -.42em;
  text-transform: uppercase;
  color: var(--creme);
  white-space: nowrap;
}

/* ── Anmeldung ─────────────────────────────────────────────────────────── */

body.anmeldung {
  display: grid;
  place-items: center;
  padding: 24px 16px;
  overflow: hidden;
}
body.anmeldung::before {
  content: "";
  position: fixed;
  left: 50%;
  top: 38%;
  width: min(760px, 140vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(232, 180, 90, .17), rgba(232, 180, 90, .05) 55%, transparent);
  pointer-events: none;
  animation: licht-an 1.4s var(--weich) both;
}
.anmelde-buehne {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 360px;
}
.anmelde-logo { width: auto; height: 112px; animation: auftritt .9s var(--weich) both; }
.anmelde-marke { font-size: 21px; margin-top: 26px; }
.anmelde-zeile { margin-top: 10px; color: var(--leise); font-size: 15px; }
.anmelde-hinweis {
  margin-top: 26px;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(255, 69, 58, .12);
  color: var(--creme);
  font-size: 14px;
}
.knopf-gold {
  margin-top: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 30px;
  border-radius: 999px;
  background: var(--gold);
  color: #000;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  transition: background-color .2s var(--weich), transform .2s var(--weich);
}
.knopf-gold:hover { background: var(--gold-hell); }
.knopf-gold:active { transform: scale(.98); }
.anmelde-fuss { margin-top: 18px; color: var(--leiser); font-size: 12px; }

@keyframes licht-an { from { opacity: 0; } to { opacity: 1; } }
@keyframes auftritt { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* ── Kopfleiste ────────────────────────────────────────────────────────── */

.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  height: calc(var(--kopf-hoehe) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(var(--rand), env(safe-area-inset-right)) 0 max(var(--rand), env(safe-area-inset-left));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(0, 0, 0, .78);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: .5px solid var(--linie);
}
.marke { display: flex; align-items: center; gap: 12px; }
/* Xini statt des Popcorn-X (Frank, 18.10.2026) */
.marke img { width: auto; height: 32px; }
.marke .wortmarke { font-size: 15px; }
.kopf-rechts { display: flex; align-items: center; gap: 14px; min-width: 0; }
.vorschau-marke {
  font-size: 11px;
  font-weight: 600;
  color: var(--gold-hell);
  border: .5px solid rgba(232, 180, 90, .45);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
  background: rgba(18, 18, 20, .92);
}
.live { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--leise); }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--leiser); transition: background-color .4s, box-shadow .4s; }
.live[data-zustand="verbunden"] { color: var(--creme); }
.live[data-zustand="verbunden"] i { background: var(--gold); box-shadow: 0 0 10px rgba(232, 180, 90, .8); }
.live[data-zustand="verbindet"] i { animation: atmen 2.4s ease-in-out infinite; }
.live[data-zustand="getrennt"] i { background: var(--rot); }
.ich { font-size: 13px; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.abmelden {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--leise);
  transition: background-color .2s, color .2s;
}
.abmelden:hover { background: var(--karte-hell); color: var(--creme); }
/* Team-Pause (#66): Schalter wie Fokus im Kontrollzentrum; pausiert golden mit dem Wiedergabezeichen.
   Nur das Zeichen, kein sichtbares Wort (Frank, Foyer 1638: „Ne, lass mal so mit dem Knopf.“).
   Seit Saal 2738 (#137) oben rechts im Inhaltsbereich, in der Zeile „Jetzt im Saal“. */
.pause-knopf[hidden] { display: none; }
.pause-knopf[data-pausiert="1"] { color: var(--gold); }
.jetzt { position: relative; }
.jetzt > .pause-knopf { position: absolute; top: 0; right: 0; z-index: 2; background: var(--karte); box-shadow: inset 0 0 0 .5px var(--linie); }
.jetzt:has(> .pause-knopf:not([hidden])) > .abschnitt { padding-right: 44px; }

/* Kontoverbrauch im Kopf (Frank, Saal 441): je Konto zwei kleine Füllstände
   wie in der Statusleiste, oben 5 Stunden, unten Woche. Nur Frank. */
.kontingent { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 4px 8px; margin: 0 -8px; border-radius: 10px; transition: background-color .2s; }
.kontingent[hidden] { display: none; }
/* Offene Fragen an Frank im Kopf: golden wie die Kennzahl in Mail, führt zur ersten Frage */
/* Nachrichten ein- und ausblenden (Frank, Saal 683; Muster: Seitenleiste in Mail und Notizen) */
.chats-knopf { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--leise); transition: background-color .2s, color .2s; }
.chats-knopf:hover { background: var(--karte-hell); color: var(--text); }
.chats-knopf[aria-expanded="false"] { color: var(--gold); }
.chats-knopf .kachel-zahl { position: absolute; top: -5px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; line-height: 18px; }
.chats-knopf .kachel-zahl[hidden] { display: none; }
@media (min-width: 900px) {
  /* Die Spalte behält ihre Breite und gleitet nach rechts hinaus, während ihre Spur auf 0 geht
     (Frank, 19.10.2026: „sanft rein- und rausgleiten und NICHT springen“). */
  .chats { width: var(--chats-spalte); justify-self: start; }
  body[data-chats="zu"] .buehne { grid-template-columns: minmax(0, 1fr) 0px; }
  body[data-chats="zu"] .chats { visibility: hidden; }
  /* Eingeklappt darf die Übersicht breiter werden, bleibt aber lesbar. */
  body[data-chats="zu"] .saal-spalte { max-width: 1600px; }
}
/* Nachrichten gleiten wie die Seitenleiste in Mail und Notizen: nur beim Umschalten
   (data-gleitet setzt saal.js), nie beim Ziehen, Laden oder Ändern der Fenstergröße. */
@media (prefers-reduced-motion: no-preference) {
  body[data-gleitet] .buehne { transition: grid-template-columns .32s var(--weich); }
  body[data-gleitet][data-chats="zu"] .chats { transition: visibility 0s linear .32s; }
  body[data-gleitet] .saal-spalte { transition: max-width .32s var(--weich); }
}
/* Der Griff am linken Rand (Teiler wie in Mail und Finder): unsichtbar breit über der
   vorhandenen Linie, beim Zeigen, Ziehen und mit Fokus wird die Linie Popcorn-Gold. */
.chats-griff { position: absolute; top: 0; bottom: 0; left: -5px; width: 9px; z-index: 5; cursor: col-resize; touch-action: none; outline: none; }
.chats-griff::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 3px; border-radius: 2px; background: transparent; transition: background-color .15s; }
.chats-griff:hover::after, .chats-griff:focus-visible::after, body[data-zieht] .chats-griff::after { background: var(--gold); }
body[data-zieht] { cursor: col-resize; user-select: none; -webkit-user-select: none; }
body[data-chats="zu"] .chats-griff { display: none; }
.fragen-knopf { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 4px 6px 4px 10px; border-radius: 999px; color: var(--gold-hell); font-size: 13px; font-weight: 600; background: var(--gold-hauch); transition: background-color .2s; }
.fragen-knopf[hidden] { display: none; }
.fragen-knopf:hover { background: rgba(232, 180, 90, .24); }
.kontingent:hover { background: var(--karte-hell); }
.kk { display: flex; align-items: center; gap: 7px; transition: opacity .3s; }
.kk[data-alt="1"] { opacity: .5; }
.kk-name { font-size: 12px; font-weight: 600; color: var(--leise); white-space: nowrap; }
.kk-fenster { display: grid; gap: 3px; }
.kk-zeile { display: grid; grid-template-columns: auto 30px 30px; align-items: center; gap: 5px; line-height: 1; }
.kk-titel { font-size: 9px; font-weight: 600; color: var(--leiser); text-align: right; min-width: 9px; }
.kk-spur { position: relative; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.kk-spur i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--gold); transition: width .6s var(--weich); }
.kk-zahl { font-size: 10px; font-weight: 600; color: var(--leise); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.kk-zeile[data-lage="warnung"] .kk-spur i { background: var(--orange); }
.kk-zeile[data-lage="warnung"] .kk-zahl { color: var(--orange); }
.kk-zeile[data-lage="knapp"] .kk-spur i { background: var(--rot); }
.kk-zeile[data-lage="knapp"] .kk-zahl { color: var(--rot); }
.kk-zeile[data-lage="unbekannt"] .kk-spur { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 2px, transparent 2px 4px); }
.kk-zeile[data-lage="unbekannt"] .kk-spur i { display: none; }
.kk-zeile[data-lage="unbekannt"] .kk-zahl { color: var(--leiser); font-weight: 500; }

/* ── Bühne: zwei Spalten am Mac, eine am iPhone ────────────────────────── */

/* Ruhig laden (Frank, Saal 2511; Apple-Muster: Startbildschirm): bis der erste Stand da ist,
   nur der schwarze Grund mit Kopf und Wortmarke, kein leeres Gerüst und keine Platzhalter.
   data-laedt setzt der Server, saal.js nimmt es mit dem ersten Stand weg. */
body[data-laedt] .buehne { visibility: hidden; }

.buehne {
  /* Breite der Nachrichten: Standard je Fensterbreite, per Griff gewünscht (--chats-wunsch
     setzt saal.js), immer in Grenzen; gleiche Zahlen wie chatsGrenzen in saal-hilfen.js. */
  --chats-standard: 680px;
  --chats-min: 600px;
  --chats-max: min(1200px, calc(100vw - 480px));
  --chats-spalte: clamp(var(--chats-min), var(--chats-wunsch, var(--chats-standard)), var(--chats-max));
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--chats-spalte);
  align-items: start;
  /* Was hinausgleitet, schiebt keine Bildlaufleiste auf (clip lässt position: sticky heil). */
  overflow-x: clip;
}
.saal-spalte {
  min-width: 0;
  padding: 28px var(--rand) 72px;
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
}
/* Die Saalspalte richtet sich nach ihrer eigenen Breite (neben den Nachrichten wird sie schmaler). */
.saal-spalte { container-type: inline-size; }
.abschnitt {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--text);
  margin: 44px 0 14px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.jetzt .abschnitt { margin-top: 4px; }
.zaehler { font-size: 15px; font-weight: 600; color: var(--leiser); font-variant-numeric: tabular-nums; }
.leer { color: var(--leise); font-size: 15px; padding: 18px 20px; }

/* ── Jetzt im Saal: das Plakat und das Band der Stationen ──────────────── */

.vorfuehrung {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 24px;
  padding: 30px;
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: 0 36px;
  align-items: end;
  background: linear-gradient(180deg, #131315 0%, #0a0a0b 100%);
  box-shadow: inset 0 0 0 .5px var(--linie);
}
/* Projektorlicht von links oben: eine einzige, ruhige Lichtquelle */
.vorfuehrung::before {
  content: "";
  position: absolute;
  inset: -40% 30% 20% -25%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(232, 180, 90, .22), rgba(232, 180, 90, .06) 60%, transparent);
  animation: licht-an 1.6s var(--weich) both;
  pointer-events: none;
}
.vorfuehrung[data-lage="fehler"]::before { background: radial-gradient(closest-side, rgba(255, 69, 58, .16), transparent); }
.vorfuehrung[data-lage="ruhig"]::before { opacity: .45; }

.plakat {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(246, 220, 168, .16), transparent 60%),
    linear-gradient(180deg, #2a2014 0%, #120e08 62%, #070605 100%);
  box-shadow:
    0 28px 50px -18px rgba(0, 0, 0, .9),
    0 0 60px -10px rgba(232, 180, 90, .25),
    inset 0 0 0 .5px rgba(255, 255, 255, .14);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px 12px;
  transition: box-shadow .8s var(--weich);
}
.plakat-ueber { font-size: 13px; font-weight: 600; color: var(--gold-hell); letter-spacing: .02em; }
.plakat-nummer {
  font-size: 64px;
  line-height: .95;
  font-weight: 800;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(170deg, var(--creme) 15%, var(--gold) 65%, #d98a2b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-top: 2px;
}
.plakat-figur {
  width: 82%;
  margin-top: auto;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .55));
  transition: opacity .6s var(--weich);
}
.plakat-figur.wechselt { opacity: 0; }
.plakat-fuss {
  margin-top: 10px;
  font-size: 8px;
  padding-top: 8px;
  border-top: .5px solid rgba(251, 238, 211, .18);
  width: 100%;
  text-align: center;
}
.plakat-leer { margin: auto; width: 46%; opacity: .5; }

.vorfuehrung > .plakat { grid-row: 1 / span 2; align-self: center; }
.vorfuehrung-text { min-width: 0; grid-column: 2; }
.vorfuehrung > .band { grid-column: 2; }
.vorfuehrung-titel { font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -.025em; color: var(--text); }
.vorfuehrung-unter { margin-top: 6px; font-size: 17px; color: var(--leise); }
.plattformen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.kapsel {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--leise);
  background: rgba(255, 255, 255, .06);
  white-space: nowrap;
}
.kapsel.gold { color: var(--gold-hell); background: var(--gold-hauch); }
/* Blockiert (#79): Hinweis-Plakette wie in Einstellungen, im Rot des Saals (Frank, Saal 1311: „Rot, nicht gelb“) */
.kapsel.blockiert { gap: 4px; padding-left: 7px; color: var(--rot); background: rgba(255, 69, 58, .16); font-weight: 600; }
/* Dieselbe Marke im Fließtext für das Stichwort „Blocker“ (Frank, Saal 1946): nur mittig in der Zeile, etwas niedriger. */
.kapsel.blocker-marke { height: 20px; vertical-align: middle; }
.blockiert-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 12px; }
.blockiert-zeile[hidden] { display: none; }
.blockiert-grund { font-size: 14px; color: var(--leise); }

.lage { margin-top: 24px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.lage-was { font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--creme); }
.lage-wann { font-size: 15px; color: var(--leise); font-variant-numeric: tabular-nums; }
.vorfuehrung[data-lage="fehler"] .lage-was { color: var(--rot); }
.lage-notiz { margin-top: 4px; font-size: 14px; color: var(--leise); }

/* Das Band: die Stationen aus einstellungen.json (seit der Release-Planung sechs), verbunden wie ein Fortschrittsbalken */
.band {
  margin-top: 26px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
.station { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.station::after {
  content: "";
  position: absolute;
  top: 11px;
  left: calc(50% + 16px);
  width: calc(100% - 32px);
  height: 2px;
  border-radius: 1px;
  background: var(--linie-stark);
  transition: background-color .8s var(--weich);
}
.station:last-child::after { display: none; }
.station[data-zustand="fertig"]::after, .station[data-zustand="uebersprungen"]::after { background: var(--gold); }
.punkt {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .24);
  color: #000;
  transition: background-color .6s var(--weich), box-shadow .6s var(--weich);
}
.punkt svg { position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; opacity: 0; transition: opacity .4s; }
.station[data-zustand="fertig"] .punkt { background: var(--gold); box-shadow: none; }
.station[data-zustand="fertig"] .punkt .s-haken { opacity: 1; }
.station[data-zustand="fehler"] .punkt { background: var(--rot); box-shadow: none; }
.station[data-zustand="fehler"] .punkt .s-ausruf { opacity: 1; }
.station[data-blockiert] .punkt { box-shadow: inset 0 0 0 2px var(--rot); }
.station[data-blockiert] .punkt .s-ausruf { opacity: 1; color: var(--rot); }
.station[data-zustand="uebersprungen"] .punkt { box-shadow: inset 0 0 0 1.5px rgba(232, 180, 90, .5); }
.station[data-zustand="laeuft"] .punkt { box-shadow: inset 0 0 0 2px var(--gold); }
.station[data-zustand="laeuft"] .punkt::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
}
.station[data-zustand="laeuft"] .punkt::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(232, 180, 90, .45), transparent);
  animation: atmen 2.8s ease-in-out infinite;
}
.station-name { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--leise); padding: 0 4px; transition: color .6s; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.station[data-zustand="laeuft"] .station-name, .station[data-zustand="fertig"] .station-name { color: var(--creme); }
.station[data-zustand="fehler"] .station-name { color: var(--rot); }
.station-zeit { margin-top: 2px; font-size: 12px; color: var(--leiser); font-variant-numeric: tabular-nums; min-height: 17px; }
.station[data-zustand="laeuft"] .station-zeit { color: var(--gold-hell); }

/* Fortschritt des Releases (Release-Planung): der Kontenbalken, darunter eine Zeile wie in der Ticketliste */
.vorfuehrung > .bau-fortschritt { grid-column: 1 / -1; display: grid; gap: 6px; max-width: 520px; margin-top: 4px; }
.bau-fortschritt .zeile-unter { margin-top: 0; }

/* Tickets in diesem Bau (#78): aufklappbar wie die Erinnerungszeile, darin die Zeilen der Ticketliste */
.vorfuehrung > .bau-tickets { grid-column: 1 / -1; margin-top: 4px; }
.bau-tickets summary { display: inline-flex; align-items: baseline; gap: 6px; font-size: 14px; font-weight: 600; color: var(--leise); cursor: pointer; list-style: none; border-radius: 8px; }
.bau-tickets summary::-webkit-details-marker { display: none; }
.bau-tickets summary::before { content: "›"; color: var(--gold); font-weight: 700; display: inline-block; transition: transform .2s; }
.bau-tickets[open] summary::before { transform: rotate(90deg); }
.bau-tickets summary:hover { color: var(--text); }
.bau-tickets .gruppe { margin-top: 10px; background: rgba(255, 255, 255, .03); }
.bau-tickets li[data-zu="1"] .zeile-titel { color: var(--leise); }
.bau-tickets .zeile > .kapsel { flex: none; }

@keyframes atmen { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ── Programm: Vorstellungen mit Uhrzeit (wie die stündliche Wetterkarte) ── */

.vorstellungen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 12px;
}
.vorstellung {
  position: relative;
  padding: 16px 18px 17px;
  border-radius: 18px;
  background: var(--karte);
  box-shadow: inset 0 0 0 .5px var(--linie);
  display: flex;
  flex-direction: column;
  min-height: 132px;
  transition: opacity .6s var(--weich);
}
.vorstellung-tag { font-size: 12px; font-weight: 600; color: var(--leiser); min-height: 17px; }
.vorstellung-uhr { font-size: 30px; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--creme); margin-top: 2px; }
.vorstellung-titel { margin-top: 8px; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--text); }
.vorstellung-notiz { margin-top: 2px; font-size: 13px; color: var(--leise); }
.vorstellung .kapsel { align-self: flex-start; margin-top: auto; }
.vorstellung-titel + .kapsel, .vorstellung-notiz + .kapsel { margin-top: 12px; }
.vorstellung[data-wann="naechste"] {
  background: linear-gradient(180deg, rgba(232, 180, 90, .13), rgba(232, 180, 90, .04)), var(--karte);
  box-shadow: inset 0 0 0 .5px rgba(232, 180, 90, .35);
}
.vorstellung[data-wann="naechste"] .vorstellung-uhr { color: var(--gold); }
.vorstellung[data-wann="naechste"] .vorstellung-tag { color: var(--gold-hell); }
.vorstellung[data-wann="vorbei"] { opacity: .45; }
.vorstellung[data-blockiert] { box-shadow: inset 0 0 0 .5px rgba(255, 69, 58, .6); }
.vorstellung .blockiert-grund { font-size: 13px; }
.vorstellung-kapseln { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 12px; }
.vorstellung-kapseln .kapsel { margin-top: 0; }

/* ── Release-Karte aus dem Programm (Frank, Saal 2111) ─────────────────────
   Apple-Muster: die Karte in „Heute“ im App Store, die sich beim Antippen groß
   öffnet. Ein Release im Programm gibt beim Drücken leicht nach; die Karte
   ist derselbe Kasten wie der Hero, auf einem dunklen Blatt über allem. Das X
   sitzt, wo im Hero der Pause-Knopf sitzt. */
.vorstellung[role="button"] { cursor: pointer; transition: opacity .6s var(--weich), transform .2s var(--weich), filter .2s; }
.vorstellung[role="button"]:hover { filter: brightness(1.12); }
.vorstellung[role="button"]:active { transform: scale(.97); }
.vorstellung[role="button"]:focus-visible { border-radius: 18px; }
.release-blatt {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(28px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
  background: rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  animation: blatt-auf .25s var(--weich) backwards;
}
.release-blatt[hidden] { display: none; }
.release-blatt > .release-karte {
  width: min(880px, 100%);
  height: max-content;
  margin: auto 0;
  box-shadow: inset 0 0 0 .5px var(--linie-stark), 0 40px 90px -24px rgba(0, 0, 0, .9);
  animation: karte-auf .35s var(--weich) backwards;
  transition: transform .2s var(--weich);
}
.vorfuehrung > .release-zu { position: absolute; top: 18px; right: 18px; z-index: 2; background: var(--karte); box-shadow: inset 0 0 0 .5px var(--linie); }
.vorfuehrung:has(> .release-zu) .vorfuehrung-titel { padding-right: 44px; }
body[data-blatt="1"] { overflow: hidden; }
@keyframes blatt-auf { from { opacity: 0; } }
@keyframes karte-auf { from { opacity: 0; transform: translateY(28px) scale(.97); } }

/* ── Einplanen (#122, Frank, Saal 2562 bis 2566) ───────────────────────────
   Apple-Muster: das runde „+“ am Ende einer Reihe (Home, Kurzbefehle), keine
   Kachel; dahinter das Blatt „Neues Ereignis“ aus dem Kalender. Das Blatt
   ist dasselbe dunkle Blatt wie bei der Release-Karte, die Auswahl die
   Optionen der Rückfrage als gruppierte Liste, die Vorschau eines Baus die
   Baukarte von oben. */
.vorstellung-plus {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 132px;
  justify-self: start;
  padding: 0 14px;
}
.plus-knopf {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold);
  background: var(--gold-hauch);
  box-shadow: inset 0 0 0 .5px rgba(232, 180, 90, .35);
  transition: background-color .2s var(--weich), transform .2s var(--weich), box-shadow .2s var(--weich);
}
.plus-knopf:hover { background: rgba(232, 180, 90, .22); box-shadow: inset 0 0 0 .5px rgba(232, 180, 90, .6), 0 0 24px -6px rgba(232, 180, 90, .55); }
.plus-knopf:active { transform: scale(.94); }
.plus-knopf:focus-visible { border-radius: 50%; }
.plus-wort { font-size: 12px; font-weight: 600; color: var(--leise); }
.vorstellungen > .leer + .vorstellung-plus { min-height: 0; padding: 6px 0 0; flex-direction: row; }

.plan-blatt > .plan-karte {
  position: relative;
  container-type: inline-size;
  width: min(640px, 100%);
  height: max-content;
  margin: auto 0;
  padding: 26px 24px 24px;
  border-radius: 24px;
  background: linear-gradient(180deg, #151517 0%, #0c0c0d 100%);
  box-shadow: inset 0 0 0 .5px var(--linie-stark), 0 40px 90px -24px rgba(0, 0, 0, .9);
  animation: karte-auf .35s var(--weich) backwards;
}
.plan-karte { display: flex; flex-direction: column; gap: 18px; }
.plan-karte > .release-zu { position: absolute; top: 18px; right: 18px; z-index: 2; background: var(--karte-hell); box-shadow: inset 0 0 0 .5px var(--linie); }
.plan-titel { font-size: 28px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; color: var(--text); padding-right: 44px; }
.plan-unter { margin-top: -12px; font-size: 15px; color: var(--leise); }
.plan-abschnitt { display: flex; flex-direction: column; gap: 8px; }
.plan-ueber { margin: 0 4px; font-size: 13px; font-weight: 600; color: var(--leiser); }
.plan-karte .gruppe { background: var(--karte-hell); }
.plan-karte .frage-optionen { border-top: 0; }
.plan-karte .frage-option:disabled:not([data-gewaehlt="1"]) { opacity: .45; }
.plan-karte .frage-option[data-gewaehlt="1"] b { color: var(--gold-hell); }
.plan-wann { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.plan-feld-name { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--leise); }
.plan-feld { width: 100%; height: 44px; color-scheme: dark; accent-color: var(--gold); font-variant-numeric: tabular-nums; }
.plan-karte .plan-baukarte { grid-template-columns: 132px minmax(0, 1fr); gap: 0 24px; padding: 22px; border-radius: 20px; }
.plan-baukarte .plakat-nummer { font-size: 40px; }
.plan-baukarte .vorfuehrung-titel { font-size: 28px; }
.plan-kachel { grid-template-columns: minmax(0, 220px); }
.plan-wirkung { margin: 2px 4px 0; }
.plan-fehler { margin: 0 4px; font-size: 14px; color: var(--rot); }
.plan-fehler[hidden] { display: none; }
.plan-aktionen { margin-top: 0; }
.plan-aktionen .knopf-gold:disabled { background: #3a3a3c; color: var(--leiser); }

/* ── Besetzung ─────────────────────────────────────────────────────────── */

.besetzung {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.mitglied {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 12px 18px;
  border-radius: 18px;
  background: var(--karte);
  box-shadow: inset 0 0 0 .5px var(--linie);
  transition: background .8s var(--weich), box-shadow .8s var(--weich);
}
.mitglied[data-zustand="arbeitet"] {
  background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--farbe, var(--gold)) 14%, transparent), transparent 70%), var(--karte);
  box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--farbe, var(--gold)) 30%, transparent);
}
.mitglied { position: relative; }
/* Wolke rechts oben, wenn der Agent auf dem Hetzner läuft (#171, Frank, Saal 3285), Creme wie die übrigen Kartensymbole. */
.mitglied-wolke { position: absolute; top: 10px; right: 10px; display: inline-flex; color: var(--creme); opacity: .85; }
.mitglied .avatar { width: 68px; height: 68px; }
.mitglied[role="button"] { cursor: pointer; }
.mitglied[role="button"]:hover { box-shadow: inset 0 0 0 .5px var(--linie-stark); }
.mitglied-name { margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--text); }
.mitglied-beruf { margin-top: 1px; font-size: 12px; color: var(--leiser); }
.mitglied-zustand {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--leise);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mitglied-zustand b { font-weight: 600; color: var(--creme); }
.mitglied[data-zustand="arbeitet"] .mitglied-zustand b { color: var(--gold); }
.mitglied[data-zustand="frei"] .mitglied-zustand b,
.mitglied[data-zustand="alt"] .mitglied-zustand b,
.mitglied[data-zustand="unbekannt"] .mitglied-zustand b,
.mitglied[data-zustand="pausiert"] .mitglied-zustand b { color: var(--leise); }

/* Stand der Meldung (#166): leise darunter; älter als 30 Minuten wird die ganze Statuszeile grau. */
.mitglied-stand { margin-top: 2px; font-size: 11px; color: var(--leiser); }
.mitglied-stand:empty { display: none; }
.mitglied[data-veraltet="1"] .mitglied-zustand,
.mitglied[data-veraltet="1"] .mitglied-stand,
.tabelle tr[data-veraltet="1"] .spalte-stand { opacity: .5; }

/* ── Konten (wie das Batterien-Widget) ─────────────────────────────────── */

.konten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.konto-karte { padding: 16px 18px; border-radius: 18px; background: var(--karte); box-shadow: inset 0 0 0 .5px var(--linie); display: flex; flex-direction: column; gap: 12px; }
.konto-karte[data-aktiv="0"] { opacity: .5; transition: opacity .3s; }
.konto-kopf { display: flex; flex-direction: column; gap: 1px; }
.konto-rechner { font-size: 12px; font-weight: 600; color: var(--gold-hell); text-transform: none; }
.konto-name { font-size: 17px; font-weight: 700; color: var(--text); }
.konto-plan { font-size: 13px; color: var(--leise); }
/* Aktiv (#121): das angemeldete Konto trägt oben rechts die goldene Plakette, wie die Konten in Einstellungen. */
.konto-kopf:has(.konto-aktiv) { position: relative; padding-right: 64px; }
.konto-aktiv { position: absolute; top: 0; right: 0; }
/* Nebeneinander nur, wenn beide Füllstände Platz haben (#134), sonst untereinander */
.konto-balken-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
/* Guthaben (#72) als eigene Zeile unter 5 Stunden und Woche, über die ganze Breite wie die Speicheranzeige. */
.konto-balken-reihe .konto-guthaben { grid-column: 1 / -1; }
.konto-balken { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: baseline; }
.konto-balken-titel { font-size: 12px; font-weight: 600; color: var(--leise); white-space: nowrap; }
.konto-balken-wert { font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.konto-balken-wert small { font-size: 12px; font-weight: 500; color: var(--leise); }
.konto-spur { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.konto-spur i { display: block; height: 100%; border-radius: inherit; background: var(--gold); transition: width .6s var(--weich); }
/* Verbrauch wächst (Frank, Saal 441): Gold, ab 80 % Orange, ab 95 % Rot */
.konto-balken[data-lage="warnung"] .konto-spur i { background: var(--orange); }
.konto-balken[data-lage="warnung"] .konto-balken-wert { color: var(--orange); }
.konto-balken[data-lage="knapp"] .konto-spur i { background: var(--rot); }
.konto-balken[data-lage="knapp"] .konto-balken-wert { color: var(--rot); }
.konto-balken[data-lage="unbekannt"] .konto-balken-wert { color: var(--leiser); font-weight: 500; }
.konto-balken[data-lage="unbekannt"] .konto-spur { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 4px, transparent 4px 8px); }
.konto-balken[data-lage="unbekannt"] .konto-spur i { display: none; }
.konto-reset { grid-column: 1 / -1; font-size: 11px; color: var(--leiser); font-variant-numeric: tabular-nums; }
/* Tempo (#126) über die ganze Breite wie das Guthaben; die Zahl in Gold, solange Tokens fließen. */
.konto-balken-reihe .konto-tempo { grid-column: 1 / -1; }
.konto-tempo[data-lage="fliesst"] .konto-balken-wert { color: var(--gold-hell); }
/* Laufbuch (#146; Apple-Muster: Bildschirmzeit). Bausteine der Konten: Balken, Spur, Zahl.
   Die Spur steht hier senkrecht, je Abschnitt eine Säule, gestapelt nach Art in Popcorn-Gold-Tönen. */
.lb-kopf { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); align-items: start; }
.lb-kopf .konto-tempo { grid-column: auto; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.lb-kopf .konto-balken-wert { text-align: left; font-size: 24px; letter-spacing: -.01em; }
.lb-kopf .konto-reset { white-space: normal; }
.lb-uebersicht { padding: 14px 14px 12px; display: grid; gap: 14px; }
/* Schmale Spalte im Gedächtnis: die Balkenlisten stehen untereinander wie in iPhone-Speicher. */
.lb-arten, .lb-details .konto-balken-reihe { grid-template-columns: minmax(0, 1fr); }
.lb-saeulen { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; align-items: end; }
.lb-spalte { display: grid; justify-items: center; gap: 6px; padding: 4px 0 2px; border-radius: 10px; min-width: 0; }
.lb-spalte:hover { background: rgba(255, 255, 255, .04); }
.lb-spalte[aria-pressed="true"] { background: var(--gold-hauch); }
.lb-spalte[aria-pressed="true"] .konto-balken-titel { color: var(--gold-hell); }
.lb-feld { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 132px; }
.konto-spur.lb-saeule { display: flex; flex-direction: column-reverse; width: min(26px, 70%); height: 0; min-height: 0; border-radius: 6px; transition: height .6s var(--weich); }
.konto-spur.lb-saeule i { display: block; width: 100%; border-radius: 0; flex: none; }
.lb-spalte .konto-balken-titel { font-size: 11px; }
/* Die Arten: Ausgabe am kräftigsten (am teuersten), Cache lesen am leisesten (am günstigsten). */
.konto-spur i[data-teil="ausgabe"] { background: var(--gold); }
.konto-spur i[data-teil="cacheSchreiben"] { background: var(--gold-tief); }
.konto-spur i[data-teil="eingabe"] { background: var(--gold-hell); }
.konto-spur i[data-teil="cacheLesen"] { background: color-mix(in srgb, var(--gold) 55%, transparent); }
.konto-spur i[data-teil="ohneTeile"] { background: rgba(255, 255, 255, .26); }
/* Rechner (#125, #126): Geräteliste wie in Einstellungen, über den Konten. Bausteine aus dem Gedächtnis (.gedaechtnis-zeile). */
.rechner:not(:empty) { margin-bottom: 12px; }
.rechner-zeile .gedaechtnis-symbol { color: var(--gold); background: var(--gold-hauch); }
.rechner-zeile .gedaechtnis-zeile-text small { font-size: 13px; color: var(--leise); }
.rechner-zeile .rechner-dienste { color: var(--leiser); }
.rechner-zeile .rechner-wer { float: none; margin: 0; }
.rechner-tempo { white-space: nowrap; }
.rechner-tempo[data-lage="fliesst"] { color: var(--gold-hell); font-weight: 600; }
.rechner-zeile[aria-expanded="true"] .chevron { transform: rotate(90deg); }
.rechner-zeile .chevron { transition: transform .2s var(--weich); }
.rechner-hinweis { margin: 0; padding: 0 16px 12px 60px; border-top: 0 !important; }
.rechner-auswahl { background: var(--karte-hell); }
.rechner-auswahl > * + * { border-top: .5px solid var(--linie); }
.rechner-auswahl .gedaechtnis-zeile { padding-left: 60px; }
/* iPhone: die Avatare rücken unter den Text, damit Konto und Dienste die Breite behalten. */
@media (max-width: 640px) {
  .rechner-zeile { flex-wrap: wrap; row-gap: 6px; }
  .rechner-zeile .gedaechtnis-zeile-text { flex: 1 1 0; }
  .rechner-zeile .rechner-wer { order: 10; flex-basis: 100%; padding-left: 44px; }
}
.konto-hinweis { font-size: 12px; color: var(--leise); }
.konto-agenten { font-size: 13px; color: var(--text); }
.konto-stand { font-size: 11px; color: var(--leiser); }
/* ── Eigene Wochengrenze (#163, Frank, Saal 3205) ─────────────────────────────
   Apple-Muster: die Ladegrenze der Batterie (Marke auf dem Füllstand) und
   Bildschirmzeit „App-Limits“ (Einstellungsblatt). Das Zahnrad ist der runde
   Knopf der Blätter (.abmelden); es erscheint beim Überfahren mit der Maus und
   beim Tastaturfokus, ohne Maus steht es klein und leise immer da. Der Platz
   bleibt reserviert, die Karte springt nicht. */
.konto-karte { position: relative; }
.konto-zahnrad { position: absolute; top: 12px; right: 12px; z-index: 1; opacity: 0; transition: opacity .2s var(--weich), background-color .2s, color .2s; }
.konto-zahnrad:focus-visible { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .konto-karte:hover .konto-zahnrad { opacity: 1; }
}
@media (hover: none), (pointer: coarse) {
  .konto-zahnrad { opacity: .6; width: 28px; height: 28px; top: 10px; right: 10px; }
}
.konto-karte:has(> .konto-zahnrad) .konto-kopf { padding-right: 36px; }
.konto-karte:has(> .konto-zahnrad) .konto-kopf:has(.konto-aktiv) { padding-right: 100px; }
.konto-karte:has(> .konto-zahnrad) .konto-aktiv { right: 36px; }
/* Die Marke: ein schmaler Strich in Creme über die Spur hinaus, mit Abstand zur Füllung. */
.konto-spur:has(.konto-grenze) { position: relative; overflow: visible; }
.konto-grenze { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--creme); box-shadow: 0 0 0 1.5px var(--karte); pointer-events: none; }
.konto-blatt .konto-grenze { box-shadow: 0 0 0 1.5px var(--karte-hell); }
/* Blatt „Konto“: die Bausteine des Blatts „Einplanen“, dazu Schieberegler und Prozentfeld in einer Zeile. */
.konto-grenze-gruppe { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 16px; }
.konto-grenze-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 84px; align-items: center; gap: 14px; }
.konto-schieber { width: 100%; height: 28px; margin: 0; accent-color: var(--gold); cursor: pointer; }
.konto-grenze-zeile > * { min-width: 0; }
.konto-prozent-feld { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--leise); }
/* Schmal am iPhone: das Feld darf nicht breiter werden als seine Spalte, sonst schiebt es das Blatt über den Rand. */
.konto-prozent { min-width: 0; width: 100%; height: 38px; text-align: right; }
/* ── Ende Eigene Wochengrenze */

/* ── Gruppierte Listen (wie in den Einstellungen) ──────────────────────── */

.gruppe {
  border-radius: 16px;
  background: var(--karte);
  box-shadow: inset 0 0 0 .5px var(--linie);
  overflow: hidden;
}
.tabelle { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabelle th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--leiser);
  padding: 12px 16px 8px;
}
.tabelle td { padding: 12px 16px; vertical-align: top; border-top: .5px solid var(--linie); }
.tabelle .spalte-nr { width: 56px; color: var(--leiser); font-variant-numeric: tabular-nums; }
.tabelle .spalte-stand { width: 210px; }
.tabelle .spalte-wann { width: 150px; color: var(--leise); font-variant-numeric: tabular-nums; }
.tabelle tr[data-stand="fertig"] .spalte-task { color: var(--leise); }
.stand { display: inline-flex; align-items: flex-start; gap: 8px; }
.stand-zeichen { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; }
.stand-zeichen svg { width: 12px; height: 12px; }
.stand-text b { font-weight: 500; color: var(--text); }
.stand-text small { display: block; font-size: 12px; color: var(--leiser); }
[data-stand="fertig"] .stand-zeichen { background: var(--gold); color: #000; }
[data-stand="laeuft"] .stand-zeichen { box-shadow: inset 0 0 0 1.5px var(--gold); }
[data-stand="laeuft"] .stand-zeichen::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
[data-stand="wartet"] .stand-zeichen { color: var(--leise); }
[data-stand="wartet"] .stand-zeichen svg, [data-stand="frank"] .stand-zeichen svg { width: 18px; height: 18px; }
[data-stand="offen"] .stand-zeichen { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22); }
[data-stand="frank"] .stand-zeichen { color: var(--gold-hell); }
[data-stand="frank"] .stand-text b { color: var(--gold-hell); }
[data-stand="fehler"] .stand-zeichen { background: var(--rot); color: #000; }

/* Offene Rückfragen an einer Aufgabe (Apple-Muster: Kennzahl wie in Mail und
   Erinnerungen, die Zeile klappt inline auf, kein Modal) */
.tabelle tr[data-fragen] { cursor: pointer; transition: background-color .15s; scroll-margin-top: calc(var(--kopf-hoehe) + env(safe-area-inset-top) + 12px); }
.tabelle tr[data-fragen]:hover { background: rgba(255, 255, 255, .035); }
.tabelle tr[data-offen="1"] { background: var(--gold-hauch); }
.aufgabe-knopf { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; color: inherit; font: inherit; }
.aufgabe-haupt { flex: 1; min-width: 0; }
.aufgabe-knopf .frage-zahl { flex: none; margin-top: 0; }
.aufgabe-knopf .chevron { margin-top: 5px; transition: transform .2s var(--weich); }
.aufgabe-knopf[aria-expanded="true"] .chevron { transform: rotate(90deg); opacity: .7; }
.aufgabe-unter { display: block; margin-top: 2px; font-size: 12px; color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabelle tr.frage-reihe > td { border-top: 0; padding: 2px 16px 16px 72px; }
.frage-eingebettet + .frage-eingebettet { margin-top: 14px; }
.frage-herkunft { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 6px; font-size: 12px; color: var(--leise); }
.frage-im-chat { flex: none; font-size: 12px; font-weight: 600; color: var(--gold); }
.frage-im-chat:hover { text-decoration: underline; }

/* Wer gerade daran arbeitet (#80; Apple-Muster: Personenbildchen in geteilten
   Notizen und Erinnerungen): kleine Avatare mit Schein in der Teamfarbe, rechts
   in der Zeile, mehrere überlappend wie in den Kacheln von Pausenraum und Schlafraum. */
.aufgabe-wer { float: right; display: flex; margin: 0 0 0 12px; padding-top: 1px; }
.aufgabe-wer .avatar { width: 22px; height: 22px; --schein-weite: -28%; }
.aufgabe-wer .avatar + .avatar { margin-left: -7px; }
.aufgabe-wer .avatar-kreis { box-shadow: 0 0 0 1.5px var(--karte); }
/* iPhone: die Zelle ist ein Block, die Avatare bleiben in ihr und schieben „Wann“ nicht weg. */
@media (max-width: 640px) { .tabelle .spalte-task { display: flow-root; } }
.frage-eingebettet .blase-frage { border-radius: 18px; width: min(520px, 100%); }

.paar { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0 20px; }
.liste li { position: relative; }
.liste li + li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 0;
  height: .5px;
  background: var(--linie);
}
.zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 16px;
  transition: background-color .15s;
}
a.zeile:hover { background: rgba(255, 255, 255, .035); }
.zeile-haupt { flex: 1; min-width: 0; }
.zeile-titel { font-size: 15px; color: var(--text); line-height: 1.35; }
.zeile-titel .nr { color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 6px; }
.zeile-unter { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: 13px; color: var(--leise); }
.zeile-rechts { flex: none; font-size: 13px; color: var(--leiser); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.chevron { flex: none; width: 7px; height: 12px; opacity: .4; }
.hinweis-fehler { color: var(--leise); font-size: 13px; padding: 10px 16px 12px; border-top: .5px solid var(--linie); }

.fusszeile { margin-top: 36px; font-size: 12px; color: var(--leiser); }

/* ── Einstellung „Mitteilungen“ (wie in den Einstellungen) ─────────────── */

.schalter-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 10px 16px;
  cursor: pointer;
}
.schalter-text b { display: block; font-size: 15px; font-weight: 500; color: var(--text); }
.schalter-text small { display: block; margin-top: 1px; font-size: 13px; color: var(--leiser); }
.schalter {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  width: 51px;
  height: 31px;
  border-radius: 999px;
  background: #39393d;
  cursor: pointer;
  transition: background-color .25s var(--weich);
}
.schalter::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .28), 0 1px 1px rgba(0, 0, 0, .16);
  transition: transform .25s var(--weich);
}
.schalter:checked { background: var(--gold); }
.schalter:checked::after { transform: translateX(20px); }
.schalter:disabled { opacity: .4; cursor: default; }
.schalter-zeile:has(.schalter:disabled) { cursor: default; }
.fussnote { margin: 8px 16px 0; font-size: 13px; line-height: 1.4; color: var(--leiser); max-width: 62ch; }

/* ── Nachrichten: Liste der Unterhaltungen und Unterhaltung ─────────────
   Muster: die App Nachrichten. Am Mac Liste und Unterhaltung nebeneinander,
   schmaler und am iPhone Liste → Unterhaltung mit Zurück. */

.chats {
  position: sticky;
  top: calc(var(--kopf-hoehe) + env(safe-area-inset-top));
  height: calc(100dvh - var(--kopf-hoehe) - env(safe-area-inset-top));
  display: grid;
  /* Breite der Seitenleiste (#141; Muster: Seitenleiste in Mail und Finder): Standard 272, per Griff
     gewünscht (--liste-wunsch setzt saal.js), der Unterhaltung bleiben 328; gleiche Zahlen wie listeGrenzen. */
  --liste-standard: 272px;
  --liste-min: 200px;
  --liste-max: min(420px, calc(var(--chats-spalte) - 328px));
  --liste-spalte: clamp(var(--liste-min), var(--liste-wunsch, var(--liste-standard)), var(--liste-max));
  grid-template-columns: var(--liste-spalte) minmax(0, 1fr);
  background: var(--grund-foyer);
  border-left: .5px solid var(--linie);
  min-width: 0;
}

/* Avatare: der Kreis zeigt die Figur groß (Ausschnitt ohne den Goldring der Vorlage).
   Jeder trägt seine Farbe (--farbe, aus besetzung.json über den Stand) als
   weichen Schein dahinter, überall gleich: Liste, Nachrichten, Kopf,
   Besetzung, Runde, @-Vorschläge (Frank, 18.10.2026: „Glow statt Kreis“). */
.avatar { position: relative; isolation: isolate; display: block; flex: none; border-radius: 50%; --schein: 46%; --schein-weite: -20%; }
.avatar-kreis { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #000; }
.avatar-kreis img { width: 100%; height: 100%; transform: scale(1.24); }
.avatar-foyer .avatar-kreis { background: radial-gradient(circle at 50% 35%, #2a2014, #0d0b08 75%); box-shadow: inset 0 0 0 .5px rgba(232, 180, 90, .35); }
.avatar-foyer .avatar-kreis img { transform: scale(.78); }

.unterhaltungen {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: .5px solid var(--linie);
}
/* Der Griff am rechten Rand der Seitenleiste (#141): derselbe Teiler wie bei den Nachrichten. */
.liste-griff { position: absolute; top: 0; bottom: 0; right: -5px; width: 9px; z-index: 5; cursor: col-resize; touch-action: none; outline: none; }
.liste-griff::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 3px; border-radius: 2px; background: transparent; transition: background-color .15s; }
.liste-griff:hover::after, .liste-griff:focus-visible::after, body[data-zieht="liste"] .liste-griff::after { background: var(--gold); }
body[data-zieht="liste"] .chats-griff::after { background: transparent; }
.liste-kopf { flex: none; padding: 18px 16px 10px 20px; }
.liste-kopf h2 { font-size: 22px; font-weight: 700; letter-spacing: -.015em; }
.kanalliste {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 8px 16px;
  scrollbar-width: thin;
  scrollbar-color: #2a2a2e transparent;
}
.kanalliste li.angeheftet + li.angeheftet { margin-top: -6px; }
.kanalliste li.angeheftet:has(+ li.angeheftet) { border-bottom: 0; padding-bottom: 0; }
.kanalliste li.angeheftet { padding-bottom: 6px; margin-bottom: 6px; border-bottom: .5px solid var(--linie); }
/* Der Pausenraum: Kaffeetasse in Creme auf warmem Grund */
.avatar-pause .avatar-kreis { display: grid; place-items: center; color: var(--creme); background: radial-gradient(circle at 50% 35%, #2b1f14, #0d0a07 75%); }
/* Lernendes Gedächtnis: Abgelöstes blasser (steht noch da, sucht aber nicht mehr mit) */
.gedaechtnis-eintrag[data-stand="abgeloest"] .gedaechtnis-text { opacity: .55; }
/* Lernkurve: Kennzahlen untereinander, je zwei Balken wie in Fitness „Trends“ */
.lk-details { display: grid; gap: 14px; }
.lk-kennzahl { display: grid; gap: 6px; }
/* Der Schlafraum: Mondsichel in Creme auf Nachtblau */
.avatar-schlaf .avatar-kreis { display: grid; place-items: center; color: var(--creme); background: radial-gradient(circle at 50% 35%, #1a2033, #07080d 75%); }
/* Foyer und Pausenraum als Kacheln oben (wie angeheftete Unterhaltungen in Nachrichten) */
.kanalliste li.kacheln {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 4px 2px 12px;
  margin-bottom: 6px;
  border-bottom: .5px solid var(--linie);
}
.kanal-kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  min-height: 128px;
  padding: 12px 12px 13px;
  border-radius: 18px;
  background: var(--karte);
  box-shadow: inset 0 0 0 .5px var(--linie);
  text-align: left;
  transition: background-color .15s, box-shadow .15s;
}
.kanal-kachel:hover { background: var(--karte-hell); }
.kanal-kachel[aria-current="true"] { background: linear-gradient(180deg, rgba(232, 180, 90, .14), rgba(232, 180, 90, .05)), var(--karte); box-shadow: inset 0 0 0 .5px rgba(232, 180, 90, .4); }
.kachel-oben { position: relative; display: flex; align-items: flex-start; width: 100%; gap: 6px; margin-bottom: 4px; }
.kachel-oben > .avatar { width: 52px; height: 52px; }
/* Die zuletzt Aktiven als kleine Runde unten rechts am Gruppenbild, mit Schein */
.kachel-runde { position: absolute; left: 28px; top: 34px; display: flex; }
.kachel-runde .avatar { width: 20px; height: 20px; --schein-weite: -28%; }
.kachel-runde .avatar + .avatar { margin-left: -8px; }
.kachel-runde .avatar-kreis { box-shadow: 0 0 0 1.5px var(--karte); }
.kachel-ecke { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.kachel-zeit { font-size: 12px; color: var(--leiser); font-variant-numeric: tabular-nums; }
.kachel-zahl {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--gold);
  color: #000;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.kachel-name { font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.kachel-letzte { font-size: 13px; line-height: 1.3; }
.kanal-kachel:has(.kachel-zahl) .kachel-letzte { color: var(--text); }

.kanal-zeile {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px 9px 2px;
  border-radius: 12px;
  text-align: left;
  transition: background-color .15s;
}
.kanal-zeile:hover { background: rgba(255, 255, 255, .04); }
.kanal-zeile[aria-current="true"] { background: var(--gold-hauch); }
.ungelesen-punkt { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.ungelesen-punkt[hidden] { display: block; visibility: hidden; }
.kanal-zeile .avatar { width: 48px; height: 48px; }
.kanal-haupt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kanal-oben { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.kanal-name { flex: none; font-size: 15px; font-weight: 600; color: var(--text); }
.kanal-lage { min-width: 0; font-size: 12px; color: var(--leiser); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kanal-lage[data-lage="arbeitet"] { color: var(--gold); }
.kanal-lage[data-lage="wartet"] { color: var(--leise); }
.kanal-zeit { margin-left: auto; padding-left: 6px; flex: none; font-size: 12px; color: var(--leiser); font-variant-numeric: tabular-nums; }
.kanal-letzte {
  font-size: 13px;
  line-height: 1.3;
  color: var(--leise);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.kanal-zeile:has(.ungelesen-punkt:not([hidden])) .kanal-letzte { color: var(--text); }

/* Der Schein in der eigenen Farbe; wer gerade arbeitet, leuchtet etwas
   kräftiger und atmet sanft (ohne Bewegung, wenn „Bewegung reduzieren“ an ist). */
.avatar::before {
  content: "";
  position: absolute;
  inset: var(--schein-weite);
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--farbe, transparent) var(--schein), transparent) 66%,
    color-mix(in srgb, var(--farbe, transparent) calc(var(--schein) * .35), transparent) 83%,
    transparent 100%);
  transition: opacity .8s var(--weich);
  pointer-events: none;
}
.avatar-foyer::before { display: none; }
[data-zustand="arbeitet"] > .avatar { --schein: 82%; --schein-weite: -30%; }
[data-zustand="arbeitet"] > .avatar::before { animation: schein-atmen 4.5s ease-in-out infinite; }
@keyframes schein-atmen { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }

/* Die Unterhaltung */
.foyer {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
}
.foyer-kopf {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 18px 12px;
  border-bottom: .5px solid var(--linie);
}
.zurueck {
  display: none;
  align-items: center;
  gap: 6px;
  margin: 0 -4px 0 -8px;
  padding: 4px 6px;
  border-radius: 10px;
  color: var(--gold);
  font-size: 16px;
}
.zurueck svg { flex: none; }
.zurueck-zahl {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--gold-hauch);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.kanal-kopf { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.kanal-bild { display: flex; }
.kanal-bild .avatar { width: 40px; height: 40px; }
.kanal-text { min-width: 0; }
.kanal-text h2 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
/* Wo ein Agent läuft (#73; Frank: „Das Ortszeichen darf aber nicht störend wirken!“):
   kleines Zeichen mit Namen in der leisesten Textfarbe, ohne Fläche und Rahmen. */
.ort { display: inline-flex; align-items: center; gap: 3px; color: var(--leiser); font-weight: 500; white-space: nowrap; vertical-align: -1px; }
.ort svg { flex: none; }
.mitglied-ort { display: flex; justify-content: center; margin-top: 4px; font-size: 11px; }
/* Ort und Modell (#83) in einer leisen Zeile, wie die Unterzeile in der Batterie-Liste */
.mitglied-fuss { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 8px; margin-top: 4px; font-size: 11px; max-width: 100%; min-width: 0; }
.mitglied-fuss .mitglied-ort { margin-top: 0; font-size: inherit; }
.mitglied-modell { color: var(--leiser); font-weight: 500; white-space: nowrap; }
/* Konto am Rechner des Agenten (#125), so leise wie das Modell. */
.mitglied-konto { color: var(--leiser); font-weight: 500; white-space: nowrap; display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* Rechner und Konto an der Teamkarte (#125, Frank, Saal 2821: „Zeige es IMMER an, aber nur bei Hover.“):
   immer da, sichtbar beim Überfahren mit der Maus, beim Tastaturfokus und am iPhone nach langem
   Drücken (data-wo, Karte 2833, Antwort 2836); der Platz bleibt, die Karte springt nicht. */
.mitglied-wo { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 8px; max-width: 100%; min-width: 0; }
.mitglied .mitglied-wo { opacity: 0; transition: opacity .2s var(--weich); }
.mitglied[data-wo="1"] .mitglied-wo, .mitglied:focus-visible .mitglied-wo { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .mitglied:hover .mitglied-wo { opacity: 1; }
}
/* Halten ist für Rechner und Konto da: kein Markieren und kein Systemmenü an der Karte. */
.mitglied { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.kanal-zustand { margin-top: 1px; font-size: 13px; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kanal-zustand b { font-weight: 600; color: var(--creme); }
.kanal-zustand[data-lage="arbeitet"] b { color: var(--gold); }
.kanal-zustand[data-lage="frei"] b, .kanal-zustand[data-lage="alt"] b, .kanal-zustand[data-lage="unbekannt"] b, .kanal-zustand[data-lage="pausiert"] b { color: var(--leise); }

/* Die Reihe des Teams im Foyer-Kopf: nebeneinander, mit Zustandspunkt */
/* Etwas Luft rundherum, damit der Schein nicht am Rand der Rollfläche abreißt;
   die Grundbreite bleibt 100 % plus Rand, so steht die Reihe immer in eigener Zeile. */
.runde { flex-basis: calc(100% + 12px); display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding: 7px 6px; margin: -6px -6px -5px; }
.runde::-webkit-scrollbar { display: none; }
.foyer[data-kanal="privat"] .runde { display: none; }
.runde-knopf { position: relative; flex: none; border-radius: 50%; }
.runde-knopf .avatar { width: 34px; height: 34px; }
.zustandspunkt {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--leiser);
  box-shadow: 0 0 0 2.5px var(--grund-foyer);
}
.runde-knopf[data-zustand="arbeitet"] .zustandspunkt { background: var(--gold); box-shadow: 0 0 0 2.5px var(--grund-foyer), 0 0 8px rgba(232, 180, 90, .9); }
.runde-knopf[data-zustand="wartet"] .zustandspunkt { background: var(--grund-foyer); box-shadow: inset 0 0 0 2.5px var(--gold-hell), 0 0 0 2.5px var(--grund-foyer); }
.runde-knopf[data-zustand="unbekannt"] .zustandspunkt { display: none; }
.runde-knopf:hover .avatar-kreis { box-shadow: 0 0 0 2px var(--gold-hauch); }

.kanal-hinweis {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  color: var(--leiser);
  border-bottom: .5px solid var(--linie);
}
.kanal-hinweis svg { flex: none; color: var(--leise); }

.verlauf {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 14px 18px;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: #2a2a2e transparent;
}
.verlauf > :first-child { margin-top: auto; }
.trenner { align-self: center; margin: 18px 0 8px; font-size: 12px; font-weight: 500; color: var(--leiser); font-variant-numeric: tabular-nums; text-align: center; }
.aelter-laden { align-self: center; margin: 6px 0 4px; font-size: 13px; color: var(--gold); padding: 4px 10px; border-radius: 999px; }
.aelter-laden:hover { background: var(--gold-hauch); }

.nachricht { display: flex; align-items: flex-end; gap: 10px; margin-top: 2px; max-width: 100%; }
.nachricht.erste { margin-top: 14px; }
/* So groß wie die Runde im Kopf (Frank: „gleich groß wie die oben im Kopf“) */
.nachricht .avatar { width: 34px; height: 34px; visibility: hidden; }
.nachricht.letzte .avatar { visibility: visible; }
.nachricht-koerper { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: calc(100% - 52px); }
.absender { display: flex; align-items: baseline; gap: 6px; margin: 0 0 4px 12px; font-size: 12px; white-space: nowrap; overflow: hidden; max-width: 100%; }
/* Der Name in der Farbe des Absenders (alle über 5 : 1 auf dem Grund, WCAG AA) */
.absender b { font-size: 14px; font-weight: 600; color: var(--farbe, var(--text)); }
.absender span { color: var(--leiser); overflow: hidden; text-overflow: ellipsis; }
.absender time { color: var(--leiser); font-variant-numeric: tabular-nums; }
.absender .uebergabe { flex: none; height: 18px; padding: 0 7px; font-size: 11px; font-weight: 600; }
.blase {
  padding: 8px 13px 9px;
  border-radius: 19px;
  background: var(--blase);
  color: var(--text);
  font-size: 15px;
  line-height: 1.38;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Gegliederte Nachrichten (Apple-Muster: ruhig wie in Notizen) */
.formatiert > * + * { margin-top: 7px; }
.formatiert p { white-space: pre-wrap; }
.formatiert ul, .formatiert ol { padding-left: 1.3em; white-space: normal; }
.formatiert ul { list-style: disc; }
.formatiert ol { list-style: decimal; }
.formatiert li { padding-left: 2px; white-space: pre-wrap; }
.formatiert li + li { margin-top: 3px; }
.formatiert li::marker { color: var(--leise); }
.formatiert .zwischentitel { font-weight: 700; }
.formatiert strong { font-weight: 650; }
.formatiert code { font: .88em/1.3 ui-monospace, "SF Mono", Menlo, monospace; padding: 1px 5px; border-radius: 5px; background: rgba(255, 255, 255, .08); overflow-wrap: anywhere; }
.formatiert a, a.ticketlink { color: var(--gold); text-decoration: underline; text-decoration-color: rgba(232, 180, 90, .45); text-underline-offset: 2px; overflow-wrap: anywhere; }
/* Vorschau an Ticketnummern (#97, Apple-Muster: Vorschau bei Links in Mail und Nachrichten):
   am iPhone gehört der lange Druck der eigenen Vorschau, nicht dem Link-Menü des Systems. */
a.ticketlink { -webkit-touch-callout: none; }
.ticket-vorschau { max-width: min(360px, calc(100vw - 16px)); padding: 12px 14px; display: grid; gap: 4px; }
.ticket-vorschau p { margin: 0; }
.ticket-vorschau-kopf { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.3; }
.ticket-vorschau-kopf b { color: var(--gold); }
.ticket-vorschau-stand { font-size: 12px; font-weight: 600; color: var(--gold-hell); text-transform: none; }
.ticket-vorschau-kurz { font-size: 13px; color: var(--leise); line-height: 1.4; }
.nachricht.eigen .formatiert a { color: #1b1307; text-decoration-color: rgba(0, 0, 0, .4); }
.nachricht.eigen .formatiert code { background: rgba(0, 0, 0, .1); }
/* Codeblock: derselbe Baustein wie `Code`, als Block (Monostil in Notizen); lange Zeilen scrollen in sich,
   die Blase bleibt so breit wie die Unterhaltung. */
.blase.formatiert { max-width: 100%; }
.formatiert pre { margin: 0; font: inherit; max-width: 100%; padding: 8px 11px; border-radius: 9px; background: rgba(255, 255, 255, .08); overflow-x: auto; white-space: normal; }
/* Code kopieren (#96, Frank: „Bei so code snippets will ich die per klick kopieren können“):
   rechts oben am Block ein kleiner Knopf in Popcorn-Gold, Inline-Code kopiert ein Tipp;
   kurz „Kopiert“ als Rückmeldung (Apple-Muster Notizen, Xcode-Dokumentation). */
.codeblock-rahmen { position: relative; }
.codeblock-rahmen pre { padding-right: 40px; }
.code-kopieren { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; min-width: 30px; min-height: 30px; border-radius: 8px; background: #2c2c2f; color: var(--gold); font-size: 15px; line-height: 1; -webkit-user-select: none; user-select: none; }
.code-kopieren:hover { background: #3a3122; }
.code-kopierbar { position: relative; cursor: copy; }
.code-kopieren[data-kopiert]::after, .code-kopierbar[data-kopiert]::after {
  content: attr(data-kopiert); position: absolute; right: 0; bottom: calc(100% + 6px); padding: 3px 8px; border-radius: 7px;
  background: var(--gold); color: #1b1307; font: 600 12px/1.3 -apple-system, system-ui, sans-serif; white-space: nowrap; pointer-events: none;
}
@media (pointer: coarse) {
  .code-kopieren { min-width: 44px; min-height: 44px; top: 0; right: 0; }
  .codeblock-rahmen pre { padding-right: 48px; min-height: 44px; }
}
.formatiert pre code { display: block; padding: 0; border-radius: 0; background: none; white-space: pre; overflow-wrap: normal; line-height: 1.45; }
.formatiert pre:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.nachricht.eigen .formatiert pre { background: rgba(0, 0, 0, .1); }
.nachricht.eigen .formatiert pre code { background: none; }
.nachricht.eigen .formatiert li::marker { color: rgba(0, 0, 0, .55); }
.tabelle-rahmen { overflow-x: auto; max-width: 100%; }
.formatiert table { border-collapse: collapse; font-size: 14px; white-space: normal; }
.formatiert th, .formatiert td { padding: 4px 10px 4px 0; text-align: left; vertical-align: top; border-bottom: .5px solid var(--linie-stark); }
.formatiert th { font-size: 12px; font-weight: 600; color: var(--leise); }
.formatiert tr:last-child td { border-bottom: 0; }

.nachricht:not(.erste) .blase { border-top-left-radius: 6px; }
.nachricht:not(.letzte) .blase { border-bottom-left-radius: 6px; }
/* Erwähnungen in der Farbe des Erwähnten (Frank, 18.10.2026). Auf der dunklen
   Blase mit etwas Weiß aufgehellt (alle über 4,5 : 1), auf Franks goldener
   Blase als Pille in der Teamfarbe mit dunkler Schrift. @Team bleibt Gold. */
.erwaehnung { color: color-mix(in srgb, var(--farbe, var(--gold)) 78%, #fff); font-weight: 600; }
.vorschlag b.vorschlag-name { color: color-mix(in srgb, var(--farbe, var(--text)) 78%, #fff); }

/* Rückfrage als Karte in der Blase (Apple-Muster: interaktive Mitteilung,
   Umfrage in Nachrichten, Aktionsblatt). Optionen als gruppierte Liste. */
.blase-frage { padding: 0; width: min(440px, 100%); background: var(--karte-hell); overflow: hidden; white-space: normal; }
.frage-karte { display: flex; flex-direction: column; }
.frage-kopf {
  align-self: flex-start;
  margin: 12px 14px 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--farbe, var(--gold-hell));
  background: color-mix(in srgb, var(--farbe, var(--gold)) 16%, transparent);
}
.frage-text { margin: 8px 14px 12px; font-size: 15px; line-height: 1.38; color: var(--text); white-space: pre-wrap; }
.frage-optionen { display: flex; flex-direction: column; border-top: .5px solid var(--linie-stark); }
.frage-zeile + .frage-zeile { border-top: .5px solid var(--linie); }
.frage-option {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  text-align: left;
  transition: background-color .15s;
}
.frage-option:not(:disabled):hover { background: rgba(255, 255, 255, .04); }
.frage-option:not(:disabled):active { background: var(--gold-hauch); }
.frage-option:disabled { cursor: default; }
.frage-option-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.frage-label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.frage-label b { font-size: 15px; font-weight: 600; color: var(--text); }
.frage-option small { font-size: 13px; line-height: 1.35; color: var(--leise); }
.frage-empfohlen { font-size: 11px; font-weight: 600; color: var(--farbe, var(--gold-hell)); }
/* Farbfeld und Bild an der Option (#136): rund wie die Farbpunkte in Erinnerungen,
   mit feinem Rand, damit auch Schwarz auf dunklem Grund zu sehen ist; das Bild
   links neben dem Text wie die alternativen App-Symbole in Einstellungen. */
.farbwert { white-space: nowrap; }
.farbfeld { display: inline-block; width: .9em; height: .9em; margin-right: .3em; vertical-align: -.1em; border-radius: 50%; background: var(--farbfeld); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .35), 0 0 0 .5px rgba(0, 0, 0, .4); }
.frage-bild { flex: none; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--karte-hell); box-shadow: inset 0 0 0 .5px var(--linie); }
.frage-bild img { width: 100%; height: 100%; object-fit: contain; }
.frage-bild-symbol { color: var(--gold); }
.frage-haken {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1.5px var(--linie-stark);
  color: transparent;
}
.frage-haken svg { width: 12px; height: 12px; }
.frage-option[data-gewaehlt="1"] .frage-haken, .gedaechtnis-zeile[aria-checked="true"] .frage-haken { background: var(--gold); box-shadow: none; color: #000; }
.frage-option[data-gewaehlt="1"] { background: var(--gold-hauch); }
.frage-karte[data-zustand="beantwortet"] .frage-option:not([data-gewaehlt="1"]) { opacity: .45; }
.frage-karte[data-zustand="beantwortet"] .frage-option[data-gewaehlt="1"] b { color: var(--gold-hell); }
/* Zurückgezogen (#130): alle Optionen gedimmt, keine hervorgehoben; der Grund steht unten. */
.frage-karte[data-zustand="zurueckgezogen"] .frage-option { opacity: .45; }
/* „kramt in seinen Erinnerungen …“: leise Zeile in der Mitte, aufklappbar wie „Vorschau“ (Frank, Saal 643) */
.erinnerung { align-self: center; width: min(560px, 100%); margin: 10px 0 6px; text-align: center; }
.erinnerung summary { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; font-size: 12px; font-weight: 500; color: var(--leise); cursor: pointer; list-style: none; }
.erinnerung summary::-webkit-details-marker { display: none; }
.erinnerung summary::before { content: "›"; color: var(--gold); font-weight: 600; display: inline-block; transition: transform .2s; }
.erinnerung details[open] summary::before { transform: rotate(90deg); }
.erinnerung summary time { color: var(--leiser); font-variant-numeric: tabular-nums; }
.erinnerung-inhalt { margin-top: 8px; padding: 10px 14px; border-radius: 14px; background: var(--karte-hell); text-align: left; font-size: 13px; line-height: 1.4; }
.erinnerung-frage { margin: 0; color: var(--leise); }
.erinnerung-treffer { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.erinnerung-treffer li { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; border-top: 1px solid var(--linie); }
.frage-vorschau { margin: -4px 14px 10px 14px; }
.frage-vorschau summary { font-size: 12px; font-weight: 600; color: var(--gold); cursor: pointer; list-style: none; }
.frage-vorschau summary::-webkit-details-marker { display: none; }
.frage-vorschau summary::before { content: "›"; display: inline-block; margin-right: 5px; transition: transform .2s; }
.frage-vorschau[open] summary::before { transform: rotate(90deg); }
.frage-vorschau pre {
  margin-top: 6px;
  padding: 9px 11px;
  border-radius: 10px;
  background: #0c0c0e;
  box-shadow: inset 0 0 0 .5px var(--linie);
  font: 12px/1.45 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--creme);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 240px;
  overflow: auto;
}
.frage-senden {
  margin: 10px 14px 12px;
  align-self: flex-end;
  height: 32px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--gold);
  color: #000;
  font-size: 14px;
  font-weight: 600;
}
.frage-senden:disabled { background: #3a3a3c; color: var(--leiser); cursor: default; }
/* Das Antwortfeld jeder Karte: sichtbar unter den Knöpfen, Senden daneben */
.frage-frei { display: flex; align-items: flex-end; gap: 8px; padding: 10px 14px 12px; border-top: .5px solid var(--linie-stark); }
.frage-frei-feld {
  resize: vertical;
  min-height: 60px;
  padding: 8px 11px;
  border: 0;
  border-radius: 12px;
  background: var(--karte);
  box-shadow: inset 0 0 0 .5px var(--linie-stark);
  font-size: 16px;
  line-height: 1.35;
  color: var(--text);
  outline: 0;
}
.frage-frei-feld:focus { box-shadow: inset 0 0 0 1px rgba(232, 180, 90, .55); }
.frage-frei .frage-frei-feld { flex: 1; min-width: 0; min-height: 36px; resize: none; }
.frage-frei .frage-senden { margin: 0 0 2px; flex: none; }
.frage-stand { display: flex; align-items: center; gap: 6px; padding: 9px 14px 11px; font-size: 12px; color: var(--leise); border-top: .5px solid var(--linie); }
.frage-stand svg { width: 12px; height: 12px; color: var(--gold); flex: none; }

/* Bilder und Videos in der Unterhaltung (Apple-Muster: Nachrichten) */
.anhaenge { display: flex; flex-direction: column; gap: 3px; margin-bottom: 3px; max-width: 100%; }
.anhaenge.raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(320px, 100%); }
.anhaenge.raster[data-anzahl="3"] > :first-child { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
.anhang {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 18px;
  background: var(--blase);
  max-width: 100%;
}
.anhaenge.raster .anhang { aspect-ratio: 1; border-radius: 6px; }
.anhaenge.raster .anhang:first-child { border-top-left-radius: 18px; }
.anhaenge.raster .anhang:nth-child(2) { border-top-right-radius: 18px; }
.anhaenge.raster[data-anzahl="3"] .anhang:first-child { border-top-right-radius: 18px; }
.anhaenge.raster[data-anzahl="3"] .anhang:nth-child(2) { border-top-right-radius: 6px; }
.anhang-medium { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.anhang-bild { cursor: zoom-in; }
.anhang-bild:active .anhang-medium { filter: brightness(.85); }
.anhang-video .anhang-medium { object-fit: contain; }
.anhang-fehlt { display: grid; place-items: center; min-height: 90px; color: var(--leiser); font-size: 13px; cursor: default; }
.nachricht.eigen .anhaenge { align-items: flex-end; }

/* Die Großansicht (Apple-Muster: Fotos und Schnellansicht): fast schwarz, das
   Bild eingepasst, darunter Text und „2 von 5“, runde Pfeile am Rand nur mit
   Maus oder Trackpad. Knöpfe wie „Fertig“: dunkles Glas, Popcorn-Gold. */
.vollbild {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding: calc(58px + env(safe-area-inset-top)) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: rgba(0, 0, 0, calc(.97 - var(--wisch, 0) * .6));
  touch-action: none;
}
.vollbild[hidden] { display: none; }
.vollbild-buehne { position: relative; flex: 1; min-height: 0; }
.vollbild-bild {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform .18s var(--weich);
  user-select: none;
  -webkit-user-drag: none;
  cursor: zoom-in;
}
.vollbild-bild[hidden] { display: none; }
.vollbild-video { width: 100%; height: 100%; background: transparent; cursor: default; }
.vollbild[data-zoom="1"] .vollbild-bild { cursor: grab; transition: none; }
.vollbild-zu, .vollbild-pfeil {
  position: absolute;
  background: rgba(40, 40, 44, .8);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: var(--gold);
}
.vollbild-zu {
  top: calc(12px + env(safe-area-inset-top));
  right: calc(16px + env(safe-area-inset-right));
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
}
.vollbild-pfeil {
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border-radius: 50%;
  transition: opacity .18s var(--weich);
}
.vollbild-pfeil svg { width: 12px; height: 20px; }
.vollbild-zurueck { left: calc(16px + env(safe-area-inset-left)); }
.vollbild-zurueck svg { margin-left: -2px; }
.vollbild-vor { right: calc(16px + env(safe-area-inset-right)); }
.vollbild-vor svg { margin-right: -2px; transform: scaleX(-1); }
.vollbild-pfeil:disabled { opacity: .3; cursor: default; }
.vollbild-pfeil[hidden] { display: none; }
.vollbild-zu:focus-visible, .vollbild-pfeil:focus-visible { border-radius: 999px; }
/* Am iPhone und iPad ohne Zeiger wird gewischt wie in Fotos. */
@media (hover: none) and (pointer: coarse) { .vollbild-pfeil { display: none; } }
.vollbild-fuss {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 20px 18px;
  text-align: center;
}
.vollbild-unterschrift {
  max-width: 680px;
  max-height: 4.2em;
  overflow-y: auto;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text);
  overflow-wrap: anywhere;
  touch-action: pan-y;
}
.vollbild-unterschrift[hidden] { display: none; }
.vollbild-zahl { font-size: 13px; color: var(--leise); font-variant-numeric: tabular-nums; }
.vollbild-zahl:empty { display: none; }
.vollbild-ansage { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body[data-vollbild="1"] { overflow: hidden; }

/* „schreibt …“: die drei Punkte wie in Nachrichten (ohne Bewegung, wenn „Bewegung reduzieren“ an ist) */
.tipp-blase { display: inline-flex; align-items: center; gap: 5px; padding: 13px 15px; }
.tipp-blase i { width: 8px; height: 8px; border-radius: 50%; background: var(--leise); animation: tipp-punkt 1.3s ease-in-out infinite; }
.tipp-blase i:nth-child(2) { animation-delay: .18s; }
.tipp-blase i:nth-child(3) { animation-delay: .36s; }
@keyframes tipp-punkt { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.kanal-schreibt { color: var(--leise); }
.kanal-schreibt b { font-weight: 600; color: var(--farbe, var(--gold)); }

/* Reaktionen (Tapbacks): Plakette unten an der Blase (#133), Leiste zum Wählen */
.blase-rahmen { position: relative; display: flex; flex-direction: column; align-items: inherit; max-width: 100%; -webkit-touch-callout: none; }
/* Langer Druck ist für Reaktionen da: Text in Blasen und Karten wird nicht markiert;
   Kopieren steht im Menü (Frank, 18.10.2026). Eingabefelder bleiben normal. */
.blase-rahmen, .blase-rahmen *, .absender, .kanal-kachel, .kanal-zeile { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.blase-rahmen textarea, .blase-rahmen input { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
/* Text markieren UND langer Druck, beides (#92, Frank, Saal 1515): am Mac markiert die Maus
   den Text wie in Nachrichten (Ziehen, Doppelklick); Halten ohne Bewegung öffnet die Reaktionen. */
@media (hover: hover) and (pointer: fine) {
  .blase-rahmen .blase.formatiert,
  .blase-rahmen .blase.formatiert * { -webkit-user-select: text; user-select: text; }
}
/* Am iPhone: „Text auswählen“ im Menü schaltet die Blase in den Markiermodus. */
.blase-rahmen.markieren .blase.formatiert,
.blase-rahmen.markieren .blase.formatiert * { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
/* Bearbeiten (inline) und „Bearbeitet“ mit früheren Fassungen */
.nachricht .blase.bearbeiten-blase, .nachricht.eigen .blase.bearbeiten-blase { background: var(--karte-hell); color: var(--text); border-radius: 19px; }
.bearbeiten-blase { display: flex; flex-direction: column; gap: 8px; width: min(420px, 100%); padding: 8px; background: var(--karte-hell); }
.bearbeiten-feld { width: 100%; min-height: 64px; resize: vertical; padding: 8px 10px; border: 0; border-radius: 12px; background: var(--karte); box-shadow: inset 0 0 0 1px rgba(232, 180, 90, .55); color: var(--text); font: inherit; font-size: 16px; line-height: 1.38; outline: 0; -webkit-user-select: text; user-select: text; }
.bearbeiten-knoepfe { display: flex; justify-content: flex-end; gap: 8px; }
.bearbeiten-knoepfe .frage-senden { margin: 0; }
.bearbeiten-knoepfe .entwurf-zurueck { height: 32px; font-size: 14px; }
.bearbeitet { display: flex; flex-direction: column; align-items: inherit; margin: 2px 6px 0; }
.bearbeitet-vermerk { font-size: 11px; font-weight: 600; color: var(--gold); }
.fassungen { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; max-width: 320px; }
.fassungen li { display: flex; gap: 8px; font-size: 12px; color: var(--leiser); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .25); }
.fassungen time { flex: none; text-decoration: none; font-variant-numeric: tabular-nums; }
.fassungen[hidden] { display: none; }
.reaktion-aktionen { display: flex; flex-direction: column; margin-top: 6px; padding-top: 4px; border-top: .5px solid var(--linie); }
.reaktion-aktion { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 10px; border-radius: 10px; font-size: 15px; color: var(--text); text-align: left; }
.reaktion-aktion:hover { background: rgba(255, 255, 255, .06); }
/* Menü an einem Chat (#87, Anheften; #85, Schließen): nur die Einträge, ohne Reaktionen darüber. */
.chat-menue { min-width: 180px; padding: 6px; }
.chat-menue .reaktion-aktionen { margin-top: 0; padding-top: 0; border-top: 0; }
.reaktion-aktion .aktion-zeichen { color: var(--leise); font-size: 15px; }
.nachricht.hat-reaktion .blase-rahmen { margin-bottom: 19px; }
/* Kleine runde Plaketten unten an der Blase, auf der Seite des Zipfels (#133, Frank,
   Saal 2669: „unten links an die Nachricht pappen“), nebeneinander, gleiche Reaktion
   zusammengefasst mit Zahl (Frank: nicht „wie ein Pack“). */
.reaktionen {
  position: absolute;
  bottom: -21px;
  left: 4px;
  z-index: 2;
  display: inline-flex;
  gap: 3px;
}
.reaktionen[hidden] { display: none; }
.nachricht.eigen .reaktionen { left: auto; right: 4px; flex-direction: row-reverse; }
.reaktion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--karte-hell);
  box-shadow: 0 0 0 2px var(--grund-foyer);
  font-size: 13px;
  line-height: 1;
}
.chats .reaktion { box-shadow: 0 0 0 2px var(--schwarz); }
.reaktion[data-meine="1"] { background: color-mix(in srgb, var(--gold) 26%, var(--karte-hell)); }
.reaktion-zahl { font-size: 11px; font-weight: 700; color: var(--leise); font-variant-numeric: tabular-nums; }
.reaktion-weitere { font-size: 11px; font-weight: 700; color: var(--leise); }
.reagieren-knopf {
  position: absolute;
  top: 50%;
  right: -40px;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  border-radius: 50%;
  display: none;
  place-items: center;
  color: var(--leise);
  background: var(--karte-hell);
}
.reagieren-knopf svg { width: 18px; height: 18px; }
.nachricht.eigen .reagieren-knopf { right: auto; left: -40px; }
@media (hover: hover) {
  /* Platz für den Knopf neben der breitesten fremden Blase (#133): Avatar 34, Abstand 10, Knopf 40, Polster 14 */
  .nachricht:not(.eigen) .nachricht-koerper { max-width: calc(100% - 72px); }
  .blase-rahmen:hover .reagieren-knopf, .reagieren-knopf:focus-visible { display: grid; }
  .reagieren-knopf:hover { color: var(--gold); }
}
.reaktion-leiste {
  position: fixed;
  z-index: 90;
  max-width: min(360px, calc(100vw - 16px));
  padding: 6px;
  border-radius: 22px;
  background: rgba(36, 36, 40, .92);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .8), inset 0 0 0 .5px var(--linie-stark);
  animation: aufklappen .16s var(--weich) both;
}
.reaktion-schnell { display: flex; gap: 2px; }
.reaktion-wahl { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; line-height: 1; transition: background-color .15s, transform .15s; }
/* Unsichtbares Feld für die Emoji-Auswahl der Systemtastatur (16 px, damit iOS nicht zoomt) */
.emoji-feld { position: absolute; left: 50%; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; font-size: 16px; caret-color: transparent; }
.emoji-hinweis { margin: 6px 8px 2px; font-size: 12px; line-height: 1.35; color: var(--leise); }
.reaktion-mehr[aria-pressed="true"] { background: var(--gold-hauch); color: var(--gold); }
.reaktion-wahl:hover { background: rgba(255, 255, 255, .08); }
.reaktion-wahl:active { transform: scale(.9); }
.reaktion-wahl[aria-pressed="true"] { background: var(--gold-hauch); box-shadow: inset 0 0 0 1.5px rgba(232, 180, 90, .6); }
.reaktion-mehr { font-size: 22px; font-weight: 300; color: var(--leise); background: rgba(255, 255, 255, .06); }
.reaktion-wer { padding: 8px 6px; min-width: 200px; }
.reaktion-wer ul { display: flex; flex-direction: column; gap: 2px; }
.reaktion-person { display: flex; align-items: center; gap: 10px; padding: 5px 8px; font-size: 14px; }
.reaktion-person .avatar { width: 28px; height: 28px; }
.reaktion-person > span:not(.avatar) { flex: 1; color: var(--text); }
.reaktion-person b { font-size: 18px; font-weight: 400; }
.reaktion-neu { width: 100%; margin-top: 4px; padding: 8px; border-top: .5px solid var(--linie); text-align: left; font-size: 14px; color: var(--gold); }

/* Im Privatchat ohne Avatar und Namen, wie ein Einzelgespräch in Nachrichten */
.foyer[data-kanal="privat"] .nachricht-koerper { max-width: 82%; }
.foyer[data-kanal="privat"] .absender { margin-left: 12px; }

/* Franks Nachrichten rechts in Popcorn-Gold */
.nachricht.eigen { flex-direction: row-reverse; }
.nachricht.eigen .nachricht-koerper { align-items: flex-end; max-width: 82%; }
.nachricht.eigen .absender { margin: 0 12px 3px 0; }
.nachricht.eigen .blase { background: var(--gold); color: #1b1307; }
/* Markierung in Franks Blase umgekehrt, sonst Gold auf Gold (#134) */
.nachricht.eigen .blase::selection, .nachricht.eigen .blase ::selection { background: #1b1307; color: var(--gold-hell); }
.nachricht.eigen:not(.erste) .blase { border-top-left-radius: 19px; border-top-right-radius: 6px; }
.nachricht.eigen:not(.letzte) .blase { border-bottom-left-radius: 19px; border-bottom-right-radius: 6px; }
/* Blasenzipfel wie in Nachrichten (#133, Frank, Saal 2673): die letzte Textblase einer Gruppe
   zeigt unten zum Absender, bei Frank gespiegelt nach rechts. Farbe der Blase, die Ecke darunter
   so klein, dass der Zipfel sie ganz deckt. */
.nachricht.letzte .blase.formatiert { position: relative; border-bottom-left-radius: 8px; }
.nachricht.letzte .blase.formatiert::after { content: ""; position: absolute; bottom: 0; left: -6px; width: 14px; height: 16px; background: inherit; clip-path: path("M14 0 L14 16 L0 16 C3 15 6 11 6 4 L6 0 Z"); pointer-events: none; }
.nachricht.eigen.letzte .blase.formatiert { border-bottom-left-radius: 19px; border-bottom-right-radius: 8px; }
.nachricht.eigen.letzte .blase.formatiert::after { left: auto; right: -6px; transform: scaleX(-1); }
.nachricht.eigen .erwaehnung { color: #1b1307; font-weight: 700; background: var(--farbe, rgba(0, 0, 0, .09)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); border-radius: 6px; padding: 0 4px; margin: 0 -1px; }
.zustellung { display: flex; align-items: center; gap: 4px; margin: 3px 4px 0 0; font-size: 11px; font-weight: 500; color: var(--leiser); font-variant-numeric: tabular-nums; }
.zustellung svg { width: 12px; height: 12px; color: var(--gold); }
.zustellung[data-zugestellt="nein"] svg { display: none; }
.nachricht.eigen:not(.letzte) .zustellung span { display: none; }
.nachricht.eigen:not(.letzte) .zustellung[data-zugestellt="nein"] { display: none; }
.nachricht.neu .blase { animation: blase-neu .32s var(--weich) both; }
.nachricht.eigen.neu .blase { transform-origin: right bottom; }
.nachricht:not(.eigen).neu .blase { transform-origin: left bottom; }
@keyframes blase-neu { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }

.eingabe {
  position: relative;
  flex: none;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: .5px solid var(--linie);
  background: rgba(7, 7, 8, .9);
}
.feld {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 4px 4px 4px 15px;
  border-radius: 20px;
  background: var(--karte-hell);
  box-shadow: inset 0 0 0 .5px var(--linie-stark);
  transition: box-shadow .2s;
}
.feld:focus-within { box-shadow: inset 0 0 0 1px rgba(232, 180, 90, .55); }
.feld textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16px;
  line-height: 22px;
  padding: 5px 0;
  max-height: 136px;
  color: var(--text);
}
.feld textarea::placeholder { color: var(--leiser); }
.senden {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: #000;
  transition: background-color .2s, transform .15s, opacity .2s;
}
.senden:disabled { background: #3a3a3c; color: var(--leiser); cursor: default; }
/* Bilder für die Nachricht (#86; Apple-Muster: Nachrichten-App): Plus-Knopf links im Feld,
   Kacheln mit Entfernen darüber, goldenes Ziel beim Hineinziehen */
.bild-knopf { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--leise); transition: color .2s, background-color .2s; }
.bild-knopf[hidden] { display: none; }
.bild-knopf:hover { color: var(--gold); background: var(--gold-hauch); }
.feld:has(.bild-knopf:not([hidden])) { padding-left: 4px; }
.bild-leiste { display: flex; gap: 8px; margin: 0 0 8px 2px; overflow-x: auto; padding: 6px 6px 2px 0; scrollbar-width: none; }
.bild-leiste[hidden] { display: none; }
.bild-kachel { position: relative; flex: none; width: 72px; height: 72px; border-radius: 14px; overflow: visible; }
.bild-kachel img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; background: var(--karte-hell); box-shadow: inset 0 0 0 .5px var(--linie-stark); }
.bild-weg { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--text); background: #3a3a3c; box-shadow: 0 0 0 2px var(--grund-foyer); }
.bild-weg:hover { background: #48484a; }
.eingabe[data-ziehen="1"] .feld { box-shadow: inset 0 0 0 2px var(--gold); background: var(--gold-hauch); }
.senden:not(:disabled):active { transform: scale(.92); }
/* Knopf „Nach unten“ (Frank, Saal 1924; Apple-Muster: Nachrichten-App): rund, rechts über
   dem Eingabefeld, sanft eingeblendet, sobald man hochrollt, ganz unten wieder weg. Der Pfeil
   ist das vorhandene Sende-Symbol, gedreht; die Zahl das vorhandene Abzeichen. */
.nach-unten {
  position: absolute;
  right: 16px;
  bottom: calc(100% + 12px);
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold);
  background: rgba(30, 30, 33, .9);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .8), inset 0 0 0 .5px var(--linie-stark);
  opacity: 0;
  transform: translateY(6px) scale(.9);
  visibility: hidden;
  transition: opacity .2s var(--weich), transform .2s var(--weich), visibility 0s linear .2s;
}
.nach-unten[data-sichtbar="1"] { opacity: 1; transform: none; visibility: visible; transition: opacity .2s var(--weich), transform .2s var(--weich), visibility 0s; }
.nach-unten:hover { background: var(--karte-hell); }
.nach-unten:active { transform: scale(.92); }
.nach-unten svg { transform: rotate(180deg); }
.nach-unten .kachel-zahl { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; line-height: 18px; }
.nach-unten .kachel-zahl[hidden] { display: none; }
/* Entwurf beiseitegelegt (Strg-S wie in Claude Code, Frank, Saal 442) */
.beiseite { display: flex; align-items: center; gap: 8px; margin: 0 0 8px 6px; padding: 3px 10px 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--gold-hell); background: var(--gold-hauch); box-shadow: inset 0 0 0 .5px rgba(232, 180, 90, .35); max-width: max-content; }
.beiseite[hidden] { display: none; }
.beiseite::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.beiseite kbd { font: inherit; font-size: 11px; font-weight: 600; color: var(--gold); opacity: .8; }
.beiseite[data-art="entwurf"]:not(:disabled):hover { background: rgba(232, 180, 90, .22); }
.beiseite:disabled { cursor: default; }
.beiseite[data-art="entwurf"]:disabled { opacity: .7; }
.beiseite[data-art="meldung"] { color: var(--leise); background: none; box-shadow: none; padding-left: 0; }
.beiseite[data-art="meldung"]::before { background: var(--leiser); }
.wach { margin-top: 8px; text-align: center; font-size: 12px; color: var(--leiser); display: flex; align-items: center; justify-content: center; gap: 6px; }
.wach::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--leiser); transition: background-color .4s, box-shadow .4s; }
.wach[data-wach="1"] { color: var(--leise); }
.wach[data-wach="1"]::before { background: var(--gold); box-shadow: 0 0 8px rgba(232, 180, 90, .8); }
.wach[data-pause="1"] { color: var(--creme); }
.wach[data-pause="1"]::before { background: var(--gold); box-shadow: none; }
.wach[data-fehler="1"] { color: var(--creme); }
.wach[data-fehler="1"]::before { background: var(--rot); box-shadow: none; }

.vorschlaege {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(100% + 6px);
  padding: 6px;
  border-radius: 16px;
  background: rgba(30, 30, 33, .9);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .8), inset 0 0 0 .5px var(--linie-stark);
  animation: aufklappen .16s var(--weich) both;
  z-index: 10;
  max-height: 340px;
  overflow-y: auto;
}
@keyframes aufklappen { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.vorschlag { width: 100%; display: flex; align-items: center; gap: 11px; padding: 7px 10px; border-radius: 11px; text-align: left; }
.vorschlag .avatar { width: 32px; height: 32px; }
.vorschlag b { display: block; font-size: 15px; font-weight: 600; color: var(--text); }
.vorschlag small { display: block; font-size: 12px; color: var(--leise); }
.vorschlag[aria-selected="true"], .vorschlag:hover { background: var(--gold-hauch); }
.vorschlag[aria-selected="true"] b:not(.vorschlag-name) { color: var(--gold-hell); }
.team-zeichen { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-hauch); color: var(--gold); font-weight: 700; font-size: 14px; flex: none; }

/* ── Eigene Gruppenchats ───────────────────────────────────────────────── */

.liste-kopf { display: flex; align-items: center; justify-content: space-between; }
.neu-knopf { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--gold); }
.neu-knopf:hover { background: var(--gold-hauch); }
.neu-knopf[hidden], .gruppe-knopf[hidden] { display: none; }
.gruppe-knopf { margin-left: auto; height: 30px; padding: 0 12px; border-radius: 999px; color: var(--gold); font-size: 14px; background: rgba(255, 255, 255, .06); }
.foyer[data-kanal="gruppe"] .runde { display: none; }
/* Gruppenbild: zwei oder drei Avatare übereinander, jeder mit seinem Schein */
.avatar-gruppe { position: relative; display: block; border-radius: 50%; }
.avatar-gruppe::before { display: none; }
.avatar-gruppe > .avatar { position: absolute; width: 62%; height: 62%; }
.avatar-gruppe > .avatar .avatar-kreis { box-shadow: 0 0 0 1.5px var(--grund-foyer); }
.avatar-gruppe.anzahl-1 > .avatar { inset: 19%; }
.avatar-gruppe.anzahl-2 > .avatar:nth-child(1), .avatar-gruppe.anzahl-3 > .avatar:nth-child(1) { left: 0; top: 0; }
.avatar-gruppe.anzahl-2 > .avatar:nth-child(2) { right: 0; bottom: 0; }
.avatar-gruppe.anzahl-3 > .avatar:nth-child(2) { right: 0; top: 10%; }
.avatar-gruppe.anzahl-3 > .avatar:nth-child(3) { left: 19%; bottom: 0; }
.avatar-gruppe > .avatar { --schein-weite: -16%; }
.neue-gruppe, .gruppe-bearbeiten { display: flex; flex-direction: column; gap: 10px; margin: 4px 2px 12px; padding: 12px; border-radius: 16px; background: var(--karte); box-shadow: inset 0 0 0 .5px rgba(232, 180, 90, .35); }
.gruppe-bearbeiten { margin: 10px 14px 4px; }
.gruppe-titel { font-size: 15px; font-weight: 700; color: var(--text); }
.gruppe-name { height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--karte-hell); box-shadow: inset 0 0 0 .5px var(--linie-stark); color: var(--text); font: inherit; font-size: 16px; outline: 0; }
.gruppe-name:focus { box-shadow: inset 0 0 0 1px rgba(232, 180, 90, .55); }
.gruppe-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.gruppe-mitglied { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px 6px; border-radius: 12px; font-size: 12px; color: var(--leise); }
.gruppe-mitglied .avatar { width: 40px; height: 40px; }
.gruppe-mitglied[aria-pressed="true"] { background: var(--gold-hauch); color: var(--gold-hell); box-shadow: inset 0 0 0 1px rgba(232, 180, 90, .5); }
.gruppe-mitglied[aria-pressed="false"] .avatar { opacity: .55; }
.gruppe-anlegen { margin-top: 0; height: 36px; padding: 0 18px; font-size: 15px; }
.gruppe-anlegen:disabled { background: #3a3a3c; color: var(--leiser); }

/* ── Entwürfe (Apple-Muster: Mail „Entwürfe“) ──────────────────────────── */

.entwurf-hinweis, .pause-hinweis {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 22px;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(232, 180, 90, .16), rgba(232, 180, 90, .07)), var(--karte);
  box-shadow: inset 0 0 0 .5px rgba(232, 180, 90, .45);
  color: var(--gold-hell);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
}
.entwurf-hinweis[hidden], .pause-hinweis[hidden] { display: none; }
/* Team-Pause (#66; Apple-Muster: Fokus-Filter oben in Mail, „Deaktivieren“ inline):
   derselbe Baustein wie der Entwurfs-Hinweis, rechts „Fortsetzen“ als Knopf wie „Bearbeiten“. */
.pause-hinweis span { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pause-hinweis small { font-size: 13px; font-weight: 500; color: var(--leise); }
.pause-hinweis .gruppe-knopf { flex: none; margin-left: 0; }
/* Über den Nachrichten knapper, wie der Fokus-Hinweis oben in der Mail-Liste: eine Zeile, „Fortsetzen“ daneben. */
.unterhaltungen .pause-hinweis { width: auto; margin: 0 14px 12px; padding: 10px 12px; gap: 8px; font-size: 14px; }
.unterhaltungen .pause-hinweis svg { width: 18px; height: 18px; flex: none; }
.unterhaltungen .pause-hinweis small { display: none; }
.unterhaltungen .pause-hinweis .gruppe-knopf { height: 28px; padding: 0 10px; font-size: 13px; }
/* Am Mac und iPad quer stehen Saal und Nachrichten nebeneinander: dann reicht der Hinweis oben im Saal. */
@media (min-width: 900px) { .unterhaltungen .pause-hinweis { display: none; } }
.entwurf-hinweis span { flex: 1; }
.entwurf-hinweis .chevron { opacity: .7; }
.kanalliste li.entwurf-zeile { padding-bottom: 6px; margin-bottom: 6px; border-bottom: .5px solid var(--linie); }
.entwurf-eintrag { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-align: left; transition: background-color .15s; }
.entwurf-eintrag:hover { background: rgba(255, 255, 255, .04); }
.entwurf-eintrag[aria-current="true"] { background: var(--gold-hauch); }
.entwurf-symbol { flex: none; color: var(--gold); }
.entwurf-eintrag-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.entwurf-eintrag-text b { font-size: 15px; font-weight: 600; color: var(--text); }
.entwurf-eintrag-text small { font-size: 12px; color: var(--leise); }

.entwuerfe-seite { display: none; flex-direction: column; min-width: 0; min-height: 0; height: 100%; }
.chats[data-ansicht="entwuerfe"] .foyer { display: none; }
.chats[data-ansicht="entwuerfe"] .entwuerfe-seite { display: flex; }
.entwuerfe-kopf { flex-wrap: nowrap; }
.entwurf-liste { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 28px; display: flex; flex-direction: column; gap: 14px; }

/* ── Gedächtnis (Frank, 19.10.2026). Muster: Notizen (Ordner als gruppierte
   Liste, Suche über alles, „Zuletzt gelöscht“) und Erinnerungen (inline
   bearbeiten, „Neuer Eintrag“ oben). Bausteine: .gruppe, .gruppe-name,
   .bearbeiten-feld, .bearbeiten-knoepfe, .frage-senden, .entwurf-zurueck. */
.chats[data-ansicht="entwuerfe"] .gedaechtnis-seite { display: none; }
.chats[data-ansicht="gedaechtnis"] .foyer { display: none; }
.chats[data-ansicht="gedaechtnis"] .gedaechtnis-seite { display: flex; }
.gedaechtnis-seite .zurueck[data-ebene="topf"] { display: inline-flex; }
.gedaechtnis-liste { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 28px; display: flex; flex-direction: column; gap: 14px; }
.gedaechtnis-suche { flex: none; width: 100%; -webkit-appearance: none; appearance: none; }
.gedaechtnis-suche[hidden] { display: none; }
.gedaechtnis-inhalt { display: flex; flex-direction: column; gap: 14px; }
.gedaechtnis-gruppe > * + * { border-top: .5px solid var(--linie); }
.gedaechtnis-zeile { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px; text-align: left; transition: background-color .15s; }
.gedaechtnis-zeile:hover, .gedaechtnis-eintrag:hover { background: rgba(255, 255, 255, .04); }
.gedaechtnis-zeile .avatar { width: 32px; height: 32px; }
.gedaechtnis-eintrag .avatar { width: 28px; height: 28px; margin-top: 1px; }
.gedaechtnis-symbol { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--karte-hell); color: var(--leise); }
.gedaechtnis-zeile-text { flex: 1; min-width: 0; }
.gedaechtnis-zeile-text b { font-size: 15px; font-weight: 500; color: var(--text); }
.gedaechtnis-zeile-text small { display: block; }
.gedaechtnis-anzahl { font-size: 15px; color: var(--leiser); font-variant-numeric: tabular-nums; }
.gedaechtnis-neu, .gedaechtnis-neu .gedaechtnis-zeile-text b { color: var(--gold); }
.gedaechtnis-eintrag { width: 100%; display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; text-align: left; transition: background-color .15s; }
.gedaechtnis-eintrag-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gedaechtnis-text { margin: 0; font-size: 15px; line-height: 1.38; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gedaechtnis-bearbeiten .gedaechtnis-text { display: block; -webkit-line-clamp: unset; }
.gedaechtnis-meta { font-size: 12px; color: var(--leiser); }
.gedaechtnis-bearbeiten { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; background: var(--karte-hell); }
.gedaechtnis-bearbeiten .bearbeiten-knoepfe { align-items: center; flex-wrap: wrap; }
.gedaechtnis-luecke { flex: 1; }
.entwurf-zurueck.gedaechtnis-loeschen { color: var(--rot); }
.gedaechtnis-hinweis { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(255, 159, 10, .12); color: var(--creme); font-size: 14px; line-height: 1.35; }
.gedaechtnis-hinweis svg { flex: none; color: var(--orange); }
.gedaechtnis-seite .fussnote { margin: 0 4px; }
.entwurf-eintrag-text small.gedaechtnis-warnung { color: var(--orange); }
.entwurf { padding: 14px; border-radius: 18px; background: var(--karte); box-shadow: inset 0 0 0 .5px var(--linie); }
.entwurf[data-stand="wartet"] { box-shadow: inset 0 0 0 .5px rgba(232, 180, 90, .4); }
.entwurf-kopf { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--leise); font-variant-numeric: tabular-nums; }
.entwurf-an { font-weight: 600; color: var(--gold-hell); }
.entwurf-betreff { margin: 6px 0 10px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
/* Der Text auf weißem Papier, wie in der Mail */
.entwurf-papier { padding: 16px 16px 14px; border-radius: 12px; background: #fff; color: #3a3a3c; font-size: 15px; line-height: 1.55; box-shadow: inset 0 3px 0 var(--gold); }
.entwurf-papier p + p { margin-top: 10px; }
.entwurf-papier p { white-space: pre-wrap; overflow-wrap: anywhere; }
.entwurf-unterschrift { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #e8e8ed; }
.entwurf-unterschrift .avatar { width: 32px; height: 32px; }
.entwurf-unterschrift span { display: flex; flex-direction: column; }
.entwurf-unterschrift b { font-size: 14px; color: #1d1d1f; }
.entwurf-unterschrift small { font-size: 12px; color: #94600f; }
.entwurf-hinweise { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(232, 180, 90, .1); font-size: 13px; color: var(--gold-hell); list-style: none; }
.entwurf-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.entwurf-frei { margin-top: 0; height: 40px; padding: 0 22px; font-size: 15px; }
.entwurf-zurueck { height: 40px; padding: 0 14px; border-radius: 999px; color: var(--gold); font-size: 15px; background: rgba(255, 255, 255, .06); }
.entwurf-anmerkung { display: flex; flex-direction: column; margin-top: 10px; }
.entwurf-anmerkung[hidden] { display: none; }
.entwurf-anmerkung .frage-senden { margin-right: 0; }
.entwurf-stand { border-top: 0; padding: 12px 0 0; }
.entwurf.hervor { box-shadow: inset 0 0 0 1.5px var(--gold); transition: box-shadow .3s; }
/* Die Karte im Chat: Papier im Kleinen */
.entwurf-karte { display: flex; flex-direction: column; padding-bottom: 12px; cursor: pointer; }
.entwurf-karte-an { margin: 8px 14px 0; font-size: 12px; font-weight: 600; color: var(--gold-hell); }
.entwurf-karte-betreff { margin: 2px 14px 8px; font-size: 15px; color: var(--text); }
.entwurf-karte-papier { margin: 0 14px; padding: 10px 12px; border-radius: 10px; background: #fff; color: #3a3a3c; font-size: 13px; line-height: 1.45; box-shadow: inset 0 2px 0 var(--gold); max-height: 118px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.entwurf-karte-papier p + p { margin-top: 6px; }
.entwurf-karte-knoepfe { display: flex; justify-content: flex-end; gap: 8px; margin: 10px 14px 0; }
.entwurf-karte-knoepfe .frage-senden { margin: 0; }
.entwurf-karte-knoepfe .entwurf-zurueck { height: 32px; font-size: 14px; }
.entwurf-karte .entwurf-stand { padding: 10px 14px 0; }

/* ── Reiter unten (nur iPhone und iPad hochkant) ───────────────────────── */

.reiter { display: none; }

/* Schmaler als 1280: Liste ODER Unterhaltung, mit Zurück (wie Nachrichten am iPhone) */
@media (max-width: 1599px) {
  /* Neben den Konten hängt die Plakette unter dem Kopf: auf Fotos aus der Vorschau muss sie immer stehen */
  .kopf-rechts:has(.kontingent:not([hidden])) .vorschau-marke { position: absolute; top: calc(100% + 8px); right: max(var(--rand), env(safe-area-inset-right)); pointer-events: none; }
}

@media (max-width: 1279px) {
  .kk-zeile { grid-template-columns: 30px; }
  .kk-titel, .kk-zahl { display: none; }
  .buehne { --chats-standard: 390px; --chats-min: 320px; }
  .chats { grid-template-columns: minmax(0, 1fr); }
  .unterhaltungen { border-right: 0; }
  .liste-griff { display: none; }
  .chats[data-ansicht="liste"] .foyer { display: none; }
  .chats[data-ansicht="unterhaltung"] .unterhaltungen, .chats[data-ansicht="entwuerfe"] .unterhaltungen, .chats[data-ansicht="gedaechtnis"] .unterhaltungen { display: none; }
  .zurueck { display: inline-flex; }
  .kanal-zeile[aria-current="true"] { background: none; }
  .kanal-kachel[aria-current="true"] { background: var(--karte); box-shadow: inset 0 0 0 .5px var(--linie); }
}

@media (max-width: 1099px) {
  :root { --rand: 24px; }
  .buehne { --chats-standard: 360px; }
  .besetzung { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .paar { grid-template-columns: minmax(0, 1fr); }
  .station-name { font-size: 12px; padding: 0 2px; }
}

@media (max-width: 899px) {
  /* Am iPhone gibt es die Reiter Saal und Nachrichten, das Ein- und Ausblenden braucht es dort nicht. */
  .chats-knopf { display: none; }
  .chats-griff { display: none; }
  :root { --rand: 16px; --reiter-hoehe: 50px; }
  .buehne { display: block; }
  .saal-spalte { padding-bottom: calc(var(--reiter-hoehe) + env(safe-area-inset-bottom) + 40px); }
  .chats {
    position: fixed;
    inset: calc(var(--kopf-hoehe) + env(safe-area-inset-top)) 0 calc(var(--reiter-hoehe) + env(safe-area-inset-bottom)) 0;
    height: auto;
    border-left: 0;
    background: var(--schwarz);
    z-index: 10;
  }
  body[data-reiter="saal"] .chats { display: none; }
  body[data-reiter="chats"] .saal-spalte, body[data-reiter="entwuerfe"] .saal-spalte { display: none; }

  /* In der Unterhaltung scrollt nie das Dokument, nur der Verlauf: so kann
     iOS nach der Tastatur keinen Versatz stehen lassen (Fehler 18.10.2026,
     iPad). Der Kopf ist fest und folgt dem sichtbaren Ausschnitt. */
  html:has(body.saal[data-reiter="chats"]), html:has(body.saal[data-reiter="entwuerfe"]),
  body.saal[data-reiter="chats"], body.saal[data-reiter="entwuerfe"] { height: 100%; min-height: 0; overflow: hidden; overscroll-behavior: none; }
  body.saal[data-reiter="chats"] .kopf, body.saal[data-reiter="entwuerfe"] .kopf { position: fixed; left: 0; right: 0; top: var(--sicht-oben, 0px); }
  .reiter button[hidden] { display: none; }
  /* Tastatur offen: Kopf und Unterhaltung genau im sichtbaren Teil, die
     Reiterleiste liegt unter der Tastatur und ist weg (wie in jeder iPhone-App). */
  body[data-tastatur="1"] .reiter { display: none; }
  body[data-tastatur="1"] .chats {
    top: calc(var(--sicht-oben, 0px) + var(--kopf-hoehe) + env(safe-area-inset-top));
    bottom: auto;
    height: calc(var(--sicht-hoehe, 100dvh) - var(--kopf-hoehe) - env(safe-area-inset-top));
  }
  .eingabe { padding-bottom: 10px; background: rgba(0, 0, 0, .9); }
  .zustandspunkt, .runde-knopf[data-zustand="wartet"] .zustandspunkt { box-shadow: 0 0 0 2.5px var(--schwarz); }
  .runde-knopf[data-zustand="wartet"] .zustandspunkt { background: var(--schwarz); box-shadow: inset 0 0 0 2.5px var(--gold-hell), 0 0 0 2.5px var(--schwarz); }

  .reiter {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    height: calc(var(--reiter-hoehe) + env(safe-area-inset-bottom));
    padding: 0 max(12px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(12px, env(safe-area-inset-left));
    background: rgba(18, 18, 20, .82);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-top: .5px solid var(--linie);
  }
  .reiter button {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    color: var(--leiser);
    font-size: 10px;
    font-weight: 500;
    transition: color .2s;
  }
  .reiter button[aria-pressed="true"] { color: var(--gold); }
  .reiter svg { width: 26px; height: 26px; }
  .kennzahl {
    position: absolute;
    top: 4px;
    left: calc(50% + 6px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--gold);
    color: #000;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
  }
}

/* Saalspalte schmal (neben den Nachrichten am Mac) */
@container (min-width: 600px) and (max-width: 860px) {
  .vorfuehrung { grid-template-columns: 156px minmax(0, 1fr); gap: 0 28px; padding: 26px; }
  .plakat-nummer { font-size: 52px; }
  .vorfuehrung-titel { font-size: 30px; }
  .station-name { font-size: 12px; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; }
}

/* Saalspalte schmal (Mac-Fenster neben den Nachrichten, iPad): das Band mit
   seinen sechs Stationen läuft über die ganze Breite unter dem Plakat, wie die
   Stufen im Bestellstatus der Apple Store App. */
@container (max-width: 860px) {
  .vorfuehrung > .band { grid-column: 1 / -1; }
  .station-name { font-size: 12px; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; }
}

@media (max-width: 640px) {
  .kopf { gap: 10px; }
  .marke { gap: 10px; }
  .marke img { width: auto; height: 28px; }
  .marke .wortmarke { font-size: 13px; }
  .ich { display: none; }
  /* iPhone: die Plakette steht unten über den Reitern, wo sie nichts verdeckt, was man tippt.
     Bezug ist der Kopf (backdrop-filter macht ihn zum Rahmen, auch für fixed), und der steht immer oben. */
  .vorschau-marke, .kopf-rechts:has(.kontingent:not([hidden])) .vorschau-marke { position: absolute; top: calc(100dvh - var(--reiter-hoehe) - env(safe-area-inset-bottom) - 30px); right: auto; left: 50%; transform: translateX(-50%); z-index: 31; pointer-events: none; }
  /* iPhone: je Konto nur der Anfangsbuchstabe und die zwei Füllstände */
  /* Kopf nie breiter als der Bildschirm (xinelum/meldungen#178; Muster: Navigationsleiste in iOS, Wichtiges bleibt rechts sichtbar):
     die Kontoleiste ist der einzige Bereich, der schrumpft und dabei abschneidet; Live, Fragen, Abmelden und Nachrichten behalten ihre Größe. */
  .kopf { max-width: 100%; }
  /* #178-b: Konten werden nie angeschnitten. Bei wenig Platz zeigt jedes Konto nur den runden Füllstand
     (Kurzform ohne Text, wie die Symbolleiste in iOS bei schmaler Breite); wenn es eng wird, weicht die Wortmarke. */
  .marke { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .kopf-rechts { flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
  .kontingent { flex: none; overflow: visible; gap: 8px; padding: 4px 2px; margin: 0; }
  .kk { flex: none; }
  .live, .fragen-knopf, .abmelden, .chats-knopf { flex: none; }
  /* Platz für die Füllstände: „Live“ bleibt als Punkt (wie in der Statusleiste), das Wort nur für VoiceOver */
  .kopf-rechts:has(.kontingent:not([hidden])) { gap: 12px; }
  .kopf-rechts:has(.kontingent:not([hidden])) .live span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .kk { gap: 4px; }
  .kk-name { display: none; }
  .kk-zeile { grid-template-columns: 20px; }
  .konto-balken-reihe { grid-template-columns: minmax(0, 1fr); }
  .abschnitt { font-size: 20px; margin-top: 36px; }

  .vorfuehrung { grid-template-columns: 108px minmax(0, 1fr); grid-template-rows: auto auto; gap: 18px 18px; padding: 18px; border-radius: 22px; align-items: start; }
  .vorfuehrung > .plakat { grid-row: auto; align-self: start; }
  .vorfuehrung-text { grid-column: 2; }
  .plakat { border-radius: 9px; padding: 9px 7px 7px; }
  .plakat-ueber { font-size: 10px; }
  .plakat-nummer { font-size: 36px; }
  .plakat-fuss { font-size: 6px; padding-top: 5px; margin-top: 6px; }
  .vorfuehrung-titel { font-size: 26px; }
  .vorfuehrung-unter { font-size: 15px; }
  .plattformen { margin-top: 10px; }
  .lage { margin-top: 12px; }
  .lage-was { font-size: 17px; }
  .lage-wann { font-size: 14px; }
  .vorfuehrung > .band { grid-column: 1 / -1; margin-top: 0; display: flex; flex-direction: column; }
  .station { flex-direction: row; align-items: center; text-align: left; gap: 12px; padding: 7px 0; }
  .station::after { top: calc(50% + 15px); left: 11px; width: 2px; height: calc(100% - 30px); }
  .station-name { margin: 0; padding: 0; flex: 1; font-size: 15px; }
  .station-zeit { margin: 0; font-size: 13px; min-height: 0; }

  .vorstellungen {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--rand));
    padding: 0 var(--rand) 4px;
    scroll-padding: 0 var(--rand);
    scrollbar-width: none;
  }
  .vorstellungen::-webkit-scrollbar { display: none; }
  .vorstellung { flex: 0 0 64%; scroll-snap-align: start; min-height: 124px; }
  .vorstellung-plus { flex: 0 0 auto; scroll-snap-align: end; min-height: 124px; padding: 0 10px 0 4px; }
  .plan-blatt { padding-left: calc(10px + env(safe-area-inset-left)); padding-right: calc(10px + env(safe-area-inset-right)); }
  .plan-blatt > .plan-karte { padding: 22px 16px 18px; border-radius: 22px; }
  .plan-titel { font-size: 24px; }
  .plan-karte .plan-baukarte { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 16px; }
  .plan-baukarte .plakat-nummer { font-size: 30px; }
  .plan-baukarte .vorfuehrung-titel { font-size: 22px; }

  .besetzung { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .mitglied { padding: 14px 4px 12px; border-radius: 16px; }
  .mitglied .avatar { width: 50px; height: 50px; }
  .mitglied-name { margin-top: 10px; font-size: 13px; }
  .mitglied-beruf { display: none; }
  .mitglied-zustand { margin-top: 4px; font-size: 11px; }

  .tabelle thead { display: none; }
  .tabelle, .tabelle tbody, .tabelle tr, .tabelle td { display: block; width: auto; }
  .tabelle tr { position: relative; padding: 12px 16px 12px 48px; }
  .tabelle tr + tr::before { content: ""; position: absolute; top: 0; left: 48px; right: 0; height: .5px; background: var(--linie); }
  .tabelle td { padding: 0; border: 0; }
  .tabelle .spalte-nr { position: absolute; left: 16px; top: 13px; width: auto; font-size: 13px; }
  .tabelle .spalte-stand { width: auto; margin-top: 6px; font-size: 13px; display: inline-block; }
  .tabelle .spalte-wann { width: auto; float: right; margin-top: 7px; font-size: 13px; }
  .stand-text small { display: inline; margin-left: 4px; }
  /* Der Stempel steht als eigene, leisere Zeile unter dem Stand, damit „Wann“ in seiner Zeile bleibt (#166) */
  .stand-text small.stand-alter { display: block; margin-left: 0; font-size: 11px; color: var(--leiser); }
  .tabelle tr::after { content: ""; display: block; clear: both; }
  .tabelle tr.frage-reihe { padding: 0 16px 16px 16px; }
  .tabelle tr.frage-reihe > td { padding: 0; }
  .tabelle tr.frage-reihe::before { display: none; }
  /* iPhone: im Kopf nur die goldene Zahl, das Wort trägt VoiceOver */
  .fragen-knopf { padding: 3px; gap: 0; background: none; }
  .fragen-knopf span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  .foyer-kopf { padding: 10px 16px 10px; gap: 10px; }
  .nachricht .avatar { width: 34px; height: 34px; }
  .nachricht-koerper { max-width: calc(100% - 48px); }
  /* Wie in Nachrichten am iPhone: nur der Pfeil mit der Zahl, daneben wer */
  .zurueck span { display: none; }
  .kanal-text h2 { font-size: 18px; }
  .kanal-hinweis { padding: 6px 16px; font-size: 11px; }
  .liste-kopf { padding: 14px 16px 8px 18px; }
  .liste-kopf h2 { font-size: 28px; }
  .kanal-zeile { padding: 10px 8px 10px 2px; }
  .mitteilungen .fussnote { margin-left: 4px; margin-right: 4px; }
}

/* iPhone (375 und 393 pt): das Wort neben dem Logo weicht den Konten */
@media (max-width: 430px) {
  .marke .wortmarke { display: none; }
}

/* ── Suche im Chat (#167). Muster: Nachrichten und Mail, Suchfeld oben in der
   Liste mit „Abbrechen“, Treffer nach Chat gruppiert, Fundstelle in Gold.
   Bausteine: .gruppe-name/.gedaechtnis-suche (Feld), .gruppe-knopf (Abbrechen),
   .kanalliste/.kanal-zeile (Treffer), .fussnote (Stand), .hervor (Sprung). */
.such-zeile { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 14px 10px; }
.such-zeile .chat-suche { flex: 1; min-width: 0; height: 36px; }
.such-zeile .such-abbrechen { flex: none; margin-left: 0; }
.such-zeile .such-abbrechen[hidden] { display: none; }
.such-ergebnis { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 16px; scrollbar-width: thin; scrollbar-color: #2a2a2e transparent; }
.such-ergebnis[hidden], .kanalliste[hidden] { display: none; }
.such-ergebnis .fussnote { margin: 4px 10px 10px; }
.such-gruppe + .such-gruppe, .such-gruppe + .such-stand { margin-top: 10px; }
.such-kopf { margin: 0 10px 2px; font-size: 13px; font-weight: 600; color: var(--leiser); }
.such-liste { flex: none; overflow: visible; padding: 0; }
.such-liste .kanal-zeile { padding-left: 8px; }
.such-liste .kanal-zeile .avatar { width: 40px; height: 40px; }
.such-ergebnis mark { background: none; color: var(--gold-hell); font-weight: 600; }
.nachricht.hervor .blase { box-shadow: 0 0 0 2px var(--gold); transition: box-shadow .3s; }

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