/* Kanzlei – Aufträge und Prüfung. Arbeitswerkzeug: dichte Tabellen am Arbeitsplatz, bedienbar am Handy.
   Farben: Kanzlei-Blau, Status ohne Grün (blau = in Ordnung, Bernstein = Hinweis, Rot = Fehler, Schiefer = ausgelassen). */
:root {
  --grund: #f3f6fb; --flaeche: #ffffff; --flaeche2: #eef2f8; --linie: #d6dde8; --linie2: #e6ebf2;
  --text: #15233a; --leise: #5b6b83; --blau: #1f5fbf; --blau-dunkel: #173a6b; --blau-hell: #e3edfb; --auf-blau: #ffffff;
  --ok: #1f5fbf; --ok-hell: #e3edfb; --hinweis: #a35a00; --hinweis-hell: #fdf0dc; --fehler: #b42318; --fehler-hell: #fde7e5;
  --offen: #7a4bb3; --offen-hell: #f1e9fb; --aus: #66758c; --aus-hell: #eef1f5;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --kopf: #173a6b; --radius: 8px; --leiste-b: 210px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema=hell]) {
    --grund: #0e1522; --flaeche: #151f30; --flaeche2: #1b2639; --linie: #2b3850; --linie2: #232f44;
    --text: #e3e9f3; --leise: #9aa9c0; --blau: #6ea3f0; --blau-dunkel: #0b1a30; --blau-hell: #1b2c48; --auf-blau: #0e1522;
    --ok: #6ea3f0; --ok-hell: #1b2c48; --hinweis: #f0b35c; --hinweis-hell: #3a2c17; --fehler: #f08c80; --fehler-hell: #3c1d1a;
    --offen: #c4a2ef; --offen-hell: #2a2040; --aus: #9aa9c0; --aus-hell: #1f2a3c; --kopf: #0b1a30; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
body { background: var(--grund); color: var(--text); font: 15px/1.45 var(--schrift); overflow-x: clip; }
body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: var(--kopf); z-index: 60; }
#app { position: fixed; top: env(safe-area-inset-top, 0px); left: var(--leiste-b); right: 0; bottom: 0; overflow-y: auto; overscroll-behavior: contain; }
body.ohne-leiste #app { left: 0; }
main { max-width: 1320px; margin: 0 auto; padding: 22px 28px 60px; }
a { color: var(--blau); }
h1 { font-size: 1.45rem; margin: 0 0 4px; font-weight: 650; text-wrap: balance; }
h2 { font-size: 1.08rem; margin: 0 0 10px; font-weight: 650; }
h3 { font-size: .95rem; margin: 0 0 6px; font-weight: 650; }
p { margin: 0 0 8px; }
.leise { color: var(--leise); }
.klein { font-size: .85rem; }
.mono { font-family: var(--mono); }
.zahl { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.leer { color: var(--leise); padding: 24px 0; }

/* Leiste: am Arbeitsplatz links, am Handy unten */
.leiste { position: fixed; z-index: 50; top: env(safe-area-inset-top, 0px); bottom: 0; left: 0; width: var(--leiste-b);
  background: var(--kopf); display: flex; flex-direction: column; padding: 14px 10px; gap: 2px; }
.leiste a { display: flex; align-items: center; gap: 10px; color: #cfdcf1; text-decoration: none; padding: 9px 10px; border-radius: 7px; font-size: .95rem; }
.leiste a:hover { background: rgba(255,255,255,.07); color: #fff; }
.leiste a.an { background: rgba(255,255,255,.13); color: #fff; font-weight: 600; }
.leiste svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.leiste .marke { font-weight: 700; color: #fff; font-size: .98rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 12px; padding-left: 6px; }
.leiste .marke img { width: 28px; height: 28px; }
.leiste .marke:hover { background: none; }

.kopfzeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.kopfzeile .aktionen { display: flex; gap: 8px; flex-wrap: wrap; }
.zurueck { display: inline-block; font-size: .88rem; color: var(--leise); text-decoration: none; margin-bottom: 6px; }
.zurueck:hover { color: var(--blau); }

/* Flächen */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px 18px; }
.raster { display: grid; gap: 16px; }
.raster.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster > * { min-width: 0; }
.stapel { display: grid; gap: 16px; }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kennzahl { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 10px 14px; }
.kennzahl b { display: block; font-size: 1.45rem; font-variant-numeric: tabular-nums; font-weight: 650; }
.kennzahl span { font-size: .82rem; color: var(--leise); }
.kennzahl.warn b { color: var(--hinweis); } .kennzahl.rot b { color: var(--fehler); } .kennzahl.lila b { color: var(--offen); }

/* Knöpfe und Felder */
.knopf { font: inherit; font-weight: 550; border: 1px solid var(--blau); background: var(--blau); color: var(--auf-blau); border-radius: 7px; padding: 8px 14px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; touch-action: manipulation; }
.knopf:hover { filter: brightness(1.08); }
.knopf.zweit { background: var(--flaeche); color: var(--blau); }
.knopf.leicht { background: transparent; border-color: transparent; color: var(--blau); padding: 6px 8px; }
.knopf.gefahr { background: var(--flaeche); border-color: var(--fehler); color: var(--fehler); }
.knopf.klein { padding: 4px 9px; font-size: .85rem; }
.knopf:disabled { opacity: .5; cursor: default; filter: none; }
.knopf:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
label.feld { display: grid; gap: 4px; font-size: .86rem; color: var(--leise); }
input, select, textarea { font: inherit; font-size: 16px; color: var(--text); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 7px; padding: 8px 10px; min-width: 0; touch-action: manipulation; }
input[type=checkbox] { width: 18px; height: 18px; padding: 0; }
textarea { resize: vertical; min-height: 70px; }
.formular { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 16px; align-items: end; }
.formular .breit { grid-column: 1 / -1; }
.haken { display: flex; gap: 8px; align-items: center; font-size: .92rem; color: var(--text); }
.fehlertext { color: var(--fehler); font-size: .88rem; }
.erklaerung { font-size: .82rem; color: var(--leise); min-height: 1.1em; }
.erklaerung.rot { color: var(--fehler); }

/* Tabellen */
.tabelle-huelle { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--linie2); vertical-align: top; }
th { font-weight: 600; color: var(--leise); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; background: var(--flaeche2); position: sticky; top: 0; z-index: 1; }
tr:last-child td { border-bottom: 0; }
tr.klick { cursor: pointer; }
tr.klick:hover td { background: var(--flaeche2); }
td.text { max-width: 380px; overflow-wrap: anywhere; }

/* Status */
.pille { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.pille::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st-ok { color: var(--ok); background: var(--ok-hell); }
.st-hinweis { color: var(--hinweis); background: var(--hinweis-hell); }
.st-fehler { color: var(--fehler); background: var(--fehler-hell); }
.st-offen { color: var(--offen); background: var(--offen-hell); }
.st-ausgelassen, .st-ignoriert, .st-exportiert { color: var(--aus); background: var(--aus-hell); }
.st-bereit { color: var(--ok); background: var(--ok-hell); }
tr.z-fehler td:first-child { box-shadow: inset 3px 0 0 var(--fehler); }
tr.z-offen td:first-child { box-shadow: inset 3px 0 0 var(--offen); }
tr.z-hinweis td:first-child { box-shadow: inset 3px 0 0 var(--hinweis); }
tr.z-ausgelassen td, tr.z-ignoriert td { color: var(--aus); }
.meldungen { font-size: .8rem; color: var(--leise); margin-top: 2px; }

/* Reiter */
.reiter { display: flex; gap: 4px; border-bottom: 1px solid var(--linie); margin: 4px 0 14px; overflow-x: auto; }
.reiter button { font: inherit; background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; color: var(--leise); cursor: pointer; white-space: nowrap; }
.reiter button.an { color: var(--blau); border-bottom-color: var(--blau); font-weight: 600; }
.reiter .anz { font-size: .75rem; background: var(--flaeche2); border-radius: 99px; padding: 1px 7px; margin-left: 4px; }
.filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.filter input[type=search] { flex: 1 1 220px; }

/* Restliste: Liste links, Einzelmaske rechts */
.restliste { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.restliste .liste { max-height: calc(100vh - 260px); overflow-y: auto; }
.offen-zeile { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 12px; border-bottom: 1px solid var(--linie2); cursor: pointer; }
.offen-zeile:hover { background: var(--flaeche2); }
.offen-zeile.an { background: var(--blau-hell); box-shadow: inset 3px 0 0 var(--blau); }
.offen-zeile.erledigt { opacity: .45; }
.offen-zeile .wert { font-family: var(--mono); font-size: .88rem; overflow-wrap: anywhere; }
.offen-zeile .neben { font-size: .8rem; color: var(--leise); grid-column: 1 / -1; }
.maske { position: sticky; top: 12px; display: grid; gap: 12px; }
.ebene { display: inline-flex; border: 1px solid var(--linie); border-radius: 7px; overflow: hidden; }
.ebene button { font: inherit; font-size: .88rem; border: 0; background: var(--flaeche); color: var(--leise); padding: 6px 12px; cursor: pointer; }
.ebene button.an { background: var(--blau); color: var(--auf-blau); }
.beispiele { font-size: .82rem; color: var(--leise); display: grid; gap: 2px; }
.schnell { display: flex; gap: 6px; flex-wrap: wrap; }

/* Zeilen-Liste allgemein */
.zeilenliste { display: grid; }
.zeilenliste a, .zeilenliste .z { display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--linie2); text-decoration: none; color: inherit; align-items: center; }
.zeilenliste a:hover { color: var(--blau); }
.zeilenliste a:last-child { border-bottom: 0; }

/* Anmeldung */
.anmelden { max-width: 420px; margin: 8vh auto 40px; }
.anmelden .karte { display: grid; gap: 14px; padding: 24px; }
.anmelden .logo { display: flex; gap: 10px; align-items: center; font-weight: 700; font-size: 1.2rem; }
.anmelden .logo img { width: 36px; height: 36px; }
.qr { background: #fff; padding: 10px; border-radius: 8px; width: max-content; max-width: 100%; }
.qr svg { display: block; width: 220px; height: 220px; max-width: 100%; }
.geheim { font-family: var(--mono); font-size: .85rem; overflow-wrap: anywhere; background: var(--flaeche2); padding: 6px 8px; border-radius: 6px; }
.startpw { font-family: var(--mono); font-size: 1.1rem; background: var(--hinweis-hell); color: var(--text); padding: 8px 12px; border-radius: 6px; user-select: all; }

/* Ablage für Dateien */
.ablage { border: 1.5px dashed var(--blau); border-radius: var(--radius); padding: 22px; text-align: center; cursor: pointer; background: var(--flaeche); position: relative; }
.ablage.ueber { background: var(--blau-hell); }
.ablage input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.melder { position: fixed; z-index: 80; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); background: var(--text); color: var(--flaeche); padding: 10px 16px; border-radius: 8px; font-size: .92rem; max-width: calc(100vw - 32px); box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.melder.rot { background: var(--fehler); color: #fff; }
.melder button { font: inherit; color: inherit; background: none; border: 1px solid currentColor; border-radius: 6px; margin-left: 10px; padding: 2px 8px; cursor: pointer; }

.anleitung section { margin-bottom: 18px; }
.anleitung li { margin-bottom: 4px; }
.feldtabelle td { vertical-align: middle; }
.feldtabelle input { width: 100%; }
.drehen { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--linie); border-top-color: var(--blau); border-radius: 50%; animation: d 0.8s linear infinite; vertical-align: -3px; }
@keyframes d { to { transform: rotate(360deg); } }

@media (max-width: 1000px) {
  .restliste { grid-template-columns: 1fr; }
  .restliste .liste { max-height: none; }
  .maske { position: static; }
  .raster.drei { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  :root { --leiste-b: 0px; }
  #app { left: 0; bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  .leiste { top: auto; width: auto; right: 0; flex-direction: row; justify-content: space-around; padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); }
  .leiste .marke { display: none; }
  .leiste a { flex-direction: column; gap: 2px; font-size: .68rem; padding: 6px 4px; flex: 1; text-align: center; }
  main { padding: 16px 16px 40px; }
  .raster.zwei, .raster.drei { grid-template-columns: 1fr; }
  td.text { max-width: 220px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
[hidden] { display: none !important; }
.abstand { margin-top: 18px; }
.maske .ebene, .maske .schnell { justify-self: start; }
input:disabled { background: var(--flaeche2); color: var(--leise); border-style: dashed; }

/* Konto + Steuerfall */
.kontofeld { display: grid; gap: 8px; position: relative; }
.k-name { min-height: 1.2em; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.k-liste { position: absolute; z-index: 30; top: 66px; left: 0; right: 0; max-height: 300px; overflow-y: auto; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 7px; box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.k-liste button { display: block; width: 100%; text-align: left; font: inherit; font-size: .9rem; border: 0; background: none; color: var(--text); padding: 7px 10px; cursor: pointer; }
.k-liste button.an, .k-liste button:hover { background: var(--blau-hell); }
.k-erweitert summary { cursor: pointer; color: var(--leise); }
.k-erweitert[open] { display: grid; gap: 6px; }
.k-fall:disabled { opacity: .85; }
.warnung { border-color: var(--hinweis); background: var(--hinweis-hell); margin-bottom: 12px; }
input.kurz { width: 5.5em; }
.aktionen-zelle { white-space: nowrap; }
.meldungen.warn { color: var(--hinweis); font-weight: 600; }

/* ---------- 103 Kanzlei ---------- */
:root { --frei: #0b5f8a; --frei-hell: #dcecf6; }
@media (prefers-color-scheme: dark) { :root:not([data-thema=hell]) { --frei: #7cc4ec; --frei-hell: #16303f; } }
.s-offen { color: var(--aus); background: var(--aus-hell); }
.s-arbeit { color: var(--ok); background: var(--ok-hell); }
.s-pruefung { color: var(--offen); background: var(--offen-hell); }
.s-rueckfrage { color: var(--hinweis); background: var(--hinweis-hell); }
.s-frei { color: var(--frei); background: var(--frei-hell); }
.s-fertig { color: var(--aus); background: transparent; border: 1px solid var(--linie); }
.zaehler { margin-left: auto; background: #fff; color: var(--kopf); border-radius: 99px; font-size: .75rem; padding: 1px 7px; font-weight: 700; }
a.kennzahl { text-decoration: none; color: inherit; }
a.kennzahl:hover { border-color: var(--blau); }
.zeilenliste .rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.frist { font-size: .8rem; color: var(--leise); white-space: nowrap; }
.frist.warn { color: var(--hinweis); font-weight: 600; }
.frist.rot { color: var(--fehler); font-weight: 600; }
.knopf.warn { background: var(--flaeche); border-color: var(--hinweis); color: var(--hinweis); }
.knopfreihe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.zeile-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.zeile-kopf h3 { margin: 0; }

/* Liste links, Auftrag rechts */
.zweiteilig { display: grid; grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.4fr); gap: 16px; align-items: start; }
.liste-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); position: sticky; top: 12px; display: flex; flex-direction: column; max-height: calc(100vh - 200px); }
.al-liste { overflow-y: auto; min-height: 120px; }
.al-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--linie2); cursor: pointer; }
.al-zeile:not(:has(.al-haken)) { grid-template-columns: minmax(0, 1fr) auto; }
.al-zeile:hover { background: var(--flaeche2); }
.al-zeile.an { background: var(--blau-hell); box-shadow: inset 3px 0 0 var(--blau); }
.al-text { display: flex; flex-direction: column; min-width: 0; }
.al-text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.al-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.alle-haken { padding: 8px 12px; border-bottom: 1px solid var(--linie2); font-size: .85rem; color: var(--leise); }
.auswahlleiste { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px 12px; border-top: 1px solid var(--linie); background: var(--blau-hell); border-radius: 0 0 var(--radius) var(--radius); }
.detail { display: grid; gap: 12px; min-width: 0; }
.leer-detail { text-align: center; padding: 40px 18px; }
.d-titel h2 { margin: 0 0 4px; font-size: 1.25rem; }
.d-titel h2 a { color: inherit; text-decoration: none; }
.d-titel h2 a:hover { color: var(--blau); }
.d-unter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-weight: 550; }
.schritt { display: grid; gap: 10px; }
.schritt textarea { min-height: 60px; }
.notiz { width: 100%; min-height: 220px; font-family: var(--schrift); line-height: 1.5; resize: vertical; }
textarea[readonly] { background: var(--flaeche2); }
#d-merker { width: 100%; }
.merker-vorjahr { border-color: var(--hinweis); background: var(--hinweis-hell); }
.merker-vorjahr h3 { color: var(--hinweis); }
.v-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.verlauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.verlauf li { border-left: 3px solid var(--linie); padding: 2px 0 2px 10px; }
.verlauf li.v-pruefung { border-left-color: var(--offen); }
.verlauf li.v-rueckfrage { border-left-color: var(--hinweis); }
.verlauf li.v-frei { border-left-color: var(--frei); }
.verlauf li.v-anmerkung { border-left-color: var(--blau); }
.verlauf .v-kopf { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.verlauf .v-text { margin-top: 4px; }
.verwalten summary { cursor: pointer; }
.staende { display: grid; gap: 10px; margin-top: 8px; max-height: 420px; overflow-y: auto; }
.staende pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--schrift); font-size: .9rem; background: var(--flaeche2); padding: 8px; border-radius: 6px; margin: 4px 0 0; }
.nur-schmal { display: none; }
.mandanten-raster { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); align-items: start; }
.mandanten-raster input.m-name { width: 100%; }
tr.inaktiv td { opacity: .55; }
fieldset.arten { border: 1px solid var(--linie); border-radius: var(--radius); display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 12px; }
#f-mi textarea { width: 100%; font-family: var(--mono); }
@media (max-width: 1000px) {
  .zweiteilig { grid-template-columns: 1fr; }
  .zweiteilig.mit-detail .liste-karte { display: none; }
  .zweiteilig:not(.mit-detail) .detail { display: none; }
  .liste-karte { position: static; max-height: none; }
  .nur-schmal { display: inline-block; }
  .mandanten-raster { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .zaehler { position: absolute; margin: 0 0 0 18px; top: 2px; }
  .leiste a { position: relative; }
  .filter select { flex: 1 1 40%; }
}

/* ---------- Listen (0.3.0 neu gestaltet: Status-Knöpfe, Kürzel-Chips, Mehrfachauswahl, Tafel, Handy-Karten) ---------- */
:root {
  --s-offen: #8a97ab; --s-unterlagen: #4a8be6; --s-arbeit: #d48a1e; --s-fertig: #173a6b; --s-entfaellt: #c3ccd9;
  --l-uns: #1f5fbf; --l-extern: #7a4bb3; --l-selbst: #c27a00; --l-keine: #b8c2d1; --l-leer: #66758c; --stern: #e39a2a; --stern-rand: #c27a10;
  --ls-offen-bg: #eef1f5; --ls-offen-fg: #56647a; --ls-unterlagen-bg: #e3edfb; --ls-unterlagen-fg: #1a55ad;
  --ls-arbeit-bg: #fdf0dc; --ls-arbeit-fg: #8f4f00; --ls-fertig-bg: #173a6b; --ls-fertig-fg: #ffffff; --ls-entfaellt-bg: #f3f5f8; --ls-entfaellt-fg: #5b6b83;
  --z-wichtig: #fff9ef; --z-wichtig-rand: #e8b766; --zs-fertig: #f4f7fb; --z-markiert: #e3edfb; --schraffur: rgba(91,107,131,.10);
  --tag-fibu-bg: #e3edfb; --tag-fibu-fg: #1a55ad; --tag-lo-bg: #f1e9fb; --tag-lo-fg: #6a3aa5; --warn: #b26200;
}
@media (prefers-color-scheme: dark) { :root:not([data-thema=hell]) {
  --s-offen: #8a99b0; --s-unterlagen: #74abf2; --s-arbeit: #f0b35c; --s-fertig: #a9c8f5; --s-entfaellt: #3a475c;
  --l-uns: #6ea3f0; --l-extern: #c4a2ef; --l-selbst: #f0b35c; --l-keine: #3a475c; --l-leer: #8a99b0; --stern: #f0b35c; --stern-rand: #f0b35c;
  --ls-offen-bg: #1f2a3c; --ls-offen-fg: #b3c0d3; --ls-unterlagen-bg: #1b2c48; --ls-unterlagen-fg: #a9cbf7;
  --ls-arbeit-bg: #3a2c17; --ls-arbeit-fg: #f3c88a; --ls-fertig-bg: #a9c8f5; --ls-fertig-fg: #0e1522; --ls-entfaellt-bg: #1a2231; --ls-entfaellt-fg: #8a99b0;
  --z-wichtig: #2a2416; --z-wichtig-rand: #8a6a2c; --zs-fertig: #121b29; --z-markiert: #1b2c48; --schraffur: rgba(154,169,192,.10);
  --tag-fibu-bg: #1b2c48; --tag-fibu-fg: #a9cbf7; --tag-lo-bg: #2a2040; --tag-lo-fg: #d2b8f2; --warn: #f0b35c;
} }
.reiterleiste { display: flex; gap: 2px; border-bottom: 1px solid var(--linie); overflow-x: auto; scrollbar-width: thin; }
.reiterleiste button { font: inherit; font-size: .93rem; background: none; border: 1px solid transparent; border-bottom: 0; border-radius: 7px 7px 0 0; padding: 8px 13px; color: var(--leise); cursor: pointer; white-space: nowrap; margin-bottom: -1px; }
.reiterleiste button.an { background: var(--flaeche); border-color: var(--linie); color: var(--text); font-weight: 600; }
.reiterleiste .anz { font-family: var(--mono); font-size: .76rem; color: var(--leise); margin-left: 6px; }
.reiterleiste .art { font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--leise); margin-left: 6px; }
.reiterleiste .neu { color: var(--blau); }
.tafel { background: var(--flaeche); border: 1px solid var(--linie); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); padding: 14px 16px; display: grid; gap: 12px; min-width: 0; }
.lkopf { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.ltitel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.ltitel h1 { margin: 0; font-size: 1.3rem; }
.lansicht { display: flex; gap: 8px; align-items: center; }
.balken { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--flaeche2); }
.balken span { display: block; height: 100%; }
.balken.klein-balken { height: 6px; margin-bottom: 8px; }
.zahlen { display: flex; flex-wrap: wrap; gap: 8px; }
.zahlknopf { font: inherit; display: inline-flex; gap: 8px; align-items: center; border: 1.5px solid var(--linie); background: var(--flaeche); color: var(--text); border-radius: 10px; padding: 6px 12px; cursor: pointer; touch-action: manipulation; }
.zahlknopf:hover { border-color: var(--blau); }
.zahlknopf i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.zahlknopf b { font-size: 1.1rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.zahlknopf span { font-size: .86rem; color: var(--leise); }
.zahlknopf.an { border-color: var(--blau); background: var(--blau-hell); }
.summe { font-size: .88rem; color: var(--leise); } .summe b { color: var(--text); font-family: var(--mono); font-weight: 600; }
.werkzeug { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.werkzeug input[type=search] { flex: 1 1 240px; max-width: 420px; }
.schnell { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: inherit; font-size: .86rem; font-weight: 550; display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--linie); background: var(--flaeche); color: var(--text); border-radius: 99px; padding: 5px 12px; cursor: pointer; touch-action: manipulation; white-space: nowrap; }
.chip .n { font-size: .78rem; color: var(--leise); font-variant-numeric: tabular-nums; }
.chip:hover { border-color: var(--blau); }
.chip.an { border-color: var(--blau); background: var(--blau-hell); color: var(--blau); }
.chip.warn .n { color: var(--warn); font-weight: 700; }
.segment { display: inline-flex; border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; flex-wrap: wrap; }
.segment button { font: inherit; font-size: .86rem; border: 0; border-right: 1px solid var(--linie); background: var(--flaeche); color: var(--text); padding: 6px 11px; cursor: pointer; touch-action: manipulation; }
.segment button:last-child { border-right: 0; }
.segment button.an { background: var(--blau); color: var(--auf-blau); font-weight: 600; }
.segment .n { opacity: .7; margin-left: 4px; font-size: .8rem; }
.arbeitsflaeche { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.arbeitsflaeche.offen { grid-template-columns: minmax(0, 1fr) 360px; }
.liste-huelle { max-height: calc(100vh - 360px); min-height: 260px; overflow: auto; border: 1px solid var(--linie); border-radius: 12px; }
.liste-huelle table { font-size: .9rem; min-width: 900px; }
.liste-huelle thead th { position: sticky; top: 0; z-index: 2; background: var(--flaeche2); color: var(--leise); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 650; text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--linie); white-space: nowrap; }
.liste-huelle th[data-sort] { cursor: pointer; user-select: none; }
.liste-huelle th[aria-sort]::after { content: " ▾"; } .liste-huelle th[aria-sort=ascending]::after { content: " ▴"; }
.liste-huelle th.rechts, .liste-huelle td.rechts { text-align: right; }
.liste-huelle th.mitte, .liste-huelle td.mitte { text-align: center; }
.liste-huelle td { vertical-align: middle; padding: 4px 8px; border-bottom: 1px solid var(--linie2); background: var(--flaeche); }
.tafel.bequem .liste-huelle td { padding: 9px 8px; }
.liste-huelle tbody tr { scroll-margin-top: 40px; }
.liste-huelle tbody tr:hover td { box-shadow: inset 0 0 0 9999px rgba(31,95,191,.04); }
.liste-huelle tbody tr:focus { outline: none; }
.liste-huelle tbody tr:focus-visible td { outline: 2px solid var(--blau); outline-offset: -2px; }
.liste-huelle th.hz, .liste-huelle td.hz { width: 36px; padding-left: 12px; padding-right: 4px; }
/* Zeilen-Tönung: wichtig warm, fertig ruhig, entfällt schraffiert, markiert blau */
tr.z-wichtig td { background: var(--z-wichtig); }
tr.zs-fertig td { background: var(--zs-fertig); color: var(--leise); }
tr.zs-entfaellt td { background-color: var(--flaeche); background-image: repeating-linear-gradient(135deg, var(--schraffur) 0 6px, transparent 6px 12px); color: var(--leise); }
tr.zs-entfaellt .nameknopf { text-decoration: line-through; color: var(--leise); }
tr.z-markiert td { background: var(--z-markiert); background-image: none; }
tr.an td { box-shadow: inset 0 1px 0 var(--blau), inset 0 -1px 0 var(--blau); }
tr.an td:first-child { box-shadow: inset 3px 0 0 var(--blau), inset 0 1px 0 var(--blau), inset 0 -1px 0 var(--blau); }
td.name { min-width: 200px; }
.nameknopf { font: inherit; font-weight: 600; color: var(--text); background: none; border: 0; padding: 2px 0; cursor: pointer; text-align: left; }
.nameknopf:hover { color: var(--blau); text-decoration: underline; }
.auftragmarke { margin-left: 8px; text-decoration: none; vertical-align: middle; }
.auftragmarke .pille { font-size: .7rem; padding: 1px 7px; }
/* Häkchen für die Mehrfachauswahl */
.lhaken { width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid #b7c3d6; background: var(--flaeche); cursor: pointer; padding: 0; display: inline-grid; place-items: center; vertical-align: middle; }
.lhaken[aria-pressed=true] { background: var(--blau); border-color: var(--blau); }
.lhaken[aria-pressed=true]::after { content: ""; width: 10px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.lhaken[aria-pressed=mixed] { background: var(--blau); border-color: var(--blau); }
.lhaken[aria-pressed=mixed]::after { content: ""; width: 10px; height: 2px; background: #fff; }
/* Status als Knopf (Pille) */
.spille { font: inherit; font-size: .84rem; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; border: 1px solid transparent; border-radius: 99px; padding: 4px 10px 4px 9px; cursor: pointer; white-space: nowrap; min-width: 128px; touch-action: manipulation; }
.spille.still { min-width: 0; cursor: default; font-size: .76rem; padding: 2px 9px; }
.spille i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.spille .pfeil { width: 10px; height: 10px; margin-left: auto; opacity: .6; fill: none; stroke: currentColor; stroke-width: 1.6; }
.spille:hover:not(:disabled):not(.still) { filter: brightness(.96); border-color: currentColor; }
.spille:disabled { cursor: default; }
.ls-offen { --bg: var(--ls-offen-bg); --fg: var(--ls-offen-fg); --dot: var(--s-offen); }
.ls-unterlagen { --bg: var(--ls-unterlagen-bg); --fg: var(--ls-unterlagen-fg); --dot: var(--s-unterlagen); }
.ls-arbeit { --bg: var(--ls-arbeit-bg); --fg: var(--ls-arbeit-fg); --dot: var(--s-arbeit); }
.ls-fertig { --bg: var(--ls-fertig-bg); --fg: var(--ls-fertig-fg); --dot: var(--ls-fertig-fg); }
.ls-entfaellt { --bg: var(--ls-entfaellt-bg); --fg: var(--ls-entfaellt-fg); --dot: var(--s-entfaellt); }
.spille.ls-offen, .spille.ls-unterlagen, .spille.ls-arbeit, .spille.ls-fertig, .spille.ls-entfaellt { background-color: var(--bg); color: var(--fg); }
.spille.ls-entfaellt { background-image: repeating-linear-gradient(135deg, var(--schraffur) 0 6px, transparent 6px 12px); text-decoration: line-through; border-color: var(--linie); }
.spille i, .tspalte header i { background: var(--dot); }
/* Kürzel als runder Chip */
.kzchip { font: inherit; font-family: var(--mono); font-size: .8rem; font-weight: 700; min-width: 34px; height: 30px; padding: 0 8px; border-radius: 99px; border: 1.5px solid var(--linie); background: var(--flaeche); color: var(--text); cursor: pointer; display: inline-grid; place-items: center; touch-action: manipulation; }
.kzchip.leer { border-style: dashed; color: var(--leise); font-family: var(--schrift); font-weight: 500; }
.kzchip.ich { border-color: var(--blau); color: var(--blau); }
.kzchip.an { background: var(--blau); border-color: var(--blau); color: var(--auf-blau); }
.kzchip.still { cursor: default; height: 22px; min-width: 26px; font-size: .72rem; vertical-align: middle; }
.kzchip:hover:not(:disabled):not(.still) { border-color: var(--blau); }
.kzchip:disabled { cursor: default; opacity: .7; }
/* Stern */
.sternknopf { background: none; border: 1px solid transparent; border-radius: 8px; width: 34px; height: 32px; padding: 0; cursor: pointer; display: inline-grid; place-items: center; touch-action: manipulation; }
.sternknopf svg { width: 19px; height: 19px; fill: none; stroke: #b7c3d6; stroke-width: 1.5; stroke-linejoin: round; }
.sternknopf.an svg { fill: var(--stern); stroke: var(--stern-rand); }
.sternknopf:hover:not(:disabled) { border-color: var(--linie); }
.stern { color: var(--stern); font-weight: 700; }
/* Merkmale als An/Aus-Schalter */
.tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.tag { font: inherit; font-size: .74rem; font-weight: 650; border: 1px dashed var(--linie); background: transparent; color: var(--leise); border-radius: 6px; padding: 2px 7px; cursor: pointer; touch-action: manipulation; }
.tag.an { border-style: solid; }
.tag-fibu.an { background: var(--tag-fibu-bg); color: var(--tag-fibu-fg); border-color: var(--tag-fibu-bg); }
.tag-lexoffice.an { background: var(--tag-lo-bg); color: var(--tag-lo-fg); border-color: var(--tag-lo-bg); }
span.tag { cursor: default; }
td.liegt, span.liegt { font-size: .82rem; color: var(--leise); font-variant-numeric: tabular-nums; }
.liegt.warn { color: var(--warn); font-weight: 700; }
.warntext { color: var(--warn); font-weight: 600; }
/* Bearbeiten direkt in der Zeile */
select.inl, input.inl-text, input.inl-datum { font-size: 16px; padding: 3px 6px; border: 1px solid transparent; background: transparent; border-radius: 6px; color: inherit; }
select.inl:hover, input.inl-text:hover { border-color: var(--linie); }
select.inl:focus, input.inl-text:focus { border-color: var(--blau); background: var(--flaeche); outline: none; }
select.inl { max-width: 190px; cursor: pointer; }
input.inl-text { width: 100%; min-width: 120px; }
input.inl-text.zahlfeld { width: 64px; min-width: 0; text-align: right; font-variant-numeric: tabular-nums; }
input.inl-text::placeholder { color: var(--linie); }
.liste-huelle td.breit { min-width: 200px; }
.liste-huelle input[data-f=anbieter] { min-width: 170px; }
.punkt { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: .85rem; }
.punkt i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.marke-k { font-size: .72rem; border: 1px solid var(--linie); border-radius: 99px; padding: 1px 8px; color: var(--leise); white-space: nowrap; }
.nowrap { white-space: nowrap; }
.tastenhilfe { margin: 0; }
/* Auswahlfenster */
.pop { position: fixed; z-index: 90; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; box-shadow: 0 10px 30px rgba(21,35,58,.2); padding: 6px; display: grid; gap: 2px; min-width: 250px; }
.popzeile { font: inherit; font-size: .9rem; display: flex; gap: 10px; align-items: center; text-align: left; border: 0; background: none; color: var(--text); padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.popzeile span { flex: 1; display: grid; } .popzeile small { color: var(--leise); font-size: .74rem; }
.popzeile i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.popzeile kbd, kbd { font-family: var(--mono); font-size: .7rem; border: 1px solid var(--linie); border-radius: 4px; padding: 0 5px; color: var(--leise); }
.popzeile:hover, .popzeile:focus { background: var(--flaeche2); outline: none; }
.popzeile.an { background: var(--blau-hell); font-weight: 650; }
.pop-kz { padding: 10px; min-width: 0; max-width: 320px; }
.pop-kz p { margin: 6px 0 0; }
.popchips { display: flex; flex-wrap: wrap; gap: 6px; }
.popchips .kzchip:focus { outline: 2px solid var(--blau); outline-offset: 2px; }
/* Sammelleiste unten */
.sammel { position: fixed; z-index: 80; left: calc(var(--leiste-b) + 16px); right: 16px; bottom: 16px; margin: 0 auto; max-width: 1100px; background: var(--kopf); color: #fff; border-radius: 14px; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.sammel .sm-gruppe { display: flex; flex-wrap: wrap; gap: 4px; }
.sammel .spille { min-width: 0; }
.sammel .knopf.zweit { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.35); }
.sammel .knopf.leicht { color: #dbe6f7; }
body.mit-sammel .tafel { padding-bottom: 80px; }
/* Tafel: Spalten je Status, Karten zum Ziehen */
.liste-huelle.als-tafel { border: 0; max-height: none; min-height: 0; overflow: visible; }
.tafelraster { display: grid; grid-template-columns: repeat(4, minmax(200px, 1fr)) minmax(160px, .7fr); gap: 12px; align-items: start; overflow-x: auto; }
.tspalte { background: var(--flaeche2); border: 1px solid var(--linie2); border-radius: 12px; padding: 8px; display: grid; gap: 8px; min-height: 200px; transition: background .15s; }
.tspalte.ziel { background: var(--blau-hell); border-color: var(--blau); border-style: dashed; }
.tspalte header { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-size: .9rem; }
.tspalte header i { width: 10px; height: 10px; border-radius: 50%; }
.tspalte header .n { margin-left: auto; color: var(--leise); font-variant-numeric: tabular-nums; font-size: .85rem; }
.tkarten { display: grid; gap: 8px; max-height: calc(100vh - 380px); overflow-y: auto; padding: 2px; }
.tleer { color: var(--leise); font-size: .84rem; text-align: center; padding: 20px 4px; border: 1.5px dashed var(--linie); border-radius: 10px; margin: 0; }
.tkarte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 8px 10px; display: grid; gap: 6px; cursor: grab; box-shadow: 0 1px 2px rgba(21,35,58,.06); }
.tkarte:active { cursor: grabbing; }
.tkarte.zieht { opacity: .45; }
.tkarte.z-wichtig { background: var(--z-wichtig); border-color: var(--z-wichtig-rand); }
.tkarte.zs-fertig { background: var(--zs-fertig); }
.tkarte.zs-entfaellt { background-image: repeating-linear-gradient(135deg, var(--schraffur) 0 6px, transparent 6px 12px); }
.tkarte.zs-entfaellt .nameknopf { text-decoration: line-through; color: var(--leise); }
.tkarte.z-markiert { box-shadow: 0 0 0 2px var(--blau); }
.tkarte.an { border-color: var(--blau); }
.tk-kopf { display: flex; align-items: center; gap: 8px; } .tk-kopf .sternknopf { margin-left: auto; width: 28px; height: 26px; }
.tk-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tk-fuss .kzchip { height: 26px; min-width: 30px; }
.weiterknopf { font: inherit; font-size: .78rem; font-weight: 600; margin-left: auto; border: 1px solid var(--linie); background: var(--flaeche); color: var(--blau); border-radius: 99px; padding: 3px 10px; cursor: pointer; }
.weiterknopf:hover { border-color: var(--blau); background: var(--blau-hell); }
/* Handy: Karten mit großen Status-Knöpfen */
.liste-huelle.als-karten { border: 0; max-height: none; overflow: visible; display: grid; gap: 10px; }
.hkarte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 12px; display: grid; gap: 10px; }
.hkarte.z-wichtig { border-color: var(--z-wichtig-rand); background: var(--z-wichtig); }
.hkarte.zs-fertig { background: var(--zs-fertig); }
.hkarte.zs-entfaellt { background-image: repeating-linear-gradient(135deg, var(--schraffur) 0 6px, transparent 6px 12px); }
.hkarte.an { border-color: var(--blau); }
.hk-kopf { display: flex; align-items: flex-start; gap: 8px; } .hk-text { flex: 1; min-width: 0; }
.hk-kopf .nameknopf { font-size: 1.02rem; }
.hk-kopf .sternknopf { width: 44px; height: 44px; margin: -8px -8px 0 0; } .hk-kopf .sternknopf svg { width: 22px; height: 22px; }
.hk-status { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.hk-status button { font: inherit; font-size: .84rem; font-weight: 500; min-height: 44px; border: 1.5px solid var(--linie); background: var(--flaeche); color: var(--text); border-radius: 8px; padding: 0 4px; cursor: pointer; touch-action: manipulation; }
.hk-status button.an { background: var(--bg); color: var(--fg); border-color: var(--dot); font-weight: 700; }
/* Einzelmaske */
.lmaske { position: sticky; top: 0; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 14px 16px; display: grid; gap: 12px; max-height: calc(100vh - 140px); overflow: auto; }
.lmaske h2 { font-size: 1.1rem; margin: 0; line-height: 1.25; text-wrap: balance; padding-right: 28px; }
.lmaske .unter { font-size: .78rem; color: var(--leise); }
.lmaske .zu { position: absolute; right: 10px; top: 8px; font-size: 22px; line-height: 1; background: none; border: 0; color: var(--leise); cursor: pointer; padding: 4px; }
.lmaske .tag { font-size: .82rem; padding: 4px 9px; }
.schritte { display: grid; gap: 4px; }
.lschritt { font: inherit; display: flex; gap: 10px; align-items: center; text-align: left; border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); border-radius: 8px; padding: 7px 10px; cursor: pointer; font-size: .9rem; touch-action: manipulation; }
.lschritt > b { width: 11px; height: 11px; border-radius: 50%; border: 2px solid currentColor; flex: none; }
.lschritt.voll > b { background: currentColor; }
.lschritt small { margin-left: auto; color: var(--leise); font-size: .74rem; text-align: right; }
.lschritt kbd { font-size: .68rem; }
.lschritt.an { border-color: var(--blau); background: var(--blau-hell); font-weight: 600; }
.zweier { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lverlauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: .82rem; color: var(--leise); }
.lverlauf li { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.lverlauf time { font-family: var(--mono); font-size: .74rem; white-space: nowrap; }
.dialog { background: var(--flaeche); border: 1px solid var(--blau); border-radius: var(--radius); padding: 16px; display: grid; gap: 12px; max-width: 640px; }
.vorschau td, .vorschau th { font-size: .82rem; }
.hinweisband { background: var(--blau-hell); border-radius: 7px; padding: 8px 12px; font-size: .88rem; }
.treffer { display: grid; border: 1px solid var(--linie); border-radius: 7px; max-height: 240px; overflow: auto; }
.treffer button { font: inherit; text-align: left; border: 0; border-bottom: 1px solid var(--linie2); background: var(--flaeche); color: var(--text); padding: 7px 10px; cursor: pointer; }
.treffer button:disabled { color: var(--leise); cursor: default; }
.treffer button:hover:not(:disabled) { background: var(--flaeche2); }
.treffer-leer { padding: 8px 10px; }
.fuss { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; font-size: .84rem; color: var(--leise); }
.schmal { max-width: 320px; }
.f-s-offen { background: var(--s-offen); } .f-s-unterlagen { background: var(--s-unterlagen); } .f-s-arbeit { background: var(--s-arbeit); } .f-s-fertig { background: var(--s-fertig); } .f-s-entfaellt { background: var(--s-entfaellt); }
.f-l-leer { background: var(--l-leer); } .f-l-uns { background: var(--l-uns); } .f-l-extern { background: var(--l-extern); } .f-l-selbst { background: var(--l-selbst); } .f-l-keine { background: var(--l-keine); }
.t-s-offen { color: var(--s-offen); } .t-s-unterlagen { color: var(--s-unterlagen); } .t-s-arbeit { color: var(--s-arbeit); } .t-s-fertig { color: var(--s-fertig); } .t-s-entfaellt { color: var(--s-entfaellt); }
.t-l-leer { color: var(--l-leer); } .t-l-uns { color: var(--l-uns); } .t-l-extern { color: var(--l-extern); } .t-l-selbst { color: var(--l-selbst); } .t-l-keine { color: var(--l-keine); }
@media (max-width: 1100px) {
  .arbeitsflaeche.offen { grid-template-columns: minmax(0, 1fr); }
  .lmaske { position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-height: 80vh; z-index: 85; border-radius: 14px 14px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.2); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .tafelraster { grid-template-columns: repeat(5, minmax(210px, 1fr)); }
}
@media (max-width: 760px) {
  .tafel { padding: 12px; border-radius: 0 0 12px 12px; }
  .nur-breit { display: none !important; }
  .lmaske { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); max-height: 72vh; }
  .zahlen { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .zahlknopf { flex: none; padding: 6px 10px; }
  .schnell { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; }
  .chip { min-height: 36px; }
  .werkzeug input[type=search] { max-width: none; flex-basis: 100%; }
  .werkzeug select, .werkzeug .segment { flex: 1 1 auto; }
  .sammel { left: 8px; right: 8px; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Leiste: Suchen und Hinweise (0.3.0) ---------- */
.leiste-werkzeug { display: grid; gap: 2px; margin: -4px 0 10px; }
.lw-knopf { font: inherit; display: flex; align-items: center; gap: 10px; color: #cfdcf1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); padding: 7px 10px; border-radius: 7px; font-size: .9rem; cursor: pointer; text-decoration: none; position: relative; }
.lw-knopf:hover { background: rgba(255,255,255,.12); color: #fff; }
.lw-knopf kbd { margin-left: auto; color: #9fb3d3; border-color: rgba(255,255,255,.25); }
.leiste .lw-knopf { display: flex; }
#b-glocke { background: none; border-color: transparent; }
#b-glocke .zaehler { margin-left: auto; }
@media (max-width: 760px) { .leiste-werkzeug { display: none; } }
/* Suche über alles */
.gsuche { position: fixed; inset: 0; z-index: 120; background: rgba(14,21,34,.45); display: grid; justify-items: center; align-items: start; padding: 10vh 16px 16px; }
.gs-box { width: min(640px, 100%); background: var(--flaeche); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.3); overflow: hidden; display: grid; }
.gs-box input { font: inherit; font-size: 1.1rem; border: 0; border-bottom: 1px solid var(--linie); padding: 16px 18px; background: var(--flaeche); color: var(--text); outline: none; }
.gs-erg { max-height: 60vh; overflow-y: auto; padding: 8px; display: grid; }
.gs-erg h3 { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--leise); margin: 10px 8px 4px; }
.gs-erg a { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none; flex-wrap: wrap; }
.gs-erg a.an, .gs-erg a:hover { background: var(--blau-hell); }
.gs-erg p { padding: 8px 10px; margin: 0; }
/* Hinweise, Meine Woche, Akte, Checkliste */
.zeilenliste a.ungelesen { font-weight: 600; }
.neu-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--blau); display: inline-block; }
.zeilenliste .rechts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.woche .zeilenliste a { padding: 8px 2px; }
.merker-zeile { padding: 8px 0; border-bottom: 1px solid var(--linie2); } .merker-zeile:last-child { border-bottom: 0; }
.checkliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.checkliste li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--linie2); }
.checkliste li:last-child { border-bottom: 0; }
.checkliste li.an label { color: var(--leise); text-decoration: line-through; }
.knopf .zaehler { position: static; margin: 0; background: var(--blau); color: var(--auf-blau); }
.tags { flex-wrap: nowrap; }
.sammel .spille { border-color: rgba(255,255,255,.35); }
body.mit-sammel .melder { bottom: 96px; z-index: 95; }
.tafel > *, .lkopf > *, .arbeitsflaeche > * { min-width: 0; }
.tspalte.ls-fertig header i { background: var(--s-fertig); }
.lmaske .tags { flex-wrap: wrap; } .lmaske .tag { white-space: nowrap; }

/* ---------- 0.3.1: Spalten ziehen, Ablage-Leiste, Reiter und Maske ziehen ---------- */
.liste-huelle table.fest { table-layout: fixed; width: 100%; min-width: 0; }
table.fest td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.fest td.sp-name .nameknopf { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
table.fest td.sp-name { display: table-cell; }
table.fest .spille { min-width: 0; max-width: 100%; }
.liste-huelle thead th[data-sp] { position: sticky; cursor: grab; }
.liste-huelle thead th[data-sp]:active { cursor: grabbing; }
.liste-huelle thead th.zieht { opacity: .45; }
.liste-huelle thead th.ziel-links { box-shadow: inset 3px 0 0 var(--blau); }
.liste-huelle thead th.ziel-rechts { box-shadow: inset -3px 0 0 var(--blau); }
.grip { position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; z-index: 3; }
.grip::after { content: ""; position: absolute; left: 4px; top: 25%; height: 50%; border-left: 1px solid var(--linie); }
.grip:hover::after { border-left: 2px solid var(--blau); }
body.zieht-breite, body.zieht-breite * { cursor: col-resize !important; user-select: none !important; }
.zgriff { cursor: grab; padding: 3px 4px 3px 12px; margin-left: -8px; border-radius: 6px; position: relative; }
.zgriff::before { content: ""; position: absolute; left: 2px; top: 50%; width: 6px; height: 10px; transform: translateY(-50%); background: radial-gradient(circle, var(--leise) 1px, transparent 1.2px) 0 0 / 3px 3.4px; opacity: 0; }
tr:hover .zgriff::before { opacity: .7; }
.zgriff:hover { background: var(--flaeche2); }
tr.zieht td { opacity: .45; }
.ablage { position: fixed; z-index: 96; top: 12px; left: calc(var(--leiste-b) + 16px); right: 16px; margin: 0 auto; max-width: 1100px; background: var(--flaeche); border: 2px dashed var(--blau); border-radius: 14px; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; box-shadow: 0 10px 30px rgba(21,35,58,.2); }
.ablage .ab-titel { font-weight: 650; font-size: .9rem; width: 100%; }
.ablage .ab-gruppe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ablage .spille, .ablage .kzchip, .ablage .chip { cursor: copy; min-width: 0; padding-top: 7px; padding-bottom: 7px; height: auto; }
.ablage .kzchip { height: 34px; min-width: 38px; }
.ablage .ziel { outline: 3px solid var(--blau); outline-offset: 2px; transform: scale(1.06); }
.ablage .spille *, .ablage .kzchip *, .ablage .chip * { pointer-events: none; }
.reiterleiste button.zieht { opacity: .45; }
.reiterleiste button.ziel-links { box-shadow: inset 3px 0 0 var(--blau); }
.reiterleiste button.ziel-rechts { box-shadow: inset -3px 0 0 var(--blau); }
.mgriff { position: absolute; left: -2px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 2; }
.mgriff:hover { background: linear-gradient(90deg, transparent 2px, var(--blau) 2px, var(--blau) 4px, transparent 4px); }
.pop-spalten { padding: 10px; min-width: 240px; gap: 0; }
.pop-spalten p { margin: 0 0 6px; max-width: 240px; }
.pop-spalten .popzeile { padding: 5px 6px; }
.pop-spalten .knopf { margin-top: 6px; justify-self: start; }
@media (max-width: 1100px) { .mgriff { display: none; } }
/* 0.3.2: volle Breite für lange Listen, Zeilen im Wechsel getönt */
main.voll { max-width: none; }
main.voll .liste-huelle { max-height: calc(100vh - 330px); }
:root { --zebra: rgba(31,95,191,.06); }
@media (prefers-color-scheme: dark) { :root:not([data-thema=hell]) { --zebra: rgba(169,200,245,.06); } }
/* 0.4.2: Wechsel immer gleichmäßig – jede zweite Zeile bekommt einen leichten Schleier über ihrer eigenen Farbe
   (auch wichtige, fertige und entfallene), fertige Zeilen nur noch an grauer Schrift erkennbar */
tr.zs-fertig td { background-color: var(--flaeche); }
.liste-huelle tbody tr.z2 td { background-image: linear-gradient(var(--zebra), var(--zebra)); }
.liste-huelle tbody tr.zs-entfaellt.z2 td { background-image: repeating-linear-gradient(135deg, var(--schraffur) 0 6px, transparent 6px 12px), linear-gradient(var(--zebra), var(--zebra)); }
.liste-huelle tbody tr.z-markiert td { background-color: var(--z-markiert); background-image: none; }
/* 0.4.3: persönliche Darstellung */
html.ohne-zebra .liste-huelle tbody tr.z2 td { background-image: none; }
html.ohne-zebra .liste-huelle tbody tr.zs-entfaellt.z2 td { background-image: repeating-linear-gradient(135deg, var(--schraffur) 0 6px, transparent 6px 12px); }
html.ohne-linien .liste-huelle td { border-bottom-color: transparent; }
html.ohne-hover .liste-huelle tbody tr:hover td { box-shadow: none; }
html.ohne-hover .liste-huelle tbody tr.an td { box-shadow: inset 0 1px 0 var(--blau), inset 0 -1px 0 var(--blau); }
html.schrift-klein .liste-huelle table { font-size: .8rem; }
html.schrift-gross .liste-huelle table { font-size: 1.04rem; }
html.schrift-gross .liste-huelle .spille, html.schrift-gross .liste-huelle .kzchip { font-size: .92rem; }
.farbwahl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.farbknopf { width: 40px; height: 40px; border-radius: 10px; border: 2px solid var(--linie); background: var(--flaeche); padding: 4px; cursor: pointer; display: inline-grid; place-items: center; }
.farbknopf i { display: block; width: 100%; height: 100%; border-radius: 6px; }
.farbknopf.an { border-color: var(--text); box-shadow: 0 0 0 2px var(--flaeche), 0 0 0 4px var(--blau); }
.farbknopf.eigen { width: auto; gap: 6px; display: inline-flex; padding: 4px 10px 4px 4px; font-size: .84rem; }
.farbknopf.eigen input { width: 30px; height: 30px; border: 0; padding: 0; background: none; cursor: pointer; }
.vorschau-liste { max-height: none; min-height: 0; padding: 0; border: 1px solid var(--linie); }
.vorschau-liste table { min-width: 0; }
.darstellung input[type=range] { width: 100%; max-width: 320px; }
.vorschau-liste.bequem td { padding: 9px 8px; }
.darstellung .feld { display: grid; gap: 6px; justify-items: start; }

/* 0.5.0: Thema fest wählbar (Mehr → Darstellung) – dunkel erzwingen */
:root[data-thema=dunkel] {
    --grund: #0e1522; --flaeche: #151f30; --flaeche2: #1b2639; --linie: #2b3850; --linie2: #232f44;
    --text: #e3e9f3; --leise: #9aa9c0; --blau: #6ea3f0; --blau-dunkel: #0b1a30; --blau-hell: #1b2c48; --auf-blau: #0e1522;
    --ok: #6ea3f0; --ok-hell: #1b2c48; --hinweis: #f0b35c; --hinweis-hell: #3a2c17; --fehler: #f08c80; --fehler-hell: #3c1d1a;
    --offen: #c4a2ef; --offen-hell: #2a2040; --aus: #9aa9c0; --aus-hell: #1f2a3c; --kopf: #0b1a30; color-scheme: dark;
  }
:root[data-thema=dunkel] { --frei: #7cc4ec; --frei-hell: #16303f; }
:root[data-thema=dunkel] {
  --s-offen: #8a99b0; --s-unterlagen: #74abf2; --s-arbeit: #f0b35c; --s-fertig: #a9c8f5; --s-entfaellt: #3a475c;
  --l-uns: #6ea3f0; --l-extern: #c4a2ef; --l-selbst: #f0b35c; --l-keine: #3a475c; --l-leer: #8a99b0; --stern: #f0b35c; --stern-rand: #f0b35c;
  --ls-offen-bg: #1f2a3c; --ls-offen-fg: #b3c0d3; --ls-unterlagen-bg: #1b2c48; --ls-unterlagen-fg: #a9cbf7;
  --ls-arbeit-bg: #3a2c17; --ls-arbeit-fg: #f3c88a; --ls-fertig-bg: #a9c8f5; --ls-fertig-fg: #0e1522; --ls-entfaellt-bg: #1a2231; --ls-entfaellt-fg: #8a99b0;
  --z-wichtig: #2a2416; --z-wichtig-rand: #8a6a2c; --zs-fertig: #121b29; --z-markiert: #1b2c48; --schraffur: rgba(154,169,192,.10);
  --tag-fibu-bg: #1b2c48; --tag-fibu-fg: #a9cbf7; --tag-lo-bg: #2a2040; --tag-lo-fg: #d2b8f2; --warn: #f0b35c;
}
:root[data-thema=dunkel] { --zebra: rgba(169,200,245,.06); }
:root[data-thema=dunkel] { color-scheme: dark; } :root[data-thema=hell] { color-scheme: light; }

/* ---------- 0.5.0 ---------- */
.tag.an { background: var(--flaeche2); color: var(--text); border-color: var(--linie); }
.ansichten { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ansicht-chip { display: inline-flex; align-items: center; border: 1.5px solid var(--linie); border-radius: 99px; overflow: hidden; background: var(--flaeche); }
.ansicht-chip button { font: inherit; font-size: .84rem; border: 0; background: none; color: var(--text); padding: 4px 10px; cursor: pointer; }
.ansicht-chip .weg { padding: 4px 8px; color: var(--leise); border-left: 1px solid var(--linie); }
.ansicht-chip.an { border-color: var(--blau); background: var(--blau-hell); }
.ansicht-chip.an button:first-child { color: var(--blau); font-weight: 650; }
tr.gkopf td { background: var(--flaeche2) !important; background-image: none !important; padding: 0 !important; position: sticky; top: 36px; z-index: 1; }
.gknopf { font: inherit; font-weight: 650; font-size: .88rem; width: 100%; text-align: left; border: 0; background: none; color: var(--text); padding: 7px 12px; cursor: pointer; }
.gknopf .n { font-weight: 500; color: var(--leise); margin-left: 6px; }
.gpfeil { display: inline-block; width: 14px; color: var(--leise); }
@keyframes jubel { 0% { transform: scale(1); } 35% { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(31,95,191,.18); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(31,95,191,0); } }
.spille.jubel { animation: jubel .6s ease-out; }
@media (prefers-reduced-motion: reduce) { .spille.jubel { animation: none; } }
.tagesplan a { text-decoration: none; } .tagesplan a:hover { text-decoration: underline; }
.frist-block h2 .n, .kennzahl .n { color: var(--leise); font-weight: 500; font-size: .9rem; }
.frist-block.rot { border-left: 4px solid var(--rot, #c0392b); } .frist-block.warn { border-left: 4px solid var(--s-arbeit); }
.f-a-offen { background: var(--aus); } .f-a-arbeit { background: var(--s-arbeit); } .f-a-pruefung { background: var(--offen); } .f-a-rueckfrage { background: var(--hinweis); } .f-a-frei { background: var(--frei); } .f-a-fertig { background: var(--s-fertig); }
.legende { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .84rem; color: var(--leise); margin-top: 8px; }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.saison-zeile { display: grid; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--linie2); color: var(--text); text-decoration: none; }
.saison-zeile:last-child { border-bottom: 0; }
a.saison-zeile:hover { background: var(--flaeche2); }
.monate { display: flex; gap: 8px; align-items: flex-end; height: 160px; overflow-x: auto; }
.monat { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; height: 100%; min-width: 34px; font-size: .8rem; }
.saeule { display: block; width: 22px; background: var(--blau); border-radius: 4px 4px 0 0; min-height: 2px; }
.pruefliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: p; }
.pruefliste li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(160px, 280px); gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--linie2); cursor: grab; }
.pruefliste li.zieht { opacity: .4; }
.pruefliste .zgriff { margin: 0; padding: 4px; color: var(--leise); }
.abw-zeile { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--linie2); }
.hinweis-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; margin: 10px 0; }
.gs-box.tasten { padding: 16px 18px; width: min(820px, 100%); }
.gs-box.tasten td { padding: 4px 8px 4px 0; font-size: .9rem; } .gs-box.tasten kbd { font-size: .78rem; }
.dv-liste { max-height: 200px; overflow: auto; margin: 6px 0; padding-left: 18px; }
.dialog.breit-dialog { max-width: 820px; }
table.kompakt input[type=text], table.kompakt input:not([type]) { width: 100%; min-width: 80px; }
.aktivitaet { max-height: 420px; overflow: auto; }
@media (max-width: 760px) { .pruefliste li { grid-template-columns: auto minmax(0, 1fr); } .pruefliste li > .klein, .pruefliste li > input { grid-column: 2; } }
/* Druckansicht: nur Inhalt, keine Leiste, keine Knöpfe */
@media print {
  .leiste, .reiterleiste, .werkzeug, .schnell, .ansichten, .fuss .werkzeug, .tastenhilfe, .sammel, .pop, .ablage, .lmaske, .lansicht, .melder, #gsuche, .knopf, .zurueck, .grip, .lhaken, .zgriff::before { display: none !important; }
  #app { position: static !important; overflow: visible !important; } body { background: #fff !important; }
  main, main.voll { max-width: none !important; padding: 0 !important; margin: 0 !important; }
  .tafel { border: 0 !important; padding: 0 !important; }
  .liste-huelle { max-height: none !important; overflow: visible !important; border: 0 !important; }
  .liste-huelle thead th { position: static !important; }
  tr.gkopf td { position: static !important; }
  .liste-huelle td, .liste-huelle th { padding: 3px 6px !important; }
  .karte { break-inside: avoid; box-shadow: none !important; }
  input.inl-text { border: 0 !important; } select.inl { appearance: none; border: 0 !important; }
}