:root{
  --bg:#f4f6f8; --flaeche:#fff; --rand:#e1e6ec; --rand-stark:#c5cdd6;
  --text:#1f2732; --text-leise:#5b6673; --text-still:#8b95a1;
  /* Farben bedeuten etwas: Blau = Hauptaktion und aktueller Schritt, Gruen = erledigt/gut,
     Gelb = pruefen, Rot = Fehler und Geld. Das Oelke-Rot ist die Marke (Kopf, Gesamtsumme). */
  --blau:#0f66b0; --blau-weich:#e8f1fb; --blau-tief:#0b5290;
  --gruen:#12894f; --gruen-weich:#e7f6ee;
  --gelb:#8a5a00; --gelb-weich:#fdf3dc;
  --rot:#c8141c; --rot-weich:#fdeceb;
  --marke:#c8141c;
  /* Die drei Punkte aus dem Oelke-Logo (Besprechung 18.09.2026: als Wiedererkennung aufgreifen).
     Nur als Akzent — Kante und Punkt der Kacheln; fuer Text sind sie zu hell, da gelten die
     dunkleren Toene oben. Gruen = nichts offen, Rot = Geld und Nachfassen, Blau = ruhig. */
  --punkt-gruen:#00a54f; --punkt-rot:#ee1d23; --punkt-blau:#00aeef;
  --akzent:var(--blau); --akzent-weich:var(--blau-weich); --auf-blau:#fff;
  --schatten:0 1px 2px rgba(20,30,45,.05),0 6px 18px rgba(20,30,45,.05);
  --radius:10px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#12161c; --flaeche:#1a2028; --rand:#2b333e; --rand-stark:#3b4552;
    --text:#e8ecf1; --text-leise:#a3adb9; --text-still:#77828f;
    --blau:#7fb2ff; --blau-weich:#16233a; --blau-tief:#5f9cf0;
    --gruen:#5cd196; --gruen-weich:#163022; --gelb:#e8b463; --gelb-weich:#33280f;
    --rot:#ff7b82; --rot-weich:#3a1c1f; --marke:#ff7b82; --auf-blau:#0f1720;
    --schatten:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.25);
  }
  :root:not([data-theme="light"]) .logo{filter:brightness(1.6)}
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}
a{color:var(--blau)}
button{font:inherit}

/* ---------- Kopf ---------- */
header{position:sticky;top:0;z-index:30;background:var(--flaeche);
  border-bottom:1px solid var(--rand);box-shadow:var(--schatten)}
.kopf{max-width:1500px;margin:0 auto;padding:8px 20px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo{height:34px;width:auto;display:block}
.marke-text b{font-size:15px;font-weight:650;letter-spacing:-.01em}
nav{display:flex;gap:2px;flex-wrap:wrap}
nav button{background:none;border:none;color:var(--text-leise);font-size:14px;
  padding:8px 13px;border-radius:8px;cursor:pointer}
nav button:hover{background:var(--bg);color:var(--text)}
nav button.an{background:var(--blau-weich);color:var(--blau-tief);font-weight:650}
.kopf-rechts{margin-left:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ampeln{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ampel{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:3px 8px;
  border-radius:99px;border:1px solid var(--rand);background:var(--bg);white-space:nowrap;color:var(--text-leise)}
.ampel i{width:7px;height:7px;border-radius:99px;display:inline-block}
.ampel.gruen i{background:var(--gruen)} .ampel.gelb i{background:var(--gelb)} .ampel.rot i{background:var(--rot)}
.ampel.gelb{border-color:var(--gelb);background:var(--gelb-weich)}
.ampel.rot{border-color:var(--rot);background:var(--rot-weich)}
.ampel b{font-weight:600;color:var(--text)}

/* ---------- Grundgeruest ---------- */
main{max-width:1500px;margin:0 auto;padding:22px 20px 90px}
body{font-size:14px}
h1{font-size:24px;font-weight:650}
.karte{background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--radius);
  box-shadow:var(--schatten);padding:20px 22px;margin-bottom:18px}
.karte>h2,.karte-kopf h2{font-size:18px;margin-bottom:4px}
.karte>p.hilfe,.hilfe{color:var(--text-leise);margin:0 0 14px;font-size:13px;line-height:1.5}
.karte-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.karte-werkzeuge{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
label.feld.zeile{flex-direction:row;align-items:center;gap:8px;margin:0}
label.feld.zeile select,label.feld.zeile input{width:auto}
.verstecken{display:none!important}

/* ---------- Startseite ---------- */
.start-kopf{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:6px 0 18px}
.start-kopf .hilfe{margin:4px 0 0;font-size:14px}
.taste.gross{padding:12px 22px;font-size:15px;border-radius:10px}
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:18px;align-items:start}
.kachel{background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--radius);box-shadow:var(--schatten);
  padding:16px 18px;display:flex;flex-direction:column;gap:8px;min-height:120px}
.kachel .zahl-gross{font-size:30px;font-weight:650;line-height:1;font-variant-numeric:tabular-nums}
.kachel h3{font-size:13px;font-weight:650;text-transform:uppercase;letter-spacing:.05em;color:var(--text-leise)}
.kachel ul{list-style:none;margin:0;padding:0;font-size:13px}
.kachel li{display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-top:1px solid var(--rand)}
.kachel li a{color:var(--text);text-decoration:none;font-weight:500;cursor:pointer}
.kachel li a:hover{color:var(--blau)}
.kachel li small{color:var(--text-still);white-space:nowrap}
.kachel li small.spaet{color:var(--rot);font-weight:600}
/* Farben nach Dringlichkeit (Besprechung 18.09.2026): rot = Geld und Nachfassen, blau = ruhige
   Schritte, gruen = nichts offen, grau = Zusatzinfo. Die Farbe des Bereichs steht oben als Kante
   (Logo-Punkt), als Punkt vor dem Titel, im Titel selbst und in der Zahl — sonst nirgends. */
.kachel h3::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;
  vertical-align:1px;background:var(--punkt)}
.kachel{--punkt:var(--punkt-blau);border-top:3px solid var(--punkt)}
.kachel.leer{--punkt:var(--punkt-gruen);color:var(--text-still)} .kachel.leer h3{color:var(--gruen)}
.kachel.ruhig{--punkt:var(--punkt-blau)} .kachel.ruhig h3,.kachel.ruhig .zahl-gross{color:var(--blau-tief)}
.kachel.dringend{--punkt:var(--punkt-rot)} .kachel.dringend h3,.kachel.dringend .zahl-gross{color:var(--rot)}
.kachel .zahl-gross .bezug{font-size:13px;font-weight:500;color:var(--text-still);margin-left:8px;letter-spacing:0;
  font-variant-numeric:normal;vertical-align:middle}
.kachel .nichts-offen{font-size:13px;color:var(--gruen);font-weight:500}
.kachel.leer .zahl-gross:empty{display:none}
.kachel.leer{min-height:0}

/* Ablauf auf der Startseite: die Prozesskette zum Aufklappen */
details.ablauf{padding:12px 22px}
details.ablauf>summary{cursor:pointer;list-style:none;font-size:14px}
details.ablauf>summary::-webkit-details-marker{display:none}
details.ablauf>summary::before{content:"▸ ";color:var(--text-still)}
details.ablauf[open]>summary::before{content:"▾ "}
details.ablauf>summary .hilfe{margin:0;font-size:12.5px}
.ablauf-inhalt{display:flex;align-items:flex-start;gap:6px 6px;flex-wrap:wrap;padding:12px 0 4px}
.ablauf-gruppe{flex:0 0 auto}
.ablauf-gruppe h4{margin:0 0 6px;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-leise)}
.ablauf-schritte{display:flex;gap:4px;flex-wrap:wrap}
.ablauf-schritt{font:inherit;font-size:12.5px;display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;
  border:1px solid var(--rand);background:var(--flaeche);color:var(--text);cursor:pointer;white-space:nowrap}
.ablauf-schritt b{font-variant-numeric:tabular-nums;color:var(--blau-tief)}
.ablauf-schritt.leer{color:var(--text-still)} .ablauf-schritt.leer b{color:var(--text-still);font-weight:500}
.ablauf-schritt:hover{border-color:var(--blau)}
.ablauf-schritt.an{border-color:var(--blau);background:var(--blau-weich)}
.ablauf-pfeil{color:var(--rand-stark);align-self:center;padding-top:18px}

/* ---------- Reiter (Einstellungen) ---------- */
.reiter{display:flex;gap:4px;border-bottom:1px solid var(--rand);margin-bottom:18px;flex-wrap:wrap}
.reiter button{background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;padding:9px 14px;
  color:var(--text-leise);cursor:pointer;font-size:14px}
.reiter button:hover{color:var(--text)}
.reiter button.an{color:var(--blau-tief);border-bottom-color:var(--blau);font-weight:650}

/* ---------- „Mehr" — Aufklapp fuer Seltenes ---------- */
details.mehr>summary{list-style:none;cursor:pointer;display:inline-block;font-size:13px;color:var(--text-leise);
  padding:6px 12px;border:1px solid var(--rand-stark);border-radius:8px;background:var(--flaeche);user-select:none}
details.mehr>summary::-webkit-details-marker{display:none}
details.mehr>summary::after{content:" ▾";font-size:11px}
details.mehr[open]>summary{border-color:var(--blau);color:var(--blau)}
details.mehr>.mehr-inhalt{margin-top:8px}
details.mehr.mehr-oben{position:relative}
details.mehr.mehr-oben>.mehr-inhalt{position:absolute;bottom:calc(100% + 8px);right:0;background:var(--flaeche);
  border:1px solid var(--rand);border-radius:10px;box-shadow:0 10px 30px rgba(20,30,45,.18);padding:8px;
  display:flex;flex-direction:column;gap:4px;min-width:260px;margin:0}
.mehr-inhalt.menue .taste{width:100%;text-align:left;border-color:transparent}
.mehr-inhalt.menue .taste:hover{background:var(--bg)}
.knopfreihe-ende{justify-content:flex-end}

/* ---------- Formular ---------- */
.gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px 14px}
label.feld{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--text-leise)}
label.feld>span{font-weight:600;color:var(--text)}
label.feld small{color:var(--text-still);font-weight:400}
input,select,textarea{font:inherit;color:var(--text);background:var(--flaeche);
  border:1px solid var(--rand-stark);border-radius:6px;padding:7px 9px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blau);outline-offset:-1px;border-color:var(--blau)}
input[type=checkbox]{width:auto;accent-color:var(--blau)}
label.schalter{flex-direction:row;align-items:center;gap:8px;align-self:end;padding-bottom:8px}
label.schalter>span{order:2}
fieldset{border:none;padding:0;margin:0 0 18px}
fieldset{padding:16px 0 4px;border-top:1px solid var(--rand);counter-increment:schritt}
fieldset:first-of-type{border-top:none;padding-top:4px}
#formular{counter-reset:schritt}
fieldset>legend{float:left;width:100%;font-size:15px;font-weight:650;color:var(--text);padding:0 0 12px;display:flex;align-items:center;gap:10px}
fieldset>.gitter,fieldset>div{clear:both}
fieldset>legend::before{content:counter(schritt);display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:99px;background:var(--blau-weich);color:var(--blau-tief);font-size:13px;font-weight:700}
fieldset>legend small{font-weight:400;color:var(--text-still);font-size:13px}
.knopfreihe{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}
/* STOERT_MICH 20: Leiste unter der Positionsliste — damit entsteht das Angebot */
.positions-leiste{margin-top:14px;padding:10px 0 4px;border-top:1px solid var(--rand)}
.positions-leiste .taste{padding:10px 20px;font-size:14.5px}
.taste{background:var(--blau);color:var(--auf-blau);border:1px solid var(--blau);padding:9px 18px;
  border-radius:8px;cursor:pointer;font-weight:600}
.taste:hover{filter:brightness(1.08)}
.taste.zweit{background:var(--flaeche);color:var(--text);border-color:var(--rand-stark);font-weight:500}
.taste.rot{background:var(--rot);border-color:var(--rot);color:#fff}
#draft-tabelle [data-weiter]{white-space:nowrap}
.taste.zweit:hover{background:var(--bg);filter:none}
.taste:disabled{opacity:.45;cursor:not-allowed;filter:none}
.taste.klein{padding:5px 11px;font-size:12.5px;font-weight:500}

/* ---------- Meldungen ---------- */
.meldung{border-radius:6px;padding:10px 13px;font-size:13px;margin:12px 0;border:1px solid}
.meldung.info{background:var(--blau-weich);border-color:var(--blau);color:var(--text)}
.meldung.gut{background:var(--gruen-weich);border-color:var(--gruen)}
.meldung.warn{background:var(--gelb-weich);border-color:var(--gelb)}
.meldung.fehler{background:var(--rot-weich);border-color:var(--rot)}
.meldung ul{margin:6px 0 0;padding-left:20px}
/* STOERT_MICH 24: Meldung mit ✕ zum Wegklicken; Sprung zur Position blitzt kurz auf */
.meldung.kein-artikel{position:relative;padding-right:36px}
.meldung .meldung-zu{position:absolute;top:6px;right:6px}
tr.aufblitzen>td{background:var(--gelb-weich)!important;transition:background .3s}
.laden{display:inline-block;width:14px;height:14px;border:2px solid var(--rand-stark);
  border-top-color:var(--blau);border-radius:99px;animation:dreh .8s linear infinite;vertical-align:-2px}
@keyframes dreh{to{transform:rotate(360deg)}}

/* ---------- Tabellen ---------- */
.rollen{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:13px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-still);font-weight:700;padding:8px 8px;border-bottom:1px solid var(--rand-stark);
  white-space:nowrap;position:sticky;top:0;background:var(--flaeche);z-index:2}
td{padding:6px 8px;border-bottom:1px solid var(--rand);vertical-align:top}
tr.titelzeile td{background:var(--bg);font-weight:700;font-size:12px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--text-leise);padding:10px 8px 6px}
tr.aus td{opacity:.4}
tr.aus td .bez{text-decoration:line-through}
tr:hover>td{background:color-mix(in srgb,var(--blau-weich) 45%,transparent)}
#pos-tabelle td .aufklapp[data-hoch],#pos-tabelle td .aufklapp[data-runter],#pos-tabelle td .aufklapp[data-weg]{opacity:0;transition:opacity .12s}
#pos-tabelle tr:hover .aufklapp{opacity:1}
td.zahl,th.zahl{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.mini input{padding:4px 6px;font-size:12.5px}
.bez{font-weight:500}
.bez-unter{color:var(--text-still);font-size:11.5px;margin-top:2px}
.pos{color:var(--text-still);font-variant-numeric:tabular-nums;font-size:12px}
input.zelle{border-color:transparent;background:transparent;padding:4px 6px}
input.zelle:hover{border-color:var(--rand-stark);background:var(--flaeche)}
input.zelle.mg{width:62px;text-align:right} input.zelle.ek{width:88px;text-align:right}
input.zelle.lh{width:60px;text-align:right}
.marke-flag{display:inline-block;font-size:10.5px;padding:1px 6px;border-radius:99px;
  border:1px solid var(--rand-stark);color:var(--text-leise);margin:1px 3px 1px 0;white-space:nowrap}
.marke-flag.warn{border-color:var(--gelb);background:var(--gelb-weich);color:var(--gelb)}
.marke-flag.rot{border-color:var(--rot);background:var(--rot-weich);color:var(--rot)}
.marke-flag.gut{border-color:var(--gruen);background:var(--gruen-weich);color:var(--gruen)}
.marke-flag.eigen{border-color:var(--blau);background:var(--blau-weich);color:var(--blau)}
.aufklapp{background:none;border:none;color:var(--text-still);cursor:pointer;padding:2px 4px;font-size:12px}
tr.detail td{background:var(--bg);font-size:12.5px;color:var(--text-leise)}
tr.detail dl{display:grid;grid-template-columns:110px 1fr;gap:3px 12px;margin:0}
tr.detail dt{font-weight:600;color:var(--text)}
tr.detail dd{margin:0}
.alt{display:flex;gap:8px;align-items:baseline;padding:3px 0;flex-wrap:wrap}

/* ---------- Summenleiste ---------- */
.summen{position:sticky;bottom:0;z-index:20;background:var(--flaeche);border-top:3px solid var(--marke);
  box-shadow:0 -2px 12px rgba(20,30,45,.08);padding:10px 18px}
.summen-innen{max-width:1500px;margin:0 auto;display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.summe{display:flex;flex-direction:column;line-height:1.25}
.summe span{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-still);font-weight:700}
.summe b{font-size:15px;font-variant-numeric:tabular-nums}
.summe.gross b{font-size:20px;color:var(--marke)}
.summen .knopfreihe{margin:0 0 0 auto;align-items:center}
.summen .knopfreihe .taste{padding:10px 20px}

/* ---------- Artikelsuche ---------- */
.sucher{border:1px dashed var(--rand-stark);border-radius:6px;padding:12px;background:var(--bg);margin-top:10px;position:relative}
.sucher .sucher-zu{position:absolute;top:8px;right:8px}
#sucher{padding-right:40px}
.positions-leiste .taste.an:not(.zweit){box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.treffer{max-height:340px;overflow:auto;margin-top:10px;border:1px solid var(--rand);border-radius:6px;background:var(--flaeche)}
.treffer div.t{display:grid;grid-template-columns:1fr 110px 92px 80px;gap:10px;padding:8px 10px;
  border-bottom:1px solid var(--rand);cursor:pointer;align-items:center}
.treffer div.t:hover{background:var(--blau-weich)}
.treffer div.t:last-child{border-bottom:none}
.treffer .kt{font-size:12.5px}
.treffer .nr{font-size:11px;color:var(--text-still);font-variant-numeric:tabular-nums}
/* STOERT_MICH 25: Kasten unter einer Position im Stil der Trefferliste, mit ✕ oben rechts */
.detail-kasten{position:relative;padding-right:30px}
.detail-kasten .detail-zu{position:absolute;top:0;right:0}
.detail-titel{font-size:12px;font-weight:700;margin:10px 0 0;display:flex;gap:6px;align-items:center;cursor:help}
.treffer.vergleich{margin-top:6px;max-height:none}
.treffer.vergleich div.t{grid-template-columns:1fr 120px 104px 190px;cursor:default}
.treffer.vergleich div.t.im-angebot{background:var(--gruen-weich)}
.treffer .knopfzelle{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
@media(max-width:760px){.treffer div.t,.treffer.vergleich div.t{grid-template-columns:1fr;gap:2px}.treffer .knopfzelle{justify-content:flex-start}}

/* Heizkoerper-Zeilen: Kopf ueber dem Eingabefeld ausrichten */
#hk-tabelle th{text-align:left}
#hk-tabelle td{border-bottom:none;padding:3px 8px 3px 0}
#hk-tabelle input,#hk-tabelle select{padding:5px 7px}

/* ---------------------------------------------------------- Anmeldung */
.wer { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-still); }
.wer span { font-weight: 600; color: var(--text); }
.tor { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center;
       justify-content: center; background: rgba(24, 28, 34, .55); backdrop-filter: blur(3px); }
.tor-karte { width: 340px; max-width: calc(100vw - 32px); background: var(--flaeche);
             border: 1px solid var(--rand); border-radius: 12px; padding: 22px 22px 18px;
             box-shadow: 0 18px 50px rgba(0, 0, 0, .28); display: flex; flex-direction: column; gap: 12px; }
.tor-karte .marke { margin-bottom: 2px; }
.tor-karte .knopfreihe { margin-top: 4px; }
.tor-karte .taste { width: 100%; justify-content: center; }

/* Zwischensumme je Titel — wie in den alten Sykasoft-Angeboten */
tr.zwischen td{background:var(--bg);font-size:12.5px;border-top:1px solid var(--rand);
  border-bottom:2px solid var(--rand);padding-top:6px;padding-bottom:6px}
tr.titelzeile .aufklapp{text-transform:none;font-weight:400}
tr.titelzeile .aufklapp[disabled]{opacity:.3;cursor:default}

/* ---- Status mit Verlauf (Phase 14/15) ---- */
.stand-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:14px;
  padding:14px 16px;border-radius:10px;background:var(--bg);border:1px solid var(--rand)}
/* Weg zurueck, Sprung zu den Hinweisen, Hinweis-Karte unter der Tabelle */
.brotkrume{display:flex;gap:8px;align-items:center;font-size:13px;margin:-4px 0 10px;color:var(--text-still)}
.brotkrume a{color:var(--blau);text-decoration:none;font-weight:600}
.brotkrume a:hover{text-decoration:underline}
.hinweis-sprung{display:inline-block;margin-top:8px;font-size:12.5px;text-decoration:none;color:var(--gelb);font-weight:600}
.editor-hinweise .hinweise-titel{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-leise);margin-bottom:4px}
.editor-hinweise:not(:has(.meldung, details, .vk-kasten)){display:none}
.editor-hinweise .vk-kasten{background:var(--flaeche);border-color:var(--rand-stark)}
.summen.kopf-sichtbar #e-haupt{visibility:hidden}
.stand-kopf .satz{font-size:15px}
.stand-kopf .satz b{font-weight:650}
.stand-kopf .satz small{display:block;color:var(--text-leise);font-size:12.5px;margin-top:2px}
.stand-kopf.fertig{background:var(--gruen-weich);border-color:color-mix(in srgb,var(--gruen) 30%,transparent)}
.stand-kopf.verloren{background:var(--rot-weich);border-color:color-mix(in srgb,var(--rot) 30%,transparent)}
.status-leiste{margin-top:12px}
.status-leiste .kette{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.schritt{font:inherit;font-size:12px;padding:4px 10px;border-radius:99px;border:1px solid var(--rand);background:transparent;color:var(--text-leise);cursor:pointer}
.schritt:hover{border-color:var(--blau);color:var(--blau)}
.schritt.vorbei{color:var(--text-still);border-color:transparent;background:var(--bg)}
.schritt.vorbei::before{content:"✓ ";color:var(--gruen)}
.schritt.an{background:var(--blau);border-color:var(--blau);color:var(--auf-blau);font-weight:650}
.schritt.naechster{border-color:var(--blau);color:var(--blau-tief);border-style:solid}
.schritt.seite{color:var(--text-still);border-style:dashed}
.schritt.seite:hover{border-color:var(--rot);color:var(--rot)}
.schritt.seite.an{background:var(--rot);border-color:var(--rot);color:#fff}
.schritt-pfeil{color:var(--rand-stark);font-size:12px}
.status-form{margin-top:10px;padding:12px 14px;border:1px solid var(--rand);border-radius:10px;background:var(--flaeche)}
.status-leiste .verlauf{margin-top:8px;font-size:12.5px}
.status-leiste .verlauf summary{cursor:pointer;color:var(--text-still);list-style:none;display:inline-block}
.status-leiste .verlauf summary::-webkit-details-marker{display:none}
.status-leiste .verlauf summary::before{content:"▸ "}
.status-leiste .verlauf[open] summary::before{content:"▾ "}
.status-leiste .verlauf table{width:100%;margin-top:6px;border-collapse:collapse}
.status-leiste .verlauf th,.status-leiste .verlauf td{text-align:left;padding:3px 6px;border-bottom:1px solid var(--rand);font-size:12px;vertical-align:top;position:static}
.einkauf-haus{margin-top:6px;padding:8px 10px;border:1px solid var(--rand);border-radius:8px;font-size:12.5px}
.marke-flag.uebung{border-color:var(--rand-stark);background:var(--bg);color:var(--text-still);cursor:help}
.kopf-zeile{display:flex;gap:14px;flex-wrap:wrap;align-items:baseline}
.kopf-zeile h2{font-size:22px}
.kopf-zeile .meta{color:var(--text-leise);font-size:13px}
@media(max-width:900px){.kopf{gap:10px}.kopf-rechts{margin-left:0}.start-kopf h1{font-size:20px}}
/* ---- Phase 16: eingeplant, Checkliste je Haus ---- */
.eingeplant{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:13px}
.eingeplant>span:first-child{font-weight:600}
.eingeplant input{width:auto}
.eingeplant small{color:var(--text-still)}
.checkliste{margin-top:12px;border:1px solid var(--rand);border-radius:10px;padding:10px 12px;background:var(--flaeche)}
.checkliste-kopf{font-size:13px;margin-bottom:6px}
.check-zeile{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 6px;border-top:1px solid var(--rand)}
.check-zeile.an{background:var(--gruen-weich)}
.check-zeile.an b{text-decoration:line-through;color:var(--text-leise)}
.check-box{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-leise);cursor:pointer}
.check-box input{width:18px;height:18px;accent-color:var(--gruen)}
.check-meta{font-size:12px;color:var(--text-still)}
.check-knoepfe{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
a.taste{text-decoration:none;display:inline-block}
.check-zeile .einkauf-meldung{flex-basis:100%;font-size:12.5px}
.check-zeile .einkauf-meldung:empty{display:none}

/* Phase 19: Verkaufspreise aus dem Angebotscheck — Spalten nur, wenn ein Angebot VK hat */
#pos-tabelle .vk-spalte{display:none}
#pos-tabelle.mit-vk .vk-spalte{display:table-cell}
input.zelle.multi{width:72px;text-align:right}
input.zelle.multi.hand{border-color:var(--gelb)}
.vk-leer{color:var(--text-still)}
.vk-kasten .vk-offen{display:grid;grid-template-columns:44px 1fr auto minmax(220px,1.2fr) auto auto;gap:8px;align-items:center;padding:4px 0;border-top:1px solid var(--rand);font-size:12.5px}
.vk-kasten select.klein{padding:4px 6px;font-size:12.5px;max-width:100%}
#s-vk small{font-size:11px;font-weight:400;margin-left:4px}

/* ---------------------------------------------------------- Rollen (28.09.2026)
   Was nur admin darf, traegt die Klasse nur-admin. Ausblenden ist Bequemlichkeit — entscheiden tut
   immer der Server (Rechte-Tabelle in web/zugriff/rechte.py). */
body:not(.ist-admin) .nur-admin { display: none !important; }
.fenster-karte { width: 420px; }
.fenster-karte h2 { margin: 0; font-size: 17px; }
.fenster-karte .knopfreihe { display: flex; gap: 8px; }
.fenster-karte .knopfreihe .taste { width: auto; flex: 1; }
.rolle-flag { text-transform: lowercase; }
tr.gesperrt td { color: var(--text-leise); }

/* ---------- Bestellungen (Nils 23.09.2026): eine Zeile je Auftrag, je Haus ein Stand ---------- */
#bestell-tabelle .bestell-haus{display:flex;align-items:center;gap:6px;padding:2px 0;white-space:nowrap}
#bestell-tabelle .bestell-haus small{color:var(--text-still)}
#bestell-tabelle select.klein,#bestell-tabelle input.klein{padding:4px 6px;font-size:12.5px;width:auto}

/* STOERT_MICH (29.09.2026): Einkaufs-Kasten in einer Zeile */
.ek-zeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ek-warn{font-size:12.5px;font-weight:600;margin-top:4px}

/* STOERT_MICH 13: Fehler rot am Feld */
.feld-fehler, input.feld-fehler, select.feld-fehler { border-color: var(--rot) !important; box-shadow: 0 0 0 2px var(--rot-weich); }
.feld-fehler-text { display: block; color: var(--rot); font-size: 12px; font-weight: 600; margin-top: 3px; }

/* STOERT_MICH 8/10: Montage groß und auffällig, bis sie erledigt ist */
.montage-kasten { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding: 12px 16px;
  border: 2px solid var(--blau, #1f5fbf); border-radius: 10px; background: color-mix(in srgb, var(--blau, #1f5fbf) 7%, transparent); }
.montage-kasten.offen { border-color: var(--rot); background: var(--rot-weich); }
.montage-titel { font-size: 15px; font-weight: 650; }
.montage-datum { font-size: 20px; font-weight: 700; }
.montage-kasten.offen .montage-datum { font-size: 15px; color: var(--rot); }
.montage-eingabe { display: inline-flex; align-items: center; gap: 8px; }
.montage-kasten.gesetzt:not(.bearbeiten) .montage-eingabe { display: none; }

/* STOERT_MICH 18: Zeile öffnet per Doppelklick, Symbole statt Text */
#draft-tabelle tbody tr[data-oeffnen] { cursor: pointer; user-select: none; }
#draft-tabelle tbody tr[data-oeffnen]:hover td { background: var(--blau-weich); }
.aufklapp.symbol { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.aufklapp.muell:hover { color: var(--rot); border-color: var(--rot); }

/* STOERT_MICH 19: Nachfass-Mail */
.nf-zeile { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.umschalter { display: inline-flex; border: 1px solid var(--rand); border-radius: 8px; overflow: hidden; }
.umschalter button { border: 0; background: transparent; padding: 7px 14px; cursor: pointer; font: inherit; color: var(--text-leise); }
.umschalter button.an { background: var(--blau); color: #fff; }
.umschalter button.an.scharf, .umschalter button[data-modus="scharf"].an { background: var(--rot); }
.nf-hinweis { font-size: 12.5px; color: var(--text-leise); margin-top: 6px; }
.nf-hinweis.scharf { color: var(--rot); font-weight: 600; }
.nf-tabelle { margin-top: 10px; font-size: 12.5px; }
.nf-tabelle td.rot { color: var(--rot); font-weight: 600; }
.nf-zeile div.feld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-leise); }

/* STOERT_MICH 26: Eingabezeile unter der Positions-Leiste */
.leiste-eingabe{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;border:1px dashed var(--rand-stark);
  border-radius:6px;padding:10px 12px;background:var(--bg);margin-top:10px}
.leiste-eingabe .feld{margin:0;min-width:140px}
.leiste-eingabe .feld.breit{flex:1 1 280px}
.leiste-eingabe .aufklapp{align-self:center}
.positions-leiste .taste.zweit.an{border-color:var(--blau);background:var(--blau-weich)}
input.titel-name{font-weight:700;text-transform:none;letter-spacing:0;width:260px}

/* STOERT_MICH 28: kurze Meldung oben rechts statt alert() — verschwindet von selbst, ✕ klickt weg */
.meldung-stapel{position:fixed;top:14px;right:14px;z-index:95;display:flex;flex-direction:column;gap:8px;
  max-width:min(420px,calc(100vw - 32px));pointer-events:none}
.meldung.kurz{margin:0;display:flex;gap:10px;align-items:flex-start;box-shadow:0 6px 20px rgba(0,0,0,.14);
  pointer-events:auto;animation:einblenden .18s ease-out}
.meldung.kurz span{flex:1}
@keyframes einblenden{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* STOERT_MICH 29: gesperrte Liste ab Freigabe */
.sperre-zeile{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:0 0 10px;padding:8px 12px;
  border:1px solid var(--rand-stark);border-radius:6px;background:var(--bg);font-size:13px;color:var(--text-leise)}
.sperre-zeile span::before{content:"🔒 "}
#pos-tabelle.gesperrt input:disabled,#pos-tabelle.gesperrt select:disabled{background:transparent;border-color:transparent;color:inherit;opacity:1}
#pos-tabelle.gesperrt input[type=checkbox]:disabled{opacity:.55}
#pos-tabelle.gesperrt button:disabled{opacity:.3}