:root {
  /* Corporate Design LiftTec (Konzept 30.09.2026): Logofarbe dunkel #283C81, Logofarbe hell #5A68D3, Schrift Arial */
  --navy: #283C81; --navy-2: #22336f; --navy-3: #1b2a5e;
  --amber: #5A68D3; --amber-weich: #eceefb;   /* Markenakzent (Name aus historischen Gründen) */
  --gelb-weich: #fff4d6;                       /* Warn-/Hinweisfarbe */
  --bg: #f3f5f8; --flaeche: #ffffff; --linie: #e2e6ed; --linie-2: #cfd6e1;
  --text: #1a1f2b; --text-2: #5b6475; --text-3: #8a93a3;
  --blau: #3d4bc2; --blau-weich: #e9ebfb;
  --gruen: #16803c; --gruen-weich: #e3f6e9;
  --rot: #c0362c; --rot-weich: #fde8e6;
  --orange: #c2570c; --orange-weich: #ffeedd;
  --grau-weich: #eef1f5;
  /* Flächen und Textfarben, die in der Dunkeldarstellung wechseln */
  --navy-text: var(--navy);                    /* Navy als Schrift-/Symbolfarbe */
  --amber-hover: #4a58c4; --gelb-text: #8a5d00;
  --kopf: #fafbfc; --hover: #f7f9fc; --seitenleiste: #ffffff; --topbar: rgba(243, 245, 248, .92);
  --ok-weich: #f7fcf8; --mangel-weich: #fff7f6; --plan: #9aa7bd; --umsatz: #2f6fd6;
  --schatten-pop: 0 12px 32px rgba(18,35,63,.16); --modal-hg: rgba(18, 35, 63, .45);
  color-scheme: light;
  --radius: 10px; --schatten: 0 1px 2px rgba(18, 35, 63, .06), 0 2px 8px rgba(18, 35, 63, .05);
  --font: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.45 var(--font); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--blau); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 22px; font-weight: 700; letter-spacing: -.2px; }
h2 { font-size: 16px; font-weight: 650; }
h3 { font-size: 14px; font-weight: 650; }
.muted { color: var(--text-2); } .klein { font-size: 12px; } .mono { font-variant-numeric: tabular-nums; }
.r { text-align: right; } .nowrap { white-space: nowrap; }
svg.i { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---- Layout ---- */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.seitenleiste { background: var(--seitenleiste); color: var(--text-2); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden; border-right: 1px solid var(--linie); }
.marke { padding: 16px 16px 12px; display: flex; align-items: center; gap: 10px; color: var(--navy-text); border-bottom: 1px solid var(--linie); min-height: 64px; }
.marke-bild { display: block; width: 100%; max-width: 188px; height: auto; }
.marke-kurz { display: none; width: 26px; height: auto; }
.marke-logo { width: 34px; height: 34px; border-radius: 8px; background: var(--amber); display: grid; place-items: center; color: #fff; }
.marke b { font-size: 17px; letter-spacing: -.3px; display: block; } .marke small { font-size: 11px; color: var(--text-3); }
.nav { padding: 0 10px 16px; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; flex: 1; scrollbar-width: thin; }
/* Suche im Menü */
.nav-suche { position: sticky; top: 0; z-index: 2; background: var(--seitenleiste); padding: 10px 0 8px; display: flex; align-items: center; }
.nav-suche svg.i { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--text-3); pointer-events: none; }
.nav-suche input { width: 100%; height: 32px; padding: 4px 10px 4px 32px; font-size: 13px; border-radius: 8px; background: var(--grau-weich); border: 1px solid transparent; }
.nav-suche input:focus { background: var(--flaeche); border-color: var(--amber); outline: none; }
.nav-leer { padding: 10px; font-size: 12.5px; color: var(--text-3); text-align: center; }
/* Gruppen */
.nav-gruppe { display: flex; flex-direction: column; gap: 1px; }
.nav-gruppe + .nav-gruppe { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--linie); }
.nav-titel { display: flex; align-items: center; gap: 8px; width: 100%; font: inherit; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-3);
  background: none; border: 0; cursor: pointer; padding: 8px 10px 5px; border-radius: 7px; text-align: left; }
.nav-titel svg.i { width: 14px; height: 14px; flex: none; }
.nav-titel.statisch { cursor: default; color: var(--amber); }
button.nav-titel:hover { color: var(--navy-text); background: var(--grau-weich); }
.nav-gruppe:has(a.aktiv) > .nav-titel { color: var(--navy-text); }
.nav-titel .pfeil { margin-left: auto; transition: transform .15s; font-size: 10px; }
.nav-gruppe.zu .nav-titel .pfeil { transform: rotate(-90deg); }
.nav-gruppe.zu .nav-links { display: none; }
.nav.sucht .nav-gruppe.zu .nav-links { display: flex; }
.nav.sucht .nav-titel .pfeil, .nav.sucht .zaehler-summe { display: none; }
.nav-titel .zaehler-summe { font-size: 10px; background: var(--amber); color: #fff; border-radius: 9px; padding: 0 6px; letter-spacing: 0; margin-left: auto; }
.nav-titel .zaehler-summe:not([hidden]) + .pfeil { margin-left: 4px; }
.nav-links { display: flex; flex-direction: column; gap: 1px; }
/* Einträge */
.nav-eintrag { position: relative; }
.nav-eintrag[hidden], .nav-gruppe[hidden] { display: none; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--text); font-weight: 500; position: relative; }
.nav a svg.i { color: var(--text-3); flex: none; }
.nav a:hover, .nav a:focus-visible { background: var(--grau-weich); text-decoration: none; color: var(--navy-text); }
.nav a:hover svg.i { color: var(--navy-text); }
.nav a.aktiv { background: var(--amber-weich); color: var(--navy-text); font-weight: 650; }
.nav a.aktiv svg.i { color: var(--amber); }
.nav a.aktiv::before { content: ''; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--amber); }
.nav .zaehler { margin-left: auto; background: var(--amber); color: #fff; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 9px; min-width: 18px; text-align: center; }
.nav a > span:not(.zaehler) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-stern { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: grid; place-items: center; border: 0; background: none; border-radius: 6px;
  color: var(--text-3); cursor: pointer; opacity: 0; transition: opacity .1s; }
.nav-stern svg.i { width: 14px; height: 14px; }
.nav-stern:hover { color: var(--amber); background: var(--seitenleiste); }
.nav-stern.an { color: var(--amber); }
.nav-stern.an svg.i { fill: currentColor; }
.nav-eintrag:hover .nav-stern, .nav-stern:focus-visible { opacity: 1; }
.nav-eintrag:hover a { padding-right: 34px; }
@media (hover: none) { .nav-stern { display: none; } }
/* „+ Neu“ in der Kopfzeile */
.neu-menue { position: relative; }
.neu-liste { position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px;
  box-shadow: var(--schatten-pop); padding: 6px; z-index: 40; display: flex; flex-direction: column; }
.neu-liste[hidden] { display: none; }
.neu-liste a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; color: var(--text); font-weight: 500; }
.neu-liste a:hover { background: var(--grau-weich); text-decoration: none; color: var(--navy-text); }
.neu-liste a svg.i { color: var(--text-3); }
.seitenleiste .fuss { padding: 10px 12px; border-top: 1px solid var(--linie); font-size: 12px; display: flex; align-items: center; gap: 10px; }
.benutzer-kreis { width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none; }
.benutzer-text { min-width: 0; flex: 1; line-height: 1.3; } .benutzer-text b { color: var(--text); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.benutzer-text span { color: var(--text-3); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fuss-knoepfe { display: flex; gap: 2px; }
.fuss-knoepfe a, .fuss-knoepfe button { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; color: var(--text-2); background: none; border: 0; cursor: pointer; }
.fuss-knoepfe a:hover, .fuss-knoepfe button:hover { background: var(--grau-weich); color: var(--navy-text); text-decoration: none; }
.nav-umschalten { display: flex; align-items: center; gap: 8px; margin: 0 10px 8px; padding: 6px 10px; border: 0; background: none; color: var(--text-3); font: inherit; font-size: 12px; cursor: pointer; border-radius: 7px; }
.nav-umschalten:hover { background: var(--grau-weich); color: var(--navy-text); }
/* Schmale Seitenleiste (nur Symbole) */
.app.schmal { grid-template-columns: 68px 1fr; }
.app.schmal .marke { justify-content: center; padding: 16px 8px 12px; }
.app.schmal .marke-bild, .app.schmal .nav a > span, .app.schmal .nav-titel, .app.schmal .benutzer-text, .app.schmal .nav-umschalten span { display: none; }
.app.schmal .marke-kurz { display: block; }
.app.schmal .nav-gruppe.zu .nav-links { display: flex; }
.app.schmal .nav-suche, .app.schmal .nav-stern { display: none; }
.app.schmal .nav { padding-top: 8px; }
.app.schmal .nav-eintrag:hover a { padding-right: 0; }
.app.schmal .nav-gruppe + .nav-gruppe { border-top: 1px solid var(--linie); padding-top: 6px; }
.app.schmal .nav a { justify-content: center; padding: 9px 0; }
.app.schmal .nav a .zaehler { position: absolute; top: 2px; right: 4px; font-size: 9px; padding: 0 4px; min-width: 0; }
.app.schmal .seitenleiste .fuss { flex-direction: column; padding: 10px 6px; }
.app.schmal .fuss-knoepfe { flex-direction: column; }
.app.schmal .nav-umschalten { justify-content: center; margin: 0 6px 8px; }
.app.schmal .nav-umschalten svg { transform: rotate(180deg); }

.haupt { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; background: var(--topbar); backdrop-filter: blur(6px); padding: 12px clamp(14px, 2.2vw, 40px); display: flex; gap: 12px; align-items: center; border-bottom: 1px solid var(--linie); }
.globalsuche { position: relative; flex: 1; max-width: 560px; }
.globalsuche input { width: 100%; padding: 9px 12px 9px 36px; }
.globalsuche svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); }
.suchergebnisse { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten-pop); max-height: 70vh; overflow: auto; padding: 6px; }
.suchergebnisse a { display: flex; gap: 10px; padding: 8px 10px; border-radius: 7px; color: var(--text); align-items: baseline; }
.suchergebnisse a:hover, .suchergebnisse a.fokus { background: var(--grau-weich); text-decoration: none; }
.suchergebnisse .bereich { font-size: 11px; color: var(--text-3); width: 82px; flex: none; text-transform: uppercase; letter-spacing: .5px; }
.btn.menu-btn { display: none; }
/* Inhalt passt sich der Bildschirmbreite an: volle Breite bis 1920 px, darüber zentriert; Abstände wachsen mit */
.inhalt { padding: clamp(14px, 1.8vw, 32px) clamp(14px, 2.2vw, 40px) 60px; max-width: 1920px; width: 100%; margin-inline: auto; }

.kopfzeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.kopfzeile .unter { color: var(--text-2); margin-top: 4px; }
.aktionen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.brotkrumen { font-size: 12px; color: var(--text-2); margin-bottom: 6px; }

/* ---- Bedienelemente ---- */
input, select, textarea { font: inherit; color: var(--text); background: var(--flaeche); border: 1px solid var(--linie-2); border-radius: 7px; padding: 7px 10px; width: 100%; min-height: 36px; }
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(37, 99, 235, .25); border-color: var(--blau); }
input[type=checkbox] { width: 16px; height: 16px; min-height: 0; accent-color: var(--navy); }
input:disabled, select:disabled, textarea:disabled { background: var(--grau-weich); color: var(--text-2); }
.btn { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-weight: 550; padding: 7px 14px; min-height: 36px; border-radius: 7px; border: 1px solid var(--linie-2); background: var(--flaeche); color: var(--text); cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--grau-weich); text-decoration: none; }
.btn.primaer { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.primaer:hover { background: var(--navy-2); }
.btn.akzent { background: var(--amber); border-color: var(--amber); color: #fff; }
.btn.akzent:hover { background: var(--amber-hover); border-color: var(--amber-hover); }
.btn.gefahr { color: var(--rot); }
.btn.gefahr:hover { background: var(--rot-weich); }
.btn.klein { padding: 4px 10px; min-height: 30px; font-size: 13px; }
.btn.icon { padding: 6px; min-height: 32px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg.i { width: 16px; height: 16px; }

.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); }
.karte-kopf { padding: 14px 18px; border-bottom: 1px solid var(--linie); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.karte-kopf > div, .karte-kopf > .aktionen { flex-wrap: wrap; min-width: 0; }
.karte-inhalt { padding: 18px; }
.raster { display: grid; gap: 16px; }
.raster.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stapel > * + * { margin-top: 16px; }

/* Kennzahlen */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { padding: 16px 18px; display: block; color: inherit; }
.kpi:hover { text-decoration: none; border-color: var(--linie-2); }
.kpi .wert { font-size: 26px; font-weight: 700; letter-spacing: -.5px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .label { color: var(--text-2); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.kpi .zusatz { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.kpi.warn .wert { color: var(--rot); }

/* Tabellen */
.tabelle-wrap { overflow-x: auto; }
table.tab { width: 100%; border-collapse: collapse; }
table.tab th.sortierbar { padding: 0; }
table.tab th.sortierbar button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 5px; width: 100%; padding: 10px 12px; cursor: pointer; font: inherit; color: inherit; }
table.tab th.sortierbar.r button { justify-content: flex-end; }
table.tab th.sortierbar button:hover, table.tab th.sortiert button { color: var(--navy-text); }
table.tab th.sortierbar button:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.sort-pfeil { font-size: 10px; opacity: .45; } th.sortiert .sort-pfeil { opacity: 1; color: var(--amber); }
table.tab th { text-align: left; font-size: 12px; font-weight: 600; color: var(--text-2); padding: 10px 12px; border-bottom: 1px solid var(--linie); white-space: nowrap; background: var(--kopf); position: sticky; top: 0; }
table.tab td { padding: 10px 12px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
table.tab tbody tr:last-child td { border-bottom: 0; }
table.tab tr.klickbar { cursor: pointer; }
table.tab tr.klickbar:hover td { background: var(--hover); }
table.tab .sub { color: var(--text-2); font-size: 12px; }
.leer { padding: 36px 18px; text-align: center; color: var(--text-2); }

.filterleiste { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--linie); flex-wrap: wrap; align-items: center; }
.filterleiste input[type=search] { max-width: 340px; }
.filterleiste select { width: auto; min-width: 150px; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--grau-weich); color: var(--text-2); white-space: nowrap; }
.badge.blau { background: var(--blau-weich); color: var(--blau); }
.badge.gruen { background: var(--gruen-weich); color: var(--gruen); }
.badge.rot { background: var(--rot-weich); color: var(--rot); }
.badge.orange { background: var(--orange-weich); color: var(--orange); }
.badge.gelb { background: var(--gelb-weich); color: var(--gelb-text); }

/* Formulare */
.formular { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px 14px; }
.feld { grid-column: span 4; display: flex; flex-direction: column; gap: 4px; }
.feld[hidden] { display: none; }
.feld.s2 { grid-column: span 2; } .feld.s3 { grid-column: span 3; } .feld.s6 { grid-column: span 6; } .feld.s8 { grid-column: span 8; } .feld.s12 { grid-column: span 12; }
.feld label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.feld.check { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 22px; }
.feld.check .hinweis { flex-basis: 100%; }
.feld.check > label { flex: 1 1 0; min-width: 0; }
.rm-zeit { border: 1px solid var(--linie); border-radius: 8px; padding: 8px 12px 12px; margin: 0; min-width: 0; }
.rm-zeit legend { font-size: 12px; font-weight: 600; color: var(--text-2); padding: 0 4px; }
.feld .hinweis { font-size: 11px; color: var(--text-3); }
.abschnitt { grid-column: span 12; font-size: 12px; text-transform: uppercase; letter-spacing: .7px; color: var(--text-3); font-weight: 650; padding-top: 10px; border-top: 1px solid var(--linie); margin-top: 4px; }
.abschnitt:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* Tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--linie); padding: 0 12px; overflow-x: auto; }
.tabs button { background: none; border: 0; font: inherit; font-weight: 550; color: var(--text-2); padding: 12px 12px 10px; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button.aktiv { color: var(--navy-text); border-bottom-color: var(--amber); }
.tabs .anz { font-size: 11px; background: var(--grau-weich); border-radius: 9px; padding: 0 6px; margin-left: 4px; }

/* Belegeditor */
.positionen { width: 100%; border-collapse: collapse; min-width: 900px; }
.positionen th { font-size: 12px; color: var(--text-2); text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--linie); }
.positionen td { padding: 6px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.positionen input, .positionen textarea { min-height: 32px; padding: 5px 8px; }
.positionen textarea { min-height: 76px; height: 76px; font-size: 13px; line-height: 1.4; margin-top: 4px; resize: vertical; }
.positionen .zahl input { text-align: right; }
.summenblock { margin-left: auto; width: 320px; padding: 12px 6px; }
.summenblock div { display: flex; justify-content: space-between; padding: 3px 0; }
.summenblock .gesamt { border-top: 2px solid var(--navy); margin-top: 6px; padding-top: 8px; font-weight: 700; font-size: 16px; }

/* Dokumente */
.dropzone { border: 2px dashed var(--linie-2); border-radius: var(--radius); padding: 22px; text-align: center; color: var(--text-2); background: var(--kopf); cursor: pointer; transition: .15s; }
.dropzone.drueber { border-color: var(--blau); background: var(--blau-weich); color: var(--blau); }
.treffer { font-size: 12px; color: var(--text-2); margin-top: 3px; }
.treffer mark { background: var(--gelb-weich); color: inherit; padding: 0 1px; border-radius: 2px; }
.dateityp { width: 34px; height: 40px; border-radius: 5px; background: var(--grau-weich); display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--text-2); flex: none; }
.dateityp.pdf { background: var(--rot-weich); color: var(--rot); } .dateityp.bild { background: var(--gruen-weich); color: var(--gruen); }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.thumbs a { display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--grau-weich); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* Plantafel */
.einsatz { background: var(--flaeche); border: 1px solid var(--linie-2); border-left: 3px solid var(--blau); border-radius: 6px; padding: 5px 7px; font-size: 12px; margin-bottom: 5px; cursor: grab; }
.einsatz.Störung { border-left-color: var(--rot); } .einsatz.Wartung { border-left-color: var(--gruen); } .einsatz.Montage, .einsatz.Modernisierung { border-left-color: var(--amber); }
.einsatz.erledigt { opacity: .55; }
.einsatz b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Checkliste */
.checkliste { list-style: none; padding: 0; margin: 0; }
.checkliste li { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--linie); }
.checkliste li input[type=text] { border: 0; padding: 2px 4px; min-height: 0; }

/* Modal & Toast */
.modal-hg { position: fixed; inset: 0; background: var(--modal-hg); z-index: 100; display: grid; place-items: start center; padding: 6vh 16px; overflow-y: auto; }
.modal { background: var(--flaeche); border-radius: 12px; width: 100%; max-width: 560px; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.modal.breit { max-width: 860px; }
.modal-kopf { padding: 16px 20px; border-bottom: 1px solid var(--linie); display: flex; justify-content: space-between; align-items: center; }
.modal-inhalt { padding: 20px; }
.modal-fuss { padding: 14px 20px; border-top: 1px solid var(--linie); display: flex; justify-content: flex-end; gap: 8px; }
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.2); max-width: 380px; animation: rein .2s ease-out; }
.toast.fehler { background: var(--rot); }
.toast.warnung { background: #b45309; }
@keyframes rein { from { transform: translateY(8px); opacity: 0; } }

.info-liste { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; font-size: 13px; }
.info-liste dt { color: var(--text-2); } .info-liste dd { margin: 0; }
.liste-einfach { list-style: none; margin: 0; padding: 0; }
.liste-einfach li { padding: 10px 18px; border-bottom: 1px solid var(--linie); display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.liste-einfach li:last-child { border-bottom: 0; }

/* Projektseite */
.phasen { display: flex; padding: 14px 18px; gap: 4px; overflow-x: auto; margin-bottom: 14px; }
.phase { flex: 1; min-width: 110px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); position: relative; }
.phase:not(:last-child)::after { content: ''; flex: 1; height: 2px; background: var(--linie); margin: 0 6px; min-width: 12px; }
.phase .punkt { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--grau-weich); font-weight: 700; font-size: 12px; flex: none; }
.phase .punkt svg.i { width: 14px; height: 14px; }
.phase.fertig { color: var(--text-2); } .phase.fertig .punkt { background: var(--gruen-weich); color: var(--gruen); }
.phase.fertig::after { background: var(--gruen); }
.phase.aktiv { color: var(--navy-text); font-weight: 700; } .phase.aktiv .punkt { background: var(--amber); color: #fff; }
.sprungleiste { position: sticky; top: 61px; z-index: 15; display: flex; gap: 6px; overflow-x: auto; padding: 8px 0; margin-bottom: 8px; background: var(--bg); }
.sprungleiste button { font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linie-2); background: var(--flaeche); color: var(--text-2); cursor: pointer; white-space: nowrap; }
.sprungleiste button:hover { color: var(--navy-text); border-color: var(--navy); }
.abschnitt-block { margin-bottom: 18px; scroll-margin-top: 120px; }
.abschnitt-titel { margin: 6px 0 12px; }
.kpis.gross { margin-bottom: 14px; }
.fortschritt { height: 6px; background: var(--grau-weich); border-radius: 3px; margin-top: 8px; overflow: hidden; }
.fortschritt div { height: 100%; background: var(--gruen); border-radius: 3px; }
.werte-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.werte-gruppe { padding: 14px 18px; }
.werte-gruppe h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .7px; color: var(--text-3); margin-bottom: 8px; }
.werte-gruppe dl { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; margin: 0; font-size: 13px; }
.werte-gruppe dt { color: var(--text-2); } .werte-gruppe dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.info-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; margin: 0; }
.info-raster dt { font-size: 12px; font-weight: 600; color: var(--text-3); margin-bottom: 2px; }
.info-raster dd { margin: 0; }
.info-raster .breit { grid-column: 1 / -1; }
.karte.bearbeiten { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-weich); }
.anz-badge { font-size: 12px; font-weight: 600; background: var(--grau-weich); color: var(--text-2); border-radius: 9px; padding: 1px 8px; margin-left: 4px; vertical-align: 2px; }
.karte-kopf h2 { display: flex; align-items: center; gap: 8px; }
@media (max-width: 900px) { .info-raster { grid-template-columns: minmax(0, 1fr); } .sprungleiste { top: 57px; } }

/* Projekt: Reiter, Menü, Akten */
.phasen-mini { display: flex; gap: 2px; margin: -6px 0 14px; flex-wrap: wrap; }
.phasen-mini span { font-size: 11px; font-weight: 600; padding: 3px 10px; background: var(--grau-weich); color: var(--text-3); }
.phasen-mini span:first-child { border-radius: 999px 0 0 999px; } .phasen-mini span:last-child { border-radius: 0 999px 999px 0; }
.phasen-mini .fertig { background: var(--gruen-weich); color: var(--gruen); }
.phasen-mini .aktiv { background: var(--amber); color: #fff; }
.reiter { display: flex; gap: 2px; border-bottom: 1px solid var(--linie); margin-bottom: 18px; overflow-x: auto; position: sticky; top: 61px; z-index: 15; background: var(--bg); }
.reiter a { display: flex; align-items: center; gap: 6px; padding: 10px 12px; color: var(--text-2); font-weight: 600; font-size: 13px; border-bottom: 2px solid transparent; white-space: nowrap; }
.reiter a:hover { color: var(--navy-text); text-decoration: none; }
.reiter a.aktiv { color: var(--navy-text); border-bottom-color: var(--amber); }
.reiter svg.i { width: 15px; height: 15px; }
.reiter .anz { font-size: 11px; background: var(--grau-weich); border-radius: 9px; padding: 0 6px; }
.reiter a.aktiv .anz { background: var(--amber-weich); color: var(--navy-text); }
.menue { position: relative; }
.menue summary { list-style: none; } .menue summary::-webkit-details-marker { display: none; }
.menue-liste { position: absolute; right: 0; top: calc(100% + 6px); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten-pop); padding: 6px; min-width: 230px; z-index: 30; display: flex; flex-direction: column; }
.menue-liste a, .menue-liste button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; color: var(--text); background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.menue-liste a:hover, .menue-liste button:hover { background: var(--grau-weich); text-decoration: none; }
.menue-liste hr { border: 0; border-top: 1px solid var(--linie); margin: 4px 0; width: 100%; }
.segment { display: inline-flex; border: 1px solid var(--linie-2); border-radius: 8px; overflow: hidden; }
.segment a, .segment button { padding: 5px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-2); background: var(--flaeche); border: 0; border-right: 1px solid var(--linie-2); cursor: pointer; }
.segment > :last-child { border-right: 0; }
.segment a:hover { text-decoration: none; background: var(--grau-weich); }
.segment .aktiv { background: var(--navy); color: #fff; }
.segment.gross button { padding: 9px 16px; }
.segment .aktiv.erledigt { background: var(--gruen); } .segment .aktiv.in-Arbeit { background: var(--orange); }
.schnell { display: flex; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--linie); background: var(--kopf); }
.haken { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--linie-2); background: var(--flaeche); display: grid; place-items: center; cursor: pointer; color: transparent; padding: 0; }
.haken svg.i { width: 14px; height: 14px; }
.haken:hover { border-color: var(--gruen); color: var(--gruen); }
.haken.an { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.erledigt-zeile b { text-decoration: line-through; color: var(--text-3); }
.zurueck { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; margin-bottom: 10px; }
.akte-kopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; margin-bottom: 16px; flex-wrap: wrap; border-left: 4px solid var(--amber); }
.akte-titel { font-size: 20px; margin: 2px 0 6px; }
.akte-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--text-2); }
.akte-meta svg.i { width: 14px; height: 14px; vertical-align: -2px; }
.akte-raster { display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); gap: 16px; align-items: start; }
.notiz-form { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; margin-bottom: 14px; }
.verlauf { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--linie); }
.verlauf li { position: relative; padding: 0 0 14px 16px; font-size: 13px; }
.verlauf li::before { content: ''; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--linie-2); }
.verlauf li.notiz::before { background: var(--blau); }
.verlauf li.system { color: var(--text-2); }
.verlauf-kopf { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-3); margin-bottom: 2px; }
.verlauf li.notiz > div:last-child { background: var(--blau-weich); border-radius: 8px; padding: 8px 10px; color: var(--text); }
.cl-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; padding: 16px; }
.cl-karte { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px 16px; color: var(--text); background: var(--flaeche); }
.cl-karte:hover { border-color: var(--navy); text-decoration: none; box-shadow: var(--schatten); }
.cl-zahlen { display: flex; justify-content: space-between; font-size: 13px; }
.punkt-gruppe { padding: 12px 16px 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--navy-text); background: var(--kopf); border-bottom: 1px solid var(--linie); }
.punkt { display: flex; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--linie); align-items: flex-start; }
.punkt.status-ok, .punkt.status-entfaellt { background: var(--ok-weich); }
.punkt.status-ok .punkt-text > div:first-child, .punkt.status-entfaellt .punkt-text > div:first-child { color: var(--text-2); }
.punkt.status-entfaellt .punkt-text > div:first-child { text-decoration: line-through; }
.punkt.status-mangel { background: var(--mangel-weich); }
.punkt-status { display: flex; gap: 4px; flex: none; }
.punkt-status button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--linie-2); background: var(--flaeche); font-size: 15px; font-weight: 700; color: var(--text-3); cursor: pointer; }
.punkt-status button:hover { border-color: var(--navy); color: var(--navy-text); }
.punkt-status [data-setze="ok"].an { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.punkt-status [data-setze="mangel"].an { background: var(--rot); border-color: var(--rot); color: #fff; }
.punkt-status [data-setze="entfaellt"].an { background: var(--text-3); border-color: var(--text-3); color: #fff; }
.punkt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 5px; }
.punkt-text textarea { min-height: 30px; padding: 4px 8px; font-size: 13px; border-color: var(--linie); background: transparent; resize: none; overflow: hidden; }
.punkt-text textarea:focus { background: var(--flaeche); }
.punkt-meta { font-size: 11px; color: var(--text-3); }
.punkt-x { opacity: 0; } .punkt:hover .punkt-x { opacity: 1; }
.punkt-neu { border-bottom: 0; border-top: 1px solid var(--linie); }
.vorlagen-wahl { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
.vorlagen-kat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--text-3); margin-top: 6px; }
.vorlage-karte { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--linie); border-radius: 8px; padding: 10px 12px; cursor: pointer; }
.vorlage-karte:has(input:checked) { border-color: var(--navy); background: var(--blau-weich); }
.vorlage-karte input { width: 16px; min-height: 0; margin-top: 3px; flex: none; }
.vorlage-gruppen { display: block; color: var(--blau); margin-top: 2px; }
.alle-werte { margin-top: 18px; }
.alle-werte summary { cursor: pointer; list-style: none; margin-bottom: 12px; } .alle-werte summary h2 { display: inline; }
.alle-werte summary::-webkit-details-marker { display: none; }
.alle-werte summary::after { content: ' ▾'; color: var(--text-3); }
.liste-einfach li.klickbar { cursor: pointer; } .liste-einfach li.klickbar:hover { background: var(--hover); }
.text-rot { color: var(--rot); }
@media (max-width: 1000px) { .akte-raster { grid-template-columns: minmax(0, 1fr); } .reiter { top: 57px; } }

/* Zahlungen & Mahnwesen */
.finanz-stand { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 4px; }
.finanz-stand > div { display: flex; flex-direction: column; gap: 2px; }
.finanz-stand b { font-size: 17px; font-variant-numeric: tabular-nums; }
.unterkopf { padding: 10px 18px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-3); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); background: var(--kopf); }
.raster.zwei > div + div .unterkopf { border-left: 1px solid var(--linie); }
.sperr-banner { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--rot); background: var(--rot-weich); color: var(--rot); font-size: 13.5px; }
.sperr-banner .i { width: 20px; height: 20px; flex: none; }
.sperr-banner b { font-size: 14px; }
.sperr-banner .sperr-text { flex: 1 1 260px; min-width: 0; color: var(--text); }
.sperr-banner .sperr-text b { color: var(--rot); }
.sperr-banner .aktionen { display: flex; gap: 6px; flex-wrap: wrap; }
.sperr-banner.antrag { border-color: var(--gelb-text); background: var(--gelb-weich); }
.sperr-banner.antrag .i, .sperr-banner.antrag .sperr-text b { color: var(--gelb-text); }
.sperr-zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.hinweis-box { margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: var(--gelb-weich); color: var(--gelb-text); font-size: 13px; }
.text-gruen { color: var(--gruen); }
tr.gedimmt td { color: var(--text-3); }
@media (max-width: 900px) { .finanz-stand { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Eingangsrechnungen */
.er-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 1fr); gap: 16px; align-items: start; }
.er-vorschau { position: sticky; top: 76px; height: calc(100vh - 100px); overflow: hidden; }
.er-vorschau iframe { width: 100%; height: 100%; border: 0; border-radius: var(--radius); }
.er-vorschau img { width: 100%; height: 100%; object-fit: contain; }
.karte.abstand { margin-bottom: 16px; }
@media (max-width: 1100px) { .er-raster { grid-template-columns: minmax(0, 1fr); } .er-vorschau { position: static; height: 70vh; order: -1; } }

/* Bank */
td.zweck { max-width: 360px; font-size: 13px; color: var(--text-2); }
.import-ergebnis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.import-ergebnis > div { background: var(--grau-weich); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; }
.import-ergebnis b { font-size: 22px; } .import-ergebnis span { font-size: 12px; color: var(--text-2); }
.import-ergebnis .gut { background: var(--gruen-weich); } .import-ergebnis .warn { background: var(--gelb-weich); }
.umsatz-kopf { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.umsatz-betrag { font-size: 22px; }
.umsatz-zweck { background: var(--grau-weich); border-radius: 8px; padding: 10px 12px; margin-top: 10px; font-size: 13px; }
.abschnitt-titel-klein { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-3); margin: 18px 0 8px; }
.kandidaten { max-height: 260px; overflow-y: auto; margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.kandidat { display: flex; align-items: center; gap: 10px; border: 1px solid var(--linie); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.kandidat.an { border-color: var(--navy); background: var(--blau-weich); }
.kandidat input { width: 16px; min-height: 0; flex: none; }
.kandidat-text { flex: 1; min-width: 0; }
.treffer-gruende { display: block; color: var(--gruen); }
.score { font-size: 11px; font-weight: 700; background: var(--grau-weich); border-radius: 9px; padding: 1px 7px; color: var(--text-2); }

/* Rechte: Nur-Lesen-Modus */
.nur-lesen-hinweis { display: flex; align-items: center; gap: 8px; background: var(--blau-weich); color: var(--blau); border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; font-size: 13px; font-weight: 600; }
.nur-lesen .btn.primaer, .nur-lesen .btn.akzent, .nur-lesen .btn.gefahr, .nur-lesen [data-schreiben], .nur-lesen .dropzone, .nur-lesen .schnell,
.nur-lesen .menue:not(.lesbar), .nur-lesen .haken, .nur-lesen .punkt-status button, .nur-lesen [data-akt], .nur-lesen .notiz-form, .nur-lesen [data-ocr],
.nur-lesen [data-edit], .nur-lesen [data-del], .nur-lesen [data-zahlung], .nur-lesen [data-neu], .nur-lesen .punkt-x { display: none !important; }
.nur-lesen .einsatz { cursor: default; }
.rechte-matrix td, .rechte-matrix th { text-align: center; } .rechte-matrix td:first-child, .rechte-matrix th:first-child { text-align: left; }
.rechte-matrix th { font-size: 11px; white-space: normal; min-width: 70px; }
.rechte-editor input[type=radio] { width: 18px; height: 18px; min-height: 0; accent-color: var(--navy); }
.dreher { display: inline-block; width: 11px; height: 11px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: drehen .8s linear infinite; vertical-align: -1px; }
@keyframes drehen { to { transform: rotate(360deg); } }

/* OP-Liste */
.op-tabelle .aufklapp { display: inline-block; width: 14px; color: var(--text-3); }
.op-tabelle tr.op-posten td { background: var(--kopf); font-size: 13px; padding-top: 6px; padding-bottom: 6px; }
.op-einzug { padding-left: 22px; color: var(--text-2); }
.op-tabelle tr.summe td { border-top: 2px solid var(--navy); font-weight: 600; background: var(--kopf); }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(160deg, var(--navy) 0%, var(--navy-3) 100%); padding: 16px; }
.login .karte { width: 100%; max-width: 380px; padding: 28px; }
.login .marke { color: var(--navy-text); padding: 0 0 18px; border-bottom: 0; justify-content: center; }
.login .marke-bild { max-width: 260px; }
.login .marke small { color: var(--text-2); }
.login form > * + * { margin-top: 12px; }
.fehlertext { color: var(--rot); font-size: 13px; min-height: 18px; }

@media (max-width: 1200px) { .raster.drei { grid-template-columns: repeat(2, minmax(0, 1fr)); } .raster.zwei.dash { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .seitenleiste { position: fixed; left: 0; top: 0; bottom: 0; width: 250px; z-index: 50; transform: translateX(-100%); transition: transform .2s; }
  .app.menu-offen .seitenleiste { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.3); }
  .btn.menu-btn { display: inline-flex; }
  .topbar, .inhalt { padding-left: 16px; padding-right: 16px; }
  .raster.zwei, .raster.drei { grid-template-columns: minmax(0, 1fr); }
  .feld, .feld.s2, .feld.s3, .feld.s6, .feld.s8 { grid-column: span 12; }
  .summenblock { width: 100%; }
}
@media print { .seitenleiste, .topbar, .aktionen { display: none !important; } .app { display: block; } }

/* Statusleiste: Status per Klick wählen */
.status-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 14px; }
.status-leiste .status-titel { font-size: 12px; font-weight: 600; color: var(--text-3); margin-right: 4px; text-transform: uppercase; letter-spacing: .04em; }
.status-schritt { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--linie-2); background: var(--flaeche); color: var(--text-2); cursor: pointer; }
.status-schritt:hover { border-color: var(--navy); color: var(--navy-text); }
.status-schritt.aktuell { background: var(--navy); border-color: var(--navy); color: #fff; cursor: default; }
.status-schritt.aktuell .punkt { display: inline-block; flex: none; width: 8px; height: 8px; padding: 0; border-radius: 50%; background: var(--amber); }
.status-schritt.gesperrt { opacity: .45; cursor: not-allowed; }
.status-schritt.gesperrt:hover { border-color: var(--linie-2); color: var(--text-2); }
.phasen-mini.klickbar span { cursor: pointer; } .phasen-mini.klickbar span:hover { outline: 2px solid var(--navy); outline-offset: -2px; }

/* Prüfung & Freigabe */
.pruef-schritte { display: flex; gap: 0; margin-bottom: 12px; }
.pruef-schritte span { flex: 1; text-align: center; font-size: 12px; font-weight: 600; padding: 6px 4px; background: var(--grau-weich); color: var(--text-3); }
.pruef-schritte span:first-child { border-radius: 8px 0 0 8px; } .pruef-schritte span:last-child { border-radius: 0 8px 8px 0; }
.pruef-schritte .fertig { background: var(--gruen-weich); color: var(--gruen); } .pruef-schritte .aktiv { background: var(--amber); color: #fff; }
.pruef-schritte .warn { background: var(--orange-weich); color: var(--orange); }
.pruefpunkte { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.pruefpunkte label { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.pruefpunkte input { margin-top: 3px; width: 16px; height: 16px; }
.pruef-aktionen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pruef-verlauf { list-style: none; margin: 0; padding: 0; }
.pruef-verlauf li { padding: 8px 0; border-top: 1px solid var(--linie); font-size: 13px; }
.pruef-verlauf .wer { font-weight: 600; } .pruef-verlauf .wann { color: var(--text-3); font-size: 12px; }
.pruef-verlauf .punkte { color: var(--text-3); font-size: 12px; margin-top: 2px; }
.pruef-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px 16px; font-size: 13px; margin-bottom: 10px; }
.pruef-info dt { color: var(--text-3); font-size: 12px; } .pruef-info dd { margin: 0; font-weight: 600; }

/* Kalkulation */
.modal.sehr-breit { max-width: 1120px; }
.kalk-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 860px) { .kalk-raster { grid-template-columns: minmax(0, 1fr); } }
.kalk-saetze { gap: 8px 12px; }
.kalk-zeilen select, .kalk-zeilen input { width: 100%; }
.kalk-schema td { padding: 6px 10px; }
.kalk-schema tr.zuschlag td { color: var(--text-2); font-size: 13px; }
.kalk-schema tr.zwischen td { font-weight: 700; border-top: 1px solid var(--linie-2); }
.kalk-schema tr.ergebnis td { font-weight: 800; font-size: 16px; background: var(--amber-weich); border-top: 2px solid var(--navy); }
.kalk-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 12px; }
.kalk-kennzahlen div { min-width: 0; } .kalk-kennzahlen span { overflow-wrap: anywhere; hyphens: auto; }
.kalk-kennzahlen div { background: var(--grau-weich); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.kalk-kennzahlen span { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 600px) { .kalk-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pos-kalk { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--gruen); font-weight: 600; }
.einheiten-tabelle input, .einheiten-tabelle select { width: 100%; }
.kalk-knopf { margin-top: 4px; width: 100%; justify-content: center; font-size: 11px; padding: 2px 4px; }
.check-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); white-space: nowrap; } .check-inline input { width: auto; }
.treffer { color: var(--blau) !important; } .archiv-hinweis { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--grau-weich); border: 1px solid var(--linie-2); border-left: 4px solid var(--navy); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: 13px; } .archiv-hinweis .aktionen-archiv { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

/* Checklisten: Abschnitte mit mehreren Punkten */
.punkt-gruppe { display: flex; align-items: center; gap: 8px; }
.punkt-gruppe .gruppe-aktionen { margin-left: auto; display: flex; gap: 4px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.punkt-gruppe .gruppe-aktionen .btn { padding: 2px 8px; font-size: 12px; }
.punkt-wahl { width: 18px; height: 18px; margin-top: 6px; flex: none; accent-color: var(--navy); }
.punkt.gewaehlt { background: var(--blau-weich); }
.ordnen-leiste { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 16px; background: var(--amber-weich); border-bottom: 1px solid var(--linie); position: sticky; top: 60px; z-index: 2; font-size: 13px; }
.ordnen-leiste input { width: 240px; max-width: 100%; }
.abschnitt-neu { padding: 10px 16px; border-bottom: 1px solid var(--linie); background: var(--kopf); }
.abschnitt-neu form { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; }
.abschnitt-neu textarea, .punkt-neu textarea { width: 100%; resize: vertical; min-height: 38px; font: inherit; }
.punkt-neu { align-items: flex-start; }
.punkt-neu textarea { flex: 1; min-width: 0; } .punkt-neu input[name=gruppe] { flex: 0 1 200px; min-width: 110px; }

/* Auswertungen */
.az-diagramm { width: 100%; height: auto; display: block; }
.az-diagramm .achse { stroke: var(--linie-2); }
.az-diagramm text { font-size: 11px; fill: var(--text-3); }
.az-diagramm .umsatz, .az-legende .umsatz, .az-balken i.umsatz { fill: var(--umsatz); background: var(--umsatz); }
.az-diagramm .kosten, .az-legende .kosten, .az-balken i.kosten { fill: var(--orange); background: var(--orange); }
.az-legende { display: flex; gap: 16px; font-size: 12px; color: var(--text-2); margin-top: 6px; }
.az-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.az-balken { display: grid; gap: 8px; }
.az-balken .zeile { display: grid; grid-template-columns: minmax(120px, 1.2fr) 2fr auto; gap: 10px; align-items: center; font-size: 13px; }
.az-balken .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.az-balken .balken { background: var(--grau-weich); border-radius: 4px; height: 12px; overflow: hidden; }
.az-balken .balken i { display: block; height: 100%; background: var(--navy); border-radius: 4px; }
.az-balken .balken i.plan { background: var(--plan); }
.az-balken .wert { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.az-tabelle th.sortierbar { cursor: pointer; user-select: none; white-space: nowrap; }
.az-tabelle th.sortierbar:hover { color: var(--navy-text); }
@media (max-width: 700px) { .az-balken .zeile { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
/* Dashboard: Betrag und Anzahl je Kategorie */
.kpi-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.kpi-anzahl { flex: none; font-size: 12px; color: var(--text-2); background: var(--grau-weich); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.kpi-anzahl b { font-size: 14px; color: var(--navy-text); }
.kpi.warn .kpi-anzahl { background: var(--orange-weich); }
/* Bei wenig Platz rutscht die Anzahl unter die Bezeichnung statt sie zu überdecken */
.kpi-kopf { flex-wrap: wrap; row-gap: 4px; }
.kpi-kopf .label { min-width: 0; flex: 1 1 120px; } .kpi-anzahl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* Materialanforderungen */
.thumbs.gross { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.thumbs.gross img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid var(--linie); }
.ma-tabelle input.klein-input { margin-top: 4px; font-size: 12px; }
.ma-tabelle select, .ma-tabelle input { width: 100%; }

/* Abschlags-, Teil- und Schlussrechnungen */
.segment label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--text-2); background: var(--flaeche); border-right: 1px solid var(--linie-2); cursor: pointer; }
.segment label:last-child { border-right: 0; }
.segment label input { position: absolute; opacity: 0; pointer-events: none; }
.segment label:has(input:checked) { background: var(--navy); color: #fff; }
.segment label:has(input:focus-visible) { outline: 2px solid var(--akzent, var(--navy)); outline-offset: -2px; }
tr.abzug-zeile td { background: var(--grau-weich); }
/* Schattenpositionen: nur intern, nicht auf dem Dokument */
tr.schatten-zeile td { background: repeating-linear-gradient(135deg, var(--kopf) 0 8px, var(--grau-weich) 8px 16px); }
tr.schatten-zeile td:first-child { box-shadow: inset 3px 0 0 var(--text-3); }
tr.schatten-zeile input, tr.schatten-zeile textarea, tr.schatten-zeile select { border-style: dashed; }
.summenblock .schatten-summe { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--linie-2); font-size: 12px; }
.summenblock .schatten-summe svg.i { width: 14px; height: 14px; vertical-align: -2px; }
tr.abzug-zeile td[data-summe] { color: var(--rot); }


/* Abnahme-/Übergabeprotokoll */
.ab-titel { font-size: 14px; margin: 16px 0 6px; }
.ab-pos input, .ab-pos select { width: 100%; }
.ab-ergebnis { flex-wrap: wrap; }
.ab-mangel { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.ab-mangel input[data-mf="text"] { flex: 1; min-width: 0; }
.ab-mangel input[type="date"] { width: 150px; }
.ab-unterschriften { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ab-sig { width: 100%; height: 120px; border: 1px solid var(--linie); border-radius: 8px; background: #fff; touch-action: none; display: block; margin: 4px 0; }
@media (max-width: 640px) { .ab-unterschriften { grid-template-columns: minmax(0, 1fr); } .ab-mangel { flex-wrap: wrap; } }

/* Konfigurierbare Übersicht */
.kpi.breit { grid-column: span 2; }
.kpi { position: relative; }
.kpi-zeitraum { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.kpi-trend { display: inline-block; margin-top: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.kpi-trend.hoch { color: var(--gruen); } .kpi-trend.runter { color: var(--rot); }
.kpis.bearbeiten .kpi { cursor: grab; outline: 2px dashed var(--linie-2); outline-offset: -2px; }
.kpis.bearbeiten .kpi.zieht { opacity: .45; }
.kpis.bearbeiten .kpi.ziel-vor { box-shadow: -4px 0 0 var(--navy); }
.kpis.bearbeiten .kpi.ziel-nach { box-shadow: 4px 0 0 var(--navy); }
.kpi-werkzeug { display: flex; gap: 2px; align-items: center; justify-content: flex-end; margin: -8px -10px 6px; }
.kpi-werkzeug button { border: 1px solid var(--linie); background: var(--flaeche); border-radius: 6px; width: 28px; height: 26px; display: grid; place-items: center; cursor: pointer; color: var(--text-2); padding: 0; font-size: 11px; }
.kpi-werkzeug button:hover { background: var(--grau-weich); color: var(--text); }
.kpi-griff { margin-right: auto; color: var(--text-3); font-size: 16px; cursor: grab; user-select: none; }
.kpi-neu { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 110px; border: 2px dashed var(--linie-2); background: transparent; color: var(--text-2); cursor: pointer; font: inherit; font-weight: 600; }
.kpi-neu:hover { background: var(--grau-weich); }
.dash-leiste { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 16px; margin-bottom: 14px;
  background: var(--blau-weich, var(--grau-weich)); border: 1px solid var(--linie); border-radius: var(--radius); }
.dash-bereiche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dash-bereich { grid-column: span 2; position: relative; min-width: 0; }
.dash-bereich.halb { grid-column: span 1; }
.bereich-werkzeug { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; z-index: 2; }
.bereich-platzhalter { opacity: .85; outline: 2px dashed var(--linie-2); outline-offset: -2px; }
.dash-ausgeblendet { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.katalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.katalog-eintrag { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche); cursor: pointer; font: inherit; color: inherit; }
.katalog-eintrag > span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.katalog-eintrag:hover { border-color: var(--navy); }
.katalog-eintrag.vorhanden { background: var(--grau-weich); }
@media (max-width: 900px) { .dash-bereich.halb { grid-column: span 2; } }
@media (max-width: 640px) { .kpi.breit { grid-column: auto; } .dash-bereiche { grid-template-columns: minmax(0, 1fr); } .dash-bereich, .dash-bereich.halb { grid-column: auto; } }

/* Unteraufgaben */
.unter-info { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--text-2); background: var(--grau-weich); border-radius: 10px; padding: 1px 7px; vertical-align: middle; }
.unter-info .i { width: 12px; height: 12px; }
.unter-info.fertig { color: var(--gruen); }
td .fortschritt { max-width: 220px; margin-top: 4px; }
.unter-liste { list-style: none; margin: 0; padding: 4px 0; }
.unter-liste li { display: flex; align-items: center; gap: 10px; padding: 7px 16px; border-bottom: 1px solid var(--linie); }
.unter-liste li.erledigt .unter-titel b { text-decoration: line-through; color: var(--text-3); }
.unter-titel { flex: 1; min-width: 0; color: inherit; display: flex; flex-direction: column; }
.unter-titel:hover { text-decoration: none; } .unter-titel:hover b { text-decoration: underline; }
.unter-pfeile { display: flex; gap: 2px; }
.unter-pfeile .btn { width: 26px; height: 24px; padding: 0; font-size: 10px; }
.akte-pfad { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 10px; }
.akte-pfad .zurueck { margin-bottom: 0; }
#unteraufgaben .schnell { border-bottom: 0; border-top: 1px solid var(--linie); }

/* Projekt: gruppierte Reiter */
.reiter.gruppiert { gap: 0; align-items: flex-end; scrollbar-width: thin; }
.reiter-gruppe { display: flex; flex-direction: column; padding: 0 4px; flex: none; }
/* Wenig Platz: zuerst Symbole ausblenden, dann ganze Gruppen umbrechen (gesteuert per JS) */
.reiter.gruppiert.kompakt a > .i { display: none; }
@media (min-width: 901px) { .reiter.gruppiert.umbruch { flex-wrap: wrap; overflow-x: visible; row-gap: 4px; } }
.reiter-gruppe + .reiter-gruppe { border-left: 1px solid var(--linie); }
.reiter-gruppe:first-child { padding-left: 0; }
.reiter-titel { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); padding: 6px 9px 0; }
.reiter-links { display: flex; gap: 2px; }
.reiter.gruppiert a { padding: 8px 9px 10px; gap: 5px; border-radius: 8px 8px 0 0; }
.reiter.gruppiert a:hover { background: var(--grau-weich); }
.reiter.gruppiert a.aktiv { background: var(--flaeche); }
.reiter .anz.warn { background: var(--rot); color: #fff; }
.reiter a.aktiv .anz.warn { background: var(--rot); color: #fff; }
@media (max-width: 900px) {
  .reiter-titel { display: none; }
  .reiter.gruppiert { scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
  .reiter.gruppiert a { scroll-snap-align: center; padding: 10px 10px; }
  .reiter-gruppe { padding: 0 4px; }
}

/* Aufklappmenüs mit Abschnitten und Erklärzeile */
.menue summary { display: inline-flex; align-items: center; gap: 6px; }
.menue[open] > summary { background: var(--grau-weich); }
.menue-pfeil { font-size: 10px; color: var(--text-3); transition: transform .15s; }
.menue[open] .menue-pfeil { transform: rotate(180deg); }
.menue-liste { min-width: 290px; max-width: min(360px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; }
.menue .menue-liste { left: 0; right: auto; }
.menue .menue-liste.rechts { left: auto; right: 0; }
.menue-abschnitt { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); padding: 8px 10px 4px; }
.menue-liste a, .menue-liste button { align-items: flex-start; }
.menue-liste a > span, .menue-liste button > span { display: flex; flex-direction: column; min-width: 0; }
.menue-liste b { font-weight: 600; }
.menue-liste small { color: var(--text-3); font-size: 11.5px; line-height: 1.3; margin-top: 1px; }
.menue-liste .i { margin-top: 2px; flex: none; color: var(--text-2); }
.menue-liste a:focus-visible, .menue-liste button:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
@media (max-width: 700px) { .nur-gross { display: none; } }

/* Preisanfragen */
.pa-schritte { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -6px 0 14px; }
.pa-schritte > span:not(.muted) { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--grau-weich); color: var(--text-3); }
.pa-schritte .fertig { background: var(--gruen-weich) !important; color: var(--gruen) !important; }
.pa-schritte .aktiv { background: var(--amber) !important; color: #fff !important; }
.pa-kopf > summary { cursor: pointer; list-style: none; } .pa-kopf > summary::-webkit-details-marker { display: none; }
.pa-pos input, .pa-pos textarea, .pa-pos select { width: 100%; }
.pa-pos textarea { margin-top: 4px; resize: vertical; font: inherit; height: 32px; min-height: 32px; transition: height .15s; }
.pa-pos textarea:focus, .pa-pos textarea.gefuellt { height: 64px; }
.pa-pos td { padding-top: 6px; padding-bottom: 6px; }
.pa-katalog { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; font-size: 12px; color: var(--text-2); }
.pa-katalog svg.i { width: 14px; height: 14px; }
.pa-katalog .btn.klein { min-height: 24px; padding: 2px 8px; font-size: 12px; }
.pa-schaetzung { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; background: none; border: 0; padding: 2px 0; font: inherit; color: inherit; cursor: pointer; text-align: right; }
.pa-schaetzung:hover b { text-decoration: underline; }
.pa-schaetzung .sub { font-size: 11px; color: var(--text-3); }
.pa-schaetzung .badge { font-size: 10px; }
.pa-gewichte { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--linie); font-size: 13px; }
.pa-gewichte input[type=number] { width: 64px; text-align: right; }
.pa-spiegel th, .pa-spiegel td { vertical-align: top; }
.pa-spiegel .pa-lief { min-width: 150px; }
.pa-marken { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; margin: 3px 0; }
.pa-spiegel td.bestpreis { background: var(--gruen-weich); }
.pa-spiegel td.bestpreis b { color: var(--gruen); }
.pa-spiegel td.teuer b { color: var(--rot); }
.pa-spiegel .empfehlung { box-shadow: inset 2px 0 0 var(--navy), inset -2px 0 0 var(--navy); }
.pa-spiegel tfoot td { border-top: 1px solid var(--linie); font-size: 13px; }
.pa-spiegel tfoot tr.summe td { background: var(--grau-weich); }
.pa-spiegel .sub { display: block; }
.pa-wahl { display: inline-flex; gap: 6px; align-items: flex-start; justify-content: flex-end; cursor: pointer; }
.pa-wahl > span { display: flex; flex-direction: column; align-items: flex-end; }
.pa-punkte { display: inline-block; width: 60px; height: 6px; border-radius: 3px; background: var(--grau-weich); margin-right: 6px; vertical-align: middle; overflow: hidden; }
.pa-punkte span { display: block; height: 100%; background: var(--navy); }
.pa-vergabe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--linie); }
.modal.sehr-breit { width: min(1100px, calc(100vw - 32px)); max-width: none; }
.ag-preise input[type=number] { width: 100%; }
.ag-preise input[data-hw] { width: 100%; min-width: 140px; }

/* Auftragsplanung: Tafel */
.planung-tafel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: start; }
.planung-spalte { background: var(--grau-weich); border-radius: var(--radius); min-height: 200px; display: flex; flex-direction: column; }
.planung-spalte > header { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; font-size: 13px; position: sticky; top: 0; }
.planung-spalte > header .anz { font-size: 11px; background: var(--flaeche); border-radius: 9px; padding: 1px 8px; font-weight: 700; }
.planung-spalte[data-stufe="abrechnen"] > header { color: var(--gruen); }
.planung-spalte[data-stufe="material"] > header, .planung-spalte[data-stufe="planen"] > header { color: var(--gelb-text); }
.planung-karten { display: flex; flex-direction: column; gap: 8px; padding: 0 8px 10px; }
.planung-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 10px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.planung-karte:hover { border-color: var(--navy); }
.planung-karte.warn { border-left: 3px solid var(--orange); }
.pk-kopf { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .pk-kopf .mono { white-space: nowrap; } .pk-wert { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.pk-titel { font-weight: 600; line-height: 1.3; }
.pk-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0; }
.pk-chips .badge { display: inline-flex; align-items: center; gap: 3px; } .pk-chips .i { width: 12px; height: 12px; }
.pk-hinweis { font-size: 12px; color: var(--orange); display: flex; gap: 4px; align-items: flex-start; } .pk-hinweis .i { width: 13px; height: 13px; flex: none; margin-top: 1px; }
.planung-karte > .btn { align-self: flex-start; margin-top: 4px; }
/* Ablauf im Auftrag */
.ablauf-liste { list-style: none; margin: 0; padding: 12px 16px 4px; }
.ablauf-schritt { display: flex; gap: 12px; position: relative; padding-bottom: 14px; }
.ablauf-schritt:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--linie); }
.ablauf-schritt.fertig:not(:last-child)::before { background: var(--gruen); }
.ablauf-punkt { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--grau-weich); color: var(--text-3); flex: none; z-index: 1; }
.ablauf-punkt .i { width: 15px; height: 15px; }
.ablauf-schritt.fertig .ablauf-punkt { background: var(--gruen); color: #fff; }
.ablauf-schritt.aktiv .ablauf-punkt { background: var(--amber); color: #fff; box-shadow: 0 0 0 4px var(--amber-weich); }
.ablauf-inhalt { flex: 1; min-width: 0; padding-top: 4px; }
.ablauf-titel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ablauf-titel .btn { margin-left: auto; }
.ablauf-unter { margin: 6px 0 0; padding-left: 16px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.ablauf-unter .btn { margin-left: 6px; }
@media (max-width: 640px) { .ablauf-titel .btn { margin-left: 0; } }

@media (max-width: 900px) { .nav-umschalten { display: none; } .seitenleiste { width: 270px; } }

/* Versionsanzeige unten links */
.versionszeile { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 16px 10px; margin: 0; border: 0; background: none; text-align: left; cursor: pointer;
  font: inherit; font-size: 11px; line-height: 1.35; color: var(--text-3); }
.versionszeile:hover { color: var(--navy-text); }
.versionszeile:hover .v-lang { text-decoration: underline; }
.versionszeile .v-build { color: var(--text-3); font-variant-numeric: tabular-nums; }
.versionszeile .v-kurz { display: none; font-weight: 700; }
.versionszeile .v-neu { margin-left: auto; background: var(--amber); color: #fff; font-size: 10px; font-weight: 700; border-radius: 9px; padding: 1px 7px; text-transform: uppercase; letter-spacing: .4px; }
.app.schmal .versionszeile { justify-content: center; padding: 4px 4px 10px; flex-direction: column; gap: 3px; }
.app.schmal .versionszeile .v-lang { display: none; } .app.schmal .versionszeile .v-kurz { display: inline; }
.app.schmal .versionszeile .v-neu { margin-left: 0; }
.login-version { position: fixed; left: 16px; bottom: 12px; font-size: 11px; color: rgba(255, 255, 255, .7); }
.versionen section { padding: 10px 0; border-bottom: 1px solid var(--linie); }
.versionen section:last-child { border-bottom: 0; }
.versionen section.aktuell { background: var(--amber-weich); margin: 0 -12px; padding: 10px 12px; border-radius: 8px; border-bottom: 0; }
.versionen .v-kopf { display: flex; align-items: center; gap: 8px; } .versionen .v-kopf .muted { margin-left: auto; }
.versionen .v-titel { font-weight: 600; margin-top: 2px; color: var(--navy-text); }
.versionen ul { margin: 6px 0 0; padding-left: 18px; } .versionen li { margin: 2px 0; }

/* Zeiterfassung */
.ze-leiste { position: sticky; top: 60px; z-index: 3; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 16px; background: var(--amber-weich); border-bottom: 1px solid var(--linie); }
.ze-leiste b { margin-right: 8px; color: var(--navy-text); }
.ze-tab tr.ze-gruppe td { background: var(--grau-weich); padding-top: 8px; padding-bottom: 8px; }
.ze-tab tr.ze-ignoriert td { color: var(--text-3); }
.ze-tab td { vertical-align: top; }
.ze-aenderung { margin-top: 6px; padding: 6px 8px; border-radius: 6px; background: var(--gelb-weich); }
.ze-tab tr.ze-ignoriert .ze-aenderung { color: var(--text); }
.ze-doku { background: var(--grau-weich); border-radius: 8px; padding: 12px; font-size: 12px; overflow-x: auto; white-space: pre; margin: 8px 0 0; }
.ze-schluessel { display: flex; gap: 8px; align-items: center; background: var(--grau-weich); border-radius: 8px; padding: 10px; }
.ze-schluessel code { flex: 1; word-break: break-all; font-size: 13px; user-select: all; }
.ze-leiste[hidden] { display: none; }

/* ---- Dunkeldarstellung: automatisch nach Betriebssystem oder fest gewählt (html[data-theme]) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    --navy: #2f4594; --navy-2: #3a51a8; --navy-3: #16204a; --navy-text: #a9b5ff;
    --amber: #6371dd; --amber-weich: rgba(99, 113, 221, .22); --amber-hover: #7682e6;
    --gelb-weich: rgba(234, 179, 8, .15); --gelb-text: #f0c75e;
    --bg: #0f141c; --flaeche: #171d28; --linie: #273041; --linie-2: #36415a;
    --text: #e5e9f1; --text-2: #a4aec0; --text-3: #7c879b;
    --blau: #8d99ff; --blau-weich: rgba(141, 153, 255, .16);
    --gruen: #3db86a; --gruen-weich: rgba(61, 184, 106, .16);
    --rot: #f0695c; --rot-weich: rgba(240, 105, 92, .16);
    --orange: #f0954a; --orange-weich: rgba(240, 149, 74, .16);
    --grau-weich: #1f2735;
    --kopf: #1a212e; --hover: #1e2635; --seitenleiste: #131923; --topbar: rgba(15, 20, 28, .9);
    --ok-weich: rgba(61, 184, 106, .08); --mangel-weich: rgba(240, 105, 92, .08); --plan: #5d6982; --umsatz: #5b8fe6;
    --schatten: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .25);
    --schatten-pop: 0 12px 32px rgba(0, 0, 0, .5); --modal-hg: rgba(0, 0, 0, .6);
    color-scheme: dark;
}
}
:root[data-theme="dunkel"] {
  --navy: #2f4594; --navy-2: #3a51a8; --navy-3: #16204a; --navy-text: #a9b5ff;
  --amber: #6371dd; --amber-weich: rgba(99, 113, 221, .22); --amber-hover: #7682e6;
  --gelb-weich: rgba(234, 179, 8, .15); --gelb-text: #f0c75e;
  --bg: #0f141c; --flaeche: #171d28; --linie: #273041; --linie-2: #36415a;
  --text: #e5e9f1; --text-2: #a4aec0; --text-3: #7c879b;
  --blau: #8d99ff; --blau-weich: rgba(141, 153, 255, .16);
  --gruen: #3db86a; --gruen-weich: rgba(61, 184, 106, .16);
  --rot: #f0695c; --rot-weich: rgba(240, 105, 92, .16);
  --orange: #f0954a; --orange-weich: rgba(240, 149, 74, .16);
  --grau-weich: #1f2735;
  --kopf: #1a212e; --hover: #1e2635; --seitenleiste: #131923; --topbar: rgba(15, 20, 28, .9);
  --ok-weich: rgba(61, 184, 106, .08); --mangel-weich: rgba(240, 105, 92, .08); --plan: #5d6982; --umsatz: #5b8fe6;
  --schatten: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .25);
  --schatten-pop: 0 12px 32px rgba(0, 0, 0, .5); --modal-hg: rgba(0, 0, 0, .6);
  color-scheme: dark;
}
/* Logo: in der Dunkeldarstellung als helle Negativ-Variante */
@media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) .seitenleiste .marke-bild, :root:not([data-theme="hell"]) .seitenleiste .marke-kurz { filter: brightness(0) invert(.94); } }
:root[data-theme="dunkel"] .seitenleiste .marke-bild, :root[data-theme="dunkel"] .seitenleiste .marke-kurz { filter: brightness(0) invert(.94); }

/* Leistungsschein (Einsatz) */
.ls-abschnitt { margin-top: 12px; }
.ls-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ls-kopf h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-2); }
.ls-tab td { vertical-align: top; }
.ls-tab tr.ls-aus td { opacity: .55; }
.ls-text { white-space: pre-line; }
.ls-bv { margin: 0 0 4px; }

/* Kolonnen */
.kolonnen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.kolonne-karte.inaktiv { opacity: .6; }
.kolonne-punkt { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: 0; }
.kolonne-mitglieder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kolonne-mitglieder svg.i { width: 15px; height: 15px; vertical-align: -3px; color: var(--text-3); }
.kolonne-auswahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; max-height: 220px; overflow: auto; border: 1px solid var(--linie); border-radius: 8px; padding: 8px; }
.kolonne-auswahl label { display: flex; align-items: center; gap: 6px; font-weight: 500; }

/* Anlagen an Vorgängen */
.anh-tab td { vertical-align: middle; }
.anh-tab a { display: inline-flex; align-items: center; gap: 8px; }
.anh-tab .dateityp { flex: none; }
.anh-drop { border: 2px dashed transparent; border-radius: 8px; transition: border-color .15s; }
.anh-drop.drueber { border-color: var(--amber); background: var(--amber-weich); }
.anh-auswahl { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.anh-auswahl label { display: flex; gap: 10px; align-items: flex-start; padding: 6px 8px; border: 1px solid var(--linie); border-radius: 8px; cursor: pointer; }
.anh-auswahl label .sub { display: block; }

/* Einsatzkalender (Auftragsplanung / Plantafel): Tag mit Stundenraster, Woche */
.ek-leiste { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.ek-titel { margin-left: 6px; font-size: 15px; }
.ek-rahmen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.ek-rahmen.mit-seite { grid-template-columns: minmax(0, 1fr) 260px; }
@media (max-width: 1100px) { .ek-rahmen.mit-seite { grid-template-columns: minmax(0, 1fr); } }
.ek-karte { padding: 0; }
.ek-res { padding: 8px 10px; background: var(--kopf); border-right: 1px solid var(--linie); display: flex; flex-direction: column; gap: 2px; font-size: 13px; min-width: 0; }
.ek-res b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ek-res .sub { font-size: 11px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ek-res svg.i { width: 14px; height: 14px; vertical-align: -2px; }
.ek-last { font-size: 11px; color: var(--text-2); } .ek-last.zuviel { color: var(--rot); font-weight: 700; }
/* Tag */
.ek-tag { min-width: 760px; }
.ek-zeile { display: grid; grid-template-columns: 170px 1fr; border-bottom: 1px solid var(--linie); }
.ek-achse { position: sticky; top: 0; z-index: 3; background: var(--kopf); }
.ek-skala { display: grid; grid-template-columns: repeat(var(--stunden), 1fr); font-size: 11px; color: var(--text-2); }
.ek-skala span { padding: 6px 4px; border-left: 1px solid var(--linie); }
.ek-spur { position: relative; min-height: 52px;
  background-image: linear-gradient(to right, var(--linie) 1px, transparent 1px), linear-gradient(to right, var(--grau-weich) 1px, transparent 1px);
  background-size: calc(100% / var(--stunden)) 100%, calc(100% / var(--stunden) / 2) 100%; }
.ek-spur.drueber, .ek-zelle.drueber { background-color: var(--blau-weich); }
.ek-jetzt { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--rot); z-index: 2; pointer-events: none; }
.ek-einsatz { position: absolute; height: 40px; border-radius: 6px; padding: 3px 12px 3px 7px; overflow: hidden; cursor: grab; font-size: 11.5px; line-height: 1.3;
  background: var(--blau-weich); border: 1px solid var(--blau); border-left-width: 4px; color: var(--text); z-index: 1; }
.ek-einsatz b, .ek-einsatz span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ek-einsatz span { color: var(--text-2); }
.ek-einsatz.ohne-dauer { border-style: dashed; }
.ek-griff { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.ek-griff::after { content: ''; position: absolute; right: 2px; top: 30%; bottom: 30%; width: 2px; border-radius: 2px; background: currentColor; opacity: .35; }
/* Farben je Art */
.art-Stoerung, .art-Störung, .art-Notbefreiung { border-color: var(--rot) !important; background: var(--rot-weich) !important; }
.art-Wartung, .art-Prüfung, .art-Pruefung, .art-Prüfungsbegleitung { border-color: var(--gruen) !important; background: var(--gruen-weich) !important; }
.art-Montage, .art-Modernisierung { border-color: var(--amber) !important; background: var(--amber-weich) !important; }
.ek-einsatz.erledigt, .ek-chip.erledigt { opacity: .55; }
.ek-einsatz.notfall, .ek-chip.notfall { box-shadow: 0 0 0 2px var(--rot); }
/* Woche */
.ek-woche { display: grid; grid-template-columns: 170px repeat(7, minmax(120px, 1fr)); min-width: 1010px; }
.ek-woche > .ek-res { border-bottom: 1px solid var(--linie); }
.ek-wkopf { position: sticky; top: 0; z-index: 2; background: var(--kopf); padding: 8px; font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--linie); border-right: 1px solid var(--linie); display: flex; flex-direction: column; }
.ek-wkopf .sub { font-weight: 400; font-size: 11px; color: var(--text-3); }
.ek-wkopf.heute { box-shadow: inset 0 -2px 0 var(--amber); }
.ek-wkopf.we, .ek-zelle.we { background-color: var(--grau-weich); }
.ek-zelle { border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: 5px; min-height: 70px; display: flex; flex-direction: column; gap: 4px; position: relative; padding-bottom: 10px; }
.ek-zelle.heute { background-color: color-mix(in srgb, var(--amber-weich) 45%, transparent); }
.ek-chip { border-radius: 6px; padding: 4px 6px; font-size: 11.5px; line-height: 1.3; cursor: grab; background: var(--blau-weich); border: 1px solid var(--blau); border-left-width: 4px; display: flex; flex-direction: column; }
.ek-chip span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ek-chip small { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ek-auslastung { position: absolute; left: 5px; right: 5px; bottom: 3px; height: 4px; border-radius: 2px; background: var(--linie); overflow: hidden; }
.ek-auslastung i { display: block; height: 100%; background: var(--gruen); }
.ek-auslastung.zuviel i { background: var(--rot); }
.ek-ohne { display: flex; flex-wrap: wrap; gap: 8px; }
.ek-ohne .ek-chip { min-width: 180px; }
/* Seitenleiste */
.ek-seite { position: sticky; top: 76px; max-height: calc(100vh - 100px); overflow: auto; }
.ek-seite-titel { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-2); margin: 4px 0 8px; }
.ek-seite-titel + * { margin-bottom: 14px; }
.ek-auftrag { border: 1px dashed var(--linie-2); border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; font-size: 12.5px; cursor: grab; background: var(--flaeche); display: flex; flex-direction: column; }
.ek-auftrag small { color: var(--text-2); }
.ek-seite .ek-ohne { flex-direction: column; } .ek-seite .ek-ohne .ek-chip { min-width: 0; }
.segment[hidden] { display: none; }

/* Projektakte: Notizen (intern / Information an Monteur) */
.notiz-raster { align-items: start; }
.notiz-spalte.monteur { border-top: 3px solid var(--amber); }
.notiz-spalte .notiz-form { margin-bottom: 12px; }
.notiz-aktionen { margin-left: auto; display: inline-flex; gap: 2px; }
.verlauf-kopf { display: flex; align-items: center; gap: 8px; }
.ls-info svg.i { width: 15px; height: 15px; vertical-align: -3px; }

/* ---- Bildschirmgrößen ---- */
/* Große Bildschirme: Kennzahlen und Raster nutzen die Breite */
@media (min-width: 1800px) {
  .kpis { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
/* Laptop / Tablet quer (Seitenleiste sichtbar, Inhalt schmaler) */
@media (max-width: 1280px) and (min-width: 901px) {
  .feld.s3 { grid-column: span 6; } .feld.s2 { grid-column: span 4; }
  .raster.drei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Tablet hochkant und Telefon */
@media (max-width: 900px) {
  .kopfzeile { align-items: flex-start; }
  .kopfzeile .aktionen { width: 100%; }
  .globalsuche { min-width: 0; }
  .modal-hg { padding: 12px 10px; }
  .modal { max-width: 100% !important; }
}
/* Telefon */
@media (max-width: 640px) {
  /* Werkzeugleisten in Kartenköpfen (z. B. Positionen: Suche + Schaltflächen) über die volle Breite */
  .karte-kopf > div:not(.aktionen):not(:first-child) { flex: 1 1 100% !important; max-width: none !important; flex-wrap: wrap; }
  .karte-kopf > div:not(.aktionen):not(:first-child) > input { flex: 1 1 100%; }
  h1 { font-size: 19px; }
  .karte-kopf { padding: 12px 14px; }
  .karte-inhalt { padding: 14px; }
  .kopfzeile .aktionen > * { flex: 1 1 auto; justify-content: center; }
  .kopfzeile .aktionen input[type=search], .kopfzeile .aktionen select { flex-basis: 100%; width: 100% !important; }
  .topbar { gap: 8px; }
  .topbar .btn.akzent span, .topbar .btn.akzent { font-size: 0; gap: 0; padding: 8px 10px; }
  .topbar .btn.akzent svg.i { width: 18px; height: 18px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi .wert { font-size: 20px; }
  table.tab th, table.tab td { padding: 8px 9px; }
  .segment { flex-wrap: wrap; }
  input, select, textarea, .btn { min-height: 40px; }
  .btn.klein, .btn.icon { min-height: 34px; }
  .filterleiste { flex-wrap: wrap; }
  .filterleiste > * { flex: 1 1 140px; }
}

/* Werkzeugleiste im Kartenkopf (Suchen + Schaltflächen): Suchfeld nimmt den Rest, bricht erst bei Platzmangel um */
.kopf-werkzeug { display: flex; gap: 8px; align-items: center; flex: 1 1 auto; max-width: 820px; justify-content: flex-end; flex-wrap: wrap; }
.kopf-werkzeug > input { flex: 1 1 240px; width: auto; min-width: 0; }
.kopf-werkzeug > .btn { flex: none; }

/* Einstellungen: Startseite mit Bereichen, Bereichsseiten mit Seitenmenü */
.es-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.es-kachel { display: flex; gap: 14px; padding: 18px; color: var(--text); align-items: flex-start; transition: border-color .15s, box-shadow .15s; }
.es-kachel:hover { text-decoration: none; border-color: var(--amber); box-shadow: var(--schatten-pop); }
.es-symbol { flex: none; width: 42px; height: 42px; border-radius: 10px; background: var(--amber-weich); color: var(--navy-text); display: grid; place-items: center; }
.es-symbol svg.i { width: 22px; height: 22px; }
.es-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.es-text b { font-size: 15px; }
.es-text > span { color: var(--text-2); font-size: 13px; }
.es-text small { color: var(--text-3); font-size: 12px; margin-top: 4px; }
.es-treffer { margin-bottom: 14px; }
.es-treffer li a { display: block; padding: 2px 0; }
.es-rahmen { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
.es-menue { position: sticky; top: 76px; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.es-menue a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--text); font-weight: 500; }
.es-menue a svg.i { color: var(--text-3); }
.es-menue a:hover { background: var(--grau-weich); text-decoration: none; }
.es-menue a.aktiv { background: var(--amber-weich); color: var(--navy-text); font-weight: 650; }
.es-menue a.aktiv svg.i { color: var(--amber); }
.es-fuss { display: flex; justify-content: flex-end; margin-top: 14px; }
.es-unterkarte { border-top: 1px solid var(--linie); }
.es-inhalt > .karte { scroll-margin-top: 80px; }
@media (max-width: 900px) {
  .es-rahmen { grid-template-columns: minmax(0, 1fr); }
  .es-menue { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .es-menue a { flex: none; white-space: nowrap; }
}

/* Glocke: Erinnerungen aus Workflows */
.btn.glocke { position: relative; margin-left: auto; }
.glocke-zahl { position: absolute; top: -5px; right: -5px; background: var(--rot); color: #fff; font-size: 10.5px; font-weight: 700; border-radius: 9px; padding: 0 5px; min-width: 18px; line-height: 17px; text-align: center; }
.glocke-zahl[hidden] { display: none; }
.glocke-panel { position: fixed; z-index: 90; width: min(380px, calc(100vw - 16px)); max-height: min(520px, 75vh); display: flex; flex-direction: column; box-shadow: var(--schatten-pop); }
.glocke-liste { overflow-y: auto; }
.glocke-eintrag { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-bottom: 1px solid var(--linie); color: var(--text); }
.glocke-eintrag:hover { background: var(--hover); text-decoration: none; }
.glocke-eintrag span { color: var(--text-2); font-size: 13px; } .glocke-eintrag small { color: var(--text-3); font-size: 11.5px; }
.glocke-eintrag:not(.gelesen) { box-shadow: inset 3px 0 0 var(--amber); }
.glocke-eintrag.gelesen b { font-weight: 500; color: var(--text-2); }

/* Workflows */
.wf-liste { display: flex; flex-direction: column; gap: 8px; }
.wf-zeile { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; }
.wf-zeile.aus { opacity: .6; }
.wf-text { flex: 1; min-width: 0; }
.wf-regel { font-size: 13px; color: var(--text-2); margin-top: 3px; line-height: 1.6; }
.wf-wenn, .wf-und, .wf-dann { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-radius: 4px; padding: 1px 6px; margin: 0 2px; }
.wf-wenn { background: var(--blau-weich); color: var(--blau); } .wf-und { background: var(--gelb-weich); color: var(--gelb-text); } .wf-dann { background: var(--gruen-weich); color: var(--gruen); }
.wf-knoepfe { display: flex; gap: 2px; }
.wf-schalter { position: relative; width: 38px; height: 22px; flex: none; margin-top: 2px; cursor: pointer; }
.wf-schalter input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.wf-schalter span { position: absolute; inset: 0; border-radius: 999px; background: var(--linie-2); transition: background .15s; pointer-events: none; }
.wf-schalter span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.wf-schalter input:checked + span { background: var(--gruen); } .wf-schalter input:checked + span::after { transform: translateX(16px); }
.wf-vorlagen-titel { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); margin: 18px 0 8px; }
.wf-vorlagen { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.wf-vorlage { display: flex; gap: 8px; align-items: flex-start; text-align: left; font: inherit; font-size: 13px; padding: 9px 10px; border: 1px dashed var(--linie-2); border-radius: 8px; background: var(--flaeche); color: var(--text); cursor: pointer; }
.wf-vorlage:hover { border-color: var(--amber); background: var(--amber-weich); }
.wf-vorlage svg.i { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.wf-block { border: 1px solid var(--linie); border-radius: 10px; padding: 12px; margin-top: 12px; }
.wf-block.wenn { border-left: 4px solid var(--blau); } .wf-block.und { border-left: 4px solid var(--gelb-text); } .wf-block.dann { border-left: 4px solid var(--gruen); }
.wf-block-kopf { font-size: 13px; color: var(--text-2); margin-bottom: 8px; }
.wf-bedingung { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1.2fr) auto; gap: 6px; margin-bottom: 6px; align-items: center; }
.wf-aktion { border: 1px solid var(--linie); border-radius: 8px; padding: 10px; margin-bottom: 8px; background: var(--kopf); }
.wf-aktion-kopf { display: flex; gap: 8px; align-items: baseline; margin-bottom: 8px; } .wf-aktion-kopf .btn { margin-left: auto; }
.wf-neu-aktion { display: flex; flex-wrap: wrap; gap: 6px; }
.wf-tage { display: flex; align-items: center; gap: 8px; } .wf-tage input { width: 90px; }
@media (max-width: 640px) { .wf-bedingung { grid-template-columns: minmax(0, 1fr) auto; } .wf-bedingung > select[data-b="op"], .wf-bedingung > [data-b="wert"] { grid-column: 1; } }
.badge .i { width: 12px; height: 12px; vertical-align: -2px; }

.ref-zeile { display: flex; gap: 6px; align-items: stretch; min-width: 0; }
.ref-zeile select { flex: 1 1 auto; min-width: 0; }
.ref-zeile .ref-link { flex: none; }
.ref-zeile .ref-link[hidden] { display: none; }
.projekt-sprung { white-space: nowrap; font-weight: 600; }
.projekt-sprung .i { width: 14px; height: 14px; vertical-align: -2px; }
.pk-titel .i { width: 14px; height: 14px; vertical-align: -2px; color: var(--text-3); }
.adr { display: inline-flex; gap: 5px; align-items: flex-start; }
.adr .i { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--text-3); }
.nk-tab input[name=praefix] { min-width: 120px; }
.nk-tab select { min-width: 150px; }
.nk-tab input[type=number] { min-width: 80px; }
.nk-tab td:first-child { min-width: 130px; }

/* Checklisten-Baukasten */
.modal.cb-modal { max-width: 1180px; min-width: 0; }
.cb, .cb-raster, .cb-abschnitt, .cb-punkte { min-width: 0; }
.cb-eingaben input { width: 100%; min-width: 0; }
.cb-schritt { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; flex-wrap: wrap; }
.cb-schritt:first-child { margin-top: 0; }
.cb-schritt-nr { width: 22px; height: 22px; border-radius: 50%; background: var(--amber); color: #fff; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.cb-start { display: flex; gap: 8px; flex-wrap: wrap; }
.cb-start-karte { display: flex; border: 1px solid var(--linie); border-radius: 10px; padding: 8px 12px; cursor: pointer; background: var(--flaeche); min-width: 150px; }
.cb-start-karte input { position: absolute; opacity: 0; pointer-events: none; }
.cb-start-karte > span { display: flex; flex-direction: column; gap: 2px; }
.cb-start-karte small { color: var(--text-3); font-size: 11.5px; }
.cb-start-karte .i { width: 14px; height: 14px; vertical-align: -2px; }
.cb-start-karte:has(input:checked) { border-color: var(--amber); background: var(--amber-weich); box-shadow: 0 0 0 1px var(--amber) inset; }
.cb-start-karte:has(input:focus-visible) { outline: 2px solid var(--amber); outline-offset: 2px; }
.cb-als-vorlage { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; margin-right: 8px; }
.cb-raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 14px; align-items: start; }
.cb-bausteine, .cb-liste { border: 1px solid var(--linie); border-radius: 10px; padding: 10px; background: var(--bg); min-width: 0; }
.cb-bausteine { position: sticky; top: 0; max-height: 62vh; display: flex; flex-direction: column; gap: 8px; }
.cb-quelle { overflow: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.cb-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.cb-kopf .i { width: 15px; height: 15px; vertical-align: -2px; }
.cb-werkzeug { margin-left: auto; display: flex; gap: 6px; }
.cb-vorlage { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 6px 8px; }
.cb-vorlage > summary { cursor: pointer; display: flex; align-items: center; gap: 6px; list-style: none; }
.cb-vorlage > summary::-webkit-details-marker { display: none; }
.cb-vorlage > summary::before { content: '▸'; color: var(--text-3); }
.cb-vorlage[open] > summary::before { content: '▾'; }
.cb-vorlage > summary .btn { margin-left: auto; }
.cb-gruppe { margin-top: 6px; }
.cb-gruppe-kopf { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); padding: 2px 4px; cursor: grab; text-transform: none; }
.cb-gruppe-kopf .i { width: 13px; height: 13px; vertical-align: -2px; }
.cb-baustein { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; cursor: grab; font-size: 13px; }
.cb-baustein:hover { background: var(--amber-weich); }
.cb-baustein .cb-text { flex: 1; min-width: 0; }
.cb-baustein small { display: block; color: var(--text-3); font-size: 11px; }
.cb-griff { color: var(--text-3); cursor: grab; user-select: none; flex: none; }
.cb-abschnitte { display: flex; flex-direction: column; gap: 10px; }
.cb-abschnitt { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 8px; transition: box-shadow .1s; }
.cb-abschnitt.cb-drueber { box-shadow: 0 0 0 2px var(--amber); }
.cb-abschnitt-kopf { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.cb-abschnitt-name { flex: 1; min-width: 0; font-weight: 600; border-color: transparent !important; background: transparent; padding-left: 4px; }
.cb-abschnitt-name:hover, .cb-abschnitt-name:focus { border-color: var(--linie-2) !important; background: var(--flaeche); }
.cb-punkte { display: flex; flex-direction: column; gap: 4px; min-height: 28px; }
.cb-punkt { display: flex; align-items: flex-start; gap: 4px; padding: 3px 4px; border-radius: 6px; }
.cb-punkt:hover { background: var(--bg); }
.cb-punkt.cb-zieht, .cb-baustein.cb-zieht { opacity: .4; }
.cb-punkt .cb-griff { padding-top: 7px; }
.cb-nr { color: var(--text-3); font-size: 12px; min-width: 20px; text-align: right; padding-top: 8px; }
.cb-eingaben { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cb-eingaben input { padding: 5px 8px; }
.cb-phinweis { font-size: 12px; color: var(--text-2); }
.cb-punkt .btn.icon.klein { min-height: 28px; min-width: 28px; padding: 3px; font-size: 12px; }
.cb-punkt .btn.aktiv { color: var(--amber); border-color: var(--amber); }
.cb-leer { border: 1px dashed var(--linie-2); border-radius: 6px; padding: 8px; text-align: center; color: var(--text-3); font-size: 12.5px; }
.cb-marke { height: 3px; border-radius: 2px; background: var(--amber); margin: 1px 0; }
.cb-neu { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding-left: 4px; color: var(--text-3); }
.cb-neu .i { width: 14px; height: 14px; }
.cb-neu-text { flex: 1; min-width: 0; border-style: dashed !important; }
.cb-neu-abschnitt { margin-top: 10px; }
@media (max-width: 900px) {
  .cb-raster { grid-template-columns: minmax(0, 1fr); }
  .cb-bausteine { position: static; max-height: 40vh; }
  .cb-griff { display: none; }
}
@media (max-width: 640px) {
  .cb-punkt { flex-wrap: wrap; border-bottom: 1px solid var(--linie); padding-bottom: 6px; }
  .cb-eingaben { flex: 1 1 100%; order: -1; }
  .cb-nr { display: none; }
  .cb-punkt [data-hinweis] { margin-left: auto; }
  .cb-start-karte { min-width: 0; flex: 1 1 140px; }
  .cb-als-vorlage { width: 100%; }
}

/* Durchsuchbare Auswahl */
.such-auswahl { position: relative; flex: 1; min-width: 0; }
.such-auswahl-select { position: absolute !important; opacity: 0; pointer-events: none; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; bottom: 0; left: 0; }
.such-auswahl > input { padding-right: 30px; }
.such-auswahl-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--text-3); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px; }
.such-auswahl-x:hover { color: var(--rot); }
.such-auswahl-x[hidden] { display: none; }
.such-auswahl-liste { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 3px); max-height: 260px; overflow: auto; background: var(--flaeche); border: 1px solid var(--linie-2); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.15); padding: 4px; }
.such-auswahl-eintrag { padding: 7px 9px; border-radius: 6px; cursor: pointer; font-size: 13.5px; }
.such-auswahl-eintrag.aktiv { background: var(--amber-weich); }
.such-auswahl-eintrag.gewaehlt { font-weight: 600; }
.such-auswahl-leer { padding: 8px; color: var(--text-3); font-size: 13px; }
.kontakt-kurz .i, .unter > .i { width: 14px; height: 14px; vertical-align: -2px; }
.formular[hidden], [data-teil][hidden] { display: none !important; }

/* Preise nach Spezifikation */
.ap-tab input { min-width: 70px; }
.ap-tab td:first-child input { min-width: 220px; }
.sp-liste { display: flex; flex-direction: column; gap: 6px; }
.sp-zeile { display: flex; align-items: center; gap: 10px; border: 1px solid var(--linie); border-radius: 8px; padding: 8px 12px; cursor: pointer; }
.sp-zeile:has(input:checked) { border-color: var(--amber); background: var(--amber-weich); }
.sp-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-text small { color: var(--text-3); font-size: 12px; }
.sp-preis { font-weight: 700; white-space: nowrap; }
.sp-zeile input[type=radio] { width: auto; min-height: 0; flex: none; margin: 0; }

/* Lieferantengruppen */
.gruppen-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.gruppen-chips .badge { font-size: 11px; }
.gruppen-wahl { display: flex; gap: 6px; flex-wrap: wrap; }
.gruppe-chip { --gfarbe: var(--amber); display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--linie-2); background: var(--flaeche); color: var(--text-2); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.gruppe-chip .i { width: 13px; height: 13px; }
.gruppe-chip.an { border-color: var(--gfarbe); background: color-mix(in srgb, var(--gfarbe) 14%, var(--flaeche)); color: var(--text); font-weight: 600; }
.gruppe-chip:disabled { cursor: default; }
.bt-platzhalter { margin-top: 6px; line-height: 2.1; }
.bt-platzhalter code { font-size: 12px; }
.zb-tab input[type=radio], .zb-tab input[type=checkbox] { width: auto; min-height: 0; margin: 0; }
.zb-tab td:first-child { min-width: 260px; }
.zb-tab input[inputmode] { width: 80px; min-width: 70px; }
.zb-beispiel { max-width: 340px; }

/* Dringlichkeit von Projekten */
.dringlich-sehr_dringend { font-weight: 700; }
.text-dringlich { color: var(--rot); }
.unter.text-dringlich .i { width: 14px; height: 14px; vertical-align: -2px; }
.dringend-karte { border-left: 4px solid var(--rot); margin-bottom: 16px; }
.dringend-karte .karte-kopf h2 .i { color: var(--rot); }
.planung-karte.dringlich, .m-karte.dringlich { border-left: 4px solid var(--rot); }
.such-auswahl-eintrag small { display: block; color: var(--text-3); font-size: 11.5px; }

/* Abrechnungs-Ampel je Position */
.ampel { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: -1px; box-shadow: 0 0 0 1px rgba(0,0,0,.12) inset; }
.ampel-rot { background: #d93a2f; } .ampel-gelb { background: #e8b100; } .ampel-gruen { background: #1f9d4c; }
.abr-titel { font-size: 14px; margin: 16px 0 6px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.abr-titel .ampel { margin-left: 4px; }
.abr-pos tr.abr-gruen td { color: var(--text-2); }
.abr-aktion { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 8px; }

/* Aufgaben-Seite und Übersichtsfilter */
.af-filter { flex-wrap: wrap; gap: 8px; }
.af-filter select { width: auto; }
.af-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.chip { border: 1px solid var(--linie-2); background: var(--flaeche); color: var(--text-2); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.chip.an { background: var(--navy); border-color: var(--navy); color: #fff; }
.af-sort { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--text-2); }
.af-tab tr.erledigt td { color: var(--text-3); }
.af-tab tr.erledigt b { text-decoration: line-through; }
.af-tab input[type=checkbox] { width: auto; min-height: 0; }
.dash-filter { flex: 1; text-align: right; margin-right: 8px; }
.dash-fs { border: 1px solid var(--linie); border-radius: 8px; padding: 8px 12px; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.dash-fs legend { font-size: 12px; font-weight: 600; color: var(--text-2); padding: 0 4px; }
.dash-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.dash-check input { width: auto; min-height: 0; }

/* Tagesplanung (Routen) */
.tp-optionen { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-bottom: 12px; }
.tp-optionen label:not(.check-inline) { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.tp-optionen input[type=time] { width: auto; }
.tp-touren { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; margin-top: 10px; }
.tp-tour { margin: 0; }
.tp-tour .karte-kopf { flex-wrap: wrap; gap: 6px 10px; }
.tp-stationen { list-style: none; margin: 0; padding: 8px 14px 12px; }
.tp-stationen li { display: grid; grid-template-columns: 34px 1fr; gap: 2px 10px; padding: 6px 0; border-bottom: 1px dashed var(--linie); }
.tp-stationen li:last-child { border-bottom: 0; }
.tp-stationen li > div:last-child { grid-column: 2; min-width: 0; }
.tp-fahrt { grid-column: 2; }
.tp-nr { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; background: var(--blau); color: #fff; font-weight: 750; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center; }
.tp-nr.notfall { background: var(--rot); }
.tp-nr.start { background: var(--blau-weich); color: var(--text-2); }
.tp-nr.start svg { width: 16px; height: 16px; }
.tp-ohne { margin: 0 14px 12px; padding: 8px 10px; border-radius: 8px; background: var(--gelb-weich); color: var(--gelb-text); font-size: 13px; display: grid; gap: 4px; }
.tp-badge, .ek-einsatz span.tp-badge { display: inline-flex; width: auto; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; margin-right: 4px; border-radius: 9px;
  background: #fff; color: var(--blau); font-weight: 800; font-size: 11px; vertical-align: 1px; }
@media (max-width: 700px) { .tp-touren { grid-template-columns: 1fr; } }
/* Große Stationsnummer (Leistungsschein, Monteur-App) */
.ls-station { float: right; margin: 0 0 8px 12px; min-width: 76px; padding: 4px 10px 6px; border-radius: 10px; background: #283c81; color: #fff;
  text-align: center; font-size: 40px; font-weight: 800; line-height: 1; }
.ls-station small { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 3px; opacity: .85; }
.m-station { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px; margin-right: 8px; border-radius: 8px;
  background: #283c81; color: #fff; font-size: 17px; font-weight: 800; vertical-align: 2px; }
table.tab b.mono { white-space: nowrap; }

/* Artikelsuche in Vorgängen */
.as-box { position: relative; flex: 1 1 320px; min-width: 0; }
.as-box > input { width: 100%; }
.as-panel { position: absolute; right: 0; top: calc(100% + 6px); width: max(100%, min(720px, calc(100vw - 48px))); z-index: 45; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 10px; box-shadow: var(--schatten-pop); display: flex; flex-direction: column; max-height: min(520px, 70vh); }
.as-panel[hidden] { display: none; }
.as-kopf { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 10px; border-bottom: 1px solid var(--linie); }
.as-kopf .chip { font-size: 12px; padding: 3px 10px; }
.as-liste { overflow-y: auto; flex: 1; padding: 4px; }
.as-gruppe { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-3); padding: 8px 10px 4px; }
.as-zeile { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.as-zeile.aktiv { background: var(--amber-weich); }
.as-haupt { min-width: 0; flex: 1; }
.as-titel { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.as-titel b { color: var(--text); }
.as-nr { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.as-beschr { font-size: 12.5px; color: var(--text-2); margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.as-zeile mark { background: rgba(255, 196, 0, .35); color: inherit; border-radius: 2px; padding: 0 1px; }
.as-info { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; font-size: 12px; }
.as-info .badge { font-size: 11px; }
.as-preis { white-space: nowrap; } .as-preis small { color: var(--text-3); margin-left: 3px; }
.as-lager { display: inline-flex; align-items: center; gap: 3px; color: var(--text-3); } .as-lager.da { color: var(--gruen); }
.as-lager svg.i { width: 13px; height: 13px; }
.as-leer { padding: 18px; text-align: center; color: var(--text-3); }
.as-fuss { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 8px 10px; border-top: 1px solid var(--linie); background: var(--kopf); border-radius: 0 0 10px 10px; }
.as-aktionen { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 700px) { .as-panel { width: 100%; } .as-zeile { flex-direction: column; } .as-info { flex-direction: row; flex-wrap: wrap; align-items: center; } }

/* Wochenplanung */
.modal.sehr-breit { max-width: min(1240px, 96vw); }
.wp-optionen { display: grid; gap: 10px; margin-bottom: 12px; }
.wp-zeile { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.wp-zeile > label:not(.check-inline) { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.wp-zeile input[type=time] { width: auto; }
.wp-label { font-size: 12px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .5px; min-width: 150px; }
.wp-optionen .chip small { opacity: .75; margin-left: 4px; }
.wp-optionen .chip svg.i { width: 13px; height: 13px; vertical-align: -2px; }
.wp-plan { margin: 0 0 12px; }
.wp-tage { display: grid; grid-template-columns: repeat(var(--spalten, 5), minmax(150px, 1fr)); gap: 8px; padding: 10px; overflow-x: auto; }
.wp-tag { background: var(--hover); border: 1px solid var(--linie); border-radius: 8px; padding: 8px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wp-tag-kopf { display: flex; justify-content: space-between; align-items: center; }
.wp-tag-kopf a svg.i { width: 15px; height: 15px; }
.wp-last { height: 6px; border-radius: 3px; background: var(--grau-weich); overflow: hidden; }
.wp-last i { display: block; height: 100%; background: var(--gruen); border-radius: 3px; }
.wp-last.zuviel i { background: var(--rot); }
.wp-stationen { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wp-stationen li { display: grid; grid-template-columns: 24px 1fr; gap: 6px; font-size: 12.5px; line-height: 1.3; }
.wp-stationen li > div { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tp-nr.klein { width: 22px; height: 22px; font-size: 12px; grid-row: auto; }
@media (max-width: 800px) { .wp-tage { grid-template-columns: 1fr; } .wp-label { min-width: 0; width: 100%; } }

/* Persönliche Einstellungen / E-Mail */
.es-persoenlich { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 16px; color: var(--text); }
.es-persoenlich:hover { text-decoration: none; border-color: var(--amber); }
.es-persoenlich > span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.es-persoenlich > svg.i:first-child { color: var(--amber); width: 22px; height: 22px; }
a.benutzer-text { color: inherit; } a.benutzer-text:hover { text-decoration: none; } a.benutzer-text:hover b { color: var(--navy-text); }
.pe-stapel { max-width: 900px; }
.em-text { white-space: pre-wrap; font-size: 13px; background: var(--hover); border: 1px solid var(--linie); border-radius: 8px; padding: 10px 12px; max-height: 220px; overflow: auto; }

/* App-Freigabe */
.af-erklaerung { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.af-erklaerung > div { background: var(--hover); border: 1px solid var(--linie); border-radius: 8px; padding: 10px 12px; }
.af-erklaerung svg.i { width: 15px; height: 15px; vertical-align: -2px; }
table.tab td.mitte, table.tab th.mitte { text-align: center; }
table.tab tr.inaktiv td { opacity: .6; }
.schalter { position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer; }
.schalter input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.schalter span { position: absolute; inset: 0; border-radius: 11px; background: var(--linie-2); transition: background .15s; pointer-events: none; }
.schalter span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.schalter input:checked + span { background: var(--gruen); }
.schalter input:checked + span::after { transform: translateX(18px); }
.schalter input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 2px; }
.schalter input:disabled + span { opacity: .5; }

/* ---- Werkstatt-Board (Tablet) ---- */
body.werkstatt { background: var(--bg); font-size: 16px; min-height: 100vh; }
.rot-text { color: var(--rot); } .gruen-text { color: var(--gruen); } .orange-text { color: var(--orange); } .blau-text { color: var(--blau); }
.wb-kopf { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 14px; padding: 10px 18px; background: var(--navy); color: #fff; }
.wb-logo { width: 34px; height: auto; filter: brightness(0) invert(1); }
.wb-titel { display: flex; flex-direction: column; line-height: 1.15; } .wb-titel b { font-size: 20px; } .wb-titel span { font-size: 12px; opacity: .75; }
.wb-reiter { display: flex; gap: 8px; margin-left: 10px; flex-wrap: wrap; }
.wb-reiter a { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 999px; padding: 9px 16px; font-weight: 600; text-decoration: none; min-height: 44px; }
.wb-reiter a:hover { background: rgba(255,255,255,.12); text-decoration: none; }
.wb-reiter svg.i { width: 16px; height: 16px; }
.wb-zurueck { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 16px 0 10px; border-radius: 12px; background: rgba(255,255,255,.14); color: #fff; font-weight: 700; font-size: 17px; text-decoration: none; }
.wb-zurueck:hover { text-decoration: none; background: rgba(255,255,255,.22); }
.wb-anzahl { display: inline-block; min-width: 28px; padding: 0 8px; margin-left: 6px; border-radius: 14px; background: rgba(255,255,255,.2); text-align: center; font-size: 16px; }
/* Startseite: drei große Kacheln */
.wb-start { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 28px; min-height: calc(100vh - 130px); align-items: stretch; }
.wb-kachel { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 24px; padding: 28px 18px; color: #fff; text-decoration: none;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .25); transition: transform .12s; text-align: center; min-height: 260px; }
.wb-kachel:hover { text-decoration: none; transform: translateY(-2px); } .wb-kachel:active { transform: scale(.98); }
.wb-kachel.blau { background: linear-gradient(150deg, #3d4bc2, #283c81); }
.wb-kachel.gruen { background: linear-gradient(150deg, #1f9d55, #136c3a); }
.wb-kachel.orange { background: linear-gradient(150deg, #e08a1e, #b4600c); }
.wb-kachel-symbol svg.i { width: 64px; height: 64px; stroke-width: 1.6; }
.wb-kachel-zahl { font-size: clamp(56px, 9vw, 110px); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.wb-kachel-titel { font-size: clamp(20px, 2.4vw, 30px); font-weight: 800; }
.wb-kachel-unter { font-size: 16px; opacity: .9; } .wb-kachel-unter b { background: rgba(0,0,0,.18); border-radius: 8px; padding: 2px 8px; }
/* Bereichsansichten */
.wb-bereich { padding: 16px 18px; display: grid; gap: 12px; align-items: start; }
.wb-raster-auftraege, .wb-raster-lieferungen { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.wb-raster-aufgaben { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.wb-uhr { margin-left: auto; text-align: right; display: flex; flex-direction: column; line-height: 1.1; } .wb-uhr b { font-size: 26px; font-variant-numeric: tabular-nums; } .wb-uhr span { font-size: 12px; opacity: .8; }
.wb-knopf { width: 44px; height: 44px; border-radius: 10px; border: 0; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; cursor: pointer; }
.wb-knopf svg.i { width: 20px; height: 20px; }
.wb-raster { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 14px; padding: 14px 18px; align-items: start; }
.wb-spalte h2 { display: flex; align-items: center; gap: 8px; font-size: 17px; margin: 0 0 10px; color: var(--navy-text); }
.wb-spalte h2 small { font-size: 13px; color: var(--text-3); font-weight: 600; }
.wb-liste { display: flex; flex-direction: column; gap: 10px; }
.wb-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 12px 14px; box-shadow: var(--schatten); display: flex; flex-direction: column; gap: 6px; }
.wb-karte[data-auftrag] { cursor: pointer; } .wb-karte[data-auftrag]:active { transform: scale(.995); }
.wb-karte.dringlich { border-left: 5px solid var(--rot); }
.wb-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wb-kunde { font-size: 17px; font-weight: 700; color: var(--text); }
.wb-betreff { color: var(--text-2); }
.wb-info { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--text-2); }
.wb-info span { display: inline-flex; align-items: center; gap: 5px; } .wb-info svg.i { width: 15px; height: 15px; }
.wb-hinweis { background: var(--gelb-weich); color: var(--gelb-text); border-radius: 8px; padding: 6px 10px; font-size: 13.5px; }
.wb-aufgabe { display: grid; grid-template-columns: 54px 1fr; gap: 10px; align-items: start; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 10px 12px; }
.wb-aufgabe.hoch { border-left: 5px solid var(--orange); }
.wb-haken { width: 50px; height: 50px; border-radius: 12px; border: 2px solid var(--linie-2); background: var(--hover); color: var(--text-3); display: grid; place-items: center; cursor: pointer; }
.wb-haken:active, .wb-haken:hover { border-color: var(--gruen); color: var(--gruen); }
.wb-haken svg.i { width: 26px; height: 26px; }
.wb-beschr { font-size: 14px; color: var(--text-2); white-space: pre-line; margin: 2px 0; }
.wb-pos { margin: 2px 0 0; padding-left: 18px; font-size: 14px; display: flex; flex-direction: column; gap: 2px; }
.wb-gross { min-height: 48px; border-radius: 10px; border: 0; background: var(--navy); color: #fff; font: inherit; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; margin-top: 4px; }
.wb-leer { text-align: center; color: var(--text-3); padding: 24px 10px; background: var(--flaeche); border: 1px dashed var(--linie); border-radius: 12px; }
.wb-fuss { padding: 4px 18px 16px; }
.wb-detail h3 { font-size: 15px; margin: 16px 0 6px; display: flex; align-items: center; gap: 6px; }
.wb-naechster { background: var(--blau-weich); border-radius: 8px; padding: 8px 10px; margin: 8px 0; }
.wb-notiz { background: var(--hover); border: 1px solid var(--linie); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; white-space: pre-line; }
.wb-doks { display: flex; flex-wrap: wrap; gap: 8px; }
.wb-we input[type=number] { text-align: right; font-size: 17px; min-height: 44px; }
.wb-we select { min-height: 44px; }
body.werkstatt .modal .btn { min-height: 46px; padding: 0 18px; font-size: 15px; }
@media (max-width: 1000px) { .wb-reiter { display: none; } }
@media (max-width: 760px) {
  .wb-start { grid-template-columns: 1fr; padding: 16px; min-height: 0; }
  .wb-kachel { min-height: 170px; flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
  .wb-kachel-symbol svg.i { width: 44px; height: 44px; }
  .wb-raster-auftraege, .wb-raster-lieferungen, .wb-raster-aufgaben { grid-template-columns: 1fr; }
  .wb-titel span, .wb-uhr span { display: none; }
}
.ws-qr svg { width: 220px; height: 220px; display: block; background: #fff; border-radius: 8px; padding: 6px; }

/* Eingangsrechnung: selbstlernende Erkennung */
.er-erkennung { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 12px; border-radius: 8px; background: var(--blau-weich); border: 1px solid var(--linie); }
.er-erkennung.ok { background: var(--gruen-weich); }
.er-erkennung > svg.i { flex: none; margin-top: 2px; color: var(--blau); } .er-erkennung.ok > svg.i { color: var(--gruen); }
.er-erkennung > div { flex: 1 1 260px; min-width: 0; }
.er-erk-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
.badge.er-marke { font-size: 10px; padding: 1px 6px; font-weight: 600; margin-left: 4px; vertical-align: 1px; }
.wf-filter { display: grid; gap: 12px; }
.wf-zeile { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.wf-zeile input[type=number] { display: inline-block; margin: 0 4px; }
/* Werkstatt-App: PIN */
.wb-pin .karte { max-width: 380px; }
.wb-pin-punkte { text-align: center; font-size: 30px; letter-spacing: 10px; min-height: 44px; margin-bottom: 10px; color: var(--navy-text); }
.wb-pin-feld { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wb-pin-feld button { min-height: 66px; border-radius: 14px; border: 1px solid var(--linie); background: var(--hover); color: var(--text); font: inherit; font-size: 26px; font-weight: 700; cursor: pointer; }
.wb-pin-feld button:active { transform: scale(.97); background: var(--grau-weich); }
.wb-pin-feld button.ok { background: var(--navy); color: #fff; border-color: var(--navy); font-size: 20px; }
/* Projektakte: Stunden */
.ps-summen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ps-summen > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px; background: var(--hover); border: 1px solid var(--linie); }
.ps-summen span { font-size: 12px; color: var(--text-3); } .ps-summen b { font-size: 20px; }
.ps-summen .ps-gesamt { background: var(--blau-weich); }
.ps-rechnung { padding: 10px 12px; border-radius: 8px; background: var(--blau-weich); font-size: 15px; }

/* Bank: Kontierungsvorschläge, Bankkonten, Sachkonten, Prognose */
.konto-vorschlag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; border: 1px solid var(--linie); border-radius: 12px; padding: 1px 4px 1px 8px; background: var(--grau-weich); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.konto-vorschlag.sicher { border-color: var(--gruen); background: var(--gruen-weich); }
.konto-vorschlag.mittel { border-color: var(--linie-2); background: var(--blau-weich); }
.konto-vorschlag .score { padding: 0 6px; }
td .konto-vorschlag + .btn { padding: 2px 6px; min-height: 0; margin-left: 4px; vertical-align: middle; }
.konto-vorschlaege { display: grid; gap: 6px; margin: 4px 0 12px; }
.vorschlag-zeile { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--linie); border-radius: 8px; padding: 6px 10px; background: transparent; color: inherit; cursor: pointer; font: inherit; min-width: 0; }
.vorschlag-zeile > .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vorschlag-zeile.an { border-color: var(--navy); background: var(--blau-weich); }
.bankkonten { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; padding: 0 14px 14px; }
.bankkonto { border: 1px solid var(--linie); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bk-kopf { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.bk-saldo { font-size: 28px; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.bk-zahlen, .bk-fuss { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-2); flex-wrap: wrap; }
.saldo-linie { width: 100%; height: 54px; display: block; }
.saldo-linie polyline { fill: none; stroke: var(--umsatz); stroke-width: 2; vector-effect: non-scaling-stroke; }
.saldo-linie polyline.neg { stroke: var(--rot); }
.saldo-linie .null { stroke: var(--linie-2); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.mini-saeulen { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; }
.mini-saeulen i { width: 5px; background: var(--linie-2); border-radius: 1px; }
.mini-saeulen i.akt { background: var(--umsatz); } .mini-saeulen i.neg { background: var(--rot); }
.tab tr.gruppe th { background: var(--grau-weich); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-2); }
.konto-monate { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; align-items: end; margin-top: 12px; }
.konto-monate > div { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.konto-monate i { width: 70%; background: var(--umsatz); border-radius: 2px; min-height: 1px; } .konto-monate i.neg { background: var(--rot); }
.konto-monate span { font-size: 11px; color: var(--text-3); } .konto-monate b { font-size: 10px; font-weight: 500; color: var(--text-2); white-space: nowrap; overflow: hidden; max-width: 100%; }
.az-diagramm .prognose { opacity: .38; }
.az-legende i.prognose { opacity: .38; }
.az-legende i.gewinn { background: var(--gruen); height: 3px; vertical-align: 3px; }
.az-diagramm .gewinn-linie { fill: none; stroke: var(--gruen); stroke-width: 2.5; }
.az-diagramm .gewinn-punkt { fill: var(--gruen); }
.az-diagramm .prognose-text { font-style: italic; }
.az-diagramm .liqui-linie { fill: none; stroke: var(--umsatz); stroke-width: 2.5; }
.az-diagramm .liqui-punkt { fill: var(--umsatz); } .az-diagramm .liqui-punkt.neg { fill: var(--rot); }
.tab .prognose-spalte { background: var(--grau-weich); font-style: italic; }
@media (max-width: 700px) { .konto-monate b { display: none; } .bk-saldo { font-size: 24px; } }

/* Seitenwechsel: neue Seite unsichtbar aufbauen, alte bleibt sichtbar; Ladebalken bei längeren Ladezeiten */
.haupt { position: relative; }
main.inhalt.wird-aufgebaut { position: absolute; left: 0; right: 0; visibility: hidden; pointer-events: none; }
main.inhalt[inert] { transition: opacity .2s .25s; }
body.seite-laedt main.inhalt[inert] { opacity: .55; }
body.seite-laedt::before { content: ''; position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 9999; background: linear-gradient(90deg, transparent, var(--umsatz), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: ladebalken 1s linear infinite; }
@keyframes ladebalken { from { background-position: -40% 0; } to { background-position: 140% 0; } }
main.inhalt.seite-neu { animation: seite-ein .18s ease-out; }
@keyframes seite-ein { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { main.inhalt.seite-neu { animation: none; } body.seite-laedt::before { animation: none; background: var(--umsatz); opacity: .5; } }
.bank-meldungen { border-color: var(--orange); }
.meldung-zeile { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--linie); }
.meldung-zeile .badge { flex: none; margin-top: 2px; }
.meldung-text { flex: 1; min-width: 0; }
.meldung-zeile .aktionen { flex: none; }
@media (max-width: 700px) { .meldung-zeile { flex-wrap: wrap; } .meldung-zeile .aktionen { width: 100%; justify-content: flex-end; } }
.ka-link { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin: 6px 0; padding: 12px; border: 1px solid var(--linie); border-radius: 10px; background: var(--grau-weich); }
.ka-qr svg { width: 140px; height: 140px; background: #fff; border-radius: 6px; display: block; }
.ka-zeile { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.ka-zeile input { flex: 1; min-width: 200px; font-size: 12px; }
.sort-wahl { display: inline-flex; align-items: center; gap: 6px; }
.sort-wahl select { width: auto; }
.sort-wahl .btn.icon { min-width: 38px; font-size: 16px; font-weight: 700; }
.dok-notiz { color: var(--text-2); margin-top: 2px; } .dok-notiz svg { width: 12px; height: 12px; vertical-align: -1px; }
.pa-quellpos { margin-top: 8px; max-height: 260px; overflow: auto; border: 1px solid var(--linie); border-radius: 8px; }
.pa-quellpos:empty { display: none; }
.pa-quell-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--linie); background: var(--grau-weich); position: sticky; top: 0; }
.pa-quell-zeile { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--linie); cursor: pointer; font-size: 14px; }
.pa-quell-zeile:last-child { border-bottom: 0; }
.pa-quell-zeile input { width: 16px; min-height: 0; }
.dv-status { display: flex; gap: 24px; flex-wrap: wrap; }
.dv-status > div { display: flex; flex-direction: column; gap: 2px; }
.dv-zeilen { margin: 0 14px 12px; } .dv-zeilen summary { cursor: pointer; color: var(--navy-text, var(--navy)); font-weight: 600; margin-bottom: 8px; }
.dv-zeilen .tabelle-wrap { max-height: 50vh; overflow: auto; }

/* Alternativpositionen (Angebote) */
tr.alternativ-zeile > td { background: var(--orange-weich); }
tr.alternativ-zeile > td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
.btn.icon.klein.aktiv[data-alternativ] { background: var(--orange); color: #fff; }
[data-alternativ] { font-size: 11px; font-weight: 700; }
.alt-wahl { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.alt-wahl-zeile { white-space: normal; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--linie-2); border-radius: 8px; }
.ke-stati { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 4px 0; }
/* GAEB-Leistungsverzeichnis: Titelzeilen in der Positionsliste, Export-Knöpfe */
tr.lv-titel > td { font-weight: 700; background: var(--flaeche-2, rgba(127,127,127,.08)); font-size: 13px; }
.gaeb-export { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }

/* Vertrieb & CRM */
.crm-pipeline { display: flex; gap: 10px; overflow-x: auto; padding: 12px; align-items: flex-start; }
.crm-spalte { flex: 0 0 250px; background: var(--grau-weich); border-radius: var(--radius); display: flex; flex-direction: column; max-height: calc(100vh - 330px); min-height: 160px; }
.crm-spalte.abgeschlossen { flex-basis: 210px; opacity: .92; }
.crm-spalte.ziel { outline: 2px dashed var(--navy); outline-offset: -2px; }
.crm-spalte-kopf { padding: 9px 10px 8px; border-top: 4px solid var(--phase); border-radius: var(--radius) var(--radius) 0 0; }
.crm-spalte-inhalt { padding: 0 8px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.crm-leer { text-align: center; padding: 18px 6px; border: 1px dashed var(--linie-2); border-radius: 8px; }
.crm-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 8px 10px; cursor: pointer; box-shadow: var(--schatten); }
.crm-karte[draggable="true"] { cursor: grab; }
.crm-karte.zieht { opacity: .45; }
.crm-karte:hover, .crm-karte:focus-visible { border-color: var(--navy); outline: none; }
.crm-karte-kopf { display: flex; justify-content: space-between; gap: 6px; align-items: flex-start; font-size: 13px; }
.crm-karte .sub { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.crm-karte-werte { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: 12px; }
.crm-karte-werte svg.i { width: 12px; height: 12px; vertical-align: -1px; }
.crm-naechster { margin-top: 6px; font-size: 12px; color: var(--text-2); background: var(--hover); border-radius: 6px; padding: 4px 6px; }
.crm-naechster.faellig { background: var(--rot-weich); color: var(--rot); }
.crm-naechster svg.i { width: 12px; height: 12px; vertical-align: -1px; }
.crm-karte-fuss { display: flex; justify-content: space-between; margin-top: 6px; }
.crm-phase-punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--phase); margin-right: 6px; vertical-align: 0; }
.crm-detail { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.crm-akt-form { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--linie); }
.crm-akt-form .segment { flex-wrap: wrap; }
.crm-akt-form .segment label { padding: 5px 10px; font-size: 12px; font-weight: 600; color: var(--text-2); cursor: pointer; display: inline-flex; gap: 4px; align-items: center; border-right: 1px solid var(--linie-2); }
.crm-akt-form .segment input { display: none; }
.crm-akt-form .segment label:has(input:checked) { background: var(--navy); color: #fff; }
.crm-akt-form .segment svg.i { width: 13px; height: 13px; }
.crm-akt-zeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.crm-akt-zeile label { display: flex; flex-direction: column; gap: 2px; }
.crm-akt-zeile .btn { margin-left: auto; }
.crm-zeitstrahl { padding: 6px 14px 12px; }
.crm-akt { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.crm-akt:last-child { border-bottom: 0; }
.crm-akt-icon { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--grau-weich); display: grid; place-items: center; }
.crm-akt-icon svg.i { width: 14px; height: 14px; }
.crm-akt.phase .crm-akt-icon, .crm-akt.system .crm-akt-icon { background: transparent; color: var(--text-3); }
.crm-akt.phase .crm-akt-text, .crm-akt.system .crm-akt-text { color: var(--text-2); font-size: 13px; }
.crm-akt.offen .crm-akt-icon { background: var(--amber-weich); color: var(--navy-text); }
.crm-akt.faellig .crm-akt-icon { background: var(--rot-weich); color: var(--rot); }
.crm-akt-inhalt { flex: 1; min-width: 0; }
.crm-akt-text { margin-top: 2px; overflow-wrap: anywhere; }
.crm-akt-aktionen { display: flex; gap: 4px; align-items: flex-start; }
.crm-balken { position: relative; height: 10px; min-width: 90px; background: var(--grau-weich); border-radius: 5px; overflow: hidden; }
.crm-balken span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; }
.crm-balken .voll { background: var(--blau-weich); } .crm-balken .gew { background: var(--navy); }
@media (max-width: 900px) { .crm-detail { grid-template-columns: 1fr; } .crm-spalte { flex-basis: 78vw; max-height: none; } }
.crm-detail .summenblock { width: auto; max-width: 100%; margin: 0; padding: 12px 16px; }
.crm-detail .summenblock div.muted.klein { display: block; }

/* Projektcockpit (Web und Projekt-App) */
.cp-ampel { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--plan); box-shadow: 0 0 0 3px var(--grau-weich); vertical-align: -1px; }
.cp-ampel.rot { background: var(--rot); box-shadow: 0 0 0 3px var(--rot-weich); }
.cp-ampel.gelb { background: #e0a000; box-shadow: 0 0 0 3px var(--gelb-weich); }
.cp-ampel.gruen { background: var(--gruen); box-shadow: 0 0 0 3px var(--gruen-weich); }
.cp-karte .karte-kopf .btn { margin-left: auto; }
.cp { padding: 0 0 4px; }
.cp-kopf { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--linie); }
.cp-kopf.rot { background: var(--rot-weich); } .cp-kopf.gelb { background: var(--gelb-weich); } .cp-kopf.gruen { background: var(--gruen-weich); }
.cp-gesamt { display: flex; align-items: center; gap: 12px; }
.cp-gesamt .cp-ampel { width: 18px; height: 18px; }
.cp-ampeln { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.cp-ampel-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.cp-ampel-chip.klein { font-size: 12px; font-weight: 500; } .cp-ampel-chip.klein .cp-ampel { width: 9px; height: 9px; box-shadow: none; }
.cp-raster { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0; }
.cp-raster > .cp-spalte + .cp-spalte { border-left: 1px solid var(--linie); }
.cp-block { padding: 12px 16px; border-bottom: 1px solid var(--linie); }
.cp-spalte .cp-block:last-child { border-bottom: 0; }
.cp-block h3 { margin: 0 0 8px; font-size: 13px; display: flex; align-items: center; gap: 6px; color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; }
.cp-block h3 svg.i { width: 15px; height: 15px; }
.cp-empfehlungen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cp-empfehlungen li > a, .cp-empfehlungen li > div { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--linie); border-left-width: 4px; color: inherit; text-decoration: none; background: var(--flaeche); }
.cp-empfehlungen li.rot > * { border-left-color: var(--rot); } .cp-empfehlungen li.gelb > * { border-left-color: #e0a000; } .cp-empfehlungen li.blau > * { border-left-color: var(--blau); }
.cp-empfehlungen li > a:hover { background: var(--hover); }
.cp-empfehlungen li > a > svg.i { margin-left: auto; flex: none; color: var(--text-3); width: 14px; height: 14px; margin-top: 3px; }
.cp-stufe { flex: none; display: inline-flex; flex-direction: column; align-items: center; gap: 1px; width: 44px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.cp-stufe svg.i { width: 16px; height: 16px; }
.cp-stufe.rot { color: var(--rot); } .cp-stufe.gelb { color: var(--gelb-text); } .cp-stufe.blau { color: var(--blau); }
.cp-empf-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.cp-empf-text .muted { overflow-wrap: anywhere; }
.cp-bereich { font-size: 11px; color: var(--text-3); }
.cp-mehr { padding: 2px 10px; }
.cp-leer { padding: 10px 2px; color: var(--gruen); display: flex; gap: 6px; align-items: center; }
.cp-fortschritt { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--linie); }
.cp-fs-zahl { font-size: 28px; font-weight: 700; line-height: 1.1; }
.cp-fs-teile { display: flex; flex-direction: column; gap: 7px; }
.cp-fs-teil > div:first-child { display: flex; justify-content: space-between; margin-bottom: 2px; }
.cp-balken { height: 7px; border-radius: 4px; background: var(--grau-weich); overflow: hidden; margin-top: 3px; }
.cp-balken span { display: block; height: 100%; background: var(--navy); border-radius: 4px; }
.cp-balken.zeit span { background: var(--plan); } .cp-balken.gelb span { background: #e0a000; } .cp-balken.rot span { background: var(--rot); }
.cp-liste { list-style: none; margin: 0 0 6px; padding: 0; }
.cp-liste li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; padding: 4px 0; border-bottom: 1px dashed var(--linie); font-size: 13px; }
.cp-liste li:last-child { border-bottom: 0; }
.cp-liste a { color: inherit; }
.cp-zahlen { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; margin-bottom: 6px; }
.cp-werte { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0 0 6px; font-size: 13px; }
.cp-werte dt { color: var(--text-2); } .cp-werte dd { margin: 0; text-align: right; }
.cp-stand { padding: 8px 16px; }
.cp-projekte { display: flex; flex-direction: column; gap: 10px; }
.cp-projekt { background: var(--flaeche); border: 1px solid var(--linie); border-left: 5px solid var(--plan); border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--schatten); }
.cp-projekt.rot { border-left-color: var(--rot); } .cp-projekt.gelb { border-left-color: #e0a000; } .cp-projekt.gruen { border-left-color: var(--gruen); }
.cp-projekt-kopf { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.cp-projekt-titel { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cp-zahlen-klein { display: flex; gap: 4px; }
.cp-zahl { min-width: 22px; text-align: center; font-size: 12px; font-weight: 700; padding: 1px 6px; border-radius: 10px; }
.cp-zahl.rot { background: var(--rot-weich); color: var(--rot); } .cp-zahl.gelb { background: var(--gelb-weich); color: var(--gelb-text); } .cp-zahl.blau { background: var(--blau-weich); color: var(--blau); }
.cp-projekt-zeile { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.cp-projekt .cp-empfehlungen { margin-top: 8px; }
@media (max-width: 900px) {
  .cp-raster { grid-template-columns: 1fr; } .cp-raster > .cp-spalte + .cp-spalte { border-left: 0; border-top: 1px solid var(--linie); }
  .cp-fortschritt { grid-template-columns: 1fr; }
}
/* Projekt-App: Cockpit als eigene Kachel */
.cp-mobil { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.cp-mobil .cp-raster { grid-template-columns: 1fr; } .cp-mobil .cp-raster > .cp-spalte + .cp-spalte { border-left: 0; border-top: 1px solid var(--linie); }
.cp-mobil .cp-fortschritt { grid-template-columns: 1fr; }
.cp-mobil .cp-block, .cp-mobil .cp-kopf, .cp-mobil .cp-fortschritt { padding-left: 12px; padding-right: 12px; }
/* Bauleitung (Web): Mängel und Bautagebuch */
.bl-web-fotos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.bl-web-fotos a { width: 54px; height: 54px; border-radius: 6px; overflow: hidden; border: 1px solid var(--linie); display: grid; place-items: center; background: var(--grau-weich); }
.bl-web-fotos img { width: 100%; height: 100%; object-fit: cover; }
.bl-web-tage { display: flex; flex-direction: column; }
.bl-web-tag { padding: 12px 16px; border-bottom: 1px solid var(--linie); display: flex; flex-direction: column; gap: 4px; }
.bl-web-tag-kopf { display: flex; gap: 10px; align-items: center; } .bl-web-tag-kopf .btn { margin-left: auto; }
.bl-vorort { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bl-vorort img { max-height: 60px; background: #fff; border: 1px solid var(--linie); border-radius: 6px; }
.bl-web-fotowahl { display: flex; flex-wrap: wrap; gap: 6px; }
.bl-web-fotowahl label { position: relative; width: 90px; height: 90px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; cursor: pointer; }
.bl-web-fotowahl label:has(input:checked) { border-color: var(--navy); }
.bl-web-fotowahl img { width: 100%; height: 100%; object-fit: cover; }
.bl-web-fotowahl input { position: absolute; top: 4px; left: 4px; }
/* Zahlungsvorschlag: Erinnerungen und Zahlungsavise */
.zv-liste { list-style: none; margin: 0; padding: 0 16px; }
.zv-liste li { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.zv-liste li:last-child { border-bottom: 0; }
.zv-liste li.hoch b { color: var(--orange); } .zv-liste li.ueber b { color: var(--rot); }
.zv-liste .nowrap { display: flex; gap: 6px; }
.zv-avise { display: flex; flex-direction: column; gap: 3px; }
.zv-avise > div { display: flex; align-items: center; gap: 4px; }
/* CRM-Karte im Angebot */
.crm-beleg-aktionen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.crm-beleg-vorschlaege { list-style: none; margin: 8px 0 0; padding: 0; }
.crm-beleg-vorschlaege li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--linie); }
.crm-beleg-phasen { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.crm-beleg-phasen button { font: inherit; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--linie-2); border-left: 4px solid var(--phase); background: var(--flaeche); color: var(--text-2); cursor: pointer; }
.crm-beleg-phasen button.an { background: var(--navy); color: #fff; border-color: var(--navy); border-left-color: var(--phase); }
.crm-beleg-phasen button:disabled { cursor: default; }
.crm-beleg-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: 13px; }
.crm-beleg-zeile svg.i { width: 13px; height: 13px; vertical-align: -2px; }
.crm-beleg-schnell { display: grid; grid-template-columns: 110px minmax(0, 1fr) 190px auto; gap: 6px; margin-top: 10px; }
.crm-beleg-letzte { margin-top: 8px; }
.crm-beleg-fuss { display: flex; gap: 6px; margin-top: 10px; }
.crm-verknuepfen { display: flex; gap: 6px; padding: 10px 16px; }
.crm-verknuepfen select { flex: 1; }
@media (max-width: 700px) { .crm-beleg-schnell { grid-template-columns: 1fr; } }

/* Neuer Einsatz (geführt) */
.en-raster { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.en-seite { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; }
.en-seite .hinweis-box { margin: 0; }
.en-nr { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 13px; margin-right: 6px; vertical-align: 1px; }
.en-label { font-size: 12px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; margin: 12px 0 6px; }
.en-label:first-child { margin-top: 0; }
.en-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.en-chip { font: inherit; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--linie-2); background: var(--flaeche); color: var(--text-2); cursor: pointer; }
.en-chip svg.i { width: 14px; height: 14px; }
.en-chip:hover { border-color: var(--navy); color: var(--navy-text); }
.en-chip.an { background: var(--navy); border-color: var(--navy); color: #fff; }
.en-chip.an .muted { color: #dfe4ff; }
.en-chip:disabled { opacity: .45; cursor: default; }
.en-chip.prio-hoch.an { background: var(--orange); border-color: var(--orange); }
.en-chip.prio-notfall.an { background: var(--rot); border-color: var(--rot); }
.en-mehr { margin-top: 12px; }
.en-mehr summary { cursor: pointer; font-size: 13px; color: var(--text-2); padding: 4px 0; }
.en-mehr summary svg.i { width: 14px; height: 14px; vertical-align: -2px; }
.en-mehr > select, .en-mehr > textarea, .en-mehr > .such-auswahl { margin-top: 6px; }
.en-zeit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.en-zeit input[type=date], .en-zeit input[type=time] { max-width: 180px; }
.en-leute.laedt { opacity: .5; pointer-events: none; }
.en-leute { transition: opacity .15s; min-height: 72px; }
.en-leute { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.en-person { font: inherit; text-align: left; display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border-radius: 10px;
  border: 1.5px solid var(--linie-2); background: var(--flaeche); color: var(--text); cursor: pointer; }
.en-person:hover { border-color: var(--navy); }
.en-person.an { border-color: var(--navy); background: var(--blau-weich); box-shadow: 0 0 0 2px var(--navy) inset; }
.en-person.spaeter { border-style: dashed; }
.en-name { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.en-name svg.i { width: 15px; height: 15px; }
.en-balken { height: 6px; border-radius: 3px; background: var(--grau-weich); display: flex; overflow: hidden; }
.en-balken span { background: var(--gruen); }
.en-balken span.neu { background: var(--navy); opacity: .55; }
.en-balken.voll span { background: var(--rot); }
.en-std { font-size: 12px; color: var(--text-2); }
.en-tagliste { list-style: none; margin: 0; padding: 0; font-size: 11.5px; color: var(--text-3); }
.en-tagliste li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.en-konflikte { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.en-konflikte > div { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; border-radius: 8px; font-size: 13px; }
.en-konflikte > div svg.i { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.en-konflikte .rot { background: var(--rot-weich); color: var(--rot); }
.en-konflikte .gelb { background: var(--gelb-weich); color: var(--gelb-text); }
.en-fuss { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: sticky; bottom: 0; z-index: 3; padding: 12px 16px; border-radius: var(--radius);
  background: var(--flaeche); border: 1px solid var(--linie); box-shadow: 0 -4px 14px rgba(0, 0, 0, .06); }
.en-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.en-check input { width: auto; }
.btn.gross { padding: 10px 18px; font-size: 15px; }
.en-info { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.en-info svg.i { width: 13px; height: 13px; vertical-align: -2px; }
.en-liste { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; }
.en-liste li { padding: 4px 0; }
.en-letzte { margin: 0; padding: 6px 16px 10px; }
.en-letzte li { border-bottom: 1px solid var(--linie); padding: 7px 0; }
.en-letzte li:last-child { border-bottom: 0; }
.en-vorg { border-color: var(--navy); }
.en-benoetigt { display: flex; gap: 6px; margin: 6px 0; padding: 8px 10px; border-radius: 8px; background: var(--gelb-weich); color: var(--gelb-text); font-size: 13px; white-space: pre-line; }
.en-benoetigt svg.i { width: 14px; height: 14px; flex: none; margin-top: 2px; }
@media (max-width: 1100px) { .en-raster { grid-template-columns: 1fr; } .en-seite { position: static; } }
#enWarn .hinweis-box { margin: 10px 0 0; }
@media (max-width: 700px) { .en-zeit { grid-template-columns: 1fr; } .en-leute { grid-template-columns: 1fr; } }

/* Rückmeldung Monteur (Einsatz im Büro) */
.rm-karte.gruen { border-left: 4px solid var(--gruen); } .rm-karte.orange { border-left: 4px solid var(--orange); } .rm-karte.rot { border-left: 4px solid var(--rot); }
.rm-ergebnis { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.rm-erg { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 10px; font-size: 14px; }
.rm-erg svg.i { width: 22px; height: 22px; flex: none; }
.rm-erg.gruen { background: var(--gruen-weich); color: var(--gruen); } .rm-erg.orange { background: var(--orange-weich); color: var(--orange); } .rm-erg.rot { background: var(--rot-weich); color: var(--rot); }
.rm-erg div div { color: var(--text); font-size: 13px; }
.rm-feld { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; font-size: 13px; }
.rm-bedarf { margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: var(--rot-weich); color: var(--rot); font-size: 13px; }
.rm-erledigt { margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: var(--gruen-weich); color: var(--gruen); font-size: 13px; }
.rm-bedarf svg.i, .rm-erledigt svg.i, .rm-stand svg.i { width: 14px; height: 14px; vertical-align: -2px; }
.rm-bericht { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--grau-weich); font-size: 13.5px; line-height: 1.5; }
.rm-unten { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 12px; }
.rm-stand { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--text-2); }
.rm-unterschrift img { max-height: 60px; background: #fff; border: 1px solid var(--linie); border-radius: 6px; display: block; }
.rm-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linie); }

/* Bank: Beleg zum Umsatz */
.dropzone.klein-dz { padding: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.dropzone.gewaehlt { border-style: solid; border-color: var(--gruen); background: var(--gruen-weich); color: var(--text); }
.beleg-neu-hinweis { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: var(--radius); background: var(--grau-weich); font-size: 13.5px; }
.beleg-neu-hinweis > svg.i { width: 20px; height: 20px; flex: none; color: var(--navy-text); margin-top: 2px; }
.beleg-neu-hinweis .btn { margin-top: 8px; }
/* Zeiterfassung: Buchung auf mehrere Projekte aufteilen */
.ze-teile { display: flex; flex-direction: column; gap: 8px; }
.ze-teil { display: grid; grid-template-columns: 22px minmax(180px, 2fr) minmax(140px, 1.3fr) 80px minmax(120px, 1.3fr) 32px; gap: 6px; align-items: center; }
.ze-teil-nr { color: var(--text-3); font-weight: 600; text-align: right; }
.ze-teil [data-t=stunden] { text-align: right; }
.ze-teile-fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .ze-teil { grid-template-columns: 22px 1fr 72px 32px; padding-bottom: 8px; border-bottom: 1px solid var(--linie); }
  .ze-teil-nr, .ze-teil [data-t=projekt], .ze-teil [data-t=stunden], .ze-teil [data-t=weg] { grid-row: 1; }
  .ze-teil [data-t=auftrag], .ze-teil [data-t=taetigkeit] { grid-column: 2 / -1; }
}
/* Bautagebuch: Beteiligte, verbautes Material, Unterschrift Bautagebuchführer */
.btb-zeilen { display: flex; flex-direction: column; gap: 6px; }
.btb-zeile { display: grid; gap: 6px; align-items: start; }
.btb-bet { grid-template-columns: 1.2fr 1.2fr 1.2fr 64px 32px; }
.btb-mat { grid-template-columns: 1fr 90px 70px 32px; }
.btb-mat-was { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.btb-add { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.btb-add input { flex: 1; min-width: 180px; }
.btb-sig-fuss { display: flex; gap: 6px; margin-top: 6px; align-items: center; }
.btb-sig-fuss input { flex: 1; }
.btb-sig-alt { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.btb-sig-alt img { max-height: 48px; background: #fff; border: 1px solid var(--linie); border-radius: 6px; }
.modal .signatur, .formular .signatur { width: 100%; height: 160px; border: 2px dashed var(--linie-2, var(--linie)); border-radius: 12px; background: #fff; touch-action: none; display: block; }
@media (max-width: 720px) {
  .btb-bet { grid-template-columns: 1fr 1fr 32px; }
  .btb-bet [data-k=rolle] { grid-column: 1; } .btb-bet [data-k=anzahl] { grid-column: 2; }
  .btb-bet [data-weg] { grid-column: 3; grid-row: 1; }
  .btb-mat { grid-template-columns: 1fr 72px 32px; }
  .btb-mat .btb-mat-was { grid-column: 1 / -1; } .btb-mat [data-k=einheit] { grid-column: 2; grid-row: 2; } .btb-mat [data-k=menge] { grid-column: 1; grid-row: 2; } .btb-mat [data-weg] { grid-column: 3; grid-row: 2; }
}

/* Karte (Projekte und Einsätze) */
.ka-filter { margin-bottom: 12px; }
.ka-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ka-zeile + .ka-zeile { margin-top: 10px; }
.ka-zeile .papp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ka-titel { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; min-width: 96px; }
.ka-chip { display: inline-flex; align-items: center; gap: 6px; }
.ka-chip i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ka-chip.an i { box-shadow: 0 0 0 2px #fff; }
.ka-wrap { position: relative; }
.ka-karte { height: calc(100vh - 290px); min-height: 380px; border-radius: 10px; border: 1px solid var(--linie); overflow: hidden; z-index: 0; }
.ka-hinweis { margin-top: 6px; }
.ka-icon { background: none; border: 0; }
.ka-pin { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--f); color: #fff; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.ka-pin.einsatz { border-radius: 50%; }
.ka-pin.projekt { border-radius: 6px; }
.ka-pin.ungefaehr { border-style: dashed; opacity: .8; }
.ka-pin .i { width: 15px; height: 15px; }
.ka-popup { display: grid; gap: 3px; min-width: 200px; font-size: 13px; }
.ka-popup a { color: var(--blau); text-decoration: none; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--flaeche); color: var(--text); }
@media (max-width: 700px) { .ka-karte { height: 60vh; } .ka-titel { min-width: 0; } }

/* Rabatt am Ende des Vorgangs */
.gesamtrabatt { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 6px 0; }
.gesamtrabatt label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.gesamtrabatt #grWert { width: 110px; text-align: right; }
.gesamtrabatt #grArt { width: 92px; }
.gesamtrabatt #grText { width: 230px; }
.summenblock .rabatt-zeile { color: var(--gruen, #16a34a); gap: 12px; }
.summenblock { width: min(400px, 100%); }
.summenblock .mono { white-space: nowrap; }
@media (max-width: 700px) { .gesamtrabatt { justify-content: stretch; } .gesamtrabatt #grText { width: 100%; } }