:root{--bg:#0f1720;--bg2:#0b1219;--card:#17212b;--card2:#12202b;--line:#243444;--fg:#e6edf3;--mut:#8ba1b4;--acc:#f5b301;--hover:#1c2733;--hover2:#16222e;--btngrey:#30363d}
:root[data-theme="light"]{--bg:#eef1f5;--bg2:#ffffff;--card:#ffffff;--card2:#f3f7fb;--line:#d5dde6;--fg:#1a2632;--mut:#5c6b7a;--acc:#a06f00;--hover:#eaf0f6;--hover2:#e3ebf3;--btngrey:#e2e8f0}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 system-ui,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--fg)}
a{color:inherit;text-decoration:none}
header{position:sticky;top:0;z-index:5;background:var(--card);border-bottom:1px solid var(--line);padding:11px 20px;display:flex;align-items:center;gap:18px}
header .logo{font-weight:700;font-size:18px;display:flex;align-items:center;gap:9px;flex:none}
header .logo b{color:var(--acc)}
header .logo-img{width:30px;height:30px;border-radius:7px;flex:none}
.search{flex:1;display:flex;justify-content:center;min-width:0}
header .search input{width:100%;max-width:540px;padding:9px 14px 9px 40px;border-radius:22px;border:1px solid var(--line);background:var(--bg2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238ba1b4' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-3.5-3.5'/%3E%3C/svg%3E") 13px center/17px no-repeat;color:var(--fg);font-size:14px}
header .search input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(245,179,1,.16)}
/* „Neue Nachricht" einmal ganz oben in der Seitenleiste (wie in Outlook), nicht mehr je Postfach. */
.newmsg{display:flex;align-items:center;justify-content:center;gap:8px;margin:2px 10px 10px;padding:10px 14px;background:var(--acc);color:#101010;font-weight:700;font-size:14px;border-radius:9px;text-decoration:none;white-space:nowrap;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.28)}
.newmsg:hover{filter:brightness(1.08)}
.headright{display:flex;align-items:center;gap:14px;flex:none}
.navtoggle{display:none;background:none;border:0;color:inherit;font-size:22px;line-height:1;cursor:pointer;padding:2px 6px;flex:none}
.nav-backdrop{display:none}
/* iPhone-Kerbe/Statusleiste: Header bekommt oben das Geraete-Polster (0 im normalen Browser). */
header{padding-top:calc(11px + env(safe-area-inset-top,0px))}
/* Mobile Bottom-Bar (App-Gefuehl): am Desktop aus, <=970px als feste Leiste unten. */
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--card);border-top:1px solid var(--line);padding:5px 8px calc(5px + env(safe-area-inset-bottom,0px));box-shadow:0 -8px 24px rgba(0,0,0,.35)}
.mbar-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;color:var(--mut);font:inherit;cursor:pointer;text-decoration:none;padding:5px 0 3px;border-radius:10px}
.mbar-btn:active{background:var(--hover2);color:var(--acc)}
.mbar-ic{font-size:20px;line-height:1.1}
.mbar-tx{font-size:10px;font-weight:700;letter-spacing:.02em}
header a.out{color:var(--mut);font-size:13px;white-space:nowrap}
header a.out:hover{color:var(--fg)}
main{max-width:900px;margin:0 auto;padding:16px}
.crumb{color:var(--mut);font-size:13px;margin-bottom:14px}
.crumb a:hover{color:var(--acc)}
.vnav{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.vnav a{font-size:13px;padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:var(--bg2);color:var(--fg);text-decoration:none}
.vnav a:hover{border-color:var(--acc);color:var(--acc)}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:13px 16px;margin-bottom:10px}
.card:hover{border-color:var(--acc)}
.row{display:flex;align-items:center;gap:12px}
.grow{flex:1;min-width:0}
.badge{background:var(--line);color:var(--fg);border-radius:20px;padding:2px 10px;font-size:12px;text-align:center}
.badge.unread{background:var(--acc);color:#000;font-weight:700}
.mut{color:var(--mut);font-size:13px}
.subj{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unreadrow .subj{color:var(--fg)} .unreadrow{border-left:3px solid var(--acc)}
.from{font-size:13px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.maildate{white-space:nowrap;color:var(--mut);font-size:12px}
h1{font-size:20px;margin:0 0 14px} h2{font-size:15px;margin:0}
.mailhead{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:12px}
.mailhead .subj{white-space:normal;font-size:18px;margin-bottom:8px}
pre.body{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:16px;margin:0;font:14px/1.6 ui-monospace,Menlo,Consolas,monospace}
form.login{max-width:320px;margin:12vh auto;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:26px}
form.login .logo{font-size:22px;font-weight:700;text-align:center;margin-bottom:18px}
input{width:100%;padding:11px;margin:6px 0 14px;border-radius:8px;border:1px solid var(--line);background:var(--bg2);color:var(--fg);font-size:15px}
/* Checkboxen/Radios NICHT auf 100% Breite (sonst zerdrueckt es die Listenzeilen). */
input[type=checkbox],input[type=radio]{width:auto;margin:0;padding:0;accent-color:var(--acc)}
button{width:100%;padding:11px;border:0;border-radius:8px;background:var(--acc);color:#000;font-weight:700;font-size:15px;cursor:pointer}
.err{color:#ff7676;font-size:13px;margin-bottom:8px}
.empty{color:var(--mut);text-align:center;padding:40px 0}
.ki{background:var(--card2);border:1px solid var(--acc);border-radius:10px;padding:14px 16px;margin-bottom:12px}
.ki h3{margin:0 0 8px;font-size:12px;color:var(--acc);text-transform:uppercase;letter-spacing:.05em}
.ki .lbl{color:var(--mut);font-size:12px;margin-top:8px}
.tag{display:inline-block;background:var(--line);color:var(--fg);border-radius:6px;padding:2px 9px;font-size:12px;margin-right:6px}
.btn-s{display:inline-block;width:auto;padding:9px 16px;border:0;border-radius:8px;background:var(--acc);color:#000;font-weight:700;font-size:14px;cursor:pointer}
.btn-ok{background:#3fb950;color:#001b06}
.btn-grey{background:var(--btngrey);color:var(--fg)}
form.inline{display:inline;margin:0}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0}
.actions select{padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--bg2);color:var(--fg);font-size:14px}
a.btn-s{text-decoration:none}
.compose label{display:block;color:var(--mut);font-size:13px;margin:10px 0 2px}
.compose textarea{width:100%;padding:11px;border-radius:8px;border:1px solid var(--line);background:var(--bg2);color:var(--fg);font:14px/1.55 ui-monospace,Menlo,Consolas,monospace;resize:vertical}
.notes{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-top:12px}
.notes h3{margin:0 0 8px;font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em}
.note{border-left:3px solid var(--acc);padding:2px 0 2px 10px;margin:8px 0}
.notes textarea{width:100%;padding:9px;border-radius:8px;border:1px solid var(--line);background:var(--bg2);color:var(--fg);font:14px/1.5 system-ui,sans-serif;resize:vertical}
/* ---- Baustellen-/Auftragsakten ---- */
.pj-list{display:flex;flex-direction:column;gap:8px}
.pj-card{display:block;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--card);color:var(--fg)}
.pj-card:hover{border-color:var(--acc)}
.pj-card-top{display:flex;align-items:center;gap:10px;justify-content:space-between}
.pj-name{font-weight:700}
.pj-meta{font-size:13px;color:var(--fg);margin-top:3px}
.pj-meta.mut{color:var(--mut)}
.pj-amp{font-size:12px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap}
.pj-us{background:rgba(255,90,90,.16);color:#ff6b6b}
.pj-cust{background:rgba(212,160,23,.16);color:var(--acc)}
.pj-done,.pj-none{background:var(--line);color:var(--mut)}
.pj-phase{font-size:12px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap;background:var(--hover2);color:var(--acc);border:1px solid var(--acc)}
.pj-prio{font-size:12px;font-weight:800;padding:3px 9px;border-radius:20px;white-space:nowrap;background:rgba(255,90,90,.16);color:#ff6b6b}
.pj-mat{font-size:12px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap;background:var(--line);color:var(--mut)}
.pj-next{margin-top:8px;background:var(--hover2);border-left:3px solid var(--acc);border-radius:8px;padding:8px 12px;color:var(--fg)}
.pj-mails{display:flex;flex-direction:column;gap:6px}
.pj-mail{display:block;border:1px solid var(--line);border-radius:8px;padding:8px 10px;color:var(--fg)}
.pj-mail:hover{border-color:var(--acc)}
.pj-mail-top{display:flex;gap:8px;justify-content:space-between;align-items:baseline}
.pj-mail-subj{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---- Projekt-Dateien + Subunternehmen ---- */
.pj-notice{margin:10px 0;background:rgba(255,90,90,.14);border:1px solid rgba(255,90,90,.4);color:#ff8080;border-radius:8px;padding:9px 13px;font-weight:600}
.pj-upload{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px;padding:10px;border:1px dashed var(--line);border-radius:9px;background:var(--bg2)}
.pj-upload input[type=file]{flex:1;min-width:150px;font-size:12px;color:var(--mut)}
.pj-files{display:flex;flex-direction:column;gap:6px}
.pj-file{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:7px 10px;background:var(--card)}
.pj-file-lnk{flex:1;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj-file-lnk:hover{color:var(--acc)}
.pj-file-meta{color:var(--mut);font-size:12px;white-space:nowrap}
.pj-file-del{background:none;border:0;color:var(--mut);cursor:pointer;font-size:14px;padding:2px 4px;border-radius:6px}
.pj-file-del:hover{color:#ff6b6b;background:var(--hover2)}
.pj-sub{margin-top:6px}
.pj-subadd{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-left:auto}
.sub-list{display:flex;flex-direction:column;gap:12px}
.sub-card{border:1px solid var(--line);border-radius:11px;padding:12px 14px;background:var(--card)}
.sub-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.sub-badge{font-size:11px;font-weight:800;padding:2px 8px;border-radius:20px;background:var(--line);color:var(--mut);text-transform:capitalize}
.sub-badge.sub-erhalten{background:rgba(88,166,255,.18);color:#79b8ff}
.sub-badge.sub-geprüft{background:rgba(210,168,255,.18);color:#c9a6ff}
.sub-badge.sub-bezahlt{background:rgba(63,185,80,.2);color:#56d364}
.sub-badge.sub-datev{background:rgba(240,180,60,.2);color:#e3b341}
.sub-warn{margin:8px 0;background:rgba(240,180,60,.13);border-left:3px solid #e3b341;border-radius:8px;padding:7px 11px;color:#e3b341;font-size:13px;font-weight:600}
.sub-sum{font-size:13px;margin:6px 0}
.sub-files{display:flex;gap:14px;flex-wrap:wrap;margin:8px 0}
.sub-fcol{flex:1;min-width:200px;display:flex;flex-direction:column;gap:6px}
.sub-fh{font-size:12px;font-weight:700;color:var(--mut)}
.sub-up{padding:7px;margin:2px 0 0}
.sub-up input[type=file]{font-size:11px}
.sub-edit{margin-top:8px;border-top:1px solid var(--line);padding-top:10px}
.sub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 12px}
.sub-grid label,.sub-edit>label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--mut);font-weight:600}
.sub-edit>label{margin-top:8px}
.sub-grid input,.sub-edit input,.sub-grid select{font:14px/1.4 system-ui,sans-serif}
.sub-check{flex-direction:row!important;align-items:center;gap:6px;font-size:13px;color:var(--fg)}
.sub-check input{width:auto}
/* ---- Arbeitsflaeche (4 Spalten, volle Breite, Outlook-Stil) ---- */
.app{display:grid;grid-template-columns:var(--w-nav,230px) 6px var(--w-list,340px) 6px minmax(0,1fr) 6px var(--w-opts,330px);height:calc(100vh - 53px)}
.pane{overflow-y:auto;border-right:1px solid var(--line);padding:12px 12px 40px}
.pane.opts{border-right:0}
.pane h3{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin:16px 4px 6px}
.pane h3:first-child{margin-top:2px}
.navitem{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:7px;color:var(--fg);font-size:14px}
.navitem:hover{background:var(--hover)}
.navitem.active{background:var(--acc);color:#000;font-weight:700}
/* aktives Postfach: dezent (dunkel + Goldrand), NICHT Vollgold -> verschmilzt nicht mit dem gold markierten Eingang darunter */
.navmb{min-width:0}
.navmb.sel{background:var(--hover2);color:var(--acc);font-weight:700;border-left:3px solid var(--acc);padding-left:6px;margin-bottom:5px}
.navmb.sel:hover{background:var(--hover2)}
.navitem .n{margin-left:auto;color:var(--mut);font-size:12px}
.navitem.active .n{color:#000}
/* Nav-Zeile: Icon fix + Text mit Ellipsis (kein Umbruch bei langen Ordnern wie "Dienstleistungen/Ankauf") */
.navico{flex:none;width:20px;text-align:center;filter:grayscale(1);opacity:.78}
/* Ruhige, einfarbige Icons; nur die aktive Zeile (und beim Draufzeigen) zeigt Farbe. */
.navitem.active .navico,.navitem:hover .navico,.navmb.sel .navico{filter:none;opacity:1}
.navdiv{flex:none;height:1px;background:var(--line);margin:7px 12px}
/* Gruppen-Überschrift (z. B. Buchhaltung): kein Link, keine Mails, nur Klammer für die Unterpunkte. */
.navgrp{cursor:default;color:var(--mut);font-weight:700}
.navgrp:hover{background:none;color:var(--mut)}
.navsub2{margin-left:26px;font-size:13px}
html.navcol .pane.nav .navsub2{margin-left:0;justify-content:center}
html.navcol .pane.nav .navdiv{margin:7px 6px}
.navtext{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navsub{margin-left:12px;font-size:13px}
.navcollapse{display:block;width:100%;background:none;border:0;color:var(--mut);cursor:pointer;font:16px/1 system-ui,sans-serif;padding:0 9px 8px;text-align:right}
.navcollapse::before{content:'«'}
.navcollapse:hover{color:var(--acc)}
/* Spalten-Griffe (zwischen den Panes) */
.rzh{cursor:col-resize;background:transparent;transition:background .12s}
.rzh:hover,.rzh.rz-drag{background:var(--acc)}
/* Nav eingeklappt: nur Icons. Zustand via localStorage/theme.js -> flimmerfrei. */
html.navcol .app{grid-template-columns:56px 6px var(--w-list,340px) 6px minmax(0,1fr) 6px var(--w-opts,330px)}
html.navcol .pane.nav{padding-left:4px;padding-right:4px}
html.navcol .pane.nav .navtext,html.navcol .pane.nav .n,html.navcol .navcompany{display:none}
html.navcol .pane.nav .navitem{justify-content:center}
html.navcol .pane.nav .navsub{margin-left:0}
html.navcol .pane.nav .newmsg{margin:2px 2px 10px;padding:10px 0}
html.navcol .navcollapse{text-align:center}
html.navcol .navcollapse::before{content:'»'}
html.navcol .rzh[data-rz=nav]{pointer-events:none}
.navcompany{font-weight:700;font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;margin:14px 9px 4px}
.li{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border-bottom:1px solid var(--line)}
.li-ava{flex:none;width:22px;height:22px;border-radius:50%;background:var(--acc);color:#000;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;margin-left:6px}
.li:hover{background:var(--hover)}
.li.active{background:var(--hover2);border-left:3px solid var(--acc);padding-left:7px}
.li.unreadli{border-left:3px solid var(--acc);padding-left:7px;background:rgba(212,160,23,.09)}
.li.unreadli .li-subj{color:var(--fg);font-weight:800}
.li.unreadli .li-from,.li.unreadli .li-fromname{color:var(--fg)}
.li:not(.unreadli) .li-subj{font-weight:500;color:var(--mut)}
.unread-dot{color:var(--acc);font-size:11px;margin-right:6px;vertical-align:middle}
.li .cb{margin-top:3px;flex:none;accent-color:var(--acc)}
.li-body{flex:1;min-width:0;color:var(--fg)}
.li-top{display:flex;gap:8px;align-items:baseline}
.li-subj{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li-date{color:var(--mut);font-size:11px;white-space:nowrap}
.li-from{color:var(--mut);font-size:12px;margin-top:2px;display:flex;align-items:center;min-width:0}
.li-fromname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.li-meta{font-size:11px;color:var(--mut);margin-top:4px;display:flex;gap:10px;flex-wrap:wrap}
.li-bearb{color:var(--acc)}
.att{display:inline-flex;align-items:center;gap:6px;background:var(--bg2);border:1px solid var(--line);border-radius:7px;padding:6px 10px;margin:6px 6px 0 0;font-size:13px}
.placeholder{color:var(--mut);text-align:center;padding:64px 20px}
.backbtn{display:none}
/* ---- KI-Berater (globaler Chat) ---- */
header .berater-link{color:var(--acc);font-weight:700;font-size:13px;white-space:nowrap;border:1px solid var(--acc);border-radius:7px;padding:6px 11px;background:none;cursor:pointer;font-family:inherit;line-height:1.4}
header .berater-link:hover{background:var(--acc);color:#000}
.berater{display:flex;flex-direction:column;gap:10px}
.ab-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
/* Melli Themen-Umschalter (Multi-Chat) */
.conv-switch{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dock-head .conv-switch{flex:1;min-width:0;justify-content:flex-end}
.conv-switch select{max-width:150px;background:var(--bg2);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:3px 6px;font-size:12px;font-family:inherit}
.conv-switch .lnk{white-space:nowrap;font-size:12px}
.dock-head .dock-close{margin-left:0}
.ab-head h3{margin:0;font-size:12px;color:var(--acc);text-transform:uppercase;letter-spacing:.05em}
.ab-log{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.ab{padding:9px 12px;border-radius:12px;font-size:13px;line-height:1.55;max-width:94%;overflow-wrap:anywhere}
.ab-u{align-self:flex-end;background:var(--acc);color:#000;border-bottom-right-radius:3px}
.ab-a{align-self:flex-start;background:var(--card2);border:1px solid var(--line);border-bottom-left-radius:3px}
.cite{color:var(--acc);font-weight:700;border-bottom:1px dotted var(--acc);white-space:nowrap}
.ab-u .cite{color:#000;border-color:#000}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{width:auto;padding:6px 11px;border-radius:20px;background:var(--line);color:var(--fg);font-size:12px;border:1px solid var(--line);cursor:pointer;font-weight:400}
.chip:hover{border-color:var(--acc)}
.ab-form textarea{width:100%;padding:10px;border-radius:8px;border:1px solid var(--line);background:var(--bg2);color:var(--fg);font:14px/1.5 system-ui,sans-serif;resize:vertical}
.lnk{width:auto;background:none;color:var(--mut);font-size:12px;padding:0}
.lnk:hover{color:var(--acc)}
.berater-full{max-width:760px;margin:0 auto}
/* mittlere Breite: alle vier Spalten schmaler (Optionen bleiben erreichbar!) */
@media(max-width:1150px){.app{grid-template-columns:var(--w-nav,190px) 6px var(--w-list,270px) 6px minmax(0,1fr) 6px var(--w-opts,280px)}}
/* Schmal/Handy: eine Ebene zur Zeit. Ohne offene Mail = Liste, mit Mail = Mail+Optionen.
   Die Navigation wird zur einschiebbaren Schublade (Hamburger ☰). */
@media(max-width:970px){
  .app{display:block;height:auto}
  .rzh{display:none}
  .navtoggle{display:inline-flex}
  .pane{border-right:0;border-bottom:1px solid var(--line)}
  /* Nav = Schublade von links */
  .pane.nav{position:fixed;top:0;left:0;bottom:0;width:min(85vw,300px);z-index:60;overflow-y:auto;
    background:var(--card);border-right:1px solid var(--line);box-shadow:6px 0 30px rgba(0,0,0,.45);
    transform:translateX(-100%);transition:transform .2s ease;padding-top:14px}
  body.nav-open .pane.nav{transform:none}
  .nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55}
  body.nav-open .nav-backdrop{display:block}
  /* Hauptbereich: Liste ODER Mail+Optionen */
  body.hasmail .pane.list{display:none}
  body:not(.hasmail) .pane.mail,body:not(.hasmail) .pane.opts{display:none}
  body.hasmail .pane.opts{display:block}
  .backbtn{display:inline-block;margin-bottom:10px}
  /* größere Tap-Ziele */
  .navitem,.navsub{padding-top:11px;padding-bottom:11px}
  .li{padding-top:12px;padding-bottom:12px}
  .filterbar,.bulkbar{gap:8px}
  /* Bottom-Bar aktiv + Platz dafür am Seitenende; Nav-Schublade respektiert Kerbe + Bar. */
  .mbar{display:flex}
  .scanbtn{display:inline-flex}
  .scantip.show{display:block}
  body.withbar{padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))}
  .pane.nav{padding-top:calc(14px + env(safe-area-inset-top,0px));padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
  .dock{padding-bottom:env(safe-area-inset-bottom,0px)}
}
/* Handy: Kopfzeile kompakt + 16px-Felder (verhindert iOS-Auto-Zoom beim Antippen). */
@media(max-width:640px){
  header{flex-wrap:wrap;height:auto;row-gap:8px;padding:9px 12px;gap:10px}
  header .search{order:3;flex:1 1 100%}
  .headright{gap:10px}
  header .sett .navtext{display:none}
  input,textarea,select{font-size:16px}
}
/* ---- Mailliste: Postfach-Label, Frist, Risiko ---- */
.li-box{flex:none;display:inline-block;margin-left:8px;font-size:10px;color:var(--mut);background:var(--bg2);border:1px solid var(--line);border-radius:5px;padding:0 5px;white-space:nowrap}
.li-due{color:#d29922;font-size:11px;white-space:nowrap}
.risk{font-size:12px}
.risk-h{color:#ff6a6a}
.risk-m{color:#e3a008}
.riskbanner{border-radius:8px;padding:9px 12px;margin:8px 0;font-size:13px;line-height:1.45}
.riskbanner.risk-hi{background:#2a1113;border:1px solid #ff6a6a;color:#ffb3b3}
.riskbanner.risk-md{background:#241d0b;border:1px solid #e3a008;color:#f0cd78}
/* ---- Sammelaktionen ---- */
.listform{display:flex;flex-direction:column}
.listhead{font-weight:700;font-size:13px;padding:2px 4px 8px;color:var(--fg)}
.bulkbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 4px 10px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:1}
.sortbar{display:flex;align-items:center;gap:8px;justify-content:flex-end;padding:2px 4px 6px}
.sortlbl{font-size:12px;color:var(--mut);white-space:nowrap}
.bulkbar .selall{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--mut)}
.bulkbar .selall input{accent-color:var(--acc)}
.btn-xs{width:auto;padding:5px 9px;border:1px solid var(--line);border-radius:7px;background:var(--line);color:var(--fg);font-size:12px;font-weight:600;cursor:pointer}
.btn-xs:hover{border-color:var(--acc)}
.bulk-sel{padding:5px 7px;border-radius:7px;border:1px solid var(--line);background:var(--bg2);color:var(--fg);font-size:12px;max-width:150px}
/* ---- Wiedervorlage ---- */
.wv{margin:10px 0;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:10px}
.wv-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.datefield{width:auto;padding:7px 9px;border-radius:8px;border:1px solid var(--line);background:var(--bg2);color:var(--fg);font-size:13px;color-scheme:dark}
/* ---- Options-Spalte: aufgeräumt (Labels + einklappbare Abschnitte) ---- */
.opt-grid{margin:8px 0;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:10px}
.opt-lbl{display:block;font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;margin:8px 0 3px}
.opt-lbl:first-child{margin-top:0}
.opt-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.opt-secondary{opacity:.8}
/* Aufgeraeumte Optionsspalte: 3 grosse Hauptaktionen + kompakte „Mehr"-Zeile */
.opt-actions{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.opt-actions form{margin:0}
.btn-lg{display:block;width:100%;box-sizing:border-box;text-align:center;padding:11px 14px;border-radius:10px;font-weight:600;font-size:14px;border:1px solid var(--line);background:var(--bg2);color:var(--fg);cursor:pointer;text-decoration:none;font-family:inherit}
.btn-lg:hover{filter:brightness(1.08)}
.btn-lg.btn-reply{background:var(--acc);border-color:var(--acc);color:#1a1200}
.btn-lg.btn-move{background:transparent;border-color:var(--acc);color:var(--acc)}
.btn-lg.btn-move:hover{background:var(--acc);color:#1a1200;filter:none}
.btn-lg.btn-done{background:#2ea043;border-color:#2ea043;color:#fff}
.btn-lg.btn-grey2{background:var(--bg2);border-color:var(--line);color:var(--fg)}
.opt-mini{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.opt-mini form{display:inline;margin:0}
.opt-mini .btn-xs{background:var(--bg2);border:1px solid var(--line);color:var(--mut);text-decoration:none}
.opt-mini .btn-xs:hover{color:var(--fg);border-color:var(--acc)}
.opt-mini .btn-danger-o{color:#ff8a8a;border-color:transparent}
.opt-mini .btn-danger-o:hover{border-color:#ff8a8a;color:#ff8a8a}
.noteta{width:100%;box-sizing:border-box;min-height:88px;background:var(--bg2);color:var(--fg);border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-family:inherit;font-size:13.5px;line-height:1.5;resize:vertical}
.noteta:focus{outline:none;border-color:var(--acc)}
/* Zahllauf: „zu bezahlen"-Markierung + Betrag */
.paybox{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:2px 0 6px}
.paybox form{margin:0}
.btn-pay{background:#e6a700;border-color:#e6a700;color:#1a1200}
.paybox .pay-amt{display:flex;align-items:center;gap:4px}
.paybox .euro{color:var(--mut)}
.betragin{width:96px;background:var(--bg2);color:var(--fg);border:1px solid var(--line);border-radius:7px;padding:6px 8px;font-family:inherit}
.betragin:focus{outline:none;border-color:var(--acc)}
.li-pay{color:#e6a700;font-weight:600}
/* Notiz-Zeichen bleibt dauerhaft sichtbar, gelb solange sie noch keiner gelesen hat. */
.li-note{color:var(--mut);font-weight:600}
.li-note.neu{color:var(--acc)}
.li-queued{color:#e3a008;font-weight:600;font-size:12px}
.li-fail{color:#ff6b6b;font-weight:700;font-size:12px}
/* API-Doku: Endpunkt-Tabelle */
.apitbl{width:100%;border-collapse:collapse;margin:8px 0;font-size:13px}
.apitbl th{text-align:left;padding:7px 9px;border-bottom:1px solid var(--line);color:var(--mut);font-size:12px}
.apitbl td{padding:7px 9px;border-bottom:1px solid var(--line);vertical-align:top}
.apim{font-weight:800;font-size:11px;white-space:nowrap}
.apim-get{color:#56d364}
.apim-post{color:#e3a008}
.apip{font-family:ui-monospace,monospace;white-space:nowrap}
.addr-lnk{color:var(--acc);text-decoration:none}
.addr-lnk:hover{text-decoration:underline}
/* Verfassen: Anhänge + Wichtigkeit als saubere Leiste */
.cmp-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg2)}
.filebtn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 14px;font-weight:600;font-size:13px;color:var(--fg);white-space:nowrap}
.filebtn:hover{border-color:var(--acc);color:var(--acc)}
.filebtn input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.scanbtn{display:none} /* Kamera-Scan nur am Handy/Tablet (Desktop hat keine sinnvolle Kamera-Geste) */
/* Das Datei-Feld dahinter bleibt im Formular (traegt das fertige PDF), ist aber unsichtbar. */
.scanfb{display:none!important}
.scantip{display:none;font-size:12px;color:var(--mut);margin-top:8px;line-height:1.5}
/* Dokumentenscanner: Kamera live, erkannter Blattrand als Rahmen, Seite fuer Seite. */
.scanov{position:fixed;inset:0;z-index:2000;background:#000;display:flex;flex-direction:column}
.scanwrap{position:relative;flex:1;min-height:0}
.scanov video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.scanovl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.scanhint{position:absolute;left:0;right:0;top:12px;text-align:center;color:#fff;font-size:13px;font-weight:600;text-shadow:0 1px 4px #000;pointer-events:none}
.scanstrip{display:flex;gap:6px;padding:6px 8px;overflow-x:auto;background:#111;min-height:8px}
.scanstrip img{height:56px;border-radius:5px;border:1px solid #555;flex:none}
.scanbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:#111}
.scanshot{width:66px;height:66px;flex:none;border-radius:50%;border:4px solid #fff;background:var(--acc);cursor:pointer;padding:0}
.scanshot:active{transform:scale(.94)}
.scanbtn2{width:auto;background:none;border:1px solid #666;color:#fff;border-radius:8px;padding:9px 15px;font-size:14px;cursor:pointer}
.scanbtn2:disabled{opacity:.45;cursor:default}
/* Bereits hochgeladene Anhänge (überleben einen Formular-Neuaufbau) */
.pendatt{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.pendchip{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--acc);border-radius:20px;padding:4px 6px 4px 11px;font-size:12px;color:var(--fg)}
.pendx{background:none;border:0;color:var(--mut);cursor:pointer;font-size:15px;line-height:1;padding:0 4px;border-radius:50%}
.pendx:hover{color:#ff6b6b}
/* Regel-Automatik in der Verwaltung */
.rulecard{border:1px solid var(--line);border-radius:10px;padding:10px 13px;margin-bottom:8px;background:var(--card)}
.rulecard.off{opacity:.6}
.rule-h{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:5px}
.rule-b{font-size:13px;margin:3px 0;line-height:1.5}
.rule-when,.rule-then{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.06em;padding:2px 7px;border-radius:5px;margin-right:7px}
.rule-when{background:rgba(88,166,255,.18);color:#79b8ff}
.rule-then{background:rgba(63,185,80,.18);color:#56d364}
.rulenew .rule-row{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:8px 0}
.filelist{flex:1;min-width:120px;font-size:12px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.filelist.mut{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filelist:not(.mut){color:var(--fg)}
/* Jeder gewählte Anhang als eigener Chip mit × zum Entfernen. */
.fchip{display:inline-flex;align-items:center;gap:5px;background:var(--card2);border:1px solid var(--line);border-radius:16px;padding:3px 5px 3px 10px;font-size:12px;max-width:100%}
.fchip>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}
.fchip-x{width:19px;height:19px;flex:none;border-radius:50%;border:0;background:var(--hover2);color:var(--mut);font-size:14px;line-height:1;cursor:pointer;padding:0}
.fchip-x:hover{background:#3a1418;color:#f4707a}
.prio-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;margin-left:auto;user-select:none}
.prio-toggle input{width:16px;height:16px;accent-color:#ff6b6b;cursor:pointer}
.prio-toggle .prio-face{font-size:13px;font-weight:600;color:var(--mut)}
.prio-toggle input:checked ~ .prio-face{color:#ff6b6b}
/* Verlauf (Thread) im Vorgang */
.verlauf .vmsg{border:1px solid var(--line);border-radius:8px;margin:6px 0;background:var(--bg2)}
.verlauf .vmsg>summary{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:7px 10px;cursor:pointer;font-size:13px;list-style:none}
.verlauf .vmsg>summary::-webkit-details-marker{display:none}
.verlauf .vmsg-from{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.verlauf .vmsg-date{color:var(--mut);font-size:12px;white-space:nowrap}
.verlauf .vmsg-body{padding:0 10px 10px}
details.sect{margin:8px 0;border:1px solid var(--line);border-radius:10px;background:var(--card)}
details.sect>summary{cursor:pointer;padding:10px 12px;font-weight:700;font-size:13px;color:var(--fg);list-style:none}
details.sect>summary::-webkit-details-marker{display:none}
details.sect>summary::before{content:"▸";color:var(--mut);margin-right:7px;display:inline-block}
details.sect[open]>summary::before{content:"▾"}
.sect-body{padding:0 12px 12px}
/* ---- Overlay-Fenster (Benachrichtigungen/Entwürfe/Kalender/… ohne Seitenwechsel) ---- */
/* Fenster wie in Outlook: frei verschiebbar, ohne Abdunklung, Hintergrund bleibt bedienbar. */
.mh-win{position:fixed;inset:0;z-index:1000;pointer-events:none}
.mh-win-box{position:absolute;display:flex;flex-direction:column;pointer-events:auto;width:min(920px,96vw);height:min(82vh,900px);min-width:340px;min-height:240px;background:var(--bg);border:1px solid var(--line);border-radius:14px;overflow:hidden;resize:both;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.mh-win-box.front{border-color:var(--acc)}
.mh-win-hd{flex:none;display:flex;align-items:center;gap:8px;padding:7px 8px 7px 13px;background:var(--card);border-bottom:1px solid var(--line);cursor:move;user-select:none}
.mh-win-t{flex:1;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh-win-box iframe{flex:1;width:100%;border:0;background:var(--bg)}
.mh-win-box.dragging iframe{pointer-events:none}
.mh-win-x{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--fg);font-size:19px;line-height:1;cursor:pointer;padding:0}
.mh-win-x:hover{border-color:var(--acc);color:var(--acc)}
@media(max-width:820px){.mh-win-box{left:0!important;top:0!important;width:100vw;height:100dvh;border-radius:0;resize:none}}
/* Verschieben/Zuweisen-Popup */
.mvpop{position:fixed;inset:0;z-index:1100;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.5);padding:20px}
.mvpop.open{display:flex}
.mvpop-box{position:relative;width:min(430px,94vw);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 22px 18px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.mvpop-h{font-size:16px;font-weight:700;margin-bottom:6px}
.mvpop-x{position:absolute;top:8px;right:10px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--bg2);color:var(--fg);font-size:19px;line-height:1;cursor:pointer}
.mvpop-x:hover{border-color:var(--acc);color:var(--acc)}
.mvpop .mvlbl{display:block;font-size:12px;color:var(--mut);margin:12px 0 3px}
.mvpop .mvsel{width:100%}
.mvpop-actions{display:flex;gap:8px;margin-top:18px}
/* Signatur-Verwaltung (Admin) */
.sigvars{font-size:12px;color:var(--mut);margin:4px 0 14px;line-height:1.9}
.sigvars code{background:var(--bg2);border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--acc)}
.sigcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:12px 0}
.sigcard-h{font-size:16px;font-weight:700;margin-bottom:10px}
.sigform{margin:0}
.sigrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.siglbl{font-size:13px;font-weight:600;color:var(--mut)}
.sigta{width:100%;box-sizing:border-box;background:var(--bg2);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font:13px/1.55 ui-monospace,Menlo,Consolas,monospace;resize:vertical}
.sigta:focus{outline:none;border-color:var(--acc)}
/* ---- Ordner-Verwaltung: eine Zeile je Ordner (umbenennen · zuständig · aus-/einblenden) ---- */
.foldrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
.foldrow:last-child{border-bottom:0}
.foldrow .fr-name{display:flex;gap:5px;align-items:center;flex:1;min-width:210px;margin:0}
.foldrow .fr-name input{flex:1;min-width:110px;margin:0}
.foldrow .fr-resp{display:flex;gap:5px;align-items:center;margin:0}
.foldrow-owner{background:var(--bg2);border-radius:8px;padding:8px;margin-bottom:6px;border-bottom:0}
.fr-lbl{flex:1;min-width:170px;font-weight:600;font-size:13px}
.hidwrap{margin:6px 0}
.hidwrap>summary{cursor:pointer;color:var(--mut);font-size:12px;padding:6px 2px}
.notify-ask{position:fixed;bottom:16px;right:16px;z-index:900;background:var(--card);border:1px solid var(--acc);border-radius:10px;padding:10px 12px;font-size:13px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;max-width:320px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
/* ---- KI-Assistent: andockbares Chat-Fenster (überall, kein Seitenwechsel) ---- */
.dock{position:fixed;top:0;right:0;height:100vh;width:380px;max-width:92vw;background:var(--card);border-left:1px solid var(--line);box-shadow:-10px 0 34px rgba(0,0,0,.4);z-index:800;display:flex;flex-direction:column;transform:translateX(105%);transition:transform .18s ease}
body.dock-open .dock{transform:none}
.dock-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.dock-head h3{margin:0;font-size:14px;flex:1}
.dock-close{background:none;border:0;color:var(--mut);font-size:22px;line-height:1;cursor:pointer;width:auto;padding:0 4px}
.dock-close:hover{color:var(--fg)}
.dock-ctx{font-size:12px;color:var(--acc);padding:7px 14px;border-bottom:1px solid var(--line);background:var(--bg2)}
.dock-body{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.dock-foot{border-top:1px solid var(--line);padding:10px 14px}
.dock .ab-form textarea{width:100%}
/* ---- Verfassen ---- */
.compose-wrap{max-width:760px;margin:0 auto}
.compose.card{padding:18px 20px}
.compose label{display:block;color:var(--mut);font-size:13px;margin:12px 0 3px}
.compose input,.compose textarea{width:100%}
/* ---- Lade-Overlay (Progressive Enhancement) ---- */
.mh-overlay{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(9,15,20,.72);backdrop-filter:blur(2px)}
.mh-msg{color:var(--fg);font-weight:600}
.mh-spin{width:42px;height:42px;border-radius:50%;border:4px solid #2a3a4a;border-top-color:var(--acc);animation:mhspin .8s linear infinite}
@keyframes mhspin{to{transform:rotate(360deg)}}
/* ---- Header mit Waben-Banner (hive) + Lichtschimmer beim Seitenaufbau ---- */
header{position:sticky;overflow:hidden;background:linear-gradient(90deg,rgba(11,21,36,.6),rgba(11,21,36,.32) 34%,rgba(11,21,36,.32) 60%,rgba(11,21,36,.88)),url("/static/header.png") center/cover no-repeat #0b1524}
header .logo,header .search,header .headright{position:relative;z-index:1}
.coswitch{padding:7px 12px;border-radius:20px;border:1px solid var(--acc);background:var(--bg2);color:var(--acc);font-size:13px;font-weight:700;cursor:pointer;max-width:190px}
.coswitch:hover{background:var(--hover2)}
header::before{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;background:linear-gradient(100deg,transparent 0%,rgba(245,179,1,.16) 50%,transparent 100%);transform:translateX(-140%);animation:hiveSweep 1.8s cubic-bezier(.4,0,.2,1) .15s 1 both}
@keyframes hiveSweep{to{transform:translateX(320%)}}
.login-logo{display:block;width:200px;max-width:72%;margin:0 auto 20px;border-radius:14px}
.showpw{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--mut);font-weight:400;margin:2px 0 14px;cursor:pointer}
.showpw input{width:auto;margin:0}
.donecheck{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fg);margin:12px 0 0;cursor:pointer}
.donecheck input{width:auto;margin:0}
.pfgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;margin:8px 0}
.pf{display:flex;flex-direction:column;font-size:12px;color:var(--mut);gap:3px}
.pf input{font-size:14px}
.vnr{font-size:12px;color:var(--mut);margin:2px 0}
.vnr b{color:var(--acc);letter-spacing:.02em}
code{background:var(--bg2);border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:12px;color:var(--acc)}
/* ---- Antworten: Original + Verfassen ---- */
.orig{margin-top:16px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.orig-h{font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);margin-bottom:8px}
/* ---- Anhang-Vorschau ---- */
.att-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}
.att-img{max-width:100%;max-height:340px;border:1px solid var(--line);border-radius:8px;margin:8px 0;display:block}
/* ---- Anhangsliste (kompakt) ---- */
.atts{margin:12px 0}
.atts-h{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin-bottom:6px}
.attrow{display:flex;align-items:center;gap:10px;padding:7px 11px;background:var(--bg2);border:1px solid var(--line);border-radius:8px;margin:5px 0}
.att-ic{flex:none}
.att-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.att-sz{flex:none;color:var(--mut);font-size:12px}
.att-act{flex:none;display:flex;gap:14px}
.att-lnk{color:var(--acc);font-size:12px;font-weight:600;white-space:nowrap}
.att-lnk:hover{text-decoration:underline}
/* Mailkopf im Outlook-Stil: Avatar, Absender fett, Datum rechts, Empfänger darunter */
.mhead{display:flex;gap:12px;align-items:flex-start;padding:12px 0 14px;border-bottom:1px solid var(--line);margin-bottom:4px}
.mhead-ava{flex:none;width:40px;height:40px;border-radius:50%;background:var(--acc);color:#000;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center}
.mhead-main{flex:1;min-width:0}
.mhead-top{display:flex;gap:12px;align-items:baseline;justify-content:space-between;flex-wrap:wrap}
.mhead-from{font-weight:700;font-size:15px;color:var(--fg)}
.mhead-date{color:var(--mut);font-size:12px;white-space:nowrap}
.mhead-addr{font-size:12px;margin-top:1px}
.mhead-to{font-size:12px;color:var(--fg);margin-top:3px;overflow-wrap:anywhere}
/* Mailinhalt: heller Bogen wie in Outlook, damit fremdes HTML immer lesbar bleibt */
.mailhtml{width:100%;height:70vh;min-height:420px;border:1px solid var(--line);border-radius:10px;background:#fff;margin-top:12px;box-shadow:0 1px 4px rgba(0,0,0,.25)}
/* ---- Statistik ---- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:12px 0}
.stat-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.stat-num{font-size:26px;font-weight:800}
.stat-lbl{color:var(--mut);font-size:12px;margin-top:2px}
.bar-row{display:flex;align-items:center;gap:10px;margin:5px 0;font-size:13px}
.bar-row .bl{width:150px;flex:none;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{height:16px;background:var(--acc);border-radius:4px;min-width:2px}
.bar-row .bv{color:var(--mut);font-size:12px}
/* ---- Kalender ---- */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:12px}
.cal-h{background:var(--card);color:var(--mut);font-size:11px;font-weight:700;text-transform:uppercase;text-align:center;padding:6px 0}
.cal-d{background:var(--bg);min-height:96px;padding:4px 6px;overflow:hidden}
.cal-d.other{opacity:.4}
.cal-d.today{outline:2px solid var(--acc);outline-offset:-2px}
.cal-dn{font-weight:700;font-size:12px;color:var(--mut);margin-bottom:3px}
.cev{font-size:11px;line-height:1.35;background:var(--card2);border-left:2px solid var(--acc);border-radius:4px;padding:2px 4px;margin:2px 0;overflow-wrap:anywhere}
.cev-x{width:auto;background:none;border:0;color:var(--mut);cursor:pointer;font-size:12px;padding:0 2px}
.cwv{display:block;font-size:11px;line-height:1.35;color:#f0cd78;background:#241d0b;border-radius:4px;padding:2px 4px;margin:2px 0;overflow-wrap:anywhere}
.cext{background:rgba(56,139,253,.14);border-left:2px solid #4a9eff}
.cpj{display:block;color:var(--acc);background:var(--hover2);border-left:2px solid var(--acc);text-decoration:none}
.cpj:hover{filter:brightness(1.15)}
@media(max-width:820px){.cal-d{min-height:64px;font-size:10px}}
/* ---- Kalender 2.0: Reiter, Tag/Woche/Monat, Personenfarben ---- */
.caltabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap}
.caltab{padding:8px 14px;font-size:13px;font-weight:600;color:var(--mut);text-decoration:none;border-bottom:2px solid transparent;border-radius:6px 6px 0 0}
.caltab:hover{background:var(--hover2);color:var(--fg)}
.caltab.on{color:var(--acc);border-bottom-color:var(--acc);background:var(--hover2)}
/* Übersichts-Karten über dem Kalender (Mini-Dashboard, jede Karte ist ein Link). */
.calcards{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.calcard{flex:1;min-width:185px;display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 14px;text-decoration:none}
.calcard:hover{border-color:var(--acc)}
.cc-n{font-size:16px;font-weight:700;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-l{font-size:12px;color:var(--mut)}
.cc-warn{color:#f4707a;font-weight:700}
@media(max-width:820px){.calcard{min-width:44%}}
.calbar{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.calnav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.calviews{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;margin-left:6px}
.calview{padding:5px 11px;font-size:12px;color:var(--mut);text-decoration:none}
.calview:hover{background:var(--hover2)}
.calview.on{background:var(--acc);color:#000;font-weight:700}
.wkgrid{display:grid;grid-template-columns:56px repeat(7,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.wk-h{background:var(--card);color:var(--mut);font-size:11px;font-weight:700;text-align:center;padding:6px 2px}
.wk-h.now{color:var(--acc)}
.wk-wd{text-transform:uppercase}
.wk-t{background:var(--card);color:var(--mut);font-size:11px;text-align:right;padding:4px 6px}
.wk-c{background:var(--bg);min-height:40px;padding:2px 3px}
.wk-c.now{background:var(--hover2)}
.dygrid{display:grid;grid-template-columns:64px 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.dy-t{background:var(--card);color:var(--mut);font-size:12px;text-align:right;padding:6px 8px}
.dy-c{background:var(--bg);min-height:38px;padding:3px 5px}
.calm{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.cal-wd{background:var(--card);color:var(--mut);font-size:11px;font-weight:700;text-transform:uppercase;text-align:center;padding:6px 0}
.cal-d.out{opacity:.42}
.cal-dn{display:block;text-decoration:none}
.calev{display:block;text-decoration:none;font-size:11px;line-height:1.3;background:var(--card2);border-left:3px solid var(--evc,var(--acc));border-radius:4px;padding:2px 5px;margin:2px 0;overflow:hidden}
.calev:hover{filter:brightness(1.2)}
.calev.montage{border-left-width:3px;box-shadow:inset 5px 0 0 -2px var(--bg),inset 8px 0 0 -2px var(--evc,var(--acc));padding-left:11px;outline:1px solid var(--evc,var(--acc));outline-offset:-1px}
.calev-t{display:block;color:var(--fg);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calev-m{display:block;color:var(--mut);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.callegend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--mut)}
.clg{display:inline-flex;align-items:center;gap:6px}
.clg i{width:11px;height:11px;border-radius:3px;display:inline-block}
.clg i.clg-m{background:var(--mut);box-shadow:inset 4px 0 0 -1px var(--bg),inset 7px 0 0 -1px var(--mut)}
.pchks{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 8px}
.pchk{display:inline-flex;align-items:center;gap:6px;font-size:13px;background:var(--card2);border:1px solid var(--line);border-radius:16px;padding:4px 11px 4px 8px;cursor:pointer}
.pchk i{width:10px;height:10px;border-radius:50%;display:inline-block}
.pchk input{width:auto;margin:0}
/* ---- Rechnungslisten ---- */
.invtbl{width:100%;border-collapse:collapse;margin-top:12px;font-size:13px}
.invtbl th{text-align:left;color:var(--mut);font-size:11px;text-transform:uppercase;padding:6px 8px;border-bottom:1px solid var(--line)}
.invtbl td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.invtbl tr:hover td{background:var(--hover2)}
.inv-late{color:#f4707a;font-weight:700}
.ibad{display:inline-block;font-size:11px;font-weight:700;border-radius:11px;padding:2px 9px}
.ib-offen{background:#26303d;color:#9fc4ee}
.ib-teil{background:#3a2f10;color:#e8c46a}
.ib-ok{background:#12331d;color:#6fd68a}
.ib-ueber{background:#3a1418;color:#f4707a}
/* Zahlungs-Check: ein Balken pro Tag, kein wiederkehrendes Aufpoppen. */
.paycheck{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:55;display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--acc);border-radius:24px;padding:9px 12px 9px 18px;font-size:13px;font-weight:600;box-shadow:0 8px 26px rgba(0,0,0,.5);max-width:calc(100vw - 24px)}
@media(max-width:820px){.paycheck{bottom:70px;left:12px;right:12px;transform:none;justify-content:space-between}}
/* ---- Termin-Erinnerung (Popup) ---- */
.remwrap{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;gap:10px;max-width:330px}
.remcard{background:var(--card);border:1px solid var(--acc);border-radius:10px;padding:11px 13px;box-shadow:0 8px 26px rgba(0,0,0,.5)}
.remcard-h{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--acc);letter-spacing:.4px}
.remcard-t{font-size:14px;font-weight:700;margin:3px 0 2px;overflow-wrap:anywhere}
.remcard-m{font-size:12px;color:var(--mut);overflow-wrap:anywhere}
.remcard-a{display:flex;gap:6px;margin-top:9px}
@media(max-width:820px){.remwrap{left:12px;right:12px;bottom:72px;max-width:none}.wkgrid{grid-template-columns:44px repeat(7,1fr);font-size:10px}.caltab{padding:7px 10px;font-size:12px}}
/* ---- Live-Hinweis neue Mail / Erwaehnung ---- */
.newmail{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:40;background:var(--acc);color:#000;font-weight:700;padding:10px 18px;border-radius:24px;border:0;box-shadow:0 4px 16px rgba(0,0,0,.45);cursor:pointer;width:auto;text-decoration:none;display:inline-block}
.nm-notif{bottom:64px;background:#3fb950;color:#001b06}
/* ---- Tastenkuerzel-Highlight + Tags ---- */
.li.kbsel{outline:2px solid var(--acc);outline-offset:-2px}
.tagchip{display:inline-block;font-size:11px;font-weight:600;color:#000;border-radius:10px;padding:1px 8px;margin:0 4px 4px 0}
.tagdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:3px;vertical-align:middle}
.ctxbox{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-top:12px}
.ctxbox h3{margin:0 0 8px;font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em}
.ctxbox a{display:block;padding:5px 0;border-bottom:1px solid var(--line);font-size:13px}
.ctxbox a:last-child{border-bottom:0}
/* ---- Ordner-Zustaendigkeit + Rechtsklick-Menue ---- */
.navresp{color:var(--mut);font-size:11px;font-weight:600;margin-left:4px}
.mh-menu{position:fixed;z-index:60;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.5);padding:6px;min-width:180px}
.mh-menu .mh-mh{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;padding:4px 8px}
.mh-menu button{display:block;width:100%;text-align:left;background:none;border:0;color:var(--fg);font-size:13px;padding:7px 9px;border-radius:7px;cursor:pointer}
.mh-menu button:hover{background:var(--hover2)}
.mh-menu button.cur{color:var(--acc);font-weight:700}
/* ---- Freigabe-Workflow: Mails, die auf Freigabe warten ---- */
.li.approvalli{border-left:3px solid #f0932b;background:#1f1608}
.li-appr{display:inline-block;font-size:10px;font-weight:700;color:#000;background:#f0932b;border-radius:9px;padding:1px 7px;margin-right:5px}
.btn-appr{background:#f0932b;color:#000;border:0;font-weight:700}
.btn-appr:hover{filter:brightness(1.08)}
/* Weg in die Freigabe: eingeklappt ein kleiner Knopf, erst beim Öffnen kommt das Textfeld. */
.apprbox{display:inline-block}
.apprbox>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center}
.apprbox>summary::-webkit-details-marker{display:none}
.apprbox[open]>summary{border-color:var(--acc);color:var(--acc)}
.apprsend{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0 2px}
.apprsend input{flex:1;min-width:150px;margin:0}
.appr-banner{background:#1f1608;border:1px solid #f0932b;border-radius:10px;padding:12px 14px;margin-bottom:12px}
.appr-banner b{color:#f0932b}
.btn-danger{background:#3a1418;color:#ff8a8a;border:1px solid #5a2027}
.btn-danger:hover{background:#4a1a20}
/* Sammelaktions-Leiste: erst zeigen, wenn Mails ausgewaehlt sind (aufgeraeumt). */
.bulkactions{display:none;flex-wrap:wrap;gap:6px;align-items:center}
.listform:has(.cb:checked) .bulkactions,.listform.mh-sel .bulkactions{display:flex}
.bulkhint{color:var(--mut);font-size:12px}
.listform:has(.cb:checked) .bulkhint,.listform.mh-sel .bulkhint{display:none}
/* ---- Verwaltung / Workflows-Seite ---- */
.wf-sec{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:14px 0;max-width:760px}
.wf-sec h2{margin:0 0 4px;font-size:16px}
.wf-sec .lbl{color:var(--mut);font-size:13px;margin-bottom:10px}
.wf-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line)}
.wf-row:last-child{border-bottom:0}
.wf-row .wf-name{flex:1;min-width:140px;font-size:14px}
.wf-row .wf-box{color:var(--mut);font-size:12px}
.wf-card{background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin:8px 0}
.wf-card .wf-flow{font-size:14px}
.wf-card .wf-flow b{color:var(--acc)}
/* ---- Header bleibt IMMER dunkel (dunkles Waben-Banner), auch im hellen Modus ---- */
header{color:#e6edf3}
header a.out{color:#e6edf3;font-weight:500}
header a.out:hover{color:var(--acc)}
header .search input{background-color:#0b1219;color:#e6edf3}
header .search input::placeholder{color:#8ba1b4}
header .logo b{color:#f5b301}
header .berater-link{color:#f5b301;border-color:#f5b301}
header .berater-link:hover{background:#f5b301;color:#000}
.coswitch{background:#0b1219;border-color:#f5b301;color:#f5b301}
.coswitch:hover{background:#16222e}

/* --- Einstellungen & Verwaltung: Reiter + Karten (Umbau 14.08.2026) --- */
.settabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 20px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.settabs a{font-size:13px;font-weight:600;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:var(--bg2);color:var(--fg);text-decoration:none}
.settabs a:hover{border-color:var(--acc);color:var(--acc)}
.settabs a.active{background:var(--acc);border-color:var(--acc);color:#000}
.setgrp{display:none}
.setgrp.active{display:block}
.setgrp>h1:first-child{margin-top:8px}
.setcard{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:0 0 14px;max-width:640px}
.setcard h2{margin:0 0 10px;font-size:12px;color:var(--acc);text-transform:uppercase;letter-spacing:.06em}
.setcard input[type=password]{max-width:320px;display:block}

/* --- Melli-Dock: ruhiger Kopf, Themen-Zeile, Chat-Eingabe in einer Reihe (14.08.2026) --- */
.dock{width:420px}
.dock-head h3{flex:0 0 auto}
.dock-sub{font-size:11px;color:var(--mut);flex:1}
.dock-topics{display:flex;gap:6px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--bg2)}
.dock-topics .grow{flex:1;min-width:0}
.dock-topics select{width:100%;padding:7px 9px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font-size:12px}
.dock-tool{width:30px;height:30px;flex:0 0 auto;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer;font-size:14px;line-height:1;padding:0}
.dock-tool:hover{border-color:var(--acc);color:var(--acc)}
.dock-ctx{font-size:12px;color:var(--mut);padding:7px 14px;border-bottom:1px solid var(--line);background:var(--bg2)}
.dock-ctx b{color:var(--acc)}
.dock-form{display:flex;gap:8px;align-items:flex-end}
.dock-form textarea{flex:1;min-height:40px;max-height:150px;overflow-y:auto}
.ab-send{width:44px;height:40px;flex:0 0 auto;border:0;border-radius:10px;background:var(--acc);color:#000;font-size:15px;cursor:pointer;font-weight:700}
.ab-send:hover{filter:brightness(1.12)}

/* --- Anhang-Vorschau mit Zurueck-Leiste (14.08.2026): auf dem Handy gab es keinen Weg zurueck --- */
.pv-bar{position:sticky;top:0;display:flex;gap:12px;align-items:center;padding:11px 14px;background:var(--card);border-bottom:1px solid var(--line);z-index:5}
.pv-back{font-weight:700;color:var(--acc);text-decoration:none;white-space:nowrap;font-size:14px}
.pv-back:hover{text-decoration:underline}
.pv-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--mut)}
.pv-dl{white-space:nowrap;font-size:13px;color:var(--fg)}
.pv-frame{border:0;width:100%;height:calc(100vh - 48px);height:calc(100dvh - 48px);display:block;background:#3a3f45}
.pv-img{display:block;max-width:calc(100% - 28px);margin:14px auto;border-radius:8px}
.pv-hint{padding:10px 14px;font-size:12px;color:var(--mut)}

/* --- Melli auf dem Handy: Vollbild-Chat (Fund 14.08.2026). Steht bewusst am DATEIENDE:
   die Basis-Regel .dock weiter oben wuerde gleichrangige fruehere Regeln sonst ueberstimmen
   (genau daran scheiterte der erste Versuch — Regel stand VOR der Basis-Regel und war wirkungslos).
   1) Vollbild statt schmaler Spalte, mit Abstand fuer Kerbe/Statusleiste: ohne den lag das
      Schliessen-X unter der iOS-Uhr und war nicht antippbar (viewport-fit=cover).
   2) Die Bottom-Bar bleibt UEBER dem Dock und zeigt nur noch den 🐝-Knopf als zweiten,
      daumen-freundlichen Weg zum Schliessen; die uebrigen Knoepfe wirkten auf die verdeckte
      Seite dahinter und sind solange ausgeblendet. */
@media(max-width:970px){
  .dock{width:100vw;max-width:100vw;height:100vh;height:100dvh;padding-top:env(safe-area-inset-top,0px);padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .dock-close{width:44px;height:44px;font-size:28px;padding:0;flex:0 0 auto}
  body.dock-open .mbar{z-index:900}
  body.dock-open .mbar>*:not(.js-berater){display:none}
  body.dock-open .mbar .js-berater{color:var(--acc);font-weight:700}
}

/* --- Kalender-Wochengitter am Handy (Fund 15.08.2026): lange Termin-Titel drueckten die
   1fr-Spalten breiter als den Bildschirm, der Ueberstand war abgeschnitten und unerreichbar.
   Loesung: das Gitter scrollt in einem EIGENEN Rahmen seitlich (Spalten bleiben lesbar breit),
   die Seite selbst laeuft nie ueber. min-width:0 laesst die Zellen ihre Inhalte kappen. --- */
.wkscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.wk-c,.wk-h{min-width:0}
.wk-c .calev{max-width:100%}
.calev-t,.calev-m{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:970px){
  .wkscroll .wkgrid{min-width:640px}
}

/* Rechnungstabellen (Zu bezahlen / Zu erhalten) scrollen am Handy im eigenen Rahmen, statt die
   ganze Seite breitzudruecken (Fund 15.08.2026, Tabelle war 624px auf 375px-Bildschirm). */
.invscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:970px){
  .invscroll .invtbl{min-width:600px}
}

/* --- Melli: Bestaetigungs-Kaertchen fuer Sammel-Aktionen (25.08.2026) --- */
.dock-propose{border:1px solid var(--acc);border-radius:10px;padding:10px 12px;margin-bottom:10px;background:var(--bg2)}
.dp-head{font-size:13px;margin-bottom:6px}
.dp-list{max-height:180px;overflow-y:auto;display:flex;flex-direction:column;gap:3px;margin-bottom:8px}
.dp-row{font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-row a{color:var(--fg)}
.dp-btns{display:flex;gap:8px;margin-bottom:4px}

/* Melli denkt noch: Platzhalter-Blase sanft pulsierend (25.08.2026, Hintergrund-Denken). */
.ab-pending{opacity:.75;font-style:italic;animation:abpulse 1.6s ease-in-out infinite}
@keyframes abpulse{0%,100%{opacity:.55}50%{opacity:.95}}
@media(prefers-reduced-motion:reduce){.ab-pending{animation:none}}

/* Ausweg-Hinweis in der Lade-Anzeige (26.08.2026: Anzeige blieb bei blockierter Pflichtfeld-Prüfung hängen). */
.mh-esc{margin-top:10px;font-size:12px;color:var(--mut)}

/* --- Kleine Handys (Fund Pascal 03.09.2026): auf einem 320px-Bildschirm war KEIN Tippziel
   gross genug. Gemessen waren u. a. Zahnrad 11x20, Abmelden 61x20, Auswahlkästchen 13x13 und
   die Wichtigkeits-Auswahl 137x16. Empfehlung von Apple/Google sind 44 bzw. 48 Punkt.
   Steht am Dateiende, damit diese Regeln die frueheren ueberstimmen. --- */
@media(max-width:640px){
  /* Kopfzeile: Knöpfe mit echter Fläche statt nackter Textlinks */
  header .headright{gap:6px}
  header .headright>a,header .berater-link{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 10px;border-radius:8px}
  header .headright>a.out{border:1px solid var(--line)}
  header .out.sett{min-width:44px}
  .navtoggle,.js-navbd+*.navtoggle{min-height:42px}
  /* Ordner-Schublade und Nav-Einträge */
  .navitem,.navsub,.navsub2{min-height:44px;display:flex;align-items:center}
  .navcollapse{min-height:42px}
  /* Auswahlkästchen in Listen: 13px waren mit dem Finger kaum zu treffen */
  /* Kästchen: Grundregel input{width:100%} und alte Inline-Breiten machten sie unbrauchbar.
     22px ist der Kompromiss neben Text; die Zeile selbst bleibt das grosse Tippziel. */
  input[type=checkbox]{width:22px;height:22px;min-width:22px;flex:0 0 auto;accent-color:var(--acc)}
  .bulkbar .selall input,.li input[type=checkbox]{width:22px;height:22px}
  /* Auswahl-Felder und kleine Knöpfe */
  select,.bulk-sel,.datefield{min-height:40px}
  .btn-xs{min-height:36px;padding:8px 12px}
  .chip{min-height:36px}
  .filebtn,.scanbtn{min-height:42px;display:inline-flex;align-items:center}
  /* Datei-Auswahl im Verfassen-Fenster war 24px hoch */
  input[type=file]{min-height:40px}
  /* Listenzeilen: bequem tippbar */
  .li{min-height:56px}
  /* Text-Links wie „← zurück zur Inbox" waren 20px hoch */
  .backlink,.compose-wrap>p>a,p>a.lnk{display:inline-block;min-height:38px;line-height:38px}
}

/* Kopfzeile auf kleinen Handys: sie brauchte 217 von 568 Pixeln, weil ☰, Logo, Knöpfe und Suche
   je eine eigene Zeile bekamen (Fund 03.09.2026). Jetzt: eine Zeile für Bedienung, eine für die
   Suche. Melli fällt hier weg, den gibt es unten in der Leiste; Abmelden wird zum Symbol. */
@media(max-width:640px){
  header{row-gap:6px;padding:8px 10px}
  /* button{width:100%} ist die Grundregel dieser Datei -> hier ausdruecklich zurueckdrehen,
     sonst sprengt das ☰ die Zeile und die Kopfzeile wird eine Zeile hoeher. */
  header .navtoggle{order:1;flex:0 0 auto;width:auto;min-width:44px;padding:0 8px}
  header .logo{order:2;flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap}
  header .headright{order:3;flex:0 0 auto}
  header .search{order:4;flex:1 1 100%}
  header .search input{min-height:42px}
  header .berater-link{display:none}          /* liegt unten in der Leiste */
  header .abm .navtext{display:none}          /* nur das Symbol ⎋ */
  header .abm{min-width:44px}
}
/* Ganz schmale Geräte (bis 360px): auch der Wortmarken-Text weicht, das Bienen-Logo bleibt. */
@media(max-width:360px){
  header .logo{font-size:0}
  header .logo .logo-img{font-size:initial}
}

/* Lexware-Übergabe: bei mehreren Anhängen steht die Rechnung zur Auswahl. Das Feld sitzt in der
   schmalen Knopfreihe, darf sie also nicht sprengen. */
.lexpick { max-width: 220px; font-size: 12px; padding: 2px 4px; margin-right: 4px;
  border: 1px solid var(--line); border-radius: 5px; background: var(--card); color: var(--fg); }
@media (max-width: 640px) { .lexpick { max-width: 150px } }