/* Aufbau ähnlich Plancraft (Henning, 19.10.2026): dunkle Seitenleiste, helle Fläche,
   weiße Karten, farbige Status-Etiketten. Farben: Blautöne, dazu die Markenfarbe aus dem Logo
   (--marke dunkles Braun, --holz helles Braun) für Logo und Markierungen. */
:root {
  --marke: #451e0c; --holz: #a26e3a;
  --leiste: #13294a; --leiste-text: #b9c7da; --leiste-aktiv: #234a7c;
  --ein: #2f6b5a; --bg: #f2f4f8; --fl: #ffffff; --text: #18202c; --leise: #5f6b7a; --linie: #e0e5ec;
  --akzent: #1d5fa8; --akzent-hover: #174d89; --akzent-text: #ffffff; --akzent-hell: #e4eefa;
  --warn: #b42318; --warnung-bg: #fdecea; --warnung-text: #7a1c14; --warnung-linie: #f5c2bd;
  --g-sammel: #2e6fb0; --g-vorgang: #9cc2e6; --g-vorgang-rand: #6f9fcf; --g-kappe: #8a8f98; --g-nr: #f1f3f6; --g-wahl: #a9d5a0; --g-wahl-text: #1f4d1a;
  --gut-bg: #daf3e3; --gut-text: #19703f;
  --abw-bg: #f6faf7; --abw-urlaub: #2f8f5b; --abw-hell: #e3f3e8; --abw-text: #1f6a40; --abw-grau: #e4e7ec; --abw-schule-linie: #c9b8ee; --abw-offen: #a46a00;
  --fl-pk: #c46a12; --fl-ust: #6b46c1;
  /* Angebotsmaske: Eingaben gelb, Formeln blau, Kostenarten farbig (Bilder vom 21.10.2026) */
  --eingabe-bg: #fff6c4; --eingabe-linie: #e8d36a; --eingabe-text: #4d4000; --formel-text: #1d4f8a; --titel-bg: #f6f8fb; --markiert: #fff9db;
  --art-lohn-bg: #e4eefa; --art-lohn: #1d5fa8; --art-mat-bg: #f4e9dd; --art-mat: #7a4a1c; --art-ger-bg: #dcf1f4; --art-ger: #0f6674;
  --art-sub-bg: #ece6f8; --art-sub: #5b3fa0; --art-son-bg: #eceff3; --art-son: #4a5563; --art-fahrt-bg: #e3f3e8; --art-fahrt: #2c6b3f;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px;
}
/* dunkel nach Systemeinstellung, außer jemand wählt ausdrücklich hell (data-theme) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --leiste: #0d1a2e; --leiste-aktiv: #1d3a62;
    --ein: #7fd0b2; --bg: #111822; --fl: #1a2331; --text: #e8edf4; --leise: #9aa7b8; --linie: #2b3747;
    --akzent: #5a9be0; --akzent-hover: #78b0ea; --akzent-text: #0d1a2e; --akzent-hell: #1d3352; --warn: #f97066;
    --warnung-bg: #3a1714; --warnung-text: #f9c9c3; --warnung-linie: #6b2620;
    --g-sammel: #5f9bd8; --g-vorgang: #3f6f9f; --g-vorgang-rand: #79a6d6; --g-kappe: #8792a2; --g-nr: #151d29; --g-wahl: #2f5a2a; --g-wahl-text: #cdeec6;
    --gut-bg: #173a26; --gut-text: #8fe0b0; --abw-bg: #18221c; --abw-urlaub: #3d9a68; --abw-hell: #1d3a28; --abw-text: #9fe0b8; --abw-grau: #2c323b; --abw-schule-linie: #5b4a8a; --abw-offen: #e0b050; color-scheme: dark;
    --eingabe-bg: #3a3310; --eingabe-linie: #7a6a1f; --eingabe-text: #f5e7a1; --formel-text: #8fbdf0; --titel-bg: #161f2c; --markiert: #2e2a14;
    --art-lohn-bg: #1d3352; --art-lohn: #8fbdf0; --art-mat-bg: #3a2a1a; --art-mat: #e8c39b; --art-ger-bg: #133b40; --art-ger: #8fdbe4;
    --art-sub-bg: #2e2548; --art-sub: #c8b6f2; --art-son-bg: #262f3b; --art-son: #b5c0cd; --art-fahrt-bg: #1f3426; --art-fahrt: #9fd3ae;
    --fl-pk: #f0a35e; --fl-ust: #b9a3f0;
  }
}
:root[data-theme="dark"] {
  --leiste: #0d1a2e; --leiste-aktiv: #1d3a62;
  --ein: #7fd0b2; --bg: #111822; --fl: #1a2331; --text: #e8edf4; --leise: #9aa7b8; --linie: #2b3747;
  --akzent: #5a9be0; --akzent-hover: #78b0ea; --akzent-text: #0d1a2e; --akzent-hell: #1d3352; --warn: #f97066;
  --warnung-bg: #3a1714; --warnung-text: #f9c9c3; --warnung-linie: #6b2620;
    --g-sammel: #5f9bd8; --g-vorgang: #3f6f9f; --g-vorgang-rand: #79a6d6; --g-kappe: #8792a2; --g-nr: #151d29; --g-wahl: #2f5a2a; --g-wahl-text: #cdeec6;
    --gut-bg: #173a26; --gut-text: #8fe0b0; --abw-bg: #18221c; --abw-urlaub: #3d9a68; --abw-hell: #1d3a28; --abw-text: #9fe0b8; --abw-grau: #2c323b; --abw-schule-linie: #5b4a8a; --abw-offen: #e0b050; color-scheme: dark;
    --eingabe-bg: #3a3310; --eingabe-linie: #7a6a1f; --eingabe-text: #f5e7a1; --formel-text: #8fbdf0; --titel-bg: #161f2c; --markiert: #2e2a14;
    --art-lohn-bg: #1d3352; --art-lohn: #8fbdf0; --art-mat-bg: #3a2a1a; --art-mat: #e8c39b; --art-ger-bg: #133b40; --art-ger: #8fdbe4;
    --art-sub-bg: #2e2548; --art-sub: #c8b6f2; --art-son-bg: #262f3b; --art-son: #b5c0cd; --art-fahrt-bg: #1f3426; --art-fahrt: #9fd3ae;
  --fl-pk: #f0a35e; --fl-ust: #b9a3f0;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); display: flex; min-height: 100vh; }

/* Seitenleiste */
#seitenleiste { width: 200px; flex: none; background: var(--leiste); color: var(--leiste-text); display: flex; flex-direction: column; padding: 14px 10px; position: sticky; top: 0; height: 100vh; }
#marke { background: #fff; border-radius: 10px; padding: 10px 14px; margin: 0 4px 18px; display: grid; place-items: center; }
#marke img { width: 96px; height: auto; display: block; }
#reiter { display: flex; flex-direction: column; gap: 2px; flex: 1; }
#reiter button { display: flex; align-items: center; gap: 11px; background: none; border: 0; padding: 9px 10px; border-radius: 8px; color: inherit; cursor: pointer; font: inherit; text-align: left; }
#reiter button svg { width: 19px; height: 19px; flex: none; }
#reiter button:hover { background: rgb(255 255 255 / 0.06); color: #fff; }
#reiter button.aktiv { background: var(--leiste-aktiv); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--holz); }
#version { font-size: 12px; padding: 8px 10px 0; opacity: 0.7; }

/* Inhalt */
main { flex: 1; min-width: 0; padding: 22px 28px; max-width: 1280px; }
.kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.kopf h1 { font-size: 24px; margin: 0; flex: 1; color: var(--text); }
h2 { font-size: 16px; margin: 26px 0 10px; }
.leiste { display: flex; gap: 8px; margin-bottom: 14px; align-items: center; flex-wrap: wrap; }
.leiste select, .leiste input { padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px; background: var(--fl); color: var(--text); font: inherit; }
button.haupt, a.knopf.haupt { display: inline-block; text-decoration: none; background: var(--akzent); color: var(--akzent-text); border: 0; border-radius: 8px; padding: 10px 18px; font: inherit; font-weight: 600; cursor: pointer; }
button.haupt:hover, a.knopf.haupt:hover { background: var(--akzent-hover); }
button.neben, a.neben { display: inline-block; background: var(--fl); color: var(--text); border: 1px solid var(--linie); border-radius: 8px; padding: 8px 14px; font: inherit; cursor: pointer; text-decoration: none; }
button.neben:hover, a.neben:hover { border-color: var(--leise); }

/* Tabellen als Karte */
table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--fl); border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; }
th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
th { font-size: 13px; color: var(--leise); font-weight: 600; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
td .unter { display: block; color: var(--leise); font-size: 13px; margin-top: 2px; }
tr.klickbar { cursor: pointer; }
tr.klickbar:hover td { background: var(--bg); }
.nur-schmal { display: none; }
td { overflow-wrap: break-word; }
td.zahl { white-space: nowrap; }
.anzahl { color: var(--leise); font-size: 13px; margin: 10px 2px; }

/* Status-Etiketten */
.etikett { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 13px; white-space: nowrap; background: #eef1f5; color: #4a5565; }
.etikett.angebot { background: #e4eefa; color: #1d5fa8; }
.etikett.auftrag { background: #d7ecfa; color: #0b5f96; }
.etikett.ausfuehrung { background: #fcefc3; color: #7a5600; }
.etikett.abgerechnet { background: #dcf1f4; color: #0f6674; }
.etikett.gewaehrleistung { background: #e6e8fb; color: #3c47a8; }
.etikett.abgeschlossen { background: #daf3e3; color: #19703f; }
.etikett.intern { background: #ece7f6; color: #5b3f8f; }

.hinweis { color: var(--leise); }
.fehler { color: var(--warn); }

/* Dialoge */
#dialog-huelle { position: fixed; inset: 0; background: rgb(10 20 35 / 0.4); display: grid; place-items: center; padding: 16px; z-index: 10; }
#dialog-huelle[hidden] { display: none; }
.dialog { background: var(--fl); border-radius: 12px; padding: 22px; width: min(480px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 12px 34px rgb(0 0 0 / 0.25); }
.dialog h2 { font-size: 18px; margin: 0 0 14px; }
.dialog .unterform { margin-top: 8px; padding: 4px 14px 12px; border: 1px solid var(--linie); border-left: 3px solid var(--akzent); border-radius: 8px; background: var(--titel-bg); }
.dialog .unterform h3 { font-size: 13px; margin: 10px 0 0; }
.dialog .unterform .knoepfe { margin-top: 10px; }
.dialog label { display: block; font-size: 13px; color: var(--leise); margin: 12px 0 4px; }
.dialog input, .dialog select, .dialog textarea, .vorlage-tabelle input, .vorlage-tabelle select { width: 100%; padding: 9px 10px; border: 1px solid var(--linie); border-radius: 8px; background: var(--fl); color: var(--text); font: inherit; }
.dialog input:focus, .dialog select:focus, .dialog textarea:focus { outline: 2px solid var(--akzent-hell); border-color: var(--akzent); }
.dialog .knoepfe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.dialog .knoepfe .links { margin-right: auto; }

/* Schmale Bildschirme: Leiste oben, waagerecht scrollbar */
@media (max-width: 800px) {
  body { flex-direction: column; }
  #seitenleiste { width: auto; height: auto; position: static; flex-direction: row; align-items: center; padding: 8px; gap: 6px; overflow-x: auto; }
  #marke { padding: 4px 6px; margin: 0 4px 0 0; }
  #marke img { width: 34px; }
  #version { display: none; }
  #reiter { flex-direction: row; }
  #reiter button { padding: 8px 10px; white-space: nowrap; }
  main { padding: 16px; }
  th.optional, td.optional { display: none; }
  .nur-schmal { display: inline; }
  th, td { padding: 11px 10px; }
  td .unter { font-size: 12px; }
}

/* Terminplan (Gantt) */
button.neben.an { background: var(--akzent-hell); border-color: var(--akzent); color: var(--akzent); font-weight: 600; }
.schalter { display: inline-flex; align-items: center; gap: 6px; color: var(--leise); font-size: 14px; }
.leiste .hinweis { font-size: 13px; margin-left: auto; }
.g-rahmen { --links: 600px; --sp-nr: 40px; --sp-name: 260px; --sp-dauer: 70px; --sp-vg: 70px; --sp-anfang: 96px; --sp-ende: 96px; --sp-res: 140px; position: relative; }
.gantt { overflow: auto; max-height: calc(100vh - 150px); background: var(--fl); border: 1px solid var(--linie); border-radius: 10px; position: relative; }
.g-inhalt { position: relative; }
.g-kopf { position: sticky; top: 0; z-index: 4; display: flex; background: var(--fl); border-bottom: 1px solid var(--linie); }
.g-links { position: sticky; left: 0; z-index: 2; width: var(--links); flex: none; display: grid; grid-template-columns: var(--sp-nr) minmax(var(--sp-name), 1fr) var(--sp-dauer) var(--sp-vg) var(--sp-anfang) var(--sp-ende) var(--sp-erl) var(--sp-res); align-items: stretch; height: 42px; background: var(--fl); font-size: 13px; overflow: hidden; }
.g-links > * { display: flex; align-items: center; min-width: 0; padding: 0 6px; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); white-space: nowrap; overflow: hidden; }
.g-links .zahl { display: block; line-height: 41px; text-align: right; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.g-links.kopf .zahl { line-height: normal; display: flex; justify-content: flex-end; }
.g-links .vg, .g-links .leute { text-overflow: ellipsis; }
.g-links > .nr { justify-content: center; background: var(--g-nr); color: var(--leise); font-variant-numeric: tabular-nums; cursor: grab; user-select: none; touch-action: none; }
.g-links > .nr:hover { color: var(--akzent); }
.g-zeile.gewaehlt .g-links > .nr { background: var(--g-wahl); color: var(--g-wahl-text); font-weight: 700; }
.g-zeile.gewaehlt .g-links > .name { outline: 2px solid var(--g-wahl); outline-offset: -2px; }
.g-zeile.gewaehlt + .g-balken, .g-zeile.gewaehlt { border-block: 1px solid var(--leise); }
.g-links.kopf { margin: 0; gap: 0; height: 44px; font-size: 12.5px; color: var(--leise); font-weight: 600; z-index: 5; }
.g-links.kopf > * { align-items: flex-end; padding-bottom: 6px; position: relative; text-overflow: ellipsis; }
.sp-griff { position: absolute; top: 0; right: -1px; bottom: 0; width: 8px; cursor: col-resize; touch-action: none; z-index: 1; }
.sp-griff:hover { background: var(--akzent-hell); border-right: 2px solid var(--akzent); }
.g-links.kopf > .name { background: var(--akzent-hell); color: var(--akzent); }
.g-zeit .reihe { display: flex; height: 22px; font-size: 11.5px; color: var(--leise); }
.g-zeit .reihe > div { border-left: 1px solid var(--linie); padding: 3px 4px; white-space: nowrap; overflow: clip; flex: none; }
/* Monats- und Wochenbeschriftung bleibt sichtbar, auch wenn der Anfang hinter der Tabelle liegt */
.g-zeit .reihe > div > span { position: sticky; left: calc(var(--links) + 4px); }
.g-zeit .reihe.unten > div { padding: 3px 3px; }
.g-zeit .reihe.z-tag > div, .g-zeit .reihe.z-woche > div { padding: 3px 0; text-align: center; }
/* Woche (Henning, 26.10.2026): jeder Tag eine schmale Zelle, Trennstrich nur am Montag */
.g-zeit .reihe.z-woche > div { font-size: 10px; letter-spacing: -0.3px; border-left-color: transparent; overflow: visible; }
.g-zeit .reihe.z-woche > div.mo { border-left-color: var(--linie); }
.g-zeit .reihe.z-monat > div { text-align: center; padding: 3px 0; }
.g-zeit .z-tag .frei, .g-zeit .z-tag .feiertag, .g-zeit .z-woche .frei, .g-zeit .z-woche .feiertag { color: var(--warn); }
.g-zeit .z-tag .reserve, .g-zeit .z-woche .reserve { color: var(--holz); }
.g-koerper { position: relative; }
.g-zeile { position: absolute; left: 0; right: 0; height: 42px; }
.g-zeile.p .g-links, .g-zeile.a .g-links { font-weight: 700; }
.g-zeile .name { gap: 2px; }
.g-zeile .name .text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.g-zeile .name.ebene0 { padding-left: 8px; }
.g-zeile .name.ebene1 { padding-left: 18px; }
.g-zeile .name.ebene2 { padding-left: 36px; font-weight: 400; }
.g-zeile .aktionen { display: flex; gap: 2px; opacity: 0; flex: none; }
.g-zeile:hover .aktionen, .g-zeile .aktionen:focus-within { opacity: 1; }
.g-zeile .name small { font-weight: 400; color: var(--leise); }
.g-zeile .vg { font-size: 12.5px; }
.g-links .klapp, .g-links .plus { background: none; border: 0; color: var(--text); cursor: pointer; font: inherit; font-size: 10px; padding: 0; width: 18px; height: 22px; border-radius: 5px; flex: none; }
.g-links .plus { font-size: 17px; color: var(--akzent); width: 22px; }
.g-links .klapp:hover, .g-links .plus:hover { background: var(--akzent-hell); }
.g-zeile.gezogen .g-links > * { background: var(--akzent-hell); color: var(--leise); }
.g-einfuege { position: absolute; left: 0; right: 0; height: 3px; background: var(--akzent); z-index: 6; pointer-events: none; box-shadow: 0 0 0 1px var(--fl); }
.g-balken { position: absolute; height: 42px; left: var(--links); right: 0; pointer-events: none; z-index: 1; }
.balken { position: absolute; top: 21px; height: 14px; pointer-events: auto; }
.balken.sammel { top: 22px; height: 11px; background: var(--g-sammel); border-inline: 3px solid var(--g-kappe); pointer-events: none; }
.b-name, .b-von, .b-bis { position: absolute; font-size: 11.5px; font-weight: 600; white-space: nowrap; pointer-events: none; color: var(--text); line-height: 15px; }
.b-name { top: 3px; transform: translateX(-50%); }
.b-von { top: 20px; transform: translateX(-100%); }
.b-bis { top: 20px; display: flex; gap: 6px; align-items: center; }
.b-leute { display: inline-flex; gap: 3px; font-weight: 400; }
.balken.vorgang { background: var(--g-vorgang); border: 1px solid var(--g-vorgang-rand); cursor: grab; touch-action: none; }
.balken.zieht { cursor: grabbing; opacity: 0.8; outline: 2px solid var(--akzent); }
.balken .griff-rechts { position: absolute; right: 0; top: 0; bottom: 0; width: 7px; cursor: ew-resize; }
.balken .griff-rechts:hover { background: var(--g-vorgang-rand); }
.balken.meilenstein { width: 12px; height: 12px; top: 22px; transform: rotate(45deg); background: var(--text); cursor: grab; touch-action: none; }
.g-schatten { position: absolute; top: 0; bottom: 0; left: var(--links); }
.g-schatten i { position: absolute; top: 0; bottom: 0; }
.g-schatten .frei { background: rgb(120 130 150 / 0.10); }
.g-schatten .feiertag { background: rgb(180 35 24 / 0.10); }
.g-schatten .reserve { background: repeating-linear-gradient(135deg, rgb(162 110 58 / 0.10) 0 4px, transparent 4px 8px); }
.g-schatten .heute { width: 2px; background: var(--warn); }
.g-schatten .monat { width: 0; border-left: 1px dotted var(--leise); opacity: 0.8; }
.g-pfeile { position: absolute; top: 0; left: var(--links); pointer-events: none; z-index: 1; overflow: visible; }
.g-pfeile path { fill: none; stroke: var(--leise); stroke-width: 1.2; }
.g-pfeile polygon { fill: var(--leise); }
.g-zeile .leute { display: flex; gap: 3px; overflow: hidden; cursor: pointer; white-space: nowrap; }
.g-zeile .leute .leer { color: var(--leise); font-size: 12px; opacity: 0; }
.g-zeile:hover .leute .leer { opacity: 1; }
.person { display: inline-block; font-size: 11px; line-height: 16px; padding: 0 5px; border-radius: 4px; background: var(--akzent-hell); color: var(--akzent); border: 1px solid transparent; }
.person.vorgemerkt { background: transparent; border: 1px dashed var(--leise); color: var(--leise); font-style: italic; }
.balken.konflikt { outline: 2px solid var(--warn); outline-offset: 1px; }
.warnung { background: var(--warnung-bg); color: var(--warnung-text); border: 1px solid var(--warnung-linie); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 14px; }
.warnung ul { margin: 4px 0 0; padding-left: 18px; }
.dialog.besetzung table { margin: 8px 0; font-size: 14px; }
.dialog.besetzung td { padding: 6px 8px; }
.dialog.besetzung td .neben { padding: 2px 8px; }

/* Startseite */
.kopf h1 .datum { font-size: 15px; font-weight: 400; color: var(--leise); margin-left: 8px; }
.start { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.karte { background: var(--fl); border: 1px solid var(--linie); border-radius: 10px; padding: 14px 16px; min-width: 0; }
.karte.breit { grid-column: 1 / -1; }
.karte-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.karte-kopf h2 { margin: 0; }
.karte-kopf .neben { padding: 5px 10px; font-size: 13px; }
.gruppe h3 { font-size: 13px; color: var(--leise); margin: 12px 0 4px; display: flex; gap: 6px; align-items: center; }
.gruppe h3 b { background: var(--bg); border-radius: 999px; padding: 0 7px; font-size: 12px; }
.gruppe.warn h3 { color: var(--warn); }
.gruppe .hinweis { margin: 2px 0; font-size: 14px; }
ul.aufgaben { list-style: none; margin: 0; padding: 0; }
ul.aufgaben li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--linie); }
ul.aufgaben li:last-child { border-bottom: 0; }
ul.aufgaben label { display: flex; gap: 8px; align-items: baseline; }
ul.aufgaben small { color: var(--leise); white-space: nowrap; }
ul.warnungen { list-style: none; margin: 8px 0 0; padding: 0; }
ul.warnungen li a { display: flex; gap: 10px; padding: 8px 10px; border-radius: 8px; color: inherit; text-decoration: none; margin-bottom: 6px; background: var(--bg); border-left: 3px solid var(--leise); }
ul.warnungen li a:hover { background: var(--akzent-hell); }
ul.warnungen li.ueberschneidung a, ul.warnungen li.kontostand a { border-left-color: var(--warn); }
ul.warnungen li.unbesetzt a, ul.warnungen li.freigabe a { border-left-color: var(--holz); }
ul.warnungen li.aufgabe a, ul.warnungen li.urlaub a { border-left-color: var(--akzent); }
ul.warnungen .symbol { width: 18px; text-align: center; flex: none; }
.einsatz-tabelle { overflow-x: auto; }
.einsatz-tabelle table { border: 0; border-radius: 0; font-size: 13px; }
.einsatz-tabelle th, .einsatz-tabelle td { padding: 6px 6px; vertical-align: top; min-width: 96px; }
.einsatz-tabelle tbody th { color: var(--text); font-size: 13px; min-width: 120px; }
.einsatz-tabelle .neue-woche { border-left: 2px solid var(--linie); }
.einsatz-tabelle tr.ohne th { color: var(--warn); }
/* Balken in der Projektfarbe, zweizeilig (Henning, 23.10.2026) */
.einsatz { display: block; background: var(--pf, var(--akzent)); color: #fff; border-radius: 6px; padding: 3px 8px; margin-bottom: 3px; line-height: 1.25; overflow: hidden; }
.einsatz small, .einsatz b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.einsatz small { font-size: 10.5px; opacity: 0.88; }
.einsatz b { font-size: 13px; font-weight: 600; }
.einsatz.vorgemerkt { background: var(--fl); border: 1.5px dashed var(--pf, var(--leise)); color: var(--text); }
.einsatz.vorgemerkt small { color: var(--leise); opacity: 1; }
tr.ohne .einsatz { box-shadow: inset 0 0 0 2px var(--warn); }
.einsatz-tabelle table { table-layout: fixed; width: 100%; }
.einsatz-tabelle thead th:first-child, .einsatz-tabelle tbody th { width: 150px; }
.einsatz-liste { display: none; }
/* „Wer macht was“ am Handy: Auswahl, Zeitraum, je Tag eine Zeile (Henning, 27.10.2026) */
.einsatz-liste { position: relative; }
.wmw-wahl { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 1.5px solid var(--akzent); border-radius: 10px; background: var(--akzent-hell); color: var(--text); font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.wmw-wahl b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wmw-wahl i { font-style: normal; color: var(--akzent); font-size: 13px; }
.wmw-kreis { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--akzent); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.wmw-kreis.alle { background: transparent; font-size: 18px; }
.wmw-menue { position: absolute; left: 0; right: 0; z-index: 20; margin-top: 4px; background: var(--fl); border: 1px solid var(--linie); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); overflow: hidden; max-height: 70vh; overflow-y: auto; }
.wmw-menue h4 { margin: 0; padding: 8px 14px 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); background: var(--bg); }
.wmw-option { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; padding: 12px 14px; border: 0; border-top: 1px solid var(--linie); background: none; color: var(--text); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.wmw-option:first-child { border-top: 0; }
.wmw-option small { color: var(--leise); font-size: 12px; }
.wmw-option.an { background: var(--akzent-hell); font-weight: 600; }
.wmw-option i { font-style: normal; color: var(--akzent); }
.wmw-mitglieder { margin: 6px 2px 0; }
.wmw-chips { margin: 10px 0 4px; }
.wmw-kw { margin: 14px 0 0; padding-bottom: 6px; border-bottom: 1px solid var(--linie); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); }
.wmw-tag { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.wmw-tag.heute { background: var(--akzent-hell); margin: 0 -12px; padding: 10px 12px; }
.wmw-datum { flex: none; width: 64px; display: flex; flex-direction: column; line-height: 1.2; }
.wmw-datum b { font-size: 16px; }
.wmw-datum small { color: var(--leise); font-size: 12px; }
.wmw-tag.heute .wmw-datum b, .wmw-tag.heute .wmw-datum small { color: var(--akzent); }
.wmw-datum.freitag b { color: var(--holz); }
.wmw-inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.wmw-eintrag { display: flex; flex-direction: column; gap: 1px; width: 100%; padding: 0 0 0 10px; border: 0; border-left: 4px solid var(--pf, var(--akzent)); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.wmw-eintrag.vorgemerkt { border-left-style: dashed; }
.wmw-eintrag small { color: var(--leise); font-size: 12.5px; }
.wmw-eintrag b { font-size: 15px; }
.wmw-wer { font-size: 12px; font-weight: 600; color: var(--akzent); }
.wmw-wer.warn { color: var(--warn); }
.wmw-frei { margin: 2px 0 0; font-style: italic; color: var(--leise); }
.liqui { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.liqui > div { background: var(--bg); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.liqui b { font-size: 17px; font-variant-numeric: tabular-nums; }
.liqui small { color: var(--leise); font-size: 12px; }
@media (max-width: 800px) {
  .start { grid-template-columns: 1fr; }
  .einsatz-tabelle { display: none; }
  .einsatz-liste { display: block; }
  .liqui { grid-template-columns: 1fr 1fr; }
}
.kalender-link { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.kalender-link b { width: 90px; }
.kalender-link input { flex: 1; min-width: 220px; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; font-size: 13px; }

/* Aufgaben: Kategorien und Filter (G4) */
.kategorie { display: inline-block; font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--akzent-hell); color: var(--akzent); white-space: nowrap; }
ul.aufgaben li .kategorie { margin-left: auto; align-self: center; }
.leiste .schalter { display: flex; gap: 6px; align-items: center; font-size: 14px; color: var(--leise); }
.dialog.kategorien { z-index: 11; width: min(400px, calc(100% - 32px)); }
.dialog.kategorien ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dialog.kategorien li, .dialog.kategorien form.neu { display: flex; gap: 6px; }
.dialog.kategorien form.neu { margin-top: 12px; }
.dialog.kategorien li .neben, .dialog.kategorien form.neu .neben { flex: none; padding: 6px 12px; }

/* Projektseite (P2): Kopf mit Status, Kacheln, Reiter darunter wie bei Plancraft */
.projekt-kopf h1 { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.projekt-kopf [data-a="bearbeiten"] { margin-left: auto; }
.projekt-kopf h1 .nummer { font-weight: 500; color: var(--leise); }
.projekt-kopf .zurueck { padding: 6px 12px; font-size: 18px; line-height: 1; }
.projekt-kopf select.etikett { border: 0; font: inherit; font-size: 14px; font-weight: 600; padding: 6px 12px; cursor: pointer; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kachel { background: var(--fl); border: 1px solid var(--linie); border-radius: 10px; padding: 14px 16px; min-width: 0; }
.kachel h3 { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--leise); }
.kachel h3 svg { width: 18px; height: 18px; }
.kachel p { margin: 4px 0; overflow-wrap: anywhere; }
.kachel .gross { font-size: 17px; }
.kachel a { color: var(--akzent); }
.kachel .hinweis { font-size: 13px; }
button.verweis { background: none; border: 0; padding: 0; color: var(--akzent); font: inherit; text-decoration: underline; cursor: pointer; }
dl.werte { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: 14px; }
dl.werte dt { color: var(--leise); }
dl.werte dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.projekt-teile { padding: 0; }
.teile-kopf { display: flex; align-items: center; gap: 12px; padding: 8px 16px 0; border-bottom: 1px solid var(--linie); flex-wrap: wrap; }
.teile { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.teile button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 10px 9px; font: inherit; font-weight: 600; color: var(--leise); cursor: pointer; white-space: nowrap; }
.teile button.aktiv { color: var(--text); border-bottom-color: var(--akzent); }
.teile button small { font-weight: 500; background: var(--bg); border-radius: 999px; padding: 1px 7px; margin-left: 3px; }
#teil-knopf .haupt, #teil-knopf .neben { padding: 7px 14px; margin-bottom: 8px; }
#teil { padding: 12px 16px 16px; }
#teil table { border: 0; border-radius: 0; }
#teil .leer { margin: 8px 0; }
#teil .summe { text-align: right; margin: 10px 16px 0; font-variant-numeric: tabular-nums; }
#teil textarea { width: 100%; padding: 10px; border: 1px solid var(--linie); border-radius: 8px; background: var(--fl); color: var(--text); font: inherit; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.etikett.zahlung-gestellt { background: #fcefc3; color: #7a5600; }
.etikett.zahlung-bezahlt { background: #daf3e3; color: #19703f; }
.etikett.kosten-bestellt { background: #fcefc3; color: #7a5600; }
.etikett.kosten-bezahlt { background: #daf3e3; color: #19703f; }
.er-kopf { margin-top: 22px; }
@media (max-width: 800px) {
  .kacheln { grid-template-columns: 1fr; }
  #teil { padding: 8px 4px 12px; }
}
.aufgaben-tabelle th:first-child, .aufgaben-tabelle td:first-child { width: 1%; padding-right: 4px; }
@media (max-width: 800px) {
  .teile { flex-basis: 100%; }
  #teil-knopf { margin-left: auto; }
}

/* Bearbeiten in der Tabelle (wie MS Project) */
.g-zeile .zelle { cursor: text; }
.g-zeile .zelle:hover { background: var(--akzent-hell); color: var(--text); text-decoration: none; }
.g-zeile .zelle.bearbeitet { padding: 0; background: none; overflow: visible; }
.g-eingabe { width: 100%; min-width: 0; height: 26px; padding: 2px 5px; font: inherit; font-size: 13px; border: 1px solid var(--akzent); border-radius: 4px; background: var(--fl); color: var(--text); box-sizing: border-box; }
.g-zeile.ausgewaehlt { background: var(--akzent-hell); }
.g-zeile.ausgewaehlt .g-links { background: var(--akzent-hell); }
.g-links .weg { background: none; border: 0; color: var(--leise); cursor: pointer; font: inherit; font-size: 12px; padding: 0; width: 22px; height: 22px; border-radius: 5px; opacity: 0; }
.g-zeile:hover .weg, .g-links .weg:focus-visible { opacity: 1; }
.g-links .weg:hover { background: var(--warnung-bg, var(--akzent-hell)); color: var(--warn); }
.g-links .weg.sicher { opacity: 1; width: auto; padding: 0 4px; background: var(--warn); color: #fff; font-weight: 600; font-size: 11px; }
.g-meldung:empty { display: none; }
@media (hover: none) { .g-links .weg, .g-zeile .aktionen { opacity: 1; } }
/* Trennleiste zwischen Tabelle und Zeitplan (Henning, 20.10.2026) */
.g-trenner { position: absolute; top: 1px; bottom: 1px; left: calc(var(--links) - 2px); width: 7px; cursor: col-resize; z-index: 8; touch-action: none; border-inline: 1px solid var(--linie); background: var(--g-nr); }
.g-trenner:hover, .g-trenner.zieht { background: var(--akzent-hell); border-color: var(--akzent); }

/* Zoom an der Zeitskala und Abschläge als Meilensteine (Henning, 20.10.2026) */
.g-zeit { cursor: ew-resize; touch-action: none; user-select: none; }
.zahlung-ms { position: absolute; top: 19px; width: 18px; height: 18px; pointer-events: auto; cursor: pointer; z-index: 2;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: color-mix(in srgb, var(--farbe) 30%, var(--fl)); color: var(--farbe); }
.zahlung-ms.gestellt { background: color-mix(in srgb, var(--farbe) 55%, var(--fl)); color: #fff; }
.zahlung-ms.bezahlt { background: var(--farbe); color: #fff; }
.zahlung-ms.aus { --farbe: var(--warn); }
.g-links .g-raten.aus { color: var(--warn); margin-left: 6px; }
.g-links .g-raten { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0; text-align: left; font-weight: 400; }
.vorschlag { display: grid; gap: 10px; justify-items: start; padding: 4px 0 8px; }
.vorschlag p { margin: 0; max-width: 65ch; color: var(--leise); }

/* Liquidität (Henning, 21.10.2026): Reiter Lage / Monatsplan / Alle Zahlungen, Zeitraum 4 Wochen bis 3 Monate */
.liqui-leiste .hinweis { margin-left: 0; }
.liqui-zeit { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.chip-knopf { padding: 5px 12px; border: 1px solid var(--linie); border-radius: 99px; background: var(--fl); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.chip-knopf.an { background: var(--akzent-hell); border-color: var(--akzent); color: var(--akzent); font-weight: 600; }
.liqui-reiter { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.liqui-seite { display: grid; gap: 14px; }
.liqui-lage { display: grid; grid-template-columns: minmax(200px, auto) 1fr; gap: 10px 28px; align-items: center; border-left: 6px solid var(--gut-text); }
.liqui-lage.gelb { border-left-color: var(--eingabe-linie); }
.liqui-lage.rot { border-left-color: var(--warn); }
.karte .karte.liqui-lage { border-top: 0; border-right: 0; border-bottom: 0; border-radius: 0; padding: 4px 0 4px 14px; margin-bottom: 12px; }
.liqui-frei { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.liqui-frei .gross { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.liqui-frei .hinweis { font-size: 13px; }
.liqui-satz { min-width: 0; }
.liqui-satz p { margin: 6px 0 0; font-size: 15px; text-wrap: pretty; }
.liqui-satz p.hinweis { font-size: 14px; }
.ampel-chip { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--gut-bg); color: var(--gut-text); }
.ampel-chip.gelb { background: var(--eingabe-bg); color: var(--eingabe-text); }
.ampel-chip.rot { background: var(--warnung-bg); color: var(--warnung-text); }
.liqui-kurve h2, .liqui-liste h2 { font-size: 15px; margin: 0; }
.liqui-kurve .zahnrad { white-space: nowrap; }
.kurve-huelle { overflow-x: auto; }
.liqui-svg { display: block; width: 100%; height: auto; overflow: visible; }
.liqui-svg .gitter { stroke: var(--linie); stroke-width: 1; vector-effect: non-scaling-stroke; }
.liqui-svg .gitter.null { stroke: var(--leise); }
.liqui-svg text { font-size: 11px; fill: var(--leise); }
.liqui-svg .grenz-flaeche { fill: var(--warnung-bg); opacity: 0.7; }
.liqui-svg .grenze { stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.liqui-svg .grenz-text { fill: var(--warn); }
.liqui-svg .stand-flaeche { fill: var(--akzent); opacity: 0.08; }
.liqui-svg .stand-linie { fill: none; stroke: var(--akzent); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.liqui-svg .ein-linie { fill: none; stroke: var(--gut-text); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.liqui-svg .aus-linie { fill: none; stroke: var(--warn); stroke-width: 2; stroke-dasharray: 6 3; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.liqui-svg .stand-punkt { fill: var(--fl); stroke: var(--akzent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.liqui-svg .stand-punkt.an { fill: var(--akzent); }
.liqui-svg .heute-punkt { fill: var(--akzent); }
.liqui-svg .heute-text { fill: var(--akzent); font-weight: 700; }
.liqui-svg .tief-punkt { fill: var(--fl); stroke: var(--holz); stroke-width: 3; vector-effect: non-scaling-stroke; }
.liqui-svg .tief-text { fill: var(--holz); font-weight: 700; }
.liqui-svg .woche-ziel { fill: transparent; cursor: pointer; }
.liqui-svg .woche-ziel:hover, .liqui-svg .woche-ziel.an { fill: var(--akzent); fill-opacity: 0.07; }
.liqui-svg .woche-ziel:focus-visible { outline: none; fill: var(--akzent); fill-opacity: 0.12; }
.kurve-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--leise); margin-top: 4px; }
.kurve-legende i { display: inline-block; width: 18px; height: 0; border-top: 3px solid; vertical-align: middle; margin-right: 5px; }
.kurve-legende .k-stand { border-color: var(--akzent); }
.kurve-legende .k-ein { border-color: var(--gut-text); }
.kurve-legende .k-aus { border-color: var(--warn); border-top-style: dashed; }
.kurve-legende .k-grenze { border-color: var(--warn); border-top-width: 2px; border-top-style: dotted; }
.liqui-kurve > .hinweis { margin: 4px 0 0; font-size: 12px; }
.liqui-woche { margin-top: 10px; padding: 10px 12px; background: var(--bg); border-radius: 8px; }
.liqui-woche h3 { font-size: 14px; margin: 0; }
.liqui-grenze { display: grid; gap: 8px; padding: 10px 12px; margin-bottom: 8px; background: var(--bg); border-radius: 8px; }
.liqui-grenze .schalter { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.liqui-grenze input[name=betrag] { width: 110px; padding: 6px 8px; border: 1px solid var(--linie); border-radius: 6px; background: var(--fl); color: var(--text); font: inherit; }
.liqui-grenze .knoepfe { display: flex; gap: 8px; justify-content: flex-end; }
.liqui-grenze p { margin: 0; }
.liqui-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.liqui-posten { width: 100%; border-collapse: collapse; margin-top: 6px; table-layout: fixed; }
.liqui-posten td { padding: 7px 4px; border-top: 1px solid var(--linie); font-size: 14px; vertical-align: top; }
.liqui-posten td.datum, .liqui-posten td:first-child { width: 86px; white-space: nowrap; color: var(--leise); }
.liqui-posten td.text { overflow-wrap: break-word; }
.liqui-posten td.zahl { width: 112px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.liqui-posten .ein { color: var(--gut-text); }
.liqui-posten .aus { color: var(--warn); }
.liqui-posten tr.ueber td { background: var(--warnung-bg); }
.liqui-posten tr.ueber td.datum { color: var(--warnung-text); }
.liqui-posten tr.mehr td { border-top: 1px dashed var(--linie); }
.liqui-posten tr.mehr button { text-decoration: none; font-weight: 600; }
.liqui-posten tfoot td { border-top: 2px solid var(--linie); font-weight: 700; }
.tag-ueber { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: var(--warnung-bg); color: var(--warn); white-space: nowrap; }
tr.ueber .tag-ueber { background: var(--fl); }
.liqui-plan-kopf { display: flex; gap: 8px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px; }
.liqui-plan-kopf > div { display: flex; gap: 6px; }
@media (max-width: 900px) {
  .liqui-lage { grid-template-columns: 1fr; }
  .liqui-zwei { grid-template-columns: 1fr; }
  .liqui-reiter { margin-left: 0; }
}
@media (max-width: 500px) {
  .liqui-posten td.datum, .liqui-posten td:first-child { width: 62px; font-size: 13px; white-space: normal; }
  .liqui-posten td.zahl { width: 84px; }
  .liqui-posten td { padding-inline: 2px; }
  .liqui-frei .gross { font-size: 26px; }
}
.liqui-tabelle td.ein { color: var(--ein); }
.liqui-tabelle .periode td:first-child { white-space: nowrap; }
.liqui-tabelle .pfeil { display: inline-block; width: 14px; color: var(--leise); }
.liqui-tabelle tr.periode.offen td { border-bottom-color: transparent; background: var(--akzent-hell); }
.liqui-tabelle tr.details > td { padding: 0 0 12px 22px; background: var(--akzent-hell); }
.posten-tabelle { width: 100%; background: var(--fl); border-radius: 8px; }
.posten-tabelle th, .posten-tabelle td { font-size: 13px; padding: 6px 10px; }
.posten-tabelle td.aus { color: var(--text); }
.posten-tabelle td.ein { color: var(--ein); font-weight: 600; }
.posten-tabelle tr.vorbei td { color: var(--leise); }
@media (max-width: 800px) {
  .liqui-tabelle th, .liqui-tabelle td { padding-inline: 6px; font-size: 13px; }
  .liqui-tabelle .periode td:first-child { white-space: normal; }
  .liqui-tabelle .periode small { display: block; }
  .liqui-tabelle tr.details > td { padding-left: 6px; }
  .liqui-tabelle td.zahl { white-space: normal; }
}

/* Projektseite wie Plancraft (Henning, 20.10.2026): links Übersicht und Dokumente, rechts offene Aufgaben */
.projekt-raster { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.projekt-haupt { display: grid; gap: 16px; min-width: 0; }
.projekt-raster .karte { margin: 0; }
/* wie die freigegebene Vorabansicht: oben drei gleich breite Kacheln, unten Zeitraum schmal und Baustelle doppelt breit */
.uebersicht-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "stunden kunde beschreibung" "zeitraum baustelle baustelle"; gap: 12px; padding: 12px 16px 16px; }
.uebersicht-kacheln .stunden { grid-area: stunden; } .uebersicht-kacheln .kunde { grid-area: kunde; }
.uebersicht-kacheln .zeitraum { grid-area: zeitraum; } .uebersicht-kacheln .baustelle { grid-area: baustelle; }
.uebersicht-kacheln .beschreibung { grid-area: beschreibung; display: flex; flex-direction: column; }
.uebersicht-kacheln .kachel h3 { font-size: 11.5px; margin-bottom: 8px; }
/* Eckdaten ohne Auftrag (Henning 22.10.2026), seit 24.10.2026 ganz unten über die ganze Breite und einklappbar; der gerechnete Wert gestrichelt */
.uebersicht-kacheln.mit-eckdaten { grid-template-areas: "stunden kunde beschreibung" "zeitraum baustelle baustelle" "eckdaten eckdaten eckdaten"; }
.uebersicht-kacheln .eckdaten { grid-area: eckdaten; }
.kachel.eckdaten h3 small { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; }
.kachel.eckdaten h3 { margin-bottom: 8px; }
.eck-pfeil { display: inline-flex; align-items: center; gap: inherit; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.eck-pfeil .pfeil { font-size: 13px; transition: transform .15s; }
.kachel.eckdaten.zu .pfeil { transform: rotate(-90deg); }
.kachel.eckdaten.zu { padding-bottom: 10px; }
.kachel.eckdaten.zu h3 { margin-bottom: 0; }
.kachel.eckdaten.zu > :not(h3), .kachel.eckdaten.zu .eck-lang, .kachel.eckdaten:not(.zu) .eck-kurz { display: none; }
.eck-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; margin-bottom: 10px; }
.eck-feld { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--leise); min-width: 0; }
.eck-eingabe { display: flex; align-items: center; gap: 4px; border: 1px solid var(--linie); border-radius: 6px; background: var(--fl); padding: 0 8px; }
.eck-eingabe:focus-within { border-color: var(--akzent); }
.eck-eingabe input { width: 7.5em; border: 0; background: none; font: inherit; font-size: 14px; color: var(--text); padding: 6px 0; text-align: right; outline: none; }
.eck-eingabe input[data-e="personen"], .eck-eingabe input[data-e="tage"], .eck-eingabe input[data-e="ro-prozent"] { width: 3.5em; }
.eck-eingabe input[data-e="stunden"] { width: 5em; }
.eck-feld.gerechnet .eck-eingabe { background: var(--akzent-hell); border-style: dashed; }
.eck-op { padding-bottom: 7px; color: var(--leise); }
.eck-teile { padding-left: 12px; border-left: 2px solid var(--linie); }
.eck-teile .eck-eingabe input { width: 6.5em; }
.kachel.beschreibung .text { flex: 1; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; border-radius: 6px; padding: 4px; margin: -4px; min-height: 40px; max-height: 7.5em; overflow: auto; }
.kachel.beschreibung .text:hover { background: var(--akzent-hell); }
.kachel.beschreibung textarea { width: 100%; padding: 8px; border: 1px solid var(--akzent); border-radius: 6px; background: var(--fl); color: var(--text); font: inherit; }
.kachel .stunden { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ring { width: 64px; height: 64px; flex: none; }
.ring circle { fill: none; stroke: var(--linie); stroke-width: 3; }
.ring circle.wert { stroke: var(--akzent); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 18px 18px; }
.ring text { font-size: 8px; text-anchor: middle; fill: var(--leise); font-weight: 600; }
.nachkalkulation { padding: 12px 16px 16px; }
.nachkalkulation .hinweis { max-width: 70ch; }
.kosten-kopf { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.kosten-kopf h3, h3.gruppe { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--leise); margin: 0; }
h3.gruppe { padding: 8px 0 6px; border-bottom: 1px solid var(--linie); margin-top: 8px; }
.dokumente, .ablage, .kommt, .aufgaben-liste { list-style: none; margin: 0; padding: 0; }
.dokumente li, .ablage li { border-bottom: 1px solid var(--linie); }
.dokument, .ablage .eintrag { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 4px; background: none; border: 0; font: inherit; color: var(--text); text-align: left; cursor: pointer; text-decoration: none; flex-wrap: wrap; }
.dokument:hover, .ablage .eintrag:hover { background: var(--bg); }
.dokument .unter { display: block; font-size: 13px; color: var(--leise); }
.marken { display: flex; gap: 6px; flex-wrap: wrap; }
.marke { font-size: 13px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.marke.gut { background: var(--gut-bg); color: var(--gut-text); }
.marke.schlecht { background: var(--warnung-bg); color: var(--warnung-text); }
.marke.offen { background: var(--akzent-hell); color: var(--akzent); }
.marke.grau { background: var(--bg); color: var(--leise); border: 1px solid var(--linie); }
.marke.dunkel { background: var(--text); color: var(--fl); }
.kommt li { padding: 6px 0; color: var(--leise); font-size: 14px; }
.kommt b { color: var(--text); font-weight: 600; }
.pfad { font-size: 14px; padding: 4px 0 8px; overflow-wrap: anywhere; }
.ablage .eintrag { justify-content: flex-start; }
.ablage .eintrag .name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ablage .eintrag .hinweis { font-size: 13px; }
.projekt-aufgaben { padding: 14px 16px; position: sticky; top: 12px; }
.aufgaben-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.aufgaben-kopf h2 { font-size: 18px; margin: 0; }
.aufgaben-kopf h2 small { font-size: 13px; font-weight: 500; background: var(--bg); border-radius: 999px; padding: 1px 8px; margin-left: 4px; color: var(--leise); }
.aufgaben-kopf .haupt { padding: 6px 12px; }
.aufgaben-filter { display: flex; gap: 10px; align-items: center; margin: 10px 0 6px; flex-wrap: wrap; }
.aufgaben-filter select { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--linie); border-radius: 8px; background: var(--fl); color: var(--text); font: inherit; font-size: 14px; }
.aufgaben-liste li { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.aufgaben-liste input { margin-top: 4px; flex: none; }
.aufgaben-liste .aufgabe { flex: 1; min-width: 0; background: none; border: 0; padding: 0; font: inherit; color: var(--text); text-align: left; cursor: pointer; display: grid; gap: 3px; }
.aufgaben-liste .aufgabe:hover .text { color: var(--akzent); }
.aufgaben-liste .text { overflow-wrap: anywhere; }
.aufgaben-liste .meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--leise); }
.aufgaben-liste .erledigt .text { text-decoration: line-through; color: var(--leise); }
@media (max-width: 1100px) {
  .projekt-raster { grid-template-columns: 1fr; }
  .projekt-aufgaben { position: static; }
}
@media (max-width: 800px) {
  .uebersicht-kacheln { grid-template-columns: 1fr; grid-template-areas: "stunden" "kunde" "zeitraum" "baustelle" "beschreibung"; padding: 10px 4px; }
  .uebersicht-kacheln.mit-eckdaten { grid-template-areas: "stunden" "kunde" "zeitraum" "baustelle" "beschreibung" "eckdaten"; }
  .kachel.eckdaten h3 { flex-wrap: wrap; } .kachel.eckdaten h3 small { margin-left: 0; }
}
.g-links .g-raten.leise { color: var(--leise); text-decoration: none; }

/* Stufe 2: Anmeldung, wer angemeldet ist, Mitarbeiter-Ansicht */
/* Umschaltknopf neben einer Auswahl, z. B. vor | nach (Henning, 26.10.2026) */
.dialog .mit-umschalter { display: flex; gap: 8px; align-items: center; }
.dialog .mit-umschalter select { flex: 1; min-width: 0; }
.um-knopf { display: inline-flex; flex: none; border: 1.5px solid var(--akzent); border-radius: 8px; overflow: hidden; }
.um-knopf button, .dialog .um-knopf button { background: none; border: 0; padding: 7px 14px; font: inherit; color: var(--akzent); cursor: pointer; }
.um-knopf button + button { border-left: 1px solid var(--akzent); }
.um-knopf button.an, .dialog .um-knopf button.an { background: var(--akzent); color: var(--akzent-text, #fff); font-weight: 600; }
.dialog .vorschlag-knopf { margin-top: 6px; }
.dialog .hilfe { display: block; font-size: 12px; color: var(--leise); margin-top: 4px; }
#wer { font-size: 13px; padding: 10px 10px 0; border-top: 1px solid rgb(255 255 255 / 0.08); display: flex; flex-direction: column; gap: 4px; }
#wer:empty { display: none; }
#wer span { color: #fff; display: flex; flex-direction: column; }
#wer small { color: var(--leiste-text); }
#wer label { color: var(--leiste-text); }
#wer select { width: 100%; font: inherit; padding: 5px 6px; border-radius: 6px; border: 1px solid rgb(255 255 255 / 0.2); background: var(--leiste-aktiv); color: #fff; }
#wer .verweis { color: var(--leiste-text); text-align: left; padding: 0; }
#wer .verweis:hover { color: #fff; }
#wer .konto { display: none; }
body.abgemeldet #seitenleiste { display: none; }
body.abgemeldet #inhalt { display: grid; place-items: center; min-height: 100vh; }
.anmeldung { background: var(--fl); border: 1px solid var(--linie); border-radius: 14px; padding: 26px 24px; width: min(380px, 100%); display: flex; flex-direction: column; }
.anmeldung img { width: 110px; align-self: center; margin-bottom: 6px; }
.anmeldung h1 { font-size: 22px; margin: 6px 0 4px; text-align: center; }
.anmeldung label { font-size: 13px; color: var(--leise); margin: 14px 0 4px; }
.anmeldung input { font: inherit; font-size: 17px; padding: 11px 12px; border-radius: 8px; border: 1px solid var(--linie); background: var(--bg); color: var(--text); }
.anmeldung button.haupt { margin-top: 18px; padding: 13px 18px; font-size: 17px; }
.anmeldung .fehler:empty { display: none; }
.anmeldung .hinweis { font-size: 13px; text-align: center; margin: 12px 0 0; }
.meine-einsaetze { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.tag-karte h2 { font-size: 16px; margin: 0 0 8px; }
.tag-karte.heute h2 { color: var(--akzent); }
.einsatz-karte { background: var(--fl); border: 1px solid var(--linie); border-radius: 12px; padding: 14px 16px; margin-bottom: 8px; }
.einsatz-karte h3 { margin: 0 0 4px; font-size: 17px; }
.einsatz-karte p { margin: 6px 0 0; }
.einsatz-karte .ort { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--leise); }
@media (max-width: 800px) {
  #wer { flex-direction: row; align-items: center; border: 0; padding: 0 0 0 6px; white-space: nowrap; margin-left: auto; }
  #wer span, #wer label, #wer .verweis { display: none; }
  #wer .konto { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--leiste-aktiv); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
  #wer select { width: auto; }
}

/* Personal: Stammdaten, Urlaub, Arbeitszeitmodell, Verfügbarkeit (M8: ganz frei grau schraffiert, teilweise halb gefüllt) */
.personal-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.personal-raster .breit { grid-column: 1 / -1; }
.personal-raster > .karte { min-width: 0; }
#modelle, #abw { overflow-x: auto; }
.kopf .zurueck { margin-right: 12px; }
dl.werte { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
dl.werte dt { color: var(--leise); font-size: 13px; }
dl.werte dd { margin: 0; }
.urlaub-zahlen { display: flex; flex-wrap: wrap; gap: 10px; }
.urlaub-zahlen div { display: flex; flex-direction: column; padding: 8px 12px; border: 1px solid var(--linie); border-radius: 8px; min-width: 76px; }
.urlaub-zahlen small { color: var(--leise); font-size: 12px; }
.urlaub-zahlen b { font-size: 20px; }
.urlaub-zahlen .rest { background: var(--akzent-hell); border-color: transparent; }
.streifen { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; }
.s-tag { position: relative; border: 1px solid var(--linie); border-radius: 6px; padding: 4px 2px; text-align: center; display: flex; flex-direction: column; font-size: 11px; color: var(--leise); min-height: 58px; }
.s-tag b { color: var(--text); font-size: 12px; margin-top: auto; }
.s-tag.montag { border-left: 2px solid var(--leise); }
.s-tag.voll { background: var(--fl); }
.s-tag.teil { background: linear-gradient(to top, var(--akzent-hell) 50%, var(--fl) 50%); }
.s-tag.weg, .s-tag.aus { background: repeating-linear-gradient(135deg, var(--bg) 0 4px, var(--linie) 4px 6px); }
.s-tag.aus b { visibility: hidden; }
.s-tag i { position: absolute; top: 2px; right: 4px; font-style: normal; color: var(--warn); font-weight: 700; }
td.zahl, th.zahl { text-align: right; }
@media (max-width: 800px) { .personal-raster { grid-template-columns: 1fr; } }

/* Stunden (Z1): große Felder fürs Handy, mit Handschuhen bedienbar */
.tag-wahl { display: flex; align-items: center; gap: 6px; }
.tag-wahl input { font: inherit; padding: 7px 8px; border: 1px solid var(--linie); border-radius: 8px; background: var(--fl); color: var(--text); }
.tag-wahl b { min-width: 9em; text-align: center; }
.kopf .tag-wahl { margin-left: auto; }
.stunden-karte { max-width: 640px; }
.stunden-karte h2 { margin: 0 0 10px; font-size: 18px; }
.stunden-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--leise); min-width: 0; }
.stunden-form select { width: 100%; }
.stunden-form .zeiten select { width: auto; }
.stunden-form input, .stunden-form select { font: inherit; font-size: 17px; color: var(--text); padding: 10px; border: 1px solid var(--linie); border-radius: 8px; background: var(--bg); min-width: 0; }
.stunden-form .zeiten { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.stunden-form .anteil { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--linie); }
.stunden-form .anteil:first-child { border-top: 0; padding-top: 0; }
.stunden-form .anteil .std input { max-width: 9em; }
.stunden-form [data-a="mehr"] { margin-top: 10px; }
.stunden-form .rechnung { background: var(--akzent-hell); border-radius: 8px; padding: 10px 12px; margin: 14px 0 0; }
.stunden-form .rechnung b { font-size: 18px; }
.stunden-form .notiz { margin-top: 12px; }
.stunden-form .fehler:empty { display: none; }
.stunden-form .knoepfe { display: flex; gap: 10px; margin-top: 14px; }
.stunden-form .knoepfe .links { margin-right: auto; }
button.haupt.gross { padding: 14px 22px; font-size: 17px; flex: 1; }
.stunden-liste { max-width: 640px; margin-top: 18px; }
.stunden-liste h3 { font-size: 14px; margin: 14px 0 6px; display: flex; justify-content: space-between; color: var(--leise); }
.stunden-liste ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.stunden-liste .eintrag { width: 100%; display: grid; grid-template-columns: 5.5em 7.5em 4em 1fr; gap: 8px; align-items: baseline; text-align: left; font: inherit; color: var(--text); background: var(--fl); border: 1px solid var(--linie); border-radius: 8px; padding: 9px 12px; cursor: pointer; }
.stunden-liste .eintrag small { color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.umschalter { display: inline-flex; border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; }
.umschalter button { font: inherit; background: var(--fl); color: var(--text); border: 0; padding: 7px 14px; cursor: pointer; }
.umschalter button.aktiv { background: var(--akzent); color: var(--akzent-text); }
.summen { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.summen div { display: flex; flex-direction: column; background: var(--fl); border: 1px solid var(--linie); border-radius: 10px; padding: 10px 14px; min-width: 150px; }
.summen small { color: var(--leise); }
.summen b { font-size: 20px; }
.tabelle-rolle { overflow-x: auto; }
.dialog.breit { width: min(640px, 100%); }
.dialog label select, .dialog label input { display: block; width: 100%; }
@media (max-width: 800px) {
  .stunden-liste .eintrag { grid-template-columns: 5em 1fr auto; }
  .stunden-liste .eintrag small { grid-column: 1 / -1; }
  .kopf { flex-wrap: wrap; gap: 8px; }
  .kopf .tag-wahl { margin-left: 0; }
}
/* Urlaub (M10) */
.warnung-text { color: var(--warn); }
.urlaub-seite { max-width: 640px; }
.urlaub-konto h2 { margin: 0 0 4px; font-size: 18px; }
.urlaub-konto .gross { font-size: 18px; margin: 0; }
.urlaub-konto .gross b { font-size: 34px; color: var(--akzent); }
.urlaub-konto #antrag { margin-top: 14px; }
.urlaub-konto #antrag > button { width: 100%; }
.urlaub-form .zeiten.zwei { grid-template-columns: 1fr 1fr; }
.urlaub-form .haken { flex-direction: row; align-items: center; gap: 8px; margin-top: 10px; font-size: 15px; color: var(--text); }
.urlaub-form .haken[hidden] { display: none; }
.urlaub-form .haken input { width: 20px; height: 20px; }
.urlaub-seite > h3 { font-size: 14px; color: var(--leise); margin: 18px 0 6px; }
.antraege { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.antraege li p { margin: 4px 0 0; }
.antraege .zeile { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.antraege .antwort { font-style: italic; }
.antraege .verweis { margin-top: 6px; }
/* Mitarbeiter am Handy: drei Reiter und das Konto-Kürzel nebeneinander */
@media (max-width: 440px) {
  #seitenleiste { gap: 2px; padding: 8px 6px; }
  #reiter button { padding: 8px 6px; gap: 5px; }
}
/* T15/T16: berechnete Dauer, Tage mit weniger Leuten, Auslastung je Woche */
.g-zeile .d-auto { color: var(--akzent); font-size: 11px; }
.g-zeile .d-abw { color: var(--warn); font-size: 11.5px; }
.balken .reduziert { position: absolute; top: 0; bottom: 0; background: var(--fl); opacity: 0.55; pointer-events: none; }
/* einzeln freigegebener Freitag: im Balken als Arbeitstag umrandet */
.balken .freitag-an { position: absolute; top: -3px; bottom: -3px; border: 2px solid var(--ein); border-radius: 3px; pointer-events: none; }
.erl-menue .fr-wahl { gap: 4px 12px; }
.erl-menue .fr-wahl input { width: auto; margin: 0 4px 0 0; }
.erl-menue small.hinweis { color: var(--leise); }
/* Auslastung Team: feste Zeile im Kopf unter der Zeitskala (Henning, 22.10.2026) */
.g-kopf { flex-direction: column; }
.g-kopfzeile { display: flex; }
.g-auslastung { display: flex; height: 42px; background: var(--bg); border-top: 1px solid var(--linie); }
.g-auslastung .g-links { background: var(--bg); height: 41px; }
.g-auslastung .g-links > * { border-bottom: 0; }
.g-auslastung .name { font-weight: 600; }
.g-auslastung .name small { font-weight: 400; color: var(--leise); margin-left: 4px; }
.g-last-zeit { position: relative; flex: none; }
.last { position: absolute; top: 9px; height: 24px; border-radius: 4px; font-size: 11px; line-height: 24px; text-align: center; white-space: nowrap; overflow: hidden; pointer-events: auto; cursor: default; }
.last.voll { background: var(--gut-bg); color: var(--gut-text); }
.last.ueber { background: var(--warnung-bg); color: var(--warnung-text); border: 1px solid var(--warn); }
.last.leer { background: repeating-linear-gradient(135deg, rgb(120 130 150 / 0.18) 0 4px, transparent 4px 8px); color: var(--leise); border: 1px solid var(--linie); }
/* Abwesenheiten unter der Auslastung (Henning, 26.10.2026): je Person eine Zeile, einklappbar */
.g-abw { display: flex; height: 28px; background: var(--abw-bg); border-top: 1px solid var(--linie); }
.g-abw .g-links { background: var(--abw-bg); height: 27px; }
.g-abw .g-links > * { border-bottom: 0; }
.g-abw.abw-kopf .name { font-weight: 600; }
.g-abw .name small { font-weight: 400; color: var(--leise); margin-left: 4px; }
.g-abw.abw-person .name { padding-left: 26px; }
.abw-balken { position: absolute; top: 5px; height: 18px; border-radius: 9px; font-size: 11px; line-height: 18px; padding: 0 8px; box-sizing: border-box; white-space: nowrap; overflow: hidden; cursor: pointer; pointer-events: auto; }
.abw-balken.urlaub { background: var(--abw-urlaub); color: #fff; }
.abw-balken.krank { background: var(--warnung-bg); color: var(--warnung-text); border: 1px solid var(--warnung-linie); }
.abw-balken.schule { background: var(--art-sub-bg); color: var(--art-sub); border: 1px solid var(--abw-schule-linie); }
.abw-balken.frei, .abw-balken.sperre { background: var(--abw-grau); color: var(--leise); }
.abw-balken.beantragt { background: repeating-linear-gradient(135deg, var(--abw-hell) 0 5px, var(--fl) 5px 9px); border: 1.5px dashed var(--abw-urlaub); color: var(--abw-text); line-height: 15px; }
.balken .abw-konflikt { position: absolute; top: -1px; bottom: -1px; border-radius: 3px; pointer-events: none; background: repeating-linear-gradient(135deg, rgb(180 35 24 / 0.55) 0 4px, transparent 4px 8px); outline: 1.5px solid var(--warn); }
.balken .abw-konflikt.beantragt { background: repeating-linear-gradient(135deg, rgb(200 140 0 / 0.45) 0 4px, transparent 4px 8px); outline-color: #c88c00; }
.b-abw { color: var(--warn); font-weight: 600; white-space: nowrap; }
.b-abw.offen { color: var(--abw-offen); font-weight: 500; }
.dialog .b-dauer { border-bottom: 1px solid var(--linie); padding-bottom: 10px; margin-bottom: 10px; }
.dialog .b-dauer .schalter { margin-top: 8px; color: var(--text); }

/* Sortieren und Filtern wie in Excel (alle Tabellen) */
.liste { margin-bottom: 8px; }
.liste-leiste { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.liste-leiste .ansicht-knopf { padding: 6px 12px; font-size: 14px; }
.liste-leiste .ansicht-knopf i { font-style: normal; color: var(--holz); font-size: 12px; }
.liste-leiste .nur-schmal { padding: 6px 12px; font-size: 14px; }
.chip { display: inline-flex; align-items: center; gap: 2px; background: var(--akzent-hell); color: var(--akzent); border-radius: 999px; font-size: 13px; padding: 2px 4px 2px 10px; max-width: 100%; }
.chip.sort { background: var(--bg); color: var(--text); border: 1px solid var(--linie); }
.chip > span, .chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 3px 6px; border-radius: 999px; }
.chip button:hover { background: rgb(0 0 0 / 0.06); }
.chip-text { display: inline-flex; align-items: center; gap: 5px; padding-left: 0 !important; }
.chip svg, .th-zeichen svg, .fm-zeile svg { width: 11px; height: 11px; flex: none; }
th .th-knopf { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font: inherit; color: inherit; border-radius: 4px; }
th .th-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
th .th-zeichen { display: inline-flex; align-items: center; gap: 2px; color: var(--akzent); font-weight: 700; }
th .th-zeichen i { font-style: normal; color: var(--leise); opacity: 0.45; font-weight: 400; font-size: 11px; }
th:hover .th-zeichen i, th.aktiv .th-zeichen i { opacity: 1; }
th.aktiv { color: var(--akzent); }
th.zahl .th-knopf { flex-direction: row-reverse; }
td.auge-spalte, th.auge-spalte { width: 34px; padding-left: 0; padding-right: 8px; text-align: right; }
button.auge { background: none; border: 0; padding: 4px; color: var(--leise); cursor: pointer; opacity: 0; border-radius: 6px; line-height: 0; }
button.auge svg { width: 17px; height: 17px; }
tr:hover button.auge, button.auge:focus-visible, tr.ausgeblendet button.auge { opacity: 1; }
button.auge:hover { color: var(--akzent); background: var(--akzent-hell); }
@media (hover: none) { button.auge { opacity: 0.5; } }
td.auge-spalte.mit-weg, th.auge-spalte.mit-weg { width: 64px; white-space: nowrap; }
button.zeile-weg { background: none; border: 0; padding: 3px 6px; color: var(--leise); cursor: pointer; opacity: 0; border-radius: 6px; font: inherit; font-size: 13px; line-height: 1; vertical-align: middle; }
tr:hover button.zeile-weg, button.zeile-weg:focus-visible, button.zeile-weg.sicher { opacity: 1; }
button.zeile-weg:hover { background: var(--warnung-bg); color: var(--warn); }
button.zeile-weg.sicher { background: var(--warn); color: #fff; font-weight: 600; font-size: 11px; padding: 4px 6px; }
@media (hover: none) { button.zeile-weg { opacity: 0.6; } }
tr.ausgeblendet td { opacity: 0.45; }
tr.ausgeblendet td.auge-spalte { opacity: 1; }
tr.leer td { color: var(--leise); text-align: center; padding: 22px; }
.filter-menue { position: fixed; z-index: 30; background: var(--fl); color: var(--text); border: 1px solid var(--linie); border-radius: 10px; box-shadow: 0 10px 30px rgb(0 0 0 / 0.2); width: 290px; padding: 6px; font-size: 14px; }
.filter-menue.ansichten-menue { width: 320px; }
/* „+ Dokument“ (Henning 22.10.2026): Dokumentart, dann „erstellen aus …“ */
.filter-menue.dok-menue { width: 320px; padding: 6px 6px 8px; }
.dok-kopf { display: flex; align-items: center; gap: 6px; padding: 6px 8px 8px; font-weight: 600; border-bottom: 1px solid var(--linie); margin-bottom: 4px; }
.dok-zurueck { border: 0; background: none; font-size: 20px; line-height: 1; color: var(--akzent); cursor: pointer; padding: 0 4px; }
.dok-menue h4 { margin: 8px 8px 2px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--leise); }
.dok-eintrag { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 7px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.dok-eintrag:hover:not(:disabled) { background: var(--akzent-hell); }
.dok-eintrag:disabled { color: var(--leise); opacity: 0.65; cursor: not-allowed; }
.dok-eintrag > span { display: flex; flex-direction: column; min-width: 0; }
.dok-eintrag small { font-size: 12px; color: var(--leise); }
.dok-eintrag > small { flex: none; }
.dok-eintrag b { color: var(--leise); font-weight: 400; }
.dok-fuss { margin: 8px 10px 0; font-size: 12px; color: var(--leise); }
.dok-menue .fehler { margin: 6px 10px 0; }
.gaeb-dialog { max-width: 560px; }
.gaeb-dialog .gaeb-ablage input { display: none; }
.gaeb-dialog .gaeb-ablage small { display: block; }
.gaeb-dialog .gaeb-ablage { display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; text-align: center; min-height: 96px; padding: 14px; border: 2px dashed var(--linie); border-radius: 10px; cursor: pointer; color: var(--text); }
.gaeb-ablage small { color: var(--leise); font-size: 12px; }
.gaeb-ablage.drueber, .gaeb-ablage:hover { border-color: var(--akzent); background: var(--akzent-hell); }
.gaeb-ablage.mit-datei { min-height: 56px; }
.gaeb-vorschau { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 12px 0 4px; }
.gaeb-vorschau dt { color: var(--leise); }
.gaeb-vorschau dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.gaeb-dialog .warnung { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.dok-wahl .dok-liste { list-style: none; margin: 8px 0; padding: 0; max-height: 50vh; overflow: auto; }
.dok-wahl .dok-liste label { display: flex; gap: 8px; align-items: flex-start; padding: 6px 4px; border-bottom: 1px solid var(--linie); cursor: pointer; font-weight: 400; }
.dok-wahl .dok-liste small { display: block; color: var(--leise); }
.am-notiz { margin: 6px 0; font-size: 13px; }
.am-notiz div { white-space: pre-wrap; max-height: 240px; overflow: auto; padding: 6px 0; color: var(--leise); }
.filter-menue.blatt { left: 0; right: 0; bottom: 0; width: auto; border-radius: 14px 14px 0 0; max-height: 85vh; overflow: auto; padding: 8px max(10px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)); }
.filter-menue hr { border: 0; border-top: 1px solid var(--linie); margin: 4px 0; }
.fm-kopf { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 6px; }
.fm-zu { background: none; border: 0; color: var(--leise); cursor: pointer; font-size: 15px; padding: 4px 6px; }
.fm-zeile { display: flex; gap: 8px; align-items: center; width: 100%; text-align: left; background: none; border: 0; color: inherit; font: inherit; padding: 7px 8px; border-radius: 6px; cursor: pointer; }
.fm-zeile > span { width: 16px; display: inline-flex; justify-content: center; color: var(--leise); flex: none; }
.fm-zeile:hover:not(:disabled) { background: var(--bg); }
.fm-zeile.an { color: var(--akzent); font-weight: 600; }
.fm-zeile:disabled { color: var(--leise); opacity: 0.6; cursor: default; }
.fm-weitere { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 32px; color: var(--leise); }
.fm-weitere span { flex: 1; }
.fm-weitere button.neben { padding: 2px 10px; }
.fm-zeit { display: flex; align-items: center; gap: 8px; padding: 6px 8px; color: var(--leise); }
.fm-zeit select { flex: 1; padding: 6px; border: 1px solid var(--linie); border-radius: 6px; background: var(--fl); color: var(--text); font: inherit; }
.fm-suche { width: 100%; margin: 6px 0; padding: 7px 9px; border: 1px solid var(--linie); border-radius: 6px; background: var(--fl); color: var(--text); font: inherit; }
.fm-werte { border: 1px solid var(--linie); border-radius: 6px; max-height: 240px; overflow: auto; padding: 4px 0; }
.blatt .fm-werte { max-height: 38vh; }
.fm-werte label { display: flex; align-items: center; gap: 8px; padding: 5px 8px; cursor: pointer; }
.fm-werte label:hover { background: var(--bg); }
.fm-werte label span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-werte label small { color: var(--leise); }
.fm-werte .hinweis { padding: 4px 8px; margin: 0; }
.filter-menue .knoepfe { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 2px 2px; }
.filter-menue .knoepfe button:disabled { opacity: 0.5; cursor: default; }
.filter-menue > .hinweis { font-size: 12px; padding: 4px 8px; margin: 0; }
.g-links .auge-g { background: none; border: 0; color: var(--leise); cursor: pointer; padding: 0; width: 22px; height: 22px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.g-links .auge-g svg { width: 15px; height: 15px; }
.g-links .auge-g:hover { background: var(--akzent-hell); color: var(--akzent); }
.g-zeile.ausgeblendet .g-links > *:not(.name), .g-zeile.ausgeblendet .name .text { opacity: 0.45; }
.g-zeile.ausgeblendet .aktionen { opacity: 1; }
.leiste .g-aus { font-size: 14px; color: var(--leise); }
.leiste .chip button { padding: 5px 6px; }
td .unter.nur-schmal, .liste-leiste .nur-schmal { display: none; }
@media (max-width: 800px) {
  td .unter.nur-schmal { display: block; }
  .liste-leiste .nur-schmal { display: inline-block; }
  td.auge-spalte, th.auge-spalte { width: 28px; padding-right: 4px; }
}

/* Aufgaben und Zahlungen im Terminplan (Henning, 20.10.2026): Einnahmen grün, Ausgaben rot, Aufgaben grau */
.g-zeile.g .g-links { font-weight: 700; }
.g-zeile .name.gruppe { font-weight: 600; }
.g-zeile .name.ebene3 { padding-left: 54px; font-weight: 400; }
.g-zeile .t-haken { flex: none; margin: 0 4px 0 0; width: 15px; height: 15px; accent-color: var(--akzent); }
.g-zeile .text.erledigt { text-decoration: line-through; color: var(--leise); }
.g-zeile .leise-text { color: var(--leise); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-zeile .zelle .leer { color: var(--leise); opacity: 0; }
.g-zeile:hover .zelle .leer { opacity: 1; }
.betrag { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12.5px; }
.betrag.ein { color: var(--gut-text); }
.betrag.aus { color: var(--warn); }
.g-zeile .res-betrag { display: flex; gap: 6px; overflow: hidden; font-weight: 600; }
.posten-ms { position: absolute; top: 20px; width: 16px; height: 16px; pointer-events: auto; cursor: grab; touch-action: none; z-index: 2;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; }
.posten-ms.t { background: var(--leise); }
.posten-ms.t.spaet { background: var(--warn); }
.posten-ms.t.fertig { background: color-mix(in srgb, var(--leise) 45%, var(--fl)); }
.posten-ms.z { background: var(--gut-text); }
.posten-ms.z.geplant { background: color-mix(in srgb, var(--gut-text) 35%, var(--fl)); outline: 2px solid var(--gut-text); outline-offset: -3px; }
.posten-ms.k { background: var(--warn); }
.posten-ms.fertig:not(.t) { cursor: default; }
.posten-ms.zieht { cursor: grabbing; opacity: 0.8; }
.b-betrag { font-weight: 600; }
.b-betrag.ein { color: var(--gut-text); }
.b-betrag.aus { color: var(--warn); }
.g-pfeile path.bezug { stroke-dasharray: 3 3; opacity: 0.8; }
/* Zeilen in Tabellen verschieben (Zahlungsplan) */
.liste .griff-spalte { width: 22px; padding-inline: 2px 0; }
.zeilen-griff { cursor: grab; touch-action: none; color: var(--leise); letter-spacing: -3px; user-select: none; padding: 4px 6px 4px 2px; }
.liste tr.gezogen td { background: var(--akzent-hell); color: var(--leise); }
.liste tr.einfuege-vor td { box-shadow: inset 0 3px 0 var(--akzent); }
.liste tr.einfuege-nach td { box-shadow: inset 0 -3px 0 var(--akzent); }
.liste .klein-hinweis { font-size: 12.5px; margin: 4px 0 0; }
.vorlage { margin-top: 24px; }
.vorlage-tabelle input, .vorlage-tabelle select { width: 100%; min-width: 0; }
.vorlage-tabelle td { padding: 4px 4px; }
.vorlage-tabelle input, .vorlage-tabelle select { padding: 6px 8px; }
.vorlage-tabelle input.zahl { width: 70px; text-align: right; }
.vorlage-tabelle td:first-child { min-width: 200px; }

/* 0.15: Abarbeitungsgrad im Terminplan */
.g-links .erl { cursor: pointer; }
.g-links .erl:hover { background: var(--akzent-hell); }
.g-links .erl.fertig { color: var(--gut-text); font-weight: 600; }
.g-links .erl.verzug { color: var(--warn); font-weight: 600; }
.g-links .erl.summe { font-weight: 600; }
.balken .erledigt { position: absolute; left: 0; top: 0; bottom: 0; background: var(--g-vorgang-rand); pointer-events: none; }
.balken.vorgang.fertig { background: var(--gut-text); border-color: var(--gut-text); }
.balken.vorgang.verzug { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
.balken.meilenstein.fertig { background: var(--gut-text); }
.balken.meilenstein.verzug { background: var(--warn); }
.b-verzug { color: var(--warn); font-weight: 600; margin-left: 4px; }
.erl-menue { position: fixed; z-index: 50; background: var(--fl); border: 1px solid var(--linie); border-radius: 8px; box-shadow: 0 8px 24px rgb(0 0 0 / 0.18); padding: 10px 12px; display: grid; gap: 8px; max-width: min(360px, calc(100vw - 16px)); font-size: 13px; }
.erl-menue > div { display: flex; gap: 6px; flex-wrap: wrap; }
.erl-menue .neben.an { border-color: var(--akzent); color: var(--akzent); font-weight: 600; }
.erl-menue input { width: 56px; margin-left: 6px; }
/* 0.15: Personal mit Reitern, Kolonnen, Subunternehmer */
.personal-teile { padding: 0; margin-bottom: 14px; }
.last-anteil { display: inline-block; width: 52px; height: 8px; border-radius: 4px; background: var(--linie); vertical-align: middle; overflow: hidden; margin-right: 4px; }
.last-anteil i { display: block; height: 100%; background: var(--akzent); }
.last-anteil.ueber i { background: var(--warn); }
.last-anteil.leer i { background: var(--leise); }
table.einfach { width: 100%; border-collapse: collapse; font-size: 14px; }
table.einfach td { padding: 7px 6px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
table.einfach td:last-child { text-align: right; white-space: nowrap; }
.zeile-dazu { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.zeile-dazu select { flex: 1; min-width: 0; }
.personal-raster #sub-teil { padding: 12px 16px 16px; }

/* Angebote (Stufe 3a): Leistungsverzeichnis mit Kalkulation, Eingaben direkt in der Tabelle */
.erfolg { background: var(--gut-bg); color: var(--gut-text); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 14px; }
.angebot-kopf .marke { font-size: 14px; }
.kopf-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
button.gefahr { color: var(--warn); }
button.neben.klein { padding: 3px 9px; font-size: 13px; }
button.neben:disabled { opacity: 0.4; cursor: default; }
.angebot-bezug { margin: -8px 0 14px; color: var(--leise); }
.angebot-raster { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.angebot-haupt, .angebot-seite { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.angebot-seite h3 { margin: 0 0 8px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.angebot-angaben { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; }
.angebot-angaben label, .saetze label, .position-details label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--leise); min-width: 0; }
.angebot-angaben .breit { grid-column: 1 / -1; }
.angebot-angaben p.hinweis { margin: 0; font-size: 13px; }
.angebot-raster input, .angebot-raster select, .angebot-raster textarea { width: 100%; min-width: 0; padding: 7px 9px; border: 1px solid var(--linie); border-radius: 7px; background: var(--fl); color: var(--text); font: inherit; font-size: 14px; }
.angebot-raster input:focus, .angebot-raster select:focus, .angebot-raster textarea:focus { outline: 2px solid var(--akzent-hell); border-color: var(--akzent); }
.angebot-raster input:disabled, .angebot-raster select:disabled, .angebot-raster textarea:disabled { border-color: transparent; background: transparent; color: var(--text); opacity: 1; -webkit-text-fill-color: var(--text); }
.angebot-raster input.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.angebot-raster input.kurz { width: 100%; }
.lv-karte { padding: 0; overflow: hidden; }
.lv-rolle { overflow-x: auto; }
table.lv { border: 0; border-radius: 0; min-width: 620px; table-layout: fixed; }
table.lv col.c-oz { width: 92px; } table.lv col.c-menge { width: 6.5em; } table.lv col.c-einheit { width: 5.2em; }
table.lv col.c-ep { width: 7.5em; } table.lv col.c-gb { width: 8.5em; } table.lv col.c-std { width: 4.5em; }
.kosten-rolle { overflow-x: auto; max-width: 100%; }
.angebot-raster select:disabled { appearance: none; }
table.lv th, table.lv td { padding: 6px 8px; }
table.lv td.oz { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--leise); font-size: 13px; width: 1%; }
table.lv td.text .marke { margin-top: 3px; display: inline-block; }
table.lv tr.titel td { background: var(--bg); font-weight: 600; }
table.lv tr.titel input { font-weight: 600; }
.titel-zeile { display: flex; gap: 6px; align-items: center; }
.titel-knoepfe { display: flex; gap: 4px; flex: none; }
table.lv tr.position.zaehlt-nicht td { color: var(--leise); }
table.lv tr.position.mit-fehler td.oz { box-shadow: inset 3px 0 0 var(--warn); }
table.lv tr.position.auf td { border-bottom-color: transparent; }
table.lv tr.details > td { background: var(--bg); }
table.lv tr.neu td { border-bottom: 0; padding: 8px; }
table.lv tfoot td { border-bottom: 0; }
.auf-zu { background: none; border: 0; color: var(--akzent); cursor: pointer; font: inherit; padding: 0 6px 0 0; }
button.weg { background: none; border: 0; color: var(--leise); cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 5px; }
button.weg:hover { background: var(--warnung-bg); color: var(--warn); }
.position-details { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 8px; }
.details-zeile { display: flex; gap: 10px 14px; flex-wrap: wrap; align-items: flex-end; }
.details-zeile label { width: 13em; }
.details-knoepfe { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.position-details > .hinweis { margin: 0; font-size: 13px; }
table.kosten-tabelle { border-radius: 8px; width: auto; }
table.kosten-tabelle th, table.kosten-tabelle td { padding: 4px 6px; font-size: 13px; }
.kosten-rolle table.kosten-tabelle th, .kosten-rolle table.kosten-tabelle td { padding-left: 2px; padding-right: 2px; }
table.kosten-tabelle input.w-bez { width: 7.6em; }
table.kosten-tabelle input.w-bezug { width: 5.6em; }
table.kosten-tabelle input.w-ansatz { width: 3.8em; }
table.kosten-tabelle input.w-pers { width: 2.8em; }
table.kosten-tabelle input.w-einheit { width: 5.4em; }
table.kosten-tabelle input.w-ek { width: 4.9em; }
table.kosten-tabelle input.w-faktor { width: 3.1em; }
table.kosten-tabelle td:nth-child(7) select { width: 6em; }
.angebot-raster input.w-menge { width: 5.5em; }
.angebot-raster input.w-euro { width: 6.5em; }
.angebot-raster input.w-kurz { width: 4.2em; }
.mit-einheit { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: var(--leise); }
table.kosten-tabelle tr.kz-lohn td:first-child { box-shadow: inset 3px 0 0 var(--akzent); }
table.kosten-tabelle tr.kz-material td:first-child { box-shadow: inset 3px 0 0 var(--holz); }
table.kosten-tabelle tr.kz-geraet td:first-child { box-shadow: inset 3px 0 0 var(--ein); }
table.kosten-tabelle tr.kz-sonstiges td:first-child { box-shadow: inset 3px 0 0 var(--leise); }
table.kosten-tabelle td:first-child select { width: 5.7em; }
.summen dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; }
.summen dt { color: var(--leise); }
.summen dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.summen .brutto { font-weight: 700; font-size: 17px; color: var(--text); border-bottom: 1px solid var(--linie); padding-bottom: 6px; }
table.kalk-tabelle { border-radius: 8px; }
table.kalk-tabelle th, table.kalk-tabelle td { padding: 5px 7px; font-size: 13px; }
table.kalk-tabelle tfoot td { font-weight: 600; border-bottom: 0; }
.saetze { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.saetze label { flex: 1 1 6em; }
.saetze .mit-einheit input { width: 4.5em; }
.saetze-mehr { margin-top: 10px; font-size: 14px; }
.saetze-mehr summary { cursor: pointer; color: var(--akzent); }
.saetze-mehr .hinweis { font-size: 13px; margin: 6px 0 0; }
ul.pruefung { margin: 0; padding-left: 14px; list-style: none; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
ul.pruefung li { position: relative; }
ul.pruefung li::before { content: "\2022"; position: absolute; left: -12px; top: 0; }
ul.pruefung li.fehler { color: var(--warn); }
ul.pruefung li.hinweis { color: var(--leise); }
ul.pruefung .verweis { color: inherit; text-align: left; }
.dialog ul.pruefung { margin: 8px 0 12px; }
ul.staende { margin: 0; padding-left: 18px; font-size: 14px; }
@media (max-width: 1100px) {
  .angebot-raster { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .angebot-angaben { grid-template-columns: 1fr 1fr; }
  table.lv col.c-std { width: 0; }
  .kopf-knoepfe { width: 100%; }
}

/* Neue Angebotsmaske (Henning, 21.10.2026): Liste wie Plancraft, markierte Position mit Schaltern und Abschnitten,
   Mengenblatt mit gelben Eingaben und blauen Formeln */
a.haupt { display: inline-block; background: var(--akzent); color: var(--akzent-text); border-radius: 8px; padding: 10px 18px; font-weight: 600; text-decoration: none; }
a.haupt:hover { background: var(--akzent-hover); }
.am-kopf h1 { flex: 1; }
.am-kopf .nummer { color: var(--leise); font-weight: 400; }
.am-kopfdaten { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.am-kopfzeile { display: flex; gap: 10px 22px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.am-kopfzeile > span > b { display: block; font-size: 12px; color: var(--leise); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.am-kopfzeile .am-betreff { min-width: 0; max-width: 28em; overflow: hidden; text-overflow: ellipsis; }
.am-rechts { margin-left: auto; }
.am-kopfdaten p.hinweis { margin: 0; font-size: 13px; }
.am-kopf-felder { border-top: 1px solid var(--linie); padding-top: 12px; }
.am-kopfdaten input, .am-kopfdaten select, .am-kopfdaten textarea { width: 100%; min-width: 0; padding: 7px 9px; border: 1px solid var(--linie); border-radius: 7px; background: var(--fl); color: var(--text); font: inherit; font-size: 14px; }
.am-raster { grid-template-columns: minmax(0, 1fr) 310px; }
.am-lv { padding: 0; overflow: hidden; }
.am-zeile { display: grid; grid-template-columns: 74px 96px 72px minmax(0, 1fr) 108px 112px 34px; gap: 8px; align-items: start; padding: 8px 12px; border-bottom: 1px solid var(--linie); cursor: default; }
.am-zeile.kopfzeile { background: var(--bg); font-size: 13px; color: var(--leise); font-weight: 600; padding-block: 10px; }
.am-zeile .z { text-align: right; font-variant-numeric: tabular-nums; }
.am-zeile .pos { font-variant-numeric: tabular-nums; color: var(--leise); font-size: 13px; padding-top: 8px; overflow-wrap: anywhere; }
.am-zeile .gb { padding-top: 8px; font-weight: 600; }
.am-zeile.titel { background: var(--titel-bg); grid-template-columns: 74px minmax(0, 1fr) 112px 34px; font-weight: 700; }
.am-zeile.titel .pos { color: var(--text); font-weight: 700; }
.am-zeile.titel input { font-weight: 700; font-size: 15px; }
.am-zeile.am-textzeile { grid-template-columns: 74px minmax(0, 1fr) 34px; }
.am-zeile.am-textzeile textarea { font-style: italic; resize: vertical; }
.am-zeile.aktiv { box-shadow: inset 3px 0 0 var(--akzent); background: color-mix(in srgb, var(--akzent-hell) 35%, var(--fl)); }
.am-zeile.markiert { background: var(--markiert); }
.am-zeile.mit-fehler .pos { color: var(--warn); font-weight: 600; }
.am-zeile.zaehlt-nicht .gb, .am-zeile.zaehlt-nicht .pos { color: var(--leise); }
.am-zeile.am-ziel { box-shadow: inset 0 -3px 0 var(--akzent); }
.am-lv.am-ziel { outline: 2px dashed var(--akzent); }
.am-zeile input.aus { background: var(--bg); color: var(--text); border-color: var(--linie); cursor: default; }
.am-menge, .am-ep { display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.marke-q { align-self: flex-start; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 5px; background: var(--leiste); color: #fff; }
.am-ep .marke-q { align-self: flex-end; }
.marke-q.kalk { background: var(--akzent); color: var(--akzent-text); }
.marke-q.fehler { background: var(--warn); }
.m-unter { font-size: 12.5px; color: var(--leise); margin-top: 3px; }
.m-unter.am-rechts { text-align: right; margin: 0; }
.m-sym { color: var(--leise); font-size: 12px; margin-top: 3px; display: inline-block; }
.m-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.m-chips .chip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--linie); background: var(--fl); color: var(--text); cursor: pointer; }
.m-chips .chip:disabled { cursor: default; opacity: .6; }
.m-chips .chip.an { background: var(--akzent-hell); border-color: var(--akzent); color: var(--akzent); font-weight: 600; }
.m-chips .chip .p { width: 26px; height: 15px; border-radius: 9px; background: var(--linie); position: relative; flex: none; }
.m-chips .chip .p::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--fl); transition: left .12s; }
.m-chips .chip.an .p { background: var(--akzent); }
.m-chips .chip.an .p::after { left: 13px; }
.m-chips .am-art select { width: auto; padding: 4px 8px; font-size: 13px; border-radius: 999px; }
.punkte-zelle { padding-top: 4px; }
details.am-menue { position: relative; }
details.am-menue > summary { list-style: none; cursor: pointer; color: var(--leise); text-align: center; padding: 4px 8px; border-radius: 6px; font-weight: 700; }
details.am-menue > summary::-webkit-details-marker { display: none; }
details.am-menue > summary:hover, details.am-menue[open] > summary { background: var(--bg); color: var(--text); }
.kopf-knoepfe details.am-menue > summary { border: 1px solid var(--linie); background: var(--fl); padding: 8px 12px; border-radius: 8px; }
.am-menue-liste { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 210px; background: var(--fl); border: 1px solid var(--linie); border-radius: 10px; box-shadow: 0 12px 32px rgb(16 32 64 / .18); padding: 6px; display: flex; flex-direction: column; }
.am-menue-liste button { background: none; border: 0; text-align: left; font: inherit; font-size: 14px; font-weight: 400; color: var(--text); padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.am-menue-liste button:hover:not(:disabled) { background: var(--bg); }
.am-menue-liste button:disabled { opacity: .4; cursor: default; }
.am-menue-liste button.gefahr { color: var(--warn); }
.m-neu { padding: 10px 14px 10px 94px; display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; align-items: center; }
.m-neu .verweis { text-decoration: none; }
.m-summe { display: flex; justify-content: flex-end; gap: 24px; padding: 12px 58px 12px 14px; font-size: 15px; border-top: 1px solid var(--linie); }
.am-leer { padding: 14px 14px 0 94px; }
/* geöffnete Position */
.m-offen { margin: 0 10px 14px 18px; border: 1px solid var(--linie); border-radius: 10px; background: var(--fl); }
.m-offen .abschnitt { border-bottom: 1px solid var(--linie); }
.m-offen .abschnitt > h4 { margin: 0; padding: 8px 12px; font-size: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.am-auf { background: none; border: 0; font: inherit; font-weight: 700; color: var(--text); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; padding: 2px 0; }
.am-auf .zu { color: var(--akzent); width: 12px; }
.m-offen .abschnitt .info { margin-left: auto; font-weight: 400; color: var(--leise); font-size: 13px; display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.m-offen .abschnitt .info b { color: var(--text); }
.m-offen .rumpf { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.m-offen textarea { width: 100%; resize: vertical; line-height: 1.45; }
.m-fertig { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; background: var(--bg); border-radius: 0 0 10px 10px; font-size: 13px; color: var(--leise); }
.knopfreihe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.knopfreihe .hinweis-k { margin: 0; }
button.neben.am-betont { border-color: var(--akzent); color: var(--akzent); }
.hinweis-k { font-size: 12.5px; color: var(--leise); margin: 6px 0 0; font-weight: 400; }
.am-ep-zeile { justify-content: space-between; font-size: 13.5px; }
.am-anpassen { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* Tabellen im Mengenblatt und in der Kalkulation */
table.am-t { width: 100%; border: 1px solid var(--linie); border-radius: 8px; font-size: 13px; }
table.am-t th, table.am-t td { padding: 4px 6px; vertical-align: top; }
table.am-t th { background: var(--bg); font-size: 12px; }
table.am-t td.zahl, table.am-t th.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.am-t td.zahl { padding-top: 9px; }
table.am-t tr.summe td { font-weight: 700; background: var(--titel-bg); padding-top: 6px; }
table.am-t input, table.am-t select { padding: 4px 7px; font-size: 13px; min-height: 30px; }
table.am-t tr.aus td { opacity: .55; }
/* Wandliste: Kennung schmal, Bezeichnung bekommt den Platz */
table.am-t input[data-k$=".Kennung"] { width: 3.2em; text-align: center; }
table.am-t input[data-k$=".Bezeichnung"] { min-width: 11em; }
table.am-t input.am-eingabe.zahl { min-width: 5.5em; }
table.am-t tr.aus td:nth-last-child(2) { opacity: 1; }
table.am-aufmass td:first-child { width: 40%; }
table.kosten-tabelle tr.kz-subunternehmer td:first-child { box-shadow: inset 3px 0 0 var(--art-sub); }
input.am-eingabe { background: var(--eingabe-bg) !important; border-color: var(--eingabe-linie) !important; color: var(--eingabe-text) !important; }
input.am-formel { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px !important; color: var(--formel-text) !important; }
input.am-kz { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; color: var(--formel-text) !important; width: 5.2em; }
input.mit-fehler { border-color: var(--warn) !important; outline-color: var(--warnung-linie); }
input.w-bezug { width: 7em; }
.am-fehler { display: block; color: var(--warn); font-size: 12px; margin-top: 2px; }
.am-kz-t { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; font-weight: 700; color: var(--formel-text); }
.am-vorlage-info { display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--leise); }
.am-vorlage-info b { color: var(--text); }
.am-erg { background: var(--bg); border-radius: 6px; padding: 2px 8px; color: var(--text); font-variant-numeric: tabular-nums; }
.am-eingaben-kurz { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 10px; }
.am-eingaben-kurz label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--leise); min-width: 0; }
.am-eingaben-kurz label > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
h4.am-zwischen { margin: 4px 0 0; font-size: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
h4.am-zwischen input.am-listenname { width: 14em; font-weight: 700; }
h3.am-h { margin: 14px 0 6px; font-size: 15px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.karte > h3.am-h:first-child, .zwei h3.am-h { margin-top: 0; }
.zwei { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; }
.zwei > div { min-width: 0; }
.erg { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 5px 10px; align-items: center; font-size: 13px; }
.erg .w { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.menge-wahl { margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: var(--akzent-hell); color: var(--text); font-size: 13.5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.menge-wahl input.am-menge { width: 10em; }
.am-schritt3 { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; }
.am-schritt3 > b { margin-top: 18px; }
.am-schritt3 .menge-wahl { flex: 1; }
.legende { display: flex; gap: 6px 14px; font-size: 12.5px; color: var(--leise); margin-top: 10px; flex-wrap: wrap; align-items: center; }
.legende i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -3px; margin-right: 4px; border: 1px solid var(--linie); }
.legende i.am-l-eingabe { background: var(--eingabe-bg); border-color: var(--eingabe-linie); }
.legende i.am-l-formel { background: var(--fl); border-color: var(--formel-text); }
details.am-spalten { margin: 4px 0; font-size: 13px; }
details.am-spalten > summary { cursor: pointer; color: var(--akzent); }
.art { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.art.lohn { background: var(--art-lohn-bg); color: var(--art-lohn); } .art.material { background: var(--art-mat-bg); color: var(--art-mat); }
.art.geraet { background: var(--art-ger-bg); color: var(--art-ger); } .art.subunternehmer { background: var(--art-sub-bg); color: var(--art-sub); }
.art.sonstiges { background: var(--art-son-bg); color: var(--art-son); }
/* Seitenleiste */
.m-seite .reiter-k { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--linie); margin: -4px -4px 10px; }
.m-seite .reiter-k button { background: none; border: 0; padding: 6px 7px; white-space: nowrap; font: inherit; font-size: 13.5px; color: var(--leise); cursor: pointer; }
.m-seite .reiter-k button.an { color: var(--akzent); font-weight: 600; box-shadow: inset 0 -2px 0 var(--akzent); }
.baustein { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--linie); border-radius: 8px; margin-bottom: 6px; font-size: 14px; background: var(--fl); }
.baustein[draggable="true"] { cursor: grab; }
.baustein .g { color: var(--leise); letter-spacing: -2px; }
.baustein .am-b-text { min-width: 0; flex: 1; }
.baustein small { display: block; color: var(--leise); font-size: 12px; }
.baustein .plus { margin-left: auto; background: none; border: 1px solid transparent; color: var(--akzent); font-weight: 700; font-size: 17px; line-height: 1; cursor: pointer; border-radius: 6px; padding: 2px 7px; }
.baustein .plus:hover { border-color: var(--akzent); }
.baustein .am-b-bearb { color: var(--leise); text-decoration: none; font-size: 13px; padding: 2px 4px; }
.m-seite input.suche { margin: 4px 0 8px; }
.m-seite .gr, .am-reiter-karte .gr { font-size: 11.5px; font-weight: 700; color: var(--leise); text-transform: uppercase; letter-spacing: .05em; margin: 10px 2px 4px; }
.am-katalog-liste { max-height: 460px; overflow-y: auto; padding-right: 2px; }
details.am-vorgaben > summary { cursor: pointer; list-style: none; }
details.am-vorgaben > summary::-webkit-details-marker { display: none; }
details.am-vorgaben > summary h3 { margin: 0; }
details.am-vorgaben > summary h3::after { content: "\25BE"; color: var(--akzent); margin-left: auto; }
details.am-vorgaben:not([open]) > summary h3::after { content: "\25B8"; }
.vorgabe { display: grid; grid-template-columns: 1fr; gap: 4px; font-size: 13px; margin-top: 8px; }
.vorgabe .t { font-weight: 600; color: var(--leise); font-size: 12px; margin-top: 6px; text-transform: uppercase; letter-spacing: .04em; }
.vorgabe label { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.vorgabe label input { width: 6.5em !important; }
.vorgabe label .mit-einheit input { width: 4.5em !important; }
.am-haupt { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.am-seite-gross { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.am-oben { margin-bottom: 10px; }
.am-speichern label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--leise); margin-top: 8px; }
.am-speichern label.am-radio { flex-direction: row; align-items: center; gap: 8px; color: var(--text); font-size: 14px; margin-top: 4px; }
.am-speichern label.am-radio input { width: auto; }
.am-speichern textarea { resize: vertical; }
ul.am-liste-punkte { margin: 0; padding-left: 18px; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.am-suche-seite { width: 100%; max-width: 420px; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px; background: var(--fl); color: var(--text); font: inherit; margin: 6px 0 4px; }
h2.am-gruppe { font-size: 15px; margin: 18px 0 6px; color: var(--leise); text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 1100px) {
  .am-raster { grid-template-columns: 1fr; }
  .zwei { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .am-zeile { grid-template-columns: 56px 80px 60px minmax(0, 1fr) 30px; }
  .am-zeile .am-ep, .am-zeile .gb, .am-zeile.kopfzeile > :nth-child(5), .am-zeile.kopfzeile > :nth-child(6) { display: none; }
  .am-zeile.titel { grid-template-columns: 56px minmax(0, 1fr) 30px; }
  .am-zeile.titel .gb { display: none; }
  .m-offen { margin-left: 12px; }
  .m-neu, .am-leer { padding-left: 14px; }
}

table.kosten-tabelle td.kz-aus { white-space: nowrap; padding-top: 9px; }
table.kosten-tabelle td.kz-aus .weg { margin-left: 0; padding: 2px 3px; }
table.kosten-tabelle td.kz-aus input { width: 16px; height: 16px; min-height: 0; padding: 0; vertical-align: middle; }
table.kosten-tabelle tr.kz-fahrt td:first-child { box-shadow: inset 3px 0 0 var(--art-fahrt); }
.art.fahrt { background: var(--art-fahrt-bg); color: var(--art-fahrt); }
table.kosten-tabelle .kz-rechnung { display: block; font-size: 11.5px; color: var(--leise); margin-top: 2px; white-space: nowrap; }
.kosten-rolle table.kosten-tabelle input, .kosten-rolle table.kosten-tabelle select { padding-left: 5px; padding-right: 5px; font-size: 13px; }
.kosten-rolle table.kosten-tabelle select { padding-left: 3px; padding-right: 0; }

/* Stammdaten (0.18, Entwürfe 1–4): Ordner links, Liste rechts; Leistung wie die Angebotsmaske */
.sd-teile { padding: 0; margin: -6px 0 14px; }
.sd-raster { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.sd-seite { display: flex; flex-direction: column; gap: 2px; padding: 10px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.sd-seite h3.gruppe { margin: 10px 4px 4px; padding: 6px 0 4px; }
.sd-alle, .sd-zeile, .sd-herkunft, .sd-ordner { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; border-radius: 7px; padding: 6px 8px; font: inherit; font-size: 14px; color: inherit; text-align: left; cursor: pointer; }
.sd-alle { font-weight: 600; }
.sd-zeile > span:first-child, .sd-herkunft > span:not(.marke), .sd-ordner { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-alle small, .sd-zeile small, .sd-herkunft small, .sd-knoten small { margin-left: auto; color: var(--leise); font-size: 12px; font-variant-numeric: tabular-nums; }
.sd-alle:hover, .sd-zeile:hover, .sd-herkunft:hover, .sd-knoten:hover { background: var(--bg); }
.sd-alle.an, .sd-zeile.an, .sd-herkunft.an, .sd-knoten.an { background: var(--akzent-hell); color: var(--akzent); }
.sd-herkunft .marke { font-size: 11px; padding: 1px 7px; }
.sd-baum, .sd-baum ul { list-style: none; margin: 0; padding: 0; }
.sd-baum ul { padding-left: 14px; }
.sd-knoten { display: flex; align-items: center; gap: 2px; border-radius: 7px; padding-right: 8px; }
.sd-knoten .sd-ordner { padding: 5px 4px; background: none; }
.sd-knoten.an .sd-ordner { font-weight: 600; color: inherit; }
.sd-pfeil { width: 20px; flex: none; background: none; border: 0; padding: 0; color: var(--leise); font: inherit; font-size: 12px; cursor: pointer; text-align: center; }
.sd-haupt { padding: 0; overflow: hidden; }
.sd-suchleiste { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--linie); }
.sd-suche { flex: 1 1 260px; min-width: 0; padding: 8px 11px; border: 1px solid var(--linie); border-radius: 8px; background: var(--fl); color: var(--text); font: inherit; }
.sd-auswahl { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 9px 14px; background: var(--akzent-hell); color: var(--text); font-size: 14px; border-bottom: 1px solid var(--linie); }
.sd-auswahl b { margin-right: 6px; }
.sd-auswahl[hidden] { display: none; }
.sd-liste { padding: 0 14px 6px; min-width: 0; }
.sd-tabelle td.sd-wahl, .sd-tabelle th.sd-wahl { width: 34px; }
.sd-lang { max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.sd-klein { font-size: 13px; color: var(--leise); white-space: nowrap; }
.sd-tabelle td.sd-text { min-width: 16em; }
.sd-fuss { padding: 0 14px 12px; }
tr.sd-gewaehlt td { background: var(--akzent-hell); }
.sd-stern { background: none; border: 0; padding: 2px 4px; font: inherit; font-size: 16px; color: var(--leise); cursor: pointer; }
.sd-stern.an { color: var(--holz); }
.marke.gaeb { background: var(--art-lohn-bg); color: var(--art-lohn); }
.marke.datanorm { background: var(--art-mat-bg); color: var(--art-mat); }
.sd-spalte { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sd-artikel h3 { margin: 0 0 8px; font-size: 16px; }
.sd-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0 0 8px; font-size: 14px; }
.sd-dl dt { color: var(--leise); }
.sd-dl dd { margin: 0; }
.sd-artikel-menue { max-width: min(460px, calc(100vw - 32px)); }
.sd-treffer { justify-content: space-between; }
.sd-treffer .sd-t-name { width: auto !important; flex: 1; display: block !important; color: var(--text) !important; min-width: 0; }
.sd-treffer .sd-t-name small { display: block; color: var(--leise); font-size: 12px; }
.sd-treffer .sd-t-preis { width: auto !important; white-space: nowrap; color: var(--text) !important; font-variant-numeric: tabular-nums; }
/* eine Leistung */
.sd-leistung .am-haupt { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sd-felder { display: flex; flex-direction: column; gap: 10px; }
.sd-felder label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--leise); min-width: 0; }
.sd-felder-reihe { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.sd-felder-reihe > label { flex: 0 1 auto; }
.sd-felder-reihe > .sd-breit { flex: 1 1 240px; }
.sd-felder-reihe .hinweis-k { flex: 1 1 220px; margin: 0; }
.angebot-raster input.w-oz { width: 9em; }
.sd-block > summary { cursor: pointer; list-style: none; }
.sd-block > summary::-webkit-details-marker { display: none; }
.sd-block > summary h3 { display: inline-flex; gap: 10px; align-items: baseline; margin: 0; }
.sd-block > summary h3::before { content: "\25B8"; color: var(--leise); }
.sd-block[open] > summary h3::before { content: "\25BE"; }
.sd-block-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.sd-block-kopf h3 { margin: 0; }
.sd-blatt-neu { margin: -4px 0 0; }
.sd-kosten td.sd-bez { min-width: 9em; }
.kosten-rolle table.sd-kosten input.w-bez { width: 15em; }
.sd-kosten td.sd-quelle .marke { font-size: 11px; padding: 1px 7px; }
.sd-kosten tr.sd-zwischen td { font-size: 12.5px; color: var(--leise); border-top: 0; padding-top: 2px; padding-bottom: 8px; }
.sd-kosten tr.sd-zwischen td.zahl { font-weight: 600; color: var(--text); }
.sd-preis { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linie); }
.sd-preis label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--leise); }
/* Import */
.sd-import-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.sd-import-raster h3 { margin: 0 0 6px; }
.sd-ablage { display: grid; place-items: center; min-height: 92px; margin: 12px 0; border: 2px dashed var(--linie); border-radius: 10px; color: var(--leise); text-align: center; padding: 14px; cursor: pointer; }
.sd-ablage:hover, .sd-ablage.an { border-color: var(--akzent); background: var(--akzent-hell); color: var(--akzent); }
.sd-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.sd-inline input, .sd-rabatte input, .sd-rabatt-tabelle input { padding: 6px 9px; border: 1px solid var(--linie); border-radius: 7px; background: var(--fl); color: var(--text); font: inherit; font-size: 14px; min-width: 0; }
.sd-inline input { flex: 1 1 200px; }
.sd-rabatte input, .sd-rabatt-tabelle input { width: 4.5em; text-align: right; }
.sd-schritte { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.sd-rabatte { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 6px; max-height: 220px; overflow-y: auto; }
.sd-rabatte label { display: flex; gap: 6px; align-items: center; }
.sd-rabatte small { color: var(--leise); }
.sd-rabatt-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.sd-rabatt-tabelle th, .sd-rabatt-tabelle td { padding: 5px 6px; border-bottom: 1px solid var(--linie); text-align: left; }
.sd-rabatt-tabelle .zahl { text-align: right; }
@media (max-width: 900px) {
  .sd-raster, .sd-import-raster { grid-template-columns: 1fr; }
  .sd-seite { position: static; max-height: 260px; }
  .sd-tabelle td.sd-text { min-width: 12em; }
  .sd-lang { max-width: 26ch; }
}

/* Angebot: Reiter Leistungen und Material, KI-Vorschlag (0.18) */
.am-suchreihe { display: flex; gap: 6px; margin: 4px 0 8px; }
.m-seite .am-suchreihe input.suche { margin: 0; flex: 1 1 55%; }
.m-seite .am-suchreihe select { flex: 1 1 45%; min-width: 0; }
.am-ki { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linie); }
.am-ki > summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; }
.am-ki > summary .hinweis-k { margin: 0; }
.am-ki textarea { margin-top: 8px; }
.am-ki-knoepfe { display: flex; gap: 10px; align-items: center; margin: 8px 0; }
.am-ki-liste { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; }
.am-ki-liste li { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; border: 1px solid var(--linie); border-radius: 8px; padding: 6px 8px; font-size: 13.5px; }
.am-ki-liste label { display: flex; gap: 7px; align-items: flex-start; min-width: 0; flex: 1; }
.angebot-raster .am-ki-liste label input[type="checkbox"] { width: 16px; height: 16px; padding: 0; margin-top: 2px; flex: none; }
.am-ki-liste small { display: block; color: var(--leise); font-size: 12px; }
.am-ki-liste .mit-einheit { flex: none; display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--leise); }
.am-ki-liste .mit-einheit input { width: 5em; padding: 4px 6px; }
button.haupt.klein { padding: 6px 12px; font-size: 14px; }

/* Angebot als Dokument (Henning, 21.10.2026): Kopf und Texte wie im Ausdruck, ruhige Zeilen, offene Position mit Reitern,
   rechts eine Leiste mit Reitern, Summen als feste Leiste unten */
.angebot-raster.am-raster:has(> .am-blatt) { grid-template-columns: minmax(0, 1fr) 330px; }
body:has(.am-summenleiste) #test-leiste { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
.am-blatt { padding: 24px 28px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.am-brief { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px 22px; }
.am-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 14px; }
.am-f .l { font-size: 12px; color: var(--leise); }
.am-box { border: 1px solid var(--linie); border-radius: 7px; padding: 7px 10px; background: var(--titel-bg); min-height: 36px; }
.am-empf .hinweis-k { align-self: flex-start; }
.am-daten { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.am-daten label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.am-blatt input, .am-blatt select, .am-blatt textarea { width: 100%; min-width: 0; padding: 7px 9px; border: 1px solid var(--linie); border-radius: 7px; background: var(--fl); color: var(--text); font: inherit; font-size: 14px; }
textarea.am-fliess { border: 1px dashed transparent !important; background: transparent !important; resize: vertical; line-height: 1.5; font-size: 14.5px !important; padding: 8px 10px; }
textarea.am-fliess:hover { border-color: var(--linie) !important; }
textarea.am-fliess:focus { border-style: solid !important; border-color: var(--akzent) !important; background: var(--fl) !important; }
textarea.am-fliess::placeholder { color: var(--leise); font-style: italic; }
.am-kopf-zu { align-self: flex-start; background: none; border: 0; color: var(--leise); font: inherit; font-size: 13px; cursor: pointer; padding: 2px 0; text-align: left; }
.am-kopf-zu:hover { color: var(--akzent); }
.am-fest { margin: 0; font-size: 13px; }
.am-blatt .am-lv { overflow: visible; margin-top: 6px; container: lv / inline-size; }
.am-blatt .am-zeile { padding: 8px 6px; grid-template-columns: 66px 82px 54px minmax(0, 1fr) 88px 106px 28px; gap: 8px; }
.am-blatt .am-zeile.titel { grid-template-columns: 66px minmax(0, 1fr) 106px 28px; }
.am-blatt .am-zeile.am-textzeile { grid-template-columns: 66px minmax(0, 1fr) 28px; }
/* Positionen nach der Breite des Blatts, nicht des Bildschirms (Henning 22.10.2026: auf kleineren Bildschirmen nicht
   lesbar): erst engere Spalten, dann Kurztext über die ganze Breite und Menge/Einh./EP/Gesamt darunter */
@media (max-width: 1100px) { .angebot-raster.am-raster:has(> .am-blatt) { grid-template-columns: minmax(0, 1fr); } }
@container lv (max-width: 860px) {
  .am-blatt .am-zeile { grid-template-columns: 54px 70px 46px minmax(0, 1fr) 80px 96px 26px; gap: 6px; }
  .am-blatt .am-zeile.titel { grid-template-columns: 54px minmax(0, 1fr) 96px 26px; }
  .am-blatt .am-zeile.am-textzeile { grid-template-columns: 54px minmax(0, 1fr) 26px; }
}
@container lv (max-width: 680px) {
  .am-blatt .am-zeile.kopfzeile { display: none; }
  .am-blatt .am-zeile.pos-zeile { grid-template-columns: 58px minmax(0, 1fr) minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-areas: "pos text text text menu" "pos menge einh ep gb"; row-gap: 4px; }
  .am-blatt .am-zeile.pos-zeile:not(.aktiv) { align-items: baseline; }
  .am-blatt .am-zeile.pos-zeile:not(.aktiv) > div { padding-top: 0; }
  .am-blatt .am-zeile.pos-zeile > :nth-child(1) { grid-area: pos; }
  .am-blatt .am-zeile.pos-zeile > :nth-child(2) { grid-area: menge; }
  .am-blatt .am-zeile.pos-zeile > :nth-child(3) { grid-area: einh; }
  .am-blatt .am-zeile.pos-zeile > :nth-child(4) { grid-area: text; }
  .am-blatt .am-zeile.pos-zeile > :nth-child(5) { grid-area: ep; display: block; text-align: right; }
  .am-blatt .am-zeile.pos-zeile > :nth-child(6) { grid-area: gb; display: block; }
  .am-blatt .am-zeile.pos-zeile > :nth-child(7) { grid-area: menu; justify-self: end; }
  .am-blatt .am-zeile.pos-zeile:not(.aktiv) > :nth-child(2), .am-blatt .am-zeile.pos-zeile:not(.aktiv) > :nth-child(3) { color: var(--leise); font-size: 13px; }
  .am-blatt .am-zeile.titel { grid-template-columns: 58px minmax(0, 1fr) auto 26px; }
  .am-blatt .am-zeile.titel .gb { display: block; }
  .am-blatt .am-zeile.am-textzeile { grid-template-columns: 58px minmax(0, 1fr) 26px; }
}
main:has(.am-blatt) { max-width: 1560px; }
main:has(.gantt) { max-width: none; }
.am-blatt .am-zeile.kopfzeile { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; background: var(--titel-bg); border-bottom: 2px solid var(--linie); }
.am-zeile.pos-zeile:not(.aktiv), .am-zeile.titel:not(.aktiv), .am-zeile.am-textzeile:not(.aktiv) { cursor: pointer; }
.am-zeile.pos-zeile:not(.aktiv) > div, .am-zeile.titel:not(.aktiv) .bez { padding-top: 2px; }
.am-zeile.pos-zeile:not(.aktiv) .pos, .am-zeile.titel:not(.aktiv) .pos { padding-top: 3px; }
.am-zeile.pos-zeile:not(.aktiv) .gb, .am-zeile.titel:not(.aktiv) .gb { padding-top: 2px; }
.am-zeile:not(.aktiv):not(.kopfzeile):hover { background: color-mix(in srgb, var(--akzent-hell) 30%, var(--fl)); }
.am-zeile.titel:not(.aktiv):hover { background: color-mix(in srgb, var(--akzent-hell) 30%, var(--titel-bg)); }
.am-zeile.zaehlt-nicht:not(.aktiv) > div:not(.punkte-zelle) { font-style: italic; color: var(--leise); }
.am-zeile.ziel { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--akzent) 45%, transparent); }
.am-zeile.aktiv.pos-zeile { box-shadow: none; outline: 2px solid var(--akzent); outline-offset: -2px; border-radius: 8px 8px 0 0; background: var(--fl); }
.am-zeile .am-lese { white-space: pre-wrap; overflow-wrap: anywhere; }
.am-textzeile .am-lese { font-style: italic; color: var(--leise); }
.am-ep-t { padding-top: 8px; font-variant-numeric: tabular-nums; }
.am-zeile .punkte-zelle details.am-menue > summary { opacity: 0; }
.am-zeile:hover .punkte-zelle details.am-menue > summary, .am-zeile.aktiv .punkte-zelle details.am-menue > summary, details.am-menue[open] > summary, details.am-menue > summary:focus-visible { opacity: 1; }
.mk { display: inline-block; font-size: 11px; border-radius: 4px; padding: 0 5px; margin-left: 6px; vertical-align: 1px; color: var(--akzent); background: var(--akzent-hell); font-style: normal; white-space: nowrap; }
.mk.fehler { color: var(--warn); background: var(--warnung-bg); }
.mk.art { color: var(--leise); background: var(--titel-bg); border: 1px solid var(--linie); }
.am-ed { border: 2px solid var(--akzent); border-top: 0; border-radius: 0 0 10px 10px; margin: 0 0 12px; background: var(--fl); display: flex; flex-direction: column; min-width: 0; }
.am-etabs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; background: var(--titel-bg); border-bottom: 1px solid var(--linie); padding: 0 10px; }
.am-etabs button { background: none; border: 0; font: inherit; font-size: 14px; color: var(--leise); padding: 9px 12px; cursor: pointer; white-space: nowrap; }
.am-etabs button.an { color: var(--akzent); font-weight: 600; box-shadow: inset 0 -2px 0 var(--akzent); background: var(--fl); }
.am-etabs button small { font-size: 11px; background: var(--akzent-hell); color: var(--akzent); border-radius: 8px; padding: 0 6px; margin-left: 3px; font-weight: 600; }
.am-etabs small.aus { font-size: 11px; color: var(--leise); margin: 0 6px 0 -8px; }
.am-epanel { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.am-epanel textarea { resize: vertical; line-height: 1.45; }
.am-epanel > p { margin: 0; }
.am-epanel > button.neben { align-self: flex-start; }
.am-erg { margin: 0 14px; background: var(--akzent-hell); color: var(--text); border-radius: 8px; padding: 9px 12px; font-size: 14px; line-height: 1.6; }
.am-erg .pfeil { color: var(--akzent); margin: 0 4px; }
.am-efuss { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 14px 12px; }
.am-efuss .hinweis-k { margin-right: auto; }
table.am-t tr.am-klapp td { background: var(--titel-bg); padding: 5px 8px; }
table.am-t tr.am-klapp .verweis { font-size: 13px; text-decoration: none; text-align: left; }
table.am-t tr.am-klapp .hinweis-k { margin-left: 8px; }
.am-mehr { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.am-mehr > label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--leise); }
.am-mehr > label.am-radio { flex-direction: row; align-items: center; gap: 8px; color: var(--text); font-size: 14px; }
.am-mehr > label.am-radio input { width: auto; }
.am-mehr p { margin: 0; }
button.neben.gefahr { color: var(--warn); }
.am-blatt .m-neu { padding: 10px 6px; }
.am-summe { margin: 14px 0 4px auto; width: min(340px, 100%); display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.am-summe > div { display: flex; justify-content: space-between; gap: 12px; }
.am-summe .b { font-weight: 700; border-top: 1px solid var(--linie); padding-top: 6px; }
.am-leiste { position: sticky; top: 12px; padding: 0; display: flex; flex-direction: column; min-width: 0; }
.am-ltabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--linie); }
.am-ltabs button { background: none; border: 0; font: inherit; font-size: 11px; color: var(--leise); padding: 9px 2px 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; white-space: nowrap; }
.am-ltabs button b { font-size: 16px; font-weight: 400; line-height: 1.1; }
.am-ltabs button.an { color: var(--akzent); font-weight: 600; box-shadow: inset 0 -2px 0 var(--akzent); }
.am-lpanel { padding: 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; max-height: calc(100vh - 170px); overflow-y: auto; }
.am-lpanel textarea { width: 100%; resize: vertical; padding: 7px 9px; border: 1px solid var(--linie); border-radius: 7px; background: var(--fl); color: var(--text); font: inherit; font-size: 14px; }
.am-lpanel .am-katalog-liste { max-height: none; }
.am-kat-wahl { display: flex; gap: 6px; flex-wrap: wrap; }
.am-kat-wahl .chip-knopf { font-size: 13px; padding: 4px 10px; }
.am-beleg { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.am-beleg select { width: auto !important; }
dl.am-kennzahlen { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin: 6px 0 0; font-size: 13.5px; }
dl.am-kennzahlen dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.am-summenleiste { position: sticky; bottom: 0; z-index: 15; margin: 18px -28px -22px; background: var(--leiste); color: #fff; display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: center;
  padding: 11px 28px calc(11px + env(safe-area-inset-bottom, 0px)); font-size: 14px; }
.am-summenleiste > * > span { display: block; color: var(--leiste-text); font-size: 12px; }
.am-summenleiste b { font-size: 16.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.am-summenleiste .gut b { color: #8fe0b0; }
.am-summenleiste .schlecht b { color: #ffb4ab; }
.am-summenleiste .am-pruef { margin-left: auto; background: none; border: 0; color: #fff; font: inherit; text-align: right; cursor: pointer; padding: 0; }
.am-summenleiste .am-pruef.schlecht b { color: #ffb4ab; }
@media (max-width: 1100px) {
  .am-leiste { position: static; }
  .am-lpanel { max-height: none; }
}
@media (max-width: 800px) {
  .am-blatt { padding: 16px 12px; }
  .am-brief { grid-template-columns: 1fr; }
  .am-summenleiste { margin: 14px -16px -16px; padding-inline: 16px; gap: 6px 18px; }
  .am-summenleiste b { font-size: 14.5px; }
  body:has(.am-summenleiste) #test-leiste { bottom: calc(118px + env(safe-area-inset-bottom, 0px)); }
  .am-zeile .punkte-zelle details.am-menue > summary { opacity: 1; }
  .am-etabs { padding: 0 4px; }
  .am-etabs button { padding: 8px 8px; font-size: 13px; }
  .am-epanel { padding: 10px 8px; }
  .am-erg { margin: 0 8px; }
  .am-efuss { padding: 10px 8px; }
}

/* Liquidität: Ausblenden und „Was wäre, wenn“ (Henning, 21.10.2026) */
:root { --probe-bg: #fff6dc; --probe-linie: #f0d98a; --probe-text: #7a4f00; --probe-kurve: #9a6200; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --probe-bg: #3a2f12; --probe-linie: #6e5a1f; --probe-text: #f5d98a; --probe-kurve: #e0b050; } }
:root[data-theme="dark"] { --probe-bg: #3a2f12; --probe-linie: #6e5a1f; --probe-text: #f5d98a; --probe-kurve: #e0b050; }
.liqui-probe { display: flex; align-items: center; gap: 12px; background: var(--probe-bg); border: 1px solid var(--probe-linie); color: var(--probe-text); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 14px; line-height: 1.5; }
.liqui-probe > div { flex: 1; min-width: 0; }
.liqui-probe .symbol { font-size: 18px; }
.liqui-svg .was-linie { fill: none; stroke: var(--probe-kurve); stroke-width: 2.5; stroke-dasharray: 7 4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.kurve-legende .k-was { border-color: var(--probe-kurve); border-top-style: dashed; }
.liqui-modus { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }
.liqui-modus .chip-knopf { font-size: 13px; padding: 4px 11px; }
.liqui-modus .chip-knopf.an.was { background: var(--probe-bg); border-color: var(--probe-kurve); color: var(--probe-text); }
.liqui-posten td.vorne, .liqui-posten th.vorne { width: 30px; padding-right: 0; }
.liqui-posten td.vorne input { width: 16px; height: 16px; margin: 2px 0 0; }
.liqui-posten tr.ausgeblendet td:not(.vorne) { opacity: .5; }
/* Haken „zählt“ (Henning, 26.10.2026): ohne Haken grau und durchgestrichen, zählt nirgends mit */
.liqui-posten th { padding: 2px 4px 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--leise); text-align: left; }
.liqui-posten th.datum { width: 86px; }
.liqui-posten th.zahl { width: 112px; text-align: right; }
.liqui-posten th.zaehlt, .liqui-posten td.zaehlt { width: 46px; text-align: center; }
th.zaehlt, td.zaehlt { text-align: center; }
td.zaehlt input, input.zaehlt-haken { width: 16px; height: 16px; margin: 2px 0 0; cursor: pointer; }
tr.zaehlt-nicht td:not(.zaehlt):not(.vorne) { color: var(--leise); }
tr.zaehlt-nicht td.zahl, tr.zaehlt-nicht td.zahl *, tr.zaehlt-nicht td.text { text-decoration: line-through; text-decoration-color: var(--leise); }
tr.zaehlt-nicht td.zahl.ein, tr.zaehlt-nicht td.zahl.aus, tr.zaehlt-nicht td.zahl span { color: var(--leise); }
.tag-zaehlt { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: var(--linie); color: var(--leise); white-space: nowrap; text-decoration: none; }
tr.zaehlt-nicht td.text .tag-zaehlt { text-decoration: none; }
@media (max-width: 640px) {
  .liqui-posten th.datum { width: 62px; }
  .liqui-posten th.zahl { width: 84px; }
  .liqui-posten th.zaehlt, .liqui-posten td.zaehlt { width: 34px; }
}
.liqui-posten tr.probe-weg td { background: var(--probe-bg); }
.liqui-posten tr.probe-weg td.text, .liqui-posten tr.probe-weg td.zahl { text-decoration: line-through; color: var(--leise); }
.liqui-posten tr.aus-hinweis td { color: var(--leise); font-size: 13px; }
.liqui-posten td.datum { white-space: normal; }
.liqui-dat { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.tag-probe { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 5px; border-radius: 4px; background: var(--probe-bg); border: 1px solid var(--probe-linie); color: var(--probe-text); }
input.liqui-datum { width: 100%; font: inherit; font-size: 13px; padding: 2px 4px; border: 1px solid var(--akzent); border-radius: 6px; background: var(--fl); color: var(--text); }
.probe-summe { font-weight: 400; color: var(--probe-text); }

/* Jahresplanung (Stufe 5, Entwurf finanzen/entwurf-jahresplan) */
.jp-jahre { display: flex; gap: 6px; }
.jp-leiste .hinweis { margin-left: 0; }
.jp-versionen { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.jp-gilt { font-size: 11px; font-weight: 700; color: var(--gut-text); background: var(--gut-bg); border-radius: 99px; padding: 1px 6px; margin-left: 2px; }
.jp-werkzeug[hidden] { display: none; }
.jp-werkzeug { flex-basis: 100%; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--fl); border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; }
.jp-umbenennen { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.jp-umbenennen input { padding: 7px 10px; }
.jp-leer { max-width: 760px; }
.jp-leer h2 { margin-top: 0; }
.jp-liste { padding-left: 20px; line-height: 1.6; }
.jp-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 16px; align-items: start; }
.jp-links, .jp-rechts { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.jp-rechts { position: sticky; top: 12px; }
.jp-schritte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.jp-schritte button { display: flex; gap: 8px; align-items: center; text-align: left; font-size: 13px; padding: 8px 10px; }
.jp-nr { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 99px; background: var(--akzent-hell); color: var(--akzent); font-size: 12px; font-weight: 700; margin-right: 8px; }
.jp-schritte .jp-nr { margin-right: 0; }
.jp-schritt { scroll-margin-top: 12px; }
.jp-schritt h2 { display: flex; align-items: center; font-size: 17px; margin: 0 0 12px; }
.jp-unter { font-size: 14px; margin: 16px 0 8px; color: var(--leise); text-transform: uppercase; letter-spacing: .04em; }
.jp-bausteine { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.jp-baustein { border: 1px solid var(--linie); border-radius: 10px; background: var(--fl); }
.jp-baustein.auf { border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent-hell); }
.jp-zeile { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; cursor: pointer; border-radius: 10px; }
.jp-zeile:hover { background: var(--titel-bg); }
.jp-zeile:focus-visible { outline: 2px solid var(--akzent); }
.jp-sym { font-size: 20px; }
.jp-was { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.jp-was small { color: var(--leise); font-size: 13px; }
.jp-betrag { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.jp-editor, .jp-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.jp-editor { padding: 4px 12px 12px; border-top: 1px solid var(--linie); padding-top: 12px; }
.jp-breit { grid-column: 1 / -1; }
.jp-editor .knoepfe { display: flex; justify-content: space-between; gap: 8px; }
.jp-f { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--leise); min-width: 0; }
.jp-f > span:first-child { font-weight: 600; color: var(--text); }
.jp-ein { display: flex; align-items: center; border: 1px solid var(--eingabe-linie); background: var(--eingabe-bg); border-radius: 8px; overflow: hidden; }
.jp-ein input, .jp-ein select { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--eingabe-text); font: inherit; font-size: 15px; padding: 8px 10px; text-align: right; font-variant-numeric: tabular-nums; }
.jp-ein select { text-align: left; color: var(--text); background: var(--fl); }
.jp-ein input[data-t="text"] { text-align: left; }
.jp-ein i { font-style: normal; padding: 0 10px; color: var(--leise); font-size: 13px; white-space: nowrap; }
.jp-ein:focus-within { outline: 2px solid var(--akzent); }
.jp-ein input.ungueltig { background: var(--warnung-bg); color: var(--warnung-text); }
.jp-f small.hinweis { font-size: 12px; }
.jp-treppe h2, .jp-vergleich h2 { margin: 0 0 10px; font-size: 17px; }
.jp-treppe table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.jp-treppe td { padding: 7px 6px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.jp-treppe td small { display: block; color: var(--leise); font-size: 12px; }
.jp-z { width: 16px; color: var(--leise); font-weight: 700; }
.jp-mitte { color: var(--leise); font-size: 12.5px; }
.jp-q { font-size: 12px; color: var(--leise); text-align: right; width: 118px; }
.jp-treppe td.zahl { white-space: nowrap; text-align: right; }
.jp-q .ampel-chip { margin-left: 4px; }
.jp-treppe tr.summe td { font-weight: 600; border-top: 2px solid var(--linie); }
.jp-treppe tr.gewinn td { font-size: 16px; }
.jp-treppe tr.gewinn.rot td.zahl { color: var(--warn); }
.jp-treppe tr.gewinn.gruen td.zahl { color: var(--gut-text); }
.jp-luecke { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--titel-bg); border: 1px dashed var(--linie); }
.jp-luecke p { margin: 0 0 8px; }
.jp-vorschlaege { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.jp-vorschlaege .chip-knopf, .chip-knopf.gestrichelt { border-style: dashed; border-color: var(--akzent); color: var(--akzent); font-size: 13.5px; }
.jp-ok { color: var(--gut-text); font-weight: 600; }
.jp-scroll { overflow-x: auto; }
.jp-vergleich table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 14px; }
.jp-vergleich th, .jp-vergleich td { padding: 6px 8px; border-bottom: 1px solid var(--linie); text-align: right; white-space: nowrap; }
.jp-vergleich th[scope=row], .jp-vergleich thead th:first-child { text-align: left; font-weight: 500; color: var(--leise); }
.jp-vergleich .an { background: var(--akzent-hell); }
.jp-gespeichert { min-height: 1em; margin: 0; }
.jp-monate, .jp-planist { display: flex; flex-direction: column; gap: 14px; }
.jp-knapp { display: flex; gap: 14px; align-items: flex-start; border-left: 5px solid var(--gut-text); }
.jp-knapp.eng { border-left-color: var(--eingabe-linie); }
.jp-knapp p { margin: 0 0 8px; }
.jp-vorlagen { display: flex; gap: 6px; flex-wrap: wrap; }
.jp-saison { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.jp-monat { display: flex; flex-direction: column; align-items: stretch; gap: 4px; text-align: center; font-size: 12.5px; min-width: 0; }
.jp-monat b { font-size: 12px; font-variant-numeric: tabular-nums; }
.jp-saeule-feld { height: 120px; display: flex; align-items: flex-end; cursor: ns-resize; touch-action: none; border-bottom: 1px solid var(--linie); }
.jp-saeule { width: 100%; background: var(--g-vorgang-rand); border-radius: 5px 5px 0 0; }
.jp-monat.tief .jp-saeule { background: var(--akzent); }
.jp-saeule:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.jp-monat label { display: flex; flex-direction: column; gap: 2px; color: var(--leise); }
.jp-monat input { width: 100%; text-align: center; border: 1px solid var(--eingabe-linie); background: var(--eingabe-bg); color: var(--eingabe-text); border-radius: 6px; padding: 3px 2px; font: inherit; font-size: 12.5px; }
.jp-monat label i { display: none; }
.jp-summe { color: var(--warnung-text); margin: 10px 0 0; font-size: 14px; }
.jp-tabelle .liste { overflow-x: auto; }
.jp-monatsplan td, .jp-monatsplan th { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 13.5px; padding: 6px 7px; }
.jp-monatsplan tr.jp-summe-zeile td { font-weight: 600; border-top: 2px solid var(--linie); }
.jp-monatsplan tr.jp-klein td { color: var(--leise); font-size: 13px; }
.jp-monatsplan .aus { color: var(--warn); }
.jp-monatsplan .ein { color: var(--gut-text); }
.jp-monatsplan .jp-tief { background: var(--warnung-bg); color: var(--warnung-text); padding: 2px 4px; border-radius: 4px; }
.jp-pi-kopf { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.jp-monatswahl { display: flex; gap: 4px; flex-wrap: wrap; }
.jp-monatswahl .chip-knopf { font-size: 13px; padding: 4px 9px; color: var(--leise); }
.jp-monatswahl .chip-knopf.mit { color: var(--text); font-weight: 600; }
.jp-monatswahl .chip-knopf.an { color: var(--akzent); }
.knopf-datei { margin-left: auto; cursor: pointer; }
label.haupt { display: inline-block; background: var(--akzent); color: var(--akzent-text); border-radius: 8px; padding: 10px 18px; font-weight: 600; }
label.haupt:hover { background: var(--akzent-hover); }
label.haupt:focus-within { outline: 2px solid var(--akzent); outline-offset: 2px; }
#jp-bwa-fehler:empty { display: none; }
.jp-kennzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.jp-kz { display: flex; flex-direction: column; gap: 2px; border-top: 4px solid var(--linie); }
.jp-kz b { font-size: 26px; font-variant-numeric: tabular-nums; }
.jp-kz small { color: var(--leise); }
.jp-kz.gut { border-top-color: var(--gut-text); }
.jp-kz.schlecht { border-top-color: var(--warn); }
.jp-kz.schlecht b { color: var(--warn); }
.jp-pi td { font-variant-numeric: tabular-nums; }
.jp-pi tr.jp-summe-zeile td { font-weight: 600; border-top: 2px solid var(--linie); }
.jp-pi tr.jp-gelb td { background: var(--eingabe-bg); color: var(--eingabe-text); }
.jp-pi tr.jp-rot td { background: var(--warnung-bg); color: var(--warnung-text); }
.jp-pi tr.jp-gut td.zahl:nth-last-child(2) { color: var(--gut-text); }
input.jp-notiz { width: 100%; min-width: 140px; border: 1px solid var(--linie); border-radius: 6px; padding: 5px 8px; background: var(--fl); color: var(--text); font: inherit; font-size: 13.5px; }
.jp-zu { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 10px; }
.jp-zu th, .jp-zu td { padding: 5px 8px; border-bottom: 1px solid var(--linie); text-align: left; }
.jp-zu td.zahl, .jp-zu th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.jp-zu tr.leise td { color: var(--leise); }
.jp-zu select { padding: 5px 8px; border: 1px solid var(--linie); border-radius: 6px; background: var(--fl); color: var(--text); font: inherit; font-size: 13.5px; max-width: 100%; }
.jp-sitzung h2 { font-size: 17px; margin: 0 0 8px; }
.jp-sitzung ul { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 6px; }
.jp-sitzung li.spaeter { color: var(--leise); }
.jp-sitzung label { display: flex; gap: 8px; align-items: flex-start; }
.erfolg-text { color: var(--gut-text); font-weight: 600; font-size: 13.5px; }
.start-jahresplan { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linie); }
.start-jahresplan a { color: var(--text); text-decoration: none; }
.start-jahresplan a:hover { color: var(--akzent); }
.jp-balken { flex-basis: 100%; height: 6px; border-radius: 99px; background: var(--linie); overflow: hidden; }
.jp-balken i { display: block; height: 100%; background: var(--gut-text); }
.liqui-plan-hinweis { margin-top: 4px; }
@media (max-width: 1100px) {
  .jp-raster { grid-template-columns: minmax(0, 1fr); }
  .jp-rechts { position: static; }
}
@media (max-width: 800px) {
  .jp-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jp-editor, .jp-felder { grid-template-columns: minmax(0, 1fr); }
  .jp-kennzahlen { grid-template-columns: minmax(0, 1fr); }
  .jp-saison { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .jp-saeule-feld { height: 80px; }
  .jp-treppe td { padding: 6px 3px; }
  .jp-mitte { display: none; }
  .jp-q { white-space: normal; }
  .jp-knapp { flex-direction: column; }
  .knopf-datei { margin-left: 0; }
}
.jp-monate .karte-kopf { flex-wrap: wrap; gap: 8px; }

/* Laufende Kosten (Henning, 21.10.2026): Kacheln, Gruppen mit Summen, Zellen direkt ändern */
.lk-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.lk-kachel { display: flex; flex-direction: column; gap: 2px; background: var(--fl); border: 1px solid var(--linie); border-radius: 10px; padding: 14px 16px; min-width: 0; color: inherit; text-decoration: none; }
.lk-kachel.haupt { border-left: 4px solid var(--akzent); }
.lk-kachel span { color: var(--leise); font-size: 14px; }
.lk-kachel b { font-size: 26px; font-variant-numeric: tabular-nums; }
.lk-kachel small { color: var(--leise); }
a.lk-kachel:hover { border-color: var(--akzent); }
.lk-karte { padding: 14px 16px; }
.liste-leiste .leiste-rechts { margin-left: auto; display: inline-flex; gap: 6px; }
.liste-leiste .leiste-rechts button:disabled { opacity: 0.5; cursor: default; }
table.gruppiert tr.gruppen-kopf td { background: var(--bg); font-weight: 600; border-top: 1px solid var(--linie); }
tr.gruppen-kopf small { color: var(--leise); font-weight: 400; }
.gruppe-knopf { all: unset; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; font-weight: 600; border-radius: 4px; }
.gruppe-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.gruppe-knopf .pfeil { display: inline-block; transition: transform 0.15s; color: var(--leise); font-size: 12px; }
tr.gruppen-kopf.zu .pfeil { transform: rotate(-90deg); }
tr.gruppen-neu td { padding-top: 4px; padding-bottom: 8px; }
tr.gruppen-neu .verweis { font-weight: 600; }
tfoot tr.summen-zeile td { border-top: 2px solid var(--text); font-weight: 600; padding-top: 10px; }
tfoot tr.summen-zeile small { font-weight: 400; color: var(--leise); }
td.editierbar { cursor: text; }
td.editierbar:hover { box-shadow: inset 0 0 0 1px var(--linie); border-radius: 4px; }
td.in-arbeit { padding: 2px 4px; }
.zelle-ed { width: 100%; min-width: 90px; box-sizing: border-box; padding: 5px 7px; border: 2px solid var(--akzent); border-radius: 6px; font: inherit; background: var(--fl); color: var(--text); }
.zelle-ed.zahl { text-align: right; }
td.fehler-zelle .zelle-ed { border-color: var(--warn); background: var(--warnung-bg); }
.lk-bald { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 12px; background: var(--warnung-bg); color: var(--warnung-text); white-space: nowrap; }
.lk-spaeter { color: var(--leise); font-style: italic; }
.lk-hilfe { font-size: 13px; margin-top: 8px; }
@media (max-width: 1100px) { .lk-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 500px) { .lk-kachel b { font-size: 22px; } .lk-hilfe { display: none; } }

/* Handy (Henning, 21.10.2026, Entwurf handy/entwurf): Leiste unten, dunkler Kopf, Tabellen als Karten */
.nur-handy, #unten { display: none; }
.heute-seite { display: flex; flex-direction: column; gap: 12px; }
.heute-seite h3.abschnitt { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--leise); margin: 6px 0 -4px; }
.heute-karte { border-left: 4px solid var(--akzent); }
.heute-karte .zeile { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.heute-karte h2 { margin: 0; font-size: 18px; }
.heute-karte p { margin: 6px 0; }
.heute-karte .marke, .heute-stunden .marke { background: var(--akzent-hell); color: var(--akzent); }
.heute-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.heute-knoepfe a { text-align: center; padding: 11px 10px; }
.naechste-tage { list-style: none; margin: 0; padding: 0; }
.naechste-tage li { display: flex; flex-direction: column; padding: 9px 0; border-bottom: 1px solid var(--linie); }
.naechste-tage li:last-child { border-bottom: 0; }
.naechste-tage span { color: var(--leise); font-size: 14px; }
a.heute-stunden { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--text); text-decoration: none; }
.heute-stunden span:first-child { display: flex; flex-direction: column; }
.heute-stunden small { color: var(--leise); }
.heute-stunden b { font-size: 20px; font-variant-numeric: tabular-nums; }
.mehr-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px; }
.mehr-raster button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 4px; border: 1px solid var(--linie); border-radius: 10px; background: var(--fl); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.mehr-raster svg { width: 24px; height: 24px; color: var(--akzent); }

@media (max-width: 640px) {
  .nur-handy { display: flex; }
  .nur-pc { display: none !important; }
  /* Übersicht: lange Aufgabenzeilen umbrechen statt die Seite zu verbreitern */
  .start { grid-template-columns: minmax(0, 1fr); }
  ul.aufgaben li { flex-wrap: wrap; row-gap: 2px; }
  ul.aufgaben small { white-space: normal; }
  #dialog-huelle { z-index: 40; }
  /* oben nur noch Logo und Konto, die Bereiche wandern nach unten */
  #seitenleiste { position: sticky; top: 0; z-index: 20; overflow: visible; padding: max(8px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 4px max(16px, env(safe-area-inset-left, 0px)); }
  #reiter { display: none; }
  main { padding: 0 max(16px, env(safe-area-inset-right, 0px)) calc(88px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
  #unten { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--fl); border-top: 1px solid var(--linie);
    padding: 4px max(4px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-left, 0px)); box-shadow: 0 -4px 14px rgb(0 0 0 / 0.06); }
  #unten button { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0; color: var(--leise); font: inherit; font-size: 11px; padding: 7px 0 5px; cursor: pointer; }
  #unten button svg { width: 23px; height: 23px; }
  #unten button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #unten button.aktiv { color: var(--akzent); font-weight: 700; }
  /* dunkler Seitenkopf wie im Entwurf, der Hauptknopf schwebt unten rechts */
  #inhalt > .kopf { background: var(--leiste); color: #fff; margin: 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))) 14px; padding: 6px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px)); gap: 8px; }
  #inhalt > .kopf h1 { color: #fff; font-size: 21px; }
  #inhalt > .kopf h1 .datum, #inhalt > .kopf h1 .nummer { color: var(--leiste-text); display: block; margin: 2px 0 0; font-size: 14px; }
  #inhalt > .kopf > button.haupt { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(80px + env(safe-area-inset-bottom, 0px)); z-index: 15; border-radius: 999px; padding: 13px 20px; box-shadow: 0 6px 18px rgb(0 0 0 / 0.25); }
  /* Übersicht: drei Zahlen, dann Warnungen vor Aufgaben */
  .handy-band { gap: 0; background: var(--leiste); border-radius: 12px; margin: -6px 0 14px; padding: 12px 6px; }
  .handy-band a { flex: 1; display: flex; flex-direction: column; align-items: center; color: #fff; text-decoration: none; min-width: 0; }
  .handy-band b { font-size: 24px; font-variant-numeric: tabular-nums; }
  .handy-band b.warn { color: #ffb4a8; }
  .handy-band small { color: var(--leiste-text); font-size: 12px; }
  .start { display: flex; flex-direction: column; gap: 12px; }
  .start .start-warnungen { order: -1; }
  .handy-aktionen { gap: 10px; margin: 0 0 12px; }
  .handy-aktionen a { flex: 1; text-align: center; padding: 11px; font-weight: 600; color: var(--akzent); border-color: var(--akzent); }
  .mehr-menue .mehr-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Tabellen als Karten: Titel groß, Nebeninfos klein darunter, Zahl und Status rechts */
  .liste table.karten-handy, .liste table.karten-handy tbody, .liste table.karten-handy tfoot { display: block; }
  .liste table.karten-handy thead { display: none; }
  .liste table.karten-handy tr[data-i] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; align-items: start; padding: 11px 12px; border-bottom: 1px solid var(--linie); }
  .liste table.karten-handy tr[data-i] > td { display: block; grid-column: 2; padding: 0; border: 0; text-align: left; }
  .liste table.karten-handy tr[data-i] > td.h-links { grid-column: 1; grid-row: 1 / span 4; padding-top: 2px; }
  .liste table.karten-handy tr[data-i] > td.h-titel { font-weight: 600; font-size: 16px; }
  .liste table.karten-handy tr[data-i] > td.h-unter { color: var(--leise); font-size: 13px; margin-top: 2px; }
  .liste table.karten-handy tr[data-i] > td.h-unter[data-t]:not(:empty)::before { content: attr(data-t) " "; }
  .liste table.karten-handy tr[data-i] > td.h-rechts { grid-column: 3; text-align: right; white-space: nowrap; }
  .liste table.karten-handy tr[data-i] > td.auge-spalte { grid-column: 3; width: auto; padding: 0; text-align: right; }
  .liste table.karten-handy td:empty, .liste table.karten-handy .griff-spalte { display: none; }
  .liste table.karten-handy tr.gruppen-kopf, .liste table.karten-handy tr.summen-zeile, .liste table.karten-handy tr.gruppen-neu { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 10px 12px; border-bottom: 1px solid var(--linie); }
  .liste table.karten-handy tr.gruppen-kopf td, .liste table.karten-handy tr.summen-zeile td, .liste table.karten-handy tr.gruppen-neu td { display: block; padding: 0; border: 0; }
  .liste table.karten-handy tr.gruppen-kopf td:first-child { flex-basis: 100%; }
  .liste table.karten-handy tr.leer { display: block; }
  .liste table.karten-handy tr.leer td { display: block; }
  .liste-leiste .leiste-rechts { margin-left: 0; }
}
@media (max-width: 640px) {
  body:not(:has(.am-summenleiste)) #test-leiste { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); right: auto; left: max(12px, env(safe-area-inset-left, 0px)); }
}
@media (max-width: 640px) {
  .liste table.karten-handy td { width: auto !important; min-width: 0; }
  .liste table.karten-handy tr[data-i] > td.optional { display: none; }
}
@media (max-width: 640px) { .liste table.karten-handy tr[data-i] { grid-auto-flow: row dense; } }

/* Handy, Schritt 2 (Henning „Ok“, 21.10.2026): Suche und Filterblatt, Wischen, Mehr, Projekt-Reiter, Terminplan-Liste, Angebot, Stunden */
.nur-handy-text, #handy-zurueck { display: none; }
html.pc-erzwungen #handy-zurueck { display: block; position: fixed; left: max(12px, env(safe-area-inset-left, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 50;
  background: var(--leiste); color: #fff; border: 0; border-radius: 999px; padding: 10px 16px; font: inherit; font-weight: 600; box-shadow: 0 6px 18px rgb(0 0 0 / 0.25); }
.rot { color: var(--warn); }
.chip-wahl { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linie); background: var(--fl); color: var(--text); cursor: pointer; white-space: nowrap; }
.chip-wahl.an { background: var(--akzent-hell); border-color: var(--akzent); color: var(--akzent); font-weight: 600; }
.filter-blatt h4, .mehr-liste h4 { margin: 12px 4px 6px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--leise); }
.filter-blatt .fb-inhalt { max-height: calc(85vh - 120px); overflow: auto; padding: 0 4px; }
.fb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-dann { margin: 8px 4px 4px; font-size: 13px; color: var(--leise); }
.fb-werte { display: flex; flex-direction: column; }
.fb-werte label, .fb-aus { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--linie); font-size: 15px; }
.fb-werte label span, .fb-aus span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-werte small, .fb-aus small { color: var(--leise); }
.fb-werte input, .fb-aus input { width: 20px; height: 20px; }
.fb-aus { margin-top: 12px; border-top: 1px solid var(--linie); }
.fb-aus svg { width: 18px; height: 18px; color: var(--leise); }
.fb-mehr { display: flex; width: 100%; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 8px; background: var(--fl); color: var(--text); font: inherit; cursor: pointer; }
.filter-blatt select { width: 100%; font: inherit; padding: 9px; border: 1px solid var(--linie); border-radius: 8px; background: var(--fl); color: var(--text); }
.fb-fuss { position: sticky; bottom: 0; background: var(--fl); border-top: 1px solid var(--linie); }
.fb-fuss .haupt { flex: 1; }
.mehr-liste > button { display: flex; width: 100%; align-items: center; gap: 12px; padding: 12px 6px; border: 0; border-bottom: 1px solid var(--linie); background: none; color: var(--text); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.mehr-liste > button svg { width: 22px; height: 22px; color: var(--akzent); flex: none; }
.mehr-liste > button span { flex: 1; min-width: 0; }
.mehr-liste > button i { font-style: normal; color: var(--leise); }
.mehr-liste small { color: var(--leise); font-weight: 400; }
.mehr-anpassen { margin: 12px 4px; padding: 10px 12px; background: var(--bg); border-radius: 8px; font-size: 13px; }
.handy-reiter { display: flex; gap: 2px; padding: 3px; background: var(--bg); border: 1px solid var(--linie); border-radius: 10px; margin: 0 0 12px; }
.handy-reiter button { flex: 1; min-width: 0; padding: 8px 4px; border: 0; border-radius: 8px; background: none; color: var(--leise); font: inherit; font-size: 14px; cursor: pointer; }
.handy-reiter button.aktiv { background: var(--fl); color: var(--text); font-weight: 700; box-shadow: 0 1px 3px rgb(0 0 0 / 0.12); }
.stand-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stand-zahlen > div { display: flex; flex-direction: column; min-width: 0; }
.stand-zahlen small { color: var(--leise); font-size: 12px; }
.stand-zahlen b { font-size: 17px; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.stand-zahlen b.gut { color: var(--gut-text); }
.stand-zahlen b.schlecht { color: var(--warn); }
.p-stand h3, .p-ablauf h3 { margin: 0 0 10px; font-size: 15px; display: flex; justify-content: space-between; }
.p-ablauf h3 a { font-size: 13px; font-weight: 400; }
.ablauf-liste { list-style: none; margin: 0; padding: 0; }
.ablauf-liste li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linie); }
.ablauf-liste li > span:first-child { min-width: 0; }
.ablauf-liste .unter { display: block; color: var(--leise); font-size: 13px; }

/* Terminplan am Handy */
.terminplan-handy { display: flex; flex-direction: column; }
.th-navi { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 4px; }
.th-tag { margin: 14px 0 6px; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--leise); }
.th-heute { background: var(--akzent); color: var(--akzent-text); border-radius: 999px; padding: 1px 8px; font-size: 11px; letter-spacing: 0; vertical-align: 1px; }
.th-liste { list-style: none; margin: 0; padding: 0; background: var(--fl); border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; }
.th-liste > li { border-bottom: 1px solid var(--linie); }
.th-liste > li:last-child { border-bottom: 0; }
.th-liste .unter { display: block; color: var(--leise); font-size: 13px; margin-top: 2px; }
.th-vorgang { border-left: 5px solid var(--farbe, var(--akzent)); }
.th-vorgang > button, .th-reserve > button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.th-vorgang > button > span:first-child { min-width: 0; }
.th-vorgemerkt, .th-person { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px 9px 17px; }
.th-vorgemerkt { background: var(--akzent-hell); }
.th-person.doppelt { background: var(--warnung-bg); }
.th-reserve > button { color: var(--leise); font-size: 14px; }
.th-reserve > button:disabled { cursor: default; }
.th-leer { padding: 9px 12px; color: var(--leise); font-size: 14px; }
button.klein { padding: 6px 12px; font-size: 13px; }
.th-auslastung { margin-top: 14px; }
.th-auslastung h3 { margin: 0 0 8px; font-size: 15px; }
.balkenanzeige { height: 12px; border-radius: 999px; background: var(--bg); border: 1px solid var(--linie); overflow: hidden; }
.balkenanzeige i { display: block; height: 100%; background: var(--akzent); }
.balkenanzeige.ueber i { background: var(--warn); }
.th-dialog input { width: 100%; box-sizing: border-box; }
button.breit { display: block; width: 100%; margin-top: 8px; }

/* Angebot am Handy */
.angebot-handy { display: flex; flex-direction: column; gap: 12px; }
.angebot-handy > .kopf { margin-bottom: 0 !important; }
.ah-banner { margin: 0; padding: 10px 12px; background: var(--akzent-hell); color: var(--akzent); border-radius: 8px; font-size: 13px; }
.ah-lv { padding: 4px 0; }
.ah-titel { display: flex; width: 100%; justify-content: space-between; gap: 10px; padding: 11px 14px; border: 0; border-bottom: 1px solid var(--linie); background: var(--titel-bg); color: var(--text); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.ah-liste { list-style: none; margin: 0; padding: 0; }
.ah-liste > li { border-bottom: 1px solid var(--linie); }
.ah-pos { display: flex; width: 100%; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 9px 14px 9px 24px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ah-pos:disabled { cursor: default; color: var(--text); }
.ah-pos > span:first-child { min-width: 0; }
.ah-pos b { font-weight: 500; }
.ah-pos .unter { display: block; color: var(--leise); font-size: 13px; margin-top: 2px; }
.ah-pos .unter .marke { display: inline-block; font-size: 11px; padding: 1px 7px; margin: 3px 4px 0 0; white-space: normal; }
.ah-pos .z { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ah-pos.zaehlt-nicht .z { color: var(--leise); }
.ah-text { padding: 9px 14px 9px 24px; color: var(--leise); font-size: 14px; white-space: pre-line; }
.ah-pruefung { font-size: 14px; }
.ah-pruefung.schlecht { border-color: var(--warnung-linie); background: var(--warnung-bg); }
.ah-pruefung ul { margin: 6px 0 0; }
.ah-knoepfe { display: flex; flex-direction: column; gap: 8px; }
.ah-knoepfe button { margin: 0; padding: 13px; }

/* Stunden: sichtbarer Pausenabzug und Verteilung auf die Einsätze */
.stunden-form .tag-rechnung { background: var(--akzent-hell); border-radius: 10px; padding: 12px; margin: 14px 0 0; }
.stunden-form .tag-rechnung p { margin: 6px 0 0; }
.tr-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tr-zahlen > div { display: flex; flex-direction: column; }
.tr-zahlen small { color: var(--leise); font-size: 12px; }
.tr-zahlen b { font-size: 20px; font-variant-numeric: tabular-nums; }
.tr-zahlen b.akzent { color: var(--akzent); }
.verteilen-kopf { margin: 16px 0 6px; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--leise); }
.stunden-form .verteilen { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linie); border-radius: 10px; }
.stunden-form .verteilen .anteil { display: grid; grid-template-columns: minmax(0, 1fr) 84px auto; gap: 8px; align-items: center; margin: 0; padding: 10px 12px; border-top: 1px solid var(--linie); }
.stunden-form .verteilen .anteil:first-child { border-top: 0; }
.stunden-form .verteilen .wer { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stunden-form .verteilen .wer .unter { color: var(--leise); font-size: 12px; }
.stunden-form .verteilen [data-f="taetigkeit"] { font-size: 14px; padding: 6px 8px; }
.stunden-form .verteilen .dauer { text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.stunden-form .verteilen .weg { background: none; border: 0; color: var(--leise); font-size: 20px; cursor: pointer; padding: 4px; }
.stunden-form .verteilt { display: flex; justify-content: space-between; margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--bg); font-size: 14px; }
.stunden-form .verteilt.gut b { color: var(--gut-text); }
.stunden-form .verteilt.schlecht b { color: var(--warn); }
.stunden-form .verteilt:empty { display: none; }
button.speichern-gruen { background: var(--gut-text); }
button.speichern-gruen:hover { background: var(--ein); }
.stunden-form .knoepfe .speichern-gruen { flex: 1; }

@media (max-width: 640px) {
  .nur-handy-text { display: inline; }
  /* Suche und Filter oben über jeder Liste; Ansichten als Chips */
  .liste-handy { gap: 8px; margin: 0 0 8px; }
  .lh-suche { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 9px 12px; border: 1px solid var(--linie); border-radius: 10px; background: var(--fl); color: var(--text); }
  .lh-filter { white-space: nowrap; }
  .lh-ansichten { gap: 6px; overflow-x: auto; margin: 0 0 8px; padding-bottom: 2px; }
  .liste-leiste [data-a="ansichten"], .liste-leiste [data-a="spalten"] { display: none; }
  .liste table.karten-handy tr[data-i] { touch-action: pan-y; transition: background 0.15s; }
  .liste table.karten-handy tr[data-i].wisch-weg { background: var(--warnung-bg); }
  /* Projektseite: nur der gewählte Reiter */
  .p-stand.nur-handy, .p-ablauf.nur-handy { display: block; }
  .projekt-raster.hr-ueberblick .p-stand, .projekt-raster.hr-ueberblick .p-ablauf, .projekt-raster.hr-ueberblick #p-unten, .projekt-raster.hr-ueberblick #p-oben .teile-kopf { display: none; }
  .projekt-raster.hr-ablauf > .projekt-haupt > :not(.p-ablauf), .projekt-raster.hr-ablauf .projekt-aufgaben { display: none; }
  .projekt-raster.hr-geld .p-ablauf, .projekt-raster.hr-geld .projekt-aufgaben, .projekt-raster.hr-geld #p-oben .teile-kopf,
  .projekt-raster.hr-geld #p-unten [data-teil="berichte"], .projekt-raster.hr-geld #p-unten [data-teil="ablage"] { display: none; }
  .projekt-raster.hr-geld > .projekt-haupt { display: flex; flex-direction: column; }
  .projekt-raster.hr-geld .p-stand { order: 1; } .projekt-raster.hr-geld #p-unten { order: 2; } .projekt-raster.hr-geld #p-oben { order: 3; }
  .projekt-raster.hr-ablage > .projekt-haupt > :not(#p-unten), .projekt-raster.hr-ablage .projekt-aufgaben, .projekt-raster.hr-ablage #p-unten .teile { display: none; }
  .projekt-raster:not([class*="hr-"]) .p-stand, .projekt-raster:not([class*="hr-"]) .p-ablauf { display: none; }
  /* Stammdaten nur lesen */
  #inhalt:has(.sd-handy) .kopf-knoepfe, #inhalt:has(.sd-handy) [data-sd-teil="import"], #inhalt:has(.sd-handy) .sd-auswahl,
  #inhalt:has(.sd-handy) .sd-wahl, #inhalt:has(.sd-handy) .knopfreihe { display: none !important; }
  .sd-handy { margin: 0 0 10px; padding: 10px 12px; background: var(--akzent-hell); color: var(--akzent); border-radius: 8px; font-size: 13px; }
  .stunden-form .verteilen .anteil { grid-template-columns: minmax(0, 1fr) 76px auto; }
}
@media (max-width: 640px) {
  .angebot-handy > .kopf { background: var(--leiste); color: #fff; margin: 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))) 0; padding: 6px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px)); gap: 8px; }
  .angebot-handy > .kopf h1 { color: #fff; font-size: 21px; }
  .angebot-handy > .kopf h1 .nummer { color: var(--leiste-text); display: block; margin: 2px 0 0; font-size: 14px; }
  #inhalt:has(.sd-handy) .lh-suche { display: none; }
  #inhalt:has(.sd-handy) .liste-handy { justify-content: flex-end; }
}
.handy-reiter.nur-handy { display: none; }
@media (max-width: 640px) { .handy-reiter.nur-handy { display: flex; } }

/* ---------- Personal → Stundensätze (M15–M19) ---------- */
.ss-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.ss-leiste .chip-knopf small { font-weight: 400; color: var(--leise); }
.ss-raster { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; align-items: start; }
.ss-rechts { display: grid; gap: 16px; min-width: 0; }
.ss-raster .karte h2 { font-size: 16px; margin: 0 0 8px; }
.ss-links { position: sticky; top: 12px; }
.ss-liste { display: grid; gap: 4px; }
.ss-eintrag { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.ss-eintrag:hover { background: var(--titel-bg); }
.ss-eintrag.an { border-color: var(--akzent); background: var(--akzent-hell); }
.ss-eintrag b, .ss-ergebnis b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ss-neu { display: grid; width: 100%; margin-top: 8px; padding: 8px; border: 1px dashed var(--akzent); border-radius: 8px; background: none; color: var(--akzent); font: inherit; cursor: pointer; }
.ss-neu small { color: var(--leise); font-size: 12px; }
.ss-abstand { margin-top: 16px !important; }
.ss-ergebnis { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px; margin-bottom: 4px; }
.ss-ergebnis b { color: var(--akzent); font-size: 18px; }
.ss-ergebnis.klein { border: 0; padding: 2px 10px; }
.ss-ergebnis.klein b { font-size: 14px; color: var(--text); }
.ss-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ss-kopf h2 { display: flex; align-items: center; gap: 6px; }
input.ss-titel { font: inherit; font-weight: 700; width: 12em; padding: 2px 6px; }
.ss-hinweis { background: var(--markiert); border-radius: 8px; padding: 6px 10px; }
.ss-rolle { overflow-x: auto; margin-top: 10px; }
table.ss-t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.ss-t th, table.ss-t td { padding: 5px 6px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: middle; }
table.ss-t th { font-size: 12.5px; color: var(--leise); font-weight: 600; }
table.ss-t th.zahl, table.ss-t td.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.ss-t tr.ss-block th { padding-top: 12px; color: var(--text); font-size: 13.5px; border-bottom: 2px solid var(--linie); }
table.ss-t tr.ss-zwischen td { font-weight: 600; background: var(--titel-bg); }
table.ss-t tr.ss-info td { color: var(--leise); font-size: 12.5px; }
table.ss-t tr.ss-ergebniszeile td { border-top: 2px solid var(--text); border-bottom: 0; padding-top: 8px; }
table.ss-t tr.ss-auszeit td, table.ss-t tr.ss-als-kosten td { color: var(--leise); }
table.ss-t tr.aus td { color: var(--leise); }
table.ss-t input { font: inherit; padding: 3px 5px; border: 1px solid var(--eingabe-linie); background: var(--eingabe-bg); color: var(--eingabe-text); border-radius: 5px; }
table.ss-t input.zahl { text-align: right; }
table.ss-t input.w-kurz { width: 4.5em; }
table.ss-t input.w-euro { width: 7em; }
table.ss-t input.ss-name { width: 100%; min-width: 14em; background: transparent; border-color: transparent; color: var(--text); }
table.ss-t input.ss-name:hover, table.ss-t input.ss-name:focus { border-color: var(--linie); }
table.ss-t input.ss-notiz { width: 9em; background: transparent; border-color: transparent; color: var(--leise); }
table.ss-t select { font: inherit; font-size: 12.5px; padding: 2px 4px; }
.ss-ansatz { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.ss-ansatz.klein { font-size: 12px; color: var(--leise); margin-top: 3px; }
.ss-ansatz.klein input.w-kurz { width: 3.6em; }
.ss-gross, .ss-gross span { font-size: 18px; font-weight: 700; color: var(--akzent); }
.ss-umsatz { margin: 12px 0 4px; }
.ss-umsatz input { font: inherit; width: 3.6em; text-align: right; padding: 2px 4px; border: 1px solid var(--eingabe-linie); background: var(--eingabe-bg); color: var(--eingabe-text); border-radius: 5px; }
.ss-einstellungen { display: grid; gap: 8px; margin-top: 8px; }
.ss-einstellungen input { font: inherit; width: 4em; text-align: right; padding: 2px 4px; border: 1px solid var(--eingabe-linie); background: var(--eingabe-bg); color: var(--eingabe-text); border-radius: 5px; }
.ss-schalter { position: relative; display: inline-block; width: 34px; height: 19px; }
.ss-schalter input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ss-schalter i { position: absolute; inset: 0; border-radius: 99px; background: var(--linie); pointer-events: none; transition: background .15s; }
.ss-schalter i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--fl); transition: left .15s; }
.ss-schalter input:checked + i { background: var(--akzent); }
.ss-schalter input:checked + i::after { left: 17px; }
.ss-schalter input:focus-visible + i { outline: 2px solid var(--akzent); outline-offset: 2px; }
.ss-weg { text-decoration: none !important; color: var(--leise) !important; font-size: 16px; }
.ss-leer { max-width: 640px; }
.ss-laufend-liste { display: grid; gap: 4px; max-height: 50vh; overflow: auto; margin-bottom: 8px; }
.ss-laufend-liste label { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--linie); }
.neue-saetze { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--markiert); border: 1px solid var(--eingabe-linie); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; }
.neue-saetze span { flex: 1 1 280px; }
@media (max-width: 900px) {
  .ss-raster { grid-template-columns: 1fr; }
  .ss-links { position: static; }
  table.ss-t .optional { display: none; }
}
table.ss-t input.ungueltig, .ss-umsatz input.ungueltig, .ss-einstellungen input.ungueltig { background: var(--warnung-bg); color: var(--warnung-text); border-color: var(--warn); }

/* Daten: Nextcloud-Zugang (P10) */
table.nc-zugang { border-collapse: collapse; margin: 6px 0 10px; width: auto; max-width: 100%; font-size: 14px; }
table.nc-zugang th { text-align: left; font-weight: 500; color: var(--leise); padding: 3px 16px 3px 0; vertical-align: top; white-space: nowrap; }
table.nc-zugang td { padding: 3px 0; overflow-wrap: anywhere; }
table.nc-zugang .leise { color: var(--leise); }
#nextcloud .knopfzeile { display: flex; flex-wrap: wrap; gap: 8px; }
/* Programmteile ein/aus unter Daten */
ul.module-liste { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 10px; }
ul.module-liste small { margin-left: 26px; display: inline-block; }

/* Übersicht: Aufgaben zweizeilig wie am Handy (Henning, 23.10.2026) */
ul.aufgaben li.aufgabe-2 { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; }
ul.aufgaben li.aufgabe-2 input { margin-top: 3px; }
ul.aufgaben li.aufgabe-2 .a-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
ul.aufgaben li.aufgabe-2 .a-text small { white-space: normal; font-size: 12.5px; }
ul.aufgaben li.aufgabe-2 .kategorie { margin: 2px 0 0; align-self: flex-start; }
ul.aufgaben li.aufgabe-2 .a-datum { font-size: 12.5px; color: var(--leise); white-space: nowrap; }
ul.aufgaben li.aufgabe-2 .a-datum.ueber { color: var(--warn); font-weight: 600; }
/* Geldfluss ohne Kontostand */
.fluss-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px; }
.fluss-kacheln > div { background: var(--bg); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.fluss-kacheln small { color: var(--leise); font-size: 12px; }
.fluss-kacheln b { font-size: 18px; font-variant-numeric: tabular-nums; }
.fl-ein { color: var(--gut-text); } .fl-pk { color: var(--fl-pk); } .fl-lk { color: var(--warn); } .fl-ust { color: var(--fl-ust); }
.liqui-svg .fl-linie { fill: none; stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.liqui-svg .fl-linie.fl-ein { stroke: var(--gut-text); }
.liqui-svg .fl-linie.fl-pk { stroke: var(--fl-pk); stroke-dasharray: 6 4; }
.liqui-svg .fl-linie.fl-lk { stroke: var(--warn); stroke-dasharray: 2 3; }
.liqui-svg .fl-linie.fl-ust { stroke: var(--fl-ust); stroke-dasharray: 8 3 2 3; }
.liqui-svg .fl-punkt { fill: var(--fl); stroke-width: 2; vector-effect: non-scaling-stroke; }
.liqui-svg .fl-punkt.fl-ein { stroke: var(--gut-text); } .liqui-svg .fl-punkt.fl-pk { stroke: var(--fl-pk); }
.liqui-svg .fl-punkt.fl-lk { stroke: var(--warn); } .liqui-svg .fl-punkt.fl-ust { stroke: var(--fl-ust); }
.fluss-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--leise); margin-top: 6px; }
.fluss-legende i { display: inline-block; width: 18px; height: 3px; vertical-align: middle; margin-right: 6px; background: currentColor; }
.fluss-legende i.fl-ein { background: var(--gut-text); } .fluss-legende i.fl-pk { background: var(--fl-pk); }
.fluss-legende i.fl-lk { background: var(--warn); } .fluss-legende i.fl-ust { background: var(--fl-ust); }
.liqui-fluss-kopf p.hinweis { margin: 0; }

/* Kontakte mit dem Handy abgleichen (Henning, 04.11.2026) */
.mark-handy { font-size: 12px; border-radius: 999px; padding: 2px 8px; background: var(--gut-bg); color: var(--gut-text); white-space: nowrap; }
.mark-handy.weg { background: var(--warnung-bg); color: var(--warnung-text); }
label.datei-knopf { display: inline-block; background: var(--fl); color: var(--text); border: 1px solid var(--linie); border-radius: 8px; padding: 8px 14px; cursor: pointer; }