/* core.css — Basis: Variablen, Layout, Topbar/Sidebar, Buttons, Inputs */
/* Bricolage Grotesque = Display (Wortmarke/Titel, sparsam). DM Sans = alles andere
   (Body + Daten – KEINE Mono-Schrift). Geladene Gewichte = tatsächlich genutzte:
   Sans 400/500/600/700 (700 war vorher Faux-Bold), 300 raus (ungenutzt). */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;700&family=DM+Sans:wght@400;500;600;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Kühle, kontraststarke Palette (Asana-nah) */
  --bg:#f6f7f9;--surface:#ffffff;--surface2:#eef1f4;--border:#dde1e6;--border2:#c2c8d0;
  --text:#0f1419;--text2:#586170;--text3:#8a929e;
  /* Akzent = warmes Honig/Bernstein (Tageslicht-Identität, kein Grün).
     --accent: helle Fläche/Button-BG (mit dunklem Text); --accent-deep: dunkles
     Honig für Akzent-TEXT auf Hell + gefüllte Tags mit weißem Text (AA-Kontrast). */
  --accent:#d99413;--accent-light:#fbeccb;--accent-deep:#8a5512;
  --warn:#dc2626;--warn-light:#fde4e4;
  --prefer:#1d6fd0;--prefer-light:#dbeafe;
  --radius:10px;--radius-sm:6px;
  --font-display:'Bricolage Grotesque','DM Sans',sans-serif;   /* nur Wortmarke + Titel */
  --font-data:'DM Sans',sans-serif;   /* „Daten" (Zeiten/KW/Stunden): bewusst kein Mono */
  /* Dunkle linke Navigation (Asana-Stil) – Topbar + Spalte 1 = --nav-bg, Spalte 2 = --nav-panel */
  --nav-bg:#26282c;--nav-panel:#303339;
  --nav-text:#c9ccd3;--nav-muted:#878d97;
  --nav-hover:rgba(255,255,255,.07);--nav-active:rgba(255,255,255,.13);
  --nav-accent:#f0b860;
  --rail-w:74px;   /* Breite Spalte 1 = Toggle-Zone in der Topbar */
}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100dvh;font-size:14px;line-height:1.5}
/* Quality-Floor: sichtbarer Tastatur-Fokus (vorher unsichtbar) + Bewegung respektieren */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
:focus:not(:focus-visible){outline:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
}
/* Touch: kein grauer iOS-Tap-Highlight; stattdessen kurzes Active-Feedback (kein Hover) */
button,a,label,[data-action]{-webkit-tap-highlight-color:transparent}
.btn:active{filter:brightness(.94)}

/* ══ TOPBAR ══ */
.topbar{position:sticky;top:0;height:52px;background:var(--nav-bg);display:flex;align-items:center;z-index:300}
/* Toggle sitzt in einer Zone so breit wie Spalte 1 → mittig über den Modul-Icons */
.topbar-rail{width:var(--rail-w);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.sb-toggle{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:none;background:none;color:#fff;font-size:26px;line-height:1;cursor:pointer;border-radius:var(--radius-sm);transition:background .15s}
.sb-toggle:hover{background:var(--nav-hover)}
/* Logo bündig mit den Icons aus Spalte 2: Schienenbreite + Spalte-2-Padding (10) + Eintrag-Padding (10) */
.topbar-logo{display:flex;align-items:center;height:100%;padding-left:20px}
.topbar-logo-img{height:33px;width:auto;display:block}
.topbar-user{margin-left:auto;display:flex;align-items:center;gap:10px;padding-right:20px}
.topbar-user .tu-name{color:#fff;font-size:13px;font-weight:500;opacity:.95}
.topbar-user .tu-btn{background:rgba(255,255,255,.12);color:#fff;border:none;border-radius:var(--radius-sm);font-family:inherit;font-size:12px;font-weight:500;padding:5px 10px;cursor:pointer;transition:background .15s}
.topbar-user .tu-btn:hover{background:rgba(255,255,255,.22)}
.topbar-user .tu-avatar{width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.55);color:#fff;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;transition:transform .12s,box-shadow .12s}
.topbar-user .tu-avatar:hover{transform:scale(1.08);box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.topbar-user .tu-cafe{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:var(--radius-sm);font-family:inherit;font-size:12px;font-weight:500;padding:5px 8px;cursor:pointer;max-width:180px}
.topbar-user .tu-cafe option{color:var(--text)}

/* ══ SHELL · SIDEBAR · CONTENT ══ */
.shell{display:flex;align-items:stretch}
.sidebar{flex-shrink:0;background:var(--nav-bg);position:sticky;top:52px;height:calc(100dvh - 52px);display:flex;flex-direction:row;overflow:hidden}
.nav-backdrop{display:none}   /* nur mobil aktiv (s. Media-Query unten) */
body.sidebar-collapsed .sidebar{display:none}   /* ganze Navigation (beide Spalten) aus */
.content{flex:1;min-width:0}

/* Spalte 1: Modul-Schiene (Icon + Label) – gleiche Farbe wie Topbar */
.sb-col1{width:var(--rail-w);flex-shrink:0;overflow-y:auto;overflow-x:hidden;padding:10px 6px;display:flex;flex-direction:column;gap:4px;background:var(--nav-bg)}
.sb-mod{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;padding:9px 4px;border:none;background:none;font-family:inherit;font-size:10.5px;font-weight:500;color:var(--nav-text);cursor:pointer;border-radius:var(--radius-sm);transition:background .12s,color .12s;text-align:center;line-height:1.15}
.sb-mod:hover{background:var(--nav-hover);color:#fff}
.sb-mod.active{background:var(--nav-active);color:#fff;font-weight:600}
.sb-mod-ico{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;color:var(--nav-muted)}
.sb-mod:hover .sb-mod-ico,.sb-mod.active .sb-mod-ico{color:#fff}
.sb-mod-ico svg{width:22px;height:22px;display:block}
.sb-mod-label{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Spalte 2: Detail-Panel – etwas helleres Dunkel, oben links abgerundet (~5px) */
.sb-col2{width:204px;flex-shrink:0;overflow-y:auto;overflow-x:hidden;padding:10px;display:flex;flex-direction:column;gap:1px;background:var(--nav-panel);border-top-left-radius:5px}
.sb-section{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--nav-muted);padding:6px 10px 4px}
.sb-divider{height:1px;background:rgba(255,255,255,.1);margin:8px 6px}

/* Asana-Eintrag (Spalte 2): Icon + Label, kompakt, getönter Aktiv-Zustand */
.sb-item{position:relative;display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:7px 11px;border:none;background:none;font-family:inherit;font-size:13.5px;font-weight:500;color:var(--nav-text);cursor:pointer;border-radius:var(--radius-sm);transition:background .12s,color .12s}
.sb-item:hover{background:var(--nav-hover);color:#fff}
.sb-item.active{background:var(--nav-active);color:#fff;font-weight:600}
/* App-weit einheitlicher Aktiv-Zustand wie in der KLR-Schiene: linker Akzent-Balken */
.sb-item.active::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:3px;border-radius:0 2px 2px 0;background:var(--nav-accent)}
.sb-ico-wrap{flex:0 0 18px;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--nav-muted)}
.sb-item:hover .sb-ico-wrap,.sb-item.active .sb-ico-wrap{color:#fff}
.sb-ico{width:18px;height:18px;display:block}
.sb-item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Menü-Bearbeiten (Admin): Zahnrad unten in der Modul-Schiene + Edit-Modus */
.sb-gear{margin-top:auto;align-self:center;width:36px;height:36px;border:none;background:none;color:var(--nav-muted);font-size:19px;line-height:1;cursor:pointer;border-radius:var(--radius-sm);transition:color .12s,background .12s}
.sb-gear:hover{color:#fff;background:var(--nav-hover)}
.sb-gear.active{color:#fff;background:var(--accent-deep)}
/* Versions-Badge unten in der Schiene: schiebt sich per margin-top:auto ans Ende (auch ohne Zahnrad darüber) */
.sb-version{margin-top:auto;align-self:center;border:none;background:none;color:var(--nav-muted);font-size:10px;font-weight:500;letter-spacing:.3px;cursor:pointer;padding:4px 2px;border-radius:var(--radius-sm);transition:color .12s}
.sb-version:hover{color:#fff;text-decoration:underline}
/* Changelog-Modal (nutzt .shift-modal als Box) */
.cl-modal{max-width:440px;width:92vw;max-height:80vh;display:flex;flex-direction:column}
.cl-modal-head{font-size:16px;font-weight:600;margin-bottom:10px}
.cl-body{overflow-y:auto;flex:1}
.cl-entry{padding:8px 0;border-top:1px solid var(--border)}
.cl-entry:first-child{border-top:none}
.cl-head{display:flex;align-items:baseline;gap:8px}
.cl-ver{font-weight:600}
.cl-date{font-size:12px;color:var(--text3)}
.cl-title{font-size:13px;margin:2px 0}
.cl-list{margin:4px 0 0;padding-left:18px;font-size:13px}
.cl-foot{margin-top:12px;text-align:right}
.nav-editing .nav-draggable{cursor:move;transition:margin .14s ease}
.nav-editing .sb-item.nav-draggable,.nav-editing .sb-mod.nav-draggable{outline:1px dashed rgba(255,255,255,.14);outline-offset:-2px}
.nav-dragging{opacity:.4}
.nav-editing-label{outline:1px solid var(--accent);background:rgba(255,255,255,.12);border-radius:3px;padding:0 3px;cursor:text;white-space:normal}
/* Live-Gap: Item (und alles darunter) gleitet auf, um die Ziel-Lücke zu zeigen */
.nav-gap-before{margin-top:34px}
.nav-gap-after{margin-bottom:34px}

/* PAGES */
.page{display:none;padding:24px;max-width:1280px;margin:0 auto}
.page.active{display:block}

/* CARDS */
/* Modul-Inhalte ohne Rahmen: flach auf der Seite, nur Abstand zwischen Sektionen */
.card{background:transparent;border:none;border-radius:0;padding:0;margin-bottom:24px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;border:1px solid var(--border2);background:var(--surface);color:var(--text);transition:all .15s;white-space:nowrap}
.btn:hover{background:var(--surface2)}
.btn-primary{background:var(--text);color:#fff;border-color:var(--text)}
.btn-primary:hover{background:#2a313b}
.btn-accent{background:var(--accent);color:#241c12;border-color:var(--accent)}
.btn-accent:hover{background:#c4830f}
.btn-danger{color:var(--warn);border-color:#f6c5c5}
.btn-danger:hover{background:var(--warn-light)}
.btn-sm{padding:4px 10px;font-size:12px}
.btn-icon{padding:6px 9px}

/* INPUTS */
input[type=text],input[type=time],input[type=number],select{padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:inherit;font-size:13px;background:var(--surface);color:var(--text);outline:none;transition:border-color .15s}
input:focus,select:focus{border-color:var(--text)}
/* Farb-Swatch-Button (ersetzt native <input type=color>) + Pastell-Popup */
.color-dot{width:28px;height:28px;border-radius:50%;border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.color-dot:hover{border-color:var(--text3)}
.color-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:6px}
.color-swatch{aspect-ratio:1;border-radius:50%;border:1px solid rgba(0,0,0,.15);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#1a1916;transition:transform .1s}
.color-swatch:not(.is-taken):hover{transform:scale(1.12);border-color:var(--text2)}
.color-swatch.is-current{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--text)}
.color-swatch.is-taken{opacity:.28;cursor:not-allowed}
input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:var(--border);outline:none;cursor:pointer;flex:1}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--text);cursor:pointer;border:2px solid var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.2)}

/* PERSONS */
/* ══ MITGLIEDER – Roster-Liste (Asana-Stil, passend zur Designsprache) ══ */
.members-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.members-title{font-family:var(--font-display);font-size:21px;font-weight:700;letter-spacing:-.3px;display:flex;align-items:center;gap:10px}
.members-count{font-size:12.5px;font-weight:600;color:var(--accent-deep);background:var(--accent-light);border-radius:20px;padding:2px 10px;font-family:var(--font-data)}
.members-sub{font-size:13px;color:var(--text2);margin-top:3px}

.members-list{display:flex;flex-direction:column}
.members-row{display:grid;grid-template-columns:minmax(120px,1.1fr) minmax(150px,1.4fr) 74px 44px minmax(200px,1.4fr);align-items:center;gap:12px;padding:9px 12px;border-bottom:1px solid var(--border)}
/* „Neu"-Zeile am Ende + deaktivierte Zeilen dezent absetzen */
.members-row-new{background:var(--surface2)}
.members-row-new .members-new-hint{font-size:12px;color:var(--text3)}
.members-avatar-add{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:400;color:var(--text3);border:1px dashed var(--border2)}
.members-row-edit .m-inp{width:100%;padding:5px 8px;font-size:13px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-family:inherit}
.members-row-edit .m-inp:focus{border-color:var(--accent);outline:none}
.members-c-name .m-name{font-weight:600}
.members-row .m-center{display:flex;justify-content:center}
.members-c-role{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-start}
.cafe-tag{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600;background:var(--surface2);color:var(--text2);border:1px solid var(--border)}
.m-acts{display:flex;gap:4px;flex-wrap:wrap}
.m-act{font-size:11px;padding:4px 8px;border:1px solid var(--border2);background:var(--surface);color:var(--text2);border-radius:var(--radius-sm);cursor:pointer;font-family:inherit;white-space:nowrap}
.m-act:hover{background:var(--surface2)}
.m-act:disabled{opacity:.4;cursor:not-allowed}
.m-act-danger{color:var(--warn);border-color:#f0cfc8}
.m-act-danger:hover{background:var(--warn-light)}
.members-linkbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;background:var(--accent-light);border-bottom:1px solid var(--border)}
.members-linkbar .lb-label{font-size:12px;color:var(--text2);font-weight:500}
.members-linkbar .lb-input{flex:1;min-width:200px;font-size:12px;font-family:var(--font-data);padding:5px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.members-row:last-child{border-bottom:none}
.members-row-head{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);border-bottom-color:var(--border2);padding-top:0;padding-bottom:7px}
.members-row:not(.members-row-head){border-radius:var(--radius-sm);cursor:default;transition:background .12s}
.members-row:not(.members-row-head):hover{background:var(--surface2)}
.members-c-name{display:flex;align-items:center;gap:11px;min-width:0}
.members-avatar{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.members-name{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.members-c-hours{font-family:var(--font-data);font-size:13px;font-weight:600;color:var(--text)}
/* Rollen-Tag (read-only, aus OIDC): Admin = Akzent, Team = neutral */
.role-tag{display:inline-block;padding:2px 10px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.3px}
.role-admin{background:var(--accent-light);color:var(--accent-deep);border:1px solid #f0d9a8}
.role-team{background:var(--surface2);color:var(--text2);border:1px solid var(--border)}
.role-appadmin{background:var(--accent-deep,#5b3a1a);color:#fff;border:1px solid var(--accent-deep,#5b3a1a)}
.m-act-on{background:var(--accent-light);color:var(--accent-deep);border-color:#f0d9a8}
/* Café-Verwaltung (App-Admin) */
.cafes-list{display:flex;flex-direction:column;gap:12px}
.cafe-card{display:grid;grid-template-columns:1fr 1fr 1fr auto auto;gap:12px;align-items:end;
  padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.cafe-f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--text2)}
.cafe-f-chk{flex-direction:row;align-items:center;gap:6px;white-space:nowrap}
@media(max-width:720px){.cafe-card{grid-template-columns:1fr}}
/* Kalkulation */
.kalk-table{display:flex;flex-direction:column;gap:6px}
.kalk-row{display:grid;grid-template-columns:1fr 90px 90px 1fr auto;gap:10px;align-items:center}
.kalk-ingrow{grid-template-columns:1fr 120px 90px 90px 1fr auto}   /* Zutaten mit Art-Spalte (Zutat/Handelsware) */
.kalk-prow{grid-template-columns:110px 1fr 1fr 1fr auto}
.kalk-head{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;padding:0 2px}
.kalk-add{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px;padding-top:10px;border-top:1px dashed var(--border)}
.kalk-add .m-inp{flex:1;min-width:120px}
.kalk-price{font-variant-numeric:tabular-nums;color:var(--text2)}
.kalk-noprice{color:var(--warn)}
.kalk-articles{display:flex;flex-direction:column;gap:14px}
.kalk-card{padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.kalk-card-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.kalk-aname{flex:1;min-width:160px;font-weight:600}
.kalk-f{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2);white-space:nowrap}
.kalk-f .m-inp{width:90px}
.kalk-f .kalk-fnum{width:64px}
.kalk-fchk{gap:4px}
.kalk-semrow{display:grid;grid-template-columns:1.4fr 140px 140px 110px 130px auto auto;gap:10px;align-items:center}
.kalk-semrow.kalk-add{display:grid;margin-top:10px;padding-top:10px;border-top:1px dashed var(--border)}
.kalk-semrow .m-inp{width:auto}
/* Kassenimport-Wizard */
.ki-head{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-bottom:12px}
.ki-steps{display:flex;gap:6px}
.ki-step{font-size:12px;padding:3px 10px;border-radius:999px;background:var(--surface2);color:var(--text3)}
.ki-step-on{background:var(--accent);color:#fff;font-weight:600}
.ki-file-info{font-size:12px;color:var(--text2);margin-left:auto}
.ki-panel{display:flex;flex-direction:column;gap:6px}
.ki-map{display:grid;grid-template-columns:180px 1fr;gap:8px 12px;align-items:center;max-width:520px}
.ki-map-row{display:contents}
.ki-map-lbl{font-size:12px;font-weight:600;color:var(--text2)}
.ki-sample{overflow:auto;border:1px solid var(--border);border-radius:8px;margin-top:4px}
.ki-sample table{border-collapse:collapse;font-size:12px;white-space:nowrap}
.ki-sample th,.ki-sample td{padding:4px 8px;border-bottom:1px solid var(--border);text-align:left}
.ki-sample th{background:var(--surface2);font-weight:600}
.ki-btns{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.ki-summary{font-weight:600;padding:8px 0}
.ki-fee{font-weight:500;padding:2px 0 8px;color:var(--muted)}
.ki-unmapped{border:1px solid var(--border);border-radius:8px;padding:10px;margin:8px 0;display:flex;flex-direction:column;gap:8px}
.ki-unmap-row{display:grid;grid-template-columns:1fr 130px 1fr;gap:8px;align-items:center}
.ki-pk{font-weight:600}
.ki-pline{grid-template-columns:1.6fr 70px 100px 1.4fr}
.ki-imp{grid-template-columns:1.6fr 150px 70px auto auto}
/* Artikel: Gruppen-Filter + auf-/zuklappbare Kaskade */
.kalk-artbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}
.kalk-artsearch{flex:1;min-width:180px;max-width:340px}
.kalk-agroup{margin-top:10px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.kalk-agroup>summary{cursor:pointer;padding:9px 12px;font-weight:600;background:var(--surface);list-style:none;user-select:none}
.kalk-agroup>summary::-webkit-details-marker{display:none}
.kalk-agroup>summary::before{content:'▸';display:inline-block;margin-right:8px;color:var(--text3);transition:transform .12s}
.kalk-agroup[open]>summary::before{transform:rotate(90deg)}
.kalk-agroup-n{color:var(--text3);font-weight:500}
/* Testmodus „Ansicht als Usergruppe" – auffälliger Dauer-Banner */
.viewas-banner{position:fixed;left:0;right:0;bottom:0;z-index:1000;display:flex;align-items:center;justify-content:center;gap:12px;
  padding:8px 14px;background:#7c3aed;color:#fff;font-weight:600;box-shadow:0 -2px 12px rgba(0,0,0,.25)}
.viewas-banner .btn{background:#fff;color:#7c3aed;border:none}
body.viewas-on{padding-bottom:44px}
.wk-gloy{float:right;display:inline-flex;align-items:center;gap:5px;font-weight:500;font-size:.85em;color:var(--text2)}
.wk-gloy input{margin:0;cursor:pointer}
.kalk-agroup-body{display:flex;flex-direction:column;gap:10px;padding:10px}
/* Zuordnungs-Editor (bestehender Import) */
.ki-edit-modal{max-width:560px;width:94vw;max-height:82vh;display:flex;flex-direction:column}
.ki-edit-body{overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:8px}
.ki-crow{grid-template-columns:1.4fr 1.2fr 90px 90px 1.1fr auto}
.ki-krow{grid-template-columns:1.4fr 1.4fr 1fr 1.2fr auto}
.kk-kinds{margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}
.kk-kinds>summary{cursor:pointer;font-weight:700;font-size:14px;margin-bottom:8px}
.kk-kinds .kk-form{margin-top:8px}
.ku-row{grid-template-columns:1.4fr 1fr 90px}
.kl-row{grid-template-columns:150px 130px 70px 1fr auto}
.ka-row{grid-template-columns:1.3fr 60px 100px 100px 100px 90px 90px 110px 1.1fr;font-size:13px}
.ka-q{font-size:11px;color:var(--text3)}
.kp-row{grid-template-columns:1.5fr 80px 90px 90px 80px 100px auto}
.eq-ct{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}
.eq-ct .eq-name{flex:1 1 160px;min-width:140px}
.kalk-inv2-row{grid-template-columns:110px 1.4fr 90px 1fr auto}
.kg-row{grid-template-columns:1.4fr 80px 120px 120px 120px}
.kk-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px dashed var(--border)}
.kk-form .kalk-sub{flex-basis:100%;margin:0 0 4px}
.kk-meta{font-size:11px;color:var(--text3)}
.ka-zusch{margin:10px 0;padding:8px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;font-size:13px;color:var(--text2)}
.ka-zusch-t{font-weight:700;color:var(--text)}
.ka-zusch-k{margin-top:6px}
.pug-box.empf{border-color:#1f7a4d}
.kalk-sub{font-weight:700;margin:16px 0 6px;font-size:14px}
.ka-exp{display:inline-flex;gap:6px;margin-left:auto}
@media(max-width:720px){.kg-row{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.ki-map{grid-template-columns:1fr}.ki-unmap-row,.ki-pline,.ki-imp{grid-template-columns:1fr 1fr}
  .ki-crow,.ku-row,.kl-row,.ka-row,.ki-krow{grid-template-columns:1fr 1fr}}
.kalk-figs{display:flex;flex-wrap:wrap;gap:20px;margin:12px 0;font-size:13px;color:var(--text2)}
.kalk-pos{color:#1f7a4d}
.kalk-neg{color:var(--warn)}
.kalk-warn{color:#9a6a12}
.kalk-recipe{border-top:1px solid var(--border);padding-top:10px}
.kalk-recipe-lbl{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.kalk-rline{display:grid;grid-template-columns:1fr 120px auto auto;gap:8px;align-items:center;margin-bottom:6px}
.kalk-rline .rl-cost{font-variant-numeric:tabular-nums;color:var(--text2);min-width:64px;text-align:right}
.kalk-recipe-btns{display:flex;gap:8px;margin-top:8px}
.kalk-inv-row{grid-template-columns:110px 1fr 1.4fr 1.4fr auto}
.kalk-invedit{grid-template-columns:1fr 1fr 120px auto}
.kalk-invedit .inv-val{font-variant-numeric:tabular-nums;color:var(--text2);text-align:right}
.kalk-inv-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:8px}
.kalk-inv-total{font-size:13px;color:var(--text2)}
.kalk-set-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.kalk-muted{color:var(--text3)}
/* Kalkulationsschema in der Artikelkarte */
.kalk-schema{margin:10px 0;max-width:340px;font-size:13px}
.kalk-srow{display:flex;justify-content:space-between;gap:16px;padding:2px 0;color:var(--text2);font-variant-numeric:tabular-nums}
.kalk-srow-b{font-weight:700;color:var(--text);border-top:1px solid var(--border);margin-top:2px;padding-top:4px}
/* Kostenarten-Katalog */
.kalk-ct{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}
.kalk-ct .m-inp{flex:0 1 auto;min-width:90px}
.kalk-ct #ct-new-name,.kalk-ct [id^=ct-name-]{flex:1 1 140px}
.kalk-ck{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text2);white-space:nowrap}
.kalk-ct-det{flex-basis:100%;margin-top:4px;font-size:12px}
.kalk-ct-det summary{cursor:pointer;color:var(--text2)}
.kalk-ck-list{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0}
/* Einstellungen-Grid + Übersicht-KPIs */
.kalk-set-grid{display:flex;flex-wrap:wrap;gap:14px;align-items:end}
.kalk-cards{display:flex;flex-wrap:wrap;gap:14px}
.kalk-kpi{flex:1 1 150px;min-width:150px;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.kalk-kpi-v{font-size:22px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.kalk-kpi-l{font-size:12px;color:var(--text3);margin-top:2px}
@media(max-width:720px){.kalk-row,.kalk-prow,.kalk-rline,.kalk-inv-row,.kalk-invedit{grid-template-columns:1fr 1fr}
  .kalk-semrow,.kalk-semrow.kalk-add{grid-template-columns:1fr 1fr}}
.members-unit{font-weight:400;color:var(--text3);font-size:11px}
.members-nolimit{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;color:var(--text3)}
.audit-list{display:flex;flex-direction:column}
.audit-row{display:grid;grid-template-columns:130px 200px 1fr;gap:12px;padding:7px 12px;border-bottom:1px solid var(--border);font-size:13px;align-items:baseline}
.audit-head{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);border-bottom-color:var(--border2)}
.audit-ts{font-family:var(--font-data);font-size:12px;color:var(--text3);white-space:nowrap}
.audit-who{display:flex;flex-direction:column;min-width:0}
.audit-email{font-size:11px;color:var(--text3);overflow:hidden;text-overflow:ellipsis}
.members-c-actions{display:flex;gap:2px;justify-content:flex-end;opacity:0;transition:opacity .12s}
.members-row:hover .members-c-actions{opacity:1}
.members-act{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:none;color:var(--text3);cursor:pointer;border-radius:var(--radius-sm);transition:background .12s,color .12s}
.members-act:hover{background:var(--surface);color:var(--text)}
.members-act svg{width:15px;height:15px}
.members-act-danger:hover{background:var(--warn-light);color:var(--warn)}
.members-empty{padding:28px 12px;text-align:center;color:var(--text3);font-size:13px;border:1px dashed var(--border2);border-radius:var(--radius);margin-top:4px}
.add-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.section-title{font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:-.2px}
.section-sub{font-size:13px;color:var(--text2);margin-top:2px}

/* RULES */
.rule-row{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:6px;font-size:13px}
.rule-row.rule-avoid{background:var(--warn-light);border-color:#f6c5c5}
.rule-row.rule-prefer{background:var(--prefer-light);border-color:#b6d2f5}

/* WEEK SELECTOR */
.week-selector{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.week-label{font-size:13px;font-weight:600;font-family:var(--font-data);padding:5px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);min-width:140px;text-align:center}

/* ═══════════════════════════════════════════════════════════
   MOBILE (Phase 0+1: Fundament + Shell/Navigation) · ≤640px Hochformat
   ═══════════════════════════════════════════════════════════ */
@media (max-width:640px){
  /* Fundament */
  .page{padding:14px;padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  /* iOS: Form-Controls ≥16px → kein Auto-Zoom beim Fokus. !important, weil
     Inline-/Klassen-Größen (12–13px) sonst gewinnen und das Zoomen bliebe. */
  input,select,textarea{font-size:16px!important}
  .topbar{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  .topbar-user .tu-name{display:none}            /* Name aus, Avatar bleibt */

  /* Sidebar → Off-Canvas-Drawer (von links), per ☰-Toggle / Backdrop */
  .sidebar{position:fixed;top:52px;left:0;z-index:400;width:min(84vw,300px);
    height:calc(100dvh - 52px);transform:translateX(-100%);
    transition:transform .22s ease;box-shadow:0 14px 44px rgba(0,0,0,.45);will-change:transform}
  body.sidebar-collapsed .sidebar{display:flex}  /* Desktop-Hide auf Mobil neutralisieren */
  body.nav-open .sidebar{transform:translateX(0)}
  .sb-col2{width:auto;flex:1}                     /* Detail-Panel füllt den Drawer */
  .nav-backdrop{display:block;position:fixed;inset:52px 0 0;z-index:399;
    background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .22s}
  body.nav-open .nav-backdrop{opacity:1;pointer-events:auto}

  /* ── Inhalte (Phase 3+4): stapeln, Tabellen → Karten ── */
  /* Config: Kalender | Seitenpanel untereinander */
  .cfg-split{grid-template-columns:1fr!important}
  /* Seiten-Köpfe (Titel + Aktionen) umbrechen statt quetschen */
  .members-head{flex-direction:column;align-items:stretch;gap:10px}
  .section-header{flex-wrap:wrap;gap:8px}
  .members-head input[type=text],.members-head input[type=search]{width:100%!important}

  /* Mitglieder-Tabelle → Karten (Kopfzeile aus, Felder gestapelt + Mini-Labels) */
  .members-row-head{display:none}
  .members-row{grid-template-columns:1fr!important;gap:8px;border:1px solid var(--border);
    border-radius:var(--radius-sm);padding:12px;margin-bottom:8px;background:var(--surface)}
  .members-row:not(.members-row-head):hover{background:var(--surface)}
  .members-row-edit>span{min-width:0}
  .members-row-edit>span[data-label]::before{content:attr(data-label);display:block;font-size:10px;
    font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--text3);margin-bottom:3px}
  .members-c-role{justify-content:flex-start}
  .m-acts{width:100%}

  /* Protokoll-Tabelle → Karten */
  .audit-head{display:none}
  .audit-row{grid-template-columns:1fr!important;gap:3px;border:1px solid var(--border);
    border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:6px}

  /* ── Touch-Targets: kleine Buttons fingerfreundlich (≈≥40px) ── */
  .btn{min-height:40px}
  .btn-sm{min-height:38px;padding:8px 12px;font-size:13px}
  .btn-icon{min-height:40px;min-width:40px;justify-content:center}
  .m-act{min-height:36px;padding:7px 12px;font-size:12px}
  .members-act{width:36px;height:36px}
  .az-toggle button{padding:10px 14px}
  .sb-item{padding:10px 12px}                 /* Drawer-Einträge */
  .sb-mod{padding:11px 4px}
  .topbar-user .tu-avatar{width:36px;height:36px}
}