/* ════════════════════════════════════════════════════════════════
   SAFE OS – MVP · Design System
   All About Arbeitsschutz · Björn Wegner
   ════════════════════════════════════════════════════════════════ */
:root{
  /* SAFE-OS-Markenfarben (Icon-Design 31.07.2026): Anthrazit + Petrol/Cyan.
     Variablennamen bleiben --navy/--gold (historisch) – NICHT umbenennen,
     sie werden in vielen JS-Inline-Styles referenziert.
     Dokument-Vorlagen (PDF/Briefkopf) behalten bewusst die
     All-About-Arbeitsschutz-Farben (#1A2B45/#C9A84C) – dort NICHT ersetzen. */
  --navy:#1d1f20; --navy-700:#2b2f34; --gold:#3fa8a0; --gold-dark:#1f6f6a;
  --cyan:#58c2d2;
  --bg:#f4f6fa; --card:#ffffff; --line:#e3e8f0; --text:#1d2733; --muted:#6b7787;
  --green:#1B8A4B; --green-bg:#E8F5E9; --yellow:#C9A300; --yellow-bg:#FFF7DB;
  --red:#C62828; --red-bg:#FDECEC; --blue:#1864c4; --blue-bg:#E8F1FC;
  --shadow:0 1px 3px rgba(29,31,32,.08),0 6px 18px rgba(29,31,32,.06);
  --radius:12px; --radius-sm:8px;
  font-synthesis:none;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blue);text-decoration:none}
h1,h2,h3,h4{margin:0 0 .4em;line-height:1.25;color:var(--navy)}
h1{font-size:1.5rem;letter-spacing:-.01em}
h2{font-size:1.2rem}
h3{font-size:1.02rem}
small{color:var(--muted)}
button{font-family:inherit}

/* ── Layout ───────────────────────────────────────────── */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.sidebar{background:var(--navy);color:#dfe6f1;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{padding:20px 18px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand .logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.15rem;color:#fff;letter-spacing:.02em}
.brand .logo .mark{width:30px;height:30px;border-radius:7px;background:var(--gold);color:var(--navy);display:grid;place-items:center;font-weight:800;font-size:.95rem}
.brand .sub{font-size:.72rem;color:var(--gold);margin-top:6px;letter-spacing:.04em;text-transform:uppercase}
.nav{padding:10px 10px;flex:1;overflow-y:auto}
.nav .grp{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:#7e8cab;margin:14px 12px 6px}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:8px;color:#cdd6e6;font-size:.9rem;cursor:pointer;margin-bottom:2px}
.nav a .ic{width:20px;text-align:center;opacity:.9}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.active{background:var(--gold);color:var(--navy);font-weight:600}
.nav a .badge{margin-left:auto;background:var(--red);color:#fff;border-radius:20px;font-size:.68rem;padding:1px 7px;font-weight:700}
.nav a.active .badge{background:var(--navy);color:#fff}
.nav a.navadd{color:var(--gold);font-weight:600}
.nav a.navadd:hover{background:rgba(63,168,160,.14);color:#fff}
.sidebar .foot{padding:12px 16px;border-top:1px solid rgba(255,255,255,.08);font-size:.72rem;color:#8493b0}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{background:var(--card);border-bottom:1px solid var(--line);padding:12px 26px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:20}
.topbar .crumb{font-size:.8rem;color:var(--muted)}
.topbar .crumb b{color:var(--text)}
.mandant-switch{margin-left:auto;display:flex;align-items:center;gap:8px}
.mandant-switch label{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.mandant-switch select{padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:.88rem;min-width:200px}
.topbar-mandant{margin-left:auto;font-size:.85rem;color:var(--navy);display:flex;align-items:center;gap:6px}
.content{padding:24px 26px 60px;width:100%}
/* Auffällige Warnleiste (Datensicherung inaktiv / NAS nicht verbunden) */
.storage-warn-in{background:#B67A1A;color:#fff;padding:10px 26px;font-size:.85rem;line-height:1.45;position:sticky;top:0;z-index:15}
/* Konflikt = rot, nicht bernstein: hier muss jemand entscheiden, es ist kein Hinweis */
.storage-warn-in.warn-konflikt{background:#B0281B;cursor:pointer}
.storage-warn-in code{background:rgba(255,255,255,.22);padding:1px 6px;border-radius:5px;font-size:.92em}
/* Menü-Umschalter (☰) + Abdunklung – nur in der Mobil-Ansicht sichtbar */
.navtoggle{display:none;place-items:center;width:40px;height:40px;flex:0 0 auto;border:1px solid var(--line);
  border-radius:9px;background:#fff;color:var(--navy);font-size:1.25rem;cursor:pointer;line-height:1}
.nav-backdrop{display:none}

/* Mandant-Auswahl in der Sidebar (prominent, oben) */
.mandant-picker{padding:14px 16px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.mandant-picker label{display:block;font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);margin-bottom:6px;font-weight:700}
.mandant-picker select{width:100%;padding:9px 10px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:var(--navy-700);color:#fff;font-size:.9rem;font-weight:600;cursor:pointer}
.mandant-picker select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(63,168,160,.25)}
.mandant-picker select option{color:#1d1f20;background:#fff}

/* ── Cards / grid ─────────────────────────────────────── */
.grid{display:grid;gap:16px}
.grid.k4{grid-template-columns:repeat(4,1fr)}
.grid.k3{grid-template-columns:repeat(3,1fr)}
.grid.k2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1000px){.grid.k4{grid-template-columns:repeat(2,1fr)}.grid.k3,.grid.k2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.card.pad0{padding:0;overflow:hidden}
.card h3{margin-bottom:.6em}
.section-head{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.section-head h1{margin:0}
.section-head .actions{margin-left:auto;display:flex;gap:8px}

/* KPI */
.kpi{position:relative}
.kpi .val{font-size:2rem;font-weight:800;color:var(--navy);letter-spacing:-.02em;line-height:1}
.kpi .lbl{font-size:.8rem;color:var(--muted);margin-top:6px}
.kpi .ic{position:absolute;top:14px;right:16px;font-size:1.3rem;opacity:.35}
.kpi.good .val{color:var(--green)} .kpi.warn .val{color:var(--yellow)} .kpi.bad .val{color:var(--red)}

/* Modul-/Betriebs-Kacheln (Dashboard + Gruppen-Übersicht) */
.mtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1000px){.mtiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.mtiles{grid-template-columns:1fr}}
.mtile{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;cursor:pointer;transition:.12s;display:flex;flex-direction:column;gap:5px}
.mtile:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 6px 18px rgba(29,31,32,.12)}
.mtile:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(63,168,160,.25)}
.mtile .ic{font-size:1.5rem}
.mtile .t{font-weight:700;color:var(--navy);font-size:.95rem}
.mtile .s{font-size:.8rem;color:var(--muted)}
.mtile .badge{position:absolute;top:12px;right:14px;background:var(--red);color:#fff;border-radius:20px;font-size:.68rem;padding:1px 8px;font-weight:700}
.mtile .amp{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}

/* Kopfzeile einer Karte: Symbol + Überschrift + Zusatz + Knopf in EINER Zeile,
   auf schmalen Bildschirmen umbrechend statt zusammengequetscht. */
.cardhead{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.cardhead h3{margin:0}
.cardhead .btn{margin-left:auto}
@media(max-width:820px){
  .cardhead{gap:8px}
  .cardhead h3{font-size:.98rem;line-height:1.3}
  .cardhead .btn{margin-left:auto;white-space:nowrap}
}

/* Ordner im Arbeitsmittel-Kataster (07.08.2026).
   Ein <tbody> je Gruppe INNERHALB einer Tabelle – so bleiben die Spalten
   ausgerichtet und die Handy-Ansicht unverändert. Auf-/Zuklappen läuft über
   eine KLASSE, nicht über inline style: Der Suchfilter setzt
   tr.style.display='' und würde inline zugeklappte Ordner sonst bei jedem
   Tastendruck wieder aufreißen (Muster wie .hazcat). */
tbody.amgrp .grphead td{background:#f4f6fa;border-top:1px solid var(--line);
  cursor:pointer;user-select:none;font-weight:700;color:var(--navy);padding:10px 10px}
tbody.amgrp .grphead .arr{display:inline-block;transition:transform .15s;margin-right:7px;color:var(--muted)}
tbody.amgrp.open .grphead .arr{transform:rotate(90deg)}
tbody.amgrp:not(.open) tr:not(.grphead){display:none}
tbody.amgrp .grpz{font-weight:500;font-size:.78rem;color:var(--muted);margin-left:10px}
tbody.amgrp .grpz b{font-weight:700}

/* ── Buttons ──────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:9px;border:1px solid transparent;
  font-size:.88rem;font-weight:600;cursor:pointer;background:#eef1f6;color:var(--navy);transition:.12s}
.btn:hover{filter:brightness(.97)}
.btn.primary{background:var(--navy);color:#fff}
.btn.gold{background:var(--gold);color:var(--navy)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--navy)}
.btn.sm{padding:6px 11px;font-size:.8rem}
.btn.danger{background:var(--red-bg);color:var(--red)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ── Tables ───────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:.88rem}
.taet-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Beschreibung, Arbeitsmittel, Gefahrstoffe und Standorte einer Taetigkeit.
   Steht bewusst UNTER der Knopfleiste und nutzt die volle Breite - vorher
   quetschte sich derselbe Text neben sechs Knoepfe in eine handbreite Spalte
   und wurde zwanzig Zeilen hoch. Aufzaehlungen laufen jetzt hintereinander
   durch, wie es sich fuer Fliesstext gehoert. */
.taet-meta{margin-top:6px;line-height:1.5;max-width:110ch}
.taet-meta > div{margin-top:3px}
thead th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  padding:11px 14px;border-bottom:1px solid var(--line);background:#fafbfd;position:sticky;top:0}
tbody td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:hover{background:#fafbff}
tbody tr:last-child td{border-bottom:none}
.tbl-wrap{overflow:auto}

/* ── Badges / pills ───────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:.74rem;font-weight:600;white-space:nowrap}
.pill.green{background:var(--green-bg);color:var(--green)}
.pill.yellow{background:var(--yellow-bg);color:var(--yellow)}
.pill.red{background:var(--red-bg);color:var(--red)}
.pill.blue{background:var(--blue-bg);color:var(--blue)}
.pill.grey{background:#eef1f6;color:var(--muted)}
.pill.navy{background:var(--navy);color:#fff}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.dot.green{background:var(--green)}.dot.yellow{background:var(--yellow)}.dot.red{background:var(--red)}
.typ{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;font-weight:800;font-size:.72rem;color:#fff}
.typ.S{background:#1B8A4B}.typ.T{background:#1864c4}.typ.O{background:#7b5cd6}.typ.P{background:#c87a1e}

/* ── Forms ────────────────────────────────────────────── */
.field{margin-bottom:14px}
.field label{display:block;font-size:.78rem;font-weight:600;color:var(--navy);margin-bottom:5px}
.field .hint{font-weight:400;color:var(--muted);font-size:.74rem}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:.9rem;font-family:inherit;background:#fff;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(63,168,160,.18)}
textarea{resize:vertical;min-height:64px}
.row{display:grid;gap:12px}
.row.c2{grid-template-columns:1fr 1fr}.row.c3{grid-template-columns:1fr 1fr 1fr}
@media(max-width:700px){.row.c2,.row.c3{grid-template-columns:1fr}}

/* Unterschriften-Fläche (Finger/Maus) – gemeinsam nutzbar (Begehung hat ihre eigene
   inline-Variante .beg-sig; diese hier ist für alle anderen Module gedacht, z.B. Prüfblatt). */
.sig-canvas{border:1px solid var(--line);border-radius:8px;width:360px;max-width:100%;height:110px;background:#fff;touch-action:none;display:block}

/* ── Info-Tooltip (ⓘ beim Drüberfahren) – global nutzbar ── */
.help{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;
  background:var(--navy);color:#fff;font-size:.62rem;font-weight:700;font-style:normal;cursor:help;
  margin-left:5px;vertical-align:middle;position:relative;line-height:1}
.help::after{content:attr(data-tip);position:absolute;left:50%;top:160%;bottom:auto;transform:translateX(-50%) scale(.96);
  transform-origin:top center;background:#1d2733;color:#fff;padding:9px 12px;border-radius:8px;font-size:.74rem;
  font-weight:400;line-height:1.45;width:248px;max-width:60vw;text-align:left;white-space:normal;z-index:9000;
  box-shadow:0 8px 24px rgba(0,0,0,.28);opacity:0;visibility:hidden;transition:opacity .12s,transform .12s;pointer-events:none}
.help::before{content:"";position:absolute;left:50%;top:160%;bottom:auto;transform:translateX(-50%) translateY(-7px);
  border:6px solid transparent;border-bottom-color:#1d2733;z-index:9001;opacity:0;visibility:hidden;transition:opacity .12s;pointer-events:none}
.help:hover::after{opacity:1;visibility:visible;transform:translateX(-50%) scale(1)}
.help:hover::before{opacity:1;visibility:visible}
/* ── Feldhinweis: liegt zurueckgenommen da, tritt beim Ueberfahren hervor ──────
   Bjoerns Vorgabe vom 24.08.2026, woertlich: „fuer solche aufzeigen oder Informationen
   oder tipps, soll der text den wir Raten oder empfehlen aus einer Unteren ebene kommen
   und wenn man dann ueber das feld Faehrt muss das system es in den Fordergrung heben".

   Anlass: Im Dialog „Erscheinungsbild & Begruessung" stand `class="help"` um einen
   Hilfetext. Diese Klasse ist der 15-Pixel-Tooltip-KREIS und erwartet den Text im
   Attribut data-tip - der Text wurde in den Kreis gequetscht und quoll als weisse
   Schrift auf hellem Grund heraus. Bjoern hat es beim Arbeiten gefunden.

   Unterschied zu `.help`: `.help` ist der Kreis mit dem „i", den man gezielt ansteuert.
   `.feldhinweis` ist ein Vorschlag oder eine Empfehlung, die zum Feld gehoert - sie
   bleibt lesbar, draengt sich aber nicht auf, und wird deutlich, sobald man mit Maus
   oder Tastatur an das Feld geht. */
.field .feldhinweis{margin-top:5px;font-size:.72rem;line-height:1.4;color:var(--muted);
  opacity:.7;position:relative;z-index:0;padding:2px 0;border-radius:6px;
  transition:opacity .14s,color .14s,box-shadow .14s,background .14s,padding .14s}
.field:hover .feldhinweis,.field:focus-within .feldhinweis{opacity:1;color:var(--navy);
  z-index:20;background:#fff;padding:7px 9px;margin-left:-9px;margin-right:-9px;
  box-shadow:0 6px 18px rgba(0,0,0,.14)}
/* Ohne Zeigegeraet (Touch) gibt es kein Ueberfahren - dort steht der Hinweis dauerhaft
   lesbar, sonst waere er auf dem Handy gar nicht erreichbar. */
@media (hover:none){.field .feldhinweis{opacity:1;color:var(--muted)}}

/* Felder mit Beispiel-Platzhalter sichtbarer machen */
.field input::placeholder,.field textarea::placeholder{color:#aab2bd;font-style:italic}

/* ── Modal ────────────────────────────────────────────── */
.overlay{position:fixed;inset:0;background:rgba(20,30,48,.5);display:flex;align-items:flex-start;justify-content:center;
  padding:40px 16px;z-index:100;overflow:auto}
.modal{background:#fff;border-radius:14px;width:100%;max-width:720px;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:pop .18s ease}
.modal.wide{max-width:980px}
@keyframes pop{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
.modal .mhead{display:flex;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}
.modal .mhead h2{margin:0}
.modal .mhead .x{margin-left:auto;cursor:pointer;font-size:1.4rem;color:var(--muted);line-height:1}
.modal .mbody{padding:22px;max-height:64vh;overflow:auto}
.modal .mfoot{padding:14px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;background:#fafbfd;border-radius:0 0 14px 14px}

/* ── GBU wizard ───────────────────────────────────────── */
.steps{display:flex;gap:0;margin-bottom:22px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.steps .step{flex:1;padding:13px 10px;text-align:center;font-size:.8rem;color:var(--muted);border-right:1px solid var(--line);position:relative}
.steps .step:last-child{border-right:none}
.steps .step .n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#e6eaf1;color:var(--muted);font-weight:700;font-size:.76rem;margin-right:6px}
.steps .step.done{color:var(--green)} .steps .step.done .n{background:var(--green);color:#fff}
.steps .step.active{color:var(--navy);font-weight:700;background:#fafaff} .steps .step.active .n{background:var(--gold);color:var(--navy)}

.hazpick{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.hazcat{border-bottom:1px solid var(--line)}
.hazcat:last-child{border-bottom:none}
.hazcat .ch{display:flex;align-items:center;gap:10px;padding:11px 14px;background:#fafbfd;cursor:pointer;font-weight:600;color:var(--navy)}
.hazcat .ch .cnt{margin-left:auto;font-size:.74rem;color:var(--muted);font-weight:500}
.hazcat .items{display:none;padding:4px 0}
.hazcat.open .items{display:block}
.hazcat.open .ch .arr{transform:rotate(90deg)}
.hazitem{display:flex;align-items:flex-start;gap:10px;padding:8px 16px 8px 30px;cursor:pointer;font-size:.86rem}
.hazitem:hover{background:#f7f9ff}
.hazitem input{width:auto;margin-top:3px}
/* Fuer das Gewerk der Taetigkeit kuratierte Gefaehrdung (21.08.2026). Nur eine
   Hervorhebung – ausgeblendet wird nichts, siehe Kommentar in js/gbu.js pickHazards. */
.hazitem.hazgewerk{background:#f2faf9;border-left:3px solid #3fa8a0;padding-left:27px}
.hazitem.hazgewerk:hover{background:#e8f4f2}
.hazitem .g{flex:1}
.hazitem .g .sub{font-size:.76rem;color:var(--muted)}
.hazitem .law{font-size:.7rem;color:var(--blue);background:var(--blue-bg);padding:1px 7px;border-radius:5px;white-space:nowrap}
.hazcat .items .hazsub{font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;padding:9px 16px 3px 30px}

/* Geführte „Erste Schritte"-Tour – fixierter Weiter-Button */
.guide-fab{position:fixed;right:20px;bottom:20px;z-index:900;display:flex;align-items:center;gap:12px;
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold,#3fa8a0);
  border-radius:12px;box-shadow:0 8px 28px rgba(20,35,60,.18);padding:12px 14px 12px 16px;max-width:min(92vw,440px)}
.guide-fab .gf-info{font-size:.82rem;line-height:1.3;color:var(--navy,#1d1f20)}
.guide-fab .gf-info small{color:var(--muted)}
.guide-fab .gf-x{cursor:pointer;color:var(--muted);font-size:1.3rem;line-height:1;padding:0 2px;align-self:flex-start}
.guide-fab .gf-x:hover{color:var(--red)}
@media(max-width:640px){.guide-fab{right:10px;left:10px;bottom:10px;max-width:none}}

/* risk matrix mini */
.riskcalc{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.riskcalc .seg{display:flex;flex-direction:column;align-items:center}
.riskcalc .seg label{font-size:.66rem;color:var(--muted);margin-bottom:3px;text-transform:uppercase;letter-spacing:.03em}
.riskcalc select{width:58px;padding:6px;text-align:center}
.riskcalc .eq{font-weight:800;color:var(--muted);font-size:1.1rem;margin:0 2px}
.riskscore{min-width:96px;text-align:center;padding:7px 10px;border-radius:9px;font-weight:800;font-size:.95rem}
.riskscore.green{background:var(--green-bg);color:var(--green)}
.riskscore.yellow{background:var(--yellow-bg);color:var(--yellow)}
.riskscore.red{background:var(--red-bg);color:var(--red)}
/* „nicht bewertet" – bewusst neutral, damit eine unbeurteilte Zeile nie
   wie ein niedriges Risiko aussieht (Vier-Augen-Review 13.08.2026). */
.riskscore.grau,.risk.grau{background:#e9edf2;color:#6b7787;font-weight:600}

.measure-row{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px dashed var(--line)}
.measure-row:last-child{border-bottom:none}
.measure-row .m{flex:1;font-size:.85rem}
.measure-row .m small{display:block;color:var(--muted);font-size:.72rem}

.empty{text-align:center;padding:46px 20px;color:var(--muted)}
.empty .big{font-size:2.4rem;margin-bottom:8px;opacity:.5}

.tag{display:inline-block;background:#eef1f6;color:var(--navy);padding:2px 9px;border-radius:6px;font-size:.74rem;margin:2px 4px 2px 0}
.legalref{font-size:.73rem;color:var(--blue)}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;
  padding:11px 20px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:200;font-size:.88rem;
  animation:tin .25s ease}
@keyframes tin{from{transform:translate(-50%,12px);opacity:0}to{transform:translate(-50%,0);opacity:1}}

.banner{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;border-radius:10px;font-size:.86rem;margin-bottom:18px}
.banner.info{background:var(--blue-bg);color:#11447f}
.banner.warn{background:var(--yellow-bg);color:#7a6500}
.banner .bi{font-size:1.1rem}

.progress{height:8px;background:#e6eaf1;border-radius:20px;overflow:hidden}
.progress > span{display:block;height:100%;background:var(--green);border-radius:20px}

/* GHS-Piktogramm mit Hover-Tooltip (Bild + Code + Klartext-Bedeutung) */
.ghschip{position:relative;display:inline-block;vertical-align:middle}
.ghschip .ghstip{position:absolute;left:50%;bottom:130%;transform:translateX(-50%);display:none;
  background:#1d1f20;color:#fff;font-size:.72rem;line-height:1.4;padding:6px 9px;border-radius:8px;
  white-space:nowrap;text-align:center;z-index:9999;box-shadow:0 6px 16px rgba(0,0,0,.3);pointer-events:none}
.ghschip .ghstip img{display:block;margin:0 auto 3px}
.ghschip:hover .ghstip{display:block}

/* ── Mobil-Ansicht (Handy/Tablet hochkant) ────────────────
   Sidebar wird ein einblendbares Menü, der Inhalt nutzt die volle Breite.
   Behebt die „gequetschte" Ansicht (feste 248px-Spalte auf schmalem Display). */
@media(max-width:820px){
  .app{grid-template-columns:1fr}
  .navtoggle{display:grid}
  .sidebar{position:fixed;top:0;left:0;height:100vh;width:min(86vw,300px);z-index:120;
    transform:translateX(-100%);transition:transform .25s ease;box-shadow:2px 0 26px rgba(0,0,0,.4)}
  .sidebar.open{transform:none}
  .nav-backdrop.show{display:block;position:fixed;inset:0;background:rgba(10,18,32,.5);z-index:110}
  .topbar{padding:10px 12px;gap:10px;position:sticky}
  .topbar .crumb{font-size:.82rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar-mandant{font-size:.8rem}
  .content{padding:16px 14px 72px}
  .storage-warn-in{padding:9px 14px;font-size:.8rem}
  .section-head{flex-wrap:wrap}
  .section-head .actions{margin-left:auto}
  /* iOS zoomt nicht mehr ins Feld, wenn die Schrift >=16px ist */
  input,select,textarea{font-size:16px}
  /* Modale sitzen näher am Rand und lassen mehr Höhe */
  .overlay{padding:12px 8px}
  .modal .mhead{padding:14px 16px}
  .modal .mbody{padding:16px;max-height:76vh}
  .modal .mfoot{padding:12px 16px}
  .help::after{width:210px;max-width:78vw}
  .tbl-wrap{-webkit-overflow-scrolling:touch}

  /* ── Tabellen mit .stack werden auf dem Handy zu KARTEN ──────────────
     Sechs Spalten mit Auswahlfeldern passen auf kein Telefon – man muss
     quer scrollen und verliert die Zuordnung. Deshalb: jede Zeile wird eine
     Karte, jede Zelle bekommt ihre Spaltenüberschrift aus data-l davor.
     Die Tabelle bleibt im HTML eine Tabelle (Druck/PDF unverändert). */
  table.stack{border:0}
  /* display:none statt "unsichtbar positioniert": ein absolut positionierter
     thead beansprucht weiter Layout-Breite und schiebt die Seite quer
     (gemessen 24.07.2026: 685 px bei 375 px Bildschirm). Die Spaltennamen
     stehen ohnehin über data-l an jeder Zelle. */
  table.stack thead{display:none}
  table.stack tbody tr{
    display:block;margin:0 0 12px;padding:12px 14px;
    background:var(--card,#fff);border:1px solid var(--line,#e3e8ef);
    border-left:4px solid var(--gold,#3fa8a0);border-radius:10px;
    box-shadow:0 1px 3px rgba(16,24,40,.06)}
  table.stack tbody td{
    display:block;width:auto;border:0;padding:7px 0;
    border-bottom:1px dashed var(--line,#e3e8ef)}
  table.stack tbody td:last-child{border-bottom:0;padding-bottom:0}
  table.stack tbody td[data-l]:not([data-l=""])::before{
    content:attr(data-l);display:block;
    font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    color:var(--muted,#6b7787);margin-bottom:4px}
  /* Die erste Zelle ist die Überschrift der Karte */
  table.stack tbody td:first-child{padding-top:0}
  table.stack tbody td:first-child::before{display:none}
  table.stack tbody td:first-child b{font-size:1rem;line-height:1.35}
  /* Risiko-Rechner: Felder gross genug für den Daumen, kein Umbruch */
  table.stack .riskcalc{flex-wrap:wrap;gap:8px;align-items:center}
  table.stack .riskcalc select{width:60px;padding:9px 6px}
  table.stack td[data-l=""]{text-align:left !important}
  table.stack td[data-l=""] .btn{width:100%;justify-content:center}
  /* Leere Zeile ("keine Gefährdungen") nicht als Karte verkleiden */
  table.stack tbody tr:has(td[colspan]){border-left-color:var(--line,#e3e8ef);text-align:center}
  /* Knopfleiste einer Tätigkeit: umbrechen statt quer schieben */
  .taet-head{flex-direction:column;gap:8px}
  .taet-head > div:first-child{width:100%}
  .taet-head .btn{flex:1 1 46%;justify-content:center;min-height:40px}
  /* nichts darf breiter sein als der Bildschirm */
  /* break-word statt anywhere (07.08.2026): anywhere laesst Woerter an JEDER
     Stelle brechen UND setzt die Mindestbreite auf ein Zeichen herab - in einer
     Flex-Kopfzeile schrumpfte die Ueberschrift dadurch auf "Standort/e".
     break-word bricht ueberlange Woerter genauso um, behaelt aber das ganze
     Wort als Mindestbreite - die Zeile bricht dann sauber statt der Buchstaben. */
  .content, .card{max-width:100%;overflow-wrap:break-word}
  .steps{flex-wrap:wrap}
  .steps .step{flex:1 1 40%}
}
@media(max-width:480px){
  h1{font-size:1.3rem}
  .section-head .actions{width:100%;margin-left:0;flex-wrap:wrap;gap:8px}
  /* flex:1 allein quetschte 5 Knöpfe in EINE Zeile – "Entwurf speichern" brach
     dann buchstabenweise um. Mit min-width umbrechen sie stattdessen sauber
     in mehrere Zeilen (gemessen 24.07.2026 auf 375 px). */
  /* white-space:nowrap ist am 07.08.2026 entfallen: Es war die Notbremse gegen
     buchstabenweises Zerbrechen langer Beschriftungen. Seit overflow-wrap
     break-word (statt anywhere) brechen Wörter nicht mehr mitten drin - dafür
     schob ein langer Knopf ("GBU importieren (Erstbegehung / Bestand)") die
     ganze Seite quer (gemessen: 427 px Inhalt auf 362 px Fläche). Jetzt darf
     die Beschriftung an Leerzeichen umbrechen, die Seite bleibt schmal. */
  .section-head .actions .btn{
    flex:1 1 calc(50% - 4px);min-width:140px;justify-content:center;
    min-height:42px;white-space:normal;text-align:center;line-height:1.25}
}