/* IngPsy Chat (intern: Treff) – Farben aus dem Logo der AG Ingenieurpsychologie: Petrol #114957, Grau-Petrol #6A949D,
   Hell #BCCED3 und Karminrot #8F203F (der Rettungsring). Karmin steht sparsam für „du bist gemeint“ (Erwähnungen, Zähler),
   Signalrot (zinnoberrot, deutlich wärmer) nur für Aufnahme, Fehler und Gefahr; Grün nur für Sprechen und Online.
   Aufbau: Seitenleiste auf getönter Fläche, Inhalt auf einem abgerundeten Blatt, mittige Gesprächsspalte.
   Alle Text-Kontraste ≥ 4,5:1 in hell und dunkel: python3 seiten/treff/tests/kontraste.py */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url(vendor/schrift/source-sans-3-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url(vendor/schrift/source-sans-3-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 200 900; font-display: swap; src: url(vendor/schrift/source-sans-3-latin-wght-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }

:root {
  /* Palette aus dem Logo */
  --petrol: #114957; --petrol-tief: #0B323C; --grau-petrol: #6A949D; --hell-petrol: #BCCED3; --karmin: #8F203F;
  /* alte Namen (werden an vielen Stellen benutzt) zeigen auf die neue Palette */
  --ozean: var(--petrol); --ozean-tief: var(--petrol-tief); --tuerkis: var(--grau-petrol); --tuerkis-dunkel: var(--sicher); --cyan: var(--grau-petrol); --gruen: var(--markierung); --uni-rot: var(--signal-stark);
  /* Rollen (hell) */
  --grund: #E8EEF0;          /* Fläche hinter allem */
  --blatt: #FFFFFF;          /* Inhalt */
  --erhaben: #F3F6F7;        /* Felder, Hover im Blatt */
  --tonal: #DDE7EA;          /* aktive Kanäle, tonale Knöpfe (aus Hell #BCCED3) */
  --tonal-stark: #C9D8DD;
  --linie: #D2DDE0;
  --tinte: #0E242A; --leise: #4A6067; --sehr-leise: #526870;
  --primaer: var(--petrol); --primaer-text: #FFFFFF; --primaer-hover: #1B5D6C;
  --akzent: #1D6474;         /* Links, Fokus (Petrol, auf Weiß über 4,5:1) */
  --signal: #B83218; --signal-hell: #FBEAE5; --signal-stark: #B83218; --signal-text: #FFFFFF;   /* Aufnahme, Fehler, Gefahr */
  --marke: var(--karmin); --marke-hell: #F6EAEE; --marke-stark: var(--karmin); --marke-text: #FFFFFF;  /* Karmin: dich betrifft es */
  --sicher: #1D6474;         /* verschlüsselt, geprüft */
  --sprechen: #2E8A4E; --online: #2E8A4E;
  --erwaehnt: #FAF1F4; --erwaehnt-rand: var(--karmin);
  --markierung: #F3D774;     /* Suchtreffer */
  --toast: var(--petrol-tief); --toast-text: #F2F7F8;
  --buehne: #0A272E; --kachel: #11373F; --buehne-text: #E4EEF1; --buehne-leise: #A9BEC4; --buehne-gruen: #7FD39A; --gruen-text: #0A2614; --rec-buehne: #FF7357;
  --logo-dunkel: var(--petrol); --logo-hell: var(--hell-petrol); --logo-mitte: var(--grau-petrol); --logo-rot: var(--karmin);
  --verlauf: linear-gradient(115deg, var(--petrol) 0%, var(--grau-petrol) 70%, var(--hell-petrol) 100%);
  --schatten-schwebend: 0 1px 2px rgb(11 50 60 / .06), 0 8px 28px rgb(11 50 60 / .10);
  --schrift: "Source Sans 3", "Myriad Pro", Myriad, system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-klein: 8px; --r: 10px; --r-gross: 14px; --r-blatt: 16px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  body:not([data-thema="hell"]) { --grund: #0C1A1E; --blatt: #11242A; --erhaben: #162D33; --tonal: #1C3A42; --tonal-stark: #244852; --linie: #22393F; --tinte: #E4EDEF; --leise: #A5B8BE; --sehr-leise: #93A8AF; --primaer: #A9C9D1; --primaer-text: #0B252C; --primaer-hover: #C0D8DE; --akzent: #8DC5D2; --signal: #FF8266; --signal-hell: #3A1D17; --signal-stark: #B5321C; --marke: #E58BA3; --marke-hell: #331A22; --marke-stark: #E58BA3; --marke-text: #2A0B15; --sicher: #8DC5D2; --sprechen: #6CD08E; --online: #5BC27E; --erwaehnt: #2A1A21; --erwaehnt-rand: #E58BA3; --markierung: #6B5A1E; --toast: #DCE8EB; --toast-text: #0B252C; --buehne: #071518; --kachel: #0F2D35; --logo-dunkel: #2B6B7A; --logo-rot: #B4385A; --tuerkis-dunkel: #8DC5D2; --uni-rot: #B5321C; --gruen: #6B5A1E; --schatten-schwebend: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px rgb(0 0 0 / .35); color-scheme: dark; }
}
body[data-thema="dunkel"] { --grund: #0C1A1E; --blatt: #11242A; --erhaben: #162D33; --tonal: #1C3A42; --tonal-stark: #244852; --linie: #22393F; --tinte: #E4EDEF; --leise: #A5B8BE; --sehr-leise: #93A8AF; --primaer: #A9C9D1; --primaer-text: #0B252C; --primaer-hover: #C0D8DE; --akzent: #8DC5D2; --signal: #FF8266; --signal-hell: #3A1D17; --signal-stark: #B5321C; --marke: #E58BA3; --marke-hell: #331A22; --marke-stark: #E58BA3; --marke-text: #2A0B15; --sicher: #8DC5D2; --sprechen: #6CD08E; --online: #5BC27E; --erwaehnt: #2A1A21; --erwaehnt-rand: #E58BA3; --markierung: #6B5A1E; --toast: #DCE8EB; --toast-text: #0B252C; --buehne: #071518; --kachel: #0F2D35; --logo-dunkel: #2B6B7A; --logo-rot: #B4385A; --tuerkis-dunkel: #8DC5D2; --uni-rot: #B5321C; --gruen: #6B5A1E; --schatten-schwebend: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px rgb(0 0 0 / .35); color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--grund); color: var(--tinte); font: 400 16px/1.55 var(--schrift); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga"; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--akzent); }
h1, h2 { line-height: 1.2; letter-spacing: -.01em; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--tuerkis) 35%, transparent); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.leise { color: var(--leise); }
.klein { font-size: .86em; }
[hidden] { display: none !important; }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--leise) 35%, transparent) transparent; }

.ic { width: 20px; height: 20px; flex: none; }
.ic.klein { width: 16px; height: 16px; }
.ic.leise { opacity: .7; }
.logo { flex: none; display: block; }

/* ── Knöpfe und Felder */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 7px 16px; border: 0; border-radius: var(--r-klein); background: var(--tonal); cursor: pointer; text-decoration: none; color: var(--tinte); font-weight: 600; white-space: nowrap; transition: background .15s, box-shadow .15s; }
.knopf:hover { background: var(--tonal-stark); }
.knopf.haupt { background: var(--primaer); color: var(--primaer-text); }
.knopf.haupt:hover { background: var(--primaer-hover); }
.knopf.gefahr { background: var(--signal-hell); color: var(--signal); }
.knopf.gefahr:hover { background: color-mix(in srgb, var(--signal) 18%, var(--blatt)); }
.knopf.klein { min-height: 32px; padding: 4px 12px; font-size: .92em; }
.knopf.gross { min-height: 48px; padding: 11px 20px; width: 100%; font-size: 1.05em; }
.knopf .ic { width: 18px; height: 18px; }
.knopf:disabled { opacity: .5; cursor: default; }
.sym { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--r-klein); background: transparent; color: var(--leise); cursor: pointer; text-decoration: none; transition: background .15s, color .15s; }
.sym:hover { background: color-mix(in srgb, var(--leise) 12%, transparent); color: var(--tinte); }
.sym.klein { width: 30px; height: 30px; }
.sym.aus { color: var(--signal); background: var(--signal-hell); }
.sym.gefahr:hover { color: var(--signal); }
.link { border: 0; background: none; color: var(--akzent); cursor: pointer; padding: 4px 0; font-weight: 600; }
.link:hover { text-decoration: underline; }
.formular { display: grid; gap: 14px; }
.formular label:not(.haken) { display: grid; gap: 5px; font-weight: 600; font-size: .94em; }
input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { width: 100%; padding: 10px 14px; border: 1px solid transparent; border-radius: var(--r); background: var(--erhaben); font-weight: 400; box-shadow: inset 0 0 0 1px var(--linie); transition: box-shadow .15s, background .15s; }
input:focus, select:focus, textarea:focus { outline: none; background: var(--blatt); box-shadow: inset 0 0 0 2px var(--akzent); }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2358697A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 36px !important; }
.haken { display: flex; gap: 10px; align-items: baseline; cursor: pointer; }
.haken input { accent-color: var(--primaer); translate: 0 2px; width: 16px; height: 16px; flex: none; }
.hinweis { margin: 0; color: var(--leise); font-size: .9em; }
.reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.reihe-knoepfe, .zeile-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.segment { display: inline-flex; padding: 4px; gap: 2px; border-radius: var(--r-klein); background: var(--erhaben); box-shadow: inset 0 0 0 1px var(--linie); }
.segment button { border: 0; background: transparent; padding: 7px 16px; border-radius: var(--r-klein); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; color: var(--leise); font-weight: 600; }
.segment button:hover { color: var(--tinte); }
.segment button.an { background: var(--blatt); color: var(--tinte); box-shadow: 0 1px 3px rgb(0 49 59 / .14); }
.regler { display: flex !important; align-items: center; gap: 12px; }
.regler input { flex: 1; accent-color: var(--primaer); }
.suchfeld { max-width: 420px; }
.suchfeld.gross { max-width: none; font-size: 1.08em; padding: 13px 18px; border-radius: var(--r-klein); }
/* Formulare, überall gleich: Titel über dem Feld (Eingabe, Auswahl oder Gruppe von Haken), Erklärung klein darunter.
   Eine Gruppe von Haken steht in einem Kasten wie ein Eingabefeld; einzelne Haken: Titel neben dem Haken, Erklärung darunter. */
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 6px; }
legend { padding: 0; float: left; width: 100%; margin-bottom: 5px; display: flex; gap: 6px; align-items: center; font-weight: 600; font-size: .94em; }
legend + * { clear: both; }
.kasten, fieldset > .rollen-wahl, fieldset > .mitglieder-liste, .formular details .rollen-wahl { padding: 12px 14px; border-radius: var(--r); background: var(--erhaben); box-shadow: inset 0 0 0 1px var(--linie); }
.kasten { display: grid; gap: 10px; }
.feld-mit-knopf { display: flex; gap: 8px; align-items: center; }
.feld-mit-knopf select { flex: 1; min-width: 0; }
.verw-gruppen { margin: 14px 0 6px; }
.verw-gruppen h3 { margin: 0 0 4px; }
/* Verwaltung → Personen: gelöschte Konten unter der Tabelle */
.geloeschte { margin-top: 28px; display: grid; gap: 8px; }
.geloeschte h3 { margin: 0; font-size: 1.05rem; }
.geloeschte-liste { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.geloeschte-liste li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--r); background: var(--erhaben); box-shadow: inset 0 0 0 1px var(--linie); }
.geloeschte-info { flex: 1; min-width: 0; display: grid; gap: 1px; }
.geloeschte-info small { color: var(--leise); }
.entfernen-liste { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
@media (max-width: 760px) { .geloeschte-liste li { flex-wrap: wrap; } }
.rollen-wahl .haken { align-items: center; }
.rollen-wahl .haken input { translate: 0; }
fieldset > .suchfeld { max-width: none; }
.formular label > .hinweis, fieldset > .hinweis { font-weight: 400; font-size: .86em; }
.haken .txt { display: grid; gap: 1px; line-height: 1.35; }
.haken .txt b { font-weight: 600; }
.haken .txt small { color: var(--leise); font-size: .88em; }

/* ── Avatare */
.av { --g: 36px; width: var(--g); height: var(--g); border-radius: 50%; flex: none; object-fit: cover; display: inline-grid; place-items: center; background: var(--f, var(--ozean)); color: #fff; font-weight: 700; font-size: calc(var(--g) * .38); letter-spacing: .02em; user-select: none; }

/* ── Anmeldung: der eine laute Moment */
.tor { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; position: relative; overflow: hidden; background: var(--grund); }
/* Anmeldung: ruhig, das Zeichen trägt die Seite (kein Verlauf, keine Unschärfe) */
.tor-karte { position: relative; width: min(420px, 100%); padding: 36px 32px 28px; background: var(--blatt); border-radius: var(--r-blatt); box-shadow: var(--schatten-schwebend); }
.tor-karte .logo { margin-bottom: 16px; }
.tor-name { font-size: clamp(2.1rem, 7vw, 2.6rem); font-weight: 800; letter-spacing: -.015em; margin: 0 0 6px; color: var(--tinte); }
.tor-text { margin: 0 0 24px; color: var(--leise); font-size: 1.08em; }
.tor-fehler { margin: 0; color: var(--signal); font-weight: 600; }
.tor-karte .link { margin-top: 12px; }
.laedt { display: grid; place-items: center; align-content: center; min-height: 60vh; color: var(--leise); gap: 12px; }
.laedt .logo, .laedt img { opacity: .9; }
.laedt.klein { min-height: 120px; }

/* ── Gerüst */
.rahmen { display: grid; grid-template-columns: var(--seite-b, 272px) minmax(0, 1fr) 244px; height: var(--app-h, 100dvh); padding: 8px 8px 8px 0; }
.rahmen[data-leute="0"] { grid-template-columns: var(--seite-b, 272px) minmax(0, 1fr); }
.rahmen[data-leute="0"] .leute { display: none; }
.rahmen.getrennt .hauptbereich::before { content: "Keine Verbindung zum Server. Neue Nachrichten kommen an, sobald sie wieder steht."; position: absolute; inset: 0 0 auto; z-index: 20; background: var(--signal-stark); color: var(--signal-text); font-size: .88em; text-align: center; padding: 4px; border-radius: var(--r-blatt) var(--r-blatt) 0 0; }
.schleier { display: none; }
.nur-mobil { display: none !important; }

/* Seitenleiste */
.seite { display: flex; flex-direction: column; min-height: 0; position: relative; }
/* Griff zum Ändern der Breite (js/app.js, seitenbreite): schmaler Streifen am rechten Rand, zeigt sich beim Darüberfahren */
.seite-griff { position: absolute; top: 0; bottom: 0; right: -6px; width: 12px; cursor: col-resize; z-index: 5; touch-action: none; }
.seite-griff::after { content: ""; position: absolute; top: 12px; bottom: 12px; left: 5px; width: 2px; border-radius: 2px; background: var(--primaer); opacity: 0; transition: opacity .15s; }
.seite-griff:hover::after, .seite-griff:focus-visible::after, .zieht-breite .seite-griff::after { opacity: .55; }
.seite-griff:focus-visible { outline: none; }
.zieht-breite, .zieht-breite * { cursor: col-resize !important; user-select: none; }
.seite-kopf { display: flex; align-items: center; justify-content: space-between; padding: 10px 8px 12px 18px; }
.marke { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.28rem; letter-spacing: .02em; color: var(--tinte); min-width: 0; }
.marke span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seite-kopf-knoepfe { display: flex; }
/* Umzug auf eine neue Adresse (js/umzug.js): Karte in der Seitenleiste, Hinweis auf der Anmeldeseite, Anleitung */
.umzug-karte { margin: 0 10px 10px; padding: 12px 12px 12px 14px; border-radius: var(--r); background: var(--blatt); box-shadow: inset 3px 0 0 var(--akzent), inset 0 0 0 1px var(--linie); display: grid; gap: 10px; }
.umzug-karte p, .umzug-tor p { margin: 0; display: grid; gap: 2px; line-height: 1.35; }
.umzug-karte span, .umzug-tor span { color: var(--leise); font-size: .9em; }
.umzug-karte .knopf { justify-self: start; }
.umzug-tor { display: grid; gap: 10px; margin: 4px 0 20px; padding: 12px 14px; border-radius: var(--r); background: var(--erhaben); box-shadow: inset 3px 0 0 var(--akzent), inset 0 0 0 1px var(--linie); }
.umzug-tor .knopf { justify-self: start; }
.umzug-anleitung > p { margin: 0 0 14px; }
.umzug-schritte { list-style: none; counter-reset: schritt; margin: 0; padding: 0; display: grid; gap: 14px; }
.umzug-schritte li { counter-increment: schritt; position: relative; padding-left: 40px; display: grid; gap: 3px; justify-items: start; }
.umzug-schritte li::before { content: counter(schritt); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--tonal); color: var(--tinte); font-weight: 700; font-size: .9em; }
.umzug-schritte span { color: var(--leise); }
.umzug-schritte .knopf { margin-top: 6px; }
.kanalliste { flex: 1; overflow-y: auto; padding: 0 10px 12px; }
.gruppe { margin-top: 14px; }
.gruppe h2 { margin: 0 0 2px; font-size: .84rem; font-weight: 600; color: var(--leise); letter-spacing: 0; }
.gruppe-zeile { display: flex; align-items: center; justify-content: space-between; padding-right: 2px; }
.gruppe-kopf { border: 0; background: none; color: inherit; font: inherit; padding: 4px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-klein); }
.gruppe-kopf:hover { color: var(--tinte); }
.gruppe-kopf::before { content: ""; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; rotate: 45deg; translate: 0 -2px; transition: rotate .15s; }
.gruppe.zu .gruppe-kopf::before { rotate: -45deg; translate: 0 0; }
.gruppe-kopf.statisch { cursor: default; }
.gruppe-kopf.statisch::before { display: none; }
.gruppe ul, .leute ul { list-style: none; margin: 0; padding: 0; }
.kanal { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: var(--r-klein); color: var(--leise); text-decoration: none; min-height: 38px; transition: background .12s, color .12s; }
.kanal:hover { background: color-mix(in srgb, var(--leise) 10%, transparent); color: var(--tinte); }
.kanal.aktiv { background: var(--tonal); color: var(--tinte); font-weight: 600; }
.kanal.neu { color: var(--tinte); font-weight: 700; }
.kanal .ic { width: 18px; height: 18px; opacity: .85; }
.kname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanal.verbunden { color: var(--tuerkis-dunkel); font-weight: 700; }
/* Besprechung mit Aufnahme: rotes Aufnahme-Symbol (Chat, Ablage, Sprachraum, Protokolle haben je ein eigenes) */
.ic.rec-sym { color: var(--signal); }
.kanal:not(.aktiv):not(:hover) .ic.rec-sym { opacity: .85; }
.zahl { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--marke-stark); color: var(--marke-text); font-size: .75rem; font-weight: 700; display: inline-grid; place-items: center; }
.punkt-on { width: 8px; height: 8px; border-radius: 50%; background: var(--online); }
.drin { padding: 2px 0 6px 36px !important; }
.drin li { display: flex; align-items: center; gap: 8px; padding: 3px 4px; font-size: .92em; color: var(--tinte); }
.drin .pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live { font-size: .7rem; font-weight: 700; background: var(--signal-stark); color: var(--signal-text); border-radius: 4px; padding: 0 5px; }
.gruppe li.leise { padding: 4px 12px; font-size: .92em; }

.rec-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--signal); flex: none; display: inline-block; box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 22%, transparent); }
.rec-punkt.gross { width: 11px; height: 11px; }
.rec-ring { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .6; flex: none; display: inline-block; }

.anruf { margin: 0 10px 8px; display: flex; align-items: center; gap: 6px; padding: 10px 8px 10px 14px; border-radius: var(--r); background: var(--blatt); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tuerkis) 45%, transparent); }
.anruf.wackelt { box-shadow: inset 0 0 0 1px color-mix(in srgb, #FABB00 60%, transparent); }
.anruf-text { flex: 1; min-width: 0; display: grid; text-decoration: none; color: var(--tinte); line-height: 1.3; }
.anruf-text b { color: var(--tuerkis-dunkel); font-size: .92em; display: flex; align-items: center; gap: 6px; }
.anruf-text b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--online); }
.anruf.wackelt .anruf-text b { color: #BF8614; }
.anruf.wackelt .anruf-text b::before { background: #FABB00; }
.anruf-text span { font-size: .86em; color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anruf .sym.gefahr { color: var(--signal); }

.ich-leiste { display: flex; align-items: center; gap: 2px; margin: 0 10px 2px; padding: 6px; border-radius: var(--r); }
.ich-person { flex: 1; min-width: 0; display: flex; gap: 10px; align-items: center; border: 0; background: none; cursor: pointer; padding: 5px 6px; border-radius: var(--r-klein); text-align: left; }
.ich-person:hover { background: color-mix(in srgb, var(--leise) 10%, transparent); }
.ich-text { display: grid; min-width: 0; line-height: 1.25; }
.ich-text b, .ich-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ich-text b { font-weight: 600; }
.ich-text small { font-size: .8em; color: var(--leise); }
.ich-text small .anw-punkt { margin-right: 5px; translate: 0 -1px; }
.anw-punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--anw); flex: none; vertical-align: middle; position: relative; }
.anw-punkt.anw-abwesend::after { content: ""; position: absolute; left: 2px; right: 2px; top: 3.5px; height: 1px; background: #fff; }
.anw-punkt.anw-offline { background: transparent; box-shadow: inset 0 0 0 1.5px var(--anw); }
.kanal .anw-punkt { margin-left: auto; }
.anw-wahl { display: grid; gap: 4px; }
.formular label.anw-option, .anw-option { display: flex; font-size: 1em; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--r); cursor: pointer; font-weight: 600; }
.anw-option:hover { background: var(--erhaben); }
.anw-option input { accent-color: var(--primaer); margin: 0; }
.anw-option .anw-punkt { width: 12px; height: 12px; }
.anw-option .anw-punkt.anw-abwesend::after { top: 5.5px; }
.anruf-text small { font-size: .8em; color: var(--leise); }
.anruf-text small.auf-an::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); margin-right: 5px; translate: 0 -1px; }
.ich-knoepfe { display: flex; }

/* Hauptbereich: das Blatt */
.hauptbereich { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; background: var(--blatt); border-radius: var(--r-blatt); box-shadow: 0 0 0 1px color-mix(in srgb, var(--linie) 70%, transparent); overflow: hidden; }
.kopf { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 22px; min-height: 62px; }
.kopf-titel { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; margin: 0; font-size: 1.05rem; }
.kopf-titel h1 { margin: 0; font-size: 1.18rem; font-weight: 700; white-space: nowrap; }
h1.kopf-titel { font-size: 1.18rem; font-weight: 700; }
.kopf-titel > .ic { color: var(--leise); }
.thema { color: var(--leise); font-size: .95em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thema::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--sehr-leise); margin: 0 10px 0 2px; translate: 0 -3px; }
.reiterleiste { display: flex; gap: 2px; padding: 4px; border-radius: var(--r-klein); background: var(--erhaben); }
.reiter { padding: 6px 14px; border-radius: var(--r-klein); text-decoration: none; color: var(--leise); font-weight: 600; border: 0; background: none; cursor: pointer; transition: background .12s, color .12s; }
.reiter:hover { color: var(--tinte); }
.reiter.an { color: var(--tinte); background: var(--blatt); box-shadow: 0 1px 3px rgb(0 49 59 / .14); }
.kopf-knoepfe { display: flex; gap: 6px; align-items: center; }
.kopf-knoepfe .sym[aria-pressed="true"] { color: var(--tinte); background: var(--erhaben); }
.inhalt { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }

/* Verlauf: mittige Spalte */
.verlauf { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.verlauf:focus, .verlauf:focus-visible { outline: none; }
.verlauf-innen { max-width: 860px; margin: 0 auto; padding: 8px 0 24px; }
.anfang { padding: 40px 28px 12px; }
.anfang-symbol { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--tonal); color: var(--primaer); margin-bottom: 14px; }
.anfang-symbol .ic { width: 26px; height: 26px; }
.anfang h2 { margin: 8px 0 6px; font-size: 1.9rem; font-weight: 700; letter-spacing: -.025em; }
.anfang p { margin: 0; color: var(--leise); max-width: 60ch; font-size: 1.05em; }
.mehr { text-align: center; color: var(--leise); font-size: .88em; padding: 12px; }
.tag-trenner, .neu-trenner { display: flex; align-items: center; justify-content: center; margin: 20px 28px 8px; color: var(--leise); font-size: .84rem; font-weight: 600; }
.tag-trenner span { padding: 3px 12px; border-radius: var(--r-klein); background: var(--erhaben); }
/* Datum bleibt beim Scrollen oben stehen, bis der nächste Tag es ablöst */
.tag-trenner { position: sticky; top: 8px; z-index: 3; pointer-events: none; }
.tag-trenner span { box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.tag-trenner.verdeckt { visibility: hidden; }
.neu-trenner { gap: 10px; color: var(--signal); }
.neu-trenner::before, .neu-trenner::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--signal) 45%, transparent); }

.msg { position: relative; padding: 8px 28px 4px; border-radius: var(--r); margin: 0 8px; }
.msg.kompakt { padding-top: 2px; }
.msg:hover { background: var(--erhaben); }
.msg.erwaehnt { background: var(--erwaehnt); box-shadow: inset 3px 0 0 var(--erwaehnt-rand); }
.msg.blitz { background: var(--tonal); transition: background 1s; }
.msg-zeile { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; }
.msg-rumpf { min-width: 0; }
.msg header { display: flex; align-items: baseline; gap: 8px; }
.autor { font-weight: 700; }
.msg time { color: var(--sehr-leise); font-size: .8rem; }
.seitenzeit { opacity: 0; text-align: right; padding-top: 4px; font-size: .72rem !important; }
.msg:hover .seitenzeit { opacity: 1; }
.msg-text { overflow-wrap: anywhere; max-width: 72ch; }
.msg-text code { font-size: .9em; background: var(--tonal); padding: 1px 6px; border-radius: 6px; }
.msg-text pre { background: var(--erhaben); box-shadow: inset 0 0 0 1px var(--linie); padding: 12px 14px; border-radius: var(--r); overflow-x: auto; margin: 8px 0; }
.msg-text pre code { background: none; padding: 0; }
.erw { background: color-mix(in srgb, var(--cyan) 14%, transparent); color: var(--akzent); font-weight: 600; border-radius: 6px; padding: 0 4px; }
.erw-ich { background: var(--marke-hell); color: var(--marke); }
.bearbeitet { color: var(--sehr-leise); font-size: .8em; }
.zitat { display: flex; align-items: center; gap: 6px; margin: 0 0 4px 52px; border: 0; background: none; color: var(--leise); font-size: .88em; cursor: pointer; max-width: calc(100% - 52px); padding: 0; text-align: left; }
.zitat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zitat b { color: var(--tinte); flex: none; }
.msg-werkzeuge { position: absolute; right: 16px; top: -16px; display: none; background: var(--blatt); border-radius: var(--r-klein); padding: 3px; box-shadow: var(--schatten-schwebend); }
.msg:hover .msg-werkzeuge, .msg:focus-within .msg-werkzeuge { display: flex; }
.dateien { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.bild img { display: block; max-width: min(420px, 100%); max-height: 340px; border-radius: var(--r); }
.datei-chip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r); background: var(--erhaben); box-shadow: inset 0 0 0 1px var(--linie); text-decoration: none; color: var(--tinte); max-width: min(380px, 100%); min-width: 0; }
.datei-chip span { flex: 1; min-width: 0; }
.datei-chip small { flex: none; white-space: nowrap; }
.dateien { min-width: 0; max-width: 100%; }
.datei-chip > .ic:first-child { color: var(--akzent); }
.datei-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.datei-chip:hover { box-shadow: inset 0 0 0 1px var(--akzent); }
.reaktionen { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.reaktion { border: 0; background: var(--erhaben); box-shadow: inset 0 0 0 1px var(--linie); border-radius: var(--r-klein); padding: 3px 9px 3px 7px; cursor: pointer; font-size: .92em; display: inline-flex; align-items: center; gap: 5px; }
.reak-sym { display: block; flex: none; }
.reak-text { font-size: 1.1em; line-height: 1; }
.reaktion.meine { background: var(--tonal); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tuerkis) 60%, transparent); }
.reaktion span { font-weight: 700; color: var(--leise); }
.emoji-wahl { position: fixed; z-index: 50; display: flex; gap: 2px; padding: 5px; background: var(--blatt); border-radius: var(--r-klein); box-shadow: var(--schatten-schwebend); }
.emoji-wahl button { border: 0; background: none; font-size: 1.3rem; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; transition: transform .1s; display: grid; place-items: center; }
.emoji-wahl button:hover, .emoji-wahl button:focus-visible { background: var(--erhaben); transform: scale(1.15); }

.msg.system { padding: 8px 28px; }
.msg.system:hover { background: none; }
/* Platzhalter eines endgültig entfernten Kontos („Nachricht entfernt“) */
.msg.entfernt { padding: 8px 28px 4px; }
.entfernt-av { background: transparent; color: var(--leise); box-shadow: inset 0 0 0 1.5px var(--linie); }
.msg.entfernt .msg-text { font-style: italic; }
.sys-karte { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-gross); background: var(--erhaben); box-shadow: inset 0 0 0 1px var(--linie); max-width: 640px; }
.sys-karte > div { flex: 1; display: grid; }
.sys-karte span { color: var(--leise); font-size: .9em; }
.sys-karte > .ic { width: 40px; height: 40px; padding: 9px; border-radius: var(--r); background: var(--signal-hell); color: var(--signal); }

.nach-unten { position: absolute; bottom: 110px; left: 50%; translate: -50% 0; z-index: 5; display: inline-flex; gap: 6px; align-items: center; border: 0; background: var(--blatt); color: var(--tinte); border-radius: var(--r-klein); padding: 7px 16px; font-weight: 600; cursor: pointer; box-shadow: var(--schatten-schwebend); }

/* Schreiben: schwebendes Feld */
.tipp-zone { padding: 0 24px 20px; position: relative; max-width: 908px; width: 100%; margin: 0 auto; }
.tipp { position: relative; display: flex; align-items: flex-end; gap: 6px; background: var(--blatt); border-radius: 26px; padding: 8px; box-shadow: var(--schatten-schwebend), inset 0 0 0 1px var(--linie); }
.tipp::before { content: ""; position: absolute; inset: -1.5px; border-radius: 27.5px; padding: 1.5px; background: var(--verlauf); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .2s; pointer-events: none; }
.tipp:focus-within::before { opacity: .45; }
.tipp:has(.senden.bereit)::before { opacity: 1; }
.tipp textarea { border: 0 !important; box-shadow: none !important; resize: none; padding: 9px 6px; max-height: 260px; background: transparent !important; line-height: 1.5; font-size: 1.02em; }
.tipp .sym { width: 40px; height: 40px; }
.tipp .senden { background: var(--tonal); color: var(--sehr-leise); }
.tipp .senden.bereit { background: var(--primaer); color: var(--primaer-text); }
.tipp .senden.bereit:hover { background: var(--primaer-hover); }
.tipp .senden .ic { stroke-width: 2.4; }
.nur-lesen { margin: 0 auto; padding: 16px 28px 24px; color: var(--leise); max-width: 860px; width: 100%; }
.antwort-leiste { display: flex; align-items: center; gap: 8px; padding: 8px 14px; margin: 0 14px 8px; background: var(--erhaben); border-radius: var(--r-klein); font-size: .9em; color: var(--leise); }
.antwort-leiste span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.warte-dateien { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px; }
.warte-dateien:not(:empty) { padding-bottom: 10px; }
.warte { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 12px; background: var(--tonal); border-radius: var(--r-klein); font-size: .9em; }
.warte small { color: var(--leise); }
.hochladen { display: flex; align-items: center; gap: 10px; font-size: .88em; color: var(--leise); padding: 0 14px 8px; }
.hochladen progress { flex: 1; accent-color: var(--tuerkis); height: 6px; }
.erw-vorschlag { position: absolute; bottom: calc(100% - 12px); left: 24px; z-index: 6; min-width: 260px; background: var(--blatt); border-radius: var(--r); box-shadow: var(--schatten-schwebend); padding: 6px; display: grid; }
.erw-opt { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 7px 10px; border-radius: var(--r-klein); cursor: pointer; text-align: left; }
.erw-opt.an, .erw-opt:hover { background: var(--tonal); }
.inhalt.ablage::after { content: "Dateien hier ablegen"; position: absolute; inset: 12px; display: grid; place-items: center; border: 2px dashed var(--tuerkis); border-radius: var(--r-gross); background: color-mix(in srgb, var(--blatt) 88%, transparent); font-weight: 700; color: var(--tuerkis-dunkel); font-size: 1.25rem; pointer-events: none; }

/* Personen rechts */
.leute { overflow-y: auto; padding: 12px 6px 12px 14px; }
.leute h2 { font-size: .84rem; color: var(--leise); margin: 12px 10px 6px; font-weight: 600; }
.person { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 6px 10px; border-radius: var(--r-klein); cursor: pointer; text-align: left; position: relative; }
.person:hover { background: color-mix(in srgb, var(--leise) 10%, transparent); }
.person span { display: grid; min-width: 0; line-height: 1.25; }
.person b, .person small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person b { font-weight: 600; }
.person small { color: var(--leise); font-size: .82em; }
.person:not(.weg) .av { box-shadow: 0 0 0 2px var(--grund), 0 0 0 3.5px var(--anw, var(--online)); }
.person.weg { opacity: .55; }
.karte-person { display: flex; gap: 16px; align-items: center; }
.karte-person p { margin: 0; }

/* ── Bühne (Sprachraum). Solange protokolliert wird, trägt sie oben eine rote Linie. */
.buehne-platz { flex: 0 0 auto; height: min(60vh, 640px); display: flex; padding: 0 12px 12px; }
.buehne { flex: 1; display: flex; flex-direction: column; background: var(--buehne); color: var(--buehne-text); position: relative; min-height: 0; border-radius: var(--r-gross); overflow: hidden; }
.buehne[data-prot="laeuft"] { box-shadow: inset 0 3px 0 var(--uni-rot); }
.prot-band { display: flex; align-items: center; gap: 10px; padding: 12px 18px; font-size: .95em; }
.buehne[data-prot="startet"] .prot-band .rec-punkt, .buehne[data-prot="fehlt"] .prot-band .rec-punkt { background: #8CA3AB; box-shadow: none; }
.buehne[data-prot="laeuft"] .prot-band .rec-punkt { background: var(--rec-buehne); animation: puls 2s ease-in-out infinite; }
.prot-band span { color: var(--buehne-leise); }
.prot-band .knopf { margin-left: auto; background: rgb(255 255 255 / .1); color: var(--buehne-text); }
.prot-band .knopf:hover { background: rgb(255 255 255 / .18); }
@keyframes puls { 50% { box-shadow: 0 0 0 7px rgb(255 74 90 / 0); } }
.kacheln { flex: 1; min-height: 0; padding: 4px 14px 10px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-auto-rows: minmax(0, 1fr); align-content: center; }
.kacheln[data-anzahl="1"] { grid-template-columns: minmax(0, 720px); justify-content: center; }
.kacheln[data-anzahl="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Sprecher/geteilter Bildschirm groß, die anderen als Streifen rechts (Handy: unten) */
.kacheln.mit-spot { grid-template-columns: minmax(0, 1fr) clamp(150px, 19%, 260px); grid-template-rows: repeat(var(--n, 1), minmax(0, 1fr)); grid-auto-flow: row; align-content: stretch; }
.kacheln.mit-spot > .spot { grid-column: 1; grid-row: 1 / -1; }
.kacheln.mit-spot > .kachel:not(.spot) { grid-column: 2; min-height: 0; max-height: 200px; align-self: center; width: 100%; aspect-ratio: 16 / 10; }
.kacheln.mit-spot > .kachel:not(.spot) .bild .av { --g: 44px !important; }
.kacheln.mit-spot > .kachel:not(.spot) .schild { left: 6px; bottom: 6px; padding: 2px 8px; font-size: .78em; }
.kacheln .kachel { min-height: 0; }
.kachel { position: relative; border-radius: var(--r-gross); background: radial-gradient(120% 120% at 50% 0%, #164550 0%, var(--kachel) 60%); overflow: hidden; display: grid; min-height: 120px; outline: 3px solid transparent; outline-offset: -3px; transition: outline-color .12s; }
/* Wer spricht, leuchtet: Stärke folgt der Lautstärke (--pegel 0…1, aus sprache.js) */
/* Kachel: nur Rahmen (günstig, auch über Video); das Leuchten trägt der Avatar */
.kachel.spricht { outline-color: var(--buehne-gruen); }
.av { --pegel: 0; }
.kachel .bild .av { transition: box-shadow .08s, transform .08s; }
.kachel.spricht .bild .av { box-shadow: 0 0 0 calc(4px + 10px * var(--pegel)) rgb(127 211 154 / .55), 0 0 calc(16px + 40px * var(--pegel)) rgb(127 211 154 / .5); transform: scale(calc(1 + .06 * var(--pegel))); }
.drin li .av { transition: box-shadow .08s; }
.drin li.spricht .av { box-shadow: 0 0 0 2px var(--buehne-gruen), 0 0 calc(4px + 12px * var(--pegel)) rgb(127 211 154 / .8); }
.drin li.spricht .pname { color: var(--tinte); font-weight: 600; }
.ich-leiste .av { transition: box-shadow .08s; }
.ich-leiste.spricht .av { box-shadow: 0 0 0 2px var(--buehne-gruen), 0 0 calc(4px + 12px * var(--pegel)) rgb(127 211 154 / .8); }
.kachel .bild { display: grid; place-items: center; min-height: 0; }
.kachel .bild video { width: 100%; height: 100%; object-fit: cover; display: block; }
.kachel.schirm .bild video { object-fit: contain; background: #000; }
/* Galerie: Kachelgröße rechnet sprache.js (rasterBerechnen) aus dem Format der Videos; hier nur die Anordnung */
.kacheln.raster { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; }
.kacheln.raster > .kachel { flex: none; min-height: 0; }
/* Eine Zeile, eine Spalte in Kachelgröße: hohe Videos (Handy hochkant) dürfen die Kachel nicht aufblähen */
.kachel { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.kachel .bild { min-width: 0; overflow: hidden; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
/* Zu viel Zuschnitt: ganzes Bild mit ruhigem Rand statt abgeschnittener Gesichter */
.kachel.ganz .bild video { object-fit: contain; }
.kachel .passung { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; background: rgb(0 20 25 / .6); opacity: 0; transition: opacity .15s; z-index: 1; }
.kachel:hover .passung, .kachel .passung:focus-visible { opacity: 1; }
.kachel .passung .ic { width: 18px; height: 18px; color: #fff; }
.kachel .passung[hidden] { display: none; }
@media (hover: none) { .kachel .passung { opacity: .85; width: 30px; height: 30px; right: 6px; top: 6px; } }
.kacheln.mit-spot > .kachel:not(.spot) .passung { display: none; }
.kachel.spiegel video { transform: scaleX(-1); }
.kachel .bild .av { box-shadow: 0 0 0 6px rgb(255 255 255 / .06); }
.kachel .bild img.av { border-radius: 50%; max-width: none; max-height: none; }
.kachel .schild { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 20px); padding: 4px 11px; border-radius: var(--r-klein); background: rgb(0 20 25 / .72); font-size: .88em; }
.kachel .schild .kname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kachel .schild .ic { color: #FF9A85; }
.steuer { flex: none; display: flex; justify-content: center; align-items: center; gap: 18px; padding: 10px 12px 16px; flex-wrap: wrap; }
.st-gruppe { display: flex; gap: 8px; align-items: center; }
.st-gruppe:empty { display: none; }
.st-gruppe + .st-gruppe { padding-left: 18px; box-shadow: inset 1px 0 0 rgb(255 255 255 / .12); }
.st-gruppe:last-child { padding-left: 0; box-shadow: none; }
.buehne { min-height: 0; }
/* Größe kommt nur von der Bühne, nie vom Inhalt: sonst schieben große Kacheln oder hohe Videos die Bühne auf */
.buehne > .kacheln { overflow: hidden; contain: size; }
/* Teilen läuft: Hinweis mit Beenden über den Kacheln */
.teil-band { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 10px; margin: 8px 12px 0; padding: 6px 6px 6px 14px; border-radius: 999px; background: var(--buehne-gruen); color: var(--gruen-text); font-weight: 600; font-size: .92em; box-shadow: 0 4px 16px rgb(0 0 0 / .25); }
.teil-band .knopf { background: var(--gruen-text); color: #fff; border-radius: 999px; }
.teil-band .knopf:hover { background: #1A4027; }
.rund { width: 50px; height: 50px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgb(255 255 255 / .1); color: var(--buehne-text); cursor: pointer; transition: background .15s; }
.rund:hover { background: rgb(255 255 255 / .18); }
.rund.aus { background: #F1F5F6; color: #B83218; }
#st-kam.aus { background: rgb(255 255 255 / .1); color: var(--buehne-text); }
#st-kam:not(.aus) { background: #F1F5F6; color: var(--ozean-tief); }
.rund.teilt { background: var(--buehne-gruen); color: var(--gruen-text); }
.rund.prot.rec { box-shadow: inset 0 0 0 2px var(--rec-buehne); }
.rund.gefahr { background: var(--signal-stark); color: var(--signal-text); width: 64px; border-radius: var(--r-klein); }
.rund.gefahr:hover { background: #9A2A14; }
.rund .ic { width: 22px; height: 22px; }
.rund.gefahr.sicher { width: auto; padding: 0 14px; background: #9A2A14; box-shadow: 0 0 0 3px rgb(255 115 87 / .35); }
.steuer .sicher-text { align-self: center; color: #FFBBA9; font-weight: 600; font-size: .92em; }
/* Geteilter Bildschirm: Vollbild-Knopf */
.kachel .voll { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; background: rgb(0 20 25 / .6); opacity: 0; transition: opacity .15s; }
.kachel:hover .voll, .kachel .voll:focus-visible { opacity: 1; }
.kachel .voll .ic { width: 18px; height: 18px; color: #fff; }
.kachel:fullscreen { border-radius: 0; outline: 0; }
.kachel:fullscreen .bild video { object-fit: contain; }
@media (hover: none) { .kachel .voll { opacity: 1; } }
/* Gespräch im eigenen Fenster (Document Picture-in-Picture) */
body.pip { margin: 0; height: 100vh; display: flex; background: var(--buehne); overflow: hidden; }
body.pip .buehne { border-radius: 0; flex: 1; }
body.pip .kacheln { padding-top: 10px; }
.buehne-extern { flex: 1; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 18px; border-radius: var(--r-gross); background: var(--erhaben); box-shadow: inset 0 0 0 1px var(--linie); color: var(--leise); }
.buehne-extern .ic { color: var(--akzent); }
.buehne-platz:has(.buehne-extern) { height: auto; }
/* Sprachraum ohne Chat: verbunden füllt die Bühne die Seite */
#haupt[data-ansicht="raum"] .buehne-platz:not([hidden]) { flex: 1; height: auto; padding: 0; }
/* Im Raum: Bühne randlos im Hauptfeld (keine Kästen in Kästen) */
#haupt[data-ansicht="raum"] .buehne { border-radius: 0; }
#haupt[data-ansicht="raum"] .buehne-platz:has(.buehne-extern) { padding: 24px; }
#haupt[data-ansicht="raum"] .buehne-platz:not([hidden]):not(:has(.buehne-extern)) + .inhalt { display: none; }
.raum-leer { flex: 1; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 32px 20px; text-align: center; }
.raum-leer h2 { margin: 0; font-size: 1.5rem; }
.raum-leer p { margin: 0; max-width: 46ch; }
.raum-symbol { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--erhaben); box-shadow: inset 0 0 0 1px var(--linie); }
.raum-symbol .ic { width: 32px; height: 32px; }
.raum-drin { display: grid; justify-items: center; gap: 8px; }
.raum-avs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.knopf.gross { padding: 12px 26px; font-size: 1.05em; }
.raum-leer .hinweis { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; }

/* ── Seiten (Protokolle, Dateien, Suche, Verwaltung, Einstellungen) */
.seite-inhalt { flex: 1; overflow-y: auto; padding: 18px 28px 48px; }
.seite-inhalt > * { max-width: 920px; }
/* Eine Lesespalte: alle direkten Kinder mittig mit gleicher linker Kante, auch wenn eine Regel eines Bausteins (z. B.
   .hinweis-band, Überschriften) eigene seitliche Ränder setzt */
.seite-inhalt.seite-inhalt > * { margin-left: auto; margin-right: auto; }
.seite-inhalt.transkript > * { max-width: 820px; }
.seite-inhalt h2 { font-size: 1.15rem; margin: 26px 0 12px; }
.leer-hinweis { padding: 56px 0; text-align: center; }
.leer-hinweis p { margin: 4px 0; font-size: 1.08em; }
.protokolle, .treffer, .dateiliste, .einladungen, .kanal-verw { list-style: none; padding: 0; display: grid; gap: 4px; }
.protokolle li a { display: grid; grid-template-columns: minmax(180px, 1.2fr) 2fr auto; gap: 16px; align-items: center; padding: 14px 16px; border-radius: var(--r); text-decoration: none; color: var(--tinte); }
.protokolle li a:hover, .treffer li a:hover { background: var(--erhaben); }
.p-datum { display: grid; }
.p-datum span { color: var(--leise); font-size: .92em; }
.p-leute { display: flex; }
.p-leute .av { margin-right: -7px; box-shadow: 0 0 0 2px var(--blatt); }
.p-status { font-size: .86em; font-weight: 600; color: var(--leise); padding: 3px 11px; border-radius: var(--r-klein); background: var(--erhaben); }
.p-status.st-fertig { color: var(--tuerkis-dunkel); background: color-mix(in srgb, var(--tuerkis) 14%, transparent); }
.p-status.st-laeuft, .p-status.st-fehler { color: var(--signal); background: var(--signal-hell); }
.transkript .tr-kopf { display: grid; gap: 16px; margin-bottom: 8px; }
.transkript .tr-kopf > .knopf { justify-self: start; }
.tr-titel h2 { margin: 0; font-size: 1.8rem; letter-spacing: -.025em; }
.tr-titel p { margin: 4px 0 0; }
.tr-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tr-knoepfe .suchfeld { flex: 1 1 180px; width: auto; max-width: 340px; border-radius: var(--r-klein); }
.hinweis-band { padding: 12px 16px; border-radius: var(--r); background: var(--tonal); }
.hinweis-band.fehler { background: var(--signal-hell); }
.tr-block { padding: 16px 0; }
.tr-block + .tr-block { border-top: 1px solid var(--linie); }
.tr-wer { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tr-wer time { color: var(--sehr-leise); font-variant-numeric: tabular-nums; font-size: .9em; }
.tr-block p { margin: 0 0 0 42px; line-height: 1.7; font-size: 1.05em; }
.tr-satz.treffer { background: color-mix(in srgb, var(--gruen) 32%, transparent); border-radius: 3px; }
.treffer li a { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--r); color: var(--tinte); text-decoration: none; }
.treffer small { color: var(--leise); }
mark { background: color-mix(in srgb, var(--gruen) 40%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.suchzeile { display: flex; gap: 8px; }
.dateiliste li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 14px; border-radius: var(--r); }
.dateiliste li:hover { background: var(--erhaben); }
.dateiliste a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinte); font-weight: 600; min-width: 0; }
.dateiliste a .ic { color: var(--ozean); }
.dname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bildraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.bildraster img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); display: block; }

.karte { background: var(--erhaben); border-radius: var(--r-gross); padding: 22px 24px; margin-bottom: 14px; box-shadow: inset 0 0 0 1px var(--linie); }
.karte h2 { margin-top: 0 !important; }
/* Einstellungen und Verwaltung: eine mittige Spalte */
.einstellungen > * { max-width: 720px; }
.einstellungen .karte p { max-width: none; }
.einstellungen > *, .verwaltung > * { margin-left: auto !important; margin-right: auto !important; }
.karte input:not([type=checkbox]):not([type=radio]):not([type=range]), .karte select { background-color: var(--blatt); }
.karte .kasten, .karte fieldset > .rollen-wahl, .karte fieldset > .mitglieder-liste { background: var(--blatt); }
.reiterleiste.innen { display: inline-flex; margin-bottom: 20px; }
.profil-zeile { display: flex; align-items: center; gap: 16px; }
.profil-bild { position: relative; cursor: pointer; border-radius: 50%; display: inline-grid; flex: none; }
.profil-bild:hover .av, .profil-bild:focus-within .av { box-shadow: 0 0 0 3px var(--akzent); }
.profil-bild-stift { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--primaer); color: var(--primaer-text, #04191E); box-shadow: 0 0 0 3px var(--erhaben); }
.einw-text p { margin: 0 0 10px; max-width: 68ch; }
.zustand { display: flex; align-items: center; gap: 8px; font-weight: 700; margin: 14px 0; }
.zustand.auf-aus .rec-punkt, .zustand.auf-pause .rec-punkt { background: var(--sehr-leise); box-shadow: none; }
.verlauf-einw { margin: 6px 0 0; padding-left: 18px; color: var(--leise); }
details summary { cursor: pointer; color: var(--leise); font-weight: 600; }
.tabelle-rahmen { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: separate; border-spacing: 0; }
.tabelle th { text-align: left; font-size: .86em; font-weight: 600; color: var(--leise); padding: 8px 10px; }
.tabelle td { padding: 10px; border-top: 1px solid var(--linie); vertical-align: middle; }
.tabelle select { width: auto; padding: 6px 34px 6px 12px; border-radius: var(--r-klein); }
.tabelle tr.gesperrt { opacity: .55; }
.zelle-person { display: flex; gap: 10px; align-items: center; }
.zelle-person span { display: grid; line-height: 1.25; }
.zelle-person small { color: var(--leise); }
.zelle-person small.warn-text { color: var(--signal); display: flex; align-items: center; gap: 4px; }
input[readonly] { opacity: .75; cursor: default; }
.aktionen { white-space: nowrap; text-align: right; }
.aktionen .knopf + .knopf { margin-left: 6px; }
.einladungen li, .kanal-verw li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r); }
.einladungen li:hover, .kanal-verw li:hover { background: var(--erhaben); }
.einladungen li > div, .kanal-verw li > span { flex: 1; display: grid; min-width: 0; }
.kanal-verw li > span { display: flex; gap: 10px; align-items: center; }
.kanal-verw li > span > .ic { color: var(--leise); }
.einladungen small, .kanal-verw small { color: var(--leise); }
.einladungen li.abgelaufen, .kanal-verw li.archiviert { opacity: .55; }
.link-feld { display: flex; gap: 8px; }
.link-feld input { border-radius: var(--r-klein); }
.mitglieder-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 12px; max-height: 220px; overflow-y: auto; }
.rf { margin-top: 16px; }
.rf-zeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: .92em; }

/* ── Dialoge und Meldungen */
.dlg { border: 0; border-radius: var(--r-blatt); padding: 0; width: min(500px, calc(100vw - 32px)); background: var(--blatt); color: var(--tinte); box-shadow: 0 24px 70px rgb(0 31 38 / .3); }
.dlg.breit { width: min(660px, calc(100vw - 32px)); }
.dlg::backdrop { background: rgb(0 31 38 / .38); backdrop-filter: blur(3px); }
.dlg[open] { animation: auftauchen .18s ease-out; }
@keyframes auftauchen { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.dlg form { padding: 26px 28px 22px; display: grid; gap: 16px; max-height: calc(100dvh - 48px); }
.dlg h2 { margin: 0; font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; }
.dlg-inhalt { overflow-y: auto; min-height: 0; }
.dlg-inhalt > p:first-child { margin-top: 0; }
.dlg-knoepfe { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.dlg-knoepfe .links { margin-right: auto; }
.wahlliste { list-style: none; padding: 0; margin: 12px 0 0; max-height: 50vh; overflow-y: auto; }
.wahl { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; padding: 8px 10px; border-radius: var(--r-klein); cursor: pointer; }
.wahl:hover, .wahl:focus-visible { background: var(--tonal); }
#toasts { position: fixed; bottom: 24px; left: 50%; translate: -50% 0; z-index: 100; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.toast { background: var(--toast); color: var(--toast-text); padding: 10px 18px; border-radius: var(--r); font-weight: 600; box-shadow: var(--schatten-schwebend); transition: opacity .3s, translate .3s; max-width: min(560px, 90vw); }
.toast.fehler { background: var(--signal-stark); color: var(--signal-text); }
.toast.weg { opacity: 0; translate: 0 8px; }

/* ── Schmale Fenster */
/* ── Rollen */
.rollen-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: var(--r-klein); background: color-mix(in srgb, var(--rf) 14%, var(--blatt)); color: var(--tinte); font-size: .86em; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.rollen-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rf); flex: none; }
.rollen-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.karte-person + .rollen-chips { margin-top: 14px; }
.rollen-wahl { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.rollen-verw { list-style: none; padding: 0; display: grid; gap: 4px; }
.rollen-verw li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r); }
.rollen-verw li:hover { background: var(--erhaben); }
.rollen-punkt { width: 14px; height: 14px; border-radius: 50%; background: var(--rf); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--rf) 20%, transparent); }
.rollen-info { flex: 1; display: grid; min-width: 0; line-height: 1.3; }
.rollen-info small { color: var(--leise); }
.farbwahl { display: flex; flex-wrap: wrap; gap: 8px; }
.farbe-wahl { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--rf); cursor: pointer; display: grid; place-items: center; color: var(--leise); box-shadow: inset 0 0 0 1px var(--linie); }
.farbe-wahl.an { box-shadow: 0 0 0 2px var(--blatt), 0 0 0 4px var(--tinte); }
.haken.recht span { display: grid; line-height: 1.35; }
.haken.recht b { font-weight: 600; }
.haken.recht small { color: var(--leise); font-size: .88em; }
.haken input:disabled + span { opacity: .55; }
.formular details summary { cursor: pointer; font-weight: 600; }
.formular details > * + * { margin-top: 10px; }

/* ── Verschlüsselung */
.e2e-marke { display: inline-grid; place-items: center; color: var(--tuerkis-dunkel); }
.krypto-zeile { display: flex; gap: 8px; align-items: center; color: var(--tuerkis-dunkel) !important; font-weight: 600; margin-top: 4px !important; }
.anfang .link { padding: 0; margin-top: 6px; }
.hinweis-band { display: flex; align-items: center; gap: 12px; margin: 10px 28px; padding: 12px 16px; border-radius: var(--r); background: var(--erhaben); box-shadow: inset 0 0 0 1px var(--linie); }
.hinweis-band span { flex: 1; }
.hinweis-band.warnung { background: color-mix(in srgb, #D9822B 12%, var(--blatt)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #D9822B 45%, transparent); }
.krypto-hinweis { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--r-gross); background: var(--erhaben); box-shadow: inset 0 0 0 1px var(--linie); }
.krypto-hinweis > .ic { color: var(--tuerkis-dunkel); }
.krypto-hinweis p { margin: 0; flex: 1; color: var(--leise); }
.msg-text.krypto-fehler { display: flex; gap: 8px; align-items: center; color: var(--leise); font-style: italic; }
button.bild { border: 0; padding: 0; background: none; cursor: zoom-in; display: block; text-align: left; }
button.bild.krypt:not(:has(img)) { min-width: 220px; min-height: 120px; display: grid; place-items: center; border-radius: var(--r); background: var(--erhaben); box-shadow: inset 0 0 0 1px var(--linie); cursor: default; }
button.datei-chip { border: 0; cursor: pointer; font: inherit; }
.wahl-karten { display: grid; gap: 10px; }
.wahl-karte { display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 14px 16px; border: 0; border-radius: var(--r); background: var(--erhaben); box-shadow: inset 0 0 0 1px var(--linie); cursor: pointer; color: var(--tinte); }
.wahl-karte:hover { box-shadow: inset 0 0 0 2px var(--akzent); }
.wahl-karte > .ic { color: var(--ozean); margin-top: 2px; }
.wahl-karte span { display: grid; gap: 2px; line-height: 1.35; }
.wahl-karte small { color: var(--leise); }
.warte-freigabe { display: flex; gap: 16px; align-items: flex-start; }
.warte-freigabe p { margin: 0 0 8px; }
.kreisel { display: inline-block; vertical-align: middle; width: 28px; height: 28px; flex: none; border-radius: 50%; border: 3px solid var(--tonal); border-top-color: var(--tuerkis); animation: kreisel 1s linear infinite; }
@keyframes kreisel { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .kreisel { animation-duration: 3s; } }
.code-anzeige { margin: 6px 0 14px; padding: 18px; border-radius: var(--r); background: var(--erhaben); box-shadow: inset 0 0 0 1px var(--linie); font: 700 1.7rem/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .08em; text-align: center; user-select: all; overflow-wrap: anywhere; }
.code-anzeige.zahlen { font-size: 1.25rem; letter-spacing: .04em; line-height: 1.6; word-spacing: .3em; }
input.code-feld { font: 600 1.3rem/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; letter-spacing: .1em; text-transform: uppercase; text-align: center; }

/* Vertrauen: Formulare der Verschlüsselung, Bänder im Chat, Sicherheitshinweise, Seitenleiste */
.pw-feld { position: relative; display: block; }
.pw-feld input { padding-right: 46px !important; }
.pw-feld .pw-auge { position: absolute; right: 3px; top: 50%; translate: 0 -50%; width: 40px; height: 40px; color: var(--leise); }
.pw-feld .pw-auge[aria-pressed="true"] { color: var(--akzent); }
.formular label small.leise { font-weight: 400; font-size: .84em; }
.feld-fehler { margin: -8px 0 0; font-size: .9em; }
.dlg-fehler { margin-top: 10px; }
[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--signal) !important; }
.dlg-start:focus { outline: none; }
.knopf.laeuft { opacity: .7; cursor: progress; }
.warte-zeile { display: flex; align-items: center; gap: 10px; }
.kreisel.klein { width: 16px; height: 16px; border-width: 2px; }
.empfohlen { font-style: normal; font-size: .72em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: var(--tonal); color: var(--primaer); vertical-align: 2px; }
.wahl-karte.gefahr-karte:hover { box-shadow: inset 0 0 0 2px var(--signal); }
.wahl-karte.gefahr-karte > .ic { color: var(--signal); }
.liste-ruhig { margin: 6px 0 4px; padding-left: 1.3em; display: grid; gap: 6px; }
.sn-wege { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: -4px 0 10px; }
.sn-wege .link { display: inline-flex; align-items: center; gap: 6px; }
.sn-haken { padding: 10px 12px; border-radius: var(--r); background: var(--erhaben); box-shadow: inset 0 0 0 1px var(--linie); }
.begriffe { margin-top: 14px; }
.begriffe summary { cursor: pointer; color: var(--akzent); font-weight: 600; }
.begriffe dl { margin: 8px 0 0; display: grid; gap: 4px; }
.begriffe dt { font-weight: 700; margin-top: 6px; }
.begriffe dd { margin: 0; color: var(--leise); }
.krypto-hinweis.warnung { background: color-mix(in srgb, #D9822B 12%, var(--blatt)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #D9822B 45%, transparent); }
.krypto-hinweis.warnung > .ic { color: #B8641A; }
.krypto-hinweis.warnung p { color: var(--tinte); }
.luecke-band { display: flex; align-items: center; gap: 12px; margin: 8px 28px; padding: 10px 14px; border-radius: var(--r); background: var(--erhaben); box-shadow: inset 0 0 0 1px var(--linie); color: var(--leise); }
.luecke-band p { margin: 0; flex: 1; }
.luecke-band b { color: var(--tinte); }
.luecke-band .knopf { white-space: nowrap; }
.geraete li > .reihe-knoepfe { display: flex; justify-content: flex-end; flex: none; }
.krypto-start { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 12px; min-height: 38px; border: 0; border-radius: var(--r-klein); background: color-mix(in srgb, var(--akzent) 10%, transparent); color: var(--akzent); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.krypto-start:hover { background: color-mix(in srgb, var(--akzent) 18%, transparent); }
.krypto-start .ic { width: 18px; height: 18px; flex: none; }
.punkt-hinweis { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--akzent); vertical-align: 2px; }
.jeeves-msg.sicherheit .jeeves-blase { background: color-mix(in srgb, #D9822B 10%, var(--erhaben)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #D9822B 50%, transparent); border-left: 4px solid #D9822B; }
.sicherheit-marke { display: flex; align-items: center; gap: 6px; margin: 0 0 4px !important; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #B8641A; }
.sicherheit-marke .ic { width: 14px; height: 14px; }
@media (prefers-color-scheme: dark) { body:not([data-thema="hell"]) .sicherheit-marke, body:not([data-thema="hell"]) .krypto-hinweis.warnung > .ic { color: #F0A35E; } }
body[data-thema="dunkel"] .sicherheit-marke, body[data-thema="dunkel"] .krypto-hinweis.warnung > .ic { color: #F0A35E; }
@media (max-width: 760px) { .luecke-band { margin: 8px 12px; } }
@media (max-width: 520px) {
  .krypto-hinweis { flex-wrap: wrap; }
  .krypto-hinweis p { flex-basis: calc(100% - 40px); }
  .krypto-hinweis > .knopf, .krypto-hinweis > .reihe-knoepfe { margin-left: 38px; }
  .krypto-hinweis > .reihe-knoepfe { flex-wrap: wrap; }
  .luecke-band { flex-wrap: wrap; }
  .luecke-band p { flex-basis: calc(100% - 30px); }
  .luecke-band .knopf { margin-left: 28px; }
  .sn-paar .sn-qr { width: 140px; height: 140px; }
  .sn-paar .sn-zahlen { font-size: 1.05rem; gap: 4px 12px; padding: 12px 14px; }
  .geraete > li { flex-wrap: wrap; }
}
/* ── Gruppen (Gruppenchats): Symbol, Seitenleiste, Systemzeilen, Hinweise, Mitglieder */
.av.gruppe-av { width: var(--g); height: var(--g); border-radius: 50%; flex: none; display: inline-grid; place-items: center; color: var(--ks-chat); background: color-mix(in srgb, var(--ks-chat) 15%, var(--blatt)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ks-chat) 30%, transparent); }
.av.gruppe-av .ic { width: calc(var(--g) * .58); height: calc(var(--g) * .58); }
.kanal .g-anzahl { flex: none; font-size: .72rem; font-weight: 700; color: var(--leise); background: var(--erhaben); border-radius: 999px; padding: 0 6px; line-height: 1.5; }
.kanal.aktiv .g-anzahl { background: var(--blatt); }
.gruppe-kanal .punkt-live { flex: none; }
.thema.g-thema { border: 0; background: none; font: inherit; padding: 0; cursor: pointer; color: var(--leise); }
.thema.g-thema:hover { color: var(--tinte); text-decoration: underline; }
.gruppe-ereignis { display: flex; align-items: center; gap: 8px; margin: 6px 28px; padding: 4px 12px; color: var(--leise); font-size: .88em; }
.gruppe-ereignis > .ic { flex: none; color: var(--ks-chat); }
.gruppe-ereignis span { flex: 1; min-width: 0; }
.gruppe-ereignis time { flex: none; color: var(--sehr-leise); font-size: .9em; }
.gruppe-spaeter { display: flex; gap: 8px; align-items: center; justify-content: center; color: var(--leise); font-size: .92em; max-width: 520px; margin: 8px auto 0 !important; }
.gruppe-hinweise { display: grid; gap: 6px; margin-bottom: 8px; }
.gruppe-hinweis { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r); background: var(--erhaben); box-shadow: inset 0 0 0 1px var(--linie); font-size: .9em; }
.gruppe-hinweis > .ic { flex: none; color: var(--leise); }
.gruppe-hinweis p { margin: 0; flex: 1; color: var(--leise); }
.gruppe-hinweis.warnung { background: color-mix(in srgb, #D9822B 10%, var(--blatt)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #D9822B 40%, transparent); }
.gruppe-hinweis.warnung p { color: var(--tinte); }
.gruppe-hinweis .reihe-knoepfe { flex: none; }
.gruppe-unter { font-size: 1rem; margin: 18px 0 0; }
.gruppe-wahl .wahl.haken { align-items: center; }
.gruppe-wahl .wahl.haken input { translate: 0; }
.gruppe-zahl.fehler-text { color: var(--signal); }
.gm-kopf { display: flex; gap: 14px; align-items: center; }
.gm-kopf p { margin: 0; }
.gm-kopf .leise { display: flex; gap: 6px; align-items: baseline; font-size: .92em; }
.gm-liste { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 2px; }
.gm-zeile { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: var(--r-klein); }
.gm-zeile:hover { background: var(--erhaben); }
.gm-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.gm-text small { flex-basis: 100%; display: flex; gap: 5px; align-items: center; color: var(--leise); font-size: .85em; }
.gm-text small.gm-ok { color: var(--tuerkis-dunkel); }
.gm-text small.gm-warn { color: #B8641A; }
.gm-admin { font-size: .72rem; font-weight: 700; color: var(--ks-chat); background: color-mix(in srgb, var(--ks-chat) 12%, transparent); border-radius: 999px; padding: 0 8px; }
.gm-knoepfe { flex: none; display: flex; gap: 6px; align-items: center; }
.gm-leute-kopf { display: flex; align-items: center; gap: 10px; width: 100%; margin: 4px 0 10px; padding: 10px; border: 0; border-radius: var(--r); background: var(--erhaben); color: var(--tinte); font: inherit; text-align: left; cursor: pointer; }
.gm-leute-kopf:hover { background: var(--tonal); }
.gm-leute-kopf span { flex: 1; display: grid; line-height: 1.3; }
.gm-leute-kopf small { display: flex; gap: 4px; align-items: center; color: var(--leise); font-size: .82em; }
@media (prefers-color-scheme: dark) { body:not([data-thema="hell"]) .gm-text small.gm-warn { color: #F0A35E; } }
body[data-thema="dunkel"] .gm-text small.gm-warn { color: #F0A35E; }
@media (max-width: 760px) { .gruppe-ereignis { margin: 6px 12px; } }
@media (max-width: 520px) {
  .gruppe-hinweis { flex-wrap: wrap; }
  .gruppe-hinweis p { flex-basis: calc(100% - 30px); }
  .gruppe-hinweis > .knopf, .gruppe-hinweis > .reihe-knoepfe { margin-left: 28px; }
  .gm-zeile { flex-wrap: wrap; }
  .gm-text { flex-basis: calc(100% - 60px); }
  .gm-knoepfe { margin-left: 46px; }
}

@media (max-width: 1100px) { .rahmen, .rahmen[data-leute="1"] { grid-template-columns: var(--seite-b, 256px) minmax(0, 1fr); } .leute { display: none; } .thema { display: none; } }
@media (max-width: 760px) {
  .rahmen, .rahmen[data-leute="1"], .rahmen[data-leute="0"], .rahmen[data-faden="1"] { grid-template-columns: minmax(0, 1fr); padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
  .hauptbereich { border-radius: 0; box-shadow: none; }
  .seite { position: fixed; inset: 0 auto 0 0; width: min(304px, 86vw); z-index: 30; translate: -100% 0; transition: translate .22s ease; background: var(--grund); border-radius: 0 var(--r-blatt) var(--r-blatt) 0; padding-top: calc(6px + env(safe-area-inset-top)); padding-bottom: env(safe-area-inset-bottom); }
  .rahmen.offen .seite { translate: 0 0; box-shadow: 0 0 40px rgb(0 31 38 / .3); }
  .rahmen.offen .schleier, .rahmen.leute-offen .schleier { display: block; position: fixed; inset: 0; z-index: 25; background: rgb(0 31 38 / .35); }
  /* Personen als Leiste von rechts */
  .leute { display: block !important; position: fixed; inset: 0 0 0 auto; width: min(300px, 86vw); z-index: 30; translate: 100% 0; transition: translate .22s ease; background: var(--grund); border-radius: var(--r-blatt) 0 0 var(--r-blatt); padding-top: calc(14px + env(safe-area-inset-top)); padding-bottom: env(safe-area-inset-bottom); }
  .rahmen.leute-offen .leute { translate: 0 0; box-shadow: 0 0 40px rgb(0 31 38 / .3); }
  .nicht-mobil { display: none !important; }
  .anruf-pille.nur-mobil { display: inline-flex !important; }
  .nur-mobil { display: inline-grid !important; }
  .kopf { padding: 8px 8px 6px; gap: 6px; flex-wrap: wrap; min-height: 56px; }

  .reiterleiste:not(.innen) { order: 3; }
  .msg, .msg.system { padding-left: 12px; padding-right: 12px; margin: 0 4px; }
  .msg-werkzeuge { right: 8px; }
  .anfang { padding: 24px 16px 8px; }
  .anfang h2 { font-size: 1.5rem; }
  .tipp-zone { padding: 0 8px calc(8px + env(safe-area-inset-bottom)); }
  .tastatur .tipp-zone { padding-bottom: 8px; }
  .tipp { padding: 6px; }
  .nach-unten { bottom: 84px; }
  /* Dialoge als Blatt von unten */
  .dlg, .dlg.breit { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: var(--r-blatt) var(--r-blatt) 0 0; }
  .dlg form { max-height: calc(var(--app-h, 100dvh) - 16px - env(safe-area-inset-top)); padding: 20px 18px calc(14px + env(safe-area-inset-bottom)); }
  .dlg-knoepfe .knopf { flex: 1 1 auto; }
  .dlg[open] { animation: blatt-hoch .22s ease; }
  /* Verwaltung: Tabellen werden Karten */
  .verwaltung .tabelle thead { display: none; }
  .verwaltung .tabelle, .verwaltung .tabelle tbody { display: block; }
  .verwaltung .tabelle tr { display: grid; gap: 10px; padding: 14px 4px; border-top: 1px solid var(--linie); }
  .verwaltung .tabelle td { display: block; padding: 0; border: 0; }
  .verwaltung .tabelle td.aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
  .rollen-verw li { flex-wrap: wrap; }
  .zeile-knoepfe .knopf, .formular > .knopf { width: 100%; }
  .seite-inhalt { padding: 14px 14px 32px; }
  .buehne-platz { height: 56vh; padding: 0 6px 8px; }
  .kacheln:not(.mit-spot) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; padding: 4px 8px; gap: 6px; }
  .kacheln.mit-spot { grid-template-columns: repeat(var(--n, 1), minmax(96px, 1fr)); grid-template-rows: minmax(0, 1fr) 92px; padding: 4px 8px; gap: 6px; overflow-x: auto; }
  .kacheln.mit-spot > .spot { grid-column: 1 / -1; grid-row: 1; }
  .kacheln.mit-spot > .kachel:not(.spot) { grid-column: auto; grid-row: 2; max-height: none; aspect-ratio: auto; height: 100%; }
  .steuer { gap: 10px; }
  .st-gruppe + .st-gruppe { padding-left: 10px; }
  .kacheln[data-anzahl="1"] { grid-template-columns: minmax(0, 1fr) !important; }
  .rund { width: 46px; height: 46px; }
  .protokolle li a { grid-template-columns: 1fr auto; }
  .p-leute { display: none; }
  .tabelle th:nth-child(3), .tabelle td:nth-child(3), .tabelle th:nth-child(4), .tabelle td:nth-child(4) { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ── Threads */
.rahmen[data-faden="1"], .rahmen[data-faden="1"][data-leute="0"], .rahmen[data-faden="1"][data-leute="1"] { grid-template-columns: var(--seite-b, 272px) minmax(0, 1fr) minmax(340px, 400px); }
.rahmen[data-faden="1"] .leute { display: none; }
.faden { display: flex; flex-direction: column; min-height: 0; min-width: 0; margin-left: 8px; background: var(--blatt); border-radius: var(--r-blatt); box-shadow: 0 0 0 1px color-mix(in srgb, var(--linie) 70%, transparent); overflow: hidden; }
.faden[hidden] { display: none; }
.faden-kopf { display: flex; align-items: center; gap: 8px; padding: 12px 10px 10px 18px; border-bottom: 1px solid var(--linie); }
.faden-titel { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.faden-titel b { font-size: 1.05rem; }
.faden-titel small { color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faden .verlauf-innen { padding: 6px 0 16px; }
.faden .msg { margin: 0 6px; }
.faden .tipp-zone { padding: 0 12px 14px; }
.faden-trenner { display: flex; align-items: center; gap: 10px; margin: 4px 18px 10px; color: var(--leise); font-size: .85em; font-weight: 600; }
.faden-trenner::after { content: ""; flex: 1; height: 1px; background: var(--linie); }
.msg.wurzel { padding-top: 14px; }
.faden-zeile { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 4px 12px 4px 4px; border-radius: var(--r-klein); text-decoration: none; color: var(--tinte); font-size: .9em; max-width: 100%; }
.faden-zeile:hover { background: var(--tonal); }
.faden-zeile b { color: var(--akzent); white-space: nowrap; }
.faden-zeile .leise { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faden-leute { display: inline-flex; }
.faden-leute .av + .av { margin-left: -6px; }
.faden-leute .av { box-shadow: 0 0 0 2px var(--blatt); }
.faden-zeile.neu b::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); margin-left: 6px; translate: 0 -2px; }
@media (max-width: 1100px) and (min-width: 761px) {
  .rahmen[data-faden="1"], .rahmen[data-faden="1"][data-leute="0"], .rahmen[data-faden="1"][data-leute="1"] { grid-template-columns: var(--seite-b, 256px) minmax(0, 1fr); }
  .faden { position: fixed; top: 8px; right: 8px; bottom: 8px; width: min(420px, calc(100vw - 32px)); z-index: 20; box-shadow: 0 20px 60px rgb(0 31 38 / .25), 0 0 0 1px var(--linie); }
}

/* ── Aktionen als Blatt (langes Drücken auf eine Nachricht) */
/* Reaktionen im Blatt: passen in die Breite, Fokusring innen (wurde am Rand abgeschnitten) */
.blatt-emojis { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 3px 0 12px; }
.blatt-emojis button { aspect-ratio: 1; max-width: 52px; width: 100%; justify-self: center; border: 0; border-radius: 50%; background: var(--erhaben); cursor: pointer; display: grid; place-items: center; padding: 0; outline: none; }
.blatt-emojis button:focus-visible { box-shadow: inset 0 0 0 2px var(--akzent); }
.blatt-emojis button:active { transform: scale(.92); }
.blatt-liste { display: grid; border-top: 1px solid var(--linie); padding-top: 6px; }
.blatt-zeile { display: flex; align-items: center; gap: 14px; min-height: 50px; padding: 0 10px; border: 0; background: none; font-weight: 600; text-align: left; border-radius: var(--r); color: var(--tinte); cursor: pointer; }
.blatt-zeile:hover, .blatt-zeile:active { background: var(--erhaben); }
.blatt-zeile .ic { color: var(--leise); }
.blatt-zeile.gefahr, .blatt-zeile.gefahr .ic { color: var(--signal); }
.dlg.blatt h2 { font-size: 1rem; color: var(--leise); font-weight: 600; }
@keyframes blatt-hoch { from { translate: 0 40px; opacity: .6; } }

/* ── Handy-Kopf: Punkt am Menü, Weg zurück in den Anruf */
.menue-knopf { position: relative; }
.menue-knopf.punkt::after { content: ""; position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--akzent); box-shadow: 0 0 0 2px var(--blatt); }
.anruf-pille { display: none; align-items: center; gap: 7px; padding: 7px 12px; border-radius: var(--r-klein); background: color-mix(in srgb, var(--online) 16%, var(--blatt)); color: var(--tinte); font-weight: 600; font-size: .88em; text-decoration: none; white-space: nowrap; }
.punkt-live { width: 8px; height: 8px; border-radius: 50%; background: var(--online); }

/* ── Touch: größere Ziele, kein Zoom beim Tippen, keine Aktionen per Überfahren */
html, body { overscroll-behavior: none; }
body:has(.rahmen) { overflow: hidden; }
@media (pointer: coarse) {
  .sym { width: 44px; height: 44px; }
  .sym.klein { width: 40px; height: 40px; }
  .knopf { min-height: 44px; }
  .knopf.klein { min-height: 38px; }
  .kanal { min-height: 44px; }
  .person { min-height: 48px; }
  .reiter { padding: 9px 14px; }
  .haken input { width: 20px; height: 20px; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }
}
@media (hover: none) {
  .msg-werkzeuge { display: none !important; }
  .msg:hover { background: transparent; }
  .msg:hover .seitenzeit { opacity: 0; }
  .msg { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .msg .bearb-feld, .msg pre, .msg code { -webkit-user-select: text; user-select: text; }
  .msg.gedrueckt { background: var(--erhaben); transition: background .25s .12s; }
}

/* Handy: Thread über allem (steht nach den Grundregeln für Threads, damit es gilt) */
@media (max-width: 760px) {
  .rahmen[data-faden="1"], .rahmen[data-faden="1"][data-leute="0"], .rahmen[data-faden="1"][data-leute="1"] { grid-template-columns: minmax(0, 1fr); }
  .faden { position: fixed; inset: 0; z-index: 28; margin: 0; border-radius: 0; padding-top: env(safe-area-inset-top); box-shadow: none; height: var(--app-h, 100dvh); }
  .faden-kopf { padding: 6px 8px; }
  .faden .tipp-zone { padding: 0 8px calc(8px + env(safe-area-inset-bottom)); }
  .tastatur .faden .tipp-zone { padding-bottom: 8px; }
}

/* ── Kopfzeile: lange Namen kürzen statt abschneiden */
.kopf-titel h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
h1.kopf-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf-titel > .ic, .kopf-titel > .av, .kopf-titel > .e2e-marke { flex: none; }

/* ── Suche */
.suche .such-kopf { display: grid; gap: 10px; margin-bottom: 6px; }
.such-feld-rahmen { display: flex; align-items: center; gap: 2px; padding: 4px 6px 4px 16px; border-radius: var(--r-klein); background: var(--erhaben); box-shadow: inset 0 0 0 1px var(--linie); }
.such-feld-rahmen:focus-within { box-shadow: inset 0 0 0 2px var(--primaer); }
.such-feld-rahmen > .ic { color: var(--leise); flex: none; }
#such-feld { flex: 1; min-width: 0; background: transparent; box-shadow: none; padding: 10px 8px; font-size: 1.06em; }
#such-feld:focus, #such-feld:focus-visible { box-shadow: none; outline: none; }
.such-schalter { flex: none; min-width: 38px; height: 38px; padding: 0 6px; border: 0; border-radius: var(--r-klein); background: transparent; color: var(--leise); font: 700 .92em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; cursor: pointer; }
.such-schalter:hover { background: var(--tonal); color: var(--tinte); }
.such-schalter[aria-pressed="true"], .such-schalter[aria-expanded="true"] { background: var(--primaer); color: var(--primaer-text); }
.such-schalter.auto { background: var(--tonal); color: var(--tinte); }
.such-vorschlag { list-style: none; margin: -4px 0 0; padding: 6px; border-radius: var(--r); background: var(--blatt); box-shadow: var(--schatten-schwebend); display: grid; gap: 2px; }
.such-vorschlag li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; min-height: 40px; }
.such-vorschlag li > .ic { color: var(--leise); }
.such-vorschlag li[aria-selected="true"], .such-vorschlag li:hover { background: var(--erhaben); }
.such-vorschlag small { margin-left: auto; color: var(--leise); }
.filterleiste { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 0; border-radius: var(--r-klein); background: var(--erhaben); box-shadow: inset 0 0 0 1px var(--linie); color: var(--tinte); font: inherit; font-size: .93em; cursor: pointer; white-space: nowrap; flex: none; }
.filter-chip > span { color: var(--leise); font-weight: 600; }
.filter-chip select { -webkit-appearance: none; appearance: none; width: auto; max-width: 170px; padding: 0 16px 0 0 !important; border: 0; border-radius: 0; box-shadow: none; font: inherit; color: inherit; cursor: pointer; text-overflow: ellipsis;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238C9EAB' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right center; }
.filter-chip select:focus { box-shadow: none; outline: none; }
.filter-chip:focus-within { box-shadow: inset 0 0 0 2px var(--primaer); }
.filter-chip.an, .filter-chip[aria-pressed="true"] { background: var(--tonal); box-shadow: inset 0 0 0 1.5px var(--primaer); }
.filter-chip.an > span { color: var(--tinte); }
.such-zeitraum { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.such-zeitraum label { display: flex; align-items: center; gap: 8px; color: var(--leise); font-weight: 600; }
#such-seit, #such-bis { width: auto; }
.such-hilfe { padding: 14px 16px; border-radius: var(--r); background: var(--erhaben); box-shadow: inset 0 0 0 1px var(--linie); overflow-x: auto; }
.such-hilfe table { border-collapse: collapse; font-size: .95em; }
.such-hilfe td { padding: 5px 12px 5px 0; vertical-align: top; }
.such-hilfe p { margin: 10px 0 0; font-size: .92em; }
.bsp { font: 600 .88em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--tonal); color: var(--tinte); border: 0; border-radius: 8px; padding: 4px 8px; cursor: pointer; white-space: nowrap; }
.bsp:hover { background: var(--tonal-stark); }
.suche code { font-size: .88em; background: var(--tonal); padding: 1px 6px; border-radius: 6px; }
.such-start, .such-hinweis { padding: 30px 4px; text-align: center; }
.such-start p, .such-hinweis p { margin: 6px 0; }
.treffer-kopf { display: flex; align-items: center; gap: 8px; }
.zahl-leise { color: var(--leise); font-weight: 600; font-size: .85em; }
.treffer li a.treffer-zeile { align-items: flex-start; }
.tz { min-width: 0; flex: 1; display: grid; gap: 3px; }
.tz-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.tz-ort { color: var(--leise); display: inline-flex; align-items: center; gap: 4px; font-size: .92em; }
.tz-ort .ic { width: 14px; height: 14px; }
.tz-kopf time { color: var(--sehr-leise); font-size: .88em; margin-left: auto; font-variant-numeric: tabular-nums; }
.tz-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 6; line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.tz-dateien { color: var(--leise); font-size: .9em; display: inline-flex; gap: 4px; align-items: center; }
.mehr-laden { display: flex; margin: 12px auto 0; }
.klein-text { font-size: .9em; }

@media (max-width: 760px) {
  .kopf { row-gap: 4px; }
  .kopf-titel { flex: 1 1 0; gap: 8px; }
  .kopf-titel h1 { font-size: 1.08rem; }
  /* Platz für den Namen: Anrufen/Beitreten nur als Symbol */
  #knopf-beitreten { padding-inline: 0; width: 44px; justify-content: center; flex: none; }
  #knopf-beitreten .knopf-text { display: none; }
  .reiterleiste:not(.innen) { order: 3; flex: 1 0 100%; padding: 3px; }
  .reiterleiste:not(.innen) .reiter { flex: 1; text-align: center; padding: 7px 10px; }
  .filterleiste { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 2px 14px; }
  .filterleiste::-webkit-scrollbar { display: none; }
  .filter-chip { min-height: 40px; }
  .such-feld-rahmen { padding-left: 14px; }
  .such-schalter { min-width: 40px; height: 40px; }
  .treffer li a.treffer-zeile { padding: 12px 6px; }
  .tz-kopf time { margin-left: 0; width: 100%; }
}
#such-feld::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.such-leeren .ic { width: 18px; height: 18px; }
.filter-chip select { field-sizing: content; max-width: 150px; }
@media (max-width: 760px) { .filter-chip select { max-width: 132px; } }

/* ── Bereiche */
/* Bereich: ganze Kopfzeile klappt (großes Ziel), rechts die Übersicht; der aktuelle Bereich ist hervorgehoben */
.bereich-gruppe .gruppe-zeile { justify-content: flex-start; gap: 2px; border-radius: var(--r-klein); position: relative; }
.bkopf { flex: 1; min-width: 0; justify-content: flex-start; padding: 6px 8px; min-height: 32px; color: var(--leise); font-weight: 700; font-size: .84rem; }
.bkopf::before { display: none; }
.pfeil { width: 14px; height: 14px; flex: none; display: inline-grid; place-items: center; }
.pfeil::before { content: ""; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; rotate: 45deg; translate: 0 -2px; transition: rotate .22s cubic-bezier(.2,0,0,1), translate .22s cubic-bezier(.2,0,0,1); }
.zu > .gruppe-zeile .pfeil::before, .obergruppe.zu > .obergruppe-zeile .pfeil::before { rotate: -45deg; translate: -1px 0; }
.bereich-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Wessen Bereich (js/app.js, bereichLeute): zweite, leise Zeile unter dem Namen privater Bereiche */
.bkopf-text { min-width: 0; display: grid; gap: 1px; }
.bereich-leute { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .74rem; font-weight: 500; color: var(--leise); }
.bereich-leute.als-bilder { display: flex; align-items: center; gap: 6px; }
.av-reihe { display: inline-flex; flex: none; }
.av-reihe .av { box-shadow: 0 0 0 1.5px var(--grund); }
.av-reihe .av + .av { margin-left: -6px; }
.av-mehr { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bkopf .ic { width: 13px; height: 13px; flex: none; }
.bkopf:hover { color: var(--tinte); background: color-mix(in srgb, var(--leise) 8%, transparent); }
.bereich-info { opacity: 0; transition: opacity .15s; color: var(--leise); }
.gruppe-zeile:hover .bereich-info, .bereich-info:focus-visible, .bereich-info.an { opacity: 1; }
.bereich-info.an { color: var(--akzent); }
.bereich-gruppe.hier > .gruppe-zeile .bkopf { color: var(--tinte); }
.bereich-gruppe.hier > .gruppe-zeile::before { content: ""; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primaer); }
.bereich-gruppe.hier { background: color-mix(in srgb, var(--primaer) 6%, transparent); border-radius: var(--r); margin-left: -4px; margin-right: -4px; padding: 0 4px 4px; }
/* Gruppen über den Bereichen */
.obergruppe { margin-top: 18px; }
.obergruppe-zeile { margin: 0; }
.obergruppe-kopf { border: 0; background: none; font: inherit; cursor: pointer; display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 8px; min-height: 30px; border-radius: var(--r-klein); color: var(--sehr-leise, var(--leise)); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.obergruppe-kopf:hover { color: var(--tinte); }
.obergruppe-inhalt > .gruppe:first-child { margin-top: 4px; }
.obergruppe.hier > .obergruppe-zeile .obergruppe-kopf { color: var(--leise); }
/* Eigene Reihenfolge per Ziehen (ordnen.js) */
#kanalliste .kanal, #kanalliste .gruppe-zeile { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
#kanalliste.ordnet, #kanalliste.ordnet * { cursor: grabbing !important; }
#kanalliste .zieht { position: relative; z-index: 2; border-radius: var(--r-klein); background: var(--blatt); box-shadow: 0 6px 20px rgb(0 30 40 / .22), inset 0 0 0 1px var(--linie); }
#kanalliste .zieht > .gruppe-zeile, #kanalliste li.zieht > .kanal { color: var(--tinte); }
.bereich-neu { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 6px 12px; border: 0; background: none; color: var(--leise); font: inherit; font-size: .88rem; cursor: pointer; border-radius: var(--r-klein); }
.bereich-neu:hover { color: var(--tinte); background: var(--erhaben); }
.bereich-neu .ic { width: 15px; height: 15px; }
.kopf-bereich { color: var(--leise); text-decoration: none; font-weight: 600; white-space: nowrap; flex: none; max-width: 30%; overflow: hidden; text-overflow: ellipsis; }
.kopf-bereich:hover { color: var(--tinte); }
.kopf-trenner { color: var(--sehr-leise); margin: 0 -2px; }
.bereich-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin: 6px auto 22px; }
.bereich-titel h2 { margin: 0 !important; font-size: 1.7rem; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bereich-titel p { margin: 6px 0 0; color: var(--leise); }
.bereich-marke { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 600; color: var(--leise); padding: 3px 10px; border-radius: var(--r-klein); background: var(--erhaben); letter-spacing: 0; }
.bereich-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.bereich-raster .karte { margin: 0; padding: 18px 18px 16px; }
.bereich-raster h3 { margin: 0 0 10px; font-size: 1rem; }
.b-liste { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 2px; }
.b-zeile { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r); color: var(--tinte); text-decoration: none; min-height: 44px; }
.b-zeile:hover { background: var(--blatt); }
.b-zeile > .ic { color: var(--leise); flex: none; }
.b-zeile-text { display: grid; min-width: 0; flex: 1; }
.b-zeile-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.b-zeile-text small { color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-vorschau { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; flex: none; }
.b-drin { display: flex; }
.b-drin .av { margin-left: -6px; box-shadow: 0 0 0 2px var(--erhaben); }
.b-neu { width: 8px; height: 8px; border-radius: 50%; background: var(--tinte); flex: none; }
.b-avatare { display: flex; flex-wrap: wrap; gap: 6px; }
.verw-bereich { margin-top: 18px; }
.verw-bereich.archiviert { opacity: .6; }
.verw-bereich-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--linie); padding-bottom: 6px; margin-bottom: 4px; }
.verw-bereich h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 1.02rem; flex-wrap: wrap; }
.verw-bereich h3 small { color: var(--leise); font-weight: 400; font-size: .88rem; }
@media (max-width: 760px) {
  .bereich-titel h2 { font-size: 1.4rem; }
  .bereich-kopf .reihe-knoepfe { width: 100%; }
  .bereich-kopf .reihe-knoepfe .knopf { flex: 1 1 auto; }
  .bereich-raster { grid-template-columns: minmax(0, 1fr); }
  .bkopf { font-size: .92rem; min-height: 44px; }
  .obergruppe-kopf { min-height: 40px; font-size: .78rem; }
  .bereich-info { opacity: 1; width: 40px; height: 40px; }
}

/* ── Zusammenfassung, Rückfragen, offene Themen, Glossar */
.karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.karte-kopf h3 { margin: 0 !important; }
.zus { margin-top: 8px; }
.zus .hinweis-band { margin: 8px 0; }
.zus-bis { display: flex; gap: 6px; align-items: center; margin: 12px 0 8px; color: var(--leise); font-size: .92em; }
.zus-frage { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 10px 0; padding: 12px 14px; border-radius: var(--r); background: var(--blatt); box-shadow: inset 3px 0 0 var(--primaer), inset 0 0 0 1px var(--linie); }
.zus-frage p { flex: 1 1 280px; margin: 0; }
.tr-teile { display: flex; gap: 6px; align-items: flex-start; color: var(--leise); font-size: .92em; }
.tr-teile .ic { flex: none; margin-top: 3px; }
.zus-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.zus-kopf h3 { margin: 0; font-size: 1.15rem; }
.ki-marke { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 600; color: var(--tuerkis-dunkel, var(--leise)); padding: 3px 10px; border-radius: var(--r-klein); background: var(--blatt); box-shadow: inset 0 0 0 1px var(--linie); }
.ki-marke .ic { width: 14px; height: 14px; }
.zus-text { font-size: 1.05em; line-height: 1.65; margin: 0 0 12px; }
.zus-punkte { display: grid; gap: 10px; margin: 0 0 14px; }
.zus-punkte h4, .zus-raster h4, .rueckfragen h4 { margin: 0 0 4px; font-size: .95rem; display: flex; align-items: center; gap: 6px; }
.zus-punkte p { margin: 0; line-height: 1.55; }
.zus-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.zus-raster ul { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 4px; }
/* Beschlüsse und Aufgaben: Punkt an der ersten Zeile, Person und Frist als Zusatzzeile darunter, gleiche Einrückung */
.zus-raster ul.zus-liste { list-style: none; padding-left: 0; gap: 8px; }
.zus-liste li { position: relative; padding-left: 23px; line-height: 1.5; }
.zus-liste li::before { content: ""; position: absolute; left: 7px; top: .66em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .7; }
.zus-liste li small { display: block; color: var(--leise); font-size: .88em; }
.zus-liste li.erledigt button.link { text-decoration: line-through; color: var(--leise); }
.zus-raster .ic, .rueckfragen .ic { width: 17px; height: 17px; color: var(--leise); }
.rueckfragen { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linie); }
.rueckfragen ul { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 12px; }
.rueckfrage { padding: 12px 14px; border-radius: var(--r); background: var(--blatt); box-shadow: inset 0 0 0 1px var(--linie); }
.rueckfrage:not(.beantwortet) { box-shadow: inset 3px 0 0 var(--primaer), inset 0 0 0 1px var(--linie); }
.rf-frage { margin: 0; display: flex; gap: 8px; align-items: flex-start; }
.rf-frage .ic { flex: none; margin-top: 2px; }
.rf-zitat { margin: 6px 0 0 25px; color: var(--leise); font-style: italic; }
.rf-antwort { margin: 8px 0 0 25px; }
.rf-form { margin: 10px 0 0 25px; display: grid; gap: 8px; }
.rf-zeile { display: flex; gap: 8px; align-items: center; }
.rf-zeile input { flex: 1; min-width: 0; }
.zeit-link { border: 0; background: var(--tonal); color: var(--tinte); font: 600 .82em ui-monospace, SFMono-Regular, Menlo, monospace; padding: 2px 7px; border-radius: 6px; margin-right: 6px; cursor: pointer; font-style: normal; }
.tr-ueber { margin-top: 28px; }
.tr-ueber h3 { margin: 0 0 2px; font-size: 1.15rem; }
.tr-ueber p { margin: 0; }
.tr-block.blitz { background: var(--tonal); border-radius: var(--r); transition: background 1s; }
button.thema-zeile { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.thema-zeile.erledigt b { text-decoration: line-through; text-decoration-color: var(--sehr-leise); color: var(--leise); }
.thema-art { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--blatt); color: var(--leise); flex: none; }
.thema-art .ic { width: 16px; height: 16px; }
.thema-art.art-frage { color: var(--tuerkis-dunkel, var(--primaer)); }
.thema-art.art-aufgabe { color: var(--primaer); }
.thema-art.art-beschluss { color: var(--online); }
.b-zeile-text small.ueber { color: var(--signal); }
.glossar-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.glossar-chip { padding: 3px 10px; border-radius: var(--r-klein); background: var(--blatt); box-shadow: inset 0 0 0 1px var(--linie); font-size: .9em; }
.ki-stand { display: flex; align-items: center; gap: 6px; }
.ki-stand:empty { display: none; }
.ki-stand .ic { width: 16px; height: 16px; }
#td .segment { flex-wrap: wrap; }
@media (max-width: 760px) {
  .rf-zeile { flex-direction: column; align-items: stretch; }
  .rf-form, .rf-zitat, .rf-antwort { margin-left: 0; }
}
.zus-raster li button.link { display: block; text-align: left; line-height: inherit; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--sehr-leise); text-underline-offset: 3px; }
.zus-raster li button.link:hover { text-decoration-color: currentColor; }

/* ── Formensprache: wenige, gleiche Rundungen (8 / 10 / 14 / 16 px). Kreise nur für Profilbilder und Punkte. */
.kopf { border-bottom: 1px solid var(--linie); min-height: 58px; padding-top: 0; padding-bottom: 0; }
/* Reiter als Unterstrich statt Pillen */
.reiterleiste { background: none; padding: 0; gap: 20px; border-radius: 0; }
.reiterleiste:not(.innen) { align-self: stretch; }
.reiter { border-radius: 0; padding: 0 2px; display: inline-flex; align-items: center; color: var(--leise); box-shadow: inset 0 -2px 0 transparent; transition: color .12s, box-shadow .12s; }
.reiter:hover { color: var(--tinte); background: none; }
.reiter.an, .reiter.an:hover { background: none; color: var(--tinte); box-shadow: inset 0 -2px 0 var(--primaer); }
.reiterleiste.innen { border-bottom: 1px solid var(--linie); gap: 22px; margin-bottom: 20px; display: flex; }
.reiterleiste.innen .reiter { padding: 10px 2px; }
/* Schreibfeld: ruhiges Feld mit Rahmen, kein Farbverlauf, kein Schweben */
.tipp { border-radius: var(--r-gross); background: var(--erhaben); box-shadow: inset 0 0 0 1px var(--linie); }
.tipp::before { display: none; }
.tipp:focus-within { box-shadow: inset 0 0 0 1.5px var(--primaer); }
.tipp .sym { border-radius: var(--r); }
/* Leerer Kanal: kompakt, unten über dem Schreibfeld */
.verlauf { display: flex; flex-direction: column; }
.verlauf-innen { margin: auto auto 0; width: 100%; }
.anfang { padding: 28px 28px 14px; }
.anfang-titel { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 1.4rem; font-weight: 700; letter-spacing: -.01em; }
.anfang-titel .ic { width: 22px; height: 22px; color: var(--leise); }
.anfang p { font-size: 1em; }
.anfang h2 { font-size: 1.4rem; }
@media (max-width: 760px) {
  .kopf { min-height: 54px; padding-top: 6px; }
  .reiterleiste:not(.innen) { order: 3; flex: 1 0 100%; padding: 0; justify-content: flex-start; gap: 22px; margin: 0 -8px; padding: 0 12px; border-top: 1px solid var(--linie); }
  .reiterleiste:not(.innen) .reiter { flex: none; padding: 11px 2px; }
  .anfang { padding: 20px 16px 10px; }
  .anfang h2, .anfang-titel { font-size: 1.25rem; }
}
/* Rollenfarbe am Namen: im Dunkeln aufgehellt, damit sie lesbar bleibt */
.gefaerbt { color: var(--nf); }
@media (prefers-color-scheme: dark) { body:not([data-thema="hell"]) .gefaerbt { color: color-mix(in srgb, var(--nf) 45%, var(--tinte)); } }
body[data-thema="dunkel"] .gefaerbt { color: color-mix(in srgb, var(--nf) 45%, var(--tinte)); }

/* ── Ablage und Dateien-Ansicht */
.ablage-seite > * { max-width: 860px; }
.ablage-flaeche { display: block; margin: 4px auto 18px; border-radius: var(--r-gross); border: 1.5px dashed color-mix(in srgb, var(--primaer) 55%, var(--linie)); background: var(--erhaben); transition: background .15s, border-color .15s; }
.ablage-flaeche.drueber { background: color-mix(in srgb, var(--primaer) 12%, var(--erhaben)); border-color: var(--primaer); }
.ablage-ruf { display: flex; align-items: center; gap: 16px; padding: 26px 24px; cursor: pointer; }
.ablage-ruf > .ic { width: 34px; height: 34px; padding: 8px; box-sizing: content-box; border-radius: var(--r); background: var(--blatt); color: var(--primaer); flex: none; }
.ablage-ruf b { display: block; font-size: 1.08em; }
.ablage-ruf span { color: var(--leise); }
.ablage-ruf .link { padding: 0; font-size: 1em; }
.ablage-warte { padding: 16px; display: grid; gap: 12px; }
.ablage-auswahl { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 220px; overflow-y: auto; }
.ablage-auswahl li { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 10px; border-radius: var(--r-klein); background: var(--blatt); }
.ablage-auswahl li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ablage-auswahl li > .ic { color: var(--leise); }
.ablage-warte .reihe-knoepfe { justify-content: flex-end; }
.ablage-werkzeuge { display: flex; gap: 8px; align-items: center; margin: 0 auto 10px; }
.ablage-suche { flex: 1; display: flex; align-items: center; gap: 8px; padding-left: 12px; border-radius: var(--r); background: var(--erhaben); box-shadow: inset 0 0 0 1px var(--linie); }
.ablage-suche > .ic { color: var(--leise); flex: none; }
#ablage-q { background: transparent; box-shadow: none; padding-left: 0; }
#ablage-typ { width: auto; }
.ablage-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ablage-zeile { display: flex; align-items: center; gap: 6px; border-radius: var(--r); padding-right: 6px; }
.ablage-zeile:hover { background: var(--erhaben); }
.ablage-datei { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 8px 10px; color: var(--tinte); text-decoration: none; }
.ablage-vorschau { width: 40px; height: 40px; border-radius: var(--r-klein); object-fit: cover; flex: none; }
.ablage-symbol { width: 40px; height: 40px; border-radius: var(--r-klein); background: var(--erhaben); box-shadow: inset 0 0 0 1px var(--linie); display: grid; place-items: center; align-content: center; flex: none; color: var(--leise); }
.ablage-symbol .ic { width: 16px; height: 16px; }
.ablage-symbol small { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; line-height: 1; }
.ablage-symbol.typ-pdf { color: var(--signal); }
.ablage-symbol.typ-tabelle { color: var(--tuerkis-dunkel); }
.ablage-symbol.typ-folien { color: #D9822B; }
.ablage-text { display: grid; min-width: 0; }
.ablage-text b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ablage-text small { color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ablage-knoepfe { display: flex; gap: 2px; flex: none; }
.ablage-leer { padding: 18px 4px; }
@media (max-width: 760px) {
  .ablage-ruf { padding: 20px 16px; }
  .ablage-knoepfe .sym:not(:last-child) { display: none; }
}
@media (hover: hover) { .ablage-zeile .ablage-knoepfe { opacity: .55; } .ablage-zeile:hover .ablage-knoepfe { opacity: 1; } }
@media (max-width: 760px) { #ablage-typ { max-width: 42%; } }
/* Zwei-Faktor-Anmeldung */
.zf-schritte { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.zf-qr { width: 200px; height: 200px; margin: 4px auto; padding: 0; background: #fff; border-radius: var(--r); overflow: hidden; }
.zf-qr svg { width: 100%; height: 100%; display: block; }
.tor-fehler.ruhig { color: var(--leise); }

/* ── Dateibetrachter: Dateien in der App ansehen, oben immer Schließen */
.betrachter { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(4 14 18 / .94); color: var(--buehne-text); display: flex; flex-direction: column; animation: betr-rein .22s cubic-bezier(.2, 0, 0, 1); }
.betrachter::backdrop { background: transparent; }
.betrachter.geht { animation: betr-raus .18s cubic-bezier(.3, 0, 1, 1) forwards; }
@keyframes betr-rein { from { opacity: 0; } }
@keyframes betr-raus { to { opacity: 0; } }
.betr-kopf { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(10px, env(safe-area-inset-top)) 12px 10px 18px; }
.betr-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.betr-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.betr-knoepfe { display: flex; gap: 4px; flex: none; }
.betrachter .sym { color: var(--buehne-text); width: 44px; height: 44px; }
.betrachter .sym:hover { background: rgb(255 255 255 / .12); }
.betr-zu { background: rgb(255 255 255 / .1); }
.betr-inhalt { flex: 1; min-height: 0; display: grid; place-items: center; padding: 0 12px max(12px, env(safe-area-inset-bottom)); overflow: auto; }
.betr-inhalt img, .betr-inhalt video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r-klein); animation: betr-bild .28s cubic-bezier(.2, 0, 0, 1); }
@keyframes betr-bild { from { transform: scale(.96); opacity: 0; } }
.art-pdf .betr-inhalt { place-items: stretch; padding: 0; }
.betr-inhalt iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.betr-text { width: min(100%, 960px); height: 100%; margin: 0; overflow: auto; padding: 18px 20px; border-radius: var(--r); background: #0F242A; color: #E3EDF0; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
.betr-karte { display: grid; justify-items: center; gap: 12px; padding: 32px; border-radius: var(--r-gross); background: rgb(255 255 255 / .06); text-align: center; max-width: 420px; }
.betr-karte .ic { width: 40px; height: 40px; }
.betr-karte p { margin: 0; color: var(--buehne-leise); }
@media (prefers-reduced-motion: reduce) { .betrachter, .betrachter.geht, .betr-inhalt img { animation: none; } }

/* Profilbild-Ausschnitt */
.zuschnitt { position: relative; width: min(320px, 100%); aspect-ratio: 1; margin: 0 auto; border-radius: var(--r); overflow: hidden; touch-action: none; }
.zuschnitt canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.zuschnitt canvas:active { cursor: grabbing; }
.zuschnitt::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgb(0 0 0 / .45), inset 0 0 0 2px rgb(255 255 255 / .9); pointer-events: none; }
.zuschnitt-zoom { width: min(320px, 100%); margin: 14px auto 0; }

/* Eingehender Anruf */
.anruf-karte { position: fixed; z-index: 60; right: 20px; bottom: 20px; width: min(340px, calc(100vw - 32px)); display: grid; gap: 16px; padding: 18px; border-radius: var(--r-blatt); background: var(--blatt); color: var(--tinte); box-shadow: var(--schatten-schwebend), 0 0 0 1px var(--linie); animation: karte-rein .32s cubic-bezier(.2, 0, 0, 1); }
.anruf-karte.geht { animation: karte-raus .2s cubic-bezier(.3, 0, 1, 1) forwards; }
@keyframes karte-rein { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes karte-raus { to { opacity: 0; transform: translateY(10px) scale(.98); } }
.anruf-wer { display: flex; align-items: center; gap: 14px; }
.anruf-wer .av { animation: klingel-puls 1.3s ease-in-out infinite; }
@keyframes klingel-puls { 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--primaer) 25%, transparent); } }
.anruf-wer span { display: grid; }
.anruf-wer small { color: var(--leise); }
.anruf-wer b { font-size: 1.15rem; }
.anruf-knoepfe { display: flex; justify-content: space-around; }
.anruf-karte .rund { width: 56px; height: 56px; border-radius: 50%; }
.anruf-karte .rund.gefahr { width: 56px; border-radius: 50%; }
.rund.annehmen { background: #2E8A4E; color: #fff; }
.rund.annehmen:hover { background: #25723F; }
@media (max-width: 760px) { .anruf-karte { left: 16px; right: 16px; width: auto; top: max(16px, env(safe-area-inset-top)); bottom: auto; } }
@media (prefers-reduced-motion: reduce) { .anruf-karte, .anruf-karte.geht, .anruf-wer .av { animation: none; } }

/* ── Jeeves: persönliche Hinweise (oben in der Seitenleiste, Karten im Verlauf) */
.fest-oben { list-style: none; margin: 8px 0 0; padding: 0 0 10px; border-bottom: 1px solid var(--linie); }
.kanal.jeeves .ic { color: var(--akzent); opacity: 1; }
.kanal.jeeves .zahl { background: var(--akzent); }
.jeeves-karte > .ic { background: color-mix(in srgb, var(--akzent) 14%, transparent); color: var(--akzent); }
.jeeves-karte b { font-weight: 600; line-height: 1.4; }
.jeeves-karte .knopf { white-space: nowrap; }
.msg.jeeves-msg { transition: opacity .2s cubic-bezier(.3,0,.8,.15), translate .2s cubic-bezier(.3,0,.8,.15); }
.msg.jeeves-msg.geht { opacity: 0; translate: 16px 0; }
.jeeves-karte { align-items: flex-start; }
.jeeves-karte > .knopf, .jeeves-karte > .sym { align-self: center; }
@media (max-width: 760px) {
  .jeeves-karte { flex-wrap: wrap; gap: 10px 12px; }
  .jeeves-karte > .ic { width: 32px; height: 32px; padding: 7px; }
  .jeeves-karte > div { flex-basis: calc(100% - 44px); }
  .jeeves-karte > div + * { margin-left: 44px; }
}

/* ── Bewegung (Material 3 Expressive, als CSS-Federkurven): räumliche Federn für Bewegung und Größe,
   Effekt-Federn (ohne Überschwingen) für Deckkraft und Farbe. Ohne Bewegung (Systemeinstellung): nur Überblenden. */
:root {
  --feder-schnell: linear(0, .047, .162, .314, .477, .632, .77, .883, .97, 1.031, 1.069, 1.089, 1.095, 1.09, 1.079, 1.065, 1.049, 1.035, 1.022, 1.011, 1.003, .997, .993, .992, .991, .991, .993, .994, .995, .997, 1);
  --feder-schnell-dauer: 350ms;
  --feder: linear(0, .031, .107, .209, .32, .433, .538, .634, .718, .789, .847, .894, .931, .959, .979, .994, 1.004, 1.01, 1.013, 1.015, 1.015, 1.014, 1.013, 1.011, 1.01, 1.008, 1.006, 1.005, 1.004, 1.003, 1);
  --feder-dauer: 420ms;
  --feder-ruhig: linear(0, .025, .087, .171, .264, .358, .45, .535, .612, .68, .739, .79, .833, .868, .897, .921, .94, .955, .967, .976, .984, .989, .993, .996, 1);
  --feder-ruhig-dauer: 260ms;
  --effekt: linear(0, .099, .285, .471, .624, .741, .825, .884, .924, .951, .968, .98, .987, .992, .995, .997, 1);
  --effekt-dauer: 210ms;
  --rein: cubic-bezier(.05, .7, .1, 1);
  --raus: cubic-bezier(.3, 0, .8, .15);
}
.msg.rein { animation: msg-rein var(--feder-dauer) var(--feder) both; }
@keyframes msg-rein { from { opacity: 0; translate: 0 10px; } }
.seite-rein { animation: seite-rein 260ms var(--rein) both; }
@keyframes seite-rein { from { opacity: 0; translate: 0 6px; } }
/* Seitenleiste: Pfeil dreht weich, Wechsel zwischen Kanälen gleitet */
.gruppe-kopf::before { transition: rotate var(--feder-schnell-dauer) var(--feder-schnell); }
.kanal { transition: background var(--effekt-dauer) var(--effekt), color var(--effekt-dauer) var(--effekt); }
.kanal:active { scale: .98; }
.sym, .knopf, .rund { transition: background var(--effekt-dauer) var(--effekt), color var(--effekt-dauer) var(--effekt), scale var(--feder-schnell-dauer) var(--feder-schnell), border-radius var(--feder-schnell-dauer) var(--feder-schnell); }
.sym:active, .knopf:active, .rund:active { scale: .94; }
@media (max-width: 760px) { .seite { transition: translate var(--feder-dauer) var(--feder); } }
.dlg[open] { animation: dlg-rein var(--feder-dauer) var(--feder); }
@keyframes dlg-rein { from { opacity: 0; scale: .96; translate: 0 8px; } }
@media (max-width: 760px) { .dlg[open] { animation: blatt-hoch var(--feder-ruhig-dauer) var(--feder-ruhig); } }
/* Steuerung im Gespräch: schwebende Pille, Gruppen nach Zweck; Auflegen abgesetzt.
   Form zeigt Zustand (M3 Expressive): aus = abgerundetes Quadrat, gedrückt = kurz eckiger. */
.steuer { width: fit-content; max-width: calc(100% - 24px); margin: 4px auto 14px; padding: 8px 10px; gap: 14px; border-radius: 999px; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), 0 8px 24px rgb(0 0 0 / .18); }
.st-gruppe + .st-gruppe { padding-left: 14px; }
.st-gruppe:last-child { padding-left: 10px; }
.rund.aus, .rund.teilt { border-radius: 16px; }
.rund:active { border-radius: 14px; }
.rund.gefahr { border-radius: 999px; }
.rund.gefahr:active { border-radius: 16px; }
@media (max-width: 760px) { .steuer { border-radius: 26px; gap: 8px; padding: 6px 8px; margin-bottom: 10px; } .st-gruppe + .st-gruppe { padding-left: 8px; } .st-gruppe:last-child { padding-left: 4px; } }

/* Neue Version: Hinweis oben mit Aktualisieren */
.update-band { position: fixed; z-index: 70; top: calc(10px + env(safe-area-inset-top)); left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; max-width: calc(100vw - 24px); border-radius: 999px; background: var(--blatt); color: var(--tinte); font-weight: 600; box-shadow: var(--schatten-schwebend), 0 0 0 1px var(--linie); animation: band-rein var(--feder-dauer) var(--feder) both; }
.update-band > .ic { width: 18px; height: 18px; color: var(--akzent); flex: none; }
.update-band span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.update-band .knopf { border-radius: 999px; }
.update-band.geht { animation: band-raus .2s var(--raus) forwards; }
@keyframes band-rein { from { opacity: 0; translate: -50% -16px; } }
@keyframes band-raus { to { opacity: 0; translate: -50% -12px; } }

/* Seitenleiste, zwei Ebenen deutlich unterscheidbar:
   Gruppe = Überschrift in Akzentfarbe mit Linie bis zum Rand; ihre Bereiche hängen eingerückt an einer Führungslinie.
   Bereich = Name in voller Schriftfarbe (auch zugeklappt gut lesbar). */
.obergruppe { margin-top: 22px; }
.obergruppe-kopf { color: var(--akzent); font-size: .72rem; letter-spacing: .1em; gap: 8px; padding: 4px 6px; }
.obergruppe-kopf::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--akzent) 35%, transparent); margin-left: 2px; }
.obergruppe-kopf:hover, .obergruppe.hier > .obergruppe-zeile .obergruppe-kopf { color: var(--akzent); }
.obergruppe-kopf:hover::after { background: var(--akzent); }
.og-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.og-zahl { order: 3; flex: none; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: .7rem; letter-spacing: 0; background: color-mix(in srgb, var(--akzent) 16%, transparent); color: var(--akzent); }
.obergruppe-kopf .og-zahl { margin-left: -2px; }
.obergruppe.zu .obergruppe-kopf::after { order: 2; }
.obergruppe-inhalt { margin: 2px 0 0 13px; padding-left: 8px; border-left: 1.5px solid color-mix(in srgb, var(--akzent) 30%, var(--linie)); }
.obergruppe-inhalt > .gruppe { margin-top: 6px; }
.bkopf { color: color-mix(in srgb, var(--tinte) 88%, transparent); font-size: .9rem; font-weight: 650; letter-spacing: 0; }
.bereich-gruppe.zu .bkopf { color: color-mix(in srgb, var(--tinte) 78%, transparent); }
.bkopf:hover, .bereich-gruppe.hier > .gruppe-zeile .bkopf { color: var(--tinte); }
.bkopf .pfeil { color: var(--leise); }
.obergruppe-inhalt .bereich-gruppe.hier > .gruppe-zeile::before { left: -15px; }
@media (max-width: 760px) { .bkopf { font-size: .95rem; } .obergruppe-kopf { font-size: .76rem; } }

/* Symbole der Kanalarten: gleich kräftig, jede Art mit eigener Farbe (vorher stach nur das rote Aufnahme-Symbol heraus).
   Helle Variante dunkler, dunkle Variante heller – gleiche wahrgenommene Helligkeit je Thema. */
:root { --ks-chat: #1D6E80; --ks-ordner: #8F6200; --ks-aufnahme: #B83218; --ks-kopf: #2C7443; --ks-protokoll: #3F5FC4; --ks-fliege: #8A3FB8; }
@media (prefers-color-scheme: dark) { body:not([data-thema="hell"]) { --ks-chat: #8DC5D2; --ks-ordner: #E3AE48; --ks-aufnahme: #FF8266; --ks-kopf: #7FD39A; --ks-protokoll: #9DB1FF; --ks-fliege: #D09BF2; } }
body[data-thema="dunkel"] { --ks-chat: #8DC5D2; --ks-ordner: #E3AE48; --ks-aufnahme: #FF8266; --ks-kopf: #7FD39A; --ks-protokoll: #9DB1FF; --ks-fliege: #D09BF2; }
.ic.ksym-chat { color: var(--ks-chat); }
.ic.ksym-ordner { color: var(--ks-ordner); }
.ic.ksym-aufnahme, .ic.rec-sym { color: var(--ks-aufnahme); }
.ic.ksym-kopf { color: var(--ks-kopf); }
.ic.ksym-protokoll { color: var(--ks-protokoll); }
.ic.ksym-fliege, .kanal.jeeves .ic { color: var(--ks-fliege); }
.kanal .ic.ksym, .kanal:not(.aktiv):not(:hover) .ic.rec-sym { opacity: 1; }
.jeeves-karte > .ic { color: var(--ks-fliege); background: color-mix(in srgb, var(--ks-fliege) 14%, transparent); }
.kanal.jeeves .zahl { background: var(--ks-fliege); color: var(--blatt); }

/* Jeeves als Person: Bild, Name mit Rolle, Hinweis als Sprechblase */
.av.jeeves-av { width: var(--g); height: var(--g); border-radius: 50%; flex: none; object-fit: cover; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ks-fliege) 35%, transparent); }
.kanal.jeeves .av.jeeves-av { margin: -2px 0; }
.msg.jeeves-msg { padding: 10px 28px; }
.msg.jeeves-msg .msg-zeile { align-items: flex-start; gap: 12px; }
.jeeves-name { color: var(--ks-fliege); }
.jeeves-rolle { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ks-fliege); background: color-mix(in srgb, var(--ks-fliege) 14%, transparent); border-radius: 999px; padding: 1px 8px; margin: 0 2px; }
.jeeves-blase { margin-top: 4px; max-width: 620px; padding: 12px 14px; border-radius: 4px 16px 16px 16px; background: color-mix(in srgb, var(--ks-fliege) 7%, var(--erhaben)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ks-fliege) 18%, var(--linie)); }
.jeeves-blase p { margin: 0; line-height: 1.5; }
.jeeves-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.jeeves-aktionen .knopf { border-radius: 999px; }
.jeeves-aktionen .ic { width: 15px; height: 15px; }
.jeeves-anfang { text-align: left; }
.jeeves-anfang .av { margin-bottom: 10px; }
/* Neue Hinweise: Jeeves verbeugt sich kurz */
.msg.jeeves-msg.rein .jeeves-av { animation: verbeugen 900ms var(--feder) both; transform-origin: 50% 100%; }
@keyframes verbeugen { 0% { rotate: 0deg; } 35% { rotate: -9deg; translate: 0 2px; } 70% { rotate: 0deg; translate: 0 0; } }
@media (max-width: 760px) { .msg.jeeves-msg { padding: 8px 14px; } }
.og-neu { order: 4; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); flex: none; }

/* Wischgesten (js/gesten.js): Schleier blendet weich und folgt dem Finger, alles federt beim Loslassen ein */
@media (max-width: 760px) {
  .schleier { display: block; position: fixed; inset: 0; z-index: 25; background: rgb(0 31 38 / .35); opacity: 0; pointer-events: none; transition: opacity var(--effekt-dauer) var(--effekt); }
  .rahmen.offen .schleier, .rahmen.leute-offen .schleier { opacity: 1; pointer-events: auto; }
  .rahmen.zieht .schleier { pointer-events: auto; }
  .seite, .leute { transition: translate var(--feder-dauer) var(--feder); will-change: translate; }
  .rahmen.zieht .seite { box-shadow: 0 0 40px rgb(0 31 38 / .3); }
  .faden { transition: translate var(--feder-dauer) var(--feder); }
  .verlauf { overflow-x: hidden; }
  .msg { position: relative; transition: translate 320ms var(--feder); }
  .wisch-antwort { position: absolute; top: 50%; right: -52px; translate: 0 -50%; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--tonal); color: var(--akzent); opacity: 0; transition: scale 200ms var(--feder-schnell), background 150ms; pointer-events: none; }
  .wisch-antwort .ic { width: 18px; height: 18px; }
  .wisch-antwort.bereit { scale: 1.15; background: var(--akzent); color: var(--primaer-text, #fff); }
}

/* Favoriten: eigener, klar abgegrenzter Block oben in der Seitenleiste */
.gruppe.favoriten { margin: 10px 0 4px; padding: 6px 6px 8px; border-radius: var(--r-gross); background: color-mix(in srgb, #E3AE48 9%, var(--grund)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #E3AE48 26%, transparent); }
.gruppe.favoriten .gruppe-kopf { color: color-mix(in srgb, #A86A00 85%, var(--tinte)); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.gruppe.favoriten .gruppe-kopf .ic { width: 13px; height: 13px; fill: currentColor; }
.kname.mit-ort { display: grid; line-height: 1.15; }
.k-ort { font-size: .72rem; font-weight: 500; color: var(--sehr-leise, var(--leise)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sym.fav-knopf.an { color: #C98A10; }
.fav-knopf.an .ic { fill: currentColor; }
@media (prefers-color-scheme: dark) { body:not([data-thema="hell"]) .gruppe.favoriten .gruppe-kopf, body:not([data-thema="hell"]) .sym.fav-knopf.an { color: #E3AE48; } }
body[data-thema="dunkel"] .gruppe.favoriten .gruppe-kopf, body[data-thema="dunkel"] .sym.fav-knopf.an { color: #E3AE48; }

/* Angeheftet */
.pins-knopf { position: relative; width: auto; padding: 0 8px; gap: 3px; display: inline-flex; align-items: center; }
.pins-zahl { font-size: .78rem; font-weight: 700; }
.msg.angeheftet { background: color-mix(in srgb, var(--ks-protokoll) 6%, transparent); }
.pin-zeile { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--ks-protokoll); margin: 0 0 2px 50px; }
.pin-zeile .ic { width: 13px; height: 13px; }
.pins-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 60vh; overflow: auto; }
.pins-liste li { display: flex; align-items: center; gap: 4px; }
.pin-eintrag { flex: 1; min-width: 0; display: flex; gap: 10px; align-items: flex-start; text-align: left; border: 0; background: none; color: inherit; font: inherit; padding: 8px; border-radius: var(--r); cursor: pointer; }
.pin-eintrag:hover { background: var(--erhaben); }
.pin-eintrag > span { min-width: 0; display: grid; }
.pin-text { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }

/* GIFs */
.msg-gif { margin-top: 4px; }
.msg-gif .gif { display: block; max-width: min(320px, 100%); max-height: 260px; border-radius: var(--r-gross); background: var(--erhaben); }
.gif-platz { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border: 0; border-radius: var(--r-gross); background: var(--erhaben); color: var(--tinte); font: inherit; cursor: pointer; box-shadow: inset 0 0 0 1px var(--linie); text-align: left; }
.gif-platz span { display: grid; } .gif-platz small { color: var(--leise); }
.gif-knopf .ic { width: 22px; height: 22px; }
dialog.gif-wahl { width: min(520px, calc(100vw - 24px)); height: min(620px, calc(100dvh - 48px)); padding: 0; border: 0; border-radius: var(--r-blatt); background: var(--blatt); color: var(--tinte); box-shadow: var(--schatten-schwebend); display: flex; flex-direction: column; overflow: hidden; animation: dlg-rein var(--feder-dauer) var(--feder); }
dialog.gif-wahl.geht { animation: betr-raus .16s var(--raus) forwards; }
dialog.gif-wahl::backdrop { background: rgb(0 31 38 / .35); }
.gif-kopf { display: flex; align-items: center; gap: 8px; padding: 10px; border-bottom: 1px solid var(--linie); }
.gif-kopf b { flex: 1; padding-left: 6px; }
.gif-feld { flex: 1; min-width: 0; border: 0; border-radius: 999px; padding: 10px 16px; font: inherit; background: var(--erhaben); color: inherit; }
/* Ergebnisse als ruhiges Mauerwerk in zwei Spalten: jedes GIF ganz (nichts abgeschnitten), groß genug zum Erkennen */
.gif-raster { flex: 1; overflow-y: auto; padding: 4px 12px 12px; }
.gif-spalten { columns: 2; column-gap: 10px; }
.gif-wahl-bild { display: block; width: 100%; margin: 0 0 10px; padding: 0; border: 0; border-radius: var(--r-gross); overflow: hidden; background: var(--erhaben); cursor: pointer; break-inside: avoid; transition: scale var(--feder-schnell-dauer) var(--feder-schnell), box-shadow .15s; }
.gif-wahl-bild:hover, .gif-wahl-bild:focus-visible { scale: 1.02; box-shadow: 0 0 0 3px var(--akzent); }
.gif-wahl-bild img { display: block; width: 100%; height: auto; }

.gif-themen { display: flex; gap: 6px; padding: 10px 12px 8px; overflow-x: auto; scrollbar-width: none; flex: none; }
.gif-themen::-webkit-scrollbar { display: none; }
.gif-thema { flex: none; border: 0; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .85rem; font-weight: 600; background: var(--erhaben); color: var(--tinte); cursor: pointer; box-shadow: inset 0 0 0 1px var(--linie); }
.gif-thema:hover { background: var(--tonal); }
.gif-thema.an { background: var(--akzent); color: var(--primaer-text, #fff); box-shadow: none; }
.gif-leer { text-align: center; padding: 24px; }
.gif-fuss { padding: 8px 12px; font-size: .75rem; color: var(--leise); text-align: right; border-top: 1px solid var(--linie); }
.gif-zustimmung { padding: 16px 18px; line-height: 1.5; }
@media (max-width: 760px) { dialog.gif-wahl { margin: auto auto 0; width: 100%; max-width: none; border-radius: var(--r-blatt) var(--r-blatt) 0 0; height: 78dvh; padding-bottom: env(safe-area-inset-bottom); } }

/* Verlauf: Browser soll beim Nachladen oben nicht springen; GIFs haben feste Höhe (kein Nachrutschen beim Laden) */
.verlauf { overflow-anchor: auto; }
.msg-gif .gif { height: 180px; width: auto; max-width: min(320px, 100%); object-fit: contain; }

/* „… schreibt“ über dem Schreibfeld: blendet weich ein, drei hüpfende Punkte; nimmt keinen Platz weg, wenn leer */
/* schwebt über dem Feld (verschiebt nichts – kein Zucken im Verlauf) */
.tippt-zeile { position: absolute; left: 24px; right: 24px; bottom: 100%; height: 26px; display: flex; align-items: center; gap: 8px; padding: 0 8px; font-size: .82rem; color: var(--leise); opacity: 0; translate: 0 4px; pointer-events: none; background: linear-gradient(to top, var(--blatt) 55%, transparent); transition: opacity var(--effekt-dauer) var(--effekt), translate var(--feder-dauer) var(--feder); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tippt-zeile.an { opacity: 1; translate: 0 0; }
@media (max-width: 760px) { .tippt-zeile { left: 10px; right: 10px; } }
.tippt-zeile b { color: var(--tinte); font-weight: 600; }
.tippt-punkte { display: inline-flex; gap: 3px; }
.tippt-punkte i { width: 5px; height: 5px; border-radius: 50%; background: var(--akzent); animation: tippt 1.2s infinite ease-in-out; }
.tippt-punkte i:nth-child(2) { animation-delay: .15s; } .tippt-punkte i:nth-child(3) { animation-delay: .3s; }
@keyframes tippt { 0%, 60%, 100% { translate: 0 0; opacity: .45; } 30% { translate: 0 -4px; opacity: 1; } }

/* Anfang einer Direktnachricht: mittig, Schloss-Hinweis als ruhige Karte */
.dm-anfang { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 48px; }
.dm-anfang .av { margin-bottom: 6px; }
.dm-anfang h2 { margin: 6px 0 12px; }
.krypto-karte { display: flex; gap: 10px; align-items: flex-start; text-align: left; max-width: min(54ch, 100%); padding: 12px 16px; border-radius: 14px;
  background: color-mix(in srgb, var(--tuerkis-dunkel) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tuerkis-dunkel) 22%, transparent); }
.krypto-karte .ic { flex: none; margin-top: .2em; color: var(--tuerkis-dunkel); }
.krypto-karte p { margin: 0; color: var(--tuerkis-dunkel); font-weight: 600; font-size: .95em; line-height: 1.45; max-width: none; }
.dm-anfang .link { margin-top: 12px; }
.ton-probe { align-items: center; margin-top: 4px; }

/* Verschlüsselung: geprüft, Sicherheitsnummer mit QR-Code, Geräte */
.geprueft-marke { display: inline-flex; align-items: center; gap: 6px; color: var(--tuerkis-dunkel); font-weight: 600; margin: 10px 0 0 !important; }
.sn-paar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; margin: 12px 0; }
.sn-qr { width: 180px; height: 180px; background: #fff; border-radius: 12px; padding: 8px; }
.sn-qr svg { width: 100%; height: 100%; display: block; }
.sn-zahlen { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 6px 18px; margin: 0; padding: 14px 18px; border-radius: var(--r); background: var(--erhaben); box-shadow: inset 0 0 0 1px var(--linie); font: 700 1.2rem/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .05em; user-select: all; }
.sn-kamera { position: relative; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 1; max-width: 320px; margin: 10px auto; }
.sn-kamera video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hinweis.warnung { color: var(--signal); }
.geraete { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; }
.geraete li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--linie); }
.geraete li > span { display: grid; gap: 2px; min-width: 0; }
.geraete .g-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.geraete .marke { font-size: .8em; padding: 1px 8px; border-radius: 99px; background: var(--tonal); color: var(--primaer); }
.warte-freigabe .code-anzeige { margin: 12px 0; }


/* ════ UX-Review: Oberfläche (Handy und Desktop) ════ */

/* Kontrast: Zeitstempel, „bearbeitet“, Ortsangaben und Trenner mit --leise (hell und dunkel über 4,5:1) */
.msg time, .bearbeitet, .tr-wer time, .tz-kopf time, .k-ort, .kopf-trenner { color: var(--leise); }

/* Dialoge: Titel trägt den Fokus beim Öffnen (ohne Ring), Fehler stehen im Dialog */
.dlg h2:focus, .dlg h2:focus-visible { outline: none; }
.dlg-fehler { margin: 0; color: var(--signal); font-weight: 600; }
@media (max-width: 760px) {
  /* iPhone: Blatt sitzt über der Tastatur (--kb aus visualViewport), Feld und Knöpfe bleiben sichtbar */
  .tastatur .dlg, .tastatur .dlg.breit { margin-bottom: var(--kb, 0px); }
  .tastatur dialog.gif-wahl { margin-bottom: var(--kb, 0px); height: min(78dvh, calc(var(--app-h, 100dvh) - 24px)); }
}

/* Meldungen: volle Breite (mit Rand), oben unter dem Kopf statt über dem Schreibfeld */
#toasts { top: calc(env(safe-area-inset-top) + 72px); bottom: auto; left: 12px; right: 12px; translate: none; }
.toast { max-width: min(560px, 100%); }
.toast.weg { translate: 0 -8px; }
.toast.mit-knopf { display: flex; align-items: center; gap: 14px; padding: 6px 6px 6px 16px; pointer-events: auto; }
.toast-knopf { border: 0; border-radius: var(--r-klein); padding: 7px 12px; background: rgb(255 255 255 / .14); color: inherit; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.toast-knopf:hover { background: rgb(255 255 255 / .24); }
@media (max-width: 760px) { #toasts { top: calc(env(safe-area-inset-top) + 62px); } }

/* „Zu den neuesten“: sitzt über dem Schreibfeld und wächst mit ihm mit */
.tipp-zone > .nach-unten { bottom: calc(100% + 30px); }
@media (max-width: 760px) { .tipp-zone > .nach-unten { bottom: calc(100% + 30px); } }

/* Anhänge vor dem Senden: Leiste mit Vorschau, Name gekürzt, nichts läuft aus dem Bild */
.warte-dateien { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.warte-dateien::-webkit-scrollbar { display: none; }
.warte { flex: none; max-width: min(260px, 100%); min-width: 0; }
.warte .warte-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.warte small { white-space: nowrap; flex: none; }
.warte .sym { flex: none; }
.warte.mit-bild { padding-left: 4px; }
.warte img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex: none; }
@media (max-width: 760px) { .warte { max-width: calc(100vw - 48px); } }

/* Schreibfeld: Platzhalter bleibt einzeilig */
.tipp textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Handy mit offener Tastatur: Kopf schmal, Reiter weg – mehr Platz für das Gespräch */
@media (max-width: 760px) {
  .tastatur .reiterleiste:not(.innen) { display: none; }
  .tastatur .kopf { min-height: 44px; padding-top: 2px; padding-bottom: 2px; }
  .tastatur .kopf .thema { display: none; }
}

/* Kopf: Zurück, Suche im Kanal als Feld, Bereich als Link, Ablage-Marke, Anruf als Band (Handy) */
.zurueck-knopf { flex: none; }
.kanal-suche { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: var(--r-klein); background: var(--erhaben); box-shadow: inset 0 0 0 1px var(--linie); color: var(--leise); text-decoration: none; font-size: .9em; white-space: nowrap; max-width: 220px; }
.kanal-suche span { overflow: hidden; text-overflow: ellipsis; }
.kanal-suche:hover { color: var(--tinte); box-shadow: inset 0 0 0 1px var(--akzent); }
.kanal-suche .ic { width: 16px; height: 16px; flex: none; }
@media (max-width: 1100px) { .kanal-suche { width: 36px; padding: 0; justify-content: center; background: none; box-shadow: none; } .kanal-suche span { display: none; } .kanal-suche .ic { width: 20px; height: 20px; } }
.kopf-bereich { display: inline-flex; align-items: center; gap: 5px; border-radius: 6px; padding: 2px 4px; margin-left: -4px; }
.kopf-bereich:hover { text-decoration: underline; text-underline-offset: 3px; background: var(--erhaben); }
.kopf-bereich .ic { width: 14px; height: 14px; flex: none; }
.kopf-marke { flex: none; font-size: .75rem; font-weight: 700; color: var(--ks-ordner); background: color-mix(in srgb, var(--ks-ordner) 12%, transparent); border-radius: 999px; padding: 1px 9px; }
.anruf-ort, .anruf-hin { display: none; }
@media (max-width: 760px) {
  .kopf > .anruf-pille { order: 5; flex: 1 0 100%; justify-content: flex-start; margin: 0 -8px; padding: 6px 14px; border-radius: 0; font-size: .86em; background: color-mix(in srgb, var(--online) 14%, var(--blatt)); border-top: 1px solid color-mix(in srgb, var(--online) 30%, transparent); }
  .kopf > .anruf-pille .anruf-ort { display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: var(--leise); }
  .kopf > .anruf-pille .anruf-ort::before { content: "· "; }
  .kopf > .anruf-pille .anruf-hin { display: inline; margin-left: auto; color: var(--akzent); }
  .kopf-knoepfe { gap: 2px; }
}
.kopf-knoepfe .sym[aria-pressed="true"] { color: var(--tinte); background: var(--erhaben); }
@media (max-width: 760px) { .kopf-knoepfe .sym[aria-pressed] { background: none; } }
.blatt-zusatz { margin-left: auto; color: var(--leise); font-weight: 600; }
.blatt-thema { margin: -4px 0 10px; }

/* Seitenleiste */
@media (min-width: 761px) { .seite { position: relative; } }   /* Handy: bleibt fixed (Schublade) */
.bereich-gruppe .gruppe-zeile { gap: 0; }
.bklapp { flex: none; width: 26px; height: 32px; display: grid; place-items: center; border: 0; background: none; color: var(--leise); cursor: pointer; border-radius: var(--r-klein); padding: 0; margin-left: 2px; }
.bklapp:hover { color: var(--tinte); background: color-mix(in srgb, var(--leise) 10%, transparent); }
.zu > .gruppe-zeile .bklapp .pfeil::before { rotate: -45deg; translate: -1px 0; }
a.bkopf { text-decoration: none; display: flex; align-items: center; gap: 6px; padding-left: 4px; border-radius: var(--r-klein); }
a.bkopf.an, .bereich-gruppe > .gruppe-zeile a.bkopf.an { color: var(--akzent); }
.b-schnell-gruppe { display: flex; flex: none; gap: 0; }
.b-schnell { position: relative; opacity: .7; }
.gruppe-zeile:hover .b-schnell, .b-schnell:focus-visible, .b-schnell.an, .b-schnell.belegt, .bereich-gruppe.hier .b-schnell { opacity: 1; }
.b-schnell.an { background: var(--tonal); }
.b-schnell .ic { width: 16px; height: 16px; }
.b-drin-zahl { position: absolute; right: 1px; top: 1px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: var(--online); color: #fff; font-size: .62rem; font-weight: 700; display: grid; place-items: center; line-height: 1; }
@media (hover: none) { .b-schnell { opacity: 1; } }
@media (max-width: 760px) { .bklapp { width: 40px; height: 44px; margin-left: 0; } .b-schnell { width: 40px; height: 44px; } }
.fav-marke { display: inline-grid; color: #C98A10; opacity: .8; flex: none; }
.fav-marke .ic { width: 12px; height: 12px; fill: currentColor; }
@media (prefers-color-scheme: dark) { body:not([data-thema="hell"]) .fav-marke { color: #E3AE48; } }
body[data-thema="dunkel"] .fav-marke { color: #E3AE48; }
.mehr-dm { display: block; margin: 2px 0 0 8px; padding: 4px 6px; border: 0; background: none; color: var(--akzent); font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; border-radius: var(--r-klein); }
.mehr-dm:hover { text-decoration: underline; }
@media (pointer: coarse) { .mehr-dm { min-height: 40px; } }
.og-anzahl { order: 3; flex: none; font-size: .7rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--leise); }
.ungelesen-pille { position: absolute; left: 50%; translate: -50% 0; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 0; border-radius: 999px; background: var(--akzent); color: #fff; font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; box-shadow: var(--schatten-schwebend); white-space: nowrap; }
@media (prefers-color-scheme: dark) { body:not([data-thema="hell"]) .ungelesen-pille { color: var(--primaer-text); } }
body[data-thema="dunkel"] .ungelesen-pille { color: var(--primaer-text); }

/* Seiten ohne Kanal: keine Personenliste daneben */
@media (min-width: 1101px) {
  .rahmen[data-seite="1"], .rahmen[data-seite="1"][data-leute="1"] { grid-template-columns: var(--seite-b, 272px) minmax(0, 1fr); }
  .rahmen[data-seite="1"] .leute { display: none; }
}

/* Nachrichten: mit der Tastatur erreichbar; Werkzeuge bei Tastaturfokus, nicht beim Bearbeiten */
.msg:focus { outline: none; }
.msg:focus-visible { box-shadow: inset 0 0 0 2px var(--akzent); }
.msg:focus-within .msg-werkzeuge { display: none; }
.msg:hover .msg-werkzeuge, .msg:focus-visible .msg-werkzeuge, .msg:has(.msg-werkzeuge :focus-visible) .msg-werkzeuge, .msg:has(.emoji-wahl) .msg-werkzeuge { display: flex; }
.msg:has(.bearbeiten) .msg-werkzeuge { display: none !important; }
@media (hover: none) { .msg.zeit-an .seitenzeit { opacity: 1; } }

/* Angeheftet: schmale Markierung am Rand statt Fläche (verwechselt sich nicht mit Überfahren und Sprung) */
.msg.angeheftet { background: none; box-shadow: inset 3px 0 0 color-mix(in srgb, var(--ks-protokoll) 70%, transparent); }
.msg.angeheftet:hover { background: var(--erhaben); }
.msg.blitz, .msg.angeheftet.blitz { background: color-mix(in srgb, var(--akzent) 16%, var(--blatt)); }
.pin-text { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pin-los { flex: none; }

/* Dateien in einer Nachricht: Kacheln oben ausrichten (nicht auf Bildhöhe strecken) */
.dateien { align-items: flex-start; }

/* Erwähnungen: Vorschläge so breit wie das Feld */
.erw-vorschlag { right: 24px; }
@media (max-width: 760px) { .erw-vorschlag { left: 8px; right: 8px; min-width: 0; } }

/* Reaktionen: größere Ziele auf Touch, Namen per langem Drücken, mehr Auswahl */
.reaktion .reak-sym { width: 20px; height: 20px; }
@media (pointer: coarse) {
  .reaktion { min-height: 38px; padding: 4px 11px 4px 9px; }
  .faden-zeile { min-height: 40px; }
}
.reak-namen { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.reak-namen li { display: flex; align-items: center; gap: 12px; padding: 6px 4px; }
.blatt-emojis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.blatt-emojis .blatt-mehr { color: var(--leise); }
.emoji-wahl { flex-wrap: wrap; max-width: calc(100vw - 16px); }
.emoji-wahl .emoji-mehr { color: var(--leise); }
.emoji-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; margin-top: 12px; max-height: 50vh; overflow-y: auto; }
.emoji-raster button { aspect-ratio: 1; border: 0; border-radius: var(--r); background: var(--erhaben); cursor: pointer; display: grid; place-items: center; font-size: 1.4rem; }
.emoji-raster button:hover, .emoji-raster button:focus-visible { background: var(--tonal); }
#emo-q { max-width: none; }

/* Personenkarte: Abstand zwischen Punkt und Zustand */
.karte-person .anw-punkt { margin-right: 6px; }

/* Anmeldung: Passwort zeigen, Hinweis bei vergessenem Passwort, auf dem Handy breitere Felder */
.pw-feld { position: relative; display: block; }
.pw-feld input { padding-right: 48px !important; }
.pw-feld .pw-zeigen { position: absolute; right: 4px; top: 50%; translate: 0 -50%; width: 38px; height: 38px; }
.tor-hilfe { text-align: center; }
@media (max-width: 760px) { .tor-karte { padding: 28px 18px 22px; } }

/* Verwaltung */
.reiterleiste.innen { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.reiterleiste.innen::-webkit-scrollbar { display: none; }
.reiterleiste.innen .reiter { flex: none; }
.verw-kopfzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.verw-kopfzeile p { margin: 0; }
.kanal-verw li > .reihe-knoepfe { flex: none; }

/* Einstellungen: Sprungleiste (Rechner), Liste mit Unterseiten (Handy) */
.einst-nav ul { list-style: none; margin: 0; padding: 0; }
.einst-nav a { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--r-klein); color: var(--leise); text-decoration: none; font-weight: 600; font-size: .92em; }
.einst-nav a:hover { color: var(--tinte); background: var(--erhaben); }
.einst-nav a[aria-current] { color: var(--tinte); background: var(--tonal); }
.einst-nav .pfeil-rechts { display: none; }
@media (min-width: 1101px) {
  .einstellungen.mit-nav { display: grid; grid-template-columns: 200px minmax(0, 720px); justify-content: center; column-gap: 28px; align-items: start; }
  .einstellungen.mit-nav > * { margin-left: 0 !important; margin-right: 0 !important; max-width: none; }
  .einstellungen.mit-nav > .einst-nav { grid-column: 1; grid-row: 1 / span 30; position: sticky; top: 0; }
  .einstellungen.mit-nav > section { grid-column: 2; scroll-margin-top: 12px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .einst-nav ul { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
  .einstellungen > section { scroll-margin-top: 12px; }
}
@media (max-width: 760px) {
  .einstellungen.liste .einst-nav ul { display: grid; border-radius: var(--r-gross); background: var(--erhaben); box-shadow: inset 0 0 0 1px var(--linie); overflow: hidden; }
  .einstellungen.liste .einst-nav li + li { border-top: 1px solid var(--linie); }
  .einstellungen.liste .einst-nav a { min-height: 52px; padding: 0 14px 0 16px; border-radius: 0; color: var(--tinte); font-size: 1rem; }
  .einstellungen.liste .einst-nav .pfeil-rechts { display: block; margin-left: auto; rotate: 180deg; color: var(--leise); }
}

/* Bildbetrachter: Gesten, Blättern, Zoom */
.betrachter { background: rgb(4 14 18 / calc(.94 * var(--betr-deck, 1))); }
.betr-inhalt img { touch-action: pinch-zoom; user-select: none; -webkit-user-select: none; transition: translate .2s cubic-bezier(.2, 0, 0, 1); }
.betr-inhalt.gross { place-items: start; }
.betr-inhalt.gross img { max-width: none; max-height: none; touch-action: auto; cursor: zoom-out; }
.art-bild .betr-inhalt img { cursor: zoom-in; }
.betr-nr { color: var(--buehne-leise); font-size: .86em; white-space: nowrap; }
.betr-blatt { position: absolute; top: 50%; translate: 0 -50%; background: rgb(0 20 25 / .55); }
.betr-blatt.zurueck { left: 10px; }
.betr-blatt.weiter { right: 10px; }
.betr-blatt.weiter .ic { rotate: 180deg; }
.betr-karte .knopf + .knopf { margin-top: -4px; }
@media (hover: none) { .betr-blatt { display: none; } }

/* GIF: Einwilligung kompakt, Knöpfe rechts wie in anderen Dialogen; Schlagwörter mit Verlauf am Rand */
dialog.gif-wahl.frage, .tastatur dialog.gif-wahl.frage { height: fit-content; }
.gif-zustimmung .dlg-knoepfe { margin-top: 6px; }
.gif-themen.mehr-rechts { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
.gif-themen.mehr-links { -webkit-mask-image: linear-gradient(to left, #000 85%, transparent); mask-image: linear-gradient(to left, #000 85%, transparent); }
.gif-themen.mehr-links.mehr-rechts { -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }

/* Suche: Dateitreffer */
.tz-dateinamen { display: flex; flex-wrap: wrap; gap: 6px; }
.tz-datei { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-klein); background: var(--erhaben); box-shadow: inset 0 0 0 1px var(--linie); font-weight: 600; font-size: .92em; overflow-wrap: anywhere; }
.tz-datei .ic { color: var(--akzent); }
/* Kopf: Name des Kanals geht vor dem Thema (das Thema kürzt sich zuerst) */
.kopf-titel h1 { flex: 0 1 auto; min-width: 4ch; }
.kopf-titel .thema { flex: 1 1 0; min-width: 0; }
.kopf-titel > .kopf-bereich { flex: 0 1 auto; min-width: 3ch; }
@media (max-width: 1300px) { .kanal-suche { max-width: 180px; } }

/* ── Gespräche (UX-Review Teil 3) */
/* Raumseite: „Verbinde …“ statt „Beitreten“, solange die Verbindung aufgebaut wird */
.knopf .kreisel { width: 18px; height: 18px; border-width: 2px; border-color: rgb(255 255 255 / .35); border-top-color: currentColor; }
/* Aufnahme-Knopf: nicht aufgenommen = gedämpft und durchgestrichen (kein Pausen-Symbol, das wie ein Knopf wirkt) */
.rund.prot.aus { background: rgb(255 255 255 / .1); color: var(--buehne-leise); }
.prot-band .band-text { flex: 1; min-width: 0; }
.prot-band .band-text span { color: var(--buehne-leise); }
/* Klingeln: Platzhalter für die angerufene Person */
.kachel.klingelt { background: radial-gradient(120% 120% at 50% 0%, #1A4550 0%, var(--kachel) 60%); }
.kachel.klingelt .bild .av { animation: klingel-puls 1.3s ease-in-out infinite; opacity: .85; }
@media (prefers-reduced-motion: reduce) { .kachel.klingelt .bild .av { animation: none; } }
/* Direktnachricht: Bühne kleiner, damit der Verlauf (und sein Anfang) sichtbar bleibt */
#haupt[data-typ="direkt"] .buehne-platz:not([hidden]) { height: min(44vh, 460px); }
/* Klingelkarte mit Beschriftung */
.anruf-wer small { display: inline-flex; align-items: center; gap: 5px; }
.anruf-wer small .ic { width: 13px; height: 13px; }
.anruf-sperre { margin: -4px 0 0; color: var(--leise); font-size: .92em; line-height: 1.4; }
.anruf-wahl { display: grid; justify-items: center; gap: 6px; border: 0; background: none; padding: 4px; color: var(--tinte); font: inherit; font-size: .88em; font-weight: 600; cursor: pointer; max-width: 50%; text-align: center; }
.anruf-wahl .rund { pointer-events: none; }
.anruf-wahl:hover .rund.annehmen { background: #25723F; }
.anruf-wahl:hover .rund.gefahr { background: #9A2A14; }
.anruf-wahl:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: var(--r); }
/* Handy: Band unter dem Kopf mit Mikrofon und Auflegen */
.anruf-pille { align-items: center; }
.anruf-band-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; }
.anruf-pille .anruf-was { white-space: nowrap; }
.anruf-pille .sym.klein { width: 36px; height: 36px; flex: none; }
.anruf-pille .sym.aus { color: var(--signal); }
.anruf-pille .sym.gefahr { background: var(--signal-stark); color: var(--signal-text); border-radius: var(--r-klein); }
@media (max-width: 760px) {
  .kopf > .anruf-pille { gap: 6px; padding-top: 4px; padding-bottom: 4px; }
  .kopf > .anruf-pille .anruf-ort { display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: var(--leise); }
  /* Steuerleiste in einer Reihe (Ansicht und Geräte stehen in „Mehr“) */
  .steuer { flex-wrap: nowrap; gap: 8px; padding: 8px 8px 12px; }
  .st-gruppe { gap: 6px; }
  .st-gruppe + .st-gruppe { padding-left: 8px; }
  .rund.gefahr { width: 56px; }
  /* Gesprächskacheln: zwei Personen untereinander statt zwei schmaler, hoher Kacheln */
  .kacheln[data-anzahl="2"]:not(.mit-spot) { grid-template-columns: minmax(0, 1fr) !important; grid-auto-rows: minmax(0, 1fr); }
  .kacheln:not(.mit-spot) .kachel { min-height: 90px; }
  /* kleine Kacheln: Namensschild klein in der Ecke, Avatar kleiner (überdeckt sich nicht) */
  .kacheln.mit-spot > .kachel:not(.spot) .bild .av { --g: 36px !important; }
  .kacheln.mit-spot > .kachel:not(.spot) .bild { padding-bottom: 20px; }
  .kacheln.mit-spot > .kachel:not(.spot) .schild { left: 4px; right: 4px; bottom: 4px; padding: 1px 6px; font-size: .72em; max-width: none; }
  .kacheln[data-anzahl="3"]:not(.mit-spot) .kachel .bild .av, .kacheln[data-anzahl="4"]:not(.mit-spot) .kachel .bild .av { --g: 52px !important; }
  .kacheln:not(.mit-spot) .kachel .schild { left: 6px; bottom: 6px; padding: 2px 8px; font-size: .8em; max-width: calc(100% - 12px); }
}
/* Hinweisbänder schmal: Knopf unter den Text */
@media (max-width: 500px) {
  .prot-band { flex-wrap: wrap; padding: 10px 14px; }
  .prot-band .band-text { flex-basis: calc(100% - 24px); }
  .prot-band .knopf { margin-left: 21px; }
  .zus-frage .knopf { width: 100%; }
}
/* Einwilligung, neue Fassung: Neues hervorgehoben, der ganze Text eingeklappt */
.einw-neu { padding: 12px 14px 4px; border-radius: var(--r); background: color-mix(in srgb, var(--primaer) 9%, var(--blatt)); box-shadow: inset 3px 0 0 var(--primaer); }
.einw-ganz { margin-top: 12px; }
.einw-ganz summary { cursor: pointer; font-weight: 600; color: var(--akzent); }
.einw-ganz .einw-text { margin-top: 10px; color: var(--leise); }
/* Anrufverlauf in der Direktnachricht */
.anruf-zeile { display: flex; align-items: center; gap: 10px; margin: 6px 28px; padding: 8px 12px; border-radius: var(--r); background: var(--erhaben); color: var(--leise); font-size: .92em; }
.anruf-zeile > .ic { flex: none; }
.anruf-zeile span { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; }
.anruf-zeile b { color: var(--tinte); font-weight: 600; }
.anruf-zeile.verpasst > .ic { color: var(--signal); }
.anruf-zeile time { font-size: .9em; }
@media (max-width: 760px) { .anruf-zeile { margin: 6px 12px; } }
/* Bereich-Dialog: abgeschaltete Option sichtbar als „nicht möglich“ */
.haken.aus { cursor: default; }
.haken.aus .txt { opacity: .7; }
/* Offene Themen und Aufgaben: Haken direkt in der Zeile, überfällig als roter Chip vorne */
.thema-li { display: flex; align-items: center; gap: 4px; }
.thema-li > .thema-art { margin-left: 8px; }
.thema-li > .thema-zeile { flex: 1; min-width: 0; }
.thema-haken { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 9px; cursor: pointer; }
.thema-haken:hover { background: var(--blatt); }
.thema-haken input { width: 18px; height: 18px; accent-color: var(--primaer); margin: 0; cursor: pointer; }
.thema-li.erledigt b { text-decoration: line-through; text-decoration-color: var(--sehr-leise); color: var(--leise); }
.frist-chip { display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: 6px; background: var(--signal-hell); color: var(--signal); font-weight: 700; font-size: .95em; }
.thema-quelle { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 6px 8px; border-radius: var(--r-klein); color: var(--leise); font-size: .85em; text-decoration: none; }
.thema-quelle:hover { background: var(--blatt); color: var(--tinte); }
.b-erledigt { margin-top: 6px; border-top: 1px solid var(--linie); padding-top: 8px; }
.b-erledigt summary { cursor: pointer; font-weight: 600; color: var(--leise); padding: 4px 2px; }
.b-erledigt .b-liste { margin-top: 6px; }
/* Meine Aufgaben */
.kanal.aufgaben-kanal .ic { color: var(--primaer); }
.aufgaben-zahl { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 10px; font-size: .75rem; font-weight: 700; color: var(--leise); background: var(--erhaben); text-align: center; line-height: 20px; }
.aufgaben-zahl.ueber { color: var(--signal); background: var(--signal-hell); }
.aufgaben-kopf { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin: 4px auto 14px; }
.aufgaben-kopf p { margin: 0; flex: 1 1 260px; }
.aufgaben-titel { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.02rem; margin: 0 0 8px; }
.aufgaben-seite .karte .b-liste { margin: 0; }
.leer-hinweis.klein { padding: 28px 0; }
.leer-hinweis.klein > .ic { width: 28px; height: 28px; color: var(--leise); }
@media (max-width: 760px) { .thema-quelle span { display: none; } }
.aufgaben-seite .b-zeile-text b { white-space: normal; overflow-wrap: anywhere; }

/* ── Eingabemasken am Handy (Tastatur, Trefferflächen, Fehler am Feld) */
/* Dialoge: Titel und Knöpfe fest, nur der Inhalt scrollt. So bleiben die Knöpfe über der Tastatur sichtbar, auch bei
   langen Formularen (vorher wuchs der Inhalt über die Höhe des Blatts hinaus und schob die Knöpfe unter die Tastatur). */
.dlg form { display: flex; flex-direction: column; }
.dlg form > h2, .dlg form > .dlg-knoepfe, .dlg form > .dlg-fehler { flex: none; }
.dlg form > .dlg-inhalt { flex: 0 1 auto; min-height: 0; overscroll-behavior: contain; }
.dlg-inhalt { scroll-padding: 12px 0; }
@media (max-width: 760px) {
  .dlg { transition: margin-bottom .2s cubic-bezier(.2, .8, .2, 1); }
  /* Mit Tastatur: kein Abstand für den Home-Balken (die Tastatur liegt darüber), Inhalt darf ganz schrumpfen */
  .tastatur .dlg form { padding-bottom: 12px; gap: 12px; }
  .tastatur .dlg-knoepfe { padding-top: 8px; border-top: 1px solid var(--linie); }
  /* Anmeldung: eigener Scrollbereich so hoch wie der sichtbare Teil, Karte mittig, solange sie passt */
  .tor { height: var(--app-h, 100dvh); min-height: 0; overflow: hidden auto; place-items: unset; display: flex; overscroll-behavior: contain; }
  .tor-karte { margin: auto; }
}
/* Fehler am Feld: direkt darunter, ruhiger Abstand */
.formular .feld-fehler, .dlg .feld-fehler { margin: -6px 0 0; font-size: .9em; }
[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--signal) !important; }
/* Freigabe-Code: groß und gut zu treffen */
input.code-feld { min-height: 52px; }
/* Datumsfeld (Frist, Zeitraum): auf dem iPhone sonst ohne Höhe, solange leer, und mittig gesetzt */
input[type=date] { min-height: 44px; -webkit-appearance: none; appearance: none; text-align: left; }
input[type=date]::-webkit-date-and-time-value { text-align: left; }
@media (pointer: coarse) {
  /* Trefferflächen mindestens 44 px */
  .pw-feld .pw-zeigen, .pw-feld .pw-auge { width: 44px; height: 44px; right: 2px; }
  .pw-feld input { padding-right: 50px !important; }
  .farbwahl { gap: 8px; }
  .farbe-wahl { width: 44px; height: 44px; }
  .segment button { min-height: 44px; }
  .such-schalter { min-width: 44px; height: 44px; }
  .filter-chip { min-height: 44px; }
  .gif-thema { min-height: 44px; padding: 6px 14px; }
  .erw-opt { min-height: 44px; }
  .bearbeiten .knopf.klein { min-height: 44px; }
  .tipp .sym { width: 44px; height: 44px; flex: none; }
  .ablage-auswahl .sym { width: 44px; height: 44px; }
  label.haken:not(:has(.txt)) { min-height: 44px; align-items: center; }
  label.haken:not(:has(.txt)) input { translate: 0; }
  .mitglieder-liste { max-height: 264px; }
}
/* Suche, eigener Zeitraum: am Handy untereinander, Felder bündig */
@media (max-width: 760px) { .such-zeitraum label { flex: 1 1 100%; display: grid; grid-template-columns: 2.6em minmax(0, 1fr); } }

/* ── Mehrere Personen an einem Gerät (Vor-Ort-Modus, js/vorort.js) */
/* Band auf der Bühne (immer dunkel): eine Zeile je gemeinsamem Gerät, darunter ggf. der Hinweis gegen Echo */
.vo-band { display: grid; gap: 2px; padding: 0 18px 6px; font-size: .92em; }
.prot-band:not([hidden]) + .vo-band { margin-top: -6px; }
.vo-zeile { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.vo-zeile > .ic { flex: none; color: var(--buehne-leise); }
.vo-band-text { flex: 1; min-width: 0; color: var(--buehne-text); }
.vo-band-text b { font-weight: 600; }
.vo-stand { color: var(--buehne-leise); }
.vo-zeile.vo-an .vo-stand { color: #FF9A85; }
.vo-zeile .knopf { flex: none; background: rgb(255 255 255 / .1); color: var(--buehne-text); }
.vo-zeile .knopf:hover { background: rgb(255 255 255 / .18); }
.vo-zeile .knopf.haupt { background: var(--buehne-gruen); color: var(--gruen-text); }
.vo-zeile .sym { color: var(--buehne-leise); }
.vo-echo { margin-top: 4px; padding: 4px 4px 4px 12px; border-radius: 12px; background: rgb(127 211 154 / .14); }
.vo-echo > .ic { color: var(--buehne-gruen); }
.prot-band .leise-knopf { margin-left: 0; background: transparent; color: var(--buehne-leise); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); }
.prot-band .leise-knopf:hover { background: rgb(255 255 255 / .08); color: var(--buehne-text); }
.prot-band .knopf + .leise-knopf { margin-left: 0; }
.prot-band .leise-knopf:first-of-type { margin-left: auto; }
/* Kachel der Gastgeber:in: wie viele sitzen mit am Gerät */
.vo-zahl { flex: none; padding: 0 6px; border-radius: 999px; background: rgb(255 255 255 / .16); font-size: .85em; font-weight: 600; line-height: 1.5; }
/* Raumansicht: Karte je gemeinsamem Gerät mit „Ich bin bei … im Raum“ */
.vo-raum { display: grid; gap: 10px; width: min(100%, 440px); }
.vo-karte { display: grid; gap: 12px; justify-items: stretch; padding: 14px 16px; border-radius: var(--r-gross, 16px); background: var(--erhaben); box-shadow: inset 0 0 0 1px var(--linie); text-align: left; }
.vo-kopf { display: flex; align-items: center; gap: 12px; }
.vo-kopf .raum-avs { flex: none; flex-wrap: nowrap; gap: 0; }
.vo-kopf .raum-avs .av + .av { margin-left: -8px; box-shadow: 0 0 0 2px var(--erhaben); }
.vo-text { display: grid; gap: 2px; min-width: 0; }
.vo-text span { color: var(--tinte); }
.vo-text small { color: var(--leise); }
.vo-text small.vo-an { color: var(--signal); }
.vo-karte .knopf.gross { width: 100%; justify-content: center; }
.vo-hier { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--leise); }
/* Seitenleiste: Personen an einem gemeinsamen Gerät, eingerückt unter der Gastgeber:in */
.drin li.vo-person { padding-left: 18px; }
.drin li.vo-person .pname { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vo-bei { flex: 1; min-width: 0; color: var(--leise); font-size: .85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vo-gast-ic { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--tonal); color: var(--leise); }
/* Dialog „An diesem Gerät“ */
.vo-liste { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 6px; }
.vo-liste li { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.vo-name { flex: 1; min-width: 0; display: grid; }
.vo-name small { font-size: .82em; color: var(--leise); }
.vo-name small.vo-nein { color: var(--signal); }
.vo-gaeste { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--linie); }
.vo-gaeste > span:first-child { flex: 1; display: grid; gap: 2px; }
.vo-gaeste small { color: var(--leise); font-size: .85em; }
.vo-zaehler { display: inline-flex; align-items: center; gap: 8px; }
.vo-zaehler output { min-width: 2ch; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.vo-zaehler .rund { width: 36px; height: 36px; font-size: 1.2em; background: var(--tonal); color: var(--tinte); }
@media (pointer: coarse) { .vo-zaehler .rund { width: 44px; height: 44px; } }
@media (max-width: 500px) {
  .vo-band { padding: 0 14px 6px; font-size: .88em; }
  .vo-zeile { align-items: flex-start; gap: 8px; padding: 2px 0; }
  .vo-zeile > .ic { margin-top: 3px; }
  .vo-echo { flex-wrap: wrap; padding: 8px 6px 8px 10px; }
  .vo-echo .vo-band-text { flex-basis: calc(100% - 30px); }
  .vo-echo .knopf { margin-left: 24px; }
  .vo-echo .sym { margin-left: auto; }
  .prot-band .leise-knopf:first-of-type { margin-left: 21px; }
}
.vo-grund { margin: 0; color: var(--tinte); }
.vo-grund-zeile { margin-top: 4px; padding: 4px 6px 4px 12px; border-radius: 12px; background: rgb(255 255 255 / .07); }
.vo-grund-zeile .knopf.haupt { background: var(--buehne-gruen); color: var(--gruen-text); }

/* ── Protokoll für einen 1:1-Anruf (Direktnachricht) */
.aprot-text p { margin: 0 0 10px; }
.aprot-warnung { margin: 0 0 14px; padding: 10px 12px; border-radius: var(--r); background: var(--signal-hell); box-shadow: inset 3px 0 0 var(--signal); }
.aprot-warnung b { color: var(--tinte); }
.aprot-haken { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 4px 0 6px; padding: 8px 12px; border-radius: var(--r); background: var(--erhaben); cursor: pointer; font-weight: 600; }
.aprot-haken input { width: 20px; height: 20px; flex: none; accent-color: var(--primaer); }
.rund.prot.aprot.wartet { box-shadow: inset 0 0 0 2px #8CA3AB; }
.rund.prot.aprot.rec { background: var(--rec-buehne); color: var(--gruen-text); box-shadow: none; }
.buehne[data-prot="laeuft"] .prot-band.aprot-band { background: color-mix(in srgb, var(--rec-buehne) 16%, transparent); }
.buehne[data-prot="laeuft"] .prot-band.aprot-band b { color: #FFDCD3; }
.prot-band.aprot-band .knopf { flex: none; }
.e2e-marke.aus { color: var(--signal); }
.prot-zeile > .ic { color: var(--ks-aufnahme, var(--signal)); }
.prot-zeile small { font-size: .9em; color: var(--leise); }
.prot-zeile .knopf { flex: none; }
.aprot-info .ic { color: var(--tuerkis-dunkel, var(--primaer)); }
.anruf-pille .rec-punkt { margin: 0 2px; }
@media (max-width: 760px) { .seite-griff { display: none; } }