:root {
  --bg: #f4f3ef;
  --flaeche: #ffffff;
  --flaeche-2: #f9f8f5;
  --linie: #e3e0d8;
  --text: #1e2529;
  --text-2: #5d666b;
  --primaer: #1f4e5f;
  --primaer-hell: #e3eef1;
  --primaer-text: #ffffff;
  --gefahr: #c0392b;
  --warnung: #d9534f;
  --wr: #7b4fb8;
  --schatten: 0 1px 2px rgba(30, 37, 41, .06), 0 2px 8px rgba(30, 37, 41, .04);
  --radius: 12px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14191c; --flaeche: #1d2428; --flaeche-2: #232b30; --linie: #313b41;
    --text: #e6eaec; --text-2: #9aa5ab; --primaer: #5fa8bf; --primaer-hell: #1f3540;
    --primaer-text: #0d1417; --wr: #a98ae0; --schatten: 0 1px 2px rgba(0,0,0,.3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #14191c; --flaeche: #1d2428; --flaeche-2: #232b30; --linie: #313b41;
  --text: #e6eaec; --text-2: #9aa5ab; --primaer: #5fa8bf; --primaer-hell: #1f3540;
  --primaer-text: #0d1417; --wr: #a98ae0; --schatten: 0 1px 2px rgba(0,0,0,.3);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--primaer); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; margin: .1rem 0; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: .25rem 0; line-height: 1.35; }
h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin: 1.2rem 0 .5rem; }
h3:first-child { margin-top: 0; }
s { color: var(--text-2); text-decoration-thickness: 1.5px; }
.leise { color: var(--text-2); }
.klein-text { font-size: .8rem; }
[hidden] { display: none !important; }

/* ---------- Kopfleiste ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  padding: .6rem 1.25rem; background: var(--flaeche); border-bottom: 1px solid var(--linie);
}
.marke { display: flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--text); }
.marke:hover { text-decoration: none; }
.marke-logo {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
  background: var(--primaer); color: var(--primaer-text); font-weight: 700; font-size: .8rem; letter-spacing: .03em;
}
.marke-logo.gross { width: 56px; height: 56px; font-size: 1.2rem; border-radius: 14px; }
.topbar nav { display: flex; gap: .25rem; flex: 1; flex-wrap: wrap; }
.topbar nav a { padding: .4rem .75rem; border-radius: 8px; color: var(--text-2); font-weight: 500; }
.topbar nav a:hover { background: var(--flaeche-2); text-decoration: none; color: var(--text); }
.topbar nav a.aktiv { background: var(--primaer-hell); color: var(--primaer); }
.topbar nav a.nav-wr { color: var(--wr); }
.nutzer { font-size: .85rem; color: var(--text-2); }

.inhalt { max-width: 1180px; margin: 0 auto; padding: 1.5rem 16px 4rem; }

/* ---------- Bausteine ---------- */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); }
.abschnitt { padding: 1.25rem; }
.btn {
  display: inline-flex; align-items: center; gap: .4rem; justify-content: center;
  padding: .55rem 1rem; border-radius: 9px; border: 1px solid var(--linie);
  background: var(--flaeche); color: var(--text); font: inherit; font-weight: 500; cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--flaeche-2); text-decoration: none; }
.btn.primaer { background: var(--primaer); border-color: var(--primaer); color: var(--primaer-text); }
.btn.primaer:hover { filter: brightness(1.1); }
.btn.gefahr { color: var(--gefahr); border-color: color-mix(in srgb, var(--gefahr) 40%, var(--linie)); }
.btn.gefahr:hover { background: color-mix(in srgb, var(--gefahr) 10%, var(--flaeche)); }
.btn.klein { padding: .3rem .65rem; font-size: .85rem; }
.btn.breit { width: 100%; }
.leise-btn { color: var(--text-2); }
.zaehler { background: var(--wr); color: #fff; border-radius: 99px; padding: 0 .5rem; font-size: .8rem; }

input, select, textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 9px; padding: .55rem .7rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--primaer) 50%, transparent); outline-offset: 0; border-color: var(--primaer); }
textarea { resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: auto; }
input[type="color"] { width: 48px; padding: 2px; height: 36px; }
label { display: block; font-size: .85rem; font-weight: 500; color: var(--text-2); margin-bottom: .8rem; }
label > input, label > select, label > textarea, label > .mit-knopf { margin-top: .3rem; }
label.inline { display: inline-flex; gap: .35rem; align-items: center; margin: 0; }

.hinweis { padding: .7rem 1rem; border-radius: 9px; margin-bottom: 1rem; font-weight: 500; }
.hinweis.fehler { background: color-mix(in srgb, var(--gefahr) 12%, var(--flaeche)); color: var(--gefahr); }
.hinweis.ok { background: color-mix(in srgb, #3a9d5d 14%, var(--flaeche)); color: #2d7a48; }

.badge {
  --c: #888;
  display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .55rem; border-radius: 99px;
  font-size: .75rem; font-weight: 600; color: var(--text);
  background: color-mix(in srgb, var(--c) 16%, var(--flaeche));
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.prio { font-size: .75rem; font-weight: 600; color: var(--text-2); }
.prio-1 { color: var(--warnung); }
.ueberfaellig { color: var(--warnung); font-weight: 600; }

/* ---------- Seitenkopf + Kennzahlen ---------- */
.kopfzeile { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.kopfzeile p { margin: 0; }
.aktionen { display: flex; gap: .5rem; flex-wrap: wrap; }

.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.kennzahl {
  --c: var(--warnung);
  display: flex; flex-direction: column; padding: .8rem 1rem; border-radius: var(--radius);
  background: var(--flaeche); border: 1px solid var(--linie); border-top: 3px solid var(--c); color: var(--text);
}
.kennzahl:hover { text-decoration: none; background: var(--flaeche-2); }
.kennzahl-wert { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.kennzahl-text { font-size: .8rem; color: var(--text-2); }

/* ---------- Filter ---------- */
.filter { padding: 1rem; margin-bottom: 1rem; display: grid; gap: .75rem; }
.filter-zeile { display: grid; grid-template-columns: repeat(5, 1fr) auto; gap: .5rem; }
.datum-filter { margin: 0; }
.datum-filter input { margin: 0; height: 100%; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { --c: var(--primaer); margin: 0; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border-radius: 99px;
  border: 1px solid var(--linie); font-size: .85rem; color: var(--text-2); background: var(--flaeche);
}
.chip span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); opacity: .35; }
.chip input:checked + span { background: color-mix(in srgb, var(--c) 15%, var(--flaeche)); border-color: var(--c); color: var(--text); font-weight: 600; }
.chip input:checked + span::before { opacity: 1; }
.chip input:focus-visible + span { outline: 2px solid var(--primaer); }
.chip-wr { --c: var(--wr); }
.chip.gross span { padding: .45rem .9rem; font-size: .9rem; }

/* ---------- Aufgabenliste ---------- */
.liste { display: grid; gap: .6rem; }
.aufgabe {
  --c: #999;
  position: relative; display: flex; gap: 1rem; padding: .9rem 1rem .9rem 1.2rem;
  border-left: 4px solid var(--c); transition: border-color .1s, box-shadow .1s;
}
.aufgabe:hover { box-shadow: 0 3px 14px rgba(30, 37, 41, .09); }
.aufgabe:target { outline: 2px solid var(--primaer); }
.aufgabe-haupt { flex: 1; min-width: 0; }
.aufgabe h2 a { color: var(--text); }
.streck::after { content: ""; position: absolute; inset: 0; }
.meta-oben, .meta-unten { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; font-size: .8rem; color: var(--text-2); }
.vermerk {
  margin: .3rem 0 .45rem; font-size: .88rem; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.schalter { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .35rem; }
.umschalter {
  font: inherit; font-size: .75rem; font-weight: 700; letter-spacing: .04em; cursor: pointer;
  width: 44px; padding: .3rem 0; border-radius: 8px; border: 1px dashed var(--linie);
  background: transparent; color: var(--text-2);
}
.umschalter:hover { border-color: var(--wr); color: var(--wr); }
.umschalter.an { background: var(--wr); border: 1px solid var(--wr); color: #fff; }
.schalter .umschalter[data-feld="ae"].an { background: var(--primaer); border-color: var(--primaer); color: var(--primaer-text); }
.leer { padding: 2.5rem; text-align: center; color: var(--text-2); }
.seiten { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1.5rem; }

/* ---------- Formular ---------- */
.spalten { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.raster-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.raster-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.mit-knopf { display: flex; gap: .4rem; }
.historie-kopf { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 500; color: var(--text-2); margin-bottom: .3rem; flex-wrap: wrap; }
.werkzeuge { display: flex; gap: .35rem; }
.historie-feld { font-size: .9rem; }
.historie-vorschau {
  margin-top: .6rem; padding: .8rem 1rem; border-radius: 9px; background: var(--flaeche-2);
  font-size: .9rem; max-height: 260px; overflow: auto;
}
.historie-vorschau:empty { display: none; }
.status-wahl { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.markierungen { display: flex; gap: .75rem; flex-wrap: wrap; }
.schalter-gross { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .5rem .8rem; border: 1px solid var(--linie); border-radius: 9px; cursor: pointer; }
.schalter-gross span { font-weight: 700; color: var(--text); }
.leiste-unten {
  position: sticky; bottom: 0; display: flex; gap: .5rem; align-items: center; margin-top: 1rem;
  padding: .8rem 0; background: var(--bg); border-top: 1px solid var(--linie);
}
.platz { flex: 1; }

/* ---------- Listen + Bilder ---------- */
.status-tabelle { display: grid; gap: .5rem; margin-bottom: 1rem; }
.status-zeile { display: grid; grid-template-columns: 40px 1fr 56px auto; gap: .6rem; align-items: center; }
.listen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: 1rem; }
.werte { list-style: none; margin: 0 0 .75rem; padding: 0; max-height: 320px; overflow: auto; }
.werte li { display: flex; justify-content: space-between; align-items: center; padding: .3rem 0; border-bottom: 1px solid var(--linie); font-size: .9rem; }
.werte form { margin: 0; }
.x { border: 0; background: none; color: var(--text-2); font-size: 1.1rem; cursor: pointer; padding: 0 .4rem; }
.x:hover { color: var(--gefahr); }
.hinzu { display: flex; gap: .4rem; }
.hochladen { display: grid; grid-template-columns: 1fr 1fr auto; gap: .6rem; align-items: center; margin-bottom: 1rem; }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.galerie figure { margin: 0; overflow: hidden; }
.galerie img { display: block; width: 100%; height: 220px; object-fit: cover; background: var(--flaeche-2); }
.galerie figcaption { padding: .6rem; }
.titel-form { display: flex; gap: .35rem; }

/* ---------- Login ---------- */
.login-seite .inhalt { min-height: 100vh; display: grid; place-items: center; }
.login-box { width: min(380px, 100%); padding: 2rem; text-align: center; }
.login-box label { text-align: left; }
.login-box h1 { font-size: 1.25rem; margin-top: 1rem; }

/* ---------- WR-Sitzung ---------- */
.sitzung .inhalt { max-width: 1100px; }
.sitzung-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; max-width: 1100px; margin: 0 auto; padding: 1.5rem 16px 0; }
.sitzung-kopf + .inhalt { padding-top: 1.25rem; }
.sitzung-kopf h1 { font-size: 2rem; }
.sitzung-kopf .datum { font-weight: 400; color: var(--text-2); font-size: 1.2rem; margin-left: .4rem; }
.sitzung-kopf p { margin: 0; }
.sitzung-liste { display: grid; gap: 1rem; }
.sitzung-karte { --c: #999; display: flex; gap: 1.1rem; padding: 1.25rem 1.4rem; border-left: 6px solid var(--c); }
.sitzung-karte.abgeschlossen { opacity: .72; }
.sitzung-karte:target { outline: 2px solid var(--primaer); }
.nummer {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--flaeche-2); border: 1px solid var(--linie); font-weight: 700; font-size: 1.05rem;
}
.sitzung-inhalt { flex: 1; min-width: 0; }
.sitzung-karte h2 { font-size: 1.4rem; margin: .4rem 0 .7rem; }
.eckdaten { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 0 0 .9rem; }
.eckdaten dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.eckdaten dd { margin: 0; font-weight: 600; }
.historie-block { background: var(--flaeche-2); border-radius: 10px; padding: .8rem 1rem; margin-bottom: .9rem; }
.historie-text { font-size: .95rem; max-height: 4.6em; overflow: hidden; position: relative; }
.historie-block.offen .historie-text { max-height: none; }
.historie-mehr { margin-top: .4rem; border: 0; background: none; color: var(--primaer); font: inherit; font-size: .85rem; cursor: pointer; padding: 0; }
.schnell textarea { font-size: .95rem; }
.schnell-leiste { display: flex; gap: .5rem; align-items: center; margin-top: .5rem; flex-wrap: wrap; }
.schnell-leiste select { width: auto; padding: .3rem .6rem; font-size: .85rem; }
.schnell .umschalter { width: auto; padding: .3rem .65rem; }
.gespeichert { color: #2d7a48; font-size: .85rem; font-weight: 600; }
.gross-text { font-size: 1.2rem; }

/* Präsentation: eine Karte, groß */
body.praesentation .sitzung-karte { display: none; }
body.praesentation .sitzung-karte.zeigen { display: flex; min-height: calc(100vh - 220px); }
body.praesentation .sitzung-karte h2 { font-size: 2.2rem; }
body.praesentation .historie-text { font-size: 1.15rem; max-height: 40vh; overflow: auto; }
body.praesentation .eckdaten dd { font-size: 1.2rem; }
.praesentation-steuerung {
  position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 20;
  display: flex; gap: .6rem; align-items: center; padding: .5rem .75rem; border-radius: 99px;
  background: var(--flaeche); border: 1px solid var(--linie); box-shadow: 0 6px 24px rgba(0,0,0,.15);
}

/* ---------- Mobil ---------- */
@media (max-width: 860px) {
  .spalten, .raster-3 { grid-template-columns: 1fr; }
  .filter-zeile { grid-template-columns: 1fr 1fr; }
  .hochladen { grid-template-columns: 1fr; }
  .topbar { gap: .4rem 1rem; padding: .5rem 16px; }
  .topbar nav { order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; margin: 0 -.5rem; }
  .nutzer { margin-left: auto; }
}
@media (max-width: 520px) {
  .marke span:not(.marke-logo) { display: none; }
  .kennzahlen { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .kennzahl { padding: .6rem .7rem; }
  .kennzahl-wert { font-size: 1.25rem; }
  .raster-2, .filter-zeile { grid-template-columns: 1fr; }
  .aufgabe { padding-left: .9rem; }
  .sitzung-karte { padding: 1rem; gap: .7rem; }
  .sitzung-kopf h1 { font-size: 1.5rem; }
  .sitzung-kopf .datum { display: block; margin: 0; font-size: 1rem; }
  .nummer { width: 32px; height: 32px; font-size: .9rem; }
  .sitzung-karte h2 { font-size: 1.15rem; }
  .status-zeile { grid-template-columns: 32px 1fr 48px; }
  .status-zeile label { grid-column: 2 / -1; }
}

@media print {
  .topbar, .aktionen, .schnell, .praesentation-steuerung, .historie-mehr, .schalter { display: none !important; }
  body { background: #fff; }
  .karte { box-shadow: none; break-inside: avoid; }
  .historie-text { max-height: none; }
}

/* ---------- Online/Offline-Anzeige ---------- */
.netz-status {
  position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30;
  font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .8rem; border-radius: 99px; border: 1px solid var(--linie);
  background: var(--flaeche); color: var(--text-2); box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.netz-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3a9d5d; }
.netz-status.online { opacity: .75; }
.netz-status.offline { color: #b36b00; border-color: #e8a317; }
.netz-status.offline::before { background: #e8a317; }
.netz-status.warnung { color: var(--warnung); border-color: var(--warnung); }
.netz-status.warnung::before { background: var(--warnung); }
.netz-status.aktiv::before { background: var(--primaer); animation: puls 1s infinite alternate; }
@keyframes puls { to { opacity: .2; } }
body.praesentation .netz-status { bottom: 80px; }

/* ---------- Bilder am Thema ---------- */
.bilder-leiste { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .6rem; }
.bilder-leiste:empty { display: none; }
.bild-vorschau {
  position: relative; width: 104px; height: 104px; margin: 0; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--linie); background: var(--flaeche-2); cursor: pointer; display: block;
}
.bild-vorschau img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bild-vorschau input { position: absolute; opacity: 0; pointer-events: none; }
.bild-weg {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .15rem; font-size: .7rem; text-align: center;
  background: rgba(0,0,0,.55); color: #fff; opacity: 0; transition: opacity .1s;
}
.bild-vorschau:hover .bild-weg { opacity: 1; }
.bild-vorschau input:checked ~ .bild-weg { opacity: 1; background: var(--gefahr); }
.bild-vorschau:has(input:checked) img { opacity: .3; }
.bild-gross, .bild-x {
  position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0;
  display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; font-size: .9rem; cursor: pointer;
}
.bild-gross:hover { text-decoration: none; }
.bild-vorschau.neu { outline: 2px dashed var(--primaer); outline-offset: -2px; }
.bild-knoepfe { display: flex; gap: .5rem; flex-wrap: wrap; }
.bild-knoepfe label { margin: 0; color: var(--text); }

/* ---------- Formular-Ergänzungen ---------- */
.historie-kopf h3 { margin: 1.2rem 0 .3rem; }
.feld-anzeige { display: flex; flex-direction: column; font-size: .85rem; color: var(--text-2); margin-bottom: .8rem; }
.feld-anzeige strong { color: var(--text); font-size: .95rem; padding: .3rem 0; }
.raster-4 { display: grid; grid-template-columns: 1.2fr 1.2fr .8fr auto; gap: .75rem; align-items: end; }
.raster-4 > label { margin: 0; }
.benutzer-liste { display: grid; gap: .6rem; margin-top: 1rem; }
.benutzer-zeile { padding: .9rem 1.1rem; }
.benutzer-aktionen { display: flex; gap: .35rem; flex-wrap: wrap; }
.link-box { margin-bottom: 1rem; border-color: var(--primaer); }
.satz { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.zahl { width: 72px; }
.auto-breite { width: auto; }
.vermerk-offline { font-style: italic; }
.vermerk-offline::after { content: " (noch nicht hochgeladen)"; color: var(--text-2); font-size: .8em; }

@media (max-width: 860px) {
  .raster-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .raster-4 { grid-template-columns: 1fr; }
  .bild-vorschau { width: 88px; height: 88px; }
}
.benutzer-neu h3 { margin-top: 0; }
.leiste-unten { padding-left: 150px; }
@media (max-width: 520px) { .leiste-unten { padding-left: 0; padding-bottom: 3.2rem; } }
.topbar nav a { white-space: nowrap; }
.abschnitt > h3:first-of-type { margin-top: 0; }
/* Beim Zurückspringen (#a123) Karte nicht unter der festen Kopfleiste verstecken */
.aufgabe, .sitzung-karte { scroll-margin-top: 90px; }
.pflicht { color: var(--warnung); font-weight: 700; }
.bild-thema { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.datum-filter { display: flex; align-items: center; gap: .35rem; }
.datum-filter span { font-size: .8rem; color: var(--text-2); }
.filter-zeile { grid-template-columns: repeat(3, 1fr) auto auto 1fr auto; }
@media (max-width: 860px) { .filter-zeile { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .filter-zeile { grid-template-columns: 1fr; } }

/* Datumsfelder: auf iPhones nie breiter als der Platz (Safari gibt ihnen sonst eine Mindestbreite) */
input[type="date"] { min-width: 0; max-width: 100%; display: block; min-height: 2.6rem; -webkit-appearance: none; appearance: none; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.datum-filter input { flex: 1; }
.datum-filter span { width: 1.6rem; flex: none; }
.mit-knopf > input { flex: 1; min-width: 0; }

/* Handy/Tablet: Online-Anzeige oben in der Kopfleiste statt über dem Inhalt */
@media (max-width: 860px) {
  .netz-status {
    top: calc(14px + env(safe-area-inset-top)); bottom: auto; left: 50%; transform: translateX(-50%);
    padding: .25rem .65rem; font-size: .72rem; box-shadow: none; max-width: calc(100vw - 210px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .netz-status.online { padding: .35rem; font-size: 0; gap: 0; border-color: transparent; background: transparent; }
  body.sitzung .netz-status, body.login-seite .netz-status { top: calc(8px + env(safe-area-inset-top)); }
  body.praesentation .netz-status { bottom: auto; }
  .leiste-unten { padding-left: 0; padding-bottom: .8rem; }
}

/* ---------- Termine / Kalender ---------- */
.termine-raster { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; align-items: start; }
.kalender-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.kalender-kopf h3 { margin: 0; font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--text); }
.kalender-gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.kalender-gitter .wt { text-align: center; font-size: .72rem; color: var(--text-2); padding: .2rem 0; }
.kalender-gitter .tag {
  aspect-ratio: 1 / .85; border-radius: 8px; border: 1px solid transparent; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: var(--text); font-size: .9rem; background: var(--flaeche-2);
}
.kalender-gitter .tag:hover { border-color: var(--primaer); text-decoration: none; }
.kalender-gitter .tag.fremd { opacity: .4; }
.kalender-gitter .tag.heute span { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.kalender-gitter .tag.termin { background: var(--primaer-hell); color: var(--primaer); font-weight: 700; }
.kalender-gitter .tag.naechster { background: var(--primaer); color: var(--primaer-text); }
.kalender-gitter .tag small { font-size: .62rem; font-weight: 600; }
.termin-tabelle { width: 100%; border-collapse: collapse; font-size: .9rem; }
.termin-tabelle th { text-align: left; font-size: .75rem; color: var(--text-2); font-weight: 600; padding: .3rem .5rem; border-bottom: 1px solid var(--linie); }
.termin-tabelle td { padding: .45rem .5rem; border-bottom: 1px solid var(--linie); }
.termin-tabelle tr.vorbei td { color: var(--text-2); }
.termin-tabelle tr.naechster td { background: var(--primaer-hell); font-weight: 600; }
.mail-text { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .88rem; }
.nur-link { position: absolute; left: -9999px; width: 1px; }

/* ---------- WR-Sitzung: direkt bearbeiten ---------- */
.historie-block.bearbeitbar .historie-text { cursor: text; border-radius: 6px; }
.historie-block.bearbeitbar .historie-text:hover { outline: 1px dashed var(--linie); outline-offset: 4px; }
.historie-leiste { display: flex; gap: .5rem; align-items: center; margin-top: .5rem; flex-wrap: wrap; }
.historie-leiste .historie-mehr { margin: 0; }
.sitzung-felder { display: grid; grid-template-columns: 1.2fr .6fr 1fr 1.3fr 1.3fr; gap: .5rem; margin-bottom: .6rem; }
.sitzung-felder label { margin: 0; font-size: .75rem; }
.sitzung-felder input, .sitzung-felder select { padding: .4rem .55rem; font-size: .9rem; margin-top: .15rem; }
.sitzung-felder label.ueberfaellig input { color: var(--warnung); font-weight: 600; }
.sitzung-karte.geaendert [data-speichern] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaer) 35%, transparent); }
.sitzung-karte.geaendert .nummer { background: var(--primaer); color: var(--primaer-text); }
.schnell-leiste label.btn { margin: 0; color: var(--text); }
body.praesentation .sitzung-felder input, body.praesentation .sitzung-felder select { font-size: 1.05rem; }

@media (max-width: 860px) {
  .termine-raster { grid-template-columns: 1fr; }
  .sitzung-felder { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .termin-tabelle:not(.daten-tabelle) th:nth-child(3), .termin-tabelle:not(.daten-tabelle) td:nth-child(3), .termin-tabelle:not(.daten-tabelle) th:nth-child(4), .termin-tabelle:not(.daten-tabelle) td:nth-child(4) { display: none; }
}
.filter-zeile { grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto minmax(0, 1fr) auto; }
@media (max-width: 1100px) { .filter-zeile { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px) { .filter-zeile { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .filter-zeile { grid-template-columns: 1fr; } }

/* Filter in zwei Reihen: Ort/Bereich/Person/Prio – Zeitraum/Sortierung */
.filter-zeile { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { .filter-zeile { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .filter-zeile { grid-template-columns: 1fr; } }

/* Erinnerungs-Mail: Wege zum Verschicken */
.versand { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.versand-weg {
  display: flex; flex-direction: column; gap: .2rem; text-align: left; font: inherit; cursor: pointer;
  padding: .75rem .9rem; border-radius: 10px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--text);
}
.versand-weg:hover { border-color: var(--primaer); text-decoration: none; background: var(--flaeche-2); }
.versand-weg small { color: var(--text-2); font-size: .8rem; line-height: 1.35; }
.versand-weg.haupt { border-color: var(--primaer); background: var(--primaer-hell); }
.versand-weg[hidden] { display: none; }
@media (max-width: 860px) { .versand { grid-template-columns: 1fr; } }
/* Im Normalfall nur ein kleiner grüner Punkt; Text nur bei Offline/wartenden Änderungen */
.netz-status.online { padding: .35rem; font-size: 0; gap: 0; border-color: transparent; background: transparent; box-shadow: none; }

/* WR-Sitzung: Kurzbeschreibung anklickbar */
.kurz-anzeige { cursor: text; border-radius: 6px; }
.kurz-anzeige:hover { outline: 1px dashed var(--linie); outline-offset: 4px; }
.kurz-feld { font-size: 1.15rem; font-weight: 600; margin: .4rem 0 .7rem; }
body.praesentation .kurz-feld { font-size: 1.6rem; }

/* Kontaktdaten */
.raster-kontakt { display: grid; grid-template-columns: 1fr 1.3fr 2fr; gap: .75rem; grid-column: 1 / -1; margin-top: .6rem; }
.raster-kontakt label { margin: 0; }
.benutzer-zeile .raster-4 { row-gap: .4rem; }
.profil-box { margin-bottom: 1rem; }
.login-seite .profil-box, .inhalt > .login-box { margin-left: auto; margin-right: auto; }
@media (max-width: 860px) { .raster-kontakt { grid-template-columns: 1fr; } }

/* =====================================================================
   Auswertungen (Diagramme)
   ===================================================================== */
:root { --v-text: #52514e; --v-leise: #898781; --v-gitter: #e1e0d9; --v-achse: #c3c2b7; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --v-text: #c3c2b7; --v-leise: #898781; --v-gitter: #2c2c2a; --v-achse: #383835; }
}
:root[data-theme="dark"] { --v-text: #c3c2b7; --v-leise: #898781; --v-gitter: #2c2c2a; --v-achse: #383835; }

.viz-rahmen { overflow-x: auto; }
svg.viz { width: 100%; height: auto; max-width: 100%; display: block; font-variant-numeric: tabular-nums; }
svg.viz .v-text { fill: var(--v-text); }
svg.viz .v-leise { fill: var(--v-leise); }
svg.viz .v-gitter { stroke: var(--v-gitter); }
svg.viz .v-achse { stroke: var(--v-achse); }
svg.viz .v-m { fill: var(--l); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) svg.viz .v-m { fill: var(--d); } }
:root[data-theme="dark"] svg.viz .v-m { fill: var(--d); }
svg.viz g[data-tip]:hover .v-ziel { fill: color-mix(in srgb, var(--text) 5%, transparent); }
svg.viz g[data-tip] { cursor: default; }

.auswertungen { display: grid; gap: 1rem; }
.auswertung h2 { font-size: 1.1rem; margin: 0; }
.auswertung-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.auswertung-kopf p { margin: .15rem 0 0; }
.export { display: flex; gap: .35rem; flex-wrap: wrap; }
.tabelle-ansicht { margin-top: .75rem; }
.tabelle-ansicht summary { cursor: pointer; color: var(--primaer); font-size: .88rem; font-weight: 500; }
.tabelle-scroll { overflow-x: auto; margin-top: .5rem; }
.daten-tabelle th.zahl-spalte, .daten-tabelle td.zahl-spalte { text-align: right; font-variant-numeric: tabular-nums; }
.auswertung-kacheln { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kennzahl.neutral { border-top: 1px solid var(--linie); gap: .1rem; }
.kennzahl.neutral .kennzahl-wert { font-size: 1.9rem; font-weight: 600; }
.kennzahl.kritisch { border-top: 3px solid #d03b3b; }
.kennzahl.kritisch .kennzahl-wert::before { content: "⚠ "; font-size: 1rem; vertical-align: middle; }
#auswertung-filter .filter-zeile { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { #auswertung-filter .filter-zeile { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { #auswertung-filter .filter-zeile { grid-template-columns: 1fr; } }

.viz-tipp {
  position: fixed; z-index: 50; pointer-events: none; max-width: 320px;
  padding: .45rem .65rem; border-radius: 8px; font-size: .82rem; line-height: 1.4;
  background: var(--text); color: var(--flaeche); box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
/* Handy: Diagramme in lesbarer Größe, seitlich wischbar */
.wischen-hinweis { display: none; }
@media (max-width: 700px) {
  .viz-rahmen { margin: 0 -1.25rem; padding: 0 1.25rem; -webkit-overflow-scrolling: touch; }
  svg.viz { min-width: 640px; }
  .wischen-hinweis { display: block; font-size: .75rem; color: var(--text-2); margin-top: .25rem; }
}

/* Namensfeld mit Vorschlagsliste */
.kombi { position: relative; display: block; margin-top: .3rem; }
.kombi input { margin: 0; padding-right: 2.2rem; }
.kombi-pfeil { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--text-2); font-size: 1rem; cursor: pointer; padding: .3rem .5rem; }
.kombi-liste {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40; max-height: 260px; overflow-y: auto;
  margin: 0; padding: .25rem; list-style: none; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.16);
}
.kombi-liste li { padding: .45rem .6rem; border-radius: 6px; cursor: pointer; font-size: .92rem; color: var(--text); font-weight: 400; }
.kombi-liste li.aktiv, .kombi-liste li:hover { background: var(--primaer-hell); color: var(--primaer); }
.kombi-liste li.gewaehlt::after { content: " ✓"; color: var(--primaer); }
.kombi-liste mark { background: none; color: inherit; font-weight: 700; }
.kombi-liste .leer { color: var(--text-2); cursor: default; font-style: italic; }
.sitzung-felder .kombi { margin-top: .15rem; }
.sitzung-felder .kombi input { padding: .4rem 2rem .4rem .55rem; font-size: .9rem; }
.daten-tabelle tr[id] { scroll-margin-top: 90px; }
.daten-tabelle tr:target td { background: var(--primaer-hell); }

/* Meine Aufgaben */
.nav-zahl { display: inline-block; min-width: 1.3rem; padding: 0 .35rem; margin-left: .2rem; border-radius: 99px; background: var(--primaer); color: var(--primaer-text); font-size: .72rem; font-weight: 700; text-align: center; line-height: 1.3rem; }
h3.gruppe { margin: 1rem 0 .1rem; }
.rolle { font-size: .72rem; font-weight: 600; padding: .05rem .5rem; border-radius: 99px; background: var(--primaer-hell); color: var(--primaer); }

/* Präsentation: ganzer Bildschirm, nur das aktuelle Thema */
body.praesentation .sitzung-kopf, body.praesentation .netz-status { display: none; }
body.praesentation .inhalt { max-width: none; padding: 1.25rem 2rem 6rem; }
body.praesentation .sitzung-karte.zeigen { min-height: calc(100vh - 7.5rem); padding: 2rem 2.5rem; }
body.praesentation .nummer { width: 56px; height: 56px; font-size: 1.4rem; }
body.praesentation .meta-oben { font-size: .95rem; }
body.praesentation .sitzung-karte h2, body.praesentation .kurz-feld { font-size: 2.4rem; }
body.praesentation .historie-text { font-size: 1.3rem; max-height: 45vh; }
body.praesentation .sitzung-felder label { font-size: .85rem; }
:fullscreen body { overflow-y: auto; }

/* Aufgaben: Kopf mit Kennzahlen und Filtern bleibt beim Scrollen stehen (nur auf großen Bildschirmen) */
@media (min-width: 861px) and (min-height: 700px) {
  .liste-kopf { position: sticky; top: var(--topbar-hoehe, 55px); z-index: 6; background: var(--bg); padding-top: .75rem; margin-top: -.75rem; }
  .liste-kopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: linear-gradient(var(--bg), transparent); pointer-events: none; }
  .liste-kopf .filter { margin-bottom: .6rem; }
  .liste-kopf .kennzahlen { margin-bottom: .6rem; }
  .liste-kopf .kennzahl { padding: .5rem .9rem; }
  .liste-kopf .kennzahl-wert { font-size: 1.35rem; }
  .liste-kopf .kopfzeile { margin-bottom: .6rem; }
  .liste-kopf ~ .liste .aufgabe { scroll-margin-top: calc(var(--topbar-hoehe, 55px) + var(--liste-kopf-hoehe, 380px) + 12px); }
}
.bild-thema { white-space: normal; display: block; margin-bottom: .5rem; color: var(--text); font-weight: 400; }
.bild-thema:hover { text-decoration: none; }
.bild-thema:hover .bild-kurz { text-decoration: underline; }
.bild-nr { font-size: .75rem; font-weight: 700; color: var(--primaer); }
.bild-kurz { display: block; font-size: .88rem; line-height: 1.35; margin-top: .2rem; }

/* Eigene Auswertung (Baukasten) */
.auswertung.eigen { border-color: var(--primaer); margin-bottom: 1rem; }
.baukasten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem .75rem; margin-bottom: .75rem; }
.baukasten label { margin: 0; }
.baukasten-status { grid-column: 1 / -1; display: flex; flex-direction: column; gap: .3rem; }
.gespeichert { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .25rem 0 .75rem; }
.gespeichert-eintrag { display: inline-flex; align-items: center; gap: .1rem; padding: .15rem .3rem .15rem .7rem; border-radius: 99px; background: var(--primaer-hell); font-size: .85rem; }
.gespeichert-eintrag a { font-weight: 600; }
.inline-form { display: inline; margin: 0; }
.eigen-titel { text-transform: none; letter-spacing: 0; font-size: 1.05rem; color: var(--text); margin: .75rem 0 0; }
.eigen-titel + p { margin: .1rem 0 .6rem; }
.speichern-form { display: flex; gap: .5rem; margin-top: .9rem; max-width: 560px; }
.eigen-hinweis { margin: 0; padding: .9rem 1rem; border-radius: 9px; background: var(--flaeche-2); }
@media (max-width: 860px) { .baukasten { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .baukasten { grid-template-columns: 1fr; } .speichern-form { flex-direction: column; } }
.bild-thema-zeile { display: flex; align-items: flex-start; gap: .4rem; margin: 0; }
.bild-thema-zeile .bild-thema { flex: 1; margin: 0; }
.bild-kurz { font-weight: 600; }

/* Auswertungen: anklickbare Werte + Seitenleiste mit Themen */
svg.viz [data-drill] { cursor: pointer; }
svg.viz path[data-drill]:hover { opacity: .85; }
a.drill { color: inherit; text-decoration: underline; text-decoration-color: var(--linie); text-underline-offset: 3px; }
a.drill:hover { color: var(--primaer); text-decoration-color: currentColor; }
a.kennzahl[data-drill]:hover, a.kennzahl[href="termine.php"]:hover { border-color: var(--primaer); }
.drill-huelle { position: fixed; inset: 0; z-index: 60; }
.drill-hintergrund { position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.drill-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(520px, 100%);
  background: var(--flaeche); border-left: 1px solid var(--linie); box-shadow: -10px 0 30px rgba(0,0,0,.2);
  display: flex; flex-direction: column; animation: rein .18s ease-out;
}
@keyframes rein { from { transform: translateX(30px); opacity: 0; } }
.drill-kopfzeile { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; padding: 1rem 1.1rem .5rem; border-bottom: 1px solid var(--linie); }
.drill-kopfzeile h2 { font-size: 1.05rem; margin: 0; }
.drill-inhalt { overflow-y: auto; padding: .5rem 1.1rem 2rem; }
.drill-anzahl { margin: .25rem 0 .5rem; }
.drill-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.drill-liste a { display: flex; flex-direction: column; gap: .2rem; padding: .6rem .75rem; border: 1px solid var(--linie); border-radius: 10px; color: var(--text); }
.drill-liste a:hover { border-color: var(--primaer); background: var(--flaeche-2); text-decoration: none; }
.drill-liste li.markiert a { border-color: var(--primaer); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primaer) 30%, transparent); }
.drill-kopf { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .8rem; }
.drill-text { font-weight: 600; font-size: .92rem; }
.drill-meta { font-size: .78rem; color: var(--text-2); }
body.drill-offen { overflow: hidden; }
/* Karten nie breiter als der Bildschirm – breite Diagramme scrollen innerhalb der Karte */
.auswertungen { grid-template-columns: minmax(0, 1fr); }
.auswertung { min-width: 0; }
.drill-panel { max-width: 100vw; }

/* Wer ist online + gleichzeitiges Bearbeiten */
.wer-online { position: relative; }
.wer-knopf {
  display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-size: .82rem; cursor: pointer;
  padding: .3rem .7rem; border-radius: 99px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--text-2);
}
.wer-knopf .punkt { width: 8px; height: 8px; border-radius: 50%; background: #3a9d5d; }
.wer-online.mehrere .wer-knopf { color: var(--text); font-weight: 600; border-color: #3a9d5d; }
.wer-liste {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 45; min-width: 280px; max-width: 360px; padding: .4rem;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.16);
}
.wer-zeile { display: flex; flex-direction: column; padding: .45rem .6rem; border-radius: 6px; font-size: .85rem; }
.wer-zeile + .wer-zeile { border-top: 1px solid var(--linie); }
.wer-zeile span, .wer-zeile a { font-size: .78rem; color: var(--text-2); }
.wer-zeile a { color: var(--primaer); }
.hinweis.gleichzeitig { background: color-mix(in srgb, #e8a317 16%, var(--flaeche)); color: var(--text); font-weight: 500; margin: .5rem 0 0; }
.hinweis.warnung-hinweis { background: color-mix(in srgb, #e8a317 16%, var(--flaeche)); color: var(--text); font-weight: 500; }
.sitzung-kopf .aktionen { align-items: center; }
@media (max-width: 860px) { .wer-online { order: 2; } .wer-liste { right: auto; left: 0; } }

/* ---------- Rechnungen ---------- */
.rechnung-filter { margin-bottom: .8rem; }
.rechnung-liste { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.rechnung-zeile {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: .9rem; align-items: center;
  padding: .55rem .9rem .55rem .55rem; color: var(--text);
}
.rechnung-zeile:hover { text-decoration: none; border-color: var(--primaer); }
.rechnung-zeile strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rechnung-bild {
  width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--flaeche-2);
  display: grid; place-items: center; font-size: .75rem; font-weight: 700; color: var(--text-2);
}
.rechnung-bild img { width: 100%; height: 100%; object-fit: cover; }
.rechnung-betrag { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pdf-kachel { display: grid; place-content: center; text-align: center; height: 100%; font-weight: 700; color: var(--gefahr); }
.pdf-kachel small { display: block; font-weight: 400; font-size: .65rem; color: var(--text-2); padding: 0 .3rem; }
.bild-vorschau:has(input:checked) .pdf-kachel { opacity: .3; }
.betrag-feld { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.iban-feld { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .02em; }
.iban-pruefung { display: block; margin-top: .2rem; }
.iban-pruefung.ok { color: #2e7d4f; }
.iban-pruefung.falsch { color: var(--warnung); font-weight: 600; }
.vorgeschlagen { box-shadow: 0 0 0 2px color-mix(in srgb, var(--primaer) 45%, transparent); }
.leiste-knoepfe { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .6rem; }
.nur-text { background: none; border: 0; padding: .4rem 0; color: var(--primaer); cursor: pointer; font: inherit; display: block; margin: .2rem auto 0; }
.nur-text:hover { text-decoration: underline; }
.girocode { width: 180px; height: 180px; image-rendering: pixelated; border-radius: 8px; background: #fff; display: block; }
@media (max-width: 520px) {
  .rechnung-zeile { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .rechnung-zeile .badge { grid-column: 2 / -1; justify-self: start; }
  .rechnung-bild { width: 48px; height: 48px; }
}

/* ---------- Projekte ---------- */
.projekt-liste { display: grid; gap: .8rem; }
.projekt-karte { padding: 1rem 1.2rem; border-left: 6px solid var(--c); }
.projekt-kopf { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; color: var(--text); }
.projekt-kopf:hover { text-decoration: none; }
.projekt-kopf:hover .projekt-titel { color: var(--primaer); }
.projekt-titel { display: block; font-size: 1.1rem; }
.projekt-stand { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; flex: none; }
.fortschritt { --c: var(--primaer); height: 6px; border-radius: 99px; background: var(--flaeche-2); border: 1px solid var(--linie); overflow: hidden; margin: .7rem 0 .25rem; }
.fortschritt span { display: block; height: 100%; background: var(--c); border-radius: 99px; transition: width .3s; }
.projekt-karte .fortschritt, .projekt-sitzung .fortschritt { --c: inherit; }
.projekt-karte .fortschritt span, .projekt-sitzung .fortschritt span { background: var(--c); }
.fortschritt.gross { height: 10px; margin: 0 0 1rem; }
.fortschritt-text { margin: 0 0 .5rem; }
.nur-zeitplan { display: block; color: inherit; }
.nur-zeitplan:hover { text-decoration: none; }

.ansicht-wahl { display: flex; gap: .4rem; margin-bottom: .8rem; }

/* Zeitplan (Balken) */
.zeitplan { --name: 220px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.zeitplan.kompakt { --name: 160px; margin-top: .4rem; }
.zp-innen { min-width: 640px; }
.zeitplan.kompakt .zp-innen { min-width: 480px; }
.zp-kopf, .zp-zeile, .zp-hinten { display: grid; grid-template-columns: var(--name) minmax(0, 1fr); align-items: center; }
.zp-spur { position: relative; display: block; height: 100%; }
.zp-kopf { height: 26px; font-size: .75rem; color: var(--text-2); font-weight: 600; }
.zp-kopf.zp-kw { height: 20px; font-weight: 400; font-size: .68rem; }
.zp-monat, .zp-woche { position: absolute; top: 0; bottom: 0; padding-left: 4px; border-left: 1px solid var(--linie); white-space: nowrap; overflow: hidden; display: flex; align-items: center; }
.zp-woche { justify-content: center; padding: 0; }
.zp-koerper { position: relative; border-top: 1px solid var(--linie); }
.zp-hinten { position: absolute; inset: 0; pointer-events: none; }
.zp-rahmen { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--c) 7%, transparent); border-left: 1px dashed color-mix(in srgb, var(--c) 45%, transparent); border-right: 1px dashed color-mix(in srgb, var(--c) 45%, transparent); }
.zp-heute { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--warnung); z-index: 2; }
.zp-zeile {
  position: relative; width: 100%; min-height: 38px; padding: 0; border: 0; border-bottom: 1px solid var(--linie);
  background: none; font: inherit; color: var(--text); text-align: left;
}
button.zp-zeile { cursor: pointer; }
button.zp-zeile:hover { background: var(--flaeche-2); }
.zeitplan.kompakt .zp-zeile { min-height: 28px; font-size: .82rem; }
.zp-name { padding: .3rem .6rem .3rem 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.zeitplan.kompakt .zp-name { font-size: .82rem; }
.zp-name small { display: block; color: var(--text-2); font-size: .72rem; }
.zp-balken {
  position: absolute; top: 7px; bottom: 7px; min-width: 6px; border-radius: 6px; z-index: 1;
  background: color-mix(in srgb, var(--c) 35%, var(--flaeche)); border: 1px solid var(--c);
  font-size: .72rem; color: var(--text); display: flex; align-items: center; overflow: hidden; white-space: nowrap;
}
.zeitplan.kompakt .zp-balken { top: 6px; bottom: 6px; }
.zp-balken span { padding: 0 .4rem; overflow: hidden; text-overflow: ellipsis; }
.st-arbeit .zp-balken { background: var(--c); color: #fff; }
.st-erledigt .zp-balken { background: var(--flaeche-2); border-color: var(--linie); color: var(--text-2); }
.st-erledigt .zp-name { color: var(--text-2); }
.zp-zeile.ueber .zp-balken { border-color: var(--warnung); box-shadow: inset 0 0 0 1px var(--warnung); }
.zp-zeile.ueber .zp-name { color: var(--warnung); font-weight: 600; }
.zp-meilenstein {
  position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; transform: rotate(45deg);
  background: var(--c); border: 2px solid var(--flaeche); box-shadow: 0 0 0 1px var(--c); z-index: 1;
}
.st-erledigt .zp-meilenstein { background: var(--text-2); box-shadow: 0 0 0 1px var(--text-2); }

/* Tafel (Spalten) */
.tafel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1rem; align-items: start; }
.tafel-spalte { background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: var(--radius); padding: .7rem; min-height: 160px; border-top: 3px solid var(--text-2); }
.tafel-spalte.st-arbeit { border-top-color: var(--primaer); }
.tafel-spalte.st-erledigt { border-top-color: #2e7d4f; }
.tafel-spalte.ziel { outline: 2px dashed var(--primaer); outline-offset: -2px; }
.tafel-spalte h3 { margin: 0 0 .6rem; display: flex; justify-content: space-between; }
.tafel-zahl { font-weight: 400; }
.tafel-karten { display: flex; flex-direction: column; gap: .5rem; min-height: 40px; }
.tafel-karte { position: relative; display: flex; flex-direction: column; gap: .15rem; padding: .6rem 2.6rem .6rem .75rem; cursor: grab; }
.tafel-karte:hover { border-color: var(--primaer); }
.tafel-karte.gezogen { opacity: .4; }
.tafel-karte.ueber { border-left: 3px solid var(--warnung); }
.st-erledigt .tafel-karte strong { text-decoration: line-through; color: var(--text-2); font-weight: 600; }
.tafel-pfeile { position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; }
.tafel-pfeile .x { width: 24px; height: 20px; font-size: 1rem; line-height: 1; }
.st-offen [data-schieben="-1"], .st-erledigt [data-schieben="1"] { visibility: hidden; }
.tafel-neu { margin-top: .5rem; width: 100%; padding: .5rem; border: 1px dashed var(--linie); border-radius: 8px; background: none; color: var(--text-2); font: inherit; cursor: pointer; }
.tafel-neu:hover { border-color: var(--primaer); color: var(--primaer); }

/* Projekt-Angaben, Dialog */
.projekt-form .raster-4 { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.farb-wahl { display: flex; align-items: center; gap: .45rem; margin: .4rem 0 .8rem; flex-wrap: wrap; }
.farbe { margin: 0; cursor: pointer; }
.farbe input { position: absolute; opacity: 0; }
.farbe span { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--c); border: 3px solid var(--flaeche); box-shadow: 0 0 0 1px var(--linie); }
.farbe input:checked + span { box-shadow: 0 0 0 2px var(--text); }
.farbe input:focus-visible + span { outline: 2px solid var(--primaer); outline-offset: 2px; }
.dialog { width: min(560px, calc(100vw - 32px)); padding: 1.2rem 1.3rem; border: 1px solid var(--linie); color: var(--text); }
.dialog::backdrop { background: rgba(10, 15, 18, .45); }
.dialog h2 { margin: 0 0 .8rem; font-size: 1.2rem; }
.meilenstein-wahl { align-self: end; padding-bottom: .55rem; }

/* WR-Sitzung: Projekt */
.projekt-sitzung h3 { margin-top: 1rem; }
.projekt-schritte { list-style: none; padding: 0; margin: 0 0 .5rem; display: grid; gap: .35rem; }
.projekt-schritte label { margin: 0; align-items: flex-start; }
.projekt-schritte input { margin-top: .25rem; width: 18px; height: 18px; flex: none; }
.projekt-schritte li.erledigt strong { text-decoration: line-through; color: var(--text-2); }
body.praesentation .projekt-schritte { font-size: 1.1rem; }

@media (max-width: 860px) {
  .tafel { grid-template-columns: 1fr; }
  .projekt-form .raster-4 { grid-template-columns: 1fr 1fr; }
  .zeitplan { --name: 140px; }
  .zeitplan.kompakt { --name: 110px; }
}
@media (max-width: 520px) {
  .projekt-kopf { flex-direction: column; }
  .projekt-stand { flex-direction: row; align-items: center; }
  .projekt-form .raster-4 { grid-template-columns: 1fr; }
}

/* ---------- Belege: Art, Zuschneiden, Externe ---------- */
.belegart-wahl { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .9rem; }
.chip.gross span { padding: .45rem 1rem; font-size: .95rem; }
.belegart-wahl .chip span::before { display: none; }
form:not(.ist-lieferschein) [data-nur="lieferschein"], .ist-lieferschein [data-nur="rechnung"] { display: none; }
.extern-hinweis { background: color-mix(in srgb, var(--wr) 12%, var(--flaeche)); border: 1px solid color-mix(in srgb, var(--wr) 40%, transparent); }
.nicht-sichtbar { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.zuschnitt {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: #111; color: #eee; display: flex; flex-direction: column;
}
.zuschnitt:not([open]) { display: none; }
.zuschnitt::backdrop { background: #111; }
.zuschnitt .leise { color: #aaa; }
.zuschnitt-kopf { display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap; padding: .7rem 1rem; }
.zuschnitt-flaeche { position: relative; flex: 1; margin: 0 16px; min-height: 0; touch-action: none; }
.zuschnitt-flaeche canvas, .zuschnitt-flaeche svg { position: absolute; }
.zuschnitt-flaeche svg { overflow: visible; pointer-events: none; }
.zuschnitt-flaeche polygon { fill: rgba(95, 168, 191, .18); stroke: #5fa8bf; stroke-width: 2; }
.ecke {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  background: rgba(95, 168, 191, .35); border: 3px solid #fff; box-shadow: 0 0 0 1px #000; cursor: grab; touch-action: none;
}
.ecke:active { cursor: grabbing; background: rgba(95, 168, 191, .7); }
.zuschnitt-leiste { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); }
.zuschnitt-leiste label { color: #eee; margin: 0; }
.zuschnitt .btn:not(.primaer) { background: #2a2f33; color: #eee; border-color: #444; }

.link-liste { display: grid; gap: .6rem; margin: .6rem 0 1rem; }
.link-zeile { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .6rem; border: 1px solid var(--linie); border-radius: 10px; }
.link-zeile.aus { opacity: .55; }
.link-qr { display: block; background: #fff; border-radius: 6px; padding: 2px; }
.link-qr svg { display: block; width: 80px; height: 80px; }
.link-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.link-url { font: .78rem ui-monospace, Consolas, monospace; padding: .3rem .5rem; margin-top: .2rem; }
.link-aktionen { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.link-neu { display: flex; gap: .6rem; align-items: end; flex-wrap: wrap; margin-bottom: .6rem; }
.link-neu label { margin: 0; flex: 1; min-width: 200px; }

body.oeffentlich .inhalt { padding-top: 1rem; }
.einreich-box { max-width: 560px; margin: 0 auto; }
.einreich-kopf { display: flex; gap: .8rem; align-items: center; margin-bottom: 1rem; }
.einreich-kopf h1 { margin: 0; }
.einreich-kopf p { margin: 0; }

@media (max-width: 520px) {
  .link-zeile { grid-template-columns: 64px minmax(0, 1fr); }
  .link-qr svg { width: 60px; height: 60px; }
  .link-aktionen { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Stempel-Vorschau */
.stempel-vorschau { margin: .2rem 0 .8rem; }
.stempel-vorschau img { display: block; width: 100%; border: 1px solid var(--linie); border-radius: 8px; background: #fff; cursor: crosshair; transition: opacity .15s; }
.stempel-vorschau.laedt img { opacity: .5; }
.stempel-vorschau figcaption { margin-top: .3rem; }

/* Projekt-Übersicht: alle Projekte, Überschneidungen */
.zeitplan.uebersicht .zp-zeile { min-height: 44px; color: var(--text); }
.zeitplan.uebersicht a.zp-zeile:hover { background: var(--flaeche-2); text-decoration: none; }
.zp-projekt { top: 8px; bottom: 14px; background: color-mix(in srgb, var(--c) 30%, var(--flaeche)); }
.zp-projekt i { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--c) 70%, var(--flaeche)); }
.zp-projekt span { position: relative; font-weight: 600; }
.zp-schritt { position: absolute; bottom: 6px; height: 4px; min-width: 3px; border-radius: 2px; background: var(--c); z-index: 1; }
.zp-schritt.st-erledigt { background: var(--text-2); opacity: .5; }
.zp-ueberlappung {
  position: absolute; top: 0; bottom: 0;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--warnung) 14%, transparent) 0 6px, transparent 6px 12px);
  border-left: 1px dashed color-mix(in srgb, var(--warnung) 50%, transparent);
  border-right: 1px dashed color-mix(in srgb, var(--warnung) 50%, transparent);
}
.zp-ueber-zeile { background: var(--flaeche-2); }
.zp-ueber-zahl {
  position: absolute; top: 9px; bottom: 9px; min-width: 14px; border-radius: 4px; z-index: 1;
  display: grid; place-items: center; font-size: .72rem; font-weight: 700; color: #fff; overflow: hidden;
  background: color-mix(in srgb, var(--warnung) 55%, var(--flaeche));
}
.zp-ueber-zahl.stufe-3 { background: color-mix(in srgb, var(--warnung) 75%, var(--flaeche)); }
.zp-ueber-zahl.stufe-4 { background: var(--warnung); }
.ueberschneidungen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .5rem 1.5rem; }
.ueberschneidungen ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .45rem; font-size: .9rem; }
.btn.primaer .leise { color: inherit; opacity: .75; }

/* Personenbedarf */
.personen { white-space: nowrap; font-weight: 600; color: var(--text-2); }
.personen.fehlt { color: var(--warnung); }
.raster-wer { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; gap: .75rem; align-items: end; }
.raster-wer > label { margin: 0; }
.projekt-form .raster-4 { grid-template-columns: 1.4fr .8fr 1fr 1fr 1fr; }
.zp-personen-zeile { background: var(--flaeche-2); }
.zp-personen {
  position: absolute; bottom: 4px; height: var(--h); min-width: 14px; z-index: 1;
  display: flex; flex-direction: column; border-right: 1px solid var(--flaeche-2);
}
.zp-personen b { font-size: .7rem; line-height: 1.2; text-align: center; color: var(--text); }
.zp-stapel { flex: 1; display: flex; flex-direction: column; border-radius: 3px 3px 0 0; overflow: hidden; min-height: 4px; }
.zp-stapel i { display: block; min-height: 2px; background: color-mix(in srgb, var(--c) 80%, var(--flaeche)); }
.zp-stapel i + i { border-top: 1px solid var(--flaeche-2); }
.raster-wer { grid-template-columns: 7rem minmax(0, 1fr); }
@media (max-width: 860px) { .projekt-form .raster-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .projekt-form .raster-4 { grid-template-columns: 1fr; } }

/* Projekte: PDF für Externe */
.pdf-form { max-width: 720px; }
.pdf-optionen { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: .2rem 0 .8rem; }
.pdf-auswahl { margin-bottom: .6rem; }
.pdf-auswahl summary { cursor: pointer; margin-bottom: .5rem; }

/* Bestätigung nach dem Versand */
.versand-dialog { text-align: center; width: min(440px, calc(100vw - 32px)); }
.versand-dialog .leiste-knoepfe { justify-content: center; }
.versand-dialog form { margin: 0; }
.versand-haken {
  width: 56px; height: 56px; margin: .2rem auto .6rem; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.8rem; font-weight: 700; color: #fff; background: #2e7d4f;
}