/* WorldWatchers Redaktion – ruhiges, gut lesbares Arbeitswerkzeug. Hell und dunkel, Handy bis Großbildschirm. */
:root {
  --bg: #f4f6f9; --fl: #ffffff; --fl2: #f0f3f7; --fl3: #e6ebf1; --linie: #dde3ea; --linie2: #c9d2dc;
  --text: #15202b; --leise: #5b6b7b; --sehrleise: #8795a3;
  --akzent: #0e7490; --akzent2: #0891b2; --akzent-fl: #e0f4f8; --akzent-text: #ffffff;
  --gruen: #15803d; --gruen-fl: #e3f5e9; --gelb: #a16207; --gelb-fl: #fdf5d8; --rot: #b91c1c; --rot-fl: #fde8e8; --lila: #6d28d9; --lila-fl: #efe8fd;
  --seite: #0b1220; --seite-text: #c7d2de; --seite-leise: #7d8a99; --seite-an: #16233a;
  --schatten: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08); --schatten2: 0 10px 30px rgba(16,24,40,.18);
  --r: 10px; --r2: 14px; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0b1017; --fl: #121a24; --fl2: #17212d; --fl3: #1e2a38; --linie: #233142; --linie2: #2e3f53; --text: #e3eaf1; --leise: #93a3b4; --sehrleise: #6b7b8c; --akzent: #22d3ee; --akzent2: #67e8f9; --akzent-fl: #0b2a33; --akzent-text: #04161c; --gruen: #4ade80; --gruen-fl: #0d2a1a; --gelb: #fbbf24; --gelb-fl: #2b2108; --rot: #f87171; --rot-fl: #2e1414; --lila: #c4b5fd; --lila-fl: #221a3a; --seite: #070b11; --seite-an: #132033; --schatten: 0 1px 2px rgba(0,0,0,.4); --schatten2: 0 10px 30px rgba(0,0,0,.5); color-scheme: dark; } }
:root[data-theme="dark"] { --bg: #0b1017; --fl: #121a24; --fl2: #17212d; --fl3: #1e2a38; --linie: #233142; --linie2: #2e3f53; --text: #e3eaf1; --leise: #93a3b4; --sehrleise: #6b7b8c; --akzent: #22d3ee; --akzent2: #67e8f9; --akzent-fl: #0b2a33; --akzent-text: #04161c; --gruen: #4ade80; --gruen-fl: #0d2a1a; --gelb: #fbbf24; --gelb-fl: #2b2108; --rot: #f87171; --rot-fl: #2e1414; --lila: #c4b5fd; --lila-fl: #221a3a; --seite: #070b11; --seite-an: #132033; --schatten: 0 1px 2px rgba(0,0,0,.4); --schatten2: 0 10px 30px rgba(0,0,0,.5); color-scheme: dark; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
a { color: var(--akzent); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0; }
h1 { font-size: 22px; font-weight: 700; } h2 { font-size: 17px; font-weight: 650; } h3 { font-size: 15px; font-weight: 650; } h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); font-weight: 650; }
p { margin: 0 0 10px; }
.mono { font-family: var(--mono); } .leise { color: var(--leise); } .klein { font-size: 13px; } .sehrklein { font-size: 12px; }
.nowrap { white-space: nowrap; } .umbruch { overflow-wrap: anywhere; } .rechts { margin-left: auto; } .mitte { text-align: center; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Startbildschirm / Marke */
.start-lade { min-height: 100vh; display: grid; place-content: center; text-align: center; gap: 8px; color: var(--leise); }
.marke-gross { font-family: var(--mono); letter-spacing: .14em; font-size: 18px; color: var(--leise); display: flex; align-items: center; gap: 10px; justify-content: center; }
.marke-gross b { color: var(--akzent); } .punkt { width: 11px; height: 11px; border-radius: 50%; background: var(--akzent); box-shadow: 0 0 12px var(--akzent); display: inline-block; }

/* Anmeldung */
.anmeldung { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(1200px 600px at 20% -10%, var(--akzent-fl), transparent), var(--bg); }
.anmeldekarte { width: 100%; max-width: 420px; background: var(--fl); border: 1px solid var(--linie); border-radius: var(--r2); box-shadow: var(--schatten2); padding: 28px 24px; }
.anmeldekarte .marke-gross { justify-content: flex-start; margin-bottom: 4px; font-size: 15px; }
.anmeldekarte h1 { margin: 14px 0 6px; } .anmeldekarte .unter { color: var(--leise); margin-bottom: 18px; font-size: 14px; }
.qr { background: #fff; padding: 10px; border-radius: 10px; width: 210px; margin: 12px auto; } .qr svg { width: 100%; height: auto; display: block; }
.geheim { font-family: var(--mono); font-size: 13px; background: var(--fl2); border: 1px dashed var(--linie2); border-radius: 8px; padding: 8px 10px; word-break: break-all; text-align: center; letter-spacing: .08em; }
.code-eingabe { font-family: var(--mono); font-size: 26px; letter-spacing: .4em; text-align: center; }
.schutzhinweis { display: flex; gap: 10px; font-size: 12.5px; color: var(--leise); margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linie); }

/* Grundaufbau */
.rahmen { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; }
.seitenleiste { background: var(--seite); color: var(--seite-text); position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; padding: 14px 10px; z-index: 30; }
.seitenleiste .marke { font-family: var(--mono); font-size: 12.5px; letter-spacing: .13em; color: var(--seite-leise); padding: 6px 10px 2px; display: flex; align-items: center; gap: 8px; text-decoration: none; }
.seitenleiste .marke b { color: #22d3ee; } .seitenleiste .marke .punkt { width: 8px; height: 8px; background: #22d3ee; box-shadow: 0 0 8px #22d3ee; }
.seitenleiste .untermarke { font-size: 11px; color: var(--seite-leise); padding: 0 10px 14px 26px; letter-spacing: .08em; text-transform: uppercase; }
.nav-gruppe { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--seite-leise); padding: 14px 10px 4px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--seite-text); text-decoration: none; font-size: 14px; min-height: 38px; }
.nav a:hover { background: rgba(255,255,255,.05); } .nav a.an { background: var(--seite-an); color: #fff; box-shadow: inset 3px 0 0 #22d3ee; }
.nav svg { width: 18px; height: 18px; flex: none; opacity: .9; }
.nav .zaehler { margin-left: auto; background: #22d3ee; color: #04161c; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 0 7px; min-width: 20px; text-align: center; }
.seitenleiste .fuss { margin-top: auto; padding: 12px 6px 0; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; gap: 10px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #04161c; background: #67e8f9; flex: none; }
.avatar.k { width: 26px; height: 26px; font-size: 10.5px; }
.seitenleiste .fuss .wer { font-size: 13px; line-height: 1.25; min-width: 0; } .seitenleiste .fuss .wer small { color: var(--seite-leise); display: block; font-size: 11.5px; }
.seitenleiste .fuss button { margin-left: auto; background: none; border: 0; color: var(--seite-leise); cursor: pointer; padding: 6px; border-radius: 6px; } .seitenleiste .fuss button:hover { color: #fff; background: rgba(255,255,255,.06); }

.haupt { min-width: 0; display: flex; flex-direction: column; }
.kopfleiste { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linie); display: flex; align-items: center; gap: 10px; padding: 10px 22px; min-height: 58px; }
.kopfleiste .menue { display: none; }
.suchfeld { flex: 1; max-width: 560px; position: relative; }
.suchfeld input { width: 100%; padding: 9px 12px 9px 36px; border-radius: 10px; border: 1px solid var(--linie); background: var(--fl); }
.suchfeld svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--sehrleise); }
.suchtreffer { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--fl); border: 1px solid var(--linie); border-radius: var(--r); box-shadow: var(--schatten2); max-height: 60vh; overflow: auto; z-index: 50; padding: 6px; }
.suchtreffer a { display: flex; gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--text); font-size: 14px; } .suchtreffer a:hover, .suchtreffer a.an { background: var(--fl2); }
.inhalt { padding: 22px; max-width: 1360px; width: 100%; margin: 0 auto; flex: 1; }
.seitenkopf { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.seitenkopf .titelblock { flex: 1; min-width: 220px; } .seitenkopf .titelblock p { color: var(--leise); margin: 4px 0 0; font-size: 14px; }
.unterleiste { display: none; }

/* Bausteine */
.karte { background: var(--fl); border: 1px solid var(--linie); border-radius: var(--r2); box-shadow: var(--schatten); }
.karte > .kk { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; } .karte > .kk h2 { flex: 1; }
.karte > .ki { padding: 0 16px 16px; } .karte.pad { padding: 16px; }
.raster { display: grid; gap: 16px; } .r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .r4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.r-haupt { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.stapel > * + * { margin-top: 12px; } .zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .zeile.eng { gap: 4px; } .zeile.oben { align-items: flex-start; }
.trenn { height: 1px; background: var(--linie); margin: 12px 0; border: 0; }

.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border-radius: 9px; border: 1px solid var(--linie2); background: var(--fl); color: var(--text); cursor: pointer; font-weight: 550; font-size: 14px; text-decoration: none; min-height: 38px; white-space: nowrap; transition: background .12s, border-color .12s; }
.knopf:hover { background: var(--fl2); border-color: var(--sehrleise); } .knopf:disabled { opacity: .5; cursor: not-allowed; }
.knopf.haupt-k { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); } .knopf.haupt-k:hover { filter: brightness(1.07); }
.knopf.gefahr { color: var(--rot); border-color: color-mix(in srgb, var(--rot) 45%, var(--linie)); } .knopf.gefahr:hover { background: var(--rot-fl); }
.knopf.gruen-k { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.knopf.flach { border-color: transparent; background: transparent; } .knopf.flach:hover { background: var(--fl2); }
.knopf.klein { padding: 4px 10px; min-height: 30px; font-size: 13px; border-radius: 7px; } .knopf.voll { width: 100%; }
.knopf svg { width: 16px; height: 16px; }
.iconknopf { width: 38px; height: 38px; padding: 0; } .iconknopf.klein { width: 30px; height: 30px; }

.feld { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; } .feld > span { font-size: 13px; font-weight: 600; color: var(--leise); } .feld small { color: var(--sehrleise); font-size: 12px; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=url], input[type=number], input[type=datetime-local], input[type=date], input[type=time], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--linie2); border-radius: 9px; background: var(--fl); color: var(--text); min-height: 40px; }
textarea { resize: vertical; line-height: 1.55; } input:focus, select:focus, textarea:focus { border-color: var(--akzent); outline: 2px solid color-mix(in srgb, var(--akzent) 25%, transparent); outline-offset: 0; }
.haken { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; font-size: 14px; } .haken input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--akzent); }

.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--fl3); color: var(--leise); font-weight: 550; white-space: nowrap; line-height: 1.6; }
.chip.akzent { background: var(--akzent-fl); color: var(--akzent); } .chip.gruen { background: var(--gruen-fl); color: var(--gruen); } .chip.gelb { background: var(--gelb-fl); color: var(--gelb); } .chip.rot { background: var(--rot-fl); color: var(--rot); } .chip.lila { background: var(--lila-fl); color: var(--lila); }
.chip.rand { background: transparent; border: 1px solid var(--linie2); }
.punktstatus { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--sehrleise); } .punktstatus.gruen { background: var(--gruen); } .punktstatus.rot { background: var(--rot); } .punktstatus.gelb { background: var(--gelb); }

.liste { display: flex; flex-direction: column; } .liste > .eintrag { padding: 11px 16px; border-top: 1px solid var(--linie); display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: var(--text); }
.liste > .eintrag:first-child { border-top: 0; } a.eintrag:hover, .eintrag.klickbar:hover { background: var(--fl2); cursor: pointer; }
.eintrag .haupttext { flex: 1; min-width: 0; } .eintrag .titel { font-weight: 600; font-size: 14.5px; line-height: 1.35; } .eintrag .meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--leise); margin-top: 3px; }
.leerzustand { text-align: center; padding: 34px 16px; color: var(--leise); } .leerzustand svg { width: 40px; height: 40px; color: var(--sehrleise); } .leerzustand h3 { color: var(--text); margin: 8px 0 4px; }

.reiter { display: flex; gap: 2px; border-bottom: 1px solid var(--linie); overflow-x: auto; scrollbar-width: none; margin-bottom: 14px; }
.reiter button { background: none; border: 0; padding: 10px 14px; cursor: pointer; color: var(--leise); font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent; white-space: nowrap; min-height: 42px; }
.reiter button.an { color: var(--akzent); border-bottom-color: var(--akzent); } .reiter .zahl { font-size: 11.5px; background: var(--fl3); border-radius: 999px; padding: 0 7px; margin-left: 4px; }

.kennzahl { padding: 14px 16px; } .kennzahl .wert { font-size: 26px; font-weight: 700; line-height: 1.1; } .kennzahl .was { color: var(--leise); font-size: 13px; }
.balken { height: 8px; background: var(--fl3); border-radius: 999px; overflow: hidden; } .balken > i { display: block; height: 100%; background: var(--akzent); border-radius: 999px; }
.hinweisbox { display: flex; gap: 10px; padding: 11px 13px; border-radius: var(--r); background: var(--fl2); border: 1px solid var(--linie); font-size: 13.5px; } .hinweisbox svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.hinweisbox.gelb { background: var(--gelb-fl); border-color: color-mix(in srgb, var(--gelb) 30%, transparent); } .hinweisbox.rot { background: var(--rot-fl); border-color: color-mix(in srgb, var(--rot) 30%, transparent); } .hinweisbox.gruen { background: var(--gruen-fl); border-color: color-mix(in srgb, var(--gruen) 30%, transparent); } .hinweisbox.akzent { background: var(--akzent-fl); border-color: color-mix(in srgb, var(--akzent) 30%, transparent); }
.tabelle { width: 100%; border-collapse: collapse; font-size: 13.5px; } .tabelle th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--leise); font-weight: 650; padding: 8px 10px; border-bottom: 1px solid var(--linie); position: sticky; top: 0; background: var(--fl); }
.tabelle td { padding: 9px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; } .tabelle tr:hover td { background: var(--fl2); } .tabellenrahmen { overflow-x: auto; }

/* Dialoge, Meldungen */
.schleier { position: fixed; inset: 0; background: rgba(6,10,16,.55); z-index: 100; display: grid; place-items: center; padding: 16px; animation: ein .12s ease-out; }
.dialog { background: var(--fl); border-radius: var(--r2); box-shadow: var(--schatten2); width: 100%; max-width: 560px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; border: 1px solid var(--linie); }
.dialog.breit { max-width: 860px; } .dialog header { display: flex; align-items: center; gap: 10px; padding: 16px 18px 8px; } .dialog header h2 { flex: 1; } .dialog .dk { padding: 6px 18px 12px; overflow: auto; } .dialog footer { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px 16px; border-top: 1px solid var(--linie); flex-wrap: wrap; }
.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 200; max-width: min(420px, calc(100vw - 32px)); }
.toast { background: var(--text); color: var(--bg); padding: 11px 14px; border-radius: 10px; box-shadow: var(--schatten2); font-size: 14px; display: flex; gap: 10px; align-items: flex-start; animation: ein .15s ease-out; }
.toast.fehler { background: var(--rot); color: #fff; } .toast.ok { background: var(--gruen); color: #fff; }
@keyframes ein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Schreibtisch */
.begruessung { font-size: 24px; font-weight: 700; } .datum { color: var(--leise); }
.evzeile .stand { width: 4px; align-self: stretch; border-radius: 4px; background: var(--linie2); flex: none; } .evzeile .stand.breit { background: var(--gruen); } .evzeile .stand.mehrfach { background: var(--akzent); } .evzeile .stand.einzeln { background: var(--gelb); }
.briefpunkt { padding: 10px 0; border-top: 1px solid var(--linie); font-size: 14px; } .briefpunkt:first-child { border-top: 0; }

/* Recherche */
.suchkopf { display: flex; gap: 8px; flex-wrap: wrap; } .suchkopf input[type=search] { flex: 1; min-width: 220px; font-size: 16px; padding: 11px 14px; }
.verlauf-balken { display: flex; align-items: flex-end; gap: 2px; height: 70px; padding: 6px 0; } .verlauf-balken i { flex: 1; background: var(--akzent); border-radius: 2px 2px 0 0; min-height: 2px; opacity: .85; }
.verteilung .zeile { margin-bottom: 6px; } .verteilung .name { width: 120px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .verteilung .balken { flex: 1; } .verteilung .n { width: 34px; text-align: right; font-size: 12.5px; color: var(--leise); }
.meldung .titel a { color: var(--text); text-decoration: none; } .meldung .titel a:hover { color: var(--akzent); text-decoration: underline; }
.meldung .anriss { font-size: 13.5px; color: var(--leise); margin-top: 4px; }
.auswahl { width: 18px; height: 18px; accent-color: var(--akzent); margin-top: 2px; flex: none; }
.zahlvergleich td.wert { font-family: var(--mono); font-weight: 700; } .spanne { font-family: var(--mono); font-size: 18px; font-weight: 700; }
.wortwolke { display: flex; flex-wrap: wrap; gap: 5px; }
.fixleiste { position: sticky; bottom: 0; background: var(--fl); border-top: 1px solid var(--linie); padding: 10px 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; box-shadow: 0 -6px 16px rgba(0,0,0,.06); z-index: 5; border-radius: 0 0 var(--r2) var(--r2); }

/* Mappen */
.mappenkachel { padding: 16px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--text); min-height: 140px; transition: border-color .12s, transform .12s; }
.mappenkachel:hover { border-color: var(--akzent); } .mappenkachel h3 { font-size: 16px; } .mappenkachel .zahlen { margin-top: auto; display: flex; gap: 12px; color: var(--leise); font-size: 12.5px; }
.farbe-cyan { border-top: 3px solid #0891b2; } .farbe-lila { border-top: 3px solid #7c3aed; } .farbe-gruen { border-top: 3px solid #16a34a; } .farbe-gelb { border-top: 3px solid #ca8a04; } .farbe-rot { border-top: 3px solid #dc2626; } .farbe-grau { border-top: 3px solid #64748b; }
.material .art { width: 30px; height: 30px; border-radius: 8px; background: var(--fl3); display: grid; place-items: center; flex: none; color: var(--leise); } .material .art svg { width: 16px; height: 16px; }
.pruefwahl { display: inline-flex; border: 1px solid var(--linie2); border-radius: 8px; overflow: hidden; } .pruefwahl button { border: 0; background: var(--fl); padding: 3px 8px; font-size: 12px; cursor: pointer; color: var(--leise); min-height: 28px; } .pruefwahl button + button { border-left: 1px solid var(--linie2); }
.pruefwahl button.an.bestaetigt { background: var(--gruen-fl); color: var(--gruen); font-weight: 700; } .pruefwahl button.an.widerlegt { background: var(--rot-fl); color: var(--rot); font-weight: 700; } .pruefwahl button.an.unklar { background: var(--gelb-fl); color: var(--gelb); font-weight: 700; } .pruefwahl button.an.offen { background: var(--fl3); color: var(--text); font-weight: 700; }
.zeitleiste { position: relative; padding-left: 22px; } .zeitleiste::before { content: ''; position: absolute; left: 7px; top: 4px; bottom: 4px; width: 2px; background: var(--linie); }
.zeitleiste .zp { position: relative; padding: 0 0 14px; } .zeitleiste .zp::before { content: ''; position: absolute; left: -19px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--fl); border: 2px solid var(--akzent); }

/* Interview */
.iv-modus { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; }
.aufnahmeleiste { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r2); background: var(--fl); border: 1px solid var(--linie); box-shadow: var(--schatten); position: sticky; top: 70px; z-index: 6; flex-wrap: wrap; }
.aufnahmeknopf { width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--rot); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 0 0 6px var(--rot-fl); flex: none; }
.aufnahmeknopf svg { width: 26px; height: 26px; } .aufnahmeknopf.laeuft { animation: puls 1.6s infinite; } .aufnahmeknopf.pause { background: var(--gelb); box-shadow: 0 0 0 6px var(--gelb-fl); }
@keyframes puls { 0%, 100% { box-shadow: 0 0 0 6px var(--rot-fl); } 50% { box-shadow: 0 0 0 12px transparent; } }
.uhr { font-family: var(--mono); font-size: 28px; font-weight: 700; letter-spacing: .04em; } .pegel { width: 120px; height: 8px; background: var(--fl3); border-radius: 999px; overflow: hidden; } .pegel i { display: block; height: 100%; width: 0; background: var(--gruen); transition: width .08s; }
.frage { display: flex; gap: 10px; padding: 11px 12px; border: 1px solid var(--linie); border-radius: var(--r); background: var(--fl); align-items: flex-start; }
.frage.gestellt { background: var(--gruen-fl); border-color: color-mix(in srgb, var(--gruen) 35%, transparent); } .frage.gestellt .ftext { color: var(--leise); }
.frage .nr { font-family: var(--mono); font-size: 12px; color: var(--sehrleise); width: 20px; flex: none; margin-top: 2px; } .frage .ftext { flex: 1; font-size: 15px; line-height: 1.45; }
.frage .haken-k { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--linie2); background: var(--fl); cursor: pointer; display: grid; place-items: center; flex: none; color: var(--leise); } .frage.gestellt .haken-k { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.abschrift { max-height: 62vh; overflow-y: auto; padding: 4px 2px; scroll-behavior: smooth; } .seg { display: flex; gap: 10px; padding: 6px 4px; border-radius: 8px; font-size: 15px; line-height: 1.55; }
.seg .t { font-family: var(--mono); font-size: 12px; color: var(--akzent); flex: none; width: 52px; cursor: pointer; padding-top: 3px; } .seg .t:hover { text-decoration: underline; }
.seg.marke { background: var(--akzent-fl); font-weight: 600; font-size: 14px; } .seg.notiz { background: var(--gelb-fl); font-size: 14px; } .seg.aktiv { background: var(--fl3); }
.seg .stext[contenteditable=true] { outline: none; border-radius: 4px; } .seg .stext[contenteditable=true]:focus { background: var(--fl2); box-shadow: 0 0 0 2px var(--akzent-fl); }
.schnellnotiz { display: flex; gap: 8px; } .schnellnotiz input { flex: 1; }
.einwilligung { border: 2px solid var(--gelb); background: var(--gelb-fl); border-radius: var(--r2); padding: 16px; }

/* Editor */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.editorkopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.speicherstand { font-size: 12.5px; color: var(--leise); display: inline-flex; align-items: center; gap: 6px; }
.schreibflaeche { background: var(--fl); border: 1px solid var(--linie); border-radius: var(--r2); padding: 22px 26px; box-shadow: var(--schatten); }
.schreibflaeche input.dachzeile { border: 0; padding: 0; min-height: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--akzent); font-weight: 650; background: transparent; outline: none; }
.schreibflaeche textarea.titel { border: 0; padding: 0; font-family: var(--serif); font-size: 30px; font-weight: 700; line-height: 1.2; resize: none; overflow: hidden; background: transparent; min-height: 0; outline: none; margin-top: 4px; }
.schreibflaeche textarea.teaser { border: 0; padding: 0; font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.5; resize: none; overflow: hidden; background: transparent; color: var(--text); min-height: 0; outline: none; margin-top: 10px; }
.werkzeugleiste { display: flex; gap: 2px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); margin: 16px 0 10px; position: sticky; top: 58px; background: var(--fl); z-index: 4; }
.werkzeugleiste button { border: 0; background: none; padding: 6px 9px; border-radius: 6px; cursor: pointer; color: var(--leise); font-weight: 700; min-width: 34px; min-height: 34px; font-size: 14px; } .werkzeugleiste button:hover { background: var(--fl2); color: var(--text); }
.werkzeugleiste .sep { width: 1px; background: var(--linie); margin: 4px 4px; }
.schreibflaeche textarea.text { border: 0; padding: 0; font-family: var(--serif); font-size: 18px; line-height: 1.75; min-height: 55vh; resize: none; overflow: hidden; background: transparent; outline: none; }
.seitenpanel { position: sticky; top: 70px; max-height: calc(100vh - 86px); display: flex; flex-direction: column; }
.seitenpanel .reiter { margin: 0; padding: 0 8px; } .seitenpanel .pk { overflow-y: auto; padding: 14px 16px; flex: 1; }
.vorschau { font-family: var(--serif); font-size: 17px; line-height: 1.7; } .vorschau h2 { font-size: 21px; margin: 18px 0 6px; } .vorschau h3 { font-size: 18px; margin: 14px 0 6px; } .vorschau blockquote { border-left: 3px solid var(--akzent); margin: 12px 0; padding: 2px 12px; color: var(--leise); } .vorschau sup a { text-decoration: none; font-family: var(--sans); font-size: 11px; }
.vorschau .v-titel { font-size: 26px; font-weight: 700; line-height: 1.2; margin: 4px 0 8px; } .vorschau .v-teaser { font-weight: 700; } .vorschau .v-dach { font-family: var(--sans); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--akzent); font-weight: 700; }
.quelle-eintrag { border: 1px solid var(--linie); border-radius: var(--r); padding: 10px; margin-bottom: 8px; background: var(--fl2); } .quelle-eintrag .nrk { font-family: var(--mono); font-weight: 700; color: var(--akzent); }
.pruefpunkt { display: flex; gap: 8px; padding: 8px 10px; border-radius: 8px; margin-bottom: 6px; font-size: 13.5px; } .pruefpunkt.fehler { background: var(--rot-fl); } .pruefpunkt.wichtig { background: var(--gelb-fl); } .pruefpunkt.hinweis { background: var(--fl2); } .pruefpunkt.info { background: transparent; border: 1px dashed var(--linie2); }
.statusband { display: flex; gap: 0; border: 1px solid var(--linie); border-radius: 999px; overflow: hidden; font-size: 12px; } .statusband span { padding: 4px 10px; color: var(--sehrleise); white-space: nowrap; } .statusband span.an { background: var(--akzent); color: var(--akzent-text); font-weight: 700; } .statusband span.fertig { color: var(--akzent); }
.bildvorschau img { width: 100%; border-radius: 8px; display: block; }

/* Chat */
.chat { display: grid; grid-template-columns: 270px minmax(0, 1fr); height: calc(100vh - 58px - 44px); min-height: 420px; }
.chat .kanaele { border-right: 1px solid var(--linie); overflow-y: auto; padding: 8px; background: var(--fl); border-radius: var(--r2) 0 0 var(--r2); }
.chat .kanaele a { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--text); font-size: 14px; min-height: 40px; } .chat .kanaele a:hover { background: var(--fl2); } .chat .kanaele a.an { background: var(--akzent-fl); color: var(--akzent); font-weight: 650; }
.chat .kanaele .ungelesen { margin-left: auto; background: var(--akzent); color: var(--akzent-text); font-size: 11px; font-weight: 700; border-radius: 999px; padding: 0 7px; }
.chat .verlauf { display: flex; flex-direction: column; min-height: 0; background: var(--fl); border-radius: 0 var(--r2) var(--r2) 0; }
.chat .vkopf { padding: 12px 16px; border-bottom: 1px solid var(--linie); display: flex; gap: 10px; align-items: center; }
.chat .nachrichten { flex: 1; overflow-y: auto; padding: 12px 16px; }
.nachricht { display: flex; gap: 10px; padding: 4px 0; } .nachricht .nk { font-size: 13px; } .nachricht .nk b { margin-right: 6px; } .nachricht .nk time { color: var(--sehrleise); font-size: 12px; }
.nachricht .ntext { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.5; } .nachricht.folge { padding-top: 0; } .nachricht.folge .avatar { visibility: hidden; height: 0; }
.nachricht.ich .ntext { } .nachricht .geloescht { color: var(--sehrleise); font-style: italic; } .erwaehnung { background: var(--akzent-fl); color: var(--akzent); border-radius: 4px; padding: 0 3px; font-weight: 650; }
.nachricht:hover .naktion { visibility: visible; } .naktion { visibility: hidden; margin-left: auto; display: flex; gap: 2px; }
.tagestrenner { text-align: center; font-size: 12px; color: var(--sehrleise); margin: 12px 0 6px; display: flex; align-items: center; gap: 10px; } .tagestrenner::before, .tagestrenner::after { content: ''; flex: 1; height: 1px; background: var(--linie); }
.chat .eingabe { border-top: 1px solid var(--linie); padding: 10px 12px; display: flex; gap: 8px; align-items: flex-end; } .chat .eingabe textarea { min-height: 42px; max-height: 180px; resize: none; }
.schutzband { font-size: 11.5px; color: var(--sehrleise); padding: 0 16px 8px; display: flex; gap: 6px; align-items: center; }

/* Wissen */
.wissenstext { max-width: 820px; font-size: 15.5px; line-height: 1.65; } .wissenstext h2 { margin: 24px 0 8px; font-size: 18px; } .wissenstext h3 { margin: 18px 0 6px; } .wissenstext ul, .wissenstext ol { padding-left: 22px; } .wissenstext li { margin-bottom: 5px; }
.vorlage { white-space: pre-wrap; font-family: var(--mono); font-size: 13px; background: var(--fl2); border: 1px solid var(--linie); border-radius: var(--r); padding: 14px; line-height: 1.55; }
.werkzeugkachel { padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: var(--text); } .werkzeugkachel:hover { border-color: var(--akzent); } .werkzeugkachel .wi { width: 36px; height: 36px; border-radius: 9px; background: var(--akzent-fl); color: var(--akzent); display: grid; place-items: center; flex: none; } .werkzeugkachel .wi svg { width: 18px; height: 18px; }
.linkliste a { display: flex; gap: 8px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--linie); text-decoration: none; color: var(--text); font-size: 14px; } .linkliste a:first-child { border-top: 0; } .linkliste a:hover b { color: var(--akzent); text-decoration: underline; } .linkliste a span { color: var(--leise); font-size: 13px; }

/* Mittelgroß */
@media (max-width: 1180px) { .editor { grid-template-columns: minmax(0, 1fr); } .seitenpanel { position: static; max-height: none; } .r4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .r-haupt { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 960px) {
  .rahmen { grid-template-columns: 1fr; }
  .seitenleiste { position: fixed; left: 0; top: 0; bottom: 0; width: 280px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--schatten2); padding-top: calc(14px + env(safe-area-inset-top)); }
  .rahmen.nav-offen .seitenleiste { transform: none; } .rahmen.nav-offen::after { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 25; }
  .kopfleiste .menue { display: inline-flex; } .r3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .iv-modus { grid-template-columns: minmax(0, 1fr); }
  .chat { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 58px - 64px - 44px - env(safe-area-inset-bottom)); } .chat .kanaele { border-radius: var(--r2); } .chat .verlauf { border-radius: var(--r2); } .chat.mit-kanal .kanaele { display: none; } .chat:not(.mit-kanal) .verlauf { display: none; }
}
/* Handy */
@media (max-width: 700px) {
  body { font-size: 15.5px; }
  .kopfleiste { padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top)); gap: 8px; min-height: 54px; }
  .inhalt { padding: 14px 12px calc(84px + env(safe-area-inset-bottom)); }
  .r2, .r3, .r4 { grid-template-columns: minmax(0, 1fr); } .raster { gap: 12px; }
  h1 { font-size: 20px; } .begruessung { font-size: 21px; }
  .unterleiste { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--fl); border-top: 1px solid var(--linie); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  .unterleiste a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; font-size: 11px; color: var(--leise); text-decoration: none; border-radius: 8px; min-height: 52px; position: relative; justify-content: center; }
  .unterleiste a.an { color: var(--akzent); } .unterleiste svg { width: 22px; height: 22px; } .unterleiste .zaehler { position: absolute; top: 2px; left: 55%; background: var(--rot); color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 0 5px; }
  .unterleiste a.aufnahme svg { color: var(--rot); }
  .karte > .kk { padding: 12px 14px 8px; } .karte > .ki { padding: 0 14px 14px; } .liste > .eintrag { padding: 11px 14px; }
  .schreibflaeche { padding: 16px 14px; border-radius: var(--r); } .schreibflaeche textarea.titel { font-size: 24px; } .schreibflaeche textarea.text { font-size: 17px; min-height: 50vh; }
  .werkzeugleiste { top: 54px; overflow-x: auto; flex-wrap: nowrap; }
  .aufnahmeleiste { top: 60px; padding: 10px 12px; gap: 10px; } .aufnahmeknopf { width: 56px; height: 56px; } .uhr { font-size: 22px; } .pegel { width: 70px; }
  .abschrift { max-height: none; } .frage .ftext { font-size: 16px; }
  .dialog { max-height: calc(100vh - 20px); } .schleier { padding: 10px; align-items: end; } .dialog { border-radius: var(--r2) var(--r2) 0 0; }
  .toasts { left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); }
  .seitenkopf { margin-bottom: 12px; } .suchfeld input { font-size: 16px; }
  .verteilung .name { width: 92px; }
  .tabelle { font-size: 13px; }
  input, select, textarea { font-size: 16px !important; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print {
  .seitenleiste, .kopfleiste, .unterleiste, .seitenpanel, .werkzeugleiste, .editorkopf, .knopf { display: none !important; }
  .rahmen { display: block; } body { background: #fff; color: #000; } .schreibflaeche { border: 0; box-shadow: none; }
}
/* Symbole: Standardgröße, Kontexte überschreiben */
.ic { width: 18px; height: 18px; flex: none; vertical-align: middle; }
.schutzhinweis .ic { width: 18px; height: 18px; margin-top: 2px; }
.eintrag > .ic { margin-top: 2px; color: var(--leise); }
.suchfeld input[type=search] { padding-left: 36px; }
.suchkopf select { width: auto; min-width: 140px; }
.suchkopf input[type=search] { width: auto; }
@media (max-width: 700px) { .raster.r4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kennzahl { padding: 10px 12px; } .kennzahl .wert { font-size: 22px; } .suchkopf select { flex: 1; } }
/* Auswahlfelder/Eingaben in Zeilen nicht auf volle Breite ziehen */
.zeile > select, .zeile > input[type=text], .zeile > input[type=search], .zeile > input[type=url] { width: auto; min-width: 150px; }
.seitenpanel .reiter { flex-wrap: wrap; overflow: visible; }
.seitenpanel .reiter button { padding: 9px 10px; min-height: 38px; }
.frage > .stapel { display: flex; gap: 6px; align-items: center; } .frage > .stapel > * + * { margin-top: 0; }
@media (max-width: 700px) { .zeile > select, .zeile > input[type=text], .zeile > input[type=search] { flex: 1; min-width: 0; } .editor .zeile > input[type=text] { max-width: none !important; } }
.chat { height: calc(100vh - 190px); height: calc(100dvh - 190px); }
@media (max-width: 960px) { .chat { height: calc(100vh - 200px); height: calc(100dvh - 200px); } }
@media (max-width: 700px) { .chatkopf { display: none; } .chat { height: calc(100vh - 160px - env(safe-area-inset-bottom)); height: calc(100dvh - 160px - env(safe-area-inset-bottom)); } }
/* Handy: Menü steckt unten unter „Mehr“ – oben kein zweiter Menüknopf */
@media (max-width: 700px) { .kopfleiste .menue { display: none; } }
.syncchip { border: 0; cursor: pointer; font-size: 12.5px; padding: 5px 10px; }
@media (max-width: 700px) { .syncchip { font-size: 11px; padding: 4px 8px; } }
.sprecher { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 4px; padding: 0 5px; margin-right: 6px; }
.sprecher.ich { background: var(--fl3); color: var(--leise); } .sprecher.gast { background: var(--akzent-fl); color: var(--akzent); }
.fortschritt { height: 6px; background: var(--fl3); border-radius: 999px; overflow: hidden; margin-top: 6px; } .fortschritt i { display: block; height: 100%; background: var(--akzent); width: 0; transition: width .2s; }
.aufnahmeleiste .chip { white-space: normal; }
@media (max-width: 960px) { .iv-modus.fertig > :last-child { order: -1; } }