/* MW Cockpit – Gestaltung: dunkle Seitenleiste, weiße Kopfzeile, gelber Akzent, Inter/Systemschrift. */
:root {
  --g0:#fff; --g50:#fafafa; --g100:#f4f5f5; --g200:#e4e6e7; --g300:#d4d7d8; --g400:#a1a7aa; --g500:#71777a; --g600:#52585b; --g700:#3f4446; --g800:#26292a; --g900:#1a1a1a;
  --gelb:#ffe600; --gelb6:#d1aa00; --gelb1:#faffc1; --rot:#f83b3b; --rot4:#ff6e6e; --rot7:#c11414; --gruen:#5acc29; --gruen7:#307318; --blau:#006ff5; --blau6:#0688ff; --lila:#775cff;
  --leiste:#000000; --leiste-text:#a1a1aa; --leiste-aktiv:#fafafa;
  --radius:8px; --radius-k:6px; --schatten:0 4px 16px rgba(0,0,0,.12);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin:0; height:100%; }
body { background: var(--g200); color: var(--g900); font-size: 14px; }
a { color: var(--blau); text-decoration: none; }
a:hover { color: var(--blau6); text-decoration: underline; }
button { font: inherit; cursor: pointer; }
kbd { font-size: 11px; border:1px solid var(--g300); border-radius:4px; padding:0 4px; color:var(--g500); margin-left:8px; }

#shell { display:flex; height:100vh; }
#seitenleiste { width:255px; flex:none; background:var(--leiste); color:var(--leiste-text); overflow-y:auto; padding:12px 8px 24px; transition: width .15s; }
#shell.zu #seitenleiste { width:0; padding:0; overflow:hidden; }
.marke { display:block; margin:-12px -8px 10px; padding:6px 8px 4px; background:#000; text-decoration:none; }
.marke img { display:block; width:100%; max-width:230px; height:auto; margin:0 auto; }
.marke:hover { text-decoration:none; filter:brightness(1.08); }
.nav a, .nav button.gruppe { display:flex; align-items:center; gap:8px; width:100%; padding:7px 10px; border-radius:6px; color:var(--leiste-text); background:none; border:0; text-align:left; font-size:13.5px; text-decoration:none; }
.nav a:hover, .nav button.gruppe:hover { background:#27272a; color:#e4e4e7; }
.nav a.aktiv { color:var(--leiste-aktiv); font-weight:500; background:#27272a; }
.nav .unter { padding-left:14px; }
.nav .unter[hidden] { display:none; }
.nav .pfeil { margin-left:auto; font-size:10px; transition: transform .15s; }
.nav .offen > .pfeil { transform: rotate(90deg); }
.nav .zahl { margin-left:auto; font-size:11px; background:#3f3f46; color:#e4e4e7; border-radius:9px; padding:0 7px; }
.nav .zahl.rot { background:var(--rot7); }
.nav hr { border:0; border-top:1px solid #27272a; margin:8px 4px; }

#rechts { flex:1; display:flex; flex-direction:column; min-width:0; }
#kopf { height:64px; flex:none; background:#fff; display:flex; align-items:center; gap:12px; padding:0 16px; border-bottom:1px solid var(--g300); }
.suche-feld { flex:0 1 420px; margin:0 auto; text-align:left; border:1px solid var(--g300); border-radius:var(--radius-k); background:var(--g50); padding:8px 12px; color:var(--g500); }
.kopf-rechts { display:flex; align-items:center; gap:8px; }
.icon { background:none; border:0; font-size:18px; padding:6px 8px; border-radius:6px; position:relative; }
.icon:hover { background:var(--g100); }
.zaehler { position:absolute; top:0; right:0; background:var(--rot); color:#fff; font-size:10px; border-radius:8px; padding:0 5px; }
.profil { width:34px; height:34px; border-radius:50%; border:0; background:var(--g800); color:#fff; font-weight:600; }
.menue-halter { position:relative; }
.menue { position:absolute; right:0; top:calc(100% + 6px); background:#fff; border:1px solid var(--g300); border-radius:var(--radius); box-shadow:var(--schatten); min-width:200px; z-index:50; padding:6px; }
.menue.breit { width:360px; max-height:480px; overflow:auto; }
.menue button, .menue a { display:block; width:100%; text-align:left; padding:8px 10px; border:0; background:none; border-radius:6px; color:var(--g900); }
.menue button:hover, .menue a:hover { background:var(--g100); text-decoration:none; }
.menue .trenn { border-top:1px solid var(--g200); margin:4px 0; }

#inhalt { flex:1; overflow:auto; padding:20px 24px 80px; outline:none; }
.seitenkopf { display:flex; align-items:flex-end; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.seitenkopf h1 { font-size:26px; font-weight:300; margin:0; }
.seitenkopf .unterzeile { color:var(--g600); font-size:13px; margin-top:2px; }
.seitenkopf .aktionen { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }

.btn { border:1px solid transparent; border-radius:var(--radius-k); padding:7px 12px; background:var(--g200); color:var(--g900); font-size:13.5px; line-height:1.2; white-space:nowrap; }
.btn:hover { filter:brightness(.96); }
.btn.primaer { background:var(--g900); color:#fff; }
.btn.gelb { background:var(--gelb); color:#000; }
.btn.rot { background:var(--rot4); color:#fff; }
.btn.gruen { background:var(--gruen7); color:#fff; }
.btn.rand { background:#fff; border-color:var(--g300); }
.btn.klein { padding:3px 8px; font-size:12px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

.karte { background:#fff; border-radius:var(--radius); padding:16px; border:1px solid var(--g300); }
.karte h2 { font-size:15px; margin:0 0 10px; font-weight:600; }
.raster { display:grid; gap:16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.kennzahl { font-size:28px; font-weight:600; }
.klein-grau { color:var(--g500); font-size:12px; }

/* Listen */
.liste-werkzeug { display:flex; gap:8px; align-items:center; margin-bottom:6px; flex-wrap:wrap; font-size:12.5px; color:var(--g600); }
.liste-werkzeug .gruppe-aktionen { display:flex; gap:6px; align-items:center; }
td.aktionen-spalte, th.aktionen-spalte { width:36px; text-align:right; white-space:nowrap; }
td.aktionen-spalte .menue { right:0; min-width:180px; }
.reiter { display:flex; gap:2px; border-bottom:1px solid var(--g300); margin-bottom:12px; flex-wrap:wrap; }
.reiter button { border:0; background:none; padding:8px 14px; border-bottom:2px solid transparent; color:var(--g600); }
.reiter button.aktiv { border-color:var(--g900); color:var(--g900); font-weight:600; }
table.liste { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--g300); font-size:12.5px; }
table.liste th { background:#eee; font-size:13px; font-weight:600; text-align:left; padding:6px 8px; border-bottom:1px solid var(--g300); white-space:nowrap; cursor:pointer; user-select:none; }
table.liste td { padding:5px 8px; border-bottom:1px solid var(--g200); vertical-align:top; }
table.liste tr.filter td { background:#f7f7f7; padding:4px; }
table.liste tr.filter input, table.liste tr.filter select { width:100%; padding:3px 5px; font-size:12px; border:1px solid var(--g300); border-radius:4px; }
table.liste tbody tr:hover td { background:var(--g50); }
table.liste tr.klickbar { cursor:pointer; }
td.zahl, th.zahl { text-align:right; white-space:nowrap; }
.seiten-steuer { display:flex; gap:8px; align-items:center; justify-content:flex-end; padding:8px 0; color:var(--g600); font-size:12.5px; }
.leer { padding:24px; text-align:center; color:var(--g500); }

.marke-status { display:inline-block; padding:1px 8px; border-radius:10px; font-size:11.5px; background:var(--g200); color:var(--g800); white-space:nowrap; }
.marke-status.gruen { background:#e3f6da; color:var(--gruen7); }
.marke-status.rot { background:#fde2e2; color:var(--rot7); }
.marke-status.blau { background:#dfeeff; color:#0d4d9b; }
.marke-status.gelb { background:var(--gelb1); color:#7a5b00; }

/* Formulare und Dialoge */
label.feld { display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--g700); }
input, select, textarea { font:inherit; font-size:14px; border:1px solid #d4d4d8; border-radius:var(--radius-k); padding:7px 10px; background:#fff; color:var(--g900); min-width:0; }
textarea { min-height:70px; resize:vertical; }
.formular { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.formular .breit { grid-column: 1 / -1; }
.check { display:flex; gap:6px; align-items:center; font-size:13px; }
.dialog-hg { position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:flex-start; justify-content:center; padding:5vh 16px; z-index:100; overflow:auto; }
.dialog { background:#fff; border-radius:var(--radius); width:min(720px, 100%); box-shadow:var(--schatten); display:flex; flex-direction:column; max-height:90vh; }
.dialog.gross { width:min(1100px, 100%); }
.dialog header { padding:14px 18px; border-bottom:1px solid var(--g200); font-size:17px; font-weight:600; display:flex; align-items:center; }
.dialog header button { margin-left:auto; }
.dialog .koerper { padding:16px 18px; overflow:auto; }
.dialog footer { padding:12px 18px; border-top:1px solid var(--g200); display:flex; gap:8px; justify-content:flex-end; }
.fehlerbox { background:#fde2e2; color:var(--rot7); border-radius:6px; padding:8px 10px; margin-bottom:10px; font-size:13px; }
.hinweisbox { background:var(--gelb1); color:#5c4500; border-radius:6px; padding:8px 10px; margin-bottom:10px; font-size:13px; }
#hinweise { position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; z-index:200; }
.toast { background:var(--g900); color:#fff; padding:10px 14px; border-radius:var(--radius); box-shadow:var(--schatten); max-width:420px; font-size:13px; }
.toast.fehler { background:var(--rot7); }

/* Akte (Projekt/Kontakt) */
.akte { display:grid; grid-template-columns: 200px minmax(0,1fr) 320px; gap:16px; align-items:start; }
.akte-nav { background:#fff; border:1px solid var(--g300); border-radius:var(--radius); padding:6px; position:sticky; top:0; }
.akte-nav button { display:flex; width:100%; border:0; background:none; text-align:left; padding:7px 10px; border-radius:6px; color:var(--g700); }
.akte-nav button.aktiv { background:var(--g100); color:var(--g900); font-weight:600; }
.akte-nav .zahl { margin-left:auto; color:var(--g500); font-size:12px; }
.pipeline { display:flex; gap:2px; margin:6px 0 14px; flex-wrap:wrap; }
.pipeline button { border:0; padding:5px 10px; font-size:12px; background:var(--g100); color:var(--g600); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%); padding-left:16px; }
.pipeline button.erreicht { background:#d9d9d9; color:var(--g800); }
.pipeline button.aktuell { background:var(--gelb); color:#000; font-weight:600; }
.zeitstrahl { list-style:none; padding:0; margin:0; }
.zeitstrahl li { border-left:2px solid var(--g300); padding:0 0 12px 14px; position:relative; }
.zeitstrahl li::before { content:""; width:10px; height:10px; border-radius:50%; background:var(--g400); position:absolute; left:-6px; top:3px; }
.zeitstrahl li.notiz::before { background:var(--gelb6); }
.zeitstrahl .wann { color:var(--g500); font-size:11.5px; }
.werte { display:grid; grid-template-columns: 1fr auto; gap:4px 12px; font-size:13px; }
.werte dt { color:var(--g600); } .werte dd { margin:0; text-align:right; font-weight:500; }

/* Dokumenteditor */
.editor { display:grid; grid-template-columns: minmax(0,1fr) 320px; gap:16px; }
.blatt { background:#fff; border:1px solid var(--g300); border-radius:4px; padding:40px 48px; min-height:600px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.blatt h2 { font-size:18px; margin:18px 0 6px; }
.pos-tabelle { width:100%; border-collapse:collapse; font-size:13px; }
.pos-tabelle th { text-align:left; border-bottom:2px solid var(--g800); padding:4px; font-size:12px; }
.pos-tabelle td { border-bottom:1px solid var(--g200); padding:3px 4px; vertical-align:top; }
.pos-tabelle input, .pos-tabelle select { width:100%; padding:3px 5px; font-size:13px; border-color:transparent; }
.pos-tabelle input:hover, .pos-tabelle input:focus { border-color:var(--g300); }
.pos-tabelle tr.titel td { font-weight:700; background:var(--g50); }
.pos-tabelle tr.alternativ td { color:var(--g500); font-style:italic; }
.summenblock { margin-left:auto; width:300px; margin-top:12px; }
.summenblock div { display:flex; justify-content:space-between; padding:3px 0; }
.summenblock .gesamt { border-top:2px solid var(--g800); font-weight:700; }

/* Plantafel */
.plantafel { background:#fff; border:1px solid var(--g300); border-radius:var(--radius); overflow:auto; }
.pt-raster { display:grid; position:relative; min-width:1000px; }
.pt-kopf { position:sticky; top:0; background:#fafafa; z-index:3; border-bottom:1px solid var(--g300); font-size:12px; padding:6px; text-align:center; }
.pt-kopf.we, .pt-zelle.we { background:#f3f3f3; }
.pt-kopf.heute { color:var(--blau); font-weight:700; }
.pt-name-text { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pt-steuerung { display:flex; gap:1px; opacity:0; transition:opacity .1s; }
.pt-name:hover .pt-steuerung, .pt-name:focus-within .pt-steuerung { opacity:1; }
.pt-steuer { border:0; background:none; cursor:pointer; padding:0 3px; font-size:12px; color:var(--g600, #555); line-height:1; }
.pt-steuer:hover:not(:disabled) { color:#000; }
.pt-steuer:disabled { opacity:.3; cursor:default; }
@media (hover: none) { .pt-steuerung { opacity:1; } }
.pt-name { position:sticky; left:0; background:#fff; z-index:2; border-right:1px solid var(--g300); border-bottom:1px solid var(--g200); padding:6px 8px; font-size:12.5px; display:flex; align-items:center; gap:6px; }
.pt-gruppe { grid-column: 1 / -1; background:var(--g100); font-weight:600; font-size:12px; padding:4px 8px; border-bottom:1px solid var(--g300); position:sticky; left:0; }
.pt-zelle { border-right:1px solid var(--g200); border-bottom:1px solid var(--g200); min-height:44px; position:relative; }
.pt-zelle.ueber { background:var(--gelb1); }
.pt-zelle.abwesend { background: repeating-linear-gradient(45deg, #fde2e2, #fde2e2 6px, #fff 6px, #fff 12px); }
.pt-balken { position:absolute; z-index:1; height:20px; border-radius:4px; color:#fff; font-size:11px; padding:2px 6px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; cursor:grab; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.pt-balken.erledigt { opacity:.45; text-decoration:line-through; }
.pt-balken .griff { position:absolute; right:0; top:0; bottom:0; width:7px; cursor:ew-resize; background:rgba(255,255,255,.35); }
.pt-balken.konflikt { outline:2px solid var(--rot); }
.punkt { width:10px; height:10px; border-radius:50%; display:inline-block; flex:none; }

/* Kalender Monat */
.monat { display:grid; grid-template-columns: repeat(7, minmax(0,1fr)); background:#fff; border:1px solid var(--g300); border-radius:var(--radius); overflow:hidden; }
.monat .tk { background:#fafafa; font-size:12px; padding:6px; text-align:center; border-bottom:1px solid var(--g300); font-weight:600; }
.monat .tag { min-height:110px; border-right:1px solid var(--g200); border-bottom:1px solid var(--g200); padding:4px; font-size:11.5px; }
.monat .tag.fremd { background:#fafafa; color:var(--g400); }
.monat .tag.heute .nr { background:var(--blau); color:#fff; border-radius:10px; padding:0 6px; }
.monat .eintrag { border-radius:3px; color:#fff; padding:1px 4px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.monat .eintrag.abw { background:var(--rot); }

.rechte td select { font-size:12px; padding:2px 4px; }
.balkendiagramm { display:flex; align-items:flex-end; gap:6px; height:160px; padding-top:10px; }
.balkendiagramm .b { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:10.5px; color:var(--g500); }
.balkendiagramm .b i { width:100%; background:var(--g800); border-radius:3px 3px 0 0; display:block; min-height:1px; }
.balkendiagramm .b i.u { background:var(--gruen7); }

.suche-dialog input { width:100%; font-size:16px; padding:10px 12px; }
.suche-treffer { list-style:none; margin:8px 0 0; padding:0; }
.suche-treffer li a { display:block; padding:8px 10px; border-radius:6px; color:var(--g900); }
.suche-treffer li a.aktiv, .suche-treffer li a:hover { background:var(--g100); text-decoration:none; }
.suche-treffer mark { background:var(--gelb); }

@media (max-width: 900px) {
  #seitenleiste { position:fixed; z-index:60; height:100%; }
  #shell:not(.offen-mobil) #seitenleiste { width:0; padding:0; }
  .akte, .editor { grid-template-columns: 1fr; }
  .akte-nav { position:static; display:flex; overflow:auto; }
  .formular { grid-template-columns: 1fr; }
  #inhalt { padding:16px; }
  .suche-feld kbd { display:none; }
  .liste-scroll { overflow-x:auto; padding-bottom:140px; margin-bottom:-140px; }
}
@media print {
  #seitenleiste, #kopf, .seitenkopf .aktionen, .editor > aside { display:none !important; }
  #inhalt { padding:0; overflow:visible; }
  body { background:#fff; }
  .blatt { border:0; box-shadow:none; }
}

/* Auswertungen */
.aw-filter { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 12px; }
.aw-filter select, .aw-filter input { max-width:190px; }
.aw-legende { display:flex; gap:14px; font-size:12px; color:var(--g600); margin-bottom:6px; }
.aw-legende span { display:inline-flex; align-items:center; gap:5px; }
.aw-saeulen { display:flex; align-items:stretch; gap:2px; height:150px; padding-top:4px; }
.aw-spalte { flex:1 1 0; min-width:0; display:flex; flex-direction:column; cursor:default; }
.aw-spalte:hover .aw-teil { filter:brightness(1.12); }
.aw-stapel { flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:2px; border-bottom:1px solid var(--g300); }
.aw-teil { width:100%; min-height:2px; }
.aw-teil.oben { border-radius:4px 4px 0 0; }
.aw-achse { font-size:10px; color:var(--g500); text-align:center; padding-top:3px; white-space:nowrap; overflow:hidden; }
.aw-balken { display:inline-flex; align-items:center; gap:6px; min-width:140px; }
.aw-balken-spur { flex:1; height:8px; background:var(--g100); border-radius:4px; overflow:hidden; }
.aw-balken-spur span { display:block; height:100%; border-radius:0 4px 4px 0; }
.aw-balken-wert { font-variant-numeric:tabular-nums; font-size:12px; min-width:48px; text-align:right; }

/* Dateiablage */
.ab-galerie { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:10px; margin-bottom:12px; }
.ab-bild { margin:0; background:var(--g0); border:1px solid var(--g200); border-radius:8px; overflow:hidden; display:flex; flex-direction:column; }
.ab-bild-knopf { border:0; padding:0; background:var(--g100); cursor:zoom-in; aspect-ratio:4/3; }
.ab-bild-knopf img { width:100%; height:100%; object-fit:cover; display:block; }
.ab-bild figcaption { font-size:12px; padding:4px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ab-bild-aktionen { display:flex; gap:4px; padding:0 6px 6px; }

/* Anmeldung */
#anmeldung { min-height:100vh; display:grid; place-items:center; padding:16px; background:#000; }
.anmelde-karte { width:100%; max-width:380px; background:#fff; border-radius:var(--radius); box-shadow:var(--schatten); padding:28px 24px; }
.anmelde-marke { background:#000; margin:-28px -24px 20px; padding:14px 24px 8px; border-radius:var(--radius) var(--radius) 0 0; }
.anmelde-marke img { display:block; width:100%; max-width:300px; height:auto; margin:0 auto; }
.anmelde-form { display:flex; flex-direction:column; gap:14px; }
.anmelde-form h1 { font-size:20px; margin:0; }
.anmelde-form input { padding:9px 10px; border:1px solid var(--g300); border-radius:var(--radius-k); font-size:14px; }
.anmelde-form .btn { padding:10px 12px; }
.anmelde-form .klein-grau { margin:0; }
#shell[hidden] { display:none; }

/* Mobilansicht „Mein Tag“ */
.mobil { max-width:560px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.mobil .karte h2 { margin:0 0 10px; font-size:16px; }
.mobil-gruss h1 { font-size:22px; margin:0; }
.mobil-stempel { display:flex; flex-direction:column; gap:10px; }
.mobil-stempel select, .mobil-stempel input { padding:10px; font-size:16px; border:1px solid var(--g300); border-radius:var(--radius-k); background:#fff; }
.mobil-stempel.laeuft { border-left:4px solid var(--gruen7); }
.mobil-uhr { font-size:40px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1; }
.btn.gross { padding:14px 16px; font-size:16px; font-weight:600; flex:1; white-space:normal; }
.mobil-knoepfe { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.mobil-knoepfe .btn { min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.mobil-termin { border-top:1px solid var(--g200); padding:10px 0; display:flex; flex-direction:column; gap:2px; }
.mobil-termin:first-of-type { border-top:0; padding-top:0; }
.mobil-zeit { font-size:12px; font-weight:600; color:var(--blau); }
.mobil-beschreibung { white-space:pre-wrap; font-size:13px; background:var(--g50); border-radius:6px; padding:6px 8px; margin-top:4px; }
.mobil-aufgabe { display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-top:1px solid var(--g200); font-size:14px; }
.mobil-aufgabe:first-of-type { border-top:0; }
.mobil-aufgabe input { width:22px; height:22px; flex:none; margin-top:1px; }
.mobil-woche { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; text-align:center; }
.mobil-woche b { font-size:18px; }
.linkknopf { background:none; border:0; padding:4px 0; text-decoration:underline; text-align:left; cursor:pointer; }
@media (max-width: 600px) {
  #kopf { gap:6px; padding:0 8px; }
  #neuKnopf, #kiKnopf { display:none; }
  .suche-feld { flex:1; }
  #inhalt { padding:12px; }
  .dialog-hg { padding:0; align-items:flex-end; }
  .dialog { width:100% !important; max-width:none !important; margin:0; border-radius:12px 12px 0 0; }
}
.netz { font-size:12px; padding:4px 8px; border-radius:12px; background:var(--g100); color:var(--g700); white-space:nowrap; text-decoration:none; }
.netz.aus { background:var(--g800); color:#fff; }
.netz.fehler { background:#fde2e2; color:var(--rot7); }
.mobil-offline { border-left:4px solid var(--gelb6); }
.mobil-install { display:flex; flex-direction:column; gap:8px; }
.mobil-install-kopf { display:flex; gap:12px; align-items:center; }
.mobil-install-kopf img { border-radius:9px; flex:none; }

/* Kundenunterschrift */
body.unterschrift-offen { overflow:hidden; }
.unterschrift-seite { position:fixed; inset:0; z-index:200; background:var(--g100); display:flex; flex-direction:column; }
.unterschrift-seite > header { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 14px; background:#fff; border-bottom:1px solid var(--g300); font-size:16px; }
.unterschrift-inhalt { flex:1; overflow:auto; padding:12px 14px 24px; display:flex; flex-direction:column; gap:10px; max-width:820px; width:100%; margin:0 auto; }
.unterschrift-positionen { background:#fff; border-radius:var(--radius); padding:8px 12px 8px 30px; margin:0; max-height:28vh; overflow:auto; font-size:14px; }
.unterschrift-positionen li { padding:3px 0; display:flex; justify-content:space-between; gap:12px; }
.unterschrift-positionen li.titel { font-weight:600; list-style:none; margin-left:-18px; }
.unterschrift-summe { font-weight:600; text-align:right; }
.unterschrift-text { margin:4px 0 0; font-size:14px; }
.unterschrift-feld { width:100%; height:200px; background:#fff; border:2px dashed var(--g400); border-radius:var(--radius); touch-action:none; cursor:crosshair; }
.unterschrift-felder { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.unterschrift-felder input { padding:10px; font-size:16px; border:1px solid var(--g300); border-radius:var(--radius-k); }
.unterschrift-bild { max-width:280px; max-height:110px; background:#fff; border:1px solid var(--g200); border-radius:6px; padding:4px; }
.unterschrift-anzeige { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.mobil-auswahl { display:flex; flex-direction:column; gap:8px; }
@media (max-width: 600px) { .unterschrift-felder { grid-template-columns:1fr; } .unterschrift-feld { height:180px; } }
@media (orientation: landscape) and (max-height: 500px) { .unterschrift-feld { height:150px; } .unterschrift-positionen { max-height:18vh; } }

/* Arbeitsbericht am Handy */
.unterschrift-inhalt textarea { width:100%; padding:10px; font-size:16px; border:1px solid var(--g300); border-radius:var(--radius-k); font-family:inherit; }
.unterschrift-inhalt input[type="date"] { padding:10px; font-size:16px; border:1px solid var(--g300); border-radius:var(--radius-k); background:#fff; }
.bericht-material { display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
.bericht-zeile { display:flex; gap:6px; align-items:center; }
.bericht-zeile input, .bericht-zeile select { padding:9px 8px; font-size:16px; border:1px solid var(--g300); border-radius:var(--radius-k); background:#fff; min-width:0; }
.bericht-zeile input:first-child { flex:1; }
.unterschrift-langtext { display:block; font-weight:400; white-space:pre-wrap; color:var(--g700); margin-top:2px; }
.konto-vorschlag { display:flex; flex-direction:column; gap:4px; min-width:220px; }
.scan-video { width:100%; max-height:50vh; object-fit:cover; border-radius:var(--radius); background:#000; margin-bottom:8px; }
.mobil input[type="search"] { width:100%; padding:10px; font-size:16px; border:1px solid var(--g300); border-radius:var(--radius-k); margin-bottom:8px; }

/* KI-Assistent: Blase unten rechts und Chat */
.ki-halter { position:fixed; right:18px; bottom:18px; z-index:60; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.ki-blase { width:56px; height:56px; border-radius:50%; border:none; background:var(--gelb, #f5c400); font-size:24px; box-shadow:0 4px 14px rgba(0,0,0,.25); cursor:pointer; }
.ki-fenster { width:min(420px, calc(100vw - 32px)); max-height:min(70vh, 640px); background:#fff; border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.3); display:flex; flex-direction:column; overflow:hidden; }
.ki-fenster > header { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; font-weight:600; border-bottom:1px solid var(--g200, #e5e5e5); }
.ki-chat { display:flex; flex-direction:column; gap:8px; min-height:0; flex:1; padding:10px; }
.ki-verlauf { flex:1; overflow:auto; display:flex; flex-direction:column; gap:8px; min-height:180px; }
.ki-nachricht { padding:8px 10px; border-radius:10px; max-width:92%; white-space:pre-wrap; }
.ki-nachricht.ich { align-self:flex-end; background:#fff4c2; }
.ki-nachricht.ki { align-self:flex-start; background:var(--g100, #f3f3f3); }
.ki-eingabe { display:flex; gap:8px; align-items:flex-end; }
.ki-eingabe textarea { flex:1; resize:vertical; }
.ki-plan ol { margin:6px 0 8px 18px; padding:0; }
@media print { .ki-halter { display:none; } }