/* Maske + Browser-Phone — Stil. Funktion vor Design: dunkel, kontrastreich, Knöpfe >= 44 px,
   responsive (PC: Maske links / Text rechts; Handy: eine Spalte). Nur CSS-Grid/Flex. */
:root{
  --bg:#0f141a; --card:#1b232d; --card2:#232e3a; --line:#2d3a49;
  --fg:#e6edf3; --dim:#9fb0c0; --accent:#4aa3ff;
  --orange:#ff9a3c; --rot:#ff5252; --gruen:#35c66b; --gelb:#ffd84a;
  --tap:44px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--fg);
  font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%}
button,select,input,textarea{font:inherit;color:var(--fg)}
button{min-height:var(--tap);border:1px solid var(--line);background:var(--card2);
  border-radius:10px;padding:0 12px;cursor:pointer;white-space:nowrap}
button:active{filter:brightness(1.25)}
button:disabled{opacity:.45;cursor:default}
button.primaer{background:var(--accent);border-color:var(--accent);color:#06243f;font-weight:700}
button.gruen{background:rgba(53,198,107,.22);border-color:var(--gruen);color:var(--gruen)}
button.rot{background:rgba(255,82,82,.2);border-color:var(--rot);color:var(--rot)}
button.gelb{background:rgba(255,216,74,.18);border-color:var(--gelb);color:var(--gelb)}
button.klein{min-height:36px;padding:0 10px;font-size:14px}
button.aktiv{background:var(--accent);border-color:var(--accent);color:#06243f;font-weight:700}
select,input,textarea{min-height:var(--tap);background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:8px 10px;width:100%}
textarea{min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
a{color:var(--accent)}
[hidden]{display:none !important}
.dim{color:var(--dim)}
.klein-text{font-size:13px;color:var(--dim)}
.rot-text{color:var(--rot)} .gruen-text{color:var(--gruen)} .gelb-text{color:var(--gelb)} .orange-text{color:var(--orange)}
.zeile{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.zeile>input,.zeile>select{flex:1 1 160px;width:auto}
.abstand{margin-top:10px}
pre.tg{white-space:pre-wrap;word-break:break-word;background:#111820;border:1px solid var(--line);
  border-radius:10px;padding:10px;margin:6px 0;font:14px/1.5 ui-monospace,Consolas,monospace}

/* ---- Login ---- */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.login-box{display:flex;flex-direction:column;gap:14px;width:100%;max-width:340px;
  background:var(--card);padding:26px 22px;border-radius:16px;border:1px solid var(--line)}
.login-box h1{margin:0 0 6px;font-size:22px;text-align:center}
.fehler{color:var(--rot);min-height:1.2em;margin:0;text-align:center;font-size:14px}

/* ---- Kopf ---- */
header{position:sticky;top:0;z-index:20;background:var(--card);
  border-bottom:1px solid var(--line);padding:8px 12px}
.kopfzeile{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kopfzeile .name{font-weight:700}
.ampel{font-weight:700;padding:4px 10px;border-radius:999px;font-size:14px;white-space:nowrap;min-height:auto}
.ampel.gruen{background:rgba(53,198,107,.18);color:var(--gruen)}
.ampel.rot{background:rgba(255,82,82,.18);color:var(--rot)}
.ampel.gelb{background:rgba(255,216,74,.18);color:var(--gelb)}
.ampel.grau{background:#2a3645;color:var(--dim)}
.zustand{display:flex;gap:4px}
.zustand button{min-height:38px;padding:0 10px;font-size:14px}
.zustand button[data-z="bereit"].aktiv{background:var(--gruen);border-color:var(--gruen);color:#032}
.zustand button[data-z="pause"].aktiv{background:var(--gelb);border-color:var(--gelb);color:#332}
.zustand button[data-z="abgemeldet"].aktiv{background:#56657a;border-color:#56657a;color:#fff}
.zustand .nachbearbeitung{color:var(--orange);font-weight:700;font-size:14px;align-self:center;padding:0 6px}
.warte{font-size:14px;color:var(--dim);white-space:nowrap}
.warte b{color:var(--fg)}
.warte b.hat{color:var(--orange)}
.kopf-knoepfe{display:flex;gap:6px;margin-left:auto}
.kopf-knoepfe button{min-height:38px;padding:0 10px;font-size:14px;position:relative}
.badge-zahl{display:inline-block;min-width:20px;padding:0 6px;border-radius:999px;background:var(--rot);
  color:#fff;font-size:12px;font-weight:700;margin-left:4px}
.badge-zahl:empty{display:none}

/* ---- Leitungsleiste ---- */
.leitungen{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;min-height:0}
.leitung{flex:1 1 220px;max-width:360px;background:var(--card2);border:1px solid var(--line);
  border-radius:12px;padding:8px 10px}
.leitung.klingelt{border-color:var(--orange);box-shadow:0 0 0 2px rgba(255,154,60,.35);animation:puls 1s infinite}
.leitung.aktiv{border-color:var(--gruen)}
.leitung.gehalten{border-color:var(--gelb);opacity:.9}
.leitung.waehlt{border-color:var(--accent)}
.leitung.beendet{opacity:.5}
@keyframes puls{0%{box-shadow:0 0 0 2px rgba(255,154,60,.35)}50%{box-shadow:0 0 0 5px rgba(255,154,60,.15)}100%{box-shadow:0 0 0 2px rgba(255,154,60,.35)}}
.l-kopf{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.l-nummer{font-weight:700;font-size:17px;cursor:pointer}
.l-zustand{font-size:13px;color:var(--dim)}
.l-zustand.klingelt{color:var(--orange);font-weight:700}
.l-zustand.aktiv{color:var(--gruen)}
.l-zustand.gehalten{color:var(--gelb)}
.l-dauer{font-variant-numeric:tabular-nums;font-size:13px;color:var(--dim);margin-left:auto}
.l-art{font-size:12px;padding:1px 7px;border-radius:999px;background:rgba(74,163,255,.14);border:1px solid rgba(74,163,255,.4)}
.l-knoepfe{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.l-knoepfe button{min-height:38px;padding:0 9px;font-size:14px}
.rausruf{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.rausruf input{flex:1 1 180px;width:auto}
.rausruf button{min-height:var(--tap)}
.tasten{display:grid;grid-template-columns:repeat(3,64px);gap:6px;margin-top:8px}
.tasten button{min-height:46px;font-size:18px;font-weight:700}
.transfer-leiste{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px;padding:8px 10px;
  background:rgba(255,216,74,.12);border:1px solid var(--gelb);border-radius:10px;font-size:14px}

/* ---- Navigation ---- */
nav{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
nav button{min-height:38px;padding:0 12px;font-size:14px}

/* ---- Inhalt ---- */
main{padding:10px 12px 60px}
section{display:none}
section.auf{display:block}
.karte{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px}
.karte h2{margin:0 0 10px;font-size:16px}
.karte h2 .step{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:var(--accent);color:#06243f;font-size:12px;font-weight:700;margin-right:8px}
.karte h3{margin:12px 0 6px;font-size:14px;color:var(--dim)}
.layout{display:grid;grid-template-columns:1fr 420px;gap:12px;align-items:start}
@media (max-width:980px){.layout{grid-template-columns:1fr}}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid-str{display:grid;grid-template-columns:1fr 100px;gap:10px}
@media (max-width:520px){.grid2,.grid-str{grid-template-columns:1fr}}
.field{margin-bottom:10px;position:relative}
.field label{display:block;font-size:13px;color:var(--dim);margin-bottom:4px}
.hint{font-size:12px;color:var(--gruen);min-height:16px;margin-top:3px}
.suggest{position:absolute;left:0;right:0;z-index:30;background:var(--card2);border:1px solid var(--accent);
  border-radius:8px;max-height:220px;overflow-y:auto}
.suggest-item{padding:10px 12px;cursor:pointer;font-size:14px;border-bottom:1px solid var(--line)}
.suggest-item.aktiv,.suggest-item:hover{background:rgba(74,163,255,.2)}
.suggest-leer{padding:10px 12px;color:var(--dim);font-size:13px}

/* Modus / Branche / Pauschale / Chips — wie im Original-Tool */
.mode-toggle,.trade-toggle,.pausch-toggle{display:flex;gap:8px}
.mode-btn{flex:1;min-height:52px;font-size:17px;font-weight:700}
.trade-btn{flex:1;min-height:52px;font-weight:600;line-height:1.2}
.trade-btn .hint{display:block;font-size:11px;font-weight:400;opacity:.8;color:inherit;min-height:0}
.pausch-btn{flex:1;min-height:48px;font-weight:600}
.pausch-btn.aktiv[data-val="Ja"]{background:var(--gruen);border-color:var(--gruen);color:#032}
.pausch-btn.aktiv[data-val="Nein"]{background:var(--rot);border-color:var(--rot);color:#fff}
.chip-group-label{font-size:12px;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.03em;margin:12px 0 6px}
.chip-group{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line);
  border-radius:20px;background:var(--card2);cursor:pointer;font-size:14px;user-select:none}
.chip.aktiv{background:var(--accent);color:#06243f;border-color:var(--accent);font-weight:600}
.zf-row{display:grid;grid-template-columns:1.4fr 1fr auto 1fr auto auto;gap:8px;align-items:center;margin-bottom:8px}
.zf-row .sep,.zf-row .uhr{color:var(--dim);text-align:center;font-size:14px}
.zf-remove{min-height:40px;padding:0 12px}
@media (max-width:520px){.zf-row{grid-template-columns:1fr 1fr auto 1fr}.zf-row .uhr,.zf-remove{grid-column:span 4;justify-self:start}}
.result-card{position:sticky;top:calc(var(--kopf-hoehe,0px) + 8px)}  /* --kopf-hoehe setzt app.js (Kopf ist sticky und variabel hoch) */
.result-box{background:#111820;border:1px solid var(--line);border-radius:10px;padding:12px;font-size:15px;
  line-height:1.6;white-space:pre-wrap;word-break:break-word;min-height:140px}
.result-box.leer{color:var(--dim);font-style:italic}
.result-actions{display:flex;gap:8px;margin-top:10px}
.result-actions button{flex:1}
.anruf-bezug{font-size:13px;color:var(--dim);margin-top:8px}

/* ---- Auftragsliste ---- */
.filter{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.filter>*{flex:1 1 140px;width:auto}
.auftrag{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-bottom:10px}
.auftrag.storniert,.auftrag.abgesagt{opacity:.65}
.auftrag.tg-fehler{border-left:5px solid var(--rot)}
.a-kopf{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline;font-size:14px;color:var(--dim)}
.a-kopf .kennung{font-weight:700;color:var(--fg)}
.a-haupt{font-weight:700;font-size:17px;margin:4px 0}
.a-haupt .nr{cursor:pointer;color:var(--accent)}
.status-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;border:1px solid var(--line)}
.status-badge.offen{color:var(--fg)}
.status-badge.wartet_mt{color:var(--gelb);border-color:var(--gelb)}
.status-badge.bestaetigt,.status-badge.erledigt{color:var(--gruen);border-color:var(--gruen)}
.status-badge.umterminiert{color:var(--accent);border-color:var(--accent)}
.status-badge.storniert,.status-badge.abgesagt{color:var(--rot);border-color:var(--rot)}
.tg{font-size:13px;font-weight:700}
.tg.ok{color:var(--gruen)} .tg.wartend{color:var(--gelb)} .tg.fehler{color:var(--rot)}
.a-knoepfe{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.a-knoepfe button{min-height:38px;padding:0 10px;font-size:14px}
details summary{cursor:pointer;color:var(--dim);font-size:14px;margin-top:6px}
.leer-hinweis{color:var(--dim);text-align:center;padding:30px 0}

/* ---- Tabellen (Blockliste, Protokolle, Personen, Kundenliste) ---- */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--dim);font-weight:600;font-size:13px}
td button{min-height:34px;padding:0 10px;font-size:13px}
.tabelle-wrap{overflow-x:auto}

/* ---- Wartefeld / Agenten ---- */
.queue-box{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:700px){.queue-box{grid-template-columns:1fr}}
.wartender{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);align-items:center}
.wartender .pos{font-weight:700;color:var(--orange);min-width:24px}
.wartender .wz{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--dim)}
.mitglied{display:flex;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}
.mitglied .st{margin-left:auto;color:var(--dim)}
.agent-zeile{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);align-items:center}
.punkt{display:inline-block;width:12px;height:12px;border-radius:50%;background:#56657a}
.punkt.bereit{background:var(--gruen)} .punkt.pause{background:var(--gelb)} .punkt.nachbearbeitung{background:var(--orange)}

/* ---- Akte (Seitenpanel) ---- */
.akte-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:40;display:none}
.akte-bg.auf{display:block}
.akte{position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);z-index:41;background:var(--card);
  border-left:1px solid var(--line);transform:translateX(100%);transition:transform .18s;overflow:auto;padding:12px}
.akte.auf{transform:translateX(0)}
.akte h2{margin:0 0 8px;font-size:18px;display:flex;gap:8px;align-items:center}
.akte h2 .zu{margin-left:auto}
.akte .eintrag{padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.sperr{color:var(--rot);font-weight:700}

/* ---- Eingehend-Popup ---- */
.popup{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:60;background:#1f2a1a;
  border:2px solid var(--orange);border-radius:14px;padding:12px 16px;min-width:min(360px,94vw);
  box-shadow:0 8px 30px rgba(0,0,0,.6);display:none}
.popup.auf{display:block}
.popup .nr{font-size:22px;font-weight:700}
.popup .knoepfe{display:flex;gap:8px;margin-top:10px}
.popup .knoepfe button{flex:1;min-height:50px;font-size:16px;font-weight:700}

/* ---- Dialog ---- */
.dialog-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:70;display:none;align-items:center;justify-content:center;padding:14px}
.dialog-bg.auf{display:flex}
.dialog{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;width:100%;max-width:480px;max-height:92vh;overflow:auto}
.dialog h2{margin:0 0 10px;font-size:17px}
.dialog .knoepfe{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.dialog .knoepfe button{flex:1}

/* ---- Toast ---- */
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;
  background:#000;color:#fff;padding:10px 16px;border-radius:10px;font-size:14px;
  opacity:0;transition:opacity .2s;pointer-events:none;max-width:90%}
#toast.auf{opacity:.95}