/* Verwaltung — Design System
   Register: Product UI (refined light, Linear/Stripe-Nachbarschaft).
   Ein Akzent, feine Borders, tabellarische Zahlen, ruhige Tiefe. */

:root{
  /* Flächen (kühl-neutral) */
  --bg:#f6f7f9;
  --surface:#ffffff;
  --surface-2:#f1f3f6;   /* Toolbars, Table-Header, sekundäre Buttons, Hover-Fills */
  --surface-3:#e7eaf0;   /* stärkerer Hover */

  /* Linien */
  --line:#e4e7ec;
  --line-strong:#d3d8e0;

  /* Text-Rampe */
  --ink:#16181d;         /* Überschriften / primärer Text */
  --ink-2:#3f4451;       /* sekundär, kräftig */
  --muted:#667085;       /* gedämpft (≥4.5:1 auf Weiß) */

  /* Akzent (Indigo) */
  --brand:#4f46e5;
  --brand-d:#4338ca;     /* hover */
  --brand-dd:#3730a3;    /* active */
  --brand-ink:#4338ca;   /* Akzent-Text auf hellem Grund */
  --brand-weak:#eef0ff;  /* Tint für aktive Nav / Selektion */
  --ring:rgba(79,70,229,.35);

  /* Semantik */
  --ok:#067647;   --ok-bg:#e7f6ec;
  --err:#c81e1e;  --err-bg:#fdecec;
  --warn:#a15c00; --warn-bg:#fff4e5;
  --info:#1e5fce; --info-bg:#e7f0ff;

  /* Radien */
  --r-sm:6px; --r:8px; --r-lg:12px; --r-pill:999px;
  --radius:var(--r-lg); /* Rückwärtskompatibel */

  /* Tiefe (dezent) */
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
  --shadow-md:0 6px 16px rgba(16,24,40,.10);
  --shadow-lg:0 16px 40px rgba(16,24,40,.16);
  --shadow:var(--shadow-xs); /* Rückwärtskompatibel */

  /* z-index-Skala */
  --z-dropdown:1000; --z-sticky:1010; --z-modal:1030; --z-toast:1050; --z-tooltip:1060;

  /* Motion */
  --t:150ms cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scrollbar-gutter:stable}
body{
  margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  letter-spacing:-.006em;
}
::selection{background:var(--brand-weak); color:var(--brand-ink)}

a{color:var(--brand-ink); text-decoration:none; transition:color var(--t)}
a:hover{text-decoration:underline}

h1{font-size:1.45rem; font-weight:700; letter-spacing:-.015em; margin:.2rem 0 1rem}
h2{font-size:1.1rem; font-weight:650; letter-spacing:-.01em; margin:0 0 .8rem}
.muted{color:var(--muted)}

/* Tabellarische Zahlen dort, wo Zahlen ausgerichtet werden müssen */
.card-num,.tbl .r,.postbl .linenet,.postbl .numcell input,.sumrow{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}

/* Gemeinsamer Fokus-Ring für Tastaturnavigation */
a:focus-visible,button:focus-visible,.btn:focus-visible,summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px; border-radius:var(--r-sm);
}

/* ===== App-Shell + Sidebar ===== */
:root{
  --side:236px;
  --side-bg:#1156a3;      /* Marken-Blau (vmhaustechnik) */
  --side-ink:#d5e3f6;
  --side-ink-dim:#c4d8f2;   /* AA-Kontrast (5,0:1) auf dem Marken-Blau */
  --side-hover:rgba(255,255,255,.12);
  --side-line:rgba(255,255,255,.16);
}
.skip-link{position:absolute; left:-999px; top:0; z-index:var(--z-tooltip); background:var(--brand); color:#fff; padding:.5rem .8rem; border-radius:0 0 var(--r) 0}
.skip-link:focus{left:0}

body.app{display:grid; grid-template-columns:var(--side) 1fr; min-height:100vh}

.sidebar{
  position:sticky; top:0; align-self:start; height:100vh; overflow:hidden;
  background:var(--side-bg); color:var(--side-ink);
  display:flex; flex-direction:column; gap:.15rem;
  padding:1.1rem .7rem .9rem; border-right:1px solid var(--side-line);
}
.sidebar .brand{flex:none}
.sidebar .brand{
  display:inline-flex; align-items:center; gap:.6rem; color:#fff; font-weight:700;
  font-size:1.05rem; letter-spacing:-.015em; padding:.2rem .55rem 1rem; line-height:1.25;
}
.sidebar .brand{padding:0 0 .9rem}
.sidebar .brand-logo{width:100%; height:auto; display:block; background:#fff; padding:5px; border-radius:var(--r); box-shadow:0 1px 2px rgba(0,0,0,.25)}
.sidebar .brand:hover{text-decoration:none}

.sidebar .mainnav{display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; margin:0 -.2rem; padding:0 .2rem}
.sidebar .mainnav a{
  display:flex; align-items:center; gap:.65rem; padding:.5rem .55rem; border-radius:var(--r);
  color:var(--side-ink); font-weight:500; font-size:.92rem;
  transition:background var(--t), color var(--t);
}
.sidebar .mainnav a svg{flex:none; opacity:.85}
.sidebar .mainnav a:hover{background:var(--side-hover); color:#fff; text-decoration:none}
.sidebar .mainnav a:hover svg{opacity:1}
.sidebar .mainnav a.active{background:#2a72c9; color:#fff; font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.25)}
.sidebar .mainnav a.active svg{opacity:1}
/* Klappbare Untermenüs */
.navgroup{margin:0}
.navgroup > summary{list-style:none; display:flex; align-items:center; gap:.15rem; padding:0; cursor:pointer}
.navgroup > summary::-webkit-details-marker{display:none}
.navgroup > summary > a{flex:1}
.navgroup[open] > summary{margin-bottom:0}
.navcaret{display:flex; align-items:center; justify-content:center; width:26px; height:32px; flex:none; border-radius:var(--r); color:var(--side-ink); opacity:.65}
.navcaret svg{transition:transform var(--t)}
.navgroup[open] .navcaret svg{transform:rotate(90deg)}
.navcaret:hover{background:var(--side-hover); opacity:1}
.navkids{display:flex; flex-direction:column; gap:2px; margin-top:2px}
.sidebar .mainnav .navchild{padding-left:2.2rem; font-size:.88rem}
.sidebar .mainnav .navchild svg{width:15px; height:15px}

.sidebar .userbox{
  margin-top:auto; padding-top:.9rem; border-top:1px solid var(--side-line);
  display:flex; flex-direction:row; align-items:center; gap:.4rem;
  color:var(--side-ink); font-size:.85rem;
}
.sidebar .userbox-id{flex:1; min-width:0; display:flex; align-items:center; gap:.55rem; color:inherit; text-decoration:none; padding:.2rem; margin:-.2rem; border-radius:var(--r); transition:background var(--t)}
.sidebar .userbox-id:hover{background:var(--side-hover); text-decoration:none}
.sidebar .userbox-meta{display:flex; flex-direction:column; min-width:0}
.sidebar .userbox-name{color:#fff; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sidebar .userbox-role{color:var(--side-ink-dim); font-size:.78rem}
.sidebar .userbox .userbox-menu{flex:1; min-width:0; position:relative}
.sidebar .userbox .userbox-menu > summary{width:100%; box-sizing:border-box; cursor:pointer; list-style:none}
.sidebar .userbox .userbox-menu > summary::-webkit-details-marker{display:none}
.sidebar .userbox-menu .menu{left:0; right:auto; top:auto; bottom:calc(100% + 6px); min-width:210px}
.sidebar .userbox-menu .menu a,.sidebar .userbox-menu .menu .menu-item{display:flex; align-items:center; gap:.6rem; width:100%; text-align:left}
.sidebar .userbox-menu .menu svg{flex:none; width:18px; height:18px; opacity:.8}
.sidebar .userbox .logout{flex:none; display:inline-flex; align-items:center; justify-content:center; padding:.4rem; border-radius:var(--r); color:var(--side-ink); transition:background var(--t), color var(--t)}
.sidebar .userbox .logout svg{width:18px; height:18px}
.sidebar .userbox .logout:hover{background:var(--side-hover); color:#fff; text-decoration:none}
.sidebar .avatar{box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.sidebar .avatar-fallback{background:#343b49; color:#fff}

.app-main{min-width:0; display:flex; flex-direction:column}

/* Layout */
.content{width:100%; padding:1.8rem 1.6rem; flex:1}
.foot{
  width:100%; margin:1rem 0 0; padding:1.1rem 1.6rem 1.4rem; color:var(--muted);
  font-size:.85rem; display:flex; justify-content:space-between; gap:1rem; border-top:1px solid var(--line);
}

/* Avatare */
.avatar{
  width:34px; height:34px; border-radius:50%; object-fit:cover; flex:none; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface-3); color:var(--ink-2); font-size:.8rem; font-weight:600;
}
.avatar-lg{width:88px; height:88px; font-size:1.8rem}
.avatar-sm{width:28px; height:28px; font-size:.72rem}
.avatar-cell{width:28px; padding-right:0!important}
.userbubble{display:inline-flex; align-items:center; gap:.4rem}
.rowlink{color:inherit; font-weight:600}
.rowlink:hover{color:var(--brand-ink)}
button.is-busy{opacity:.65; cursor:progress}

/* Balkendiagramm (Dashboard: Umsatz pro Monat) */
.barchart{display:flex; align-items:stretch; gap:.4rem; height:240px; margin-top:.6rem}
.bar-col{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center}
.bar-val{font-size:.68rem; color:var(--muted); font-variant-numeric:tabular-nums; height:1.1em; margin-bottom:.25rem; white-space:nowrap}
.bar-track{flex:1; width:100%; display:flex; align-items:flex-end; justify-content:center; border-bottom:1px solid var(--line)}
.bar-fill{width:70%; max-width:2.6rem; min-height:2px; background:color-mix(in oklab, var(--brand) 72%, var(--surface)); border-radius:var(--r-sm) var(--r-sm) 0 0; transition:background var(--t)}
.bar-fill.is-current{background:var(--brand)}
.bar-col:hover .bar-fill{background:var(--brand-d)}
.bar-lbl{font-size:.72rem; color:var(--muted); margin-top:.45rem}

/* Rechte-Matrix + Benutzer-Rechte */
.matrix th, .matrix td{text-align:center; white-space:nowrap}
.matrix th:first-child, .matrix td:first-child{text-align:left; white-space:normal}
.matrix input[type=checkbox]{width:18px; height:18px; accent-color:var(--brand); cursor:pointer}
.permtbl{max-width:680px}
.permtbl td:last-child{width:15rem}
.permtbl select{max-width:15rem}
.profilecard{max-width:520px}
.profile-av{display:flex; align-items:center; gap:1.1rem; margin-bottom:1.3rem}
.profile-name{font-weight:650; font-size:1.05rem; color:var(--ink)}
.profilecard .avatar-fallback{background:var(--brand-weak); color:var(--brand-ink)}

/* Profilbild-Zuschnitt */
.crop-stage{margin:.6rem 0 .2rem}
.crop-view{position:relative; width:260px; max-width:100%; touch-action:none}
#cropCanvas{display:block; border-radius:var(--r); background:#0d0f14; cursor:grab; touch-action:none}
#cropCanvas:active{cursor:grabbing}
.crop-ring{position:absolute; inset:0; pointer-events:none; border-radius:var(--r);
  background:radial-gradient(circle, transparent 129px, rgba(13,15,20,.5) 130px)}
.crop-ring::after{content:""; position:absolute; left:50%; top:50%; width:260px; height:260px;
  transform:translate(-50%,-50%); border-radius:50%; box-shadow:inset 0 0 0 2px rgba(255,255,255,.65)}
.crop-zoom{flex-direction:row; align-items:center; gap:.6rem; max-width:260px; margin-top:.7rem; color:var(--ink-2)}
input[type=range]{padding:0; border:0; background:transparent; box-shadow:none; accent-color:var(--brand); cursor:pointer}
input[type=range]:hover{border:0}
input[type=range]:focus{box-shadow:none; outline:2px solid var(--ring); outline-offset:3px}

/* Cards / KPIs */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1rem; margin-bottom:1.4rem}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.05rem 1.15rem; box-shadow:var(--shadow-xs)}
.card-num{font-size:1.6rem; font-weight:700; letter-spacing:-.02em; color:var(--ink); line-height:1.15}
.card-lbl{color:var(--muted); font-size:.82rem; font-weight:500; margin-top:.35rem}

/* Panels */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.2rem 1.3rem; box-shadow:var(--shadow-xs); margin-bottom:1.4rem}

/* Tables */
.tbl{width:100%; border-collapse:collapse}
.tbl th,.tbl td{text-align:left; padding:.6rem .65rem; border-bottom:1px solid var(--line)}
.tbl thead th{background:var(--surface-2); font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600; border-bottom:1px solid var(--line-strong)}
.tbl tbody tr{transition:background var(--t)}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl tbody tr:last-child td{border-bottom:0}

/* Forms */
.form > * + *{margin-top:1rem}   /* einheitlicher vertikaler Abstand zwischen Formular-Blöcken; kollabiert mit eigenen Margins (Panels etc.) → kein Doppel-Abstand */
.form fieldset{border:1px solid var(--line); border-radius:var(--r-lg); padding:1.1rem 1.3rem; margin:0 0 1.2rem; background:var(--surface)}
.form legend{padding:0 .45rem; font-weight:600; color:var(--ink-2); font-size:.9rem}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.9rem; max-width:1100px}
label{display:flex; flex-direction:column; gap:.35rem; font-size:.88rem; font-weight:500; color:var(--ink-2)}
label.checkbox{flex-direction:row; align-items:center; gap:.5rem; color:var(--ink)}
.inline{display:flex; gap:.5rem}
input,select,textarea{
  font:inherit; padding:.5rem .65rem; border:1px solid var(--line-strong); border-radius:var(--r);
  background:var(--surface); color:var(--ink); width:100%;
  transition:border-color var(--t), box-shadow var(--t);
}
input:hover,select:hover,textarea:hover{border-color:#b9bfca}
input:focus,select:focus,textarea:focus,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--ring);
}
input:disabled,select:disabled,textarea:disabled{background:var(--surface-2); color:var(--muted); cursor:not-allowed}
::placeholder{color:var(--muted); opacity:1}

/* flex-wrap: sonst können Button-Reihen (z. B. „+ Artikel / + Arbeitszeit / + Textzeile /
   + Überschrift") auf schmalen Screens nicht umbrechen und schieben die ganze Seite seitlich raus. */
.actions{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-top:.4rem}
button,.btn{
  font:inherit; font-weight:600; cursor:pointer; border:1px solid transparent; border-radius:var(--r);
  padding:.55rem 1.1rem; background:var(--brand); color:#fff; line-height:1.2;
  transition:background var(--t), border-color var(--t), box-shadow var(--t), transform var(--t);
}
button:hover,.btn:hover{background:var(--brand-d)}
button:active,.btn:active{background:var(--brand-dd)}
button:disabled,.btn:disabled{background:var(--surface-3); color:var(--muted); cursor:not-allowed; border-color:var(--line)}
.btn-secondary{background:var(--surface); color:var(--ink-2); border:1px solid var(--line-strong); padding:.55rem 1.1rem; border-radius:var(--r)}
.btn-secondary:hover{text-decoration:none; background:var(--surface-2); color:var(--ink)}

/* Kompaktes Formular-Raster: max. 2 Spalten, begrenzte Breite (Felder nicht über die ganze Seite strecken) */
.formgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.1rem; max-width:680px; align-items:start}
.formgrid .full{grid-column:1 / -1}
@media (max-width:560px){.formgrid{grid-template-columns:1fr}}
label .opt{font-weight:400; color:var(--muted)}
.form-note{max-width:680px; margin:.9rem 0 0; font-size:.82rem; color:var(--muted); line-height:1.45}
/* Sekundäre Aktion unter einem Formular, per Trennlinie abgesetzt */
.form-sep{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem .85rem; max-width:680px; margin-top:1.15rem; padding-top:1.05rem; border-top:1px solid var(--line)}
.form-sep form{margin:0}
.form-sep .muted{font-size:.82rem}

/* Durchsuchbare Auswahl (combo.js) */
.combo{position:relative}
.combo-native{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; margin:0}
.combo-box{position:absolute; z-index:var(--z-dropdown); left:0; right:0; top:calc(100% + 3px);
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r); box-shadow:var(--shadow-lg);
  max-height:280px; overflow:auto}
.combo-item{padding:.5rem .65rem; cursor:pointer; font-size:.92rem}
.combo-item:hover, .combo-item.active{background:var(--surface-2)}
.combo-item.sel{font-weight:600}
.combo-empty{padding:.5rem .65rem; color:var(--muted); font-size:.9rem}

/* Seiten-Blättern (Pagination) unter Listen */
.pager{display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; margin-top:1.1rem}
.pager-info{color:var(--muted); font-size:.88rem; font-variant-numeric:tabular-nums}
.pager button:disabled{opacity:.5; cursor:not-allowed}

/* Logo-Feld: Vorschau mit „×"-Overlay zum Entfernen + Upload daneben */
.logo-field{display:flex; align-items:flex-start; gap:1.1rem; flex-wrap:wrap; margin-top:.9rem}
.logo-preview{position:relative; flex-shrink:0}
.logo-preview img{display:block; max-height:64px; max-width:220px; border:1px solid var(--line); border-radius:var(--r); padding:6px; background:#fff}
.logo-x{position:absolute; top:-9px; right:-9px; width:23px; height:23px; padding:0; border-radius:50%;
  background:var(--surface); color:var(--ink-2); border:1px solid var(--line-strong); box-shadow:var(--shadow-sm);
  display:inline-flex; align-items:center; justify-content:center; font-size:16px; line-height:1; cursor:pointer;
  transition:background var(--t), color var(--t), border-color var(--t)}
.logo-x:hover{background:var(--err-bg); color:var(--err); border-color:transparent}
.logo-field .logo-upload{flex:1; min-width:240px}

/* Einzeilige „hinzufügen"-Form (Label + Eingabe + Button auf einer Grundlinie) */
.addrow{display:flex; align-items:flex-end; gap:.7rem; flex-wrap:wrap; max-width:680px; margin-top:1.1rem; padding-top:1.05rem; border-top:1px solid var(--line)}
.addrow label{flex:1 1 260px; min-width:0}
.addrow button{flex-shrink:0}

/* Live-Passwortprüfung (Kriterienliste unter dem Passwortfeld) */
.pwrules{display:none; flex-wrap:wrap; gap:.35rem .9rem; margin:.55rem 0 0; font-weight:400}
.pwrules.visible{display:flex}
.pwrule{display:flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--muted); transition:color var(--t)}
.pwrule .pwdot{width:15px; height:15px; border-radius:50%; border:1.5px solid currentColor;
  display:inline-flex; align-items:center; justify-content:center; font-size:9px; line-height:1; flex-shrink:0}
.pwrule.ok{color:var(--ok)}
.pwrule.ok .pwdot{background:var(--ok); border-color:var(--ok); color:#fff}
.pwrule.ok .pwdot::after{content:"✓"}

/* Icon-Aktionen in Tabellenzeilen (bearbeiten / sperren / löschen) */
.rowacts{display:flex; justify-content:flex-end; align-items:center; gap:.15rem; white-space:nowrap}
.rowacts form{margin:0; display:inline-flex}
.iconbtn{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0;
  background:transparent; border:1px solid transparent; border-radius:var(--r); color:var(--muted);
  cursor:pointer; transition:background var(--t), color var(--t), border-color var(--t)}
.iconbtn:hover{background:var(--surface-2); color:var(--ink); text-decoration:none}
.iconbtn:active{background:var(--surface-3)}
.iconbtn.is-busy{opacity:.55}
.iconbtn-danger:hover{background:var(--err-bg); color:var(--err); border-color:transparent}

/* Flash */
.flash{position:relative; padding:.7rem 2.4rem .7rem 1rem; border-radius:var(--r); margin-bottom:1rem; font-weight:500; border:1px solid transparent}
.flash-success{background:var(--ok-bg); color:var(--ok); border-color:rgba(6,118,71,.18)}
.flash-error{background:var(--err-bg); color:var(--err); border-color:rgba(200,30,30,.18)}
.flash-close{position:absolute; top:50%; right:.55rem; transform:translateY(-50%); width:1.5rem; height:1.5rem; display:flex; align-items:center; justify-content:center; padding:0; border:0; background:transparent; color:inherit; opacity:.55; font-size:1.25rem; line-height:1; cursor:pointer; border-radius:6px}
.flash-close:hover{opacity:1; background:rgba(0,0,0,.06)}

/* Termine heute (Dashboard) */
.today-list{list-style:none; margin:.2rem 0 0; padding:0; display:flex; flex-direction:column}
.today-item{border-top:1px solid var(--line)}
.today-item:first-child{border-top:0}
.today-item>a{display:flex; align-items:center; gap:.7rem; padding:.6rem .2rem; color:inherit; text-decoration:none; border-radius:var(--r)}
.today-item>a:hover{background:var(--bg)}
.today-time{flex:0 0 5.2rem; font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink-2); font-size:.9rem}
.today-dot{flex:0 0 auto; width:9px; height:9px; border-radius:50%}
.today-main{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; line-height:1.3}
.today-meta{color:var(--muted); font-size:.82rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.today-item.is-done>a{opacity:.55}
.today-item.is-done strong{text-decoration:line-through}

/* Login */
.loginpage{display:flex; min-height:100vh; align-items:center; justify-content:center; background:var(--bg); padding:1.5rem}
.loginbox{
  background:var(--surface); padding:2.75rem 2.9rem; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  width:100%; max-width:520px; display:flex; flex-direction:column; gap:1rem;
}
.login-head{text-align:center; margin-bottom:.5rem}
.login-logo{max-width:220px; max-height:88px; width:auto; height:auto; display:block; margin:0 auto 1.2rem; object-fit:contain}
.login-brand{font-size:1.5rem; font-weight:700; letter-spacing:-.01em; color:var(--ink); margin-bottom:.6rem}
.loginbox h1{text-align:center; margin:0; font-size:1.35rem}
.loginbox button{width:100%; padding:.8rem; margin-top:.4rem; font-size:1rem}
.login-sub{color:var(--muted); margin:.4rem 0 0; font-size:.95rem}
.login-forgot{display:block; text-align:center; font-size:.9rem; color:var(--brand-ink); margin-top:.2rem}

@media (max-width:560px){
  .loginbox{padding:1.9rem 1.6rem}
}

/* CRM-Komponenten */
.pagehead{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem}
.pagehead h1{margin:0}
.pagehead .btn, .pagehead .btn-secondary{display:inline-flex; align-items:center; gap:.4rem}
.pagehead .btn svg, .pagehead .btn-secondary svg{flex:none; width:16px; height:16px}
.pagehead-title{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; min-width:0}
.pagehead-title h1{margin:0}

/* Status-Badge als Dropdown (Angebote: Detail + Übersicht) */
.statusdrop{display:inline-block}
.statustrigger{display:inline-flex; align-items:center; gap:.15rem}
.statustrigger svg{opacity:.7; margin-right:-1px}
.searchbar{display:flex; gap:.5rem; margin-bottom:1.2rem; flex-wrap:wrap}
.searchbar input[type=search]{flex:1; min-width:200px}
.tag{display:inline-block; font-size:.72rem; font-weight:600; padding:.12rem .5rem; border-radius:var(--r-pill);
  background:var(--surface-2); color:var(--muted); vertical-align:middle; margin-left:.3rem; text-transform:uppercase; letter-spacing:.03em}
textarea{resize:vertical; min-height:2.4rem}
details > summary{cursor:pointer; font-weight:500; color:var(--brand-ink); padding:.3rem 0}
details[open] > summary{margin-bottom:.4rem}

.cols{display:grid; grid-template-columns:1.6fr 1fr; gap:1.2rem; align-items:start}
.col-main, .col-side{display:flex; flex-direction:column; gap:1.2rem; min-width:0}

.link-danger{background:none; border:0; color:var(--err); cursor:pointer; padding:0 .2rem; font:inherit}
.link-danger svg{display:block; width:16px; height:16px}
.link-danger:hover{text-decoration:underline}

.notelist{list-style:none; margin:.8rem 0 0; padding:0; display:flex; flex-direction:column; gap:.6rem}
.notelist li{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); padding:.5rem .75rem}
.note-meta{font-size:.78rem; color:var(--muted); display:flex; justify-content:space-between; gap:.5rem}
.note-body{white-space:pre-wrap}

.filelist{list-style:none; margin:.6rem 0 0; padding:0; display:flex; flex-direction:column; gap:.4rem}
.filelist li{display:flex; align-items:center; gap:.6rem; padding:.35rem 0; border-bottom:1px solid var(--line)}
.filelist li a{flex:1; word-break:break-all}

.hist-h{font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600; margin:1rem 0 .3rem}
.hist-row{display:flex; justify-content:space-between; gap:.6rem; padding:.35rem 0; border-bottom:1px solid var(--line); font-size:.9rem}
.hist-row span:nth-child(2){flex:1; color:var(--muted)}
a.hist-row{color:inherit; text-decoration:none; cursor:pointer; transition:background var(--t)}
a.hist-row:hover{background:var(--surface-2); text-decoration:none}
a.hist-row:hover span:nth-child(2){color:var(--ink-2)}
/* Aufklappbare, intern scrollbare Historie-Rubriken */
.hist-group{border-top:1px solid var(--line)}
.hist-group:first-of-type{border-top:0}
.hist-group > summary{display:flex; align-items:center; gap:.45rem; padding:.5rem 0; cursor:pointer; list-style:none;
  font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600}
.hist-group > summary::-webkit-details-marker{display:none}
.hist-group > summary::before{content:"›"; font-size:1.15em; line-height:1; transition:transform var(--t)}
.hist-group[open] > summary::before{transform:rotate(90deg)}
.hist-count{margin-left:auto; background:var(--surface-2); color:var(--ink-2); border-radius:var(--r-pill); padding:0 .5rem; font-size:.72rem; font-weight:600}
.hist-list{max-height:220px; overflow-y:auto; margin-bottom:.5rem}
.sr{gap:0}
.tbl .r, td.r, th.r{text-align:right; white-space:nowrap}
.subnav{display:flex; gap:.5rem; flex-wrap:wrap}
.tbl tr.inactive{opacity:.5}
button.link-danger.btn-secondary{color:var(--err); background:var(--surface); border:1px solid var(--line-strong)}

/* Status-Badges */
.badge{display:inline-block; font-size:.72rem; font-weight:600; padding:.15rem .55rem; border-radius:var(--r-pill); vertical-align:middle; line-height:1.5; border:1px solid transparent}
.badge-entwurf{background:var(--surface-2); color:var(--ink-2); border-color:var(--line-strong)}
.badge-versendet{background:var(--info-bg); color:var(--info)}
.badge-angenommen,.badge-bezahlt{background:var(--ok-bg); color:var(--ok)}
.badge-abgelehnt,.badge-storniert{background:var(--err-bg); color:var(--err)}
.badge-offen{background:var(--warn-bg); color:var(--warn)}
.badge-teilbezahlt{background:#fef7cd; color:#8a6100}

/* Positions-Editor */
.postbl{width:100%; border-collapse:collapse; min-width:720px}
.postbl th{font-size:.74rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:600; text-align:left; padding:.4rem .4rem; border-bottom:1px solid var(--line-strong)}
.postbl td{padding:.25rem .3rem; border-bottom:1px solid var(--line); vertical-align:bottom}
.postbl .numcol{width:5.5rem}
.postbl input,.postbl select{padding:.35rem .4rem}
.postbl .bez{width:100%}
.postbl .rolesel,.postbl .anfahrtsel{width:100%}
.postbl .kindsel{width:100%; margin-bottom:.2rem; font-size:.75rem; color:var(--muted); border:0; background:transparent; padding:0}
.postbl .numcell input{text-align:right}
/* Kleinunternehmer §19 UStG: MwSt-Spalte ausblenden – der Wert fließt ohnehin nicht in die Summe
   ein (compute_totals/beleg.js erzwingen 0%), stand aber verwirrend als "19" im Editor. */
body[data-taxmode="kleinunternehmer"] .vatcol{display:none}
.postbl .linenet{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; line-height:1.9rem}
.postbl tr.is-heading .bez{font-weight:700}
.poshandle{color:var(--muted); cursor:grab; text-align:center; user-select:none; touch-action:none; line-height:1.9rem}
.poshandle:active{cursor:grabbing}
.postbl tr.dragging{opacity:.45}
.postbl tr.dragover-top{box-shadow:inset 0 2px 0 0 var(--brand)}
.postbl tr.dragover-bottom{box-shadow:inset 0 -2px 0 0 var(--brand)}
.row-del{background:none;border:0;color:var(--err);font-size:1.1rem;cursor:pointer;line-height:1.9rem}

.sumbox{margin:1rem 0 0 auto; max-width:340px}
.sumrow{display:flex; justify-content:space-between; padding:.25rem 0; gap:1rem}
.sumrow.sum-total{border-top:2px solid var(--ink); margin-top:.3rem; padding-top:.5rem; font-weight:700; font-size:1.1rem}

/* Autocomplete */
.ac-box{position:absolute; z-index:var(--z-dropdown); background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r); box-shadow:var(--shadow-lg); max-height:280px; overflow:auto}
.ac-item{padding:.45rem .6rem; cursor:pointer; border-bottom:1px solid var(--line); display:flex; flex-direction:column}
.ac-item:last-child{border-bottom:0}
.ac-item:hover{background:var(--surface-2)}
.ac-item span{font-size:.78rem; color:var(--muted)}

/* Kalender-Legende */
.legend{display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1rem}
.legend-item{display:flex; align-items:center; gap:.4rem; font-size:.85rem; color:var(--muted)}
.legend-dot{width:.8rem; height:.8rem; border-radius:50%; display:inline-block}
#calendar{font-size:.9rem}
.fc .fc-button-primary{background:var(--brand); border-color:var(--brand)}
.fc .fc-button-primary:hover{background:var(--brand-d); border-color:var(--brand-d)}
.fc .fc-button-primary:not(:disabled).fc-button-active{background:var(--brand-dd); border-color:var(--brand-dd)}
.fc a{text-decoration:none}
.fc-event{cursor:pointer}
#monteurFilter{max-width:12rem}
.link-plain{background:none;border:0;cursor:pointer;font:inherit;color:var(--brand-ink);padding:0}

/* Plantafel (Mitarbeiter-Einsatztafel) */
.plan-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-xs)}
.plan{display:grid; grid-template-columns:160px repeat(7,minmax(122px,1fr)); min-width:920px}
.plan-corner{position:sticky; left:0; z-index:2; background:var(--surface-2); border-right:1px solid var(--line-strong)}
.plan-dayhead{background:var(--surface-2); border-left:1px solid var(--line); padding:.5rem .6rem; display:flex; flex-direction:column; gap:.05rem}
.plan-dayhead .pd-dow{font-weight:600; color:var(--ink); font-size:.85rem}
.plan-dayhead .pd-date{color:var(--muted); font-size:.75rem; font-variant-numeric:tabular-nums}
.plan-dayhead.is-today{background:var(--brand-weak)}
.plan-dayhead.is-today .pd-dow{color:var(--brand-ink)}
.plan-emp{position:sticky; left:0; z-index:1; background:var(--surface); border-top:1px solid var(--line-strong); border-right:1px solid var(--line-strong); padding:.5rem .6rem; display:flex; align-items:center; gap:.5rem; font-size:.88rem; font-weight:500; color:var(--ink)}
.plan-emp[data-unassigned]{color:var(--muted); font-style:italic}
.plan-dot{width:9px; height:9px; border-radius:50%; flex:none}
.plan-cell{border-top:1px solid var(--line-strong); border-left:1px solid var(--line); padding:.3rem; min-height:66px; display:flex; flex-direction:column; gap:.3rem; position:relative; transition:background var(--t)}
.plan-cell.is-today{background:color-mix(in oklab, var(--brand) 4%, var(--surface))}
.plan-cell.drop{background:var(--brand-weak); outline:2px dashed var(--brand); outline-offset:-3px}
.plan-chip{display:flex; flex-direction:column; gap:1px; padding:.3rem .45rem; border-radius:var(--r-sm);
  background:color-mix(in oklab, var(--c) 14%, var(--surface));
  color:color-mix(in oklab, var(--c) 72%, black);
  border:1px solid color-mix(in oklab, var(--c) 28%, var(--surface));
  text-decoration:none; cursor:grab; font-size:.78rem; line-height:1.25}
.plan-chip:hover{background:color-mix(in oklab, var(--c) 20%, var(--surface)); text-decoration:none}
.plan-chip.dragging{opacity:.45}
.plan-chip.saving{opacity:.6; cursor:progress}
.plan-chip.is-done{opacity:.6}
.plan-chip.is-done .pc-title{text-decoration:line-through}
.pc-time{font-weight:600; font-variant-numeric:tabular-nums}
.pc-title{font-weight:500}
.pc-sub{color:var(--muted); font-size:.72rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.plan-add{align-self:flex-start; margin-top:auto; color:var(--muted); font-size:1.05rem; line-height:1; text-decoration:none; opacity:0; transition:opacity var(--t); padding:.05rem .3rem; border-radius:var(--r-sm)}
.plan-cell:hover .plan-add{opacity:1}
.plan-add:hover{background:var(--surface-2); color:var(--brand-ink); text-decoration:none}

/* Dokumente / Foto-Grid (Projekte, Kunden) */
.docgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:.6rem}
.docitem{position:relative}
.docthumb{display:block; aspect-ratio:1; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:var(--surface-2)}
.docthumb img{width:100%; height:100%; object-fit:cover; display:block}
.docthumb.is-file{display:flex; align-items:center; justify-content:center}
.docthumb:hover{border-color:var(--brand)}
.docext{font-size:.72rem; font-weight:600; color:var(--muted); letter-spacing:.03em}
.docdel{position:absolute; top:4px; right:4px; margin:0}
.docdel button{background:rgba(16,24,40,.6); color:#fff; border-radius:50%; width:20px; height:20px; line-height:1; font-size:.9rem; display:flex; align-items:center; justify-content:center; padding:0}
.docdel button:hover{background:var(--err)}

/* Unterschrift-Pad (Tagesbericht) */
.sigwrap{border:1px solid var(--line-strong); border-radius:var(--r); background:#fff; overflow:hidden}
.sigpad{display:block; width:100%; height:190px; touch-action:none; cursor:crosshair; background:#fff}
/* flex-wrap + flex-basis: die Zeile trägt jetzt Mitarbeiter + Rolle + Stunden und muss
   auf schmalen Screens umbrechen können, statt seitlich rauszulaufen. */
.wrow{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.4rem}
.wrow select{flex:1 1 9rem; min-width:0}
.wrow input{max-width:6.5rem}
.wrow .wdel{padding:.4rem .7rem}

/* Projekt-Karte (Ausführungsort) */
.projmap{height:220px; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); z-index:0}
.projmap .leaflet-container{height:100%; font:inherit}
.leaflet-container a{color:var(--brand-ink)}

/* Dropdown-Menüs (Aktionen / + Hinzufügen) */
.dropdown{position:relative; display:inline-block}
.dropdown > summary{list-style:none; cursor:pointer}
.dropdown[open] > summary{margin-bottom:0}   /* globale details[open]-Regel darf das Menü nicht höher machen (kein Verrutschen beim Öffnen) */
.dropdown > summary::-webkit-details-marker{display:none}
.dropdown .menu{position:absolute; right:0; top:calc(100% + 5px); z-index:var(--z-dropdown);
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r); box-shadow:var(--shadow-lg);
  min-width:190px; padding:.35rem; display:flex; flex-direction:column; gap:1px}
.dropdown .menu a, .dropdown .menu .menu-item{display:block; width:100%; text-align:left; padding:.5rem .6rem; border-radius:var(--r-sm);
  color:var(--ink); font-size:.9rem; font-weight:500; background:none; border:0; cursor:pointer; font:inherit; text-decoration:none}
.dropdown .menu a:hover, .dropdown .menu .menu-item:hover{background:var(--surface-2); text-decoration:none}
.dropdown .menu form{margin:0}
.dropdown .menu .menu-item.danger, .dropdown .menu a.danger{color:var(--err)}
.dropdown .menu .menu-item.danger:hover, .dropdown .menu a.danger:hover{background:var(--err-bg)}
.menu-sep{height:1px; background:var(--line); margin:.25rem 0}

/* Projekt-Detailseite */
.projgrid{display:grid; grid-template-columns:340px minmax(0,1fr); gap:1.2rem; align-items:start}
.projinfo, .projmain{display:flex; flex-direction:column; gap:1.2rem; min-width:0}
.metagrid{display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1rem}
.projinfo-panel{position:relative}
.projedit-btn{position:absolute; top:.8rem; right:.8rem}
/* Aufklappbares Panel (Abschnitt mit klickbarer Überschrift) */
.foldpanel > summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:.5rem; padding:0; color:inherit}
.foldpanel > summary::-webkit-details-marker{display:none}
.foldpanel > summary::before{content:"›"; font-size:1.2em; line-height:1; color:var(--muted); transition:transform var(--t)}
.foldpanel[open] > summary::before{transform:rotate(90deg)}
.foldpanel > summary h2{margin:0}
.foldpanel[open] > summary{margin-bottom:1rem}
.meta-lbl{font-size:.74rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:600}
.meta-val{font-weight:600; color:var(--ink)}

/* Projektverlauf-Zeilen */
.verlauf-h{font-size:.85rem; font-weight:600; color:var(--ink); margin:1.1rem 0 .3rem}
.verlauf-h:first-of-type{margin-top:.2rem}
.vrow{display:flex; align-items:center; gap:.7rem; padding:.6rem .35rem; border-top:1px solid var(--line); color:var(--ink); text-decoration:none; transition:background var(--t)}
.vrow:hover{background:var(--surface-2); text-decoration:none}
.vrow-date{font-size:.82rem; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}
.vrow-num{font-weight:600; font-size:.85rem; white-space:nowrap}
.vrow-title{flex:1; min-width:0; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vrow-amt{font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}

/* Termin-Status-Badges */
.badge-geplant{background:var(--info-bg); color:var(--info)}
.badge-erledigt{background:var(--ok-bg); color:var(--ok)}
.badge-abgesagt{background:var(--surface-2); color:var(--muted)}

@media (max-width:900px){ .projgrid{grid-template-columns:1fr} }
/* Schmale Screens: die ganze Verlaufsliste als Block horizontal scrollen (Zeilen bleiben bündig) */
@media (max-width:560px){
  .vlist{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .vlist .vrow{min-width:30rem}
}

@media (max-width:860px){
  .cols{grid-template-columns:1fr}
  .content{padding:1.2rem 1rem}
  .foot{padding:1rem}
}
@media (max-width:640px){
  .foot{flex-direction:column; gap:.3rem}
}
/* Nur Touch-/Mobilgeräte: App-Shell (fixe obere Leiste + untere Tab-Leiste) statt Sidebar.
   Desktop (Maus, hover+fine pointer) behält die Sidebar links – unabhängig von der Fensterbreite.
   Die Shell-Elemente (.mtopbar/.mtabbar) sind global auf display:none und werden hier eingeblendet. */
@media (hover: none) and (pointer: coarse){
  /* :root:not(.view-desktop) = Nutzer hat auf dem Gerät nicht „Desktop-Ansicht" gewählt
     (z. B. Tablet). Der Umschalter sitzt im Konto-Menü, Präferenz je Gerät in localStorage. */
  :root:not(.view-desktop) body.app{grid-template-columns:1fr}
  :root:not(.view-desktop) body.app .sidebar{display:none}
  :root:not(.view-desktop) body.app .mtopbar{display:flex}
  :root:not(.view-desktop) body.app .mtabbar{display:flex}
  :root:not(.view-desktop) body.app .timeclock-band{display:flex}
  :root:not(.view-desktop) .app-main{
    padding-top:calc(3.25rem + env(safe-area-inset-top));
    padding-bottom:calc(3.75rem + env(safe-area-inset-bottom));
  }
  /* Footer auf Mobil zurückhaltender (die Tab-Leiste trägt jetzt die Navigation) */
  :root:not(.view-desktop) .foot{border-top:0; padding-top:.4rem; text-align:center; justify-content:center}
  /* Anker-Sprünge (#foto/#passwort) nicht unter der fixen Topbar verstecken */
  :root:not(.view-desktop) [id]{scroll-margin-top:calc(3.75rem + env(safe-area-inset-top))}
}

/* Schmale Screens: Listen-Tabellen scrollen horizontal in ihrem Panel statt die Seite zu sprengen */
@media (max-width:700px){
  .tbl{display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch}
}

/* Touch-Geräte: größere Tap-Ziele (Icon-Buttons, Menüs, Buttons, Mobil-Nav) */
@media (hover:none) and (pointer:coarse){
  .iconbtn{width:42px; height:42px}
  .dropdown .menu a, .dropdown .menu .menu-item{padding:.7rem .75rem}
  button,.btn,.btn-secondary{padding-top:.7rem; padding-bottom:.7rem}
  .sidebar .mainnav a{padding:.6rem .7rem}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important}
}

/* ===== Dark-Mode (per Umschalter; Standard aus) ===== */
:root[data-theme="dark"]{
  --bg:#0f1216;
  --surface:#171b22;
  --surface-2:#1f242d;
  --surface-3:#272d38;
  --line:#2b313c;
  --line-strong:#3a4150;
  --ink:#e9ebef;
  --ink-2:#c4c9d2;
  --muted:#949bab;
  --brand-ink:#a5b4fc;      /* Links/Akzent-Text – hell genug auf Dunkel */
  --brand-weak:#242a3d;     /* Tint für Selektion/aktive Flächen */
  --ring:rgba(129,140,248,.45);
  --ok:#4ec98a;   --ok-bg:#14271e;
  --err:#f28b8a;  --err-bg:#2c1618;
  --warn:#e2a94f; --warn-bg:#2a2113;
  --info:#84b4f7; --info-bg:#152238;
  --shadow-xs:0 1px 2px rgba(0,0,0,.5);
  --shadow-sm:0 1px 3px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 6px 16px rgba(0,0,0,.55);
  --shadow-lg:0 16px 40px rgba(0,0,0,.6);
}
/* Ausnahmen (Farben, die nicht über Tokens laufen) */
:root[data-theme="dark"] input:hover,
:root[data-theme="dark"] select:hover,
:root[data-theme="dark"] textarea:hover{border-color:#4a5262}
:root[data-theme="dark"] .badge-teilbezahlt{background:#2a2411; color:#f0d675}

/* Theme-Umschalter: Mond/Sonne-Icon je nach aktivem Schema */
.themetoggle .ic-sun{display:none}
:root[data-theme="dark"] .themetoggle .ic-moon{display:none}
:root[data-theme="dark"] .themetoggle .ic-sun{display:inline}

/* ===== Mobile App-Shell (obere Leiste + untere Tab-Leiste) =====
   Standardmäßig ausgeblendet; nur auf Touch-Geräten via Media-Query aktiv (s. oben). */
.mtopbar,.mtabbar,.timeclock-band{display:none}

/* Obere Leiste: Home + Seitentitel + Konto-Kebab */
.mtopbar{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-sticky);
  height:calc(3.25rem + env(safe-area-inset-top)); padding:env(safe-area-inset-top) .35rem 0;
  align-items:center; gap:.25rem;
  background:var(--side-bg); color:#fff; border-bottom:1px solid var(--side-line);
}
.mtopbar-username{flex:1; min-width:0; text-align:right; padding-right:.2rem; color:#fff; font-weight:600; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mtopbar-home{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--r); color:var(--side-ink);
  transition:background var(--t), color var(--t);
}
.mtopbar-home svg{width:26px; height:26px}
.mtopbar-home:hover,.mtopbar-home:active{background:var(--side-hover); color:#fff; text-decoration:none}
.mtopbar-home.active{background:#2a72c9; color:#fff}
.mtopbar-avatar{flex:none}
.mtopbar-avatar > summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:3px; border-radius:50%}
.mtopbar-avatar > summary::-webkit-details-marker{display:none}
.mtopbar-avatar[open] > summary,.mtopbar-avatar > summary:hover{background:var(--side-hover)}
.mtopbar-avatar .avatar{width:32px; height:32px; box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.mtopbar-avatar .avatar-fallback{background:#343b49; color:#fff}
.mtopbar .mtopbar-menu{flex:none}
.mtopbar .mtopbar-menu > summary.iconbtn{
  width:40px; height:40px; border:0; background:none; color:var(--side-ink);
}
.mtopbar .mtopbar-menu[open] > summary.iconbtn,
.mtopbar .mtopbar-menu > summary.iconbtn:hover{background:var(--side-hover); color:#fff}

/* Untere Tab-Leiste */
.mtabbar{
  position:fixed; bottom:0; left:0; right:0; z-index:var(--z-sticky);
  height:calc(3.5rem + env(safe-area-inset-bottom)); padding:0 .25rem env(safe-area-inset-bottom);
  align-items:stretch; justify-content:space-around;
  background:var(--surface); border-top:1px solid var(--line); box-shadow:var(--shadow-md);
}
.mtab{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:.3rem .2rem; border:0; background:none; cursor:pointer; font:inherit;
  color:var(--muted); font-size:.68rem; font-weight:500; text-decoration:none;
  border-radius:var(--r); transition:color var(--t);
}
.mtab svg{width:23px; height:23px; opacity:.9}
.mtab span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.mtab:hover{text-decoration:none}
.mtab.active,.mtab[aria-current="page"]{color:var(--brand-ink); font-weight:600}
.mtab.active svg,.mtab[aria-current="page"] svg{opacity:1}
.mtab-more{flex:1 1 0; display:flex}
.mtab-more > summary{flex:1; list-style:none}
.mtab-more > summary::-webkit-details-marker{display:none}
.mtab-more.active > summary{color:var(--brand-ink)}
.mtab-more.active > summary svg{opacity:1}

/* Menüs der Shell: über den fixen Leisten liegen (z-modal), Icon+Text-Zeilen */
.mtopbar-menu .menu,.mtab-more .menu{z-index:var(--z-modal); min-width:210px}
.mtopbar-menu .menu a,.mtopbar-menu .menu .menu-item,
.mtab-more .menu a{display:flex; align-items:center; gap:.6rem; padding:.62rem .6rem}
.mtopbar-menu .menu a svg,.mtopbar-menu .menu .menu-item svg,
.mtab-more .menu a svg{flex:none; opacity:.8}
.mtopbar-menu .menu a.active,.mtab-more .menu a.active{background:var(--brand-weak); color:var(--brand-ink)}

/* Konto-Kopf im oberen Kebab */
.menu-user{padding:.5rem .6rem !important}
.menu-user .avatar{width:38px; height:38px; flex:none}
.menu-user-meta{display:flex; flex-direction:column; min-width:0; line-height:1.25}
.menu-user-name{font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.menu-user-role{font-size:.78rem; color:var(--muted)}

/* "Mehr"-Sheet: über der Tab-Leiste, volle Breite, scrollbar */
.mtab-more .menu{
  position:fixed; left:.5rem; right:.5rem; top:auto;
  bottom:calc(3.5rem + env(safe-area-inset-bottom) + .5rem);
  min-width:0; max-height:65vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
}

/* ===== Modal / Overlay (natives <dialog>, z. B. Passwort ändern) ===== */
.modal{
  border:0; padding:0; width:min(420px, calc(100vw - 2rem));
  border-radius:14px; background:var(--surface); color:var(--ink); box-shadow:var(--shadow-lg);
}
.modal::backdrop{background:rgba(16,24,40,.45)}
.modal-card{padding:1.1rem 1.15rem 1.2rem}
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.modal-head h2{margin:0; font-size:1.15rem}
.modal-x{font-size:1.5rem; line-height:1}
.modal-actions{display:flex; justify-content:flex-end; gap:.5rem; margin-top:1rem}
.modal-msg{padding:.6rem .7rem; border-radius:var(--r); font-size:.88rem; font-weight:500}
.modal-msg.is-error{background:var(--err-bg); color:var(--err)}
.modal-msg.is-ok{background:var(--ok-bg); color:var(--ok)}
.modal[open]{animation:modalin .16s ease-out}
@keyframes modalin{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* Hinweis „nicht zugeordnete Angebote" auf der Projektseite */
.assign-notice{background:var(--info-bg); border:1px solid var(--info); border-radius:var(--r-lg); padding:.85rem 1rem; margin-bottom:1.1rem; color:var(--ink)}
.assign-notice h3{margin:0; font-size:.98rem}
.assign-notice .aq-row{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .8rem; padding:.45rem 0; border-top:1px solid var(--line)}
.assign-notice .aq-row:first-of-type{border-top:0}
.assign-notice .aq-main{flex:1 1 260px; min-width:0}
.assign-notice .aq-row form{margin:0}

/* Warn-Markierung „ohne Projekt" in der Angebots-Übersicht */
.badge-noproj{background:var(--warn-bg); color:var(--warn)}
.badge-noproj:hover{text-decoration:none; filter:brightness(.97)}

/* ============================ Live-Zeiterfassung ============================ */
/* Persistentes „läuft"-Band (nur mobil, s. Media-Query oben) */
.timeclock-band{align-items:center; gap:.6rem; margin:0 0 1rem; padding:.6rem .85rem;
  background:var(--brand); color:#fff; border-radius:var(--r); text-decoration:none;
  box-shadow:var(--shadow-xs)}
.timeclock-band:hover,.timeclock-band:active{background:var(--brand-d); text-decoration:none; color:#fff}
.timeclock-band.is-paused{background:var(--ink-2)}
.timeclock-band .tcb-dot{flex:none; width:9px; height:9px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.7); animation:tcpulse 1.6s infinite}
.timeclock-band.is-paused .tcb-dot{animation:none; opacity:.7}
.timeclock-band .tcb-main{font-weight:600; white-space:nowrap}
.timeclock-band .tcb-time{font-variant-numeric:tabular-nums}
.timeclock-band .tcb-name{flex:1; min-width:0; text-align:right; opacity:.9; font-size:.85rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.timeclock-band .tcb-go{flex:none; opacity:.8; font-size:1.1rem}
@keyframes tcpulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

/* Lauf-Indikator am „Zeit"-Tab */
.mtab-ico{position:relative; display:inline-flex}
.mtab-live{position:absolute; top:-2px; right:-4px; width:8px; height:8px; border-radius:50%;
  background:var(--muted); box-shadow:0 0 0 2px var(--surface)}
.mtab-live.run{background:#22c55e; animation:tcpulse 1.6s infinite}

/* Timer-Karte */
.tc-sub{font-size:.8rem; color:var(--muted); letter-spacing:.02em}
.tc-title{font-size:1.25rem; font-weight:700; color:var(--ink); margin:.15rem 0 1rem}
.tc-card{background:var(--brand); border-radius:var(--r-lg); padding:1.4rem 1.2rem; text-align:center}
.tc-card.is-paused{background:var(--ink-2)}
.tc-state{color:#fff; opacity:.9; font-size:.9rem; font-weight:500}
.tc-clock{color:#fff; font-size:3rem; font-weight:800; letter-spacing:1px; margin:.4rem 0 1.1rem;
  font-variant-numeric:tabular-nums; line-height:1}
.tc-actions{display:flex; gap:.7rem}
.tc-actions form{flex:1; margin:0}
.tc-btn{width:100%; border:0; border-radius:var(--r-pill); padding:.9rem; font-size:1rem; font-weight:600; cursor:pointer}
.tc-btn-ghost{background:rgba(255,255,255,.22); color:#fff}
.tc-btn-ghost:hover{background:rgba(255,255,255,.3)}
.tc-btn-light{background:#fff; color:var(--brand-dd); font-weight:700}
.tc-btn-light:hover{background:#eef0ff}

/* Vorschlag / Buchung */
.tc-summary{background:var(--surface-2); border-radius:var(--r); padding:1rem 1.1rem}
.tc-row{display:flex; justify-content:space-between; align-items:baseline; color:var(--ink)}
.tc-row span{color:var(--muted); font-size:.9rem}
.tc-row strong{font-variant-numeric:tabular-nums}
.tc-row-hl{margin-top:.6rem; padding-top:.7rem; border-top:1px solid var(--line)}
.tc-row-hl strong{color:var(--brand); font-size:1.4rem; font-weight:800}

/* Baustellen-Auswahl */
.tc-list{display:flex; flex-direction:column; gap:.6rem}
.tc-pick{display:flex; align-items:center; gap:.7rem; width:100%; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r); padding:.9rem 1rem; font:inherit; color:var(--ink)}
.tc-pick:hover{background:var(--surface-2)}
.tc-pick-ico{flex:none; color:var(--brand); display:inline-flex}
.tc-pick-txt{flex:1; min-width:0}
.tc-pick-name{display:block; font-weight:600; font-size:1rem}
.tc-pick-sub{display:block; color:var(--muted); font-size:.82rem}
.tc-pick-go{flex:none; color:var(--muted); font-size:1.2rem}

/* ===================== Sidebar einklappbar (nur Desktop) =====================
   Zustand liegt als .nav-collapsed auf <html> (früh im <head> gesetzt = kein Flackern).
   Es genügt, --side zu überschreiben – das Grid von body.app zieht automatisch mit. */
html.nav-collapsed{--side:64px}

/* Logo: ausgeklappt der Schriftzug, eingeklappt die kompakte VM-Bildmarke */
.brand-mark{display:none}
.nav-collapsed .sidebar .brand-logo{display:none}
.nav-collapsed .sidebar .brand-mark{display:block; margin:0 auto; background:#fff; padding:4px; border-radius:var(--r); box-shadow:0 1px 2px rgba(0,0,0,.25)}
.nav-collapsed .sidebar{padding-left:.4rem; padding-right:.4rem}

/* Navigation: nur Icons, zentriert */
.nav-collapsed .sidebar .mainnav a{justify-content:center; gap:0; padding:.55rem .3rem}
.nav-collapsed .sidebar .mainnav a > span{display:none}
.nav-collapsed .sidebar .navcaret{display:none}

/* Untermenüs eingeklappt als Flyout rechts neben dem Icon */
.nav-collapsed .sidebar .navgroup{position:relative}
.nav-collapsed .sidebar .navgroup[open] > .navkids{
  position:absolute; left:calc(100% + 8px); top:0; min-width:200px; margin:0; z-index:var(--z-dropdown);
  background:var(--side-bg); border:1px solid var(--side-line); border-radius:var(--r);
  padding:.35rem; box-shadow:var(--shadow-lg);
}
.nav-collapsed .sidebar .navgroup[open] > .navkids .navchild{justify-content:flex-start; gap:.65rem; padding:.5rem .55rem; font-size:.9rem}
.nav-collapsed .sidebar .navgroup[open] > .navkids .navchild > span{display:inline}

/* Userbox: Avatar oben, Abmelden darunter – Name/Rolle aus */
.nav-collapsed .sidebar .userbox{flex-direction:column; gap:.5rem}
.nav-collapsed .sidebar .userbox-meta{display:none}
.nav-collapsed .sidebar .userbox .userbox-menu{flex:none}
.nav-collapsed .sidebar .userbox-id{justify-content:center; padding:.2rem}
.nav-collapsed .sidebar .userbox-menu .menu{left:0; right:auto; bottom:calc(100% + 6px)}

/* Ein-/Ausklapp-Button */
.navtoggle{display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; flex:none;
  background:transparent; border:0; color:var(--side-ink); cursor:pointer;
  padding:.45rem; border-radius:var(--r); font-size:.85rem; font-weight:500}
.navtoggle:hover{background:var(--side-hover); color:#fff}
.navtoggle svg{flex:none; transition:transform var(--t)}
.nav-collapsed .navtoggle span{display:none}
.nav-collapsed .navtoggle svg{transform:rotate(180deg)}
/* Eingeklappt darf das Flyout aus der Leiste herausragen (sonst clippt overflow:hidden es weg).
   Die Icon-Liste ist kompakt genug, dass sie ohne Scrollen passt. */
.nav-collapsed .sidebar{overflow:visible}
.nav-collapsed .sidebar .mainnav{overflow:visible}

/* --- Eingeklappt: Label-Tooltip beim Hovern (für Punkte ohne Unterpunkte) --- */
.nav-collapsed .sidebar .mainnav > a{position:relative}
.nav-collapsed .sidebar .mainnav > a > span{
  position:absolute; left:calc(100% + 8px); top:50%; transform:translateY(-50%);
  background:var(--side-bg); border:1px solid var(--side-line); color:#fff;
  padding:.4rem .65rem; border-radius:var(--r); white-space:nowrap; font-size:.85rem; font-weight:500;
  box-shadow:var(--shadow-lg); z-index:var(--z-dropdown); pointer-events:none;
}
.nav-collapsed .sidebar .mainnav > a:hover > span{display:block}

/* --- Flyout-Kopfzeile: zeigt den Namen des Hauptpunkts (nur eingeklappt) --- */
.sidebar .mainnav .navflyhead{display:none}
.nav-collapsed .sidebar .navgroup[open] > .navkids > .navflyhead{
  display:flex; justify-content:flex-start; align-items:center;
  padding:.45rem .55rem .5rem; margin:0 0 .25rem; border-radius:0;
  border-bottom:1px solid var(--side-line); color:#fff; font-weight:600; font-size:.9rem;
}
.nav-collapsed .sidebar .navgroup[open] > .navkids > .navflyhead:hover{background:transparent; text-decoration:underline}

/* --- Hover-Brücke: überbrückt die 8px-Lücke, damit das Flyout beim Rüberfahren offen bleibt --- */
.nav-collapsed .sidebar .navgroup[open] > .navkids::before{
  content:""; position:absolute; left:-8px; top:0; bottom:0; width:8px;
}

/* .content nutzt seit 2026-07-17 in JEDEM Zustand die volle Breite (vorher nur eingeklappt) –
   Formulare begrenzen sich über .formgrid/.grid2 selbst, brauchen also keinen äußeren Deckel. */

/* Eingeklappt: Icon-Liste muss bei kleinen Fenstern scrollen (sonst überlagern sich die Icons).
   Da overflow-y:auto zwangsläufig auch x beschneidet, liegen Flyout und Tooltip auf position:fixed
   ausserhalb des Scroll-Containers – die Koordinaten setzt das JS beim Hovern. */
.nav-collapsed .sidebar{overflow:hidden}
.nav-collapsed .sidebar .mainnav{overflow-y:auto; overflow-x:hidden}
.nav-collapsed .sidebar .mainnav > a > span{position:fixed; left:auto; top:auto}
.nav-collapsed .sidebar .navgroup[open] > .navkids{position:fixed; left:auto; top:auto}
/* .sidebar ist position:sticky und bildet einen eigenen Stacking-Context – das z-index des
   Flyouts wirkt daher nur innerhalb. Damit Flyout/Tooltip über dem Inhalt liegen, muss die
   Sidebar selbst angehoben werden (bleibt unter Modals: --z-modal 1030 > --z-sticky 1010). */
.nav-collapsed .sidebar{z-index:var(--z-sticky)}

/* --- Umschalter „Desktop-/Mobile Ansicht" (Konto-Menü) ---
   Nur auf Touch-Geräten sinnvoll: am PC mit Maus greift die mobile Shell ohnehin nie.
   Selektoren bewusst spezifisch genug, um .sidebar .userbox-menu .menu .menu-item zu schlagen. */
.sidebar .userbox-menu .menu .menu-item.viewtoggle,
.mtopbar .menu .menu-item.viewtoggle{display:none}
/* .can-desktop setzt das <head>-Script nur, wenn die KÜRZERE Bildschirmseite >= 700px ist.
   So trennt es Tablet von Handy – unabhängig von der Ausrichtung (iPhone quer ist zwar breit,
   aber nur ~430px hoch). Auf dem Handy gibt es den Umschalter damit gar nicht erst. */
@media (hover:none) and (pointer:coarse){
  :root.can-desktop .sidebar .userbox-menu .menu .menu-item.viewtoggle,
  :root.can-desktop .mtopbar .menu .menu-item.viewtoggle{display:flex}
}
/* Icon + Beschriftung spiegeln, wohin geschaltet wird */
.viewtoggle .ic-mobile,.viewtoggle .lbl-mobile{display:none}
:root.view-desktop .viewtoggle .ic-desktop,
:root.view-desktop .viewtoggle .lbl-desktop{display:none}
:root.view-desktop .viewtoggle .ic-mobile{display:inline}
:root.view-desktop .viewtoggle .lbl-mobile{display:inline}

/* Handy: Listen-Tabellen horizontal scrollen lassen – auch im QUERFORMAT.
   Die vorhandene Regel hängt an (max-width:700px) und greift dort nicht, weil ein iPhone quer
   ~932px breit ist. .is-phone kommt aus dem <head>-Script (kürzere Bildschirmseite < 700px)
   und ist damit drehungsunabhängig. */
:root.is-phone .tbl{display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch}
/* Zeiterfassung: Auswahl Tagesbericht/Rapport nach dem Stoppen */
.tc-choose{display:flex; gap:.7rem}
.tc-choose .btn{flex:1; justify-content:center; gap:.45rem; padding:.9rem; text-align:center}
.tc-choose .btn svg{width:18px; height:18px; flex:none}

/* Breiter Dialog (z. B. Abrechnungs-Auswahl) – der Standard-Modal ist mit 420px zu schmal.
   Die Postenliste scrollt in sich, damit der Dialog bei vielen Zeilen nicht aus dem Bild wächst. */
.modal-wide{width:min(860px, calc(100vw - 2rem))}
.billsel-scroll{max-height:min(52vh, 420px); overflow-y:auto; overflow-x:auto; border:1px solid var(--line); border-radius:var(--r)}
.billsel{margin:0}
.billsel th{position:sticky; top:0; background:var(--surface-2); z-index:1}
.billsel td,.billsel th{white-space:normal}
.billsel input[type=checkbox]{width:18px; height:18px; cursor:pointer; accent-color:var(--brand)}

/* Farbwähler in den Einstellungen */
.colorpick{display:flex; align-items:center; gap:.6rem; margin-top:.35rem}
.colorpick input[type=color]{width:56px; height:38px; padding:2px; border:1px solid var(--line-strong); border-radius:var(--r); background:var(--surface); cursor:pointer}
.colorpick .btn-secondary{padding:.4rem .7rem; font-size:.82rem}