/* Mein Telefonist — Verwaltung. Ein Stylesheet, kein Framework, kein CDN. */
:root{
  --ink:#1b2430; --muted:#61707f; --line:#d3dae3;
  --paper:#fff; --wash:#f4f6f9; --head:#eaf0f7;
  --accent:#1f5f8b; --on:#1a7a4c; --off:#8a8f97; --danger:#a3282c;
}
*{box-sizing:border-box}
body{margin:0;background:var(--wash);color:var(--ink);
     font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
main{max-width:900px;margin:0 auto;padding:24px 18px 64px}
h1{font-size:24px;margin:0 0 4px;letter-spacing:-.2px}
h2{font-size:17px;margin:0 0 10px}
p{margin:6px 0 14px}
.muted{color:var(--muted);font-size:14px}
.small{font-size:12.5px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
a{color:var(--accent)}

nav{display:flex;align-items:center;gap:16px;padding:10px 18px;background:var(--paper);
    border-bottom:1px solid var(--line);flex-wrap:wrap}
nav .brand{font-weight:700;color:var(--ink);text-decoration:none;margin-right:8px}
nav a{text-decoration:none;font-size:14px}
nav .spacer{flex:1}
nav .who{color:var(--muted);font-size:13px}
.inline{display:inline}
.crumb{font-size:13px;color:var(--muted);margin:0 0 10px}

.card{background:var(--paper);border:1px solid var(--line);border-radius:10px;
      padding:18px;margin:16px 0}
.card.dim{opacity:.6}
.cardhead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:8px}
.cardhead h2{margin:0}

label{display:block;margin:0 0 14px;font-size:14px;font-weight:600}
label small{font-weight:400;display:block;margin-top:4px}
input[type=text],input[type=email],input[type=password],input[type=time],
input[type=number],select,textarea{
  width:100%;margin-top:5px;padding:8px 10px;font:inherit;
  border:1px solid var(--line);border-radius:6px;background:#fff}
textarea{resize:vertical}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row .narrow{flex:0 0 160px}
.row .tiny{flex:0 0 110px}
.row .wide{flex:1 1 260px}

.check{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.check input{margin-top:3px}
.inlinecheck{margin:0;align-items:center}

button,.btn{display:inline-block;padding:8px 14px;font:inherit;font-size:14px;
  border:1px solid var(--accent);background:var(--accent);color:#fff;
  border-radius:6px;cursor:pointer;text-decoration:none}
.btn.ghost,button.ghost{background:#fff;color:var(--accent)}
button.link{border:none;background:none;color:var(--accent);padding:0;text-decoration:underline;font-size:13px}
button.link.danger{color:var(--danger)}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px}
.delrow{margin:-10px 0 18px 4px}

.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:12.5px;font-weight:600;color:#fff}
.badge.on{background:var(--on)}
.badge.off{background:var(--off)}

table{border-collapse:collapse;width:100%}
table.kv th{text-align:left;width:200px;font-weight:600;color:var(--muted);
  padding:4px 10px 4px 0;vertical-align:top;font-size:14px}
table.kv td{padding:4px 0;font-size:14px}
table.list th,table.list td{border:1px solid var(--line);padding:6px 9px;text-align:left;font-size:13.5px}
table.list th{background:var(--head)}
table.list tr.dim{opacity:.55}
table.hours th{text-align:left;padding:4px 10px 4px 0;font-size:14px}
table.hours td{padding:3px 6px 3px 0}
table.hours input{margin-top:0}

.flash{background:#e6f4ea;border:1px solid #7ea37e;border-radius:8px;padding:10px 14px;margin-bottom:16px;font-size:14px}
.error{background:#fdecea;border:1px solid #d99;border-radius:8px;padding:10px 14px;margin-bottom:16px;font-size:14px}

.loginbox{max-width:360px;margin:60px auto;background:var(--paper);
  border:1px solid var(--line);border-radius:10px;padding:26px}
.loginbox h1{margin-bottom:0}
.loginbox button{width:100%;margin-top:6px}

pre.prompt{background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:16px;white-space:pre-wrap;word-break:break-word;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.5}

/* --- Ergaenzungen 30.07.2026: Rollen, Hinweise, Tarifsperren --- */
.previewbar{background:#7a3e00;color:#fff;padding:7px 18px;font-size:13.5px;
  display:flex;gap:14px;align-items:center;justify-content:center}
button.link.light{color:#ffe0b8}
.pagehead{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:8px}
.pagehead h1{margin:0}
.badge.trial{background:#8a6d1f}
.hint{display:inline-block;width:16px;height:16px;line-height:16px;text-align:center;
  border-radius:50%;background:var(--muted);color:#fff;font-size:11px;font-weight:700;
  cursor:help;vertical-align:middle;margin-left:3px}
fieldset{border:1px solid var(--line);border-radius:8px;padding:14px 16px 2px;margin:0 0 16px}
legend{font-weight:700;font-size:14px;padding:0 6px}
h3{font-size:15px;margin:18px 0 8px}
.nowrap{display:flex;gap:6px;align-items:center}
.tinyinput{width:150px;margin-top:0}

/* Anrufkarte — Optik von der Webseite uebernommen */
.callcard{background:var(--paper);border:1px solid var(--line);border-radius:10px;
  overflow:hidden;margin:16px 0;box-shadow:0 1px 2px rgba(27,36,48,.06)}
.callhead{background:#232b36;color:#fff;padding:10px 16px;font-size:14px;font-weight:600;
  display:flex;justify-content:space-between;align-items:center;gap:12px}
.callbody{padding:14px 16px 6px}
.callrow{display:flex;gap:16px;margin-bottom:10px;align-items:flex-start}
.calllabel{flex:0 0 110px;text-transform:uppercase;letter-spacing:.06em;
  font-size:11.5px;font-weight:700;color:var(--muted);padding-top:2px}
.callvalue{flex:1;font-size:15px}
.callfoot{border-top:1px solid var(--line);padding:9px 16px;font-size:12.5px;color:var(--muted)}
.dringend{display:inline-block;background:#f6e3d2;color:#9a4a12;border-radius:6px;
  padding:3px 10px;font-weight:700;font-size:13px}

/* Hinweis auf unzugeordnete Anrufe: faellt auf, ohne zu blinken */
nav a.warnlink{background:var(--danger);color:#fff;padding:3px 10px;border-radius:20px;
  font-weight:600;text-decoration:none}

/* Hinweis "Zwei-Faktor ist aus". Bewusst NICHT --danger wie der Warnlink
   daneben: 2FA auszuhaben ist kein Fehler, sondern eine Empfehlung — und ein
   Hinweis, der aussieht wie ein Alarm, wird nach drei Tagen nicht mehr gelesen.
   Farben aus .warnhinweis uebernommen, damit beides zusammengehoert. */
nav a.hinweislink{background:#fdf3e3;color:#7a5f13;border:1px solid #d9c89a;
  padding:2px 10px;border-radius:20px;font-weight:600;text-decoration:none}

/* Hoerproben */
.samples{display:flex;flex-wrap:wrap;gap:10px 18px;margin:-6px 0 18px}
.sample{display:flex;align-items:center;gap:8px;font-size:13px}
.sample audio{height:32px}
audio{max-width:220px;vertical-align:middle}
.mb{margin-bottom:12px}

/* --- Mitschrift mit Werkzeugaufruefen, 30.07.2026 -------------------
   Vorher war die Mitschrift ein <pre>-Block, und Eintraege ohne Rolle
   wurden uebersprungen — Werkzeugaufrufe waren damit unsichtbar. Genau
   die Frage "hat er das Werkzeug ueberhaupt benutzt?" liess sich nur im
   Serverprotokoll beantworten. Kein Framework, kein JavaScript.        */
.verlauf{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.verlauf .zeile{display:flex;gap:14px;padding:9px 14px;border-top:1px solid var(--line);
  align-items:flex-start}
.verlauf .zeile:first-child{border-top:none}
.verlauf .wer{flex:0 0 92px;font-size:11.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);padding-top:3px}
.verlauf .was{flex:1;font-size:14.5px;line-height:1.5;word-break:break-word}
/* Zeilenumbrueche nur im gesprochenen Text erhalten. Im Werkzeug-Block wuerde
   pre-wrap die Einrueckung der Vorlage als Leerraum mitzeichnen. */
.verlauf .anrufer .was,.verlauf .assistent .was{white-space:pre-wrap}

.verlauf .anrufer{background:var(--paper)}
.verlauf .assistent{background:var(--wash)}

/* Werkzeug und Ergebnis heben sich ab, ohne zu schreien. */
.verlauf .werkzeug{background:#eef4fa}
.verlauf .werkzeug .wer{color:var(--accent)}
.verlauf .ergebnis{background:#eef4fa;font-size:14px}
.verlauf .ergebnis .wer{color:var(--accent)}
.verlauf .ergebnis.fehler{background:#fdecea}
.verlauf .ergebnis.fehler .wer{color:var(--danger)}

table.args{width:auto;margin:5px 0 1px}
table.args th{text-align:left;font-weight:600;color:var(--muted);font-size:13px;
  padding:1px 14px 1px 0;vertical-align:top;white-space:nowrap}
table.args td{font-size:13.5px;padding:1px 0}

/* Hinweis, dass das Modell Formatierung erzeugt hatte. Nur fuer den Admin. */
.fmt{display:inline-block;background:var(--head);color:var(--muted);border-radius:5px;
  padding:1px 7px;font-size:11.5px;font-weight:600;white-space:nowrap;cursor:help}

/* Warnung: gar kein Werkzeug benutzt. */
.warnhinweis{background:#fdf3e3;border-left:4px solid #8a6d1f;border-radius:0 6px 6px 0;
  padding:9px 13px;font-size:13.5px;margin:10px 0 2px}

/* --- Vorgänge in der Anrufkarte, 30.07.2026 ------------------------
   Ein Vorgang gilt erst als erledigt, wenn jede Pflichtangabe eine
   Pruefung bestanden hat. Der Zustand steht deshalb obenan.          */
.vorgang{border:1px solid var(--line);border-left-width:4px;border-radius:8px;
  padding:11px 14px;margin:10px 0}
.vorgang.ausgefuehrt{border-left-color:var(--on)}
.vorgang.abgebrochen{border-left-color:var(--off)}
.vorgang.fehlgeschlagen,.vorgang.daten_sammeln{border-left-color:var(--danger)}
.vorgang.bereit{border-left-color:var(--accent)}
.vhead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
.vstatus{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:2px 9px;border-radius:20px;background:var(--head);color:var(--muted)}
.vstatus.ausgefuehrt{background:#e2f1e8;color:#166b42}
.vstatus.fehlgeschlagen,.vstatus.daten_sammeln{background:#fbe3e1;color:var(--danger)}
.vorgang table.kv th{width:170px}

/* Seite "Was soll Ihr Assistent tun?" */
.felder{display:flex;flex-wrap:wrap;gap:8px 26px;margin:2px 0 12px}
.felder .check{flex:0 0 auto}

/* --- Terminvergabe -------------------------------------------------- */
/* Die Vorschau soll auf einen Blick zeigen, was aus den Zeitfenstern wird.
   Deshalb Farbe nur da, wo etwas NICHT frei ist — freie Zeiten sind der
   Normalfall und brauchen keine Aufmerksamkeit. */
.vorschautag{display:flex;gap:12px;padding:5px 0;border-bottom:1px solid var(--line)}
.vorschautag .wer{width:110px;flex:none;font-weight:600;font-size:13.5px}
.vorschautag .was{display:flex;flex-wrap:wrap;gap:5px}
.slot{display:inline-block;padding:2px 8px;border-radius:5px;font-size:13px;
      background:#eef3ee;border:1px solid #cfe0cf}
.slot small{opacity:.75;font-size:11.5px}
.slot.gebucht{background:#e7eefa;border-color:#c3d4ee}
.slot.gesperrt,.slot.feiertag{background:#f6e9e9;border-color:#e3c9c9}
.slot.kurzfristig,.slot.zuweit{background:#f2f2f2;border-color:#e0e0e0;opacity:.7}
button.klein,.btn.klein{padding:3px 10px;font-size:12.5px}