/* ===============================================================
   Hausverwaltung – Gestaltung
   =============================================================== */

:root {
  --grund:        #f4f6f9;
  --flaeche:      #ffffff;
  --flaeche-2:    #f8fafc;
  --flaeche-3:    #eef2f7;
  --rand:         #dde3ec;
  --rand-stark:   #c3ccda;
  --text:         #1a2231;
  --text-2:       #5a6779;
  --text-3:       #8b96a8;

  --akzent:       #2563eb;
  --akzent-hell:  #eff5ff;
  --akzent-dunkel:#1d4ed8;

  --gruen:        #10804a;
  --gruen-hell:   #e8f7ef;
  --gelb:         #a1660a;
  --gelb-hell:    #fdf4e3;
  --rot:          #c02626;
  --rot-hell:     #fdecec;
  --lila:         #6d28d9;
  --lila-hell:    #f3edff;
  --grau-hell:    #eef1f5;

  --r:      8px;
  --r-gross:12px;
  --schatten:    0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --schatten-gross: 0 10px 30px rgba(16,24,40,.12), 0 4px 8px rgba(16,24,40,.06);
  --seitenleiste: 236px;
  --kopf: 58px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --grund:        #0f141c;
    --flaeche:      #171d27;
    --flaeche-2:    #1c232f;
    --flaeche-3:    #232b38;
    --rand:         #2b3442;
    --rand-stark:   #3d4757;
    --text:         #e7ecf3;
    --text-2:       #9aa7b8;
    --text-3:       #6b7788;

    --akzent:       #5b8dfa;
    --akzent-hell:  #1b2740;
    --akzent-dunkel:#7ba4ff;

    --gruen:        #3ecf8e;
    --gruen-hell:   #12291f;
    --gelb:         #e0a83c;
    --gelb-hell:    #2b2312;
    --rot:          #f47272;
    --rot-hell:     #2e1717;
    --lila:         #a684f5;
    --lila-hell:    #241c38;
    --grau-hell:    #232b38;
    --schatten:     0 1px 2px rgba(0,0,0,.3);
    --schatten-gross: 0 10px 30px rgba(0,0,0,.5);
  }
}

:root[data-thema="dunkel"] {
  --grund:#0f141c; --flaeche:#171d27; --flaeche-2:#1c232f; --flaeche-3:#232b38;
  --rand:#2b3442; --rand-stark:#3d4757;
  --text:#e7ecf3; --text-2:#9aa7b8; --text-3:#6b7788;
  --akzent:#5b8dfa; --akzent-hell:#1b2740; --akzent-dunkel:#7ba4ff;
  --gruen:#3ecf8e; --gruen-hell:#12291f; --gelb:#e0a83c; --gelb-hell:#2b2312;
  --rot:#f47272; --rot-hell:#2e1717; --lila:#a684f5; --lila-hell:#241c38;
  --grau-hell:#232b38;
  --schatten:0 1px 2px rgba(0,0,0,.3); --schatten-gross:0 10px 30px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--grund); color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.3; }
h1 { font-size: 21px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
h4 { font-size: 13px; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
p  { margin: 0 0 10px; }
a  { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--rand-stark); border-radius: 6px; border: 2px solid var(--grund); }
::-webkit-scrollbar-track { background: transparent; }

/* --- Ladebildschirm ------------------------------------------ */
.lade-schirm { display:grid; place-items:center; height:100vh; }
.lade-inhalt { text-align:center; color:var(--text-2); }
.spinner {
  width:34px; height:34px; margin:0 auto 14px;
  border:3px solid var(--rand); border-top-color:var(--akzent);
  border-radius:50%; animation:dreh .8s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }

/* --- Anmeldung ------------------------------------------------ */
.anmelden-seite {
  display:grid; place-items:center; min-height:100vh; padding:20px;
  background:
    radial-gradient(1000px 500px at 15% -10%, color-mix(in srgb, var(--akzent) 14%, transparent), transparent),
    var(--grund);
}
.anmelden-karte {
  width:100%; max-width:390px; background:var(--flaeche);
  border:1px solid var(--rand); border-radius:var(--r-gross);
  padding:34px 30px; box-shadow:var(--schatten-gross);
}
.anmelden-logo { font-size:38px; text-align:center; margin-bottom:8px; }
.anmelden-karte h1 { text-align:center; margin-bottom:4px; }
.anmelden-karte .unter { text-align:center; color:var(--text-2); margin-bottom:24px; font-size:13px; }

/* --- Grundgerüst ---------------------------------------------- */
.rahmen { display:flex; min-height:100vh; }

.seitenleiste {
  width:var(--seitenleiste); flex:0 0 var(--seitenleiste);
  background:var(--flaeche); border-right:1px solid var(--rand);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.marke {
  display:flex; align-items:center; gap:9px; padding:0 16px;
  height:var(--kopf); border-bottom:1px solid var(--rand); flex:0 0 var(--kopf);
}
.marke-symbol { font-size:20px; }
.marke-text { font-weight:650; font-size:15px; letter-spacing:-.01em; }

.navigation { flex:1; overflow-y:auto; padding:10px 8px 16px; }
.nav-gruppe { margin-top:14px; }
.nav-gruppe:first-child { margin-top:0; }
.nav-titel {
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--text-3); padding:0 10px 6px;
}
.nav-punkt {
  display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:var(--r);
  color:var(--text-2); font-size:13.5px; font-weight:500; cursor:pointer;
  border:none; background:none; width:100%; text-align:left; font-family:inherit;
  transition:background .12s, color .12s;
}
.nav-punkt:hover { background:var(--flaeche-3); color:var(--text); text-decoration:none; }
.nav-punkt.aktiv { background:var(--akzent-hell); color:var(--akzent); font-weight:600; }
.nav-symbol { width:17px; text-align:center; font-size:14.5px; flex:0 0 17px; }
.nav-zahl {
  margin-left:auto; background:var(--rot); color:#fff; font-size:10.5px; font-weight:700;
  padding:1px 6px; border-radius:9px; min-width:18px; text-align:center;
}
.nav-punkt.aktiv .nav-zahl { background:var(--akzent); }

.seitenleiste-fuss { border-top:1px solid var(--rand); padding:10px 8px; }

/* --- Hauptbereich --------------------------------------------- */
.haupt { flex:1; min-width:0; display:flex; flex-direction:column; }

.kopfleiste {
  height:var(--kopf); flex:0 0 var(--kopf);
  background:color-mix(in srgb, var(--flaeche) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rand);
  display:flex; align-items:center; gap:12px; padding:0 18px;
  position:sticky; top:0; z-index:30;
}
.menue-knopf { display:none; }

.suchfeld-huelle { position:relative; flex:1; max-width:440px; }
.suchfeld {
  width:100%; height:34px; padding:0 12px 0 34px;
  border:1px solid var(--rand); border-radius:var(--r);
  background:var(--flaeche-2); color:var(--text); font-size:13.5px; font-family:inherit;
}
.suchfeld:focus { outline:none; border-color:var(--akzent); background:var(--flaeche); }
.such-symbol { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--text-3); font-size:13px; pointer-events:none; }

.such-ergebnisse {
  position:absolute; top:calc(100% + 5px); left:0; right:0; z-index:60;
  background:var(--flaeche); border:1px solid var(--rand); border-radius:var(--r-gross);
  box-shadow:var(--schatten-gross); max-height:400px; overflow-y:auto; padding:5px;
}
.such-treffer { padding:8px 10px; border-radius:6px; cursor:pointer; display:flex; align-items:center; gap:10px; }
.such-treffer:hover, .such-treffer.markiert { background:var(--flaeche-3); }
.such-treffer .titel { font-weight:550; font-size:13.5px; }
.such-treffer .unter { font-size:12px; color:var(--text-3); }
.such-leer { padding:16px; text-align:center; color:var(--text-3); font-size:13px; }

.kopf-rechts { margin-left:auto; display:flex; align-items:center; gap:8px; }

.inhalt { flex:1; padding:20px 22px 60px; max-width:1560px; width:100%; }

.seiten-kopf {
  display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:18px;
}
.seiten-kopf .titel-block { flex:1; min-width:200px; }
.seiten-kopf .unter { color:var(--text-2); font-size:13.5px; margin-top:3px; }
.seiten-kopf .aktionen { display:flex; gap:8px; flex-wrap:wrap; }

/* --- Knöpfe --------------------------------------------------- */
.knopf {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:34px; padding:0 13px; border-radius:var(--r);
  border:1px solid var(--rand); background:var(--flaeche); color:var(--text);
  font-size:13.5px; font-weight:550; font-family:inherit; cursor:pointer; white-space:nowrap;
  transition:background .12s, border-color .12s, transform .06s;
}
.knopf:hover { background:var(--flaeche-3); text-decoration:none; }
.knopf:active { transform:translateY(1px); }
.knopf:disabled { opacity:.5; cursor:not-allowed; }
.knopf.haupt { background:var(--akzent); border-color:var(--akzent); color:#fff; }
.knopf.haupt:hover { background:var(--akzent-dunkel); border-color:var(--akzent-dunkel); }
.knopf.gefahr { color:var(--rot); border-color:color-mix(in srgb, var(--rot) 35%, var(--rand)); }
.knopf.gefahr:hover { background:var(--rot-hell); }
.knopf.erfolg { background:var(--gruen); border-color:var(--gruen); color:#fff; }
.knopf.erfolg:hover { filter:brightness(1.08); }
.knopf.klein { height:28px; padding:0 9px; font-size:12.5px; }
.knopf.mini  { height:24px; padding:0 7px; font-size:11.5px; }
.knopf.schlicht { border-color:transparent; background:transparent; }
.knopf.schlicht:hover { background:var(--flaeche-3); }
.knopf.voll { width:100%; }
.knopf-reihe { display:flex; gap:7px; flex-wrap:wrap; }

/* --- Karten --------------------------------------------------- */
.karte {
  background:var(--flaeche); border:1px solid var(--rand);
  border-radius:var(--r-gross); box-shadow:var(--schatten); overflow:hidden;
}
.karte-kopf {
  padding:13px 16px; border-bottom:1px solid var(--rand);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.karte-kopf h2, .karte-kopf h3 { flex:1; min-width:120px; }
.karte-koerper { padding:16px; }
.karte-koerper.eng { padding:0; }
.karte-fuss { padding:11px 16px; border-top:1px solid var(--rand); background:var(--flaeche-2); }

.gitter { display:grid; gap:14px; }
.gitter.g2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.gitter.g3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
.gitter.g4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
.gitter.auto { grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); }
.gitter.auto-breit { grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); }

/* --- Kennzahlen ----------------------------------------------- */
.kennzahl {
  background:var(--flaeche); border:1px solid var(--rand); border-radius:var(--r-gross);
  padding:14px 16px; box-shadow:var(--schatten); display:flex; flex-direction:column; gap:3px;
  cursor:default; transition:border-color .12s;
}
.kennzahl.klickbar { cursor:pointer; }
.kennzahl.klickbar:hover { border-color:var(--akzent); }
.kennzahl .beschriftung {
  font-size:11.5px; font-weight:600; color:var(--text-3);
  text-transform:uppercase; letter-spacing:.05em; display:flex; align-items:center; gap:6px;
}
.kennzahl .wert { font-size:24px; font-weight:680; letter-spacing:-.02em; line-height:1.2; }
.kennzahl .zusatz { font-size:12.5px; color:var(--text-2); }
.kennzahl.gruen .wert { color:var(--gruen); }
.kennzahl.rot   .wert { color:var(--rot); }
.kennzahl.gelb  .wert { color:var(--gelb); }
.kennzahl.blau  .wert { color:var(--akzent); }

/* --- Tabellen ------------------------------------------------- */
.tabelle-huelle { overflow-x:auto; }
table.tabelle { width:100%; border-collapse:collapse; font-size:13.5px; }
table.tabelle th {
  text-align:left; padding:9px 12px; font-size:11.5px; font-weight:650;
  color:var(--text-3); text-transform:uppercase; letter-spacing:.04em;
  border-bottom:1px solid var(--rand); background:var(--flaeche-2);
  white-space:nowrap; position:sticky; top:0; z-index:1;
}
table.tabelle th.sortierbar { cursor:pointer; user-select:none; }
table.tabelle th.sortierbar:hover { color:var(--text); }
table.tabelle td { padding:9px 12px; border-bottom:1px solid var(--rand); vertical-align:middle; }
table.tabelle tbody tr { transition:background .1s; }
table.tabelle tbody tr.klickbar { cursor:pointer; }
table.tabelle tbody tr.klickbar:hover { background:var(--flaeche-2); }
table.tabelle tbody tr:last-child td { border-bottom:none; }
table.tabelle td.zahl, table.tabelle th.zahl { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
table.tabelle td.mittig, table.tabelle th.mittig { text-align:center; }
table.tabelle td.schmal { width:1%; white-space:nowrap; }
.zelle-haupt { font-weight:550; }
.zelle-unter { font-size:12px; color:var(--text-3); margin-top:1px; }

.leer-zustand { padding:44px 20px; text-align:center; color:var(--text-3); }
.leer-zustand .symbol { font-size:34px; margin-bottom:10px; opacity:.55; }
.leer-zustand .titel { font-weight:600; color:var(--text-2); margin-bottom:4px; font-size:14.5px; }
.leer-zustand .text { font-size:13px; max-width:420px; margin:0 auto 14px; }

/* --- Marken / Status ------------------------------------------ */
.marke-punkt {
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 8px; border-radius:20px; font-size:11.5px; font-weight:600;
  background:var(--grau-hell); color:var(--text-2); white-space:nowrap;
}
.marke-punkt.gruen { background:var(--gruen-hell); color:var(--gruen); }
.marke-punkt.rot   { background:var(--rot-hell);   color:var(--rot); }
.marke-punkt.gelb  { background:var(--gelb-hell);  color:var(--gelb); }
.marke-punkt.blau  { background:var(--akzent-hell);color:var(--akzent); }
.marke-punkt.lila  { background:var(--lila-hell);  color:var(--lila); }
.marke-punkt::before {
  content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 6px;
}
.marke-punkt.ohne-punkt::before { display:none; }

/* --- Formulare ------------------------------------------------ */
.formular { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:13px; }
.feld { display:flex; flex-direction:column; gap:5px; grid-column:span 12; min-width:0; }
.feld.s2  { grid-column:span 2; }
.feld.s3  { grid-column:span 3; }
.feld.s4  { grid-column:span 4; }
.feld.s6  { grid-column:span 6; }
.feld.s8  { grid-column:span 8; }
.feld.s9  { grid-column:span 9; }
.feld.s12 { grid-column:span 12; }

.feld label { font-size:12.5px; font-weight:600; color:var(--text-2); }
.feld label .pflicht { color:var(--rot); margin-left:2px; }
.feld .hinweis { font-size:11.5px; color:var(--text-3); }
.feld .fehler-text { font-size:12px; color:var(--rot); }

.eingabe, select.eingabe, textarea.eingabe {
  width:100%; min-height:34px; padding:6px 10px;
  border:1px solid var(--rand); border-radius:var(--r);
  background:var(--flaeche); color:var(--text);
  font-size:13.5px; font-family:inherit; line-height:1.4;
}
.eingabe:focus { outline:none; border-color:var(--akzent); box-shadow:0 0 0 3px color-mix(in srgb, var(--akzent) 15%, transparent); }
.eingabe:disabled { background:var(--flaeche-3); color:var(--text-3); cursor:not-allowed; }
.eingabe.fehlerhaft { border-color:var(--rot); }
textarea.eingabe { min-height:78px; resize:vertical; }
select.eingabe { cursor:pointer; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
  background-position:calc(100% - 15px) 15px, calc(100% - 10px) 15px;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:30px;
}
.eingabe-gruppe { display:flex; align-items:stretch; }
.eingabe-gruppe .eingabe { border-radius:var(--r) 0 0 var(--r); }
.eingabe-anhang {
  display:flex; align-items:center; padding:0 10px; font-size:13px; color:var(--text-3);
  background:var(--flaeche-3); border:1px solid var(--rand); border-left:none;
  border-radius:0 var(--r) var(--r) 0;
}

.schalter { display:flex; align-items:center; gap:9px; cursor:pointer; padding:7px 0; }
.schalter input { width:17px; height:17px; accent-color:var(--akzent); cursor:pointer; margin:0; flex:0 0 17px; }
.schalter span { font-size:13.5px; }

.gruppe-titel {
  grid-column:span 12; font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-3); padding-bottom:5px;
  border-bottom:1px solid var(--rand); margin-top:6px;
}
.gruppe-titel:first-child { margin-top:0; }

/* --- Dialog --------------------------------------------------- */
.dialog-hinter {
  position:fixed; inset:0; background:rgba(15,20,28,.55); backdrop-filter:blur(2px);
  display:flex; align-items:flex-start; justify-content:center; z-index:100;
  padding:24px 16px; overflow-y:auto; animation:einblenden .12s ease;
}
@keyframes einblenden { from { opacity:0; } }
.dialog {
  background:var(--flaeche); border-radius:var(--r-gross); box-shadow:var(--schatten-gross);
  width:100%; max-width:620px; margin:auto; border:1px solid var(--rand);
  animation:hoch .16s cubic-bezier(.2,.8,.3,1); display:flex; flex-direction:column;
  max-height:calc(100vh - 48px);
}
@keyframes hoch { from { opacity:0; transform:translateY(10px) scale(.99); } }
.dialog.breit  { max-width:860px; }
.dialog.sehr-breit { max-width:1140px; }
.dialog.schmal { max-width:430px; }
.dialog-kopf {
  padding:15px 18px; border-bottom:1px solid var(--rand);
  display:flex; align-items:center; gap:10px; flex:0 0 auto;
}
.dialog-kopf h2 { flex:1; }
.dialog-koerper { padding:18px; overflow-y:auto; flex:1; }
.dialog-fuss {
  padding:13px 18px; border-top:1px solid var(--rand); background:var(--flaeche-2);
  display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; flex:0 0 auto;
  border-radius:0 0 var(--r-gross) var(--r-gross);
}
.dialog-fuss .links { margin-right:auto; }
.schliessen-knopf {
  border:none; background:none; font-size:21px; line-height:1; color:var(--text-3);
  cursor:pointer; padding:3px 7px; border-radius:6px;
}
.schliessen-knopf:hover { background:var(--flaeche-3); color:var(--text); }

/* --- Hinweise ------------------------------------------------- */
.hinweis-kasten {
  padding:11px 13px; border-radius:var(--r); font-size:13px;
  border:1px solid var(--rand); background:var(--flaeche-2); margin-bottom:14px;
}
.hinweis-kasten.info  { background:var(--akzent-hell); border-color:color-mix(in srgb,var(--akzent) 25%,transparent); color:var(--akzent); }
.hinweis-kasten.warn  { background:var(--gelb-hell);   border-color:color-mix(in srgb,var(--gelb) 30%,transparent);   color:var(--gelb); }
.hinweis-kasten.fehler{ background:var(--rot-hell);    border-color:color-mix(in srgb,var(--rot) 30%,transparent);    color:var(--rot); }
.hinweis-kasten.erfolg{ background:var(--gruen-hell);  border-color:color-mix(in srgb,var(--gruen) 30%,transparent);  color:var(--gruen); }

/* --- Meldungen ------------------------------------------------ */
.meldungen { position:fixed; bottom:18px; right:18px; z-index:200; display:flex; flex-direction:column; gap:8px; max-width:380px; }
.meldung {
  background:var(--flaeche); border:1px solid var(--rand); border-left:3px solid var(--akzent);
  border-radius:var(--r); padding:11px 14px; box-shadow:var(--schatten-gross);
  font-size:13.5px; animation:rein .2s cubic-bezier(.2,.8,.3,1); display:flex; align-items:flex-start; gap:9px;
}
@keyframes rein { from { opacity:0; transform:translateX(16px); } }
.meldung.erfolg { border-left-color:var(--gruen); }
.meldung.fehler { border-left-color:var(--rot); }
.meldung.warn   { border-left-color:var(--gelb); }
.meldung .m-symbol { font-size:15px; line-height:1.3; }
.meldung.geht { animation:raus .18s ease forwards; }
@keyframes raus { to { opacity:0; transform:translateX(16px); } }

/* --- Reiter --------------------------------------------------- */
.reiter { display:flex; gap:2px; border-bottom:1px solid var(--rand); margin-bottom:16px; overflow-x:auto; }
.reiter-punkt {
  padding:8px 13px; border:none; background:none; cursor:pointer; font-family:inherit;
  font-size:13.5px; font-weight:550; color:var(--text-2); border-bottom:2px solid transparent;
  margin-bottom:-1px; white-space:nowrap; display:flex; align-items:center; gap:6px;
}
.reiter-punkt:hover { color:var(--text); }
.reiter-punkt.aktiv { color:var(--akzent); border-bottom-color:var(--akzent); }
.reiter-zahl { background:var(--flaeche-3); border-radius:9px; padding:0 6px; font-size:11px; font-weight:700; }

/* --- Filterleiste --------------------------------------------- */
.filterleiste {
  display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px;
  padding:11px 13px; background:var(--flaeche); border:1px solid var(--rand); border-radius:var(--r-gross);
}
.filterleiste .eingabe { height:32px; width:auto; min-width:130px; }
.filterleiste .wachsend { flex:1; min-width:180px; }
.filter-marke {
  padding:5px 11px; border-radius:20px; border:1px solid var(--rand); background:var(--flaeche);
  font-size:12.5px; font-weight:550; cursor:pointer; font-family:inherit; color:var(--text-2);
}
.filter-marke:hover { border-color:var(--rand-stark); }
.filter-marke.aktiv { background:var(--akzent); border-color:var(--akzent); color:#fff; }

/* --- Datenliste ----------------------------------------------- */
.daten-liste { display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:13.5px; align-items:baseline; }
.daten-liste dt { color:var(--text-3); font-size:12.5px; }
.daten-liste dd { margin:0; font-weight:500; word-break:break-word; }

/* --- Zeilenliste ---------------------------------------------- */
.zeilen { display:flex; flex-direction:column; }
.zeile {
  display:flex; align-items:center; gap:11px; padding:10px 16px;
  border-bottom:1px solid var(--rand);
}
.zeile:last-child { border-bottom:none; }
.zeile.klickbar { cursor:pointer; }
.zeile.klickbar:hover { background:var(--flaeche-2); }
.zeile-inhalt { flex:1; min-width:0; }
.zeile-titel { font-weight:550; font-size:13.5px; }
.zeile-unter { font-size:12px; color:var(--text-3); margin-top:1px; }
.zeile-rechts { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }

.symbol-kreis {
  width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
  background:var(--flaeche-3); font-size:15px; flex:0 0 32px;
}
.symbol-kreis.gruen { background:var(--gruen-hell); }
.symbol-kreis.rot   { background:var(--rot-hell); }
.symbol-kreis.gelb  { background:var(--gelb-hell); }
.symbol-kreis.blau  { background:var(--akzent-hell); }

/* --- Pipeline (Interessenten) --------------------------------- */
.pipeline { display:flex; gap:12px; overflow-x:auto; padding-bottom:10px; }
.pipeline-spalte {
  flex:0 0 265px; background:var(--flaeche-2); border:1px solid var(--rand);
  border-radius:var(--r-gross); display:flex; flex-direction:column; max-height:calc(100vh - 220px);
}
.pipeline-kopf {
  padding:10px 13px; border-bottom:1px solid var(--rand); display:flex;
  align-items:center; gap:8px; font-weight:600; font-size:13px;
}
.pipeline-kopf .zahl {
  margin-left:auto; background:var(--flaeche-3); border-radius:9px;
  padding:1px 7px; font-size:11.5px; color:var(--text-2);
}
.pipeline-koerper { padding:9px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; flex:1; }
.pipeline-karte {
  background:var(--flaeche); border:1px solid var(--rand); border-radius:var(--r);
  padding:10px 11px; cursor:pointer; font-size:13px; box-shadow:var(--schatten);
}
.pipeline-karte:hover { border-color:var(--akzent); }
.pipeline-karte .name { font-weight:600; margin-bottom:3px; }
.pipeline-karte .zeile { padding:0; border:none; font-size:12px; color:var(--text-3); gap:5px; }

/* --- Fortschritt ---------------------------------------------- */
.balken { height:7px; background:var(--flaeche-3); border-radius:20px; overflow:hidden; }
.balken > div { height:100%; background:var(--akzent); border-radius:20px; transition:width .35s ease; }
.balken.gruen > div { background:var(--gruen); }
.balken.rot   > div { background:var(--rot); }
.balken.gelb  > div { background:var(--gelb); }

/* --- Diagramm ------------------------------------------------- */
.saeulen { display:flex; align-items:flex-end; gap:5px; height:150px; padding-top:16px; }
.saeule-huelle { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; height:100%; justify-content:flex-end; }
.saeule-paar { display:flex; gap:2px; align-items:flex-end; width:100%; height:100%; }
.saeule { flex:1; border-radius:3px 3px 0 0; min-height:2px; transition:height .35s ease; position:relative; }
.saeule.soll { background:var(--rand-stark); }
.saeule.ist  { background:var(--akzent); }
.saeule-text { font-size:10.5px; color:var(--text-3); }

/* --- Sonstiges ------------------------------------------------ */
.stapel   { display:flex; flex-direction:column; gap:14px; }
.stapel.eng { gap:8px; }
.reihe    { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.reihe.eng { gap:5px; }
.abstand-oben { margin-top:16px; }
.zahl-mono { font-variant-numeric:tabular-nums; }
.gedimmt  { color:var(--text-3); }
.klein    { font-size:12.5px; }
.fett     { font-weight:600; }
.rechts   { text-align:right; }
.gruen-t  { color:var(--gruen); }
.rot-t    { color:var(--rot); }
.gelb-t   { color:var(--gelb); }
.trenner  { height:1px; background:var(--rand); margin:14px 0; }
.umbruch  { white-space:pre-wrap; word-break:break-word; }
.sterne   { color:#e8a33d; letter-spacing:1px; }
.verbergen{ display:none !important; }

.datei-ablage {
  border:2px dashed var(--rand-stark); border-radius:var(--r-gross);
  padding:26px 18px; text-align:center; cursor:pointer; color:var(--text-2);
  transition:border-color .12s, background .12s;
}
.datei-ablage:hover, .datei-ablage.dran { border-color:var(--akzent); background:var(--akzent-hell); }

.text-block {
  font-family:"Consolas", "SF Mono", Menlo, monospace; font-size:12.5px; line-height:1.65;
  background:var(--flaeche-2); border:1px solid var(--rand); border-radius:var(--r);
  padding:14px; white-space:pre-wrap; max-height:440px; overflow-y:auto;
}

/* --- Anpassung an kleine Bildschirme -------------------------- */
@media (max-width: 1100px) {
  .gitter.g4 { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .gitter.g3 { grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width: 820px) {
  .seitenleiste {
    position:fixed; left:0; top:0; z-index:90; transform:translateX(-100%);
    transition:transform .2s ease; box-shadow:var(--schatten-gross);
  }
  .seitenleiste.offen { transform:none; }
  .menue-knopf { display:inline-flex; }
  .inhalt { padding:14px 13px 60px; }
  .gitter.g2, .gitter.g3, .gitter.g4 { grid-template-columns:1fr; }
  .feld.s2, .feld.s3, .feld.s4, .feld.s6, .feld.s8, .feld.s9 { grid-column:span 12; }
  .dialog-hinter { padding:10px; }
  .dialog { max-height:calc(100vh - 20px); }
  .meldungen { left:12px; right:12px; bottom:12px; max-width:none; }
  .kopfleiste { padding:0 12px; }
  table.tabelle td, table.tabelle th { padding:8px 9px; }
  .daten-liste { grid-template-columns:1fr; gap:2px 0; }
  .daten-liste dd { margin-bottom:8px; }
}

.dunkel-schleier {
  position:fixed; inset:0; background:rgba(15,20,28,.45); z-index:85; display:none;
}
.dunkel-schleier.sichtbar { display:block; }

@media print {
  .seitenleiste, .kopfleiste, .seiten-kopf .aktionen, .knopf, .meldungen { display:none !important; }
  .inhalt { padding:0; }
  .karte { border:1px solid #ccc; box-shadow:none; break-inside:avoid; }
  body { background:#fff; }
}