/* Brady Digital — Design-Tokens laut Style-Guide (BB 20 Bereiche/Brady Digital/Style-Guide.md).
   Dunkle App-UI, Brady-Gruen als EINZIGER Akzent, Outfit + Inter lokal vendort. */
@font-face{font-family:'Outfit';src:url('assets/fonts/Outfit-latin.woff2')format('woff2');font-weight:400 800;font-display:block;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Outfit';src:url('assets/fonts/Outfit-latin-ext.woff2')format('woff2');font-weight:400 800;font-display:block;unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB}
@font-face{font-family:'Inter';src:url('assets/fonts/Inter-latin.woff2')format('woff2');font-weight:300 700;font-display:block;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'Inter';src:url('assets/fonts/Inter-latin-ext.woff2')format('woff2');font-weight:300 700;font-display:block;unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB}

:root{
  --bd-bg:#2a2a2a; --bd-bg-2:#303030; --bd-card:#363636; --bd-card-hover:#3d3d3d;
  --bd-accent:#CCFF00; --bd-accent-dim:rgba(204,255,0,.12); --bd-accent-medium:rgba(204,255,0,.15);
  --bd-text:#fff; --bd-text-body:#ccc; --bd-text-secondary:#aaa; --bd-text-muted:#888;
  --bd-border:rgba(255,255,255,.08); --bd-border-accent:rgba(204,255,0,.25);
  --r:16px; --tap:56px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overscroll-behavior:none}
body{
  background:var(--bd-bg);color:var(--bd-text-body);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.55;-webkit-text-size-adjust:100%;
  touch-action:manipulation;
}
h1,h2,h3,.ff-o{font-family:'Outfit','Inter',sans-serif;line-height:1.2}
button,input,select,textarea{font-family:inherit;font-size:16px;color:inherit}
button{cursor:pointer;border:none;background:none}
.hl{color:var(--bd-accent);font-weight:600}
.muted{color:var(--bd-text-muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Shell ---------- */
#app{min-height:100%;display:flex;flex-direction:column}
.topbar{height:6px;background:var(--bd-accent);flex:none}
.kopf{
  display:flex;align-items:center;gap:14px;padding:10px 18px;
  padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right));
  background:var(--bd-bg-2);border-bottom:1px solid var(--bd-border);
  position:sticky;top:0;z-index:30;flex:none;
}
.kopf .logo{height:26px;width:auto;flex:none}
.kopf-titel{font-family:'Outfit';font-weight:700;font-size:17px;color:var(--bd-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kopf-meta{font-size:12px;color:var(--bd-text-muted);white-space:nowrap}
.kopf-rechts{margin-left:auto;display:flex;gap:8px;align-items:center;flex:none}

.label{font-family:'Outfit';font-size:11px;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;color:var(--bd-accent)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 18px;border-radius:12px;
  font-family:'Outfit';font-weight:700;font-size:14px;letter-spacing:.5px;
  background:transparent;border:1px solid var(--bd-border);color:var(--bd-text-body);
}
.btn:active{background:var(--bd-card-hover)}
.btn-primary{background:var(--bd-accent);color:var(--bd-bg);border-color:var(--bd-accent)}
.btn-primary:active{filter:brightness(.9)}
.btn-gross{min-height:var(--tap);font-size:16px;padding:14px 26px;border-radius:14px}
.btn-icon{min-width:44px;padding:10px 12px}
.btn-warn{border-color:rgba(255,255,255,.18);color:var(--bd-text-muted)}

/* ---------- Startbildschirm ---------- */
.start{max-width:820px;margin:0 auto;padding:34px 20px 80px;width:100%}
.start h1{font-size:34px;font-weight:800;color:var(--bd-text);margin:10px 0 4px;letter-spacing:-.5px}
.start .sub{color:var(--bd-text-secondary);font-style:italic;margin:0 0 26px}
.audit-karte{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:var(--bd-card);border:1px solid var(--bd-border);border-radius:var(--r);
  padding:16px 18px;margin-bottom:12px;min-height:var(--tap);
}
.audit-karte:active{background:var(--bd-card-hover)}
.audit-karte .nm{font-family:'Outfit';font-weight:700;font-size:17px;color:var(--bd-text)}
.audit-karte .dt{font-size:13px;color:var(--bd-text-muted)}
.audit-karte .fort{margin-left:auto;text-align:right;font-size:12px;color:var(--bd-text-muted);flex:none}
.audit-karte .fort b{display:block;font-family:'Outfit';font-size:20px;color:var(--bd-accent)}
.pill{display:inline-block;padding:3px 9px;border-radius:999px;font-family:'Outfit';
  font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.pill-ok{background:var(--bd-accent-dim);color:var(--bd-accent);border:1px solid var(--bd-border-accent)}
.pill-neutral{background:rgba(255,255,255,.06);color:var(--bd-text-muted)}
.leer{border:1px dashed var(--bd-border);border-radius:var(--r);padding:30px;text-align:center;color:var(--bd-text-muted)}

/* ---------- Audit-Layout ---------- */
.buehne{flex:1;display:flex;min-height:0}
.rail{
  width:232px;flex:none;background:var(--bd-bg-2);border-right:1px solid var(--bd-border);
  overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px 0 40px;
  padding-left:env(safe-area-inset-left);
}
.rail-gruppe{font-family:'Outfit';font-size:10px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--bd-text-muted);padding:16px 18px 6px}
.rail-eintrag{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:12px 16px;min-height:48px;border-left:3px solid transparent;color:var(--bd-text-body);
  font-family:'Outfit';font-weight:600;font-size:14px;
}
.rail-eintrag:active{background:var(--bd-card)}
.rail-eintrag.aktiv{background:var(--bd-card);border-left-color:var(--bd-accent);color:var(--bd-text)}
.rail-eintrag .kn{flex:none;width:22px;font-weight:800;color:var(--bd-accent);font-size:13px}
.rail-eintrag .tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-eintrag .zl{margin-left:auto;font-size:11px;color:var(--bd-text-muted);flex:none;
  font-family:'Inter';font-weight:500}
.rail-eintrag .zl.voll{color:var(--bd-accent)}

.inhalt{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:22px 26px 140px;min-width:0;
  padding-right:max(26px,env(safe-area-inset-right))}
.inhalt-mitte{max-width:900px;margin:0 auto}

/* Schmal (iPad Portrait / iPhone): Rail wird zur Tab-Leiste */
@media (max-width:880px){
  .buehne{flex-direction:column}
  .rail{width:100%;display:flex;overflow-x:auto;overflow-y:hidden;padding:0;
    border-right:none;border-bottom:1px solid var(--bd-border);position:sticky;top:0;z-index:20}
  .rail-gruppe{display:none}
  .rail-eintrag{width:auto;flex:none;border-left:none;border-bottom:3px solid transparent;
    padding:12px 14px;white-space:nowrap}
  .rail-eintrag.aktiv{border-left-color:transparent;border-bottom-color:var(--bd-accent)}
  .rail-eintrag .tx{max-width:130px}
  .inhalt{padding:18px 16px 150px}
}

/* ---------- Bloecke / Karten ---------- */
.block-kopf{display:flex;align-items:baseline;gap:12px;margin:0 0 4px}
.block-kopf .sq{width:14px;height:14px;background:var(--bd-accent);flex:none;align-self:center}
.block-kopf h2{font-size:24px;font-weight:700;color:var(--bd-text);margin:0}
.block-lead{color:var(--bd-text-secondary);font-style:italic;margin:0 0 22px;font-size:15px}

.karte{background:var(--bd-card);border:1px solid var(--bd-border);border-radius:var(--r);
  padding:18px;margin-bottom:14px}
.karte-kopf{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.karte-kopf h3{font-family:'Outfit';font-size:15px;font-weight:700;color:var(--bd-accent);margin:0;flex:1}
.karte-nr{font-family:'Outfit';font-size:11px;font-weight:700;color:var(--bd-bg);
  background:var(--bd-accent);border-radius:6px;padding:2px 8px;flex:none}

.feld{margin-bottom:18px}
.feld > label,.feld-titel{display:block;font-family:'Outfit';font-weight:700;font-size:14px;
  color:var(--bd-text);margin-bottom:8px}
.feld-hint{font-size:12px;color:var(--bd-text-muted);margin:-4px 0 8px}

input[type=text],input[type=date],input[type=number],textarea,select{
  width:100%;background:var(--bd-bg);border:1px solid var(--bd-border);border-radius:12px;
  padding:13px 14px;color:var(--bd-text);font-size:16px;min-height:48px;
  -webkit-appearance:none;appearance:none;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--bd-border-accent);
  box-shadow:0 0 0 3px var(--bd-accent-dim)}
textarea{min-height:92px;resize:vertical;line-height:1.5}
input::placeholder,textarea::placeholder{color:#6a6a6a}
select{background-image:linear-gradient(45deg,transparent 50%,var(--bd-accent) 50%),linear-gradient(135deg,var(--bd-accent) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px;background-repeat:no-repeat;padding-right:42px}

/* ---------- Chips = das Tap-Prinzip ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:9px 15px;
  border-radius:999px;border:1px solid var(--bd-border);background:var(--bd-bg);
  color:var(--bd-text-body);font-family:'Outfit';font-weight:600;font-size:14px;
  user-select:none;-webkit-user-select:none;
}
.chip:active{background:var(--bd-card-hover)}
.chip.an{background:var(--bd-accent);color:var(--bd-bg);border-color:var(--bd-accent)}
.chip.an .hk{color:var(--bd-bg)}
.chip-klein{min-height:38px;padding:6px 13px;font-size:13px}
.chip-vorschlag{border-style:dashed;color:var(--bd-text-secondary)}
.chip-vorschlag::before{content:'+';font-weight:800;color:var(--bd-accent);margin-right:2px}
.chip-vorschlag.an::before{color:var(--bd-bg)}

/* Signal-Kacheln (B3) */
.signale{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.signal{
  border:1px solid var(--bd-border);border-radius:14px;background:var(--bd-bg);overflow:hidden;
}
.signal.an{border-color:var(--bd-accent);background:var(--bd-accent-dim)}
.signal-tap{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px;min-height:var(--tap)}
.signal-tap .hk{width:24px;height:24px;border-radius:7px;border:2px solid var(--bd-text-muted);flex:none;
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:transparent}
.signal.an .signal-tap .hk{background:var(--bd-accent);border-color:var(--bd-accent);color:var(--bd-bg)}
.signal-tap .tt{font-family:'Outfit';font-weight:600;font-size:14px;color:var(--bd-text);line-height:1.3}
.signal-detail{padding:0 14px 14px}
.signal-detail input{min-height:44px}

/* Reihen (Zeitfresser / Werkzeuge / Konten / Entscheidungen) */
.reihe{background:var(--bd-bg);border:1px solid var(--bd-border);border-radius:14px;
  padding:14px;margin-bottom:12px}
.reihe-kopf{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.reihe-kopf .nr{font-family:'Outfit';font-weight:800;font-size:12px;color:var(--bd-accent);flex:none}
.reihe-kopf .weg{margin-left:auto;color:var(--bd-text-muted);font-size:20px;line-height:1;
  min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
.gitter2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:620px){.gitter2{grid-template-columns:1fr}}

/* Stunden-Stepper */
.stepper{display:flex;align-items:center;gap:10px}
.stepper button{width:48px;height:48px;border-radius:12px;border:1px solid var(--bd-border);
  background:var(--bd-bg-2);color:var(--bd-accent);font-size:22px;font-weight:700;flex:none}
.stepper .wert{font-family:'Outfit';font-weight:800;font-size:22px;color:var(--bd-text);
  min-width:64px;text-align:center}
.stepper .einheit{font-size:12px;color:var(--bd-text-muted)}

/* Segmentierte Auswahl (AVV, Entscheid, Variante) */
.segment{display:flex;gap:0;border:1px solid var(--bd-border);border-radius:12px;overflow:hidden}
.segment button{flex:1;min-height:48px;padding:10px 8px;font-family:'Outfit';font-weight:700;
  font-size:14px;color:var(--bd-text-body);border-right:1px solid var(--bd-border)}
.segment button:last-child{border-right:none}
.segment button.an{background:var(--bd-accent);color:var(--bd-bg)}

/* Callout */
.callout{background:var(--bd-bg-2);border-left:3px solid var(--bd-accent);border-radius:2px;
  padding:14px 16px;margin:16px 0;font-size:14px;color:var(--bd-text-body)}
.callout strong{color:var(--bd-text)}

/* ---------- Diktat ---------- */
.diktat-leiste{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--bd-bg-2);border-top:1px solid var(--bd-border);
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:14px;
}
@media(min-width:881px){.diktat-leiste{left:232px}}
.diktat-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;flex:1;
  min-height:var(--tap);border-radius:14px;background:var(--bd-accent);color:var(--bd-bg);
  font-family:'Outfit';font-weight:800;font-size:16px;letter-spacing:.5px;
}
.diktat-btn.laeuft{background:#ff4444;color:#fff}
.diktat-btn:disabled{background:var(--bd-card);color:var(--bd-text-muted)}
.diktat-punkt{width:14px;height:14px;border-radius:50%;background:currentColor;flex:none}
.diktat-btn.laeuft .diktat-punkt{animation:puls 1.1s infinite}
@keyframes puls{0%,100%{opacity:1}50%{opacity:.25}}
.pegel{width:80px;height:8px;border-radius:4px;background:rgba(0,0,0,.35);overflow:hidden;flex:none}
.pegel i{display:block;height:100%;width:0;background:var(--bd-bg);transition:width .08s linear}
.diktat-zeit{font-family:'Outfit';font-weight:800;font-size:18px;color:var(--bd-text);
  min-width:56px;text-align:center;flex:none;font-variant-numeric:tabular-nums}
.diktat-liste{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.diktat-eintrag{display:flex;align-items:center;gap:8px;background:var(--bd-bg);
  border:1px solid var(--bd-border-accent);border-radius:999px;padding:6px 8px 6px 14px;font-size:13px}
.diktat-eintrag .nm{font-family:'Outfit';font-weight:600;color:var(--bd-accent)}
.diktat-eintrag audio{height:34px;max-width:190px}
.diktat-eintrag .weg{min-width:36px;min-height:36px;display:flex;align-items:center;
  justify-content:center;color:var(--bd-text-muted);font-size:17px}

/* ---------- Modal ---------- */
.modal-grund{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:60;
  display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--bd-card);border:1px solid var(--bd-border);border-radius:var(--r);
  padding:24px;max-width:520px;width:100%;max-height:86vh;overflow-y:auto}
.modal h3{font-family:'Outfit';font-size:20px;font-weight:700;color:var(--bd-text);margin:0 0 6px}
.modal p{font-size:14px;color:var(--bd-text-secondary);margin:0 0 18px}
.modal-knoepfe{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}

/* ---------- Statuszeile ---------- */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:96px;z-index:70;
  background:var(--bd-card);border:1px solid var(--bd-border-accent);border-radius:12px;
  padding:12px 20px;font-family:'Outfit';font-weight:600;font-size:14px;color:var(--bd-text);
  box-shadow:0 8px 30px rgba(0,0,0,.5);max-width:88vw;text-align:center}
.warnung{background:rgba(255,68,68,.1);border:1px solid rgba(255,68,68,.4);border-radius:12px;
  padding:12px 16px;font-size:13px;color:#ffb3b3;margin-bottom:14px}
.tabelle{width:100%;border-collapse:collapse;font-size:14px}
.tabelle th{text-align:left;font-family:'Outfit';font-size:11px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--bd-text-muted);padding:6px 8px;border-bottom:1px solid var(--bd-border)}
.tabelle td{padding:9px 8px;border-bottom:1px solid var(--bd-border);vertical-align:top}

/* Beleg-Chips in F1 sind Anzeige, keine Bedienung — Akzent als Kontur, nicht als Flaeche
   (Style-Guide §8: "Brady-Gruen nur als Akzent, nie als Flaechenfarbe"). */
.chip-beleg{background:var(--bd-accent-dim);border-color:var(--bd-border-accent);
  color:var(--bd-accent);pointer-events:none;font-weight:600}