/* ============================================================================
   RD-Abrechnung Arnsberg – Design (Feuerwehr Stadt Arnsberg)
   Palette aus dem Logo: Stahlblau / Petrol / Cyan / Grün. Kein Rot.
   ========================================================================== */
[hidden]{display:none !important}   /* darf nie von display-Regeln übersteuert werden */
:root{
  --blue:#3c6c9c; --blue-strong:#2f5a82; --blue-dark:#244b6b;
  --teal:#0c8f88; --petrol:#006060; --cyan:#30b4e4; --green:#5e9c53;
  --ink:#152029; --ink-soft:#4c5762; --line:#e0e5ea; --bg:#f2f5f8; --card:#ffffff;
  --ok:#1f7a3d; --okbg:#e7f4ec; --okln:#bfe3cc;
  --warn:#8a5300; --warnbg:#fbf0dc; --warnln:#efd7ac;
  --info:#155c82; --infobg:#e4f0f6; --infoln:#c1dded;
  --attn:#b06a12; --attnbg:#fbf3e6; --attnln:#e8cfa4;   /* Pflichtfeld-Hinweis (Bernstein) */
  --radius:11px; --shadow:0 1px 3px rgba(21,32,41,.07),0 6px 20px rgba(21,32,41,.05);
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
/* Lange, nicht umbrechbare Inhalte (Adressen, Dateinamen, Diagnosen) auf schmalen Screens umbrechen */
.info-muted,.unit,.unit-crew,.ns-hint,.alert,.filelist,.page-head .mono,.badge,.grp,.fzg-name{overflow-wrap:anywhere;word-break:break-word}
img,input,select,textarea,pre,table{max-width:100%}
@media(max-width:860px){
  html,body{overflow-x:clip}          /* kein seitliches Scrollen am Handy/Tablet */
  .wrap{overflow-x:clip}
}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.5;font-size:15px}
a{color:var(--blue-dark)}
h1{font-size:1.5rem;margin:.2em 0}
h2{font-size:1.1rem;margin:0 0 .6rem;color:var(--ink)}
.muted{color:var(--ink-soft)}
.small{font-size:.85rem}
.mono{font-family:var(--mono);font-size:.9em}
.center{text-align:center}
.req{color:var(--teal);font-weight:700}

/* ── Marke / Logo ──────────────────────────────────────────────────────── */
.brand{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;color:inherit}
.brand-logo{height:34px;width:auto;display:block}
.brand-sub{font-weight:600;color:var(--ink-soft);font-size:.82rem;
  border-left:1px solid var(--line);padding-left:.65rem;letter-spacing:.2px}
.auth-card .brand-logo{height:44px}
.auth-card .brand{margin-bottom:1.1rem;justify-content:center}

/* ── Auth ──────────────────────────────────────────────────────────────── */
.auth-bg{display:flex;min-height:100vh;align-items:center;justify-content:center;
  background:radial-gradient(1100px 620px at 50% -12%,#1b556a 0%,#123f5c 42%,#0e2a38 100%);padding:1.2rem}
.auth-card{max-width:410px;width:100%;border-radius:16px;padding:1.7rem 1.6rem 1.75rem;
  box-shadow:0 20px 55px rgba(4,20,30,.38),0 2px 6px rgba(4,20,30,.18)}
.auth-card .brand{margin-bottom:1.3rem;justify-content:center}
.auth-card .brand-logo{height:46px}
.auth-card h1{font-size:1.4rem;margin:.1rem 0 1.15rem;letter-spacing:-.01em}
.auth-card form label{font-weight:600;font-size:.86rem;color:var(--ink-soft)}
.auth-card input{padding:.66rem .72rem;border-radius:10px;font-size:1rem;margin-top:.15rem}
.auth-card .btn.full{margin-top:.9rem}
/* Verlaufs-Button für die Hauptaktion */
.btn-auth{background:linear-gradient(135deg,var(--blue-strong) 0%,var(--petrol) 100%);
  border:none;color:#fff;font-weight:700;font-size:1rem;padding:.72rem 1rem;letter-spacing:.01em;
  box-shadow:0 8px 18px rgba(0,80,80,.24);transition:filter .15s,transform .05s}
.btn-auth:hover{background:linear-gradient(135deg,var(--blue-strong) 0%,var(--petrol) 100%);filter:brightness(1.07)}
.btn-auth:active{transform:translateY(1px)}
/* Passkey: dezenter Umriss statt konkurrierender Vollfläche */
.btn-passkey{background:#fff;border:1.5px solid var(--blue);color:var(--blue-strong);font-weight:600}
.btn-passkey:hover{background:#eef4f9;border-color:var(--blue-strong)}
.secret{font-family:var(--mono);font-size:1.2rem;letter-spacing:2px;background:#eef2f6;
  padding:.7rem;border-radius:8px;text-align:center;user-select:all;margin:.4rem 0 1rem;color:var(--ink)}
.qr{display:flex;justify-content:center;margin:.8rem 0}
.qr svg,.qr img{background:#fff;padding:8px;border-radius:8px;border:1px solid var(--line)}


/* ── Topbar ────────────────────────────────────────────────────────────── */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:var(--card);border-bottom:3px solid var(--blue);padding:.6rem 1.2rem;
  position:sticky;top:0;z-index:10;flex-wrap:wrap}
.top-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.nav-right{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.btn.subtle{background:transparent;border-color:#cdd6df;color:var(--blue-strong)}
.btn.subtle:hover{background:#eef3f7}
.btn svg{flex:0 0 auto}

/* Benutzermenü (JS-frei über <details>) */
.usermenu{position:relative}
.usermenu>summary{list-style:none;display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  padding:.28rem .55rem .28rem .3rem;border:1px solid #cdd6df;border-radius:24px;background:#fff;user-select:none}
.usermenu>summary::-webkit-details-marker{display:none}
.usermenu>summary:hover{background:#f4f7fa}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--blue-strong);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:.76rem;font-weight:700;letter-spacing:.5px}
.uname{font-weight:600;font-size:.9rem;color:var(--ink);max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-panel{position:absolute;right:0;top:calc(100% + .45rem);width:min(280px,92vw);min-width:214px;background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(21,32,41,.16);
  padding:.4rem;z-index:30;display:flex;flex-direction:column;overflow:visible}
.menu-panel a{padding:.55rem .7rem;border-radius:8px;text-decoration:none;color:var(--ink);font-size:.9rem;font-weight:600}
.menu-panel a:hover{background:#eef3f7}
.menu-panel a.on{background:#e6f0f7;color:var(--blue-dark)}
.menu-sep{height:1px;background:var(--line);margin:.35rem .25rem}
.menu-head{font-size:.66rem;text-transform:uppercase;letter-spacing:.7px;color:#8a949d;font-weight:800;
  padding:.55rem .7rem .2rem;margin-top:.15rem;border-top:1px solid var(--line)}
.menu-panel>a:first-child+.menu-head,.menu-panel .menu-head:first-child{border-top:none;margin-top:0}
.menu-danger{color:var(--attn)!important}
@media(max-width:520px){.uname{display:none}.brand-sub{display:none}}

/* ── Layout ────────────────────────────────────────────────────────────── */
.wrap{max-width:1080px;margin:1.4rem auto;padding:0 1.2rem}
.wrap.narrow{max-width:640px}
.ph-right{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.page-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1.2rem;align-items:start}
.cols>*{min-width:0}
.side{display:flex;flex-direction:column;gap:1.2rem}
@media(max-width:840px){.cols{grid-template-columns:1fr}}

/* ── Karten ────────────────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:1.2rem;margin-bottom:1.2rem}
.empty{background:var(--card);border:1px dashed var(--line);border-radius:var(--radius);
  padding:2.4rem;text-align:center}

/* ── Formulare ─────────────────────────────────────────────────────────── */
fieldset{border:1px solid var(--line);border-radius:9px;margin:0 0 1rem;padding:.9rem 1rem 1.1rem}
legend{font-weight:700;color:var(--blue-strong);padding:0 .4rem;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.6px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem 1.1rem}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}

/* Label als Block: Beschriftung (inkl. *) in EINER Zeile, Feld darunter */
label{display:block;font-size:.86rem;font-weight:600;color:var(--ink-soft);margin:0}
label>input,label>select,label>textarea{display:block;width:100%;margin-top:.28rem}
label.chk{display:flex;align-items:center;gap:.5rem;font-weight:600;color:var(--ink)}
label.chk>input{margin-top:0;width:auto}
label.miss{color:var(--attn)}
label.miss>input,label.miss>select{border-color:var(--attnln);background:var(--attnbg)}
input,select,textarea{font:inherit;padding:.5rem .6rem;border:1px solid #c4ccd5;border-radius:8px;
  background:#fff;color:var(--ink);width:100%}
input:not([type=checkbox]),select{height:2.5rem}
select{appearance:auto}
textarea{height:auto}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
textarea{min-height:70px;resize:vertical}
input[type=checkbox]{width:auto}
.form-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.6rem}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;background:#eaeff4;color:var(--ink);border:1px solid #d0d8e0;
  padding:.5rem .9rem;border-radius:8px;text-decoration:none;font-weight:600;font-size:.9rem;cursor:pointer}
.btn:hover{background:#dfe6ee}
.btn.primary{background:var(--blue-strong);border-color:var(--blue-strong);color:#fff}
.btn.primary:hover{background:var(--blue-dark)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-soft)}
.btn.ghost:hover{background:#eaeff4}
.btn.full{display:flex;width:100%}
.btn.disabled{opacity:.5;pointer-events:none}
button.mini{background:#eaeff4;border:1px solid #d0d8e0;border-radius:6px;padding:.3rem .5rem;font-size:.8rem;cursor:pointer}
button.mini.danger{background:#f6efe6;border-color:#e6d4bd;color:var(--attn)}
.inline{display:inline}
.del{color:var(--attn);text-decoration:none;font-weight:800;padding:0 .3rem;cursor:pointer;background:none;border:none;font-size:1.1rem}
.del-case{display:block;text-align:center;margin-top:.8rem;color:var(--attn);font-size:.85rem}
.chip{border:none;border-radius:20px;padding:.2rem .7rem;font-size:.8rem;font-weight:700;cursor:pointer}
.chip.on{background:var(--okbg);color:var(--ok)}
.chip.off{background:#eaeff4;color:var(--ink-soft)}
.link{color:var(--blue-dark);font-weight:600;text-decoration:none}
.link:hover{text-decoration:underline}
.backlink{margin:.2rem 0 .4rem}
.veh-assign{border:1px solid var(--line);border-radius:10px;padding:.5rem .8rem;margin-bottom:.6rem;background:#fff}
.veh-assign>summary{cursor:pointer;font-weight:600;color:var(--blue-strong)}
.veh-group{border:1px solid var(--line);border-radius:8px;padding:.5rem .7rem;margin:.5rem 0}
.veh-group legend{font-weight:700;font-size:.78rem;color:var(--blue-strong);padding:0 .3rem}
.veh-group .chk{display:inline-flex;align-items:center;gap:.3rem;margin:.15rem .9rem .15rem 0;font-weight:500}
textarea{width:100%;box-sizing:border-box;padding:.55rem .6rem;border:1px solid var(--line);border-radius:8px;font:inherit}
textarea.mono,textarea.full-w{font-family:var(--mono);font-size:.85rem}
.filr-live{margin-top:.85rem;border:1px solid var(--line);border-radius:10px;padding:.75rem .85rem;background:#fff}
.filr-live .live-head{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline;margin:.55rem 0 .25rem;flex-wrap:wrap}
.progress{height:7px;border-radius:999px;background:#e8eef3;overflow:hidden;position:relative}
.progress span{position:absolute;top:0;bottom:0;left:0;width:38%;border-radius:999px;background:linear-gradient(90deg,#1f6f86,#3bb3c9)}
.filr-live.running .progress span{animation:indet 1.15s ease-in-out infinite}
.progress.running span{animation:indet 1.15s ease-in-out infinite}
.filr-live:not(.running) .progress span{width:100%;opacity:.55}
@keyframes indet{0%{left:-42%}55%{left:64%}100%{left:104%}}
#filr-live-log{max-height:320px;overflow:auto;margin-top:.45rem}
.busy-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  background:rgba(15,42,56,.55)}
.busy-box{background:#fff;border-radius:14px;padding:1.35rem 1.45rem;max-width:390px;width:90%;
  box-shadow:0 18px 50px rgba(0,0,0,.35);text-align:center}
.busy-box .progress{margin-bottom:.75rem}
.busy-box p{margin:.3rem 0}
#busy-text{font-weight:700;color:var(--blue-strong)}
.filterbar{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:.1rem 0 .8rem;
  background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.5rem .55rem}
.filterbar>*{margin:0}
.filterbar input[type=search]{flex:1 1 190px;min-width:140px;width:auto;height:2.1rem;padding:.35rem .55rem;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:.85rem}
.filterbar select{flex:0 1 auto;width:auto;max-width:170px;height:2.1rem;padding:.2rem .4rem;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:.83rem;background:#fff}
.filterbar .cf-date{display:inline-flex;align-items:center;gap:.25rem;font-size:.78rem;color:var(--ink-soft)}
.filterbar .cf-date input[type=date]{width:auto;height:2.1rem;padding:.2rem .4rem;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:.8rem}
.filterbar .btn-mini{height:2.1rem;padding:.2rem .6rem}
.filterbar .cf-count{margin-left:auto;white-space:nowrap;font-size:.8rem}
@media(max-width:640px){
  .filterbar{gap:.35rem}
  .filterbar input[type=search]{flex-basis:100%}
  .filterbar select{flex:1 1 46%;max-width:none}
  .filterbar .cf-count{margin-left:0;flex-basis:100%}
}

/* ── Beteiligte Einsatzmittel mit Besatzung (Fahrer/Transportführer) ──────── */
.unitlist{list-style:none;padding:0;margin:.2rem 0}
.unit{padding:.5rem .6rem;border:1px solid var(--line);border-radius:9px;margin:.4rem 0;background:#fff}
.unit-self{border-color:#bcd3e6;box-shadow:inset 3px 0 0 var(--blue)}
.unit-head{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.unit-tag{font-size:.68rem;font-weight:700;color:var(--blue-dark);background:#e3eef7;border:1px solid #cbdff0;border-radius:999px;padding:.05rem .45rem}
.unit-crew{margin-top:.3rem}
.or{display:flex;align-items:center;color:var(--ink-soft);margin:1rem 0 .7rem;font-size:.8rem}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.or span{padding:0 .7rem}

/* ── Tabellen ──────────────────────────────────────────────────────────── */
.grid{width:100%;border-collapse:collapse;font-size:.9rem}
.grid th{text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.5px;
  color:var(--ink-soft);border-bottom:2px solid var(--line);padding:.5rem .5rem}
.grid td{padding:.55rem .5rem;border-bottom:1px solid var(--line);vertical-align:middle}
.grid tr:hover td{background:#f7f9fb}
.grid tr.clickable{cursor:pointer}
.actions{display:flex;gap:.35rem;flex-wrap:wrap}
.rowlinks{display:flex;gap:.45rem;white-space:nowrap;align-items:center}
.btn-mini{display:inline-flex;align-items:center;justify-content:center;padding:.34rem .7rem;border-radius:7px;
  font-size:.8rem;font-weight:700;text-decoration:none;border:1px solid #d0d8e0;background:#eef2f6;color:var(--ink);cursor:pointer}
.btn-mini:hover{background:#e3ebf2}
.btn-mini.primary{background:var(--blue-strong);border-color:var(--blue-strong);color:#fff}
.btn-mini.primary:hover{background:var(--blue-dark)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.col-actions{width:1%}

/* ── Badges / Alerts ───────────────────────────────────────────────────── */
.badge{display:inline-block;padding:.15rem .55rem;border-radius:20px;font-size:.75rem;font-weight:700}
.badge.ok{background:var(--okbg);color:var(--ok)}
.badge.ready{background:var(--infobg);color:var(--info)}
.badge.warn{background:var(--attnbg);color:var(--attn)}

/* Workflow-Status (Pipeline-Farben) */
.badge.st-grey{background:#e9edf1;color:#4c5762}
.badge.st-blue{background:#e4f0f6;color:#155c82}
.badge.st-yellow{background:#fdf1c4;color:#8a6100}
.badge.st-green{background:#dff2e3;color:#1f7a3d}
/* Status wird über das Badge angezeigt – kein voller Zeilenhintergrund mehr,
   damit die Wechselfarben (Zebra) sichtbar bleiben. */
.miss-tag{display:inline-block;margin-left:.35rem;padding:.05rem .4rem;border-radius:10px;background:var(--attnbg);color:var(--attn);font-size:.68rem;font-weight:700}
.fzg-name{font-weight:600}
.fzg-type{display:inline-block;margin-left:.35rem;padding:.02rem .4rem;border-radius:10px;background:#e9edf1;color:#4c5762;font-size:.68rem;font-weight:700;vertical-align:1px}
.grp{display:inline-block;margin-left:.35rem;padding:.05rem .45rem;border-radius:999px;font-size:.67rem;font-weight:700;letter-spacing:.02em;vertical-align:1px}
.grp-hagelstein{background:#fbe3c6;color:#8a4b00;border:1px solid #eec69a}
.grp-fw{background:#e3eef7;color:var(--blue-dark);border:1px solid #cbdff0}

/* Datei-Drop-Zone */
.dropzone{display:flex;flex-direction:column;align-items:center;gap:.3rem;text-align:center;
  padding:1.3rem 1rem;border:2px dashed #c2ccd6;border-radius:12px;background:#f7fafc;cursor:pointer;
  color:var(--ink);transition:border-color .15s,background .15s}
.dropzone:hover{border-color:var(--blue);background:#eef4f9}
.dropzone.drag{border-color:var(--blue-strong);background:#e4f0f8}
.dropzone.has-files{border-style:solid;border-color:var(--teal);background:#f0faf8}
.dz-icon{color:var(--blue-strong);margin-bottom:.1rem}
.dz-title{font-weight:600;font-size:.92rem}
.dz-link{color:var(--blue-strong);text-decoration:underline}
.dz-sub{font-size:.78rem;color:var(--ink-soft)}
.dz-files{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:.25rem}
.dz-files li{font-size:.82rem;background:#eef3f7;border-radius:7px;padding:.32rem .55rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-dzsubmit]{margin-top:.6rem}
[data-dzsubmit]:disabled{opacity:.5;cursor:not-allowed}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-1px;margin-right:.45rem}
.dot.st-grey{background:#9aa4ae}.dot.st-blue{background:#2f7fa8}.dot.st-yellow{background:#e7b600}.dot.st-green{background:#3aa757}
.status-card{border-left:5px solid var(--line)}
.status-card.st-grey{border-left-color:#9aa4ae}
.status-card.st-blue{border-left-color:#2f7fa8}
.status-card.st-yellow{border-left-color:#e7b600}
.status-card.st-green{border-left-color:#3aa757}

/* ── Ablauf-Band „Nächster Schritt" ──────────────────────────────────────── */
.nextstep{display:flex;gap:1.1rem;flex-wrap:wrap;align-items:stretch;justify-content:space-between;
  background:#fff;border:1px solid var(--line);border-left:5px solid var(--blue);border-radius:12px;
  padding:.9rem 1.1rem;margin:.2rem 0 1.1rem;box-shadow:0 2px 12px rgba(20,40,60,.06)}
.nextstep.st-grey{border-left-color:#9aa7b2}
.nextstep.st-blue{border-left-color:var(--blue)}
.nextstep.st-yellow{border-left-color:#d9a300}
.nextstep.st-green{border-left-color:var(--green)}
.ns-main{flex:1 1 320px;min-width:240px}
.ns-top{display:flex;align-items:center;gap:.55rem;margin-bottom:.35rem}
.ns-title{font-weight:700}
.ns-hint{margin:0;color:var(--ink-soft)}
.ns-side{flex:0 1 300px;min-width:210px;display:flex;flex-direction:column;gap:.45rem;justify-content:center}
.ns-side .stbtn{margin:0}
.rp-bar{height:8px;border-radius:999px;background:#e8eef3;overflow:hidden}
.rp-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--green));border-radius:999px}
.rp-label{font-size:.78rem;color:var(--ink-soft);margin-top:.22rem}
.rp-label strong{color:var(--attn)}

/* ── Einklappbare Feldgruppen ────────────────────────────────────────────── */
.form-intro{margin:.1rem 0 .85rem}
.fgroup{border:1px solid var(--line);border-radius:10px;margin:.55rem 0;background:#fff;overflow:hidden}
.fgroup>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;padding:.62rem .85rem;font-weight:600;color:var(--blue-strong);background:#f7f9fb}
.fgroup>summary::-webkit-details-marker{display:none}
.fgroup>summary::after{content:"▾";color:var(--ink-soft);transition:transform .15s}
.fgroup[open]>summary::after{transform:rotate(180deg)}
.fgroup .fgrid{padding:.75rem .85rem}
.fgroup.has-miss{border-color:#e8c78a;box-shadow:inset 3px 0 0 var(--attn)}
.fgroup.has-miss>summary{background:#fdf6e8}
.fg-name{flex:1}
.fg-badge{font-size:.72rem;font-weight:700;color:#8a5a00;background:#fbe7c2;border:1px solid #eecf99;border-radius:999px;padding:.06rem .55rem}
.fg-ok{color:var(--green);font-weight:800}
.form-actions .fa-sep{flex-basis:100%;height:0;margin:0}

/* ── Als Details getarnte Karte (Verlauf) ────────────────────────────────── */
.as-details{padding:0}
.as-details>summary{list-style:none;cursor:pointer;padding:.85rem 1rem;display:flex;align-items:center;justify-content:space-between}
.as-details>summary::-webkit-details-marker{display:none}
.as-details>summary h2{display:inline;margin:0}
.as-details>summary::after{content:"▾";color:var(--ink-soft)}
.as-details[open]>summary::after{transform:rotate(180deg)}
.as-details .history,.as-details>p{padding:0 1rem 1rem}

/* ── Beteiligte Einsatzmittel / Träger ───────────────────────────────────── */
.emlist{list-style:none;padding:0;margin:.2rem 0}
.emlist li{display:flex;align-items:center;gap:.45rem;padding:.28rem 0;border-bottom:1px solid var(--line)}
.emlist li:last-child{border-bottom:none}
.card.em-warn{border-color:#e8c78a;box-shadow:inset 3px 0 0 var(--attn)}
.grp-mixed{background:#fbe0d6;color:#9a3412;border:1px solid #f0c3b0}
.grp-kombi{background:#e7e0fb;color:#5b3ea6;border:1px solid #cfc2f0}
.grp-unknown{background:#eceff2;color:#5b6670;border:1px solid #d8dee4}
.has-tip{cursor:help;border-bottom:1px dotted #9aa7b2;text-decoration:none}
.intake-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:.4rem 0}
@media(max-width:640px){.intake-grid{grid-template-columns:1fr}}
.intake-card{border-left:5px solid #cdd6df}
.intake-card.on{border-left-color:var(--green)}
.intake-card.off{border-left-color:#c9ced4}
.intake-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.intake-head h2{margin:0}
.pill{font-size:.72rem;font-weight:800;padding:.1rem .55rem;border-radius:999px}
.pill-on{background:#e2f4e8;color:#1f7a3d;border:1px solid #bfe6cc}
.pill-off{background:#eef1f4;color:#6a747d;border:1px solid #d8dee4}
.tom{margin:.2rem 0;padding-left:1.1rem}
.tom li{margin:.3rem 0;color:var(--ink-soft)}
.mini.on{background:#e2f4e8;border-color:#bfe6cc;color:#1f7a3d}
.info-muted{background:#f4f6f8;border:1px solid #e3e8ec;border-radius:8px;padding:.6rem .8rem;margin:0 0 .9rem;color:#8a949d;font-size:.9rem}
.info-muted .im-label{color:#6a747d;font-weight:700}
.info-muted .im-note{margin-top:.25rem;font-size:.8rem;color:#a4adb4;font-style:italic}

/* Einstellungen-Sammelseite */
.set-head{font-size:.8rem;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-soft);
  margin:1.2rem 0 .5rem;font-weight:800}
.set-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
@media(max-width:600px){.set-grid{grid-template-columns:1fr}}
.set-tile{display:flex;flex-direction:column;gap:.15rem;padding:.8rem .9rem;text-decoration:none;
  background:var(--card);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);
  transition:border-color .12s,background .12s}
.set-tile:hover{border-color:#bcd3e6;background:#f7fafc}
.set-title{font-weight:700;color:var(--blue-strong)}
.set-desc{font-size:.85rem;color:var(--ink-soft)}
.log-actions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.log-actions .spacer{flex:1 1 auto}
.pager a.pg-btn{text-decoration:none;display:inline-block}

/* ── Seiten-Blätterung der Einsatzliste ──────────────────────────────────── */
.pager{display:flex;align-items:center;justify-content:center;gap:.8rem;margin:.9rem 0 .3rem}
.pager .pg-btn{padding:.4rem .8rem;border:1px solid var(--line);border-radius:8px;background:#fff;
  color:var(--blue-strong);font:inherit;font-size:.85rem;cursor:pointer}
.pager .pg-btn:hover:not([disabled]){background:#eef3f7;border-color:#bcd3e6}
.pager .pg-btn[disabled]{opacity:.45;cursor:default}
.pager .pg-info{font-size:.85rem;color:var(--ink-soft);white-space:nowrap}

/* ── „Abgerechnet"-Haken in der Einsatzliste ─────────────────────────────── */
.col-check{width:56px;text-align:center}
.billform{margin:0;display:inline}
.billtoggle{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  border:1.6px solid #cdd6df;background:#fff;color:transparent;font-size:15px;font-weight:800;line-height:1;padding:0;
  cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.billtoggle:hover{border-color:#3aa757}
.billtoggle.on{background:#3aa757;border-color:#3aa757;color:#fff}
.billtoggle.readonly{cursor:default}
.billtoggle.readonly:hover{border-color:#cdd6df}

/* ── Hagelstein-Fahrzeuge: ganze Zeile farbig markiert ───────────────────── */
tr.veh-hagelstein td{background:#fdf4e8 !important}
tr.veh-hagelstein td:first-child{box-shadow:inset 4px 0 0 #e0913a}
@media(max-width:720px){
  .grid.cards tr.veh-hagelstein{background:#fdf4e8 !important;border-left:4px solid #e0913a}
  .grid.cards tr.veh-hagelstein td{background:transparent !important}
}
.status-line{margin:.2rem 0 .5rem}
.stbtn{margin:.4rem 0 0}

/* Kurzanleitung / Legende */
.help{background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);margin-bottom:1.2rem;overflow:hidden}
.help>summary{cursor:pointer;padding:.8rem 1.1rem;font-weight:700;color:var(--blue-strong);list-style:none}
.help>summary::-webkit-details-marker{display:none}
.help>summary::before{content:"?";display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;
  background:var(--blue-strong);color:#fff;border-radius:50%;font-size:.72rem;margin-right:.5rem;vertical-align:-2px}
.help[open]>summary{border-bottom:1px solid var(--line)}
.help-body{padding:.8rem 1.1rem}
.flow{margin:.2rem 0 .6rem;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:.45rem}
.flow li{font-size:.9rem}
.alert{border-radius:9px;padding:.7rem .9rem;margin:.6rem 0;font-size:.92rem;border:1px solid transparent}
.alert.ok{background:var(--okbg);color:var(--ok);border-color:var(--okln)}
.alert.warn{background:var(--attnbg);color:var(--attn);border-color:var(--attnln)}
.alert.error{background:var(--warnbg);color:var(--warn);border-color:var(--warnln)}
.alert.info{background:var(--infobg);color:var(--info);border-color:var(--infoln)}

/* ── Dateien ───────────────────────────────────────────────────────────── */
.filelist{list-style:none;margin:.8rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.filelist li{display:flex;align-items:center;gap:.55rem;font-size:.85rem;
  border:1px solid var(--line);border-radius:8px;padding:.45rem .6rem}
.kind{flex:0 0 auto;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  padding:.14rem .45rem;border-radius:5px;background:#eaeff4;color:var(--ink-soft);white-space:nowrap}
.kind-lis-xml{background:#e6f0f7;color:var(--blue-strong)}
.kind-fwmes-xml{background:#e3f4f2;color:var(--petrol)}
.kind-divi{background:#eaf3e5;color:#3f7233}
.filelist li .link{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filelist li .fsize{flex:0 0 auto;color:var(--ink-soft);font-size:.78rem;white-space:nowrap}
.filelist li .del{flex:0 0 auto;margin-left:.1rem}
.logbox{background:#12211a;color:#d7e5de;padding:.9rem;border-radius:8px;overflow:auto;font-size:.82rem;white-space:pre-wrap}

/* ── Änderungsverlauf ──────────────────────────────────────────────────── */
.history{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.history li{border-left:3px solid var(--blue);padding:.1rem 0 .1rem .6rem}
.hmeta{font-size:.78rem;font-weight:700;color:var(--ink-soft);margin-bottom:.2rem}
.hchg{font-size:.82rem;line-height:1.4}
.hfield{font-weight:600}
.hfrom{color:var(--attn);text-decoration:line-through}
.hto{color:var(--ok);font-weight:600}

/* ── Protokoll (Ledger) ────────────────────────────────────────────────── */
.chainbar{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;border-radius:9px;margin:.6rem 0;font-weight:600}
.chainbar.ok{background:var(--okbg);color:var(--ok);border:1px solid var(--okln)}
.chainbar.bad{background:var(--warnbg);color:var(--warn);border:1px solid var(--warnln)}
.ledger{width:100%;border-collapse:collapse;font-size:.82rem}
.ledger th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-soft);border-bottom:2px solid var(--line);padding:.4rem .5rem}
.ledger td{padding:.4rem .5rem;border-bottom:1px solid var(--line);vertical-align:top}
.ledger tr.del td{background:var(--attnbg)}
.ledger .seq{font-family:var(--mono);color:var(--ink-soft)}
.ledger .act{font-weight:700}
.ledger .hsh{font-family:var(--mono);font-size:.72rem;color:var(--ink-soft)}

/* ============================================================================
 *  Responsive – Tablet und Smartphone
 * ========================================================================== */

/* Tablet: Formular + Seitenspalte untereinander (bereits ab 840px via .cols) */
@media(max-width:820px){
  .wrap{padding:0 1rem}
  .menu-panel{min-width:200px}
}

/* Smartphone */
@media(max-width:640px){
  body{font-size:15px}
  .wrap{margin:1rem auto;padding:0 .85rem}
  h1{font-size:1.4rem}
  .topbar{padding:.5rem .7rem;gap:.5rem;flex-wrap:nowrap}
  .brand{min-width:0;flex-shrink:1}
  .nav-right{gap:.35rem;flex-wrap:nowrap}
  .nav-right .btn{padding:.5rem;font-size:.82rem;min-width:40px;justify-content:center}
  .nav-right .btn .btn-label{display:none}          /* nur Icons -> passt in eine Zeile */
  .page-head{gap:.4rem}
  .fgrid{grid-template-columns:1fr}
  .card{padding:1rem}
  .log-actions{gap:.4rem}
  .log-actions .btn, .log-actions form{flex:1 1 auto}
}

/* Sehr schmal (u. a. Cover-Display faltbarer Geräte, z. B. Pixel Fold zugeklappt) */
@media(max-width:400px){
  .brand-logo{height:26px}
  .avatar{width:26px;height:26px;font-size:.7rem}
  .usermenu>summary{padding:.24rem .35rem}
  .nav-right .btn{min-width:36px;padding:.45rem}
  .wrap{padding:0 .65rem}
  .card{padding:.8rem}
}

/* Protokoll-Tabelle: weniger wichtige Spalten (IP, Hash) auf schmalen Screens ausblenden */
@media(max-width:720px){
  .ledger{font-size:.8rem}
  .ledger th:nth-child(4),.ledger td:nth-child(4),
  .ledger th:nth-child(7),.ledger td:nth-child(7){display:none}
}

/* Übersicht als KOMPAKTE Liste (Handy + Tablet) */
@media(max-width:860px){
  .table-wrap{overflow:visible}
  .grid.cards thead{display:none}
  .grid.cards, .grid.cards tbody{display:block;width:100%}
  .grid.cards tr{
    display:grid;
    grid-template-columns:auto 1fr auto;
    grid-template-areas:
      "check nr      status"
      "check veh     date"
      "check patient date";
    column-gap:.55rem;row-gap:0;align-items:center;
    border:1px solid var(--line);border-radius:10px;margin-bottom:.45rem;
    padding:.45rem .6rem;background:var(--card)}
  .grid.cards tr:hover td{background:transparent}
  .grid.cards td{display:block;border:none;padding:.05rem 0;text-align:left;
    min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .grid.cards td::before{display:none}
  .grid.cards td[data-label="Abgerechnet"]{grid-area:check;white-space:normal;display:flex;align-items:center}
  .grid.cards td[data-label="Einsatz-Nr."]{grid-area:nr;font-weight:700;font-size:.95rem;color:var(--ink)}
  .grid.cards td[data-label="Status"]{grid-area:status;justify-self:end}
  .grid.cards td[data-label="Fahrzeug"]{grid-area:veh;font-size:.82rem;color:var(--ink-soft)}
  .grid.cards td[data-label="Patient"]{grid-area:patient;font-size:.82rem;color:var(--ink-soft)}
  .grid.cards td[data-label="Einsatzdatum"]{grid-area:date;justify-self:end;font-size:.78rem;color:var(--ink-soft)}
  .grid.cards td[data-label="Dateien"],
  .grid.cards td[data-label="Quelle"],
  .grid.cards td[data-label="Aktionen"]{display:none}
  .grid.cards .fzg-type{display:none}                 /* Typ-Chip im kompakten Modus weglassen */
  .grid.cards tr.veh-hagelstein{background:#fdf4e8 !important;border-color:#f0d3ad}
  .grid.cards tr.veh-hagelstein td{background:transparent !important}
  .grid.cards tr.is-billed{background:#f3faf4;border-color:#cfe8d5}
  .grid.cards tr.row-st-yellow{border-left:3px solid #e0a92e}
  .grid.cards tr.row-st-green{border-left:3px solid #46a05a}
}

/* Verbund: gleiche Einsatznummer (z. B. RTW + NEF) sichtbar zusammengefasst */
.verbund-tag{display:none}
/* Zebra: klar sichtbare Wechselfarben. Verbünde (RTW+NEF) bleiben ausgenommen. */
.grid tbody tr>td{background:#ffffff}
.grid tbody tr.zebra>td{background:#e8eef5}
.grid tbody tr:hover>td{background:#dfe8f2}
.grid tbody tr.zebra:hover>td{background:#d8e2ee}
@media(max-width:860px){
  .grid.cards tbody tr{background:#ffffff}
  .grid.cards tbody tr.zebra{background:#e8eef5}
}
.grid tr.in-group:not(.grp-end)>td{border-bottom:none}
.grid tr.in-group.grp-start>td{border-top:2px solid #cbdcee}
.grid tr.in-group.grp-end>td{border-bottom:2px solid #cbdcee}
.grid tr.in-group>td:first-child{box-shadow:inset 4px 0 0 #7aa6d0}
@media(max-width:860px){
  .grid.cards tr.in-group{border-left:3px solid #7aa6d0;margin-bottom:2px}
  .grid.cards tr.in-group.grp-start{margin-top:.45rem}
  .grid.cards tr.in-group.grp-end{margin-bottom:.45rem}
}

/* Neue Einträge nach dem Aktualisieren kurz aufblitzen */
@keyframes flashCell{0%,12%{background:#fff2b8}100%{background:transparent}}
@keyframes flashCard{0%,12%{background:#fff2b8;border-color:#f0d98a}100%{background:var(--card)}}
.grid tr.is-new>td{animation:flashCell 3s ease-out 1}
@media(max-width:860px){
  .grid.cards tr.is-new{animation:flashCard 3s ease-out 1}
  .grid.cards tr.is-new>td{animation:none}
}