/* ticketradar – Oberfläche (aus dem abgenommenen Prototyp v1) */
:root{
  --acc:#9CC41D; --acc-d:#7ea113; --acc-soft:#eef6d6;
  --ink:#111111; --chrome:#111111; --chrome-2:#1c1e19;
  --bg:#f2f4ef; --card:#fff; --line:#e2e5dd; --line-2:#eceee8;
  --tx:#15170f; --tx-2:#5d6257; --tx-3:#8a8f82;
  --ok:#3f9c56; --warn:#e0a800; --bad:#d64545; --info:#3d7bbf;
  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SFMono-Regular",Consolas,Menlo,monospace;
  --r:10px; --sh:0 1px 2px rgba(17,17,17,.06),0 4px 14px rgba(17,17,17,.05);
}
*{box-sizing:border-box}
/* Kein overflow:hidden am body – das stand hier bis 1.15.4 und galt damit auch
   für Kundenportal, Hilfe und Anmeldung, die keine Agentenoberfläche sind:
   Dort war die Seite länger als der Bildschirm und ließ sich trotzdem nicht
   scrollen. Das Einsperren gehört dorthin, wo drinnen gescrollt wird: .app. */
body{margin:0;font-family:var(--sans);background:var(--bg);color:var(--tx);font-size:14px;
 line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#c8ccc0;border-radius:6px}

/* 100dvh statt 100vh: Auf dem Telefon zählt vh die Adressleiste mit, und die
   letzte Zeile der Seite lag dann unter dem Bildschirmrand. */
.app{display:grid;grid-template-rows:54px 1fr;height:100vh;height:100dvh;overflow:hidden}
/* Der Schalter für die Menü-Schublade steht im DOM vor .body – nur deshalb
   kommt das CSS ohne JavaScript an die Navigation heran. */
.navschalter{display:none}
.navknopf{display:none;width:34px;height:34px;border-radius:8px;background:var(--chrome-2);
 border:1px solid #33372c;color:#fff;place-items:center;font-size:16px;cursor:pointer;flex:none}
.navschatten{display:none;position:fixed;inset:54px 0 0;background:rgba(17,17,17,.45);z-index:65}
.topbar{background:var(--chrome);color:#fff;display:flex;align-items:center;gap:14px;padding:0 14px;z-index:60}
.wm{font-size:19px;font-weight:800;font-style:italic;letter-spacing:-.6px;margin:0}
.wm span{color:var(--acc)}
.mandant{background:var(--chrome-2);border:1px solid #33372c;border-radius:8px;padding:4px 11px;line-height:1.15}
.mandant b{font-size:12.5px;font-weight:600;display:block}
.mandant span{font-size:10px;color:#8d9384}
.gsearch{flex:1;max-width:440px}
.gsearch input{width:100%;background:var(--chrome-2);border:1px solid #33372c;border-radius:8px;
 padding:7px 12px;color:#fff;outline:none;font-size:13px}
.gsearch input::placeholder{color:#7e8475}
.gsearch input:focus{border-color:var(--acc)}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:9px}
/* Transkriptionszeit in der Kopfzeile (1.40.0). Die Farbe sagt, wie dringend
   es ist: grün über einem Viertel, gelb darunter, rot unter einem Zehntel. */
.trzeit{display:inline-flex;align-items:baseline;gap:5px;background:var(--chrome-2);
 border:1px solid #33372c;border-radius:8px;padding:5px 10px;color:#b9bfae;font-size:11px;
 text-decoration:none;white-space:nowrap}
.trzeit:hover{border-color:var(--acc)}
.trzeit b{font-size:13.5px;font-weight:800;color:#fff}
.trzeit .einh{font-size:10px;color:#8d9384}
/* Das Zeichen traegt die Unterscheidung, wenn der Text wegfaellt: Auf
   schmalen Schirmen stuenden sonst zwei gleich aussehende Zahlen. */
.trzeit .zeichen{display:none;font-size:12px}
@media (max-width:1150px){.trzeit .zeichen{display:inline}}
.trzeit.wr{border-color:#96600a;background:#3a2f16}
.trzeit.wr b{color:#f0c060}
.trzeit.bad{border-color:#a82c2c;background:#3a1d1d}
.trzeit.bad b{color:#ff9a8f}
@media (max-width:1150px){.trzeit .lang{display:none}}
.tb-right .kurz{display:none}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--acc);color:#111;display:grid;
 place-items:center;font-weight:700;font-size:12px;flex:none}

.body{display:grid;grid-template-columns:212px 1fr;min-height:0}
.side{background:var(--chrome-2);color:#b9bfae;overflow-y:auto;padding:10px 8px 30px;border-right:1px solid #2b2e26}
.side .grp{font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:#6f7566;font-weight:700;padding:14px 10px 6px}
.side a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;color:#b9bfae;font-size:13px}
.side a:hover{background:#23261f;color:#fff}
.side a.on{background:var(--acc);color:#111;font-weight:600}
.side a .cnt{margin-left:auto;font-size:10.5px;background:#2f3329;color:#9aa08f;border-radius:9px;padding:1px 6px;font-weight:700}
.side a.on .cnt{background:rgba(0,0,0,.16);color:#111}
/* Verwaltung: klappbare Gruppe. Immer zu beim Laden – <details> ohne
   [open] merkt sich nichts, und genau das ist hier gewollt. */
.side details.vw > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px}
.side details.vw > summary::-webkit-details-marker{display:none}
.side details.vw > summary::after{content:"\25B8";margin-left:auto;font-size:11px;color:#6f7566}
.side details.vw[open] > summary::after{content:"\25BE"}
.side details.vw > summary:hover{color:#9aa08f}
.side details.vw > summary .pkt{width:6px;height:6px;border-radius:50%;background:var(--acc);
  display:inline-block;flex:none}
/* Die dritte Ebene (ab 1.93.0): die Chapter unter BNI. Eingerückt und eine
   Spur kleiner — so sieht man, dass sie zu BNI gehören, und „BNI" selbst
   bleibt die Zeile, die alle zusammen zeigt. */
.side a.chap{padding-left:26px;font-size:12px;color:#9aa08f}
.side a.chap::before{content:"";width:5px;height:5px;border-radius:50%;background:#4a4f43;
  flex:none;margin-right:-3px}
.side a.chap:hover{color:#fff}
.side a.chap.on{background:rgba(156,196,29,.22);color:#fff;font-weight:600}
.side a.chap.on::before{background:var(--acc)}
.side .foot{margin-top:22px;padding:12px 10px;border-top:1px solid #2b2e26;font-size:10.5px;color:#6f7566;line-height:1.5}
/* Serverauslastung im Fussbereich des Menuebaums (ab 1.51.0) – nur fuer den
   Betreiber. Schmal gehalten: Sie soll am Rand des Blickfelds liegen und
   nicht mit dem Menue um Aufmerksamkeit ringen. Auffaellig wird sie erst,
   wenn ein Wert es verlangt. */
.side .sys{margin-top:22px;padding:11px 10px 12px;border-top:1px solid #2b2e26}
.side .sys .tt{font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:#6f7566;
  font-weight:700;margin-bottom:9px;display:flex;align-items:center;gap:6px}
.side .sys .z{font-size:10.5px;color:#8b9180;display:flex;justify-content:space-between;
  margin:0 0 3px}
.side .sys .z b{color:#b9bfae;font-weight:600}
.side .sys .bal{height:4px;border-radius:3px;background:#2b2e26;overflow:hidden;margin-bottom:9px}
.side .sys .bal i{display:block;height:100%;background:var(--acc);border-radius:3px;
  transition:width .4s}
.side .sys .bal.warn i{background:#e0a92b}
.side .sys .bal.bad i{background:#d6453c}
.side .sys .fu{font-size:9.5px;color:#5f6557;margin-top:2px}
/* Hinweis auf Neues, wenn die Seite sich nicht von selbst erneuern darf
   (ab 1.51.0): Es wird gerade getippt. Dann bietet sie es an, statt es zu tun. */
.neuhinweis{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:9800;
  background:var(--chrome-2);color:#eef0ea;border:1px solid #3a3e33;border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.3);padding:10px 14px;font-size:13px;display:none;
  align-items:center;gap:12px;max-width:92vw}
.neuhinweis.an{display:flex}
.neuhinweis b{color:var(--acc)}
.neuhinweis button{background:var(--acc);color:#111;border:0;border-radius:7px;padding:6px 12px;
  font-size:12.5px;font-weight:700;cursor:pointer}
.neuhinweis .zu{background:transparent;color:#8b9180;font-weight:400;padding:6px 4px}
/* Der Knopf fuer die Informationsmail (ab 1.52.0). Er sagt seinen Zustand mit
   der Farbe: weiss = noch nicht hinaus, gruen = versendet. Gruen wird er erst,
   wenn die Mail wirklich in der Warteschlange liegt — nicht beim Klick. */
.btn.infooffen{background:#fff;color:var(--tx);border:1px solid var(--line)}
.btn.infooffen:hover:not([disabled]){background:var(--bg);border-color:var(--acc)}
.btn.infosent{background:var(--acc);color:#111;border:1px solid var(--acc);cursor:default}
.btn.infooffen[disabled]{background:var(--bg);color:var(--tx-3);border-color:var(--line-2);
  cursor:not-allowed;opacity:1}
.main{overflow-y:auto;min-width:0}
.page{padding:20px 24px 60px;max-width:1500px}

.ph{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.ph h1{font-size:22px;font-weight:800;margin:0 0 2px;letter-spacing:-.3px}
.ph p{margin:0;color:var(--tx-2);font-size:13px}
.ph .sp{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
/* Telefonzeiten beim Kunden (1.39.0). Schmale Spalte, deshalb eine Zeile je
   Gespräch: Richtung, wer, wann, wie lange — und der Zustand als Marke. Das
   Formular zum Erfassen kommt erst beim Aufklappen, sonst stünden zehn
   Formulare übereinander. */
.telkopf{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-bottom:10px;
 margin-bottom:6px;border-bottom:1px solid var(--line-2)}
.telkopf .lb{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--tx-3);
 font-weight:700}
.telkopf .vl{font-size:18px;font-weight:800;letter-spacing:-.3px}
.telzeile{border-bottom:1px solid var(--line-2)}
.telzeile:last-child{border-bottom:none}
.telzeile>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;
 padding:7px 0;font-size:12.4px}
.telzeile>summary::-webkit-details-marker{display:none}
.telzeile>summary:hover .wer{color:var(--acc-d)}
.telzeile .pfeil{width:14px;text-align:center;color:var(--tx-3);font-weight:700}
.telzeile .wer{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 font-weight:600}
.telzeile .dauer{color:var(--tx-2);font-size:11.8px}
.telform{padding:2px 0 11px 21px;display:flex;flex-direction:column;gap:7px}
.telform input[name=minuten]{padding:5px 7px;border:1px solid var(--line);border-radius:7px;
 background:var(--card);color:var(--tx);font-size:12.4px;text-align:right;width:56px}
.telform input[name=taetigkeit]{padding:6px 9px;border:1px solid var(--line);border-radius:7px;
 background:var(--card);color:var(--tx);font-size:12.4px;width:100%}
.telform select{font-size:12.2px;padding:4px 6px;max-width:130px}
.telreihe{display:flex;gap:7px;align-items:center;flex-wrap:wrap}

/* Eine Karte, die man aufklappt (1.38.1): „Ticket aus einer E-Mail" soll
   Platz sparen, solange niemand sie braucht. Der Pfeil des Browsers wäre in
   der Kopfzeile ein Fremdkörper – der Hinweis rechts sagt es deutlicher. */
details.card>summary{list-style:none}
details.card>summary::-webkit-details-marker{display:none}
details.card[open]>summary{border-bottom:1px solid var(--line-2)}

/* Titel richtigstellen (1.37.5). Zu heißt: nur der Titel, mit einem leisen
   Hinweis daneben. Offen heißt: ein Feld mit demselben Text darin. */
.titeledit{margin:0 0 2px}
.titeledit>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:9px}
.titeledit>summary::-webkit-details-marker{display:none}
.titeledit .stift{font-size:11.5px;color:var(--tx-3);border:1px solid var(--line);
 border-radius:20px;padding:1px 8px;white-space:nowrap}
.titeledit>summary:hover .stift{color:var(--tx-2);border-color:var(--tx-3)}
.titeledit[open]>summary h1{color:var(--tx-3);font-size:14px !important;font-weight:600}
.titeledit form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:7px 0 2px}
.titeledit input[name=betreff]{flex:1;min-width:240px;font-size:15px;font-weight:600;
 padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);
 color:var(--tx)}

.btn{background:var(--acc);color:#111;border:1px solid transparent;border-radius:8px;padding:7px 14px;
 font-weight:600;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.btn:hover{background:var(--acc-d)}
.btn.g{background:var(--card);color:var(--tx);border-color:var(--line)}
.btn.g:hover{border-color:var(--tx-3)}
.btn.sm{padding:5px 10px;font-size:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.card .hd{padding:13px 16px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:10px}
.card .hd h3{margin:0;font-size:14px;font-weight:700}
.card .hd .sp{margin-left:auto;display:flex;gap:6px}
.card .bd{padding:16px}
.muted{color:var(--tx-2)} .tiny{font-size:11.5px} .mono{font-family:var(--mono);font-size:12px}

.tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;border-radius:6px;
 padding:2px 8px;white-space:nowrap}
.tag.p1{background:#fbe5e5;color:#a82c2c} .tag.p2{background:#fdf0d8;color:#96600a}
.tag.p3{background:#e4eef8;color:#2c5f96} .tag.p4{background:#eceee8;color:#6b6f66}
.tag.st{background:var(--acc-soft);color:var(--acc-d)} .tag.gy{background:var(--line-2);color:var(--tx-2)}
.tag.ok{background:#e3f2e7;color:#2f7a44} .tag.bad{background:#fbe5e5;color:#a82c2c}
/* Erledigt ist braun — ab 1.74.0 im Kalender, ab 1.75.0 ueberall. Ein
   Zustand soll an jeder Stelle gleich aussehen, sonst muss man ihn an jeder
   Stelle neu lernen. Dieselben Werte wie `.ev.erl` in kalender.html. */
.tag.erl{background:#ddd0c0;color:#5d4228}
/* Eine Karte, die ein Verweis IST (ab 1.78.0). Sie muss sich als solcher zu
   erkennen geben, sonst ist sie ein Kasten, auf den niemand klickt. */
.wzsprung{transition:border-color .12s,background .12s}
.wzsprung:hover{border-color:var(--acc);background:var(--acc-soft)}
.wzsprung:hover h3{color:var(--acc-d)}
.tag.wr{background:#fdf0d8;color:#96600a}
.chan{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:11px;
 background:var(--line-2);color:var(--tx-2);flex:none}

table.t{width:100%;border-collapse:collapse}
table.t th{text-align:left;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--tx-3);
 font-weight:700;padding:9px 12px;border-bottom:1px solid var(--line)}
table.t td{padding:11px 12px;border-bottom:1px solid var(--line-2);font-size:13px;vertical-align:middle}
table.t tbody tr:hover td{background:var(--bg)}
/* Rechtsbündige Spalten rücken an die Knöpfe heran, statt eine handbreit
   Leere zwischen Zeitpunkt und Aktionen stehen zu lassen. */
table.t th.re,table.t td.re{text-align:right}
.leer{text-align:center;padding:50px 20px;color:var(--tx-2)}
.leer b{display:block;font-size:15px;color:var(--tx);margin-bottom:5px}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;
 box-shadow:var(--sh);position:relative;overflow:hidden}
.kpi .lb{font-size:11px;color:var(--tx-2);font-weight:600}
.kpi .vl{font-size:28px;font-weight:800;line-height:1.15;letter-spacing:-1px}
.kpi .dt{font-size:11px;color:var(--tx-3)}
.kpi .bar{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc)}
.kpi.r .bar{background:var(--bad)} .kpi.w .bar{background:var(--warn)} .kpi.b .bar{background:var(--info)}

.fbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.fbar select,.fbar input{background:var(--card);border:1px solid var(--line);border-radius:8px;
 padding:6px 10px;font-size:12.5px;outline:none}
.seg{display:flex;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg a{padding:6px 12px;font-size:12.5px;color:var(--tx-2);font-weight:600}
.seg a.on{background:var(--acc);color:#111}

.split{display:grid;grid-template-columns:1fr 330px;gap:16px;align-items:start}
@media (max-width:1150px){.split{grid-template-columns:1fr}}

.msg{border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;background:var(--card);overflow:hidden}
.msg .mh{padding:9px 14px;display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--line-2);
 font-size:12.5px;background:var(--bg)}
.msg .mh .tm{margin-left:auto;color:var(--tx-3);font-size:11.5px}
.msg .mb{padding:14px 16px;font-size:13.4px;white-space:pre-wrap}
.msg.intern{border-color:#e4c76a;background:#fffdf3}
.msg.intern .mh{background:#fdf6e0}
.msg.aus .mh{background:var(--acc-soft)}
.evt{font-size:12px;color:var(--tx-2);display:flex;gap:8px;align-items:center;padding:3px 0;margin-bottom:10px}
.evt .ln{flex:1;height:1px;background:var(--line)}

.replybox{border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden;margin-top:16px}
.replytabs{display:flex;border-bottom:1px solid var(--line-2);background:var(--bg)}
.replytabs a{padding:10px 15px;font-size:12.5px;font-weight:600;color:var(--tx-2);border-bottom:2px solid transparent}
.replytabs a.on{color:var(--tx);border-bottom-color:var(--acc);background:var(--card)}
.replybox textarea{width:100%;border:none;outline:none;padding:14px 16px;min-height:110px;resize:vertical;
 background:var(--card);font-size:13.4px}
.replyfoot{padding:10px 14px;border-top:1px solid var(--line-2);display:flex;gap:8px;align-items:center;
 flex-wrap:wrap;background:var(--bg)}

/* Auszeichnung im Antworttext (ab 1.36.0). Der Schreibbereich sieht aus wie
   das Textfeld, das er ersetzt – nur dass fett auch fett ist. */
.rtfbar{display:flex;gap:4px;align-items:center;flex-wrap:wrap;padding:7px 12px;
 border-bottom:1px solid var(--line-2);background:var(--bg)}
.rtfbar button{border:1px solid var(--line);background:var(--card);border-radius:7px;
 min-width:30px;height:28px;padding:0 8px;font-size:13px;color:var(--tx);cursor:pointer;line-height:1}
.rtfbar button:hover{border-color:var(--acc)}
.rtfbar button.an{border-color:var(--acc);background:var(--acc-soft)}
.rtfbar .tr{width:1px;height:18px;background:var(--line);margin:0 4px}
.rtfbar .mk{width:26px;height:22px;border-radius:6px;border:1px solid rgba(0,0,0,.18);padding:0}
/* Der Ticketstatus in der Werkzeugleiste (1.37.4): rechts außen, damit die
   Auszeichnung links zusammenbleibt. Grün heißt übernommen, rot heißt nicht. */
.rtfbar .rtfstatus{margin-left:auto;display:flex;align-items:center;border-radius:8px;
 padding:1px;border:1px solid transparent;transition:border-color .2s,background .2s}
.rtfbar .rtfstatus select{font-size:12.4px;padding:3px 7px;max-width:190px;height:28px}
.rtfbar .rtfstatus.gut{border-color:var(--ok,#2e9e5b);background:rgba(46,158,91,.12)}
.rtfbar .rtfstatus.schlecht{border-color:#d2453c;background:rgba(210,69,60,.12)}
.rtf{width:100%;padding:14px 16px;min-height:110px;font-size:13.4px;line-height:1.55;
 outline:none;overflow-wrap:break-word}
.rtf:empty:before{content:attr(data-ph);color:var(--tx-3)}
mark{padding:0 2px;border-radius:3px;color:#111}
.hl-gelb{background:#ffe9a8} .hl-gruen{background:#c9eec2}
.hl-blau{background:#c6e3ff} .hl-rosa{background:#ffd2e6}
.msg .mb.rich{white-space:normal}
.rtf-roh{display:none}

/* Was aus einer fremden Mail kommt (ab 1.43.0). Das HTML ist neu gebaut und
   trägt keine eigenen Stile mehr — also bestimmen wir hier, wie es aussieht.
   Tabellen bewusst OHNE Linien: Outlook baut Signaturen aus Tabellen, und mit
   Gitter sähe jede zweite Mail aus wie ein Formular. */
.msg .mb .mailbild{max-width:100%;height:auto;border:1px solid var(--line);
  border-radius:6px;margin:4px 0;background:var(--card)}
.msg .mb.rich table{border-collapse:collapse;max-width:100%}
.msg .mb.rich td,.msg .mb.rich th{padding:2px 8px 2px 0;vertical-align:top;text-align:left}
.msg .mb.rich blockquote{margin:6px 0 6px 10px;padding-left:10px;
  border-left:2px solid var(--line);color:var(--tx-2)}
.msg .mb.rich ul,.msg .mb.rich ol{margin:6px 0 6px 20px}
.msg .mb.rich h4{font-size:14px;margin:8px 0 4px}
.msg .mb.rich a{color:var(--acc);overflow-wrap:anywhere}
.msg .mb.rich pre{white-space:pre-wrap;font-family:var(--mono,monospace);font-size:12.5px}

/* Dateiauswahl. Seit 1.37.2 wieder das NATIVE Feld, sichtbar, in einer
   Fläche, auf die sich Dateien auch ziehen lassen. Die Zwischenlösung mit
   verstecktem Feld und <label for> (1.36.2) hat in Geralds Browser zweimal
   Ärger gemacht — erst tat der Knopf nichts, dann blieb nach dem Abbrechen
   ein weißes Fenster zurück. Der direkte Klick auf das Feld selbst ist der
   Weg, den jeder Browser am besten kennt. */
.dateiwahl{display:block;border:1.5px dashed var(--line);border-radius:10px;padding:12px 14px;
 background:var(--bg);font-size:12.8px;color:var(--tx-2)}
.dateiwahl.drueber{border-color:var(--acc);background:var(--acc-soft);color:var(--tx)}
.dateiwahl input[type=file]{font-size:12.8px;max-width:100%;cursor:pointer}
.dateiwahl .zieh{margin-top:6px}
.dateiliste{margin-top:8px}
.dateiliste .zeile{display:flex;align-items:center;gap:8px;background:var(--card);
 border:1px solid var(--line);border-radius:8px;padding:6px 10px;margin-top:6px;font-size:12.5px}
.dateiliste .zeile .gr{margin-left:auto;color:var(--tx-3)}

.side-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;box-shadow:var(--sh)}
.side-card .sh{padding:10px 14px;border-bottom:1px solid var(--line-2);font-size:11px;letter-spacing:1px;
 text-transform:uppercase;color:var(--tx-3);font-weight:700;display:flex;align-items:center}
.side-card .sh .sp{margin-left:auto}
.side-card .sb{padding:12px 14px}
.kv{display:grid;grid-template-columns:98px 1fr;gap:4px 10px;font-size:12.6px;margin:0}
.kv dt{color:var(--tx-2)} .kv dd{margin:0;font-weight:600}
.linkrow{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:12.6px}
.linkrow:last-child{border-bottom:none}
.linkrow .g{margin-left:auto;color:var(--tx-3);font-size:11.5px}

.frm{display:grid;grid-template-columns:190px 1fr;gap:12px 18px;align-items:center;max-width:780px}
.frm label{font-size:12.8px;color:var(--tx-2);font-weight:600}
.frm input,.frm select,.frm textarea{width:100%;background:var(--card);border:1px solid var(--line);
 border-radius:8px;padding:8px 11px;font-size:13px;outline:none}
.frm input:focus,.frm select:focus,.frm textarea:focus{border-color:var(--acc)}
.frm .voll{grid-column:1/-1}
.hinweis{background:var(--acc-soft);border-left:3px solid var(--acc);border-radius:0 8px 8px 0;
 padding:11px 14px;font-size:12.6px;margin-bottom:14px}
.fehler{background:#fbe5e5;color:#a82c2c;border-left:3px solid var(--bad);border-radius:0 8px 8px 0;
 padding:10px 13px;font-size:13px;margin-bottom:14px}
.erledigtband{background:#ddd0c0;color:#5d4228;border-left:3px solid #9a6e44;
 border-radius:0 8px 8px 0;padding:11px 14px;font-size:12.6px;margin-bottom:14px}
.erfolg{background:#e3f2e7;color:#2f7a44;border-left:3px solid var(--ok);border-radius:0 8px 8px 0;
 padding:10px 13px;font-size:13px;margin-bottom:14px}

/* ==========================================================================
   Schmale Bildschirme
   ==========================================================================
   Drei Stufen, jede mit einem eigenen Grund:

   1150px – die zweispaltigen Seiten (Ticket mit Seitenleiste) werden einspaltig.
    900px – die Navigation hat keinen Platz mehr NEBEN dem Inhalt. Sie wird
            deshalb zur Schublade, nicht ausgeblendet: Eine Oberfläche ohne
            Menü ist keine schmale Oberfläche, sondern eine kaputte.
   1260px – das Rufjournal ist keine Tabelle mehr. (Die Zahl klingt hoch, meint
            aber den INHALT: Neben der 212px-Navigation bleiben davon rund
            1050px, und weniger braucht dieses Journal nicht zu versuchen.)            Sieben Spalten mit Knöpfen brauchen Platz; darunter quetschen sich
            Namen auf sechs Zeilen und das Notizfeld auf null. Jeder Anruf steht
            dann als eigener Block, mit Beschriftungen statt Spaltenköpfen.
    640px – die Kopfzeile gibt auf, was sie nicht braucht.
   ========================================================================== */
@media (max-width:900px){
  .body{grid-template-columns:1fr}
  .page{padding:14px;
    padding-left:max(14px,env(safe-area-inset-left,0px));
    padding-right:max(14px,env(safe-area-inset-right,0px));
    padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
  .frm{grid-template-columns:1fr}
  .gsearch{display:none}
  .navknopf{display:inline-grid}
  .side{position:fixed;top:calc(54px + env(safe-area-inset-top,0px));
    bottom:0;left:0;width:238px;z-index:70;
    transform:translateX(-100%);transition:transform .18s ease;
    box-shadow:0 0 34px rgba(0,0,0,.35)}
  .navschalter:checked ~ .body .side{transform:none}
  .navschalter:checked ~ .navschatten{display:block}
  /* Breite Tabellen bleiben erreichbar, statt am Rand abgeschnitten zu werden. */
  .card{overflow-x:auto}
  .kv{grid-template-columns:86px 1fr}
  /* Die Schublade ist auf dem Telefon die einzige Navigation — dort ist
     Schrift unter 11px keine Zurückhaltung, sondern ein Hindernis. */
  .side .grp,.side .sys .tt,.side .sys .fu{font-size:11px;letter-spacing:1px}
  .side a .cnt,.side .foot,.side .sys .z{font-size:11.5px}
  .side a{font-size:14px}
  .side a.chap{font-size:13px}
}

@media (max-width:1260px){
  /* Aus jeder Zeile wird ein Block. Die Spaltenköpfe verschwinden, ihre
     Beschriftung wandert an die Felder – sonst stünden dort sieben Werte
     ohne Erklärung untereinander. */
  table.t.journal,
  table.t.journal > tbody,
  table.t.journal > tbody > tr,
  table.t.journal > tbody > tr > td{display:block;width:auto}
  table.t.journal > thead{display:none}
  table.t.journal > tbody > tr{border-bottom:1px solid var(--line);padding:11px 13px}
  table.t.journal > tbody > tr.rr{background:#fdf6e3;border-left:3px solid var(--warn)}
  table.t.journal > tbody > tr.rr > td{background:none}
  table.t.journal > tbody > tr:hover > td{background:none}
  table.t.journal > tbody > tr > td{border:none;padding:2px 0;text-align:left}
  table.t.journal td[data-lb]:not(:empty)::before{content:attr(data-lb);display:block;
    font-size:9.5px;letter-spacing:.9px;text-transform:uppercase;color:var(--tx-3);
    font-weight:700;margin-top:6px}
  table.t.journal td.pfeil{display:inline-block;margin-right:7px;font-size:15px}
  table.t.journal td.nrzelle{display:inline-block;font-size:14.5px;font-weight:600}
  table.t.journal td.re{text-align:left}
  table.t.journal .knoepfe{white-space:normal;display:flex;flex-wrap:wrap;gap:6px;
    margin-top:9px;text-align:left}
  table.t.journal .knoepfe .btn{margin-left:0}
  table.t.journal .notizzelle form{max-width:420px}
  /* Aufklappen statt Aufspringen: In der Blockansicht ist ohnehin Platz. */
  table.t.journal .notizfeld:focus{position:static;width:100%;height:auto;
    box-shadow:none;top:auto;left:auto}
  /* Die aufgeklappten Anrufe desselben Tages: feste Spaltenbreiten aus der
     Tabellenansicht würden hier über den Rand hinausragen. */
  table.t.journal .buendel table.t td{width:auto;padding:6px 6px}
  table.t.journal .buendel td{padding:0}
  /* Das Erledigt-Auswahlfeld hat in der Tabelle die Spaltenbreite gefüllt –
     über die ganze Blockbreite sähe es aus wie ein Eingabefeld. */
  table.t.journal td.re form select{max-width:190px}
}

@media (max-width:640px){
  .topbar{gap:8px;padding:0 10px}
  .mandant{display:none}
  .tb-right{gap:6px}
  .tb-right .btn{padding:5px 9px;font-size:12px}
  .page{padding:12px;
    padding-bottom:calc(48px + env(safe-area-inset-bottom,0px))}
  .ph h1{font-size:19px}
  .seg{flex-wrap:wrap}
  .fbar form{width:100%}
  .fbar select,.fbar input{flex:1 1 150px;min-width:0}
  .replytabs{flex-wrap:wrap}
  .ph .sp{margin-left:0;width:100%}
  .ph .sp form,.ph .sp form input{flex:1 1 auto;min-width:0}
  .tb-right .lang{display:none}
  .tb-right .kurz{display:inline}
  .tb-right .abmelden{padding-left:11px;padding-right:11px;font-size:15px}
  .kv{grid-template-columns:1fr;gap:1px 0}
  .kv dt{margin-top:6px}
  .wahl{padding:22px 10px}
  #anrufpop{right:10px;left:10px;bottom:10px;width:auto}
}

/* ---------- SLA-Anzeige ------------------------------------------------ */
.slabar{display:block;position:relative;height:5px;border-radius:3px;background:var(--line-2);overflow:hidden;min-width:54px}
.slabar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--ok);transition:width .3s}
.slabar.wr i{background:#e0a02a} .slabar.bad i{background:var(--bad)} .slabar.gy i{background:var(--tx-3)}
.slacell{display:flex;flex-direction:column;gap:4px;min-width:78px}
.slacell .tx{font-size:11px;font-weight:600;color:var(--tx-2);white-space:nowrap}
.slacell.bad .tx{color:#a82c2c} .slacell.wr .tx{color:#96600a} .slacell.gy .tx{color:var(--tx-3)}
.slabox{display:grid;gap:12px}
.slazeile{display:grid;grid-template-columns:70px 1fr;gap:4px 10px;align-items:center}
.slazeile .lb{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--tx-3);font-weight:700}
.slazeile .rg{display:flex;flex-direction:column;gap:5px}
.slazeile .rg .zl{display:flex;gap:8px;align-items:baseline;font-size:12.4px;font-weight:600}
.slazeile .rg .zl .sp{margin-left:auto;font-weight:400;color:var(--tx-3);font-size:11.4px}
.pauseliste{margin-top:10px;border-top:1px solid var(--line-2);padding-top:9px}
.pauseliste div{font-size:11.6px;color:var(--tx-2);padding:3px 0}

/* ---------- Anruf-Popup (Screen-Pop) ----------------------------------- */
#anrufpop{position:fixed;right:18px;bottom:18px;width:330px;z-index:9000;background:var(--card);
 border:1px solid var(--line);border-left:4px solid var(--acc);border-radius:var(--r);
 box-shadow:0 12px 34px rgba(0,0,0,.18);overflow:hidden;display:none}
#anrufpop.an{display:block;animation:popauf .22s ease-out}
@keyframes popauf{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#anrufpop .kopf{display:flex;align-items:center;gap:8px;padding:10px 13px;background:var(--bg);
 border-bottom:1px solid var(--line-2);font-size:11px;letter-spacing:1px;text-transform:uppercase;
 color:var(--tx-3);font-weight:700}
#anrufpop .kopf .zu{margin-left:auto;cursor:pointer;font-size:15px;color:var(--tx-3);
 background:none;border:none;line-height:1;padding:0 2px}
#anrufpop .klingel{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acc);
 animation:blink 1s steps(2,start) infinite}
@keyframes blink{50%{opacity:.25}}
#anrufpop .leib{padding:12px 13px}
#anrufpop .nr{font-size:17px;font-weight:700;letter-spacing:.2px}
#anrufpop .wer{font-size:13px;margin-top:2px}
#anrufpop .unbek{font-size:12.5px;color:var(--tx-2);margin-top:3px}
#anrufpop .tix{margin-top:10px;border-top:1px solid var(--line-2);padding-top:8px}
#anrufpop .tix a{display:flex;gap:7px;align-items:center;padding:4px 0;font-size:12.4px}
#anrufpop .fuss{display:flex;gap:7px;padding:10px 13px;border-top:1px solid var(--line-2);
 background:var(--bg);flex-wrap:wrap}
/* Waehrend des Gespraechs bleibt das Fenster stehen – dann aber ruhig:
   kein blinkender Punkt mehr, gruener Rand statt Akzent. */
#anrufpop.spricht{border-left-color:var(--ok,#3c8f5a)}
#anrufpop.spricht .klingel{animation:none;background:var(--ok,#3c8f5a)}
/* Notizfeld im Rufjournal: schmal, solange man nur liest – und beim
   Hineinschreiben klappt es auf, damit man den ganzen Satz sieht. */
.notizzelle{position:relative}
.notizfeld{width:100%;min-width:84px;border:1px solid var(--line-2);border-radius:7px;padding:4px 8px;
  font-size:12px;background:var(--card);transition:box-shadow .12s ease}
.notizfeld:focus{position:absolute;left:0;top:-6px;width:min(330px,72vw);height:62px;
  z-index:60;padding:8px 10px;font-size:12.5px;line-height:1.4;
  border-color:var(--acc);box-shadow:0 10px 26px rgba(0,0,0,.16);outline:none}
.notizzelle .btn{flex:0 0 auto}

/* ---------- Rufjournal ------------------------------------------------- */
/* Eine Rufnummer, die umbricht, liest sich wie zwei Rufnummern. Sie bleibt
   deshalb in einer Zeile – der Zusatz darunter darf umbrechen. */
.nrzelle{white-space:nowrap}
.nrzelle .umbruch{font-size:11px;line-height:1.35}
.zeitzelle{white-space:nowrap}
.knoepfe{text-align:right;white-space:nowrap}
.knoepfe form{display:inline}
.knoepfe .btn{margin-left:4px}
.buendel td{padding-top:0}
/* offen/erledigt direkt in der Zeile: schmal, aber nie so schmal, dass das
   Wort abgeschnitten wird. */
.erlwahl{font-size:11px;border:1px solid var(--line-2);border-radius:6px;padding:2px 4px;
  background:var(--card);min-width:90px;max-width:100%}
/* Offener Rückrufwunsch: die ganze Zeile in Warnton, mit einem Streifen am
   linken Rand. Die Regel steht NACH der Hover-Regel – bei gleicher Stärke
   gewinnt die spätere, und ein Rückruf soll auch unter dem Zeiger sichtbar
   bleiben. */
/* Der Kunde hat geantwortet, wir sind am Zug (ab 1.79.0, gewuenscht).
   Bewusst dieselbe Tracht wie die Rueckrufzeile darunter: Es ist dieselbe
   Aussage — hier wartet jemand auf uns —, nur in einer anderen Liste. Zwei
   verschiedene Farben fuer dieselbe Aussage waeren zwei Dinge zu lernen
   statt einem. Die linke Kante traegt es mit, damit es auch dann auffaellt,
   wenn jemand Farben schlecht unterscheidet; das Abzeichen in der Zeile
   sagt es ausserdem in Worten. */
table.t tbody tr.ka td{background:#fdf4e4}
table.t tbody tr.ka:hover td{background:#fbecd0}
table.t tbody tr.ka td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
table.t tbody tr.rr td{background:#fdf6e3}
table.t tbody tr.rr:hover td{background:#fbf0d4}
table.t tbody tr.rr td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
/* Die aufklappbare Tageshistorie gehört zur Zeile darüber – sie bekommt
   denselben Ton, sonst zerfällt der Vorgang optisch in zwei. */
table.t tbody tr.buendel.rr td{background:#fdf6e3}
/* Breiten der aufgeklappten Tageshistorie – als Klassen, nicht im style-
   Attribut: Sonst käme die Blockansicht auf schmalen Geräten nicht dagegen an. */
.w26{width:26px} .w70{width:70px} .w110{width:110px} .w120{width:120px} .w130{width:130px}

/* Änderungshistorie im Ticketverlauf: eine Zeile, die man aufklappt. */
.hist{margin:14px 0}
.hist summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
  font-size:11.5px;color:var(--tx-3);text-align:center}
.hist summary::-webkit-details-marker{display:none}
.hist summary > span:nth-child(2){white-space:nowrap}
.hist summary > span:nth-child(2)::after{content:' ▾';font-size:10px}
.hist[open] summary > span:nth-child(2)::after{content:' ▴'}
.hist summary .ln{flex:1;height:1px;background:var(--line-2)}
.histliste{margin:8px auto 0;max-width:640px;background:var(--bg);border-radius:9px;
  padding:9px 13px}
.histliste div{font-size:11.8px;color:var(--tx-2);padding:2px 0}

/* Transkript im Ticket-Reiter und auf der eigenen Seite. */
.tr-gespraech{display:flex;flex-direction:column;gap:7px}
.tr-zeile{display:grid;grid-template-columns:140px 1fr;gap:12px;align-items:start;
  padding:6px 10px;border-radius:9px;background:var(--bg)}
.tr-zeile.eigen{background:#eef4ee}
.tr-wer{font-size:11.5px;color:var(--tx-2);font-weight:700;word-break:break-all}
.tr-text{font-size:13.2px;line-height:1.5}
@media (max-width:760px){.tr-zeile{grid-template-columns:1fr;gap:2px}}

.tr-akte{border-bottom:1px solid var(--line-2);padding:7px 0}
.tr-akte:last-child{border-bottom:none}
.tr-akte summary{cursor:pointer;display:flex;gap:7px;align-items:baseline;list-style:none}
.tr-akte summary::-webkit-details-marker{display:none}
.tr-akte summary::before{content:'▸';color:var(--tx-3);font-size:11px}
.tr-akte[open] summary::before{content:'▾'}
#anrufpop .btn.bad{background:var(--bad);border-color:var(--bad);color:#fff}
#anrufpop .btn.bad:hover{filter:brightness(.94)}

/* ---------- Auftragsauswahl ------------------------------------------- */
.wahl{position:fixed;inset:0;background:rgba(17,17,17,.42);z-index:9500;display:none;
 align-items:flex-start;justify-content:center;padding:60px 16px}
.wahl.an{display:flex}
.wahl .box{background:var(--card);border-radius:var(--r);box-shadow:0 18px 48px rgba(0,0,0,.24);
 width:100%;max-width:720px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}
.wahl .kopf{padding:13px 16px;border-bottom:1px solid var(--line-2);display:flex;gap:10px;
 align-items:center}
.wahl .kopf h3{margin:0;font-size:14px;font-weight:700}
.wahl .kopf .zu{margin-left:auto;background:none;border:none;font-size:19px;cursor:pointer;
 color:var(--tx-3);line-height:1;padding:0 3px}
.wahl .such{padding:11px 16px;border-bottom:1px solid var(--line-2);background:var(--bg)}
.wahl .such input{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 11px;
 font-size:13px;outline:none;background:var(--card)}
.wahl .such input:focus{border-color:var(--acc)}
.wahl .liste{overflow-y:auto;flex:1}
.wahl .tr{display:block;padding:11px 16px;border-bottom:1px solid var(--line-2);width:100%;
 text-align:left;background:none;border-left:none;border-right:none;border-top:none;cursor:pointer}
.wahl .tr:hover{background:var(--bg)}
.wahl .tr b{font-size:13px}
.wahl .tr .z{font-size:11.5px;color:var(--tx-2);margin-top:2px}
.wahl .stand{padding:11px 16px;font-size:12px;color:var(--tx-2)}
.positionen{margin-top:8px;border-top:1px solid var(--line-2);padding-top:7px}
.positionen div{font-size:11.8px;color:var(--tx-2);padding:2px 0;display:flex;gap:7px}
.positionen div .m{font-weight:700;color:var(--tx);min-width:56px}

/* ---------- Zeiterfassung --------------------------------------------- */
.zeitform{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.zeitform input,.zeitform select{border:1px solid var(--line);border-radius:8px;
 padding:6px 10px;font-size:12.8px;outline:none;background:var(--card)}
.zeitform input:focus,.zeitform select:focus{border-color:var(--acc)}
.zeitform .ab{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--tx-2)}
.zeitliste{width:100%;border-collapse:collapse;font-size:12.6px}
.zeitliste td{padding:6px 0;border-bottom:1px solid var(--line-2);vertical-align:top}
.zeitliste .d{font-weight:700;white-space:nowrap;width:54px;font-family:var(--mono)}
.zeitliste .w{color:var(--tx-3);white-space:nowrap;width:78px;font-size:11.5px}
.zeitsumme{display:flex;gap:14px;align-items:baseline;padding:9px 0 2px;flex-wrap:wrap}
.zeitsumme b{font-size:19px;font-weight:800;letter-spacing:-.4px}
.zeitsumme span{font-size:11.5px;color:var(--tx-2)}
.nichtab{opacity:.62}

/* ---------- Anrufhistorie beim Kunden ---------------------------------- */
/* Dasselbe Fenster wie die Auftragsauswahl, nur breiter: Hier stehen Zeilen
   mit Text, keine Auswahlliste. */
.kpi.klick{transition:border-color .12s}
.kpi.klick:hover{border-color:var(--acc)}
.wahl .box.breit{max-width:880px;max-height:86vh}
.ah-zeile{padding:11px 16px;border-bottom:1px solid var(--line-2)}
.ah-zeile:hover{background:var(--bg)}
.ah-oben{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ah-nr{font-size:12.5px;white-space:nowrap}
.ah-wer{font-size:12.5px;color:var(--tx-2)}
.ah-re{margin-left:auto;display:flex;align-items:center;gap:8px;white-space:nowrap}
.ah-zeit{font-size:11.5px;color:var(--tx-3)}
.ah-notiz{font-size:12.2px;color:var(--tx-2);margin-top:5px}
.ah-tr{margin-top:8px}
.ah-tr summary{cursor:pointer;list-style:none;font-size:11.8px;color:var(--acc-d);
  display:inline-flex;gap:6px;align-items:center}
.ah-tr summary::-webkit-details-marker{display:none}
.ah-tr summary::before{content:"\25B8";font-size:10px}
.ah-tr[open] summary::before{content:"\25BE"}
.ah-tr .inhalt{margin-top:8px;background:var(--bg);border-radius:9px;padding:10px 12px}
.ah-fuss{padding:10px 16px;border-top:1px solid var(--line-2);background:var(--bg);
  font-size:11.8px;color:var(--tx-3);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
@media (max-width:760px){
  .wahl{padding:0}
  .wahl .box.breit{max-height:100dvh;border-radius:0}
  .ah-re{margin-left:0;width:100%}
}

/* ---------- Aufklappbare Karte (Rufjournal auf der Startseite) ---------- */
/* Eine <details>-Karte, die wie jede andere Karte aussieht – nur dass ihr
   Kopf ein Schalter ist. */
.journalkarte summary{padding:13px 16px;display:flex;align-items:center;gap:10px;
  cursor:pointer;list-style:none;flex-wrap:wrap}
.journalkarte summary::-webkit-details-marker{display:none}
.journalkarte summary h3{margin:0;font-size:14px;font-weight:700}
.journalkarte summary::before{content:"\25B8";color:var(--tx-3);font-size:11px}
.journalkarte[open] summary::before{content:"\25BE"}
.journalkarte[open] summary{border-bottom:1px solid var(--line-2)}
.journalkarte summary .sp{margin-left:auto}
.journalkarte summary .zu{display:none}
.journalkarte[open] summary .auf{display:none}
.journalkarte[open] summary .zu{display:inline}
.journalkarte summary:hover{background:var(--bg)}

/* ===========================================================================
   Farben je Mitarbeiter (ab 1.69.0)

   Zehn Farben, jede mit einer Flaeche UND einer Schrift, die darauf lesbar
   ist. Das ist der Grund, warum es keinen freien Farbwaehler gibt: Eine
   Flaeche allein laesst sich waehlen, ein lesbares Paar muss man pruefen.

     .pf-x    Flaeche + Schrift   – fuer Terminkacheln und Karten
     .pfp-x   voller Punkt        – fuer Legenden, Listen und Spaltenkoepfe
     .pfr-x   nur die Linie       – fuer die linke Kante, wo die Flaeche
                                    schon etwas anderes sagt

   Die Punktfarben sind kraeftiger als die Flaechen: Als Flaeche waere das
   Kraeftige zu laut, als Punkt von acht Pixeln ist das Blasse unsichtbar.
   Dieselbe Ueberlegung steckt schon in der Monatsansicht, wo Termine unter
   560 Pixeln zu Punkten werden.
   =========================================================================== */
.pf-gruen  {background:#e3f3d4;color:#4a7310}
.pf-orange {background:#fde7d1;color:#95570b}
.pf-blau   {background:#dde9f7;color:#2c5f96}
.pf-lila   {background:#e9e2f6;color:#59449a}
.pf-tuerkis{background:#d6f0ee;color:#1d6f68}
.pf-pink   {background:#fbdde9;color:#a3306a}
.pf-gelb   {background:#faeec2;color:#7d6100}
.pf-braun  {background:#ece1d6;color:#74512f}
.pf-marine {background:#dde1ef;color:#394777}
.pf-grau   {background:#e5e8e2;color:#51564b}

/* Der Punkt selbst. Er steht ueberall dort, wo ein Name steht und die Farbe
   dazu gehoert: in der Benutzerliste, in der Legende, in der Teamansicht.
   Er steht VOR der Palette: Beide Regeln sind gleich stark, und bei gleicher
   Staerke gewinnt die spaetere. Stuende er darunter, waere jeder Punkt grau
   — und zwar genau so, wie es beim ersten Versuch war. */
.pkt{display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--line);vertical-align:baseline;margin-right:5px;flex:none}

.pfp-gruen  {background:#6aa013} .pfp-orange {background:#e08a2a}
.pfp-blau   {background:#3d7bbf} .pfp-lila   {background:#7c63c4}
.pfp-tuerkis{background:#2a968c} .pfp-pink   {background:#cf4d88}
.pfp-gelb   {background:#d2a900} .pfp-braun  {background:#9a6e44}
.pfp-marine {background:#51629c} .pfp-grau   {background:#8a8f82}

/* Dunkel – fuer BNI-Termine (ab 1.99.0, gewuenscht: „die BNI Termine sollen
   farblich etwas dunkler sein, also bei mir Gerald dunkelgruen und bei
   Natascha dunkel rot").

   Es ist bewusst KEINE eigene BNI-Farbe, sondern dieselbe Personenfarbe eine
   Stufe tiefer: Gerald ist gruen, also dunkelgruen; Natascha ist pink, also
   dunkelrot. Eine feste BNI-Farbe haette die Person verschluckt — und WER
   etwas vorhat, ist im Kalender die erste Frage. So beantwortet die Kachel
   beide: die Farbe sagt wer, die Tiefe sagt BNI.

   Schrift ist hier weiss statt dunkel; auf diesen Flaechen traegt die
   dunkle Schrift der hellen Palette nicht mehr. */
.pfd-gruen  {background:#3d6b0e;color:#fff}
.pfd-orange {background:#a2600f;color:#fff}
.pfd-blau   {background:#2b5a8c;color:#fff}
.pfd-lila   {background:#513a94;color:#fff}
.pfd-tuerkis{background:#176862;color:#fff}
.pfd-pink   {background:#94264f;color:#fff}
.pfd-gelb   {background:#8a6f00;color:#fff}
.pfd-braun  {background:#6b4628;color:#fff}
.pfd-marine {background:#333f6e;color:#fff}
.pfd-grau   {background:#4b5046;color:#fff}

.pfr-gruen  {border-left-color:#6aa013} .pfr-orange {border-left-color:#e08a2a}
.pfr-blau   {border-left-color:#3d7bbf} .pfr-lila   {border-left-color:#7c63c4}
.pfr-tuerkis{border-left-color:#2a968c} .pfr-pink   {border-left-color:#cf4d88}
.pfr-gelb   {border-left-color:#d2a900} .pfr-braun  {border-left-color:#9a6e44}
.pfr-marine {border-left-color:#51629c} .pfr-grau   {border-left-color:#8a8f82}

/* Die Auswahl in der Maske: Farbflaechen zum Antippen statt einer Liste mit
   Farbnamen. Wer eine Farbe waehlt, will sie sehen und nicht lesen. */
.farbwahl{display:flex;flex-wrap:wrap;gap:8px}
.farbwahl label{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  border:1px solid var(--line);border-radius:999px;padding:5px 12px 5px 9px;
  font-size:12.5px;font-weight:600;background:var(--card)}
.farbwahl input{position:absolute;opacity:0;width:0;height:0}
.farbwahl label:hover{border-color:var(--tx-3)}
.farbwahl input:checked + .pkt{box-shadow:0 0 0 3px var(--card),0 0 0 5px var(--tx-2)}
.farbwahl input:checked ~ span{text-decoration:underline}
.farbwahl label:has(input:checked){border-color:var(--tx-2);background:var(--bg)}
.farbwahl input:focus-visible + .pkt{outline:2px solid var(--acc);outline-offset:3px}

/* ===========================================================================
   Nachgezogene Termine (ab 1.71.0)

   Ein Termin, der heute steht, weil er gestern offen blieb, muss das sagen –
   sonst sucht man den Fehler bei sich. Das Abzeichen ist klein und ruhig;
   ab dem dritten Mal wird es warnfarben, denn drei Mal nachgezogen heisst:
   Hier ruehrt sich nichts, und das ist eine andere Auskunft.
   =========================================================================== */
.nachgezogen{display:inline-block;font-size:10px;font-weight:700;line-height:1;
  padding:3px 6px;border-radius:999px;background:var(--line-2);color:var(--tx-2);
  margin-left:6px;vertical-align:middle;white-space:nowrap}
.nachgezogen.oft{background:#fdf0d8;color:#96600a}

/* ===========================================================================
   Durchsuchbare Auswahlfelder (ab 1.94.0)

   Sieht aus wie das <select>, das es ersetzt — bewusst: Es steht in jeder
   Filterzeile und in jedem Formular, und ein Feld, das sich als etwas Neues
   vorstellt, erklaert sich damit nur selbst.

   Die Liste haengt per `position:fixed` am Bildschirmrand (siehe wahl.js) und
   braucht deshalb eine eigene Lage im Stapel — ueber dem Kasten, in dem das
   Feld steht, aber unter dem Anruffenster.
   =========================================================================== */
.twahl{position:relative;display:inline-flex;align-items:center;min-width:0;
  max-width:100%}
.twahl-versteckt{display:none}
.twahl-feld{width:100%;min-width:0;background:var(--card);border:1px solid var(--line);
  border-radius:8px;padding:6px 26px 6px 10px;font-size:12.5px;outline:none;
  color:var(--tx);text-overflow:ellipsis}
.twahl::after{content:"";position:absolute;right:9px;top:50%;width:6px;height:6px;
  margin-top:-4px;border-right:1.6px solid var(--tx-3);border-bottom:1.6px solid var(--tx-3);
  transform:rotate(45deg);pointer-events:none}
.twahl.auf::after{margin-top:-1px;transform:rotate(225deg)}
.twahl-feld:focus{border-color:var(--acc-d)}
.twahl.gesetzt .twahl-feld{font-weight:600}

.twahl-kasten{position:fixed;z-index:4000;background:var(--card);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 28px rgba(17,17,17,.14);
  overflow:hidden}
.twahl-liste{overflow:auto;max-height:300px;padding:4px}
.twahl-z{padding:7px 9px;border-radius:7px;font-size:12.8px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.twahl-z mark{background:var(--acc-soft);color:var(--acc-d);font-weight:700;padding:0}
.twahl-z.dran{background:var(--acc);color:#111}
.twahl-z.dran mark{background:transparent;color:#111}
.twahl-z.gesetzt{font-weight:700}
.twahl-z.aus{color:var(--tx-3);cursor:default}
.twahl-gruppe{padding:7px 9px 3px;font-size:10.6px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--tx-3)}
.twahl-nichts{padding:14px 9px;font-size:12.5px;color:var(--tx-2);text-align:center}
.twahl-fuss{padding:6px 10px;border-top:1px solid var(--line-2);font-size:11px;
  color:var(--tx-3);background:var(--bg)}

/* In den Filterzeilen teilt es sich den Platz wie die Felder daneben. */
.fbar .twahl{flex:0 1 auto}
@media (max-width:900px){
  .fbar .twahl{flex:1 1 150px}
}
/* Im Zeitformular und in den Terminfeldern steht es ueber die ganze Breite. */
.zeitform .twahl,.frm .twahl{width:100%}

/* BNI-Termine (ab 1.95.0)

   Eine eigene Farbe, und bewusst nicht Rot: Rot heisst in dieser Oberflaeche
   „P1" und „abgesagt". Ein 1-2-1 ist weder dringend noch schiefgegangen. */
.tag.bni{background:#f1e7f5;color:#6b3b7a}

/* Ein kleineres Abzeichen (ab 1.96.0). Es stand bis dahin zwanzigmal als
   `style="font-size:10px"` in den Vorlagen — und eine Schriftgroesse im
   Stilattribut laesst sich auf dem Telefon nicht mehr anheben. */
.tag.xs{font-size:10px;padding:2px 6px}

/* ===========================================================================
   In der Hand (ab 1.96.0)

   Diese Anwendung ist am Schreibtisch entstanden und wird am Telefon
   benutzt. Das Grundgerüst trug das schon (Schublade statt Seitenleiste ab
   900px, Rufjournal als Blöcke ab 1260px) — was fehlte, waren die drei
   Dinge, die ein Telefon von einem Bildschirm unterscheiden:

   1. **Der Ausschnitt des Geräts.** Als Startbildschirm-App läuft die Seite
      unter der Statusleiste und der Streifen am unteren Rand durch. Ohne
      `viewport-fit=cover` sind `env(safe-area-inset-*)` alle Null, und mit
      `black-translucent` steckt die Kopfzeile hinter der Uhr.
   2. **Ein Finger ist kein Mauszeiger.** Ein Knopf von 27 Pixeln ist mit der
      Maus genau; mit dem Daumen ist er ein Glücksspiel.
   3. **Ein Eingabefeld unter 16px lässt iOS hineinzoomen** — und die Seite
      steht danach schief, bis man sie zurückschiebt.

   Was hier NICHT steht: eine zweite Oberfläche fürs Telefon. Dieselbe Seite,
   andere Maße. Zwei Oberflächen laufen auseinander, und zwar an der Stelle,
   die man nur in einer von beiden gepflegt hat.
   =========================================================================== */

/* ---------- 1) Der Ausschnitt des Geräts ---------- */
/* `max()` statt eines festen Werts: Im Hochformat sind die seitlichen Ränder
   Null, im Querformat auf einem Gerät mit Aussparung sind sie es nicht. */
.app{grid-template-rows:calc(54px + env(safe-area-inset-top,0px)) 1fr}
/* Und die Regel, die das Ganze erst zusammenhält: Ein Rasterfeld ist von
   sich aus mindestens so breit wie sein Inhalt. Die Kopfzeile wollte 381
   Pixel — mit Logo, drei Knöpfen und „Abmelden" ausgeschrieben —, und weil
   `.app` auf `overflow:hidden` steht, lief damit die GANZE Seite auf 381
   Pixeln und wurde am rechten Rand still abgeschnitten. Auf einem iPhone SE
   fehlten sechzig Pixel, ohne dass sich etwas schieben ließ.
   Gefunden hat das nicht der Blick auf die Seite, sondern die Probe —
   nachdem sie gelernt hatte, dass „abgeschnitten" und „überläuft" zwei
   verschiedene Dinge sind. */
.app,.topbar,.body,.main,.tb-right{min-width:0}
.topbar{overflow:hidden}
.topbar{padding-top:env(safe-area-inset-top,0px);
  padding-left:max(14px,env(safe-area-inset-left,0px));
  padding-right:max(14px,env(safe-area-inset-right,0px))}
.navschatten{inset:calc(54px + env(safe-area-inset-top,0px)) 0 0}
.page{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px));
  padding-left:max(24px,env(safe-area-inset-left,0px));
  padding-right:max(24px,env(safe-area-inset-right,0px))}

/* ---------- 2) Ein Finger ist kein Mauszeiger ---------- */
@media (pointer:coarse){
  /* 40px ist nicht schön, sondern treffsicher. Wo es eng wird, sind es 36 —
     darunter fängt das Raten an. */
  .btn,button:not(.btn):not(.zu){min-height:38px}
  /* Keine Anzeigeart ändern: Manche Aufklapper tragen ihr Dreieck noch
     vom Browser, und `display:flex` nimmt es ihnen weg. Nur die Höhe. */
  summary{min-height:34px;padding-top:3px;padding-bottom:3px}
  .btn.sm{min-height:36px;padding:7px 12px;font-size:12.5px}
  .seg a{min-height:40px;display:flex;align-items:center;gap:6px;padding:0 13px}
  .side a{min-height:40px}
  .side details.vw > summary{min-height:40px}
  /* Ankreuzfelder tragen oft ein `style="width:auto"` aus der Vorlage —
     deshalb `min-width`, das gewinnt gegen `width`. */
  /* 24 Pixel plus ein Rand oben und unten: Der Rand waechst die
     BESCHRIFTUNG mit, und die ist die Flaeche, die der Daumen trifft. */
  input[type=checkbox],input[type=radio]{min-width:24px;min-height:24px;
    margin-top:4px;margin-bottom:4px}
  select{min-height:38px}
  /* Verweise, die allein in ihrem Kasten stehen, sind Schaltflächen und
     keine Stellen im Satz — sie bekommen eine Fläche. */
  .farblegende a,a.tit,.card .bd > a,.side-card .sb > a{
    display:inline-block;padding:7px 0;min-height:32px}
  /* Zeilen in Listen, die als Ganzes anklickbar sind. */
  table.t tbody tr[onclick] td{padding-top:13px;padding-bottom:13px}
  .twahl-z{padding:11px 10px}
  .twahl-feld{min-height:38px}

  /* Und der Grund für das einzige `!important` in dieser Datei: Unter 16px
     zoomt iOS beim Antippen in das Feld hinein, und die Seite steht danach
     schief. Das ist keine Geschmacksfrage, sondern eine Eigenheit des
     Geräts. Jede Ausnahme davon wäre ein Feld, das die Seite verrutschen
     lässt — und man findet sie nie beim Bauen, sondern beim Tippen. */
  input:not([type=checkbox]):not([type=radio]):not([type=file]),
  select,textarea{font-size:16px !important}

  /* Schrift unter 11px liest am Schreibtisch niemand gern und mit dem
     Telefon in der Hand niemand. Die Untergrenze hängt am ZEIGER und nicht
     an der Breite: Ein Telefon im Querformat ist immer noch ein Telefon. */
  table.t th{font-size:11px}
  .tag{font-size:11.5px;padding:3px 9px}
  .tag.xs{font-size:11px;padding:2px 7px}
  .kalmonat .kopf{font-size:11px}
  .kalmonat .fei{font-size:10.5px}
  .avatar{font-size:11px}
  .side .grp,.side .sys .tt,.side .sys .fu{font-size:11px;letter-spacing:1px}
  .side a .cnt,.side .foot,.side .sys .z{font-size:11.5px}
}

/* ---------- 3) Telefonbreiten ---------- */
@media (max-width:640px){

  /* Die Kopfzeile: Auf 320px stehen dort fünf Dinge nebeneinander, von denen
     drei verzichtbar sind. */
  .topbar{gap:9px}
  .wm{font-size:17px}

  /* Die Seitenschublade darf schmaler sein als das Gerät — sonst ist sie
     keine Schublade, sondern eine zweite Seite. */
  .side{width:min(84vw,268px)}

  /* Die Kacheln auf der Startseite: zwei nebeneinander statt einer
     untereinander. Vier Zahlen, die man mit einem Blick liest, sind der Sinn
     dieser Reihe — untereinander wären es vier Bildschirmlängen. */
  .kpis{grid-template-columns:1fr 1fr;gap:9px}
  .kpi{padding:11px 12px}
  .kpi .vl{font-size:23px}
  .kpi .lb,.kpi .dt{font-size:11.2px}

  /* Knöpfe in Kopfzeilen über die ganze Breite, wenn sie sonst auf halber
     Zeile hängen blieben. */
  .ph .sp{gap:7px}
  .ph .sp > .btn{flex:1 1 auto;justify-content:center}

  /* ---- Listen werden Blöcke ----
     Dieselbe Lösung wie beim Rufjournal seit 1.50.0, nur allgemein: Aus
     jeder Zeile wird ein Block, die Spaltenköpfe verschwinden, und ihre
     Beschriftung wandert über den Wert. Eine Tabelle mit acht Spalten auf
     375 Pixeln ist auch dann unbrauchbar, wenn man sie seitwärts schieben
     kann — man weiß dann nur nicht, dass man etwas übersieht. */
  table.t.liste,
  table.t.liste > tbody,
  table.t.liste > tbody > tr > td{display:block;width:auto}
  table.t.liste > tbody{display:block}
  table.t.liste > thead{display:none}
  /* Die Zeile wird ein Flussbehälter, damit die Reihenfolge im Block eine
     andere sein darf als die der Spalten: Die Überschrift nach oben, die
     kurzen Abzeichen nach unten. Die Zellen bleiben dieselben Zellen —
     zwei Fassungen derselben Zeile gäbe es sonst, und eine davon wäre
     irgendwann falsch. */
  table.t.liste > tbody > tr{display:flex;flex-wrap:wrap;align-items:baseline;
    border-bottom:1px solid var(--line);padding:12px 14px}
  table.t.liste > tbody > tr:last-child{border-bottom:none}
  table.t.liste > tbody > tr:hover > td{background:none}
  table.t.liste > tbody > tr > td{border:none;padding:2px 0;text-align:left;
    width:auto !important;flex:0 0 100%;order:1;min-width:0}
  table.t.liste > tbody > tr > td:empty{display:none}
  table.t.liste td.kopf{order:0}
  table.t.liste td[data-lb]:not(:empty)::before{content:attr(data-lb) " ";
    font-size:9.8px;letter-spacing:.9px;text-transform:uppercase;color:var(--tx-3);
    font-weight:700;margin-right:5px}
  /* Die Kopfzelle trägt den Block: größer, und was darunter steht, ist der
     Kleingedruckte Rest. */
  table.t.liste td.kopf{font-size:14.5px;line-height:1.35;margin-bottom:3px;order:0}
  /* Kurze Zellen stehen nebeneinander statt untereinander: Status,
     Priorität und Alter sind drei Worte, keine drei Zeilen. Die Zellen
     bleiben dabei die Zellen der Tabelle — auf dem Schreibtisch ändert
     sich nichts, und zwei Fassungen derselben Zeile gibt es nicht. */
  table.t.liste td.chip{flex:0 0 auto;order:2;margin:7px 8px 0 0}
  /* Was auf dem Telefon nichts beiträgt, bleibt weg. Es steht weiterhin in
     der Zeile — nur nicht im Weg. */
  table.t.liste td.weg{display:none}
  /* Ein Strich sagt am Schreibtisch „diese Spalte ist hier leer" und hält
     die Spalten in einer Linie. Im Block sagt er nichts und kostet eine
     Zeile — bei hundertzwanzig Mitgliedern sind das hundertzwanzig. */
  table.t.liste td.leerwert{display:none}
}

@media (max-width:380px){
  /* Auf dem kleinsten gängigen Gerät (320px) steht in der Kopfzeile nur
     noch, was man dort wirklich braucht. */
  .page{padding-left:max(10px,env(safe-area-inset-left,0px));
        padding-right:max(10px,env(safe-area-inset-right,0px))}
  .kpis{grid-template-columns:1fr 1fr;gap:8px}
  .card .bd{padding:13px}
  .card .hd{padding:11px 13px}
  .ph h1{font-size:18px}
  .seg a{padding:0 10px;font-size:12px}
}

/* ===========================================================================
   Mobilansicht (ab 1.97.0, gewünscht)

   „Am Handy würde ich gerne auf Mobilansicht schalten können, da hier nicht
   alle Menüs notwendig sind."

   Der Unterschied zu 1.96.0 steht in einem Satz: Dort ging es darum, dass
   dieselbe Seite auf einem Telefon trägt. Hier entscheidet der Mensch, dass
   er gerade unterwegs ist — und unterwegs braucht er WENIGER, nicht dasselbe
   in kleiner. Deshalb hängt die Mobilansicht an einem Schalter und nicht an
   der Bildschirmbreite: Einen Schalter kann man zurückdrehen.
   =========================================================================== */

/* Der Schalter steht dort, wo „Zeit erfassen" steht. Auf schmalen Geräten
   tritt „Zeit erfassen" beiseite — so gewünscht; am Schreibtisch stehen
   beide da, denn dort ist Platz. */
@media (max-width:640px){
  #zeitknopf{display:none}
}
/* In der Mobilansicht selbst hat der Schalter nichts mehr zu suchen: Dort
   führt der Weg zurück über das Menü. */
body.mobil .mobilknopf{display:none}

/* Der Weg zurück, unten in der Schublade. Er sieht aus wie ein Menüeintrag,
   weil er einer ist — nur dass er kein Ziel hat, sondern einen Schalter
   umlegt. */
.ansichtform{margin:10px 0 0;padding:10px 0 0;border-top:1px solid #2b2e26}
.ansichtknopf{display:flex;align-items:center;gap:9px;width:100%;
  padding:9px 10px;border-radius:7px;border:1px solid #33372c;background:transparent;
  color:#b9bfae;font-size:13px;font-family:inherit;cursor:pointer;text-align:left}
.ansichtknopf::before{content:"\2922";font-size:14px;color:#6f7566}
.ansichtknopf:hover{background:#23261f;color:#fff;border-color:#3f4438}

/* ===========================================================================
   Der Kunde auf einen Blick (ab 2.1.0)

   Oben zwei Karten nebeneinander — Stammdaten und Ansprechpartner —, darunter
   Reiter. Vorbild war die Maske, die Gerald aus desk4 kennt; was hier steht,
   sind die Bausteine dafuer. Sie sind bewusst allgemein gehalten: Ein
   Reiterstreifen ueber einem Inhaltsfeld ist nichts Kundenspezifisches.

   Warum die Reiterleiste NICHT umbricht, sondern schiebbar ist: Acht Reiter
   in zwei Zeilen sehen aus wie zwei Gruppen, und man sucht die Ordnung
   dahinter. Eine Zeile, die man seitwaerts schiebt, ist ehrlicher.
   =========================================================================== */
.kkopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;
  margin-bottom:14px}
@media (max-width:900px){.kkopf{grid-template-columns:1fr}}
.kkarte{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);min-width:0;display:flex;flex-direction:column}
.kkarte > .hd{padding:10px 14px;border-bottom:1px solid var(--line);display:flex;
  align-items:center;gap:9px;flex-wrap:wrap}
.kkarte > .hd h3{margin:0;font-size:13px;letter-spacing:.3px;text-transform:uppercase;
  color:var(--tx-2)}
.kkarte > .hd .sp{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.kkarte > .bd{padding:13px 14px}

.kontaktreiter{display:flex;gap:4px;flex-wrap:wrap}
.kontaktreiter .kr{border:0;background:transparent;padding:7px 11px;border-radius:8px;
  font-weight:600;font-size:12.5px;color:var(--tx-2);cursor:pointer;line-height:1.3;
  display:inline-flex;align-items:center;gap:5px}
.kontaktreiter .kr:hover{background:var(--line-2)}
.kontaktreiter .kr.on{background:var(--acc-soft);color:#4a7310}
.kontaktreiter .kr.neu{color:var(--tx-3)}
.ktinhalt{margin-top:12px}
.kontaktreiter .ktname{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.kreiter{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:2px;padding:0 4px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r) var(--r) 0 0}
.kreiter .kr{flex:0 0 auto;border:0;background:transparent;padding:10px 11px;
  border-radius:8px 8px 0 0;font-weight:600;font-size:12.5px;color:var(--tx-2);
  cursor:pointer;white-space:nowrap}
.kreiter .kr:hover{background:var(--line-2)}
.kreiter .kr.on{background:var(--acc-soft);color:#4a7310;box-shadow:inset 0 -2px 0 var(--acc)}
.kreiter .cnt{background:var(--line-2);color:var(--tx-2);border-radius:999px;padding:0 6px;
  font-size:10.5px;margin-left:3px}
.krfeld{background:var(--card);border:1px solid var(--line);border-top:0;
  border-radius:0 0 var(--r) var(--r);padding:15px;box-shadow:var(--sh)}
/* Die Karten IN einem Reiter brauchen keinen zweiten Rahmen — das Feld ist
   schon einer. Sonst stuende ein Kasten im Kasten im Kasten. */
.krfeld > .krinhalt > .card,
.krfeld > .krinhalt > details.card{border:0;box-shadow:none;border-radius:0;margin:0}
.krfeld > .krinhalt > .card > .hd,
.krfeld > .krinhalt > details.card > summary.hd{padding-left:0;padding-right:0}
.krfeld > .krinhalt > .card > .bd{padding-left:0;padding-right:0}
.kbkopf{font-size:12px;letter-spacing:.3px;text-transform:uppercase;color:var(--tx-2);
  font-weight:700;display:flex;align-items:center;gap:9px;margin-bottom:9px}
.kbkopf .sp{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:400}
.kbleib{min-width:0}
/* Eine Liste aus Zeilen, die ganz anklickbar sind (Notizzettel am Kunden,
   Termine). Kein <table>: Was hier steht, ist kein Raster aus Spalten,
   sondern je Zeile ein Ding mit Namen und zwei Nebensaetzen. */
.kliste{display:flex;flex-direction:column}
.kliste .kzeile{display:flex;gap:10px;align-items:flex-start;padding:10px 4px;
  border-bottom:1px solid var(--line-2);color:inherit;min-width:0}
.kliste .kzeile:last-child{border-bottom:0}
.kliste a.kzeile:hover{background:var(--bg)}
.kliste .kzeile.erl b{color:var(--tx-2);text-decoration:line-through}
.kliste .kzeile .pkt{margin-top:5px}
.kliste .kztext{min-width:0;flex:1 1 auto}
.kliste .kzab{display:block;margin-top:2px}
.kliste .sp{margin-left:auto;flex:none}

.notizkasten{white-space:pre-wrap;font-size:13.2px;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}

.kwerk{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filtchips{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
/* ACHTUNG, Namenskollision: „chip" heisst hier zweierlei.
 *
 *   · <a class="chip">  ist ein Filterchip — eine runde Pille zum Klicken.
 *   · <td class="chip"> markiert eine KURZE ZELLE. Sie soll auf dem Telefon
 *     neben den anderen kurzen stehen statt unter ihnen; die Regel dafuer
 *     steht im Media-Query weiter oben und will von dieser hier nichts.
 *
 * Ohne das `:not(td)` bekam jede dieser Zellen den Pillenstil — und mit ihm
 * `display:inline-block`. Ein <td>, das kein Tabellenkind mehr ist, nimmt
 * der Browser aus der Spaltenordnung heraus und steckt alle aufeinander
 * folgenden in EINE anonyme Zelle: In der Kundenliste standen Kontakte,
 * Anlagen und Offen dadurch untereinander in der Spalte Geschaeftszeit,
 * waehrend ihre eigenen drei Spalten leer blieben.
 *
 * Dieselbe Sorte Fehler wie `audio.ERLAUBT` neben `anhang.ERLAUBT` in
 * 2.4.0: zwei Dinge, ein Name — und niemandem faellt es auf, solange sich
 * die beiden nicht begegnen. */
.chip:not(td){border:1px solid var(--line);background:var(--card);border-radius:999px;
  padding:4px 11px;font-size:12px;font-weight:600;color:var(--tx-2);cursor:pointer;
  display:inline-block}
.chip.on:not(td){background:var(--acc-soft);border-color:#cfe39a;color:#4a7310}
.domchip{display:inline-flex;align-items:center;gap:4px;background:var(--line-2);
  border-radius:999px;padding:2px 4px 2px 10px;font-size:12px;margin:0 5px 5px 0}
.domchip form{display:inline-flex}
.domchip .x{border:0;background:transparent;color:var(--tx-3);cursor:pointer;
  font-size:14px;line-height:1;padding:0 5px}
.domchip .x:hover{color:var(--bad)}

.zsumme{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:760px){.zsumme{grid-template-columns:repeat(2,minmax(0,1fr))}}
.zsumme > div{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  padding:10px 12px;min-width:0}
.zsumme .lb{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--tx-2);
  font-weight:700}
.zsumme .vl{font-size:21px;font-weight:800;letter-spacing:-.4px;margin:2px 0 1px}

.kfuss{margin-top:16px;padding-top:10px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--tx-3);display:flex;gap:14px;flex-wrap:wrap}

@media (pointer:coarse){
  .kreiter .kr,.kontaktreiter .kr{min-height:38px}
  /* Auch hier nur der Filterchip — ein <td> mit `display:inline-flex`
     richtet denselben Schaden an wie oben beschrieben. */
  .chip:not(td){min-height:30px;display:inline-flex;align-items:center}
}

/* ==========================================================================
   Tools als Kacheln (ab 2.9.0, gewuenscht)

   Vorher: elf Karten in voller Breite untereinander, dazu drei Seitenkarten
   mit Erklaerungen. Jetzt: Kacheln mit dem Namen, zwei nebeneinander — ein
   Klick oeffnet das Werkzeug in einem Fenster, das aus seiner Kachel
   aufgeht. Die Beschreibung steht IM Fenster, nicht daneben; das war der
   zweite Platzfresser.
   ========================================================================== */
.wzrahmen{display:grid;gap:16px;align-items:start;
  grid-template-columns:minmax(300px,1fr) minmax(240px,0.62fr)}

/* Immer zwei nebeneinander (gewuenscht: „das wirkt ruhiger"). Eine Anzahl,
   die mit der Fensterbreite springt, macht die Seite bei jeder Groesse
   anders — zwei bleiben zwei. */
/* `minmax(0,1fr)` und nicht `1fr`: Ein `1fr` ist in Wahrheit
   `minmax(auto,1fr)`, und dieses `auto` ist so breit wie das laengste Wort
   darin. „Verbindungspruefung" hat das Raster am Telefon um 65px ueber den
   Rand geschoben — gemessen, nicht vermutet. Die Null nimmt dem Raster das
   Recht, breiter zu werden als sein Platz; der Name bricht dann um. */
.wzraster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:9px;align-content:start}

.wzgruppe{grid-column:1/-1;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;
  color:var(--tx-3);font-weight:700;margin:9px 0 -2px}
.wzgruppe:first-child{margin-top:0}
/* Gruppen lassen sich ausblenden: Sie helfen beim Finden, brechen aber jede
   Zeile um. Die Favoritenzeile bleibt — sonst stuenden oben Kacheln ohne
   erkennbaren Grund. */
.ohne-gruppen .wzgruppe:not(.favgruppe){display:none}
.favgruppe{color:var(--acc-d)}
.favgruppe[hidden]{display:none}

.wzkachel{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:13px 13px;min-height:60px;cursor:pointer;text-align:left;
  display:flex;align-items:center;font:inherit;font-size:13.2px;color:var(--tx);
  text-decoration:none;box-shadow:var(--sh);min-width:0;
  transition:transform .12s ease, border-color .12s ease}
.wzkachel:hover{border-color:var(--tx-3);transform:translateY(-1px)}
.wzkachel:active{transform:scale(.985)}
/* `break-word` und nicht `anywhere`, dazu Silbentrennung: Lange Namen
   muessen umbrechen koennen, aber „Subnetzrechn/er" liest sich schlechter
   als „Subnetz-/rechner". Die Trennung macht der Browser, weil die Seite
   `lang="de"` traegt. */
.wzname{font-weight:700;line-height:1.3;padding-right:42px;
  min-width:0;overflow-wrap:break-word;hyphens:auto}
.wzecke{position:absolute;top:8px;right:8px;display:flex;align-items:center;gap:6px}
.wzportal{width:7px;height:7px;border-radius:50%;background:var(--acc-d);flex:none}
.wzpfeil{color:var(--tx-3);font-size:12px;line-height:1}
.wzstern{display:flex;padding:2px;border-radius:5px;cursor:pointer;line-height:0}
.wzstern svg{width:15px;height:15px;fill:none;stroke:var(--tx-3);stroke-width:1.6;
  stroke-linejoin:round}
.wzstern:hover svg{stroke:var(--acc-d)}
/* Gemerkt: gefuellt. Der Umriss allein waere zu leise — man soll auf einen
   Blick sehen, welche Kacheln oben stehen. */
.wzkachel.fav .wzstern svg{fill:var(--acc);stroke:var(--acc-d)}

.wzseite{position:sticky;top:14px}
.wzhinweis{border:1px dashed var(--line);border-radius:var(--r);padding:17px 16px;
  color:var(--tx-2)}

/* ---------------------------------------------------------------- Fenster

   <dialog> und kein eigener Ueberbau: Damit schliesst die Esc-Taste von
   selbst, der Tastaturfokus bleibt im Fenster gefangen, und die Seite
   dahinter ist fuer Vorleseprogramme stumm. Das alles muesste man sonst
   nachbauen — und eine Stelle davon vergisst man. */
.wzdialog{border:0;padding:0;border-radius:14px;background:var(--card);color:var(--tx);
  width:min(560px, calc(100vw - 32px));max-height:calc(100vh - 48px);
  box-shadow:0 24px 64px rgba(16,22,12,.28), 0 2px 8px rgba(16,22,12,.12);
  overflow:auto}
.wzdialog.weit{width:min(760px, calc(100vw - 32px))}
/* Kopf und Rumpf bekommen ihre Masse hier und nicht von `.card`: Das Fenster
   ist KEINE Karte (sonst saesse eine Karte in einer Karte), also greift
   `.card .hd` nicht — der Schliessen-Knopf stand dadurch mitten in der Zeile
   statt rechts aussen. Gesehen im Bildschirmfoto, nicht im Quelltext. */
.wzdialog .hd{position:sticky;top:0;background:var(--card);border-radius:14px 14px 0 0;
  z-index:2;display:flex;align-items:center;gap:10px;padding:13px 16px;
  border-bottom:1px solid var(--line-2)}
.wzdialog .hd h3{margin:0;font-size:14px;font-weight:700}
.wzdialog .hd .sp{flex:1 1 auto;min-width:0;margin:0}
.wzdialog .hd .wzzu{margin-left:auto;flex:none}
.wzdialog .bd{padding:16px}
/* Die Seite dahinter bleibt schemenhaft stehen — zurueckgenommen, nicht
   ausgeblendet: Man soll sehen, wo man war. Deshalb ein heller Schleier mit
   Unschaerfe und kein dunkler Vorhang: Ein kraeftiger Schleier macht aus
   „schemenhaft" ein „weg". */
.wzdialog::backdrop{background:rgba(28,30,26,.22);backdrop-filter:blur(4px)}

/* Der Ballon: Das Fenster waechst aus der Kachel heraus, schwingt einmal
   leicht ueber und kommt zur Ruhe. `--von-x/--von-y` setzt tools.js auf den
   Abstand der angeklickten Kachel zur Bildmitte — ohne das waechse jedes
   Fenster aus der Mitte, und man verloere, welche Kachel es war. */
@keyframes wz_auf{
  from{transform:translate(var(--von-x,0), var(--von-y,0)) scale(.16);opacity:0}
  to  {transform:translate(0,0) scale(1);opacity:1}
}
@keyframes wz_zu{
  from{transform:translate(0,0) scale(1);opacity:1}
  to  {transform:translate(var(--von-x,0), var(--von-y,0)) scale(.16);opacity:0}
}
@keyframes wz_schleier{from{opacity:0} to{opacity:1}}
.wzdialog[open]{animation:wz_auf .36s cubic-bezier(.34,1.56,.64,1)}
.wzdialog[open]::backdrop{animation:wz_schleier .36s ease}
.wzdialog.geht[open]{animation:wz_zu .2s ease-in forwards}
.wzdialog.geht[open]::backdrop{animation:wz_schleier .2s ease reverse forwards}

/* Wer Bewegung im Betriebssystem abgeschaltet hat, bekommt keine. Das ist
   keine Hoeflichkeit: Fuer manche Menschen loest so eine Bewegung Uebelkeit
   aus. */
@media (prefers-reduced-motion:reduce){
  .wzdialog[open],.wzdialog.geht[open],
  .wzdialog[open]::backdrop,.wzdialog.geht[open]::backdrop{animation:none}
  .wzkachel{transition:none}
}

@media (max-width:860px){
  /* Am Telefon ist fuer „daneben" kein Platz: Die Erklaerspalte entfaellt,
     die zwei Kachelspalten bleiben, und das Fenster nimmt fast den ganzen
     Schirm. */
  .wzrahmen{grid-template-columns:minmax(0,1fr)}
  .wzseite{display:none}
  .wzdialog{width:calc(100vw - 20px);max-height:calc(100vh - 24px);border-radius:12px}
  /* Am Telefon passen Name, Beschreibung und Knopf nicht in eine Zeile: Der
     Kopf wird dreizeilig und quetscht den Namen. Also Zeile 1 = Name und
     „schliessen", Zeile 2 = die Beschreibung darunter. */
  .wzdialog .hd{flex-wrap:wrap;row-gap:3px}
  .wzdialog .hd h3{flex:1 1 auto;min-width:0}
  .wzdialog .hd .sp{order:3;flex:1 1 100%}
  .wzdialog .hd{border-radius:12px 12px 0 0;padding:11px 13px}
  .wzdialog .bd{padding:12px 13px 14px}
}
/* 440 und nicht 380: Bei 390px (das verbreitetste Telefon) sind die Spalten
   so schmal, dass „Verbindungsprüfung" mitten im Wort umbrach — gemessen,
   fünf von dreizehn Namen. Mit der kleineren Schrift und der schmaleren
   Ecke bleibt von denen keiner uebrig. Die Ecke rueckt dafuer eng an den
   Rand; der Stern bleibt mit 19px trotzdem gut zu treffen. */
@media (max-width:440px){
  .wzkachel{padding:11px 9px;min-height:54px}
  .wzname{font-size:12.4px;padding-right:30px}
  .wzecke{top:6px;right:5px;gap:3px}
  /* Mit Pfeil (Sprung auf eine eigene Seite) braucht die Ecke mehr Platz. */
  .wzsprung .wzname{padding-right:44px}
}