:root{
  --blue:#005CA9; --blue2:#008CF0; --blue-d:#0b4b85;
  --green:#7DB82B; --green-d:#5f9420;
  --ink:#16212b; --text-muted:#657588;
  --line:#e4eaf1; --bg:#eef3f9; --panel:#fff; --sidebar:#0e2233;
  --radius:12px; --shadow:0 1px 3px rgba(16,40,64,.08),0 8px 24px rgba(16,40,64,.06);
  --font:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
/* „hidden" muss auch bei Elementen mit eigener display-Regel greifen – sonst
   bleibt etwa ein <button class="btn" hidden> trotzdem stehen (V4.60). */
[hidden]{display:none!important}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
button,input,select{font-family:inherit;font-size:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border:none;border-radius:9px;font-weight:600;font-size:14px;cursor:pointer;transition:.15s}
.btn-primary{background:var(--blue);color:#fff}.btn-primary:hover{background:var(--blue-d)}
.btn-green{background:var(--green);color:#fff}.btn-green:hover{background:var(--green-d)}
.btn-ghost{background:#fff;color:var(--blue);border:1.5px solid var(--line)}.btn-ghost:hover{border-color:var(--blue2)}
.btn-danger{background:#fff;color:#c0392b;border:1.5px solid #f0d3cf}.btn-danger:hover{background:#fdeceb}
.btn-sm{padding:7px 12px;font-size:12.5px}

/* ---- Login ---- */
/* Spalte statt Zeile – sonst stehen Karte und Fußzeile NEBENeinander (Fehler bis V4.29). */
.login{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#f4f8fc,#e6eff8);
  padding:24px calc(20px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left))}
.login-card{background:#fff;border-radius:18px;box-shadow:var(--shadow);width:100%;max-width:420px;padding:36px 32px 32px;text-align:center}
.login-card img{width:250px;max-width:82%;margin-bottom:22px}
.login-card h1{font-size:19px;color:var(--blue);margin-bottom:4px}
.login-card p.sub{color:var(--text-muted);font-size:13px;margin-bottom:22px}
.login-links{margin-top:18px;font-size:13px;color:#8090a0;text-align:center}
.login-links a{color:#6b7f93;padding:6px 4px;display:inline-block}   /* größere Tippfläche */
.field{text-align:left;margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--text-muted);margin-bottom:5px}
.field input,.field select{width:100%;padding:11px 12px;border:1.5px solid var(--line);border-radius:9px;background:#fbfdff}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue2)}
.login-card .btn{width:100%}
.login-card .ver{margin-top:-16px;margin-bottom:20px;font-size:11.5px;color:#9aa9b8;letter-spacing:.3px}
/* Auf Tablet/Handy größere Felder – und 16px verhindert das Hineinzoomen von iOS Safari. */
.login-card .field input{font-size:16px;padding:13px 14px}
.login-card .btn{font-size:16px;padding:14px 16px;margin-top:4px}

/* Passwort anzeigen/verbergen (V4.30) – Hülle wird von assets/pw.js erzeugt */
.pw-wrap{position:relative;display:block}
.pw-wrap > input[type="password"],.pw-wrap > input[type="text"]{padding-right:48px}
.pw-toggle{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:38px;height:38px;padding:0;
  display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:9px;
  cursor:pointer;color:#8ba0b5;transition:.15s}
.pw-toggle:hover{background:#eef4fb;color:var(--blue)}
.pw-toggle:active{background:#e2ecf7}
.pw-toggle svg{width:21px;height:21px;display:block}

/* ---- App shell ---- */
.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.backdrop{display:none}
.sidebar{background:var(--sidebar);color:#c7d6e3;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;height:100dvh}
/* Die feste Höhe oben schneidet ab, sobald das Menü länger ist als der Bildschirm –
   seit V4.38 mit den Abschnitten „Intern" und „Portal" passiert das auf 13-Zoll-Geräten.
   Deshalb ab V4.40: Kopf und Fuß stehen fest, NUR die Linkliste scrollt (V4.40). */
.sb-brand{flex:none;padding:20px;display:flex;align-items:center;gap:11px;border-bottom:1px solid #ffffff12}
.sb-brand .mark{width:34px;height:34px;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center}
.sb-brand .mark svg{width:22px;height:22px}
.sb-brand .name{font-size:18px;font-weight:700;color:#fff}
.sb-status{flex:none;margin:12px 14px;border-radius:10px;padding:9px 12px;font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:8px;background:#12351f;color:#8fe3a6}
.sb-status .dot{width:9px;height:9px;border-radius:50%;background:#3ddc7e;box-shadow:0 0 0 3px #3ddc7e33}
.nav{padding:6px 12px;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:#ffffff33 transparent}
.nav::-webkit-scrollbar{width:6px}
.nav::-webkit-scrollbar-thumb{background:#ffffff2e;border-radius:3px}
.nav::-webkit-scrollbar-track{background:transparent}
.nav a{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:9px;color:#c7d6e3;font-size:14px;font-weight:500;margin-bottom:3px;position:relative}
.nav a:hover{background:#ffffff0f;color:#fff}
.nav a.active{background:var(--blue);color:#fff}
.nav a svg,.nav a .ic{width:19px;height:19px;flex:none;opacity:.85}
.nav a.active .ic{opacity:1}
.nav a .tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-ver{flex:none;padding:8px 20px 2px;font-size:11px;color:#6f8598;letter-spacing:.2px}
.sb-user{flex:none;padding:12px 16px 14px;border-top:1px solid #ffffff12;display:flex;align-items:center;gap:11px}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--blue2);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:0 0 auto}
.sb-user .u-meta{display:flex;flex-direction:column;min-width:0}
.sb-user .u-name{font-size:13.5px;font-weight:600;color:#fff}
.sb-user .u-role{font-size:11px;color:#8fa3b5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user .logout{margin-left:auto;color:#8fa3b5;font-size:11px}
.sb-user .logout:hover{color:#fff}
/* Flache Bildschirme (13-Zoll-Notebook, iPad quer): Zeilen etwas enger, damit das
   Menü meistens ohne Scrollen ganz hineinpasst. Tippflächen bleiben über 38px. */
@media(max-height:900px){
  .sb-brand{padding:15px 20px}
  .sb-status{margin:9px 14px;padding:7px 12px}
  .nav a{padding:9px 13px;margin-bottom:2px}
  .nav-sec{padding:9px 14px 3px}
  .sb-user{padding:10px 16px 12px}
}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{background:#fff;border-bottom:1px solid var(--line);padding:16px 30px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:10}
.topbar h1{font-size:20px}
.topbar .sub{font-size:13px;color:var(--text-muted)}
/* Platz für Schalter/Knöpfe rechts in der Kopfleiste. Die Kopfleiste klebt oben,
   also bleibt alles hier Abgelegte beim Scrollen sichtbar (V4.37). */
.topbar .tt{min-width:0;overflow:hidden}
.topbar .tt h1,.topbar .tt .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-extra{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
/* Auf schmalen Geräten hat der Titel Vorrang. Der Weg zu den Auftragsdaten
   steht direkt darunter in der Schrittanzeige – nur der Schalter muss oben bleiben. */
@media(max-width:720px){ .top-extra .btn{display:none} }
.burger{display:none;font-size:22px;cursor:pointer;color:var(--ink)}

/* ---- Schmale Symbolleiste (V4.31) ---- */
.sb-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;padding:0;
  background:none;border:none;border-radius:9px;cursor:pointer;color:#7d93a8;transition:.15s}
.sb-btn:hover{background:#eef4fb;color:var(--blue)}
.sb-btn svg{width:21px;height:21px}
.sb-schmal .sb-btn .pfeil{transform:translateX(4px) scaleX(-1);transform-origin:14px 12px}
.app.sb-schmal{grid-template-columns:64px 1fr}
.sb-schmal .sidebar .name,
.sb-schmal .sb-status,
.sb-schmal .nav a .tx,
.sb-schmal .sb-ver,
.sb-schmal .sb-user .u-meta,
.sb-schmal .sb-user .logout{display:none}
.sb-schmal .sb-brand{padding:16px 0;justify-content:center}
.sb-schmal .nav{padding:10px 8px}
.sb-schmal .nav a{justify-content:center;padding:12px 0;gap:0}
.sb-schmal .nav a .ic{width:21px;height:21px}
.sb-schmal .nav a .nav-cnt{position:absolute;top:5px;right:9px;min-width:0;width:9px;height:9px;padding:0;margin:0;
  font-size:0;line-height:0;border:2px solid var(--sidebar)}
.sb-schmal .sb-user{justify-content:center;padding:12px 0 14px}
/* Gruppen-Überschriften werden zu schlichten Trennlinien */
.sb-schmal .nav-sec{height:1px;padding:0;margin:10px 6px;background:#ffffff1c;font-size:0;line-height:0;overflow:hidden;text-indent:-9999px}

/* Vorgabe auf Tablets im Hochformat: schmal starten, solange noch nichts umgeschaltet wurde
   (.sb-auto steht nur, wenn kein Cookie gesetzt ist). Rechner bleiben unberührt – daher pointer:coarse. */
@media (pointer:coarse) and (min-width:821px) and (max-width:1100px){
  .app.sb-auto{grid-template-columns:64px 1fr}
  .sb-auto .sidebar .name,.sb-auto .sb-status,.sb-auto .nav a .tx,
  .sb-auto .sb-ver,.sb-auto .sb-user .u-meta,.sb-auto .sb-user .logout{display:none}
  .sb-auto .sb-brand{padding:16px 0;justify-content:center}
  .sb-auto .nav{padding:10px 8px}
  .sb-auto .nav a{justify-content:center;padding:12px 0;gap:0}
  .sb-auto .nav a .ic{width:21px;height:21px}
  .sb-auto .nav a .nav-cnt{position:absolute;top:5px;right:9px;min-width:0;width:9px;height:9px;padding:0;margin:0;
    font-size:0;line-height:0;border:2px solid var(--sidebar)}
  .sb-auto .sb-user{justify-content:center;padding:12px 0 14px}
  .sb-auto .nav-sec{height:1px;padding:0;margin:10px 6px;background:#ffffff1c;font-size:0;line-height:0;overflow:hidden;text-indent:-9999px}
  .sb-auto .sb-btn .pfeil{transform:translateX(4px) scaleX(-1);transform-origin:14px 12px}
}
.content{padding:26px 30px 60px;max-width:1100px;width:100%}

/* ---- Cards / panels ---- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:22px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.kpi .k-num{font-size:30px;font-weight:700;color:var(--blue);line-height:1}
.kpi .k-lbl{font-size:12.5px;color:var(--text-muted);margin-top:7px}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:22px}
.panel-h{padding:15px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.panel-h h2{font-size:15.5px}.panel-h .spacer{flex:1}
.panel-b{padding:18px 20px}
.hint{font-size:12.5px;color:var(--blue);background:#eef6ff;border:1px solid #d3e6fb;border-radius:8px;padding:9px 13px;margin-bottom:16px}

/* ---- Tables ---- */
table.tbl{width:100%;border-collapse:collapse}
table.tbl th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);padding:11px 16px;border-bottom:1px solid var(--line)}
table.tbl td{padding:11px 16px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}
table.tbl tr:last-child td{border-bottom:none}
.role-pill{font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;margin-right:4px;display:inline-block}
.rp-gut{background:#e7f0fb;color:var(--blue)}.rp-frei{background:#e7f6e9;color:var(--green-d)}.rp-admin{background:#f0e7fb;color:#7b3fb5}
.tag{font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px}
.tag-on{background:#e7f6e9;color:var(--green-d)}.tag-off{background:#eef1f4;color:#7c8b9a}

/* ---- Forms ---- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.form-grid .full{grid-column:1/-1}
.form-grid label{display:block;font-size:12.5px;font-weight:600;color:var(--text-muted);margin-bottom:5px}
.form-grid input,.form-grid select{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:9px;background:#fbfdff}
.form-grid input:focus,.form-grid select:focus{outline:none;border-color:var(--blue2)}
.check{display:flex;align-items:center;gap:9px;font-size:14px;padding:8px 0}
.check input{width:18px;height:18px}
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}

/* ---- Bereichs-Kacheln ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-top:4px}
.tile{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:30px 22px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;transition:.16s;position:relative}
.tile .ic{width:74px;height:74px;margin-bottom:10px}
.tile .t-name{font-size:17px;font-weight:700}
.tile .t-sub{font-size:12.5px;color:var(--text-muted)}
.tile.active{color:var(--blue)}
.tile.active .ic{color:var(--blue)}
.tile.active .ic-accent{stroke:var(--green)}
.tile.active .t-name{color:var(--ink)}
.tile.active:hover{border-color:var(--blue2);transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,90,169,.16)}
.tile .t-cta{margin-top:12px;font-size:12.5px;font-weight:700;color:var(--blue)}
.tile.disabled{cursor:not-allowed;background:#f6f8fb;border-style:dashed}
.tile.disabled .ic{color:#b4c1cd}
.tile.disabled .ic-accent{stroke:#cbd5e1}
.tile.disabled .t-name{color:#8b99a7}
.tile.disabled .t-sub{color:#a6b3c0}
.tile .t-badge{margin-top:12px;font-size:11px;font-weight:600;color:#8b99a7;background:#eaf0f6;border-radius:20px;padding:3px 11px}
/* Interne, grau hinterlegte Kacheln (Schulungen, Urlaub) */
.intern-head{margin:30px 0 10px;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted)}
.tiles.intern{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
/* Reihe mit nur einer Kachel: nicht auf volle Breite ziehen (V4.35) */
.tiles.eins{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.tile.util{background:#eef1f5;border-color:#dde3ea}
.tile.util .ic{color:#7d8a99}
.tile.util .ic-accent{stroke:#9fb0c0}
.tile.util .t-name{color:#41505f}
.tile.util .t-sub{color:#8593a1}
.tile.util .t-cta{color:#5b6673}
.tile.util:hover{border-color:#c3ccd6;transform:translateY(-3px);box-shadow:0 8px 22px rgba(60,80,110,.12)}

/* ---- Nav-Sektionen ---- */
.nav-sec{padding:12px 14px 4px;font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:#5f7488}

/* ---- Auftragsliste ---- */
.search{width:100%;padding:12px 15px;border:1.5px solid var(--line);border-radius:11px;background:#fff}
.search:focus{outline:none;border-color:var(--blue2)}
.auf{display:flex;align-items:center;gap:16px;padding:15px 18px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;margin-bottom:11px;box-shadow:var(--shadow);text-decoration:none;color:inherit;transition:.13s}
.auf:hover{border-color:var(--blue2);transform:translateY(-1px)}
.auf .a-main{flex:1;min-width:0}
.auf .a-addr{font-size:15.5px;font-weight:700;color:var(--ink)}
.auf .a-meta{font-size:13px;color:var(--text-muted);margin-top:3px}
.auf .a-nr{font-size:12px;color:#9aa9b8;font-family:ui-monospace,monospace}
.badge-st{font-size:11.5px;font-weight:700;border-radius:20px;padding:3px 11px;white-space:nowrap}
.st-aktiv{background:#e7f6e9;color:var(--green-d)}
.st-abg{background:#eef1f4;color:#7c8b9a}
.st-freigabe{background:#fff2dd;color:#b5751a}
.st-entwurf{background:#e7f0fb;color:var(--blue)}
.st-frei{background:#d7f0dc;color:#1e6b2c;box-shadow:inset 0 0 0 1px #b3ddbb}

/* ---- Freigabe-Workflow (V4.26) ---- */
.frg-steps{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:12.5px;color:var(--text-muted)}
.frg-step{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.frg-step .dot{width:9px;height:9px;border-radius:50%;background:#d6dee7;flex:none}
.frg-step.done{color:var(--green-d)}
.frg-step.done .dot{background:var(--green)}
.frg-step.now{color:var(--blue);font-weight:700}
.frg-step.now .dot{background:var(--blue);box-shadow:0 0 0 4px rgba(0,92,169,.15)}
.frg-meta{margin-top:12px;font-size:13px;color:var(--text-muted);line-height:1.8}
.frg-meta strong{color:var(--ink);font-weight:600}
.frg-notiz{margin-top:4px;padding:8px 12px;background:#f7fafd;border-left:3px solid var(--line);border-radius:0 8px 8px 0;color:var(--ink)}
.flash.warn{background:#fff6e6;color:#8a5a11;border:1px solid #f2dfba}
.frg-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.frg-filter a{font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:20px;background:#fff;border:1.5px solid var(--line);color:var(--text-muted)}
.frg-filter a.on{background:var(--blue);border-color:var(--blue);color:#fff}
.nav-cnt{display:inline-block;min-width:19px;padding:1px 6px;margin-left:6px;border-radius:20px;background:var(--green);color:#fff;font-size:11px;font-weight:700;text-align:center}

/* ---- Hilfs-/Ansichts-Panel (V4.27): grau abgesetzt, einklappbar, standardmäßig zu.
       Signalisiert „hier ist nichts auszufüllen" – im Gegensatz zu den weißen Arbeits-Panels. ---- */
.panel-tool{background:#eef2f7;border:1px dashed #c3d0de;box-shadow:none}
.panel-tool > summary.panel-h{cursor:pointer;list-style:none;border-bottom:none;user-select:none;-webkit-user-select:none}
.panel-tool[open] > summary.panel-h{border-bottom:1px dashed #c3d0de}
.panel-tool > summary.panel-h::-webkit-details-marker{display:none}
.panel-tool > summary.panel-h::before{content:'▸';color:#7d93a8;font-size:13px;flex:none;transition:transform .15s}
.panel-tool[open] > summary.panel-h::before{transform:rotate(90deg)}
.panel-tool > summary.panel-h:hover{background:#e6ecf4}
.panel-tool > summary.panel-h h2{color:#4a5c6e}
.panel-tool .tool-tag{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#5d7189;background:#dde5ee;border-radius:20px;padding:3px 9px}
.panel-tool .tool-note{font-size:12px;color:var(--text-muted)}
.panel-tool .panel-b{background:#f7f9fc}
@media(max-width:640px){ .panel-tool .tool-note{display:none} }
/* Schreibschutz: Formulare gesperrter Aufträge bleiben sichtbar, sind aber nicht bedienbar.
   Ausgenommen ist das Freigabe-Panel selbst (.f-frei). */
.gesperrt form{opacity:.5;pointer-events:none}
.gesperrt a.btn-primary{opacity:.42;pointer-events:none}
.gesperrt .f-frei{opacity:1;pointer-events:auto}
/* Nur-Ansicht wegen fehlender Rechte (V4.39): anders als beim Schreibschutz aus dem
   Freigabe-Workflow bleibt hier auch die Freigabe-Leiste gesperrt. */
.nurlesen form,.nurlesen .f-frei{opacity:.5;pointer-events:none}
/* …es sei denn, der Nutzer darf freigeben – dann bleibt nur diese Leiste bedienbar (V4.41). */
.nurlesen.frei-offen .f-frei{opacity:1;pointer-events:auto}
.nurlesen a.btn-primary,.nurlesen a.btn-danger{opacity:.42;pointer-events:none}

/* ---- Riss-Gruppen & Zeilen ---- */
.rg-head{background:#f2f6fb;border:1px solid var(--line);border-bottom:none;padding:10px 16px;font-weight:700;font-size:13.5px;color:var(--ink)}
.rg-head.lvl2{background:#f7fafd;font-weight:600;font-size:12.5px;color:var(--text-muted);padding:8px 16px 8px 28px}
.rg-head.lvl3{background:#eef4fb;font-weight:600;font-size:12px;color:var(--blue);padding:7px 16px 7px 40px}
/* ---- Auf-/zuklappbare Gliederung der Rissliste (V4.64) ----
   Geschoss und Raum sind <details>/<summary>. Der Browser klappt selbst, Javascript
   merkt sich nur, was offen war. Die Tippfläche ist bewusst die ganze Zeile. */
.r-liste{border-bottom:1px solid var(--line);border-radius:0 0 10px 10px;overflow:hidden}
.rgr > summary.rg-head{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.rgr > summary.rg-head::-webkit-details-marker{display:none}
.rgr > summary.rg-head::before{content:'▸';flex:none;font-size:12px;opacity:.75;transition:transform .12s}
.rgr[open] > summary.rg-head::before{transform:rotate(90deg)}
.rgr > summary.rg-head:hover{background:#e6eef8}
.rgr > summary.rg-head.lvl2{padding-left:16px}
.rgr > summary.rg-head.lvl3{padding-left:28px;font-size:13px;padding-top:10px;padding-bottom:10px}
.rg-zahl{flex:none;min-width:22px;padding:1px 7px;border-radius:999px;background:#dbe6f3;color:#3d5872;
  font-size:11px;font-weight:700;text-align:center}
.rgr[open] > summary .rg-zahl{background:#cfe0f2}
.rg-raeume{flex:none;margin-left:auto;font-size:11.5px;font-weight:500;color:var(--text-muted)}
/* Leiste über der Liste */
.rg-leiste{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:4px 6px 10px}
.rg-alle{background:#fff;color:var(--blue);border:1.5px solid var(--line);border-radius:9px;
  padding:6px 12px;font-size:12.5px;font-weight:600;cursor:pointer}
.rg-alle:hover{border-color:var(--blue2)}
.rg-hinweis{font-size:11.5px;color:var(--text-muted);flex:1 1 240px;min-width:0}
@media(max-width:900px){ .rg-hinweis{display:none} .rg-raeume{display:none} }
/* Gerade gespeicherter Eintrag: kurz hervorheben, damit man ihn nach dem Sprung findet. */
.riss-row.r-neu{background:#f1f9ea;box-shadow:inset 3px 0 0 var(--green);animation:rNeu 3.5s ease-out forwards}
@keyframes rNeu{0%{background:#e4f4d5}70%{background:#f1f9ea}100%{background:#fff;box-shadow:none}}
/* Einheiten-Blätterleiste (Wohnungen/Büros) */
.e-tabs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);background:#f7fafd}
.e-tabs-label{font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;margin-right:2px}
.e-tab{display:inline-block;padding:7px 13px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--text-muted);font-size:13px;font-weight:600;text-decoration:none}
.e-tab:hover{border-color:var(--blue2);color:var(--blue)}
.e-tab.active{background:var(--blue);border-color:var(--blue);color:#fff}
.e-add{display:inline-flex;gap:6px;align-items:center;margin-left:auto}
/* Straßen/Objekte eines Hauptauftrags – Umschalter über der Erfassung (V4.49) */
.str-leiste{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:10px 12px;margin-bottom:16px;
  background:#f7fafd;border:1px solid var(--line);border-radius:12px}
.str-leiste .str-add{margin-left:auto}
.str-hint{flex-basis:100%;font-size:12px;color:var(--text-muted);line-height:1.55;padding-top:2px}
/* Erfassungstermin – gleiche Bauform, andere Tönung, damit die beiden Leisten
   nicht verwechselt werden (V4.52) */
.t-leiste{background:#f6faf1;border-color:#dfead2}
/* Kundenpaket nach der Freigabe (V4.56) */
.paket-box{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:16px;padding:14px 16px;
  background:#f3faec;border:1px solid #dbead0;border-radius:11px}
.paket-txt{flex:1;min-width:240px;font-size:13px;line-height:1.6;color:var(--ink)}
.paket-mb{display:block;font-size:12px;color:var(--text-muted);margin-top:3px}
.e-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 6px 4px}
.btn-disabled{opacity:.42;cursor:not-allowed;pointer-events:none}
.e-empty{margin:0;padding:18px 20px;border-bottom:1px solid var(--line);background:#f2f8ff}
.e-empty-h{font-size:15px;font-weight:700;color:var(--blue);display:flex;align-items:center;gap:9px;margin-bottom:6px}
.e-empty-step{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;background:var(--blue);color:#fff;font-size:13px;font-weight:700}
.e-empty-p{font-size:13px;color:var(--text);line-height:1.6;margin:0 0 12px;max-width:640px}
.e-empty-f{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.e-empty-f input{flex:1;min-width:200px;padding:10px 13px;border:1.5px solid var(--blue2);border-radius:9px;font-size:14px;background:#fff}
.e-empty-note{font-size:11.5px;color:var(--text-muted);margin-top:9px;max-width:640px;line-height:1.5}
.riss-row{display:flex;gap:16px;padding:14px 16px;border:1px solid var(--line);border-bottom:none;background:#fff;align-items:center}
.riss-row:hover{background:#fafcfe}
.riss-info{flex:1;min-width:0}
.riss-info .r-top{font-size:12px;color:var(--text-muted)}
.riss-info .r-top strong{color:var(--ink)}
.riss-info .r-room{font-size:14px;font-weight:600;margin:2px 0 4px}
.riss-tag{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:6px;margin-top:2px}
.tag-riss{background:#fdeaea;color:#c0392b}.tag-ueber{background:#eef1f4;color:#7c8b9a}
/* Genaue Lage zur Rissart (V4.63) – steht neben der Marke, nicht darin. */
.riss-lage{font-size:12.5px;color:var(--text-muted);margin-left:7px}
.riss-info .r-mess{font-size:13px;margin-top:6px;color:#34495e}
.riss-info .r-mess .mm{font-weight:700;color:var(--blue)}
.riss-photos{display:flex;gap:6px;align-items:center;flex:0 0 auto}
.pthumb{width:64px;height:52px;border-radius:7px;background:#dfe8f1 center/cover no-repeat;border:1px solid #cddaea;display:inline-flex;align-items:center;justify-content:center}
.pthumb.empty svg{width:22px;height:22px;opacity:.5}
.pmore{font-size:12px;font-weight:700;color:var(--text-muted)}
/* Abschluss eines Raums: „weiterer Riss hier" (V4.62). Bewusst schmal und in
   Blau – ein zweiter voller Knopf unter jeder Zeile würde die Liste zerreden. */
.riss-mehr{display:block;padding:9px 16px;border:1px solid var(--line);border-bottom:none;
  background:#f8fbfe;color:var(--blue);font-size:12.5px;font-weight:600;text-decoration:none}
.riss-mehr:hover{background:#eef4fb}
.riss-mehr span{color:var(--text-muted);font-weight:500}
@media(max-width:900px){ .riss-mehr span{display:none} }
/* letzte Zeile abrunden */
.panel-b > a.riss-row:last-child,.panel-b > .riss-row:last-child,
.panel-b > a.riss-mehr:last-child{border-bottom:1px solid var(--line);border-radius:0 0 10px 10px}

/* ---- Foto-Galerie (Erfassung) ---- */
.foto-galerie{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
/* Ab V4.52 trägt jede Kachel unter dem Bild den Termin, zu dem das Foto gehört –
   die Kachel ist deshalb eine Spalte und nicht mehr eine feste Fläche mit
   übereinandergelegten Leisten. */
.foto-item{position:relative;width:134px;border-radius:9px;overflow:hidden;border:1px solid var(--line);background:#fff}
.foto-item img{width:100%;height:96px;object-fit:cover;display:block}
.foto-termin{padding:2px 4px 0}
.foto-termin select{width:100%;font-size:11px;padding:3px 5px;border:1px solid var(--line);border-radius:6px;
  background:#f7fafd;color:var(--text-muted);font-weight:600}
/* Bildnummer je Foto (V4.54) – steht direkt unter dem Bild, weil sie im Bericht auftaucht */
.foto-nr{padding:4px 4px 0}
.foto-nr input{width:100%;font-size:11.5px;padding:3px 5px;border:1px solid var(--line);border-radius:6px;
  background:#fff;color:var(--ink);font-weight:700;text-align:center}
.foto-mark{display:block;margin-top:4px;height:20px;background:#0e1a24e6;color:#dbe7f2;font-size:11px;
  font-weight:600;display:flex;align-items:center;justify-content:center;gap:4px;text-decoration:none}
.foto-mark:hover{background:var(--blue);color:#fff}
.foto-del{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;background:#ffffffe6;color:#c0392b;font-size:16px;font-weight:700;line-height:1;border:1px solid #f0d3cf;cursor:pointer;display:flex;align-items:center;justify-content:center}
.foto-del:hover{background:#c0392b;color:#fff}

/* ---- Formular-Abschnitte (farbige Trennbalken) ---- */
.form-sec{margin:2px -20px 18px;padding:11px 20px;background:#eaf2fb;border-top:1px solid #d9e6f5;border-bottom:1px solid #d9e6f5;
  color:var(--blue);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.6px;display:flex;align-items:center;gap:10px}
.form-grid + .form-sec, .form-sec + .form-sec{margin-top:26px}
.form-sec .num{width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.form-sec .hint-inline{margin-left:auto;font-weight:500;text-transform:none;letter-spacing:0;font-size:11.5px;color:var(--text-muted)}
.plz-status{font-size:11.5px;color:var(--green-d);margin-top:4px;min-height:14px}
.input-unit{display:flex;align-items:stretch}
.input-unit input{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}
.input-unit .unit{display:flex;align-items:center;padding:0 14px;background:#eef3f9;border:1.5px solid var(--line);border-left:none;border-radius:0 9px 9px 0;color:var(--text-muted);font-weight:700;font-size:13px}

/* Länge: Meterwert ODER Beschreibung (V4.50) */
.l-wahl{display:flex;gap:6px;align-items:stretch;flex-wrap:wrap}
.l-wahl .l-art{flex:0 0 auto;width:auto;min-width:132px}
.l-wahl .l-wert{flex:1 1 150px;min-width:0}
/* Feld, das bewusst nicht bedienbar ist (z. B. Zustand bei der Erstbegehung) */
.feld-fest{background:#eef3f9;color:var(--text-muted);font-weight:600;cursor:not-allowed}
/* Wie ein abgeschaltetes Feld, aber als Text – für Angaben, die es hier gar nicht gibt
   (Rissart ohne Zustand, V4.65). Ein <input disabled> wäre gelogen: Es gibt nichts zu tippen. */
.feld-leer{background:#eef3f9;border:1.5px solid var(--line);border-radius:9px;padding:11px 12px;
  color:var(--text-muted);font-size:14px;font-style:italic}
/* Katalogliste: auf schmalen Geräten stapeln statt abschneiden (V4.65). */
.kat-liste td{vertical-align:middle}
@media(max-width:1100px){
  .kat-liste, .kat-liste tbody, .kat-liste tr, .kat-liste td{display:block;width:100%}
  .kat-liste tr{border-bottom:1px solid var(--line);padding:10px 0}
  .kat-liste tr:last-child{border-bottom:none}
  .kat-liste td{border:none;padding:3px 0}
  .kat-liste td:first-child{font-weight:700;color:var(--text-muted);font-size:12px}
  .kat-liste td:last-child{text-align:left;white-space:normal;display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
  .kat-liste td:last-child form{display:inline-flex}
}

/* ---- Flash ---- */
.flash{border-radius:10px;padding:12px 16px;margin-bottom:18px;font-size:14px}
.flash.ok{background:#e7f6e9;color:var(--green-d);border:1px solid #cfe9d2}
.flash.err{background:#fdeceb;color:#c0392b;border:1px solid #f3d3cf}
.flash.info{background:#eef6ff;color:var(--blue);border:1px solid #d3e6fb}

/* ---- Responsive ---- */
@media(max-width:820px){
  .app,.app.sb-schmal{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:250px;transform:translateX(-100%);transition:.25s;z-index:40}
  #navtoggle:checked ~ .sidebar{transform:none}
  #navtoggle:checked ~ .backdrop{display:block;position:fixed;inset:0;background:#0006;z-index:35}
  .burger{display:inline}
  .sb-btn{display:none}   /* auf dem Handy gibt es stattdessen das Schubladen-Menü */
  /* Ausgeklappte Schublade zeigt immer die volle Beschriftung */
  .sb-schmal .sidebar .name,.sb-schmal .sb-status,.sb-schmal .nav a .tx,
  .sb-schmal .sb-ver,.sb-schmal .sb-user .u-meta,.sb-schmal .sb-user .logout{display:revert}
  .sb-schmal .nav a{justify-content:flex-start;padding:11px 13px;gap:11px}
  .sb-schmal .nav-sec{height:auto;padding:12px 14px 4px;margin:0;background:none;font-size:10.5px;line-height:normal;text-indent:0}
  .sb-schmal .nav a .nav-cnt{position:static;width:auto;height:auto;font-size:11px;line-height:normal;padding:1px 6px;border:none;min-width:19px}
  .sb-schmal .sb-brand,.sb-schmal .sb-user{justify-content:flex-start;padding:20px}
  .content{padding:18px 16px 50px}
  .topbar{padding:14px 16px}
  .form-grid{grid-template-columns:1fr}
}

/* ---- Ansprechpartner (V4.36) ---- */
.ap-haupt{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:700;letter-spacing:.3px;
  text-transform:uppercase;color:var(--green-d);background:#eaf6dd;border-radius:20px;padding:2px 8px;vertical-align:middle}

/* ---- Foto markieren (V4.33) ---- */
.mk-hinweis{font-size:13px;line-height:1.6;color:var(--blue);background:#eef6ff;border:1px solid #d3e6fb;
  border-radius:10px;padding:10px 14px;margin-bottom:16px}
.mk-panel{max-width:1100px}
.mk-werkzeuge{flex-wrap:wrap;gap:10px 16px}
.mk-gruppe{display:flex;align-items:center;gap:8px}
.mk-wz{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:1.5px solid var(--line);
  border-radius:9px;background:#fff;color:var(--text-muted);font-size:13.5px;font-weight:600;cursor:pointer;transition:.15s}
.mk-wz svg{width:18px;height:18px;flex:none}
.mk-wz:hover{border-color:var(--blue2)}
.mk-wz.active{background:var(--blue);border-color:var(--blue);color:#fff}
.mk-farbe{width:30px;height:30px;padding:0;border-radius:50%;border:2px solid var(--line);cursor:pointer;
  background:var(--f);box-shadow:inset 0 0 0 1px #0000001a;transition:.15s}
.mk-farbe:hover{transform:scale(1.08)}
.mk-farbe.active{border-color:var(--ink);box-shadow:0 0 0 3px #005ca933,inset 0 0 0 1px #0000001a}
.mk-buehne{background:#0e1a24;padding:0;display:flex;flex-direction:column;align-items:center}
.mk-lade{color:#8fa3b5;font-size:14px;padding:60px 20px}
.mk-wrap{position:relative;line-height:0;max-width:100%}
.mk-wrap img{max-width:100%;max-height:70vh;height:auto;display:block;user-select:none;-webkit-user-select:none}
.mk-wrap canvas{position:absolute;left:0;top:0;touch-action:none;cursor:crosshair}
.mk-tipp{color:#8fa3b5;font-size:12.5px;line-height:1.6;padding:12px 18px;text-align:center;max-width:760px}
.mk-legende{border-top:1px solid var(--line);background:#f7fafd}
.mk-legende-kopf{font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:10px}
.mk-legende-kopf span{font-weight:400;color:var(--text-muted)}
.mk-nr-zeile{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.mk-nr-kreis{width:26px;height:26px;flex:none;border-radius:50%;background:#e02020;color:#fff;font-size:13px;
  font-weight:700;display:flex;align-items:center;justify-content:center}
.mk-nr-zeile input{flex:1;min-width:0;padding:9px 12px;border:1.5px solid var(--line);border-radius:9px;background:#fff}
.mk-fuss{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line)}
.mk-status{font-size:13px;color:var(--text-muted);font-weight:600}
.foto-markiert{position:absolute;left:5px;top:5px;background:#e02020;color:#fff;font-size:10px;font-weight:700;
  letter-spacing:.4px;padding:2px 6px;border-radius:5px;line-height:1.4;pointer-events:none}
@media(max-width:820px){ .mk-wrap img{max-height:56vh} .mk-wz span{display:none} .mk-wz{padding:10px 12px} }

/* ---- Vor-Ort-Ansicht „Feldmodus" (V4.31) ---- */
.fm-leiste{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.fm-leiste .spacer{flex:1}
.fm-schalter{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 7px;border:1.5px solid var(--line);
  border-radius:24px;background:#fff;color:var(--text-muted);font-size:13px;font-weight:600;cursor:pointer;
  white-space:nowrap;transition:.18s}
.fm-schalter:hover{border-color:var(--blue2)}
.fm-knauf{width:34px;height:20px;border-radius:20px;background:#d6dee7;position:relative;flex:none;transition:.18s}
.fm-knauf::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.18s}
body.fm-an .fm-schalter{border-color:var(--green);color:var(--green-d);background:#f3faec}
body.fm-an .fm-knauf{background:var(--green)}
body.fm-an .fm-knauf::after{transform:translateX(14px)}
.fm-hinweis{display:none;font-size:13px;line-height:1.6;color:#8a5a11;background:#fff6e6;border:1px solid #f2dfba;
  border-radius:10px;padding:10px 14px;margin-bottom:16px}
body.fm-an .fm-hinweis{display:block}
.fm-link{background:none;border:none;padding:0;margin-left:4px;color:var(--blue);font-size:13px;font-weight:600;
  cursor:pointer;text-decoration:underline}
/* Was draußen nicht gebraucht wird. Seit V4.37 liegen Hauptauftrag, Objektdaten,
   Berichts- und Begleittexte sowie die Vorschau auf der Seite „Auftragsdaten“ –
   auf der Erfassungsseite bleiben nur noch Freigabe, Zeiten und der Schrittwechsel. */
body.fm-an #freigabe,
body.fm-an #zeiten,
body.fm-an .schritte,
body.fm-an .fm-weg{display:none}

/* ---- Zwei Schritte: Auftragsdaten → Erfassung (V4.37) ---- */
.schritte{display:flex;align-items:stretch;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.schritt{display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 10px;border:1.5px solid var(--line);
  border-radius:24px;background:#fff;color:var(--text-muted);font-size:13.5px;font-weight:600;
  text-decoration:none;white-space:nowrap;transition:.15s}
a.schritt:hover{border-color:var(--blue2);color:var(--blue)}
.schritt .nr{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:none;
  border-radius:50%;background:#e8eef5;color:#6b8199;font-size:12px;font-weight:700}
.schritt.aktiv{border-color:var(--blue);background:#eef4fb;color:var(--blue)}
.schritt.aktiv .nr{background:var(--blue);color:#fff}
/* Kopfzeile der Erfassung: Nummer, Adresse, Kunde, Gutachter auf einen Blick */
.a-kopf{display:flex;flex-wrap:wrap;gap:8px 26px;padding:12px 16px;margin-bottom:16px;
  background:#f6f9fc;border:1px solid var(--line);border-radius:11px}
.a-kopf div{font-size:13px;color:var(--text-muted);line-height:1.5}
.a-kopf div strong{display:block;color:var(--ink);font-size:13.5px;font-weight:600}
.a-kopf .k-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:#8ba0b4}

/* ---- Touch-Geräte: größere Tippflächen, keine Zoom-Sprünge (V4.31) ----
   16px ist die Grenze, unterhalb derer iOS Safari beim Antippen in die Seite zoomt. */
@media (hover:none) and (pointer:coarse){
  input,select,textarea,button{font-size:16px}
  .form-grid input,.form-grid select,.form-grid textarea,
  .field input,.field select,.field textarea{padding:12px 13px}
  .btn{padding:12px 18px;font-size:15px}
  .btn-sm{padding:9px 14px;font-size:14px}
  table.tbl td{padding:14px 16px}
  .nav a{padding:14px 13px}
  .riss-row{padding-top:14px;padding-bottom:14px}
  .e-tab{padding:10px 14px}
}

/* ===== KI „aufräumen" – Button + Popup (V4.25) ===== */
.ki-btn{display:inline-flex;align-items:center;gap:6px;margin-top:7px;padding:6px 11px;border:1.5px solid var(--blue2);border-radius:8px;background:#f2f8ff;color:var(--blue);font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s}
.ki-btn:hover{background:#e6f2ff}
.ki-spark{font-size:13px;line-height:1}
.ki-overlay{position:fixed;inset:0;background:rgba(12,28,44,.5);display:none;align-items:center;justify-content:center;z-index:1000;padding:16px}
.ki-overlay.open{display:flex}
.ki-modal{background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.3);width:min(920px,100%);max-height:92vh;overflow:auto;padding:0}
.ki-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.ki-head strong{font-size:15px;color:var(--ink)}
.ki-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.4px}
.ki-badge.live{background:#e7f6e9;color:#2f8a3b}
.ki-badge.test{background:#fff3d9;color:#9a6b00}
.ki-x{margin-left:auto;border:none;background:none;font-size:16px;color:var(--text-muted);cursor:pointer;padding:4px 8px;border-radius:6px}
.ki-x:hover{background:#f0f4f8}
.ki-status{padding:9px 18px;font-size:12.5px;color:var(--text-muted);min-height:20px}
.ki-status.busy{color:var(--blue)}
.ki-status.err{color:#c0392b}
.ki-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:4px 18px 14px}
.ki-col label{display:block;font-size:11.5px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px}
.ki-col textarea{width:100%;min-height:220px;padding:11px 13px;border:1.5px solid var(--line);border-radius:9px;font-family:inherit;font-size:13.5px;line-height:1.55;background:#fbfdff;resize:vertical}
.ki-col .ki-orig{background:#f6f8fb;color:#4a5b6c}
.ki-foot{display:flex;gap:8px;justify-content:flex-end;padding:0 18px 16px}
@media(max-width:640px){.ki-cols{grid-template-columns:1fr}}

/* ---- Rechtematrix in der Nutzerverwaltung (V4.38) ---------------------- */
.rmatrix{margin:0 0 14px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.rmatrix th{background:#f7f9fc;vertical-align:top}
.rmatrix th.r-sp{width:172px;white-space:nowrap}
.rmatrix td{vertical-align:middle}
.rmatrix select{width:100%;min-width:130px;padding:8px 10px;border:1.5px solid var(--line);border-radius:8px;background:#fff;font-family:inherit;font-size:16px}
.rmatrix select:disabled{background:#f2f5f8;color:var(--text-muted)}
.g-sub{display:block;font-weight:400;font-size:11.5px;line-height:1.45;color:var(--text-muted);text-transform:none;letter-spacing:0;margin-top:2px}
.r-leer{color:var(--text-muted);font-size:12.5px}
.r-hint{color:var(--text-muted);font-weight:400;font-size:12.5px}
.r-kurz{font-size:12.5px;color:var(--text-muted);max-width:340px;line-height:1.5}
/* Schmale Geräte: die Spalte „Bereiche" entfällt – sie steht im Bearbeiten-Formular. */
@media(max-width:1000px){.r-kurz,.r-kurz-h{display:none}}
/* Breite Tabellen bleiben auf dem Tablet erreichbar, statt rechts abgeschnitten zu werden. */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.r-vorlagen{margin-bottom:10px;font-size:13px;color:var(--text-muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
/* Auf dem iPad wird aus der Tabelle eine Liste – sonst quetschen sich drei Spalten. */
@media(max-width:1000px){
  .rmatrix thead{display:none}
  .rmatrix,.rmatrix tbody,.rmatrix tr,.rmatrix td{display:block;width:100%}
  .rmatrix tr{border-bottom:1px solid var(--line);padding:10px 14px}
  .rmatrix tr:last-child{border-bottom:none}
  .rmatrix td{border:none;padding:5px 0}
  .rmatrix td[data-t]::before{content:attr(data-t) " Vorgänge";display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:3px}
  .rmatrix td[data-t="eigene"]::before{content:"Bereich / eigene Vorgänge"}
  .rmatrix td[data-t="andere"]::before{content:"Vorgänge anderer"}
  .rmatrix td.r-ohne{display:none}   /* Bereiche ohne Vorgänge: Zeile bleibt kurz */
}

/* ---- Wiederherstellung (V4.43) ---- */
.w-bar{height:14px;border-radius:8px;background:#eaf0f5;overflow:hidden;border:1px solid var(--line)}
.w-bar-in{height:100%;width:2%;border-radius:8px;background:linear-gradient(90deg,var(--blue2),var(--blue));transition:width .25s ease}
.w-lbl{display:block;font-size:14px;margin-bottom:6px}
.w-feld{width:100%;max-width:300px;padding:11px 12px;border:1.5px solid var(--line);border-radius:9px;background:#fbfdff;
        font-size:15px;letter-spacing:.5px}
.w-feld:focus{outline:none;border-color:var(--blue2)}
/* Auswahlliste der Sicherungen – bewusst eine Liste statt einer Tabelle,
   damit auf dem iPad im Hochformat nichts rechts herausläuft. */
.s-liste{border:1px solid var(--line);border-radius:11px;overflow:hidden}
.s-zeile{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.s-zeile:last-child{border-bottom:none}
.s-zeile:hover{background:#f7fafc}
.s-pick{display:flex;align-items:flex-start;gap:12px;flex:1;min-width:0;cursor:pointer}
.s-pick input[type=radio]{width:18px;height:18px;flex:none;margin-top:2px}
/* Ohne .s-pick (Auswahlliste) muss der Text selbst wachsen, sonst kleben Status und
   Knöpfe am Text statt rechts am Rand zu stehen (V4.46). */
.s-txt{min-width:0;flex:1}
.s-name{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;
        line-height:1.45;overflow-wrap:anywhere}
.s-meta{display:block;font-size:12.5px;color:var(--text-muted);margin-top:3px}
@media(max-width:900px){
  .s-zeile{flex-wrap:wrap}
  .s-zeile .btn-sm{margin-left:30px}
}

/* ---- Urlaub & Abwesenheiten (V4.45) ---- */
.u-kopf{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.u-jahr{display:flex;align-items:center;gap:8px;font-size:15px}
.u-st{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
      padding:4px 9px;border-radius:20px;white-space:nowrap;flex:none}
.st-beantragt{background:#fff6e6;color:#8a5a11;border:1px solid #f2dfba}
.st-genehmigt{background:#e8f6ec;color:#1d6b34;border:1px solid #c3e3cd}
.st-abgelehnt{background:#fdeceb;color:#a3352a;border:1px solid #f0d3cf}
.st-storniert{background:#f0f2f5;color:#6b7887;border:1px solid var(--line)}
.u-akt{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.u-akt .w-feld{max-width:280px;flex:1 1 200px}
@media(max-width:700px){ .u-akt .w-feld{max-width:none} }
/* Eben angelegter Eintrag kurz hervorgehoben, Vergangenes blasser (V4.46) */
.s-zeile.s-neu{background:#eaf4ff;box-shadow:inset 3px 0 0 var(--blue)}
.s-zeile.s-vorbei .s-name,.s-zeile.s-vorbei .s-meta{opacity:.6}

/* ============================================================
   Urlaubsplan (V4.47)
   ------------------------------------------------------------
   Vier Farbgruppen, geprüft mit dem Farbprüfer gegen die WEISSE
   Panelfläche: alle Paare, Normalsicht und Farbfehlsichtigkeit
   (schlechtestes Paar Grün↔Orange ΔE 8,4 · Normalsicht 16,3 ·
   Kontrast überall ≥ 3:1). Wer eine Farbe tauscht, prüft neu –
   fünf unterscheidbare Töne bestehen die Prüfung nicht mehr.
   Der Status läuft NICHT über den Farbton, sondern über die
   Schraffur: so bleibt die Ansicht auch im Ausdruck lesbar.
   ============================================================ */
.jp-wrap{--f-urlaub:#2a78d6;--f-krank:#eb6834;--f-fbg:#199e70;--f-sonst:#4a3aa7}
.jp-scroll{--f-urlaub:#2a78d6;--f-krank:#eb6834;--f-fbg:#199e70;--f-sonst:#4a3aa7;
  overflow-x:auto;overflow-y:hidden;background:#fff;border:1px solid var(--line);border-radius:10px;
  -webkit-overflow-scrolling:touch}
.jp{display:grid;grid-template-columns:130px repeat(var(--spalten),var(--zelle));
  align-items:stretch;min-width:min-content}
.jp-monat {--zelle:24px; --hoehe:30px}
.jp-wochen{--zelle:30px; --hoehe:32px}
/* Der laufende Monat wird leicht hervorgehoben – man sucht ihn zuerst. */
.panel.jp-jetzt{box-shadow:var(--shadow),0 0 0 2px var(--blue2)}

/* Namensspalte bleibt beim seitlichen Schieben stehen */
.jp-name{position:sticky;left:0;z-index:2;background:#fff;border-right:1px solid var(--line);
  padding:0 10px;display:flex;align-items:center;font-size:13px;height:var(--hoehe);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jp-name.ich{font-weight:700}
.jp-kopf{background:#fff;border-right:1px solid var(--line)}

.jp-abschnitt{height:var(--hoehe);display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;
  border-left:1px solid var(--line);overflow:hidden;white-space:nowrap}
.jp-tagkopf{height:var(--hoehe);display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:10.5px;line-height:1.15;color:var(--text-muted);border-left:1px solid #f2f5f9}
.jp-tagkopf .tg{font-weight:700;color:var(--ink);font-size:12px}
.jp-tagkopf.frei{background:#f4f6f9}
.jp-tagkopf.heute .tg{color:var(--blue)}

/* Ein Kästchen je Tag. 1px Abstand = der „2px-Trennung"-Gedanke bei dieser Dichte. */
.jp-z{height:var(--hoehe);border-left:1px solid #f2f5f9;background:#fff}
.jp-jahr .jp-z{border-left-color:#f7f9fb}
.jp-z.frei{background:#f4f6f9}
.jp-z.heute{box-shadow:inset 2px 0 0 var(--blue)}

/* Belegte Tage: Farbe = Gruppe, Füllung = Status */
.jp-z.f-urlaub{background:var(--f-urlaub)}
.jp-z.f-krank {background:var(--f-krank)}
.jp-z.f-fbg   {background:var(--f-fbg)}
.jp-z.f-sonst {background:var(--f-sonst)}
/* beantragt = schraffiert und etwas heller; genehmigt = voll */
.jp-z.s-beantragt{
  background-image:repeating-linear-gradient(45deg,
    rgba(255,255,255,.85) 0 2px, rgba(255,255,255,0) 2px 5px)}
/* halbe Tage: nur die halbe Zelle füllen */
.jp-z.halb-l{-webkit-mask-image:linear-gradient(90deg,#000 50%,transparent 50%);
             mask-image:linear-gradient(90deg,#000 50%,transparent 50%)}
.jp-z.halb-r{-webkit-mask-image:linear-gradient(90deg,transparent 50%,#000 50%);
             mask-image:linear-gradient(90deg,transparent 50%,#000 50%)}

/* Legende – Identität steht nie nur in der Farbe, jede Gruppe trägt ihren Namen */
.jp-legende{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;font-size:13px;color:var(--ink)}
.jp-lg{display:inline-flex;align-items:center;gap:7px}
.jp-muster{width:16px;height:16px;border-radius:4px;display:inline-block;flex:none;
  --f-urlaub:#2a78d6;--f-krank:#eb6834;--f-fbg:#199e70;--f-sonst:#4a3aa7}
.jp-muster.f-urlaub{background:var(--f-urlaub)}
.jp-muster.f-krank {background:var(--f-krank)}
.jp-muster.f-fbg   {background:var(--f-fbg)}
.jp-muster.f-sonst {background:var(--f-sonst)}
.jp-muster.s-beantragt{background-image:repeating-linear-gradient(45deg,
  rgba(255,255,255,.85) 0 2px, rgba(255,255,255,0) 2px 5px)}
.jp-muster.frei{background:#f4f6f9;border:1px solid var(--line)}
.jp-muster.heute-marke{background:#fff;border:1px solid var(--line);border-radius:2px;
  border-left:3px solid var(--blue)}

/* Windows-Kontrastmodus: dort werden Hintergrundfarben verworfen. Damit die Kästchen
   nicht spurlos verschwinden, bekommen belegte Tage zusätzlich einen Rahmen. */
@media (forced-colors: active){
  .jp-z[class*=" f-"]{forced-color-adjust:none;border:1px solid CanvasText;background:Highlight}
  .jp-z.s-beantragt{background:Canvas}
  .jp-z.frei{background:Canvas;border-top:1px dotted CanvasText}
}
.btn.btn-an{background:var(--blue);color:#fff;border-color:var(--blue)}

/* Schmaler Bildschirm: Namensspalte und Kästchen kleiner, damit ein MONATSBLOCK
   ohne seitliches Schieben auf das iPad im Hochformat passt.
   Rechnung: 31 × 17 + 88 = 615 px. Auf dem iPad steht die Seitenleiste dort schmal
   (64 px, Regel aus V4.31), es bleiben rund 666 px – die Reserve ist Absicht:
   Bei einer langen Seite kann eine senkrechte Bildlaufleiste die Fensterbreite um
   ~15 px drücken, und die Regel aus V4.31 greift erst ab 821 px. Auf dem Gerät
   selbst passiert das nicht (Safari legt die Leiste über den Inhalt), im
   Testbrowser schon. Sechs Wochen am Stück passen bewusst nicht – dort wird
   gewischt, das ist bei einem Wochenband erwartbar. */
@media(max-width:1100px){
  .jp{grid-template-columns:88px repeat(var(--spalten),var(--zelle))}
  .jp-monat {--zelle:17px; --hoehe:28px}
  .jp-wochen{--zelle:26px}
  .jp-monat .jp-tagkopf .wt{display:none}
  .jp-monat .jp-tagkopf .tg{font-size:10.5px}
  .jp-name{font-size:12px;padding:0 7px}
}