/* ── 01-base.css ───────────────────────────── */
/* =============================================================================
   01-base.css — Farb-Tokens, Light/Dark-Themes, Keyframes, natives Touch-Verhalten

   Teil von style.css (nach Bereichen aufgeteilt). Die Dateien werden in
   nummerierter Reihenfolge geladen — die Kaskade hängt daran, also nicht
   umsortieren. Eingebunden in index.html.
   ============================================================================= */

/* =============================================================================
   EMERING CREATIONS CRM — STYLESHEET
   =============================================================================
   INHALTSVERZEICHNIS (Suche nach dem Sektions-Namen, z. B. "── Kundenbuch")

   GRUNDLAGEN
     :root Tokens (Brand-Rot, Danger-Rot, Graustufen, Glass, Schatten)
     Keyframes · Native Touch Feel (Tap-Delay, Press-States, Momentum)

   CHROME
     Topbar (Logo, Jahresring, Suche) · Nav-Bar · Buttons (btn-sm/red/ghost/danger)

   VIEWS (Reihenfolge wie im Code)
     Login · Projekt-Board & Monatskarten · Notes-/Projekt-Detail-Modal
     Settings · Kundenbuch (kb-/cl-/cd-) · Client-Page (Pinned)
     Finanzen (fin-) · Dashboard (dash-) · Rechnungen/Angebote/Verträge (inv-)
     Print-Styles

   MOBILE  (~Z.1490: Hamburger, FAB, Overlay, View-Anpassungen ≤768px)
   BANK    (~Z.2280: Kontoauszug, Monats-Gruppen)
   BOTTOM-NAV (~Z.2355: mobile Tab-Bar + Mehr-Sheet)
   KALENDER  (~Z.2650: vcal- Monat/Woche/Events/Tooltip)
   TO-DOS    (~Z.3400: todo-)

   NACHTRÄGE (am Dateiende, bewusst spät in der Cascade)
     Touch-Targets (mobile) · Doc-Switcher · Gewinn-Chart · Kontoauszug-Monate
     Kalender-Schnellanlegen · ACCESSIBILITY (reduced-motion, focus-visible)

   HINWEIS: Reihenfolge nicht umsortieren — spätere Regeln überschreiben
   frühere bei gleicher Spezifität (Mobile-Overrides bauen darauf).
   ============================================================================= */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
/* Leere Werte treten zurück, statt so laut zu sein wie echte Zahlen.
   An jede Zahl anhängbar: <div class="stat-val is-zero">0</div> */
.is-zero{color:var(--dim)!important;}
/* Hide login screen immediately if a session token exists (prevents flash on refresh) */
html.has-token body.login-open #loginScreen{display:none!important;}
html.has-token body.login-open #appWrap{display:block!important;}
html.has-token body.login-open{position:static;overflow:auto;}
:root{
  --red:#D0111B;--rd:#a80e16;            /* Brand: CTAs, Akzente, aktive Zustände */
  --danger:#ef4444;--danger-dim:#dc2626;  /* Destruktiv: Löschen, Warnungen */
  --danger-bright:#f87171;               /* Destruktiv: Hover/Icons auf Dunkel */
  /* ── Statusfarben ──────────────────────────────────────────────────────────
     Regel: --red gehört der MARKE (Logo, Navigation, Primäraktionen).
     Bedeutung läuft ausschließlich über die drei Tokens hier. Eine Geldzahl
     ist neutral (--num), solange sie kein Problem beschreibt — sonst liest
     sich der beste Umsatz des Jahres wie ein Fehler. */
  --pos:#22c55e;                          /* bezahlt, Einnahmen, erledigt */
  --warn:#f59e0b;                         /* offen, zurückzulegen, wartet */
  --neg:#e5484d;                          /* überfällig, Ausgaben, Problem */
  --num:var(--wh);                        /* neutrale Zahl ohne Wertung */
  /* Farbschleier des Seitenhintergrunds. Liegt als feste Ebene in body::before;
     Leisten am oberen Rand zeigen denselben Ausschnitt (.bg-glow-slice). */
  --bg-glow:radial-gradient(circle at 18% 0%,rgba(241,22,34,.13),transparent 30rem),radial-gradient(circle at 88% 22%,rgba(var(--ink),.055),transparent 25rem),radial-gradient(circle at 62% 86%,rgba(241,22,34,.07),transparent 28rem);
  --ink:255,255,255;                      /* Vordergrund-Kanal: weiß im Dark-, dunkel im Light-Mode */
  --on-accent:#fff;                       /* Text auf roten/farbigen Flächen — bleibt immer weiß */
  --srf0:9,9,15;--srf1:18,18,28;--srf2:26,26,38; /* Flächen-Kanäle: Chrome / Modals / Popovers */
  --blk:#09090f;--d1:#0f0f17;--d2:#15151f;--d3:#1e1e2a;
  /* Grauabstufungen. Die Alphawerte sind gegen WCAG AA (4.5:1) auf dem
     dunkelsten Untergrund (#09090f) gerechnet — .42 lag mit 4.04:1 knapp
     darunter, .46 erreicht 4.81:1. Der Hellmodus braucht deutlich höhere
     Werte und überschreibt sie weiter unten. */
  --wh:#fff;--wh3:rgba(var(--ink),.46);--wh4:rgba(var(--ink),.55);--wh5:rgba(var(--ink),.64);--wh6:rgba(var(--ink),.74);
  --dim:rgba(var(--ink),.46);             /* bewusst zurückgenommen, aber noch AA-lesbar */
  --wh08:rgba(var(--ink),.07);--wh05:rgba(var(--ink),.04);
  --glass-bg:rgba(var(--ink),.042);
  --glass-border:rgba(var(--ink),.09);
  --glass-blur:blur(24px) saturate(160%);
  --glass-chrome-bg:linear-gradient(180deg,rgba(var(--ink),.14),rgba(var(--ink),.052)),linear-gradient(120deg,rgba(208,17,27,.075),rgba(64,68,96,.09) 48%,rgba(var(--ink),.035)),rgba(var(--srf0),.66);
  --glass-panel-bg:linear-gradient(180deg,rgba(var(--ink),.08),rgba(var(--ink),.032)),rgba(var(--srf0),.56);
  --glass-highlight:inset 0 1px 0 rgba(var(--ink),.16);
  --glass-chrome-shadow:inset 0 1px 0 rgba(var(--ink),.18),0 16px 48px rgba(0,0,0,.44),0 5px 18px rgba(0,0,0,.28);
  --shadow-card:0 4px 24px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3);
  --shadow-modal:0 24px 80px rgba(0,0,0,.7),0 4px 16px rgba(0,0,0,.4);
  --ease-ios:cubic-bezier(.32,.72,0,1);        /* Apples Sheet-/Navigation-Kurve */
  --ease-spring:cubic-bezier(.34,1.3,.64,1);   /* Sanfter Spring für Micro-Interactions */
}

/* ── Light Theme (Apple-Palette) ─────────────────────────────────────────────
   Aktiviert über <html data-theme="light">. Flippt nur die Kanäle/Tokens —
   alle Komponenten-Regeln bleiben unangetastet. */
html[data-theme="light"]{
  --ink:29,29,35;                          /* Text/Linien: near-black (Apple #1d1d1f) */
  --srf0:250,250,252;--srf1:255,255,255;--srf2:255,255,255;
  --blk:#f5f5f7;--d1:#ececef;--d2:#e8e8ec;--d3:#dfdfe4;
  --wh:#1d1d1f;
  --danger-bright:#dc2626;                 /* Hover-Rot dunkler für hellen Grund */
  --pos:#15803d;--warn:#b45309;--neg:#c11a22; /* Statusfarben abgedunkelt für hellen Grund */
  /* Dunkle Schrift auf Weiß deckt viel schlechter als helle auf Schwarz: mit den
     Dunkelmodus-Werten lag --wh4 hier bei 3,70:1 und damit unter AA. Ab .62
     werden 4,5:1 erreicht — die Abstufung untereinander bleibt erhalten. */
  --wh3:rgba(var(--ink),.62);--wh4:rgba(var(--ink),.70);--wh5:rgba(var(--ink),.78);--wh6:rgba(var(--ink),.85);
  --dim:rgba(var(--ink),.62);
  --glass-bg:rgba(255,255,255,.62);
  --glass-border:rgba(0,0,0,.08);
  --glass-chrome-bg:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.66)),linear-gradient(120deg,rgba(208,17,27,.035),rgba(120,124,150,.05) 48%,rgba(255,255,255,.4)),rgba(250,250,252,.72);
  --glass-panel-bg:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.6)),rgba(250,250,252,.66);
  --glass-highlight:inset 0 1px 0 rgba(255,255,255,.85);
  --glass-chrome-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 16px 48px rgba(17,24,39,.1),0 5px 18px rgba(17,24,39,.06);
  --shadow-card:0 4px 24px rgba(17,24,39,.07),0 1px 2px rgba(17,24,39,.05);
  --shadow-modal:0 24px 80px rgba(17,24,39,.2),0 4px 16px rgba(17,24,39,.1);
}
/* Muss --bg-glow überschreiben, nicht body: Der Verlauf liegt seit dem
   Scroll-Umbau in body::before. Stünde er weiter auf body, lägen im hellen
   Modus beide Fassungen übereinander und der Rotstich wäre zu kräftig. */
html[data-theme="light"]{
  --bg-glow:radial-gradient(circle at 18% 0%,rgba(241,22,34,.05),transparent 30rem),radial-gradient(circle at 88% 22%,rgba(120,124,150,.06),transparent 25rem),radial-gradient(circle at 62% 86%,rgba(241,22,34,.03),transparent 28rem);
}
html[data-theme="light"] .glass-card{
  border:1px solid rgba(0,0,0,.08);
  background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(255,255,255,.66)),rgba(250,250,252,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 16px 48px rgba(17,24,39,.08);
}
/* Theme-Toggle: Mond im Dark-, Sonne im Light-Mode */
.btn-theme-toggle .theme-icon-sun{display:none;}
html[data-theme="light"] .btn-theme-toggle .theme-icon-sun{display:block;}
html[data-theme="light"] .btn-theme-toggle .theme-icon-moon{display:none;}
/* Sanfter Übergang beim Umschalten */
body,.topbar,.stat-card,.month-section,.glass-card{transition:background-color .25s ease,color .25s ease,border-color .25s ease;}
.glass-card{border:1px solid rgba(var(--ink),.13);background:linear-gradient(145deg,rgba(var(--ink),.105),rgba(var(--ink),.035)),rgba(var(--srf1),.6);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);box-shadow:inset 0 1px 0 rgba(var(--ink),.1),0 16px 48px rgba(0,0,0,.36);}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* ── New animation keyframes ────────────────────────────────────────────────── */
@keyframes btmBounce{0%{transform:scale(1)}30%{transform:scale(.82)}60%{transform:scale(1.18)}80%{transform:scale(.96)}100%{transform:scale(1)}}
@keyframes pillPop{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
@keyframes fabPulse{0%,100%{box-shadow:0 4px 20px rgba(208,17,27,.5),0 0 0 0 rgba(208,17,27,.25)}60%{box-shadow:0 4px 20px rgba(208,17,27,.5),0 0 0 10px rgba(208,17,27,0)}}
@keyframes rowSlideIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
@keyframes cardPop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes sheetItemIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
html{max-width:100vw;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior:none;}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",ui-sans-serif,system-ui,Inter,"Segoe UI",sans-serif;background:var(--blk);color:var(--wh);min-height:600px;max-width:100vw;overflow-x:hidden;overscroll-behavior:none;touch-action:manipulation;}

/* Die Farbverläufe des Hintergrunds liegen in einer eigenen, festen Ebene
   statt als background-attachment:fixed auf dem body. Sichtbar ist dasselbe,
   aber der Browser kann die Ebene einmal zeichnen und beim Scrollen nur
   verschieben. Als body-Hintergrund musste iOS bei jedem einzelnen Frame drei
   große Verläufe neu rechnen — das war das Ruckeln beim Scrollen.

   Die Verläufe stehen in --bg-glow (Light-Fassung weiter oben im Theme-Block),
   damit undurchsichtige Leisten am oberen Rand denselben Ausschnitt zeigen
   können — siehe .topbar und .stats-strip. Ohne das klebt hinter der Notch ein
   flacher schwarzer Streifen, während daneben der Verlauf liegt. */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:var(--bg-glow);
}

/* Undurchsichtige Leisten, die oben am Fensterrand kleben (.topbar als
   Notch-Platzhalter, .stats-strip), decken diese Ebene ab und zeigen sonst
   einen flachen Streifen daneben. Sie holen sich denselben Ausschnitt zurück:
   Fläche auf Fenstergröße rechnen und um den eigenen Abstand zum oberen
   Fensterrand nach oben schieben. Rezept — die Zahl ist der eigene top-Wert:

     background-color:var(--blk);
     background-image:var(--bg-glow);
     background-size:100vw 100vh;
     background-position:0 calc(-1 * <top>);

   Ausgeschrieben statt geteilt, weil beide Leisten ihren Hintergrund später in
   der Kaskade als Kurzschreibweise setzen und eine gemeinsame Regel hier
   ohnehin überschrieben würde. */
@supports (min-height: 100dvh){
  body{min-height:100dvh;}
}

/* =============================================================================
   NATIVE TOUCH FEEL — makes the PWA behave like a native iOS app
   ============================================================================= */

/* No 300ms tap delay on any interactive element.
   touch-action:manipulation disables double-tap zoom — single taps fire instantly. */
a,button,label,select,
[data-action],[data-add-view],
.cl-item,.t-row,.todo-row,.dash-item,
.vcal-cell,.dcal-cell,.month-header,
.year-btn,.nav-tab,.btm-nav-btn,.btm-more-item,
.dp-item,.gs-item,.vcal-event,.dcal-event,
.inv-list-row,.cd-project-row,.vcal-label-chip,
.dash-kpi-card,.stat-card,.vcal-nav,.vcal-heute-btn,
.color-swatch,.cal-nav,.cal-day,.inv-item-del,
.todo-check,.todo-delete,.todo-done-toggle,
.notes-tool,.vcal-clear-sel,.inv-catalog-edit,
.btm-more-app,.btm-more-pinned-app {
  touch-action: manipulation;
}

/* Instant press-down, spring release.
   Setting transition-duration:0s on :active means the press registers
   immediately; the element's own transition handles the spring-back on release. */
button:active,
.cl-item:active,
.t-row:active,
.month-header:active,
.dash-item:active,
.todo-row:active,
.year-btn:active,
.vcal-nav:active,
.vcal-cell:active,
.btm-more-item:active,
.inv-list-row:active,
.cd-project-row:active,
.dash-kpi-card:active,
.stat-card:active {
  transition-duration: 0s !important;
}

/* Momentum scrolling (rubber-band feel) on all overflow containers */
.dashboard,.inv-view,.vcal-event-list,.todo-list,
.notes-editor,.pd-notes-editor,.pd-main,.pd-sidebar,
#clientList,.inv-editor-body,.dcal-events-list,
.global-search-results,.dp-items,.settings-modal,
.modal,.notes-modal {
  -webkit-overflow-scrolling: touch;
}

/* Contain overscroll inside modals — stops the page behind bouncing */
.pd-modal,.inv-editor-modal,.modal,.notes-modal,
.settings-modal,.todo-modal,.confirm-modal,
.btm-more-sheet,#clientDetail {
  overscroll-behavior-y: contain;
}

/* No accidental text selection when tapping UI chrome */
.topbar,.nav-bar,.btm-nav,.btm-more-sheet,
button,.nav-tab,.btm-nav-btn,.btm-more-item,
.cl-item,.t-row,.month-header,.todo-row,
.dash-kpi-card,.dash-item,.stat-card,
.vcal-hdr,.vcal-cell,.todo-hdr,
.cd-header,.pd-header,.inv-list-head,.inv-list-row {
  -webkit-user-select: none;
  user-select: none;
}

/* Instant press-down class applied via touchstart in ui.js */
.ui-pressing {
  transform: scale(0.96) !important;
  opacity: 0.82 !important;
  transition: transform 0s !important, opacity 0s !important;
}
@media (max-width: 768px) {
  html{scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom));}
  /* Engere Radien fürs schmale Fenster — sonst füllt ein 30rem-Verlauf den
     halben Bildschirm. Setzt --bg-glow um, nicht body{background-image}:
     Der Verlauf liegt in body::before, eine Regel auf body käme zusätzlich
     obendrauf statt zu ersetzen. */
  :root{
    --bg-glow:
      radial-gradient(circle at 18% 0%,rgba(241,22,34,.12),transparent 22rem),
      radial-gradient(circle at 85% 15%,rgba(var(--ink),.04),transparent 18rem),
      radial-gradient(circle at 55% 90%,rgba(241,22,34,.06),transparent 20rem);
  }
  html[data-theme="light"]{
    --bg-glow:
      radial-gradient(circle at 18% 0%,rgba(241,22,34,.05),transparent 22rem),
      radial-gradient(circle at 85% 15%,rgba(120,124,150,.06),transparent 18rem),
      radial-gradient(circle at 55% 90%,rgba(241,22,34,.03),transparent 20rem);
  }
  body{min-height:100dvh;}
  button,input,textarea,select{-webkit-touch-callout:none;}
}
.topbar{
  background:linear-gradient(180deg,rgba(var(--ink),.085),rgba(var(--ink),.025)),rgba(var(--srf0),.72);
  backdrop-filter:blur(34px) saturate(210%);
  -webkit-backdrop-filter:blur(34px) saturate(210%);
  border-bottom:1px solid rgba(var(--ink),.09);
  padding:0 2rem;height:64px;
  display:flex;align-items:center;gap:1.25rem;
  position:sticky;top:0;z-index:500;
  box-shadow:inset 0 1px 0 rgba(var(--ink),.12),0 8px 30px rgba(0,0,0,.28);
}
.topbar-left{display:flex;align-items:center;gap:2rem;min-width:225px;}
.logo-pill{display:flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--red);}
.logo-pill span{width:7px;height:7px;background:var(--red);border-radius:50%;display:inline-block;}
.topbar-logo{height:30px;width:auto;display:block;}
.topbar-year-progress{
  display:grid;grid-template-columns:30px minmax(92px,1fr);align-items:center;gap:.62rem;
  min-width:148px;margin-left:auto;padding:.42rem .8rem .44rem .6rem;
  border:1px solid rgba(var(--ink),.11);border-radius:16px;
  background:linear-gradient(180deg,rgba(var(--ink),.09),rgba(var(--ink),.032));
  box-shadow:inset 0 1px 0 rgba(var(--ink),.1);
}
.typ-ring-wrap{position:relative;width:30px;height:30px;flex-shrink:0;}
.typ-svg{width:30px;height:30px;transform:rotate(-90deg);}
.typ-track{stroke:rgba(var(--ink),.12);stroke-width:2.5;}
.typ-arc{
  stroke:var(--red);stroke-width:2.5;stroke-linecap:round;
  transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1);
  filter:drop-shadow(0 0 5px rgba(208,17,27,.35));
}
.typ-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.typ-center span:first-child{font-size:.7rem;font-weight:700;color:var(--wh);font-variant-numeric:tabular-nums;line-height:1;}
.typ-sym{display:none;}
.typ-info{display:grid;grid-template-columns:1fr auto;gap:2px .5rem;align-items:end;min-width:0;}
.typ-info-label{display:block;grid-column:1/-1;font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(var(--ink),.55);line-height:1;}
.typ-info-year{font-size:.72rem;font-weight:700;color:rgba(var(--ink),.78);line-height:1;font-variant-numeric:tabular-nums;}
.typ-days{font-size:.68rem;color:rgba(var(--ink),.42);line-height:1;white-space:nowrap;}
.typ-info::after{content:'';grid-column:1/-1;height:3px;border-radius:4px;background:linear-gradient(90deg,var(--red) calc(var(--year-progress, 0) * 1%),rgba(var(--ink),.1) 0);box-shadow:0 0 10px rgba(208,17,27,.12);margin-top:3px;}
.topbar-right{display:flex;align-items:center;gap:1rem;margin-left:auto;}

/* ── 02-chrome.css ───────────────────────────── */
/* =============================================================================
   02-chrome.css — Topbar, Suche, große Titel, Buttons, Projektkarten, Board

   Teil von style.css (nach Bereichen aufgeteilt). Die Dateien werden in
   nummerierter Reihenfolge geladen — die Kaskade hängt daran, also nicht
   umsortieren. Eingebunden in index.html.
   ============================================================================= */

/* ── Global search ─────────────────────────────────────────────────────────── */
.topbar-search-wrap{position:relative;display:flex;align-items:center;background:linear-gradient(180deg,rgba(var(--ink),.11),rgba(var(--ink),.045));border:1px solid rgba(var(--ink),.12);border-radius:980px;padding:.32rem .48rem .32rem .95rem;gap:.55rem;transition:border-color .15s,background .15s,box-shadow .15s;min-width:250px;box-shadow:inset 0 1px 0 rgba(var(--ink),.12);}
.topbar-search-wrap:focus-within{border-color:rgba(var(--ink),.26);background:linear-gradient(180deg,rgba(var(--ink),.15),rgba(var(--ink),.065));box-shadow:inset 0 1px 0 rgba(var(--ink),.16),0 8px 22px rgba(0,0,0,.18);}
.topbar-search-icon{color:var(--wh4);flex-shrink:0;}
.topbar-search-input{background:none;border:none;outline:none;font-size:.8rem;color:var(--wh);font-family:inherit;flex:1;min-width:0;}
.topbar-search-input::placeholder{color:var(--wh3);}
.topbar-command-key{height:26px;min-width:42px;display:inline-flex;align-items:center;justify-content:center;gap:1px;border:1px solid rgba(var(--ink),.12);border-radius:980px;background:rgba(0,0,0,.14);color:rgba(var(--ink),.52);font-family:inherit;font-size:.72rem;font-weight:800;cursor:pointer;padding:0 .55rem;transition:color .15s,border-color .15s,background .15s;}
.topbar-command-key:hover{color:var(--wh);border-color:rgba(var(--ink),.24);background:rgba(var(--ink),.08);}
.topbar-command-key span{line-height:1;}
.topbar-search-clear{background:none;border:none;color:var(--wh4);cursor:pointer;font-size:.75rem;padding:0;line-height:1;display:flex;align-items:center;transition:color .15s;}
.topbar-search-clear:hover{color:var(--wh);}
.global-search-results{position:fixed;top:62px;left:50%;transform:translateX(-50%);width:min(680px,calc(100vw - 2rem));background:var(--glass-chrome-bg);border:1px solid rgba(var(--ink),.14);border-radius:20px;box-shadow:var(--glass-chrome-shadow);z-index:900;max-height:70vh;overflow-y:auto;overscroll-behavior:contain;animation:slideDown .15s ease;backdrop-filter:blur(40px) saturate(210%);-webkit-backdrop-filter:blur(40px) saturate(210%);}
body.cmdk-open{position:fixed;left:0;right:0;width:100%;overflow:hidden;}
body.scroll-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden;}
.cmdk-bg{position:fixed;inset:0;z-index:5000;display:none;align-items:flex-start;justify-content:center;background:rgba(0,0,0,.62);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);padding:70px 1rem 1rem;overscroll-behavior:none;touch-action:none;}
.cmdk-bg.show{display:flex;animation:fadeIn .14s ease;}
.cmdk-panel{width:min(680px,100%);max-height:min(620px,calc(100vh - 96px));display:flex;flex-direction:column;overflow:hidden;background:rgba(var(--srf1),.92);border:1px solid rgba(var(--ink),.16);border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.72),inset 0 1px 0 rgba(var(--ink),.08);touch-action:auto;}
.cmdk-search{display:flex;align-items:center;gap:.72rem;padding:.72rem .85rem;border-bottom:1px solid rgba(var(--ink),.08);background:rgba(var(--ink),.045);color:var(--wh5);}
.cmdk-search input{flex:1;min-width:0;background:rgba(0,0,0,.14);border:1px solid rgba(var(--ink),.08);border-radius:12px;outline:none;color:var(--wh);font-family:inherit;font-size:.9rem;height:38px;padding:0 .72rem;}
.cmdk-search input:focus{border-color:rgba(var(--ink),.2);background:rgba(0,0,0,.2);}
.cmdk-search input::placeholder{color:rgba(var(--ink),.55);}
.cmdk-search kbd{border:1px solid rgba(var(--ink),.14);border-radius:7px;background:rgba(var(--ink),.07);color:rgba(var(--ink),.52);font-size:.72rem;font-family:inherit;padding:.18rem .42rem;}
.cmdk-results{overflow-y:auto;overscroll-behavior:contain;padding:.45rem;display:flex;flex-direction:column;gap:.18rem;max-height:calc(100vh - 178px);}
.cmdk-item{width:100%;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:.75rem;border:none;border-radius:12px;background:transparent;color:var(--wh);font-family:inherit;text-align:left;padding:.62rem .7rem;cursor:pointer;min-height:52px;}
.cmdk-item:hover,.cmdk-item.active{background:rgba(var(--ink),.075);}
.cmdk-item-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(var(--ink),.1);font-size:.72rem;font-weight:800;color:var(--wh);flex-shrink:0;}
.cmdk-item-main{min-width:0;}
.cmdk-item-main strong,.cmdk-item-main small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0;}
.cmdk-item-main strong{font-size:.86rem;font-weight:700;}
.cmdk-item-main small{font-size:.7rem;color:rgba(var(--ink),.44);margin-top:.16rem;}
.cmdk-item-type{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:rgba(var(--ink),.32);border:1px solid rgba(var(--ink),.1);border-radius:980px;padding:.18rem .45rem;}
.cmdk-empty{padding:2rem;text-align:center;color:rgba(var(--ink),.42);font-size:.85rem;}
.gs-section-label{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--wh4);padding:.75rem 1.1rem .35rem;}
.gs-item{display:flex;align-items:center;gap:.85rem;padding:.7rem 1.1rem;cursor:pointer;transition:background .12s;}
.gs-item:hover{background:rgba(var(--ink),.05);}
.gs-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.gs-avatar{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;color:var(--on-accent);flex-shrink:0;}
.gs-inv-icon{width:26px;height:26px;display:flex;align-items:center;justify-content:center;color:var(--wh4);flex-shrink:0;}
.gs-item-main{flex:1;min-width:0;}
.gs-item-name{font-size:.84rem;font-weight:500;color:var(--wh);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gs-item-meta{font-size:.72rem;color:var(--wh4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.1rem;}
.gs-item-tag{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--wh4);background:rgba(var(--ink),.07);padding:.2rem .6rem;border-radius:980px;white-space:nowrap;flex-shrink:0;}
.gs-empty{padding:2rem 1.2rem;text-align:center;color:var(--wh4);font-size:.85rem;}
.btn-sm{font-size:.72rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:.44rem 1rem;border-radius:980px;border:none;cursor:pointer;transition:all .25s var(--ease-spring);font-family:inherit;}
.btn-sm:active{transform:scale(.94)!important;transition-duration:.08s;}
/* Filled — nur für die Hauptaktion (iOS: prominent) */
.btn-red{background:linear-gradient(135deg,#ff4a52,#f11622);color:var(--on-accent);box-shadow:0 6px 20px rgba(241,22,34,.22);}
.btn-red:hover{background:linear-gradient(135deg,#ff5a62,#e0101e);transform:translateY(-1px);box-shadow:0 10px 26px rgba(241,22,34,.34);}
/* Plain/Gray — Sekundäraktionen als dezente iOS-Toolbar-Buttons (kein Rahmen) */
.btn-ghost{background:rgba(var(--ink),.06);color:var(--wh5);border:none;}
.btn-ghost:hover{color:var(--wh);background:rgba(var(--ink),.11);}
/* Tinted — farbige Schrift auf 12%-Tint (iOS-Zwischenstufe) */
.btn-tinted{background:rgba(229,72,77,.13);color:#e5484d;border:none;}
.btn-tinted:hover{background:rgba(229,72,77,.2);}
html[data-theme="light"] .btn-tinted{color:#c11a22;}
.nav-bar{
  background:var(--glass-chrome-bg);
  backdrop-filter:blur(34px) saturate(210%);
  -webkit-backdrop-filter:blur(34px) saturate(210%);
  border:1px solid rgba(var(--ink),.145);
  border-radius:22px;
  padding:4px 8px;
  display:flex;align-items:center;overflow-x:auto;
  position:sticky;top:66px;z-index:490;
  margin:10px 1rem 0;
  animation:slideDown .22s cubic-bezier(.25,.46,.45,.94);
  box-shadow:var(--glass-chrome-shadow),0 0 0 1px rgba(208,17,27,.025);
  scrollbar-width:none;
}
.nav-bar::-webkit-scrollbar{display:none;}
/* Sliding glass pill — same concept as bottom tab bar */
.nav-pill{
  position:absolute;
  top:7px;bottom:7px;
  left:0;width:0;
  border-radius:17px;
  background:linear-gradient(180deg,rgba(var(--ink),.24),rgba(var(--ink),.08)),linear-gradient(135deg,rgba(208,17,27,.18),rgba(var(--ink),0) 58%);
  border:1px solid rgba(var(--ink),.16);
  box-shadow:inset 0 1px 0 rgba(var(--ink),.22),0 8px 18px rgba(0,0,0,.22),0 0 18px rgba(208,17,27,.08);
  pointer-events:none;
  z-index:0;
  opacity:0;
  transition:transform .38s var(--ease-spring),
             width .38s var(--ease-spring),
             opacity .2s;
}
.nav-pill.visible{opacity:1;}
.nav-tab{
  font-size:.72rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  padding:.56rem 1.05rem;
  cursor:pointer;color:rgba(var(--ink),.52);
  border:none;
  transition:color .2s,transform .2s var(--ease-spring),background .2s,box-shadow .2s;
  background:none;
  font-family:inherit;white-space:nowrap;flex-shrink:0;
  position:relative;z-index:1;
  -webkit-tap-highlight-color:transparent;
  border-radius:16px;
}
.nav-tab.active{color:var(--wh);}
.nav-tab:hover{
  color:rgba(var(--ink),.92);
  background:linear-gradient(180deg,rgba(var(--ink),.105),rgba(var(--ink),.035));
  box-shadow:inset 0 1px 0 rgba(var(--ink),.12),0 7px 18px rgba(0,0,0,.18);
}
.nav-tab:hover:not(.active){color:rgba(var(--ink),.78);}
.nav-tab.active:hover{background:transparent;box-shadow:none;}
.nav-tab:active{transform:scale(.91)!important;}
.nav-sep{width:1px;height:16px;background:rgba(var(--ink),.075);margin:0 .3rem;flex-shrink:0;}
#nav-pinned{display:contents;}
.nav-tab-client.active{border-bottom-color:var(--client-color,var(--red));color:var(--wh);}
.nav-tab-client:hover:not(.active){color:var(--wh6);}
.nav-tab-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:middle;flex-shrink:0;}
.pin-btn{opacity:.55;transition:opacity .15s,color .15s;display:inline-flex;align-items:center;gap:4px;}
.pin-btn:hover{opacity:1;}
.pin-btn.pinned{opacity:1;color:var(--red);}
.client-badge{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle;}
/* ── iOS Large Title ──────────────────────────────────────────────────────────
   Großer View-Titel, der beim Scrollen schrumpft und ausblendet */
.view-large-title{
  font-size:2.05rem;font-weight:800;letter-spacing:-.03em;line-height:1.1;
  color:var(--wh);margin:1.15rem 1.5rem .1rem;
  transform-origin:left top;
  transition:transform .3s var(--ease-ios),opacity .25s ease;
}
.view-large-title:empty{display:none;}
.view-large-title.lt-collapsed{transform:scale(.72) translateY(-4px);opacity:.5;}
@media (max-width: 768px){
  .view-large-title{font-size:1.7rem;margin:1rem 1.1rem 0;}
}

.view{display:none;}
.view.active{display:block;animation:viewSlideIn .32s cubic-bezier(.25,.46,.45,.94);}
/* Bewusst NUR opacity, kein transform: ein transform auf der View macht sie zum
   Bezugsrahmen für position:fixed-Kinder (Todo-Schnellerfassung, Kundenpanel).
   Die rutschen dann bei jedem Tab-Wechsel 16px mit — genau das "Wackeln" über
   der Tab-Leiste. Die Bewegung liefern die gestaffelten Kind-Animationen unten. */
@keyframes viewSlideIn{from{opacity:0}to{opacity:1}}

/* Staggered entrance — only on initial view switch, not on re-renders */
.view.view-animate .stat-card{animation:cardPop .35s var(--ease-spring) both;}
.view.view-animate .stat-card:nth-child(1){animation-delay:.04s}
.view.view-animate .stat-card:nth-child(2){animation-delay:.08s}
.view.view-animate .stat-card:nth-child(3){animation-delay:.12s}
.view.view-animate .stat-card:nth-child(4){animation-delay:.16s}
.view.view-animate .dash-kpi-card{animation:cardPop .38s var(--ease-spring) both;}
.view.view-animate .dash-kpi-card:nth-child(1){animation-delay:.04s}
.view.view-animate .dash-kpi-card:nth-child(2){animation-delay:.09s}
.view.view-animate .dash-kpi-card:nth-child(3){animation-delay:.14s}
.view.view-animate .dash-kpi-card:nth-child(4){animation-delay:.19s}
.view.view-animate .dash-kpi-card:nth-child(5){animation-delay:.24s}
.view.view-animate .month-section{animation:fadeUp .3s cubic-bezier(.25,.46,.45,.94) both;}
.view.view-animate .month-section:nth-child(1){animation-delay:.08s}
.view.view-animate .month-section:nth-child(2){animation-delay:.13s}
.view.view-animate .month-section:nth-child(3){animation-delay:.18s}
.view.view-animate .month-section:nth-child(4){animation-delay:.23s}
.view.view-animate .month-section:nth-child(5){animation-delay:.28s}
/* Finance panels animate on view switch */
.view.view-animate .dash-panel{animation:fadeUp .36s cubic-bezier(.25,.46,.45,.94) both;}
.view.view-animate .dash-row .dash-panel:nth-child(1){animation-delay:.22s}
.view.view-animate .dash-row .dash-panel:nth-child(2){animation-delay:.30s}
.view.view-animate .bank-panel{animation:fadeUp .36s cubic-bezier(.25,.46,.45,.94) .38s both;}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:1.4rem 1.5rem;}
.year-switcher{
  display:flex;align-items:center;gap:0;
  padding:1rem 1.5rem .65rem;
}
/* Segmented control container */
.year-switcher-inner{
  display:flex;align-items:center;
  background:rgba(var(--ink),.05);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(var(--ink),.08);
  border-radius:14px;
  padding:3px;
  gap:2px;
  box-shadow:0 2px 12px rgba(0,0,0,.3);
}
.year-btn{
  font-size:.72rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  padding:.3rem .85rem;
  border-radius:9px;
  border:none;
  background:none;
  color:var(--wh4);
  cursor:pointer;
  transition:background .2s var(--ease-spring),color .15s,transform .2s var(--ease-spring),box-shadow .2s;
  font-family:inherit;
  white-space:nowrap;
  position:relative;
}
.year-btn:hover{color:var(--wh6);}
.year-btn:active{transform:scale(.93);}
.year-btn.active{color:var(--wh);}
/* Gleitender Segmented-Thumb (iOS) — per JS positioniert (updateSegThumbs) */
.year-switcher-inner,.vcal-view-toggle{position:relative;}
.year-btn,.vcal-vt-btn{position:relative;z-index:1;}
.seg-thumb{
  position:absolute;top:3px;bottom:3px;left:0;width:0;z-index:0;
  border-radius:9px;pointer-events:none;
  background:rgba(var(--ink),.14);
  box-shadow:0 1px 6px rgba(0,0,0,.35),inset 0 1px 0 rgba(var(--ink),.12);
  transition:left .32s var(--ease-ios),width .32s var(--ease-ios);
}
.vcal-view-toggle .seg-thumb{border-radius:7px;}
html[data-theme="light"] .seg-thumb{
  background:#fff;
  box-shadow:0 1px 4px rgba(17,24,39,.14),0 0 0 .5px rgba(0,0,0,.04);
}
.fade-in{animation:fadeUp .18s ease;}
.stat-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:16px;padding:1.1rem 1.3rem;transition:border-color .25s,transform .25s var(--ease-spring),box-shadow .25s;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-card);}
.stat-card:hover{border-color:rgba(208,17,27,.3);transform:translateY(-3px);box-shadow:0 12px 36px rgba(0,0,0,.5),0 0 0 1px rgba(208,17,27,.12);}
.stat-card:active{transform:scale(.97)!important;}
.stat-label{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--wh4);margin-bottom:.5rem;}
.stat-val{font-size:1.7rem;font-weight:700;letter-spacing:-.03em;}
/* Geldzahlen sind neutral — Rot bliebe der Marke bzw. echten Problemen vorbehalten */
.stat-val.red{color:var(--num);}
.stat-sub{font-size:.7rem;color:var(--wh4);margin-top:.25rem;}
/* Projekte: Topbar (Jahres-Switcher + Suche in einer Zeile) */
.board-topbar{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1rem;padding:1rem 1.5rem .35rem;}
.board-topbar .year-switcher{padding:0;}
.board-topbar .board-search{flex:1 1 200px;max-width:360px;margin-left:auto;}
/* Projekte: Stats als schlanke einzeilige Leiste statt 4 Karten */
.stats-strip{display:block;padding:.4rem 1.5rem .3rem;
  /* bleibt beim Scrollen sichtbar (unter Topbar + Nav). Undurchsichtig, damit
     die Liste nicht durchscheint — zeigt dabei den passenden Ausschnitt des
     Hintergrundverlaufs statt einer flachen Fläche (Rezept in 01-base.css).
     Der Versatz entspricht dem eigenen top-Wert. */
  position:sticky;top:114px;z-index:480;
  background-color:var(--blk);
  background-image:var(--bg-glow);
  background-size:100vw 100vh;
  background-position:0 -114px;
  background-repeat:no-repeat;}
@media (max-width:768px){
  .stats-strip{
    top:env(safe-area-inset-top);
    background-position:0 calc(-1 * env(safe-area-inset-top));
  }
}
.stat-strip-inner{display:flex;flex-wrap:wrap;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:14px;box-shadow:var(--shadow-card);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);overflow:hidden;}
.stat-strip-item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:.14rem;padding:.62rem 1.1rem;border-right:1px solid rgba(var(--ink),.06);}
.stat-strip-item:last-child{border-right:none;}
.stat-strip-label{font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--wh4);}
.stat-strip-val{font-size:1.02rem;font-weight:700;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stat-strip-val.red{color:var(--num);}
.stat-strip-note{font-style:normal;font-size:.66rem;font-weight:500;color:var(--wh4);margin-left:.45rem;}
.client-page-header{padding:1.5rem 1.5rem 0;}
.cp-banner{background:var(--d2);border:1px solid var(--wh08);border-radius:16px;padding:1.5rem 1.7rem;display:flex;align-items:center;gap:1.2rem;margin-bottom:1.2rem;}
.cp-avatar{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700;color:var(--on-accent);flex-shrink:0;}
.cp-name{font-size:1.25rem;font-weight:700;letter-spacing:-.03em;}
.cp-meta{font-size:.8rem;color:var(--wh4);margin-top:.25rem;}
.cp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-left:auto;}
.cp-stat{text-align:right;}
.cp-stat-val{font-size:1.15rem;font-weight:700;letter-spacing:-.02em;}
.cp-stat-val.red{color:var(--num);}
.cp-stat-label{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--wh4);margin-top:.15rem;}
.month-section{scroll-margin-top:130px;margin:0 1.5rem 1rem;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:18px;overflow:hidden;transition:border-color .25s,background .25s,box-shadow .25s,transform .25s var(--ease-spring);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:0 2px 16px rgba(0,0,0,.35);}
.month-section:hover{border-color:rgba(var(--ink),.14);box-shadow:0 6px 20px rgba(0,0,0,.2);}
.month-section.drag-over{transform:scale(1.01);border-color:rgba(208,17,27,.7)!important;box-shadow:0 8px 28px rgba(208,17,27,.15);background:rgba(208,17,27,.06);}
.month-current{border-color:rgba(208,17,27,.3);}
.month-current:hover{border-color:rgba(208,17,27,.45);}
.t-row[draggable]{cursor:grab;}
.t-row[draggable]:active{cursor:grabbing;}
.t-row.dragging{opacity:.35;pointer-events:none;}
.month-header{display:flex;align-items:center;gap:.9rem;cursor:pointer;user-select:none;padding:1rem 1.3rem;background:rgba(var(--ink),.03);border-bottom:1px solid rgba(var(--ink),.05);}
.month-toggle{width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.month-toggle svg{width:10px;height:10px;stroke:rgba(var(--ink),.3);fill:none;stroke-width:2;transition:transform .22s;}
.month-toggle.open svg{transform:rotate(90deg);}
.month-name{font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--wh);}
.month-current .month-name{color:var(--red);}
.month-spacer{flex:1;}
.month-meta{display:flex;align-items:center;gap:.65rem;flex-shrink:0;}
.month-count{font-size:.72rem;font-weight:500;color:var(--wh4);letter-spacing:.02em;}
.month-sep-dot{width:3px;height:3px;border-radius:50%;background:rgba(var(--ink),.18);flex-shrink:0;}
.month-sum{font-size:.92rem;font-weight:700;color:var(--wh);letter-spacing:-.02em;min-width:56px;text-align:right;}
.month-empty{font-size:.75rem;color:rgba(var(--ink),.18);padding:.75rem 1.1rem;font-style:italic;border-top:1px solid var(--wh08);}
.table-wrap{background:var(--d2);border:1px solid var(--wh08);border-radius:16px;overflow:hidden;}
.month-section .table-wrap{border:none;border-radius:0;border-top:1px solid var(--wh08);}
.t-head{display:grid;grid-template-columns:1.7fr 1.2fr 1.4fr 1.5fr .85fr 1.1fr .28fr;padding:.68rem 1.1rem;border-bottom:1px solid rgba(var(--ink),.05);background:transparent;}
.t-head span{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(var(--ink),.3);}
.t-row{display:grid;grid-template-columns:1.7fr 1.2fr 1.4fr 1.5fr .85fr 1.1fr .28fr;padding:1rem 1.1rem;border-bottom:1px solid rgba(var(--ink),.04);align-items:center;transition:background .18s,transform .18s var(--ease-spring);}
.t-row:nth-child(even){background:rgba(var(--ink),.02);}
.t-row:last-child{border-bottom:none;}
.t-row:hover{background:rgba(var(--ink),.055);}
.t-row:active{transform:scale(.995);background:rgba(var(--ink),.04);}
.t-footer{display:grid;grid-template-columns:1.7fr 1.2fr 1.4fr 1.5fr .85fr 1.1fr .28fr;padding:.72rem 1.1rem;background:rgba(var(--ink),.025);border-top:1px solid rgba(var(--ink),.05);}
/* ── New project card list ────────────────────────────────────────────────── */
.proj-list{display:flex;flex-direction:column;}
.proj-row{display:flex;align-items:stretch;border-bottom:1px solid rgba(var(--ink),.04);transition:background .15s;position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.proj-row:last-child{border-bottom:none;}
.proj-row:hover{background:rgba(var(--ink),.048);}
.proj-row:active{background:rgba(var(--ink),.03);}
.proj-row[draggable]{cursor:grab;}
.proj-row[draggable]:active{cursor:grabbing;}
.proj-row.dragging{opacity:.32;pointer-events:none;}
.proj-body{flex:1;padding:.72rem 1rem .72rem .85rem;min-width:0;display:flex;flex-direction:column;gap:.3rem;}
.proj-top{display:flex;align-items:center;gap:.55rem;min-width:0;}
.proj-top .proj-name-text{flex:1;font-size:.94rem;font-weight:600;min-width:0;}
.proj-trail{display:flex;align-items:center;gap:.38rem;flex-shrink:0;}
.proj-trail .status-pill{padding:.28rem .7rem;font-size:.7rem;width:auto;display:inline-block;}
.proj-del{opacity:0;transition:opacity .15s;}
.proj-row:hover .proj-del{opacity:1;}
.proj-bottom{display:flex;align-items:center;gap:.55rem;min-width:0;}
.proj-meta{flex:1;font-size:.71rem;color:var(--wh4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;line-height:1.3;}
.proj-date{cursor:pointer;transition:color .15s;}
.proj-date:hover{color:var(--wh6);}
.proj-addr{opacity:.6;cursor:pointer;transition:opacity .15s;}
.proj-addr:hover{opacity:1;}
.proj-amount{display:flex;align-items:center;gap:.42rem;flex-shrink:0;}
.proj-umsatz{font-size:.84rem;font-weight:700;color:var(--wh);cursor:pointer;transition:opacity .15s;}
.proj-umsatz:hover{opacity:.65;}
.proj-umsatz-empty{font-size:.74rem;color:rgba(var(--ink),.18);cursor:pointer;transition:color .15s;font-style:italic;}
.proj-umsatz-empty:hover{color:rgba(var(--ink),.42);}
.proj-amount .r-pill{padding:.25rem .65rem;font-size:.68rem;width:auto;display:inline-block;}
.proj-amount .r-leer{font-size:.72rem;padding:.18rem .3rem;}
.proj-add-row{display:flex;align-items:center;gap:.6rem;padding:.62rem 1rem .62rem 1.3rem;color:rgba(var(--ink),.2);font-size:.78rem;cursor:pointer;border-top:1px dashed rgba(var(--ink),.06);transition:color .18s,background .18s;}
.proj-add-row:hover{color:rgba(var(--ink),.5);background:rgba(208,17,27,.04);}
.proj-add-icon{width:18px;height:18px;border-radius:50%;border:1.5px dashed rgba(var(--ink),.18);display:flex;align-items:center;justify-content:center;font-size:.82rem;line-height:1;flex-shrink:0;transition:border-color .18s;}
.proj-add-row:hover .proj-add-icon{border-color:rgba(208,17,27,.5);}
.proj-cell{display:flex;align-items:center;gap:9px;min-width:0;}

/* Project tab refresh: quieter months, denser project rows */
.month-section{border-radius:10px;margin:0 1.5rem .65rem;box-shadow:none;background:rgba(var(--ink),.026);}
.month-section:hover{box-shadow:none;transform:none;}
.month-current{border-color:rgba(208,17,27,.38);background:rgba(208,17,27,.035);}
.month-header{padding:.78rem 1rem;background:rgba(var(--ink),.018);}
.month-title{display:flex;align-items:center;gap:.5rem;min-width:0;}
.month-name{font-size:.72rem;letter-spacing:.1em;}
.month-now{font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--on-accent);background:rgba(208,17,27,.85);border-radius:5px;padding:.12rem .35rem;}
.month-count{font-size:.68rem;}
.month-sum{font-size:.84rem;min-width:52px;}
.month-empty{padding:.65rem 1rem;color:rgba(var(--ink),.26);font-style:normal;}
.month-quiet{margin:.5rem 1.5rem 1.4rem;display:flex;flex-direction:column;gap:.55rem;border-top:1px solid var(--wh08);padding-top:.85rem;}
.month-quiet-group{display:flex;align-items:center;gap:.75rem;min-width:0;flex-wrap:wrap;}
.month-quiet-label{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--wh4);flex-shrink:0;}
.month-chip-row{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;}
.month-chip{appearance:none;border:1px solid var(--wh08);background:rgba(var(--ink),.018);color:var(--wh4);border-radius:7px;padding:.28rem .5rem;font:inherit;font-size:.68rem;cursor:pointer;transition:border-color .15s,color .15s,background .15s;}
.month-chip:hover{border-color:rgba(var(--ink),.18);color:var(--wh6);background:rgba(var(--ink),.04);}

.proj-list{display:flex;flex-direction:column;}
.proj-row{min-height:54px;background:rgba(var(--ink),.006);}
.proj-row:hover{background:rgba(var(--ink),.036);}
.proj-body{padding:.58rem .85rem .58rem 1rem;gap:0;}
.proj-top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(92px,120px);gap:.85rem;align-items:center;}
.proj-main{display:flex;align-items:center;gap:.58rem;min-width:0;}
.proj-title-stack{display:flex;flex-direction:column;gap:.15rem;min-width:0;}
.proj-top .proj-name-text{font-size:.9rem;font-weight:650;line-height:1.2;}
.proj-meta{font-size:.68rem;color:var(--wh4);line-height:1.25;}
.proj-statuses{display:flex;align-items:center;justify-content:flex-end;gap:.36rem;min-width:0;}
.proj-statuses .status-pill,.proj-statuses .r-pill{padding:.22rem .52rem;font-size:.68rem;letter-spacing:.045em;border-radius:6px;box-shadow:none;}
.proj-statuses .r-leer{font-size:.72rem;padding:.16rem .32rem;color:rgba(var(--ink),.25);}
.proj-amount{display:flex;align-items:center;justify-content:flex-end;gap:.42rem;min-width:0;}
.proj-umsatz{font-size:.9rem;font-weight:800;letter-spacing:-.01em;}
.proj-umsatz-empty{font-size:.68rem;font-style:normal;}
.proj-del{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;}
.cat-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.cat-dot-btn{cursor:pointer;transition:transform .15s,box-shadow .15s;width:12px;height:12px;border-radius:50%;}
.cat-dot-btn:hover{transform:scale(1.45);box-shadow:0 0 0 4px rgba(var(--ink),.1);}
.proj-client-avatar{width:20px;height:20px;border-radius:50%;flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;color:rgba(var(--ink),.95);letter-spacing:0;transition:transform .18s var(--ease-spring),box-shadow .18s;user-select:none;}
.proj-client-avatar:hover{transform:scale(1.2);box-shadow:0 0 0 3px rgba(var(--ink),.15);}
.proj-client-avatar-empty{background:rgba(var(--ink),.07)!important;border:1.5px dashed rgba(var(--ink),.22);color:rgba(var(--ink),.35);font-size:.72rem;}
.proj-name-wrap{display:flex;flex-direction:column;gap:3px;min-width:0;}
.proj-name-text{font-size:1rem;font-weight:500;color:var(--wh);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;transition:opacity .15s;}
.proj-name-text:hover{opacity:.7;}
.proj-notes{font-size:.71rem;color:rgba(var(--ink),.3);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s;line-height:1.3;}
.proj-notes:hover{color:rgba(var(--ink),.65);}
.proj-notes-empty{color:rgba(var(--ink),.15);font-style:italic;}
.proj-notes-empty:hover{color:rgba(var(--ink),.38);}
.date-txt{font-size:.92rem;color:var(--wh6);cursor:pointer;white-space:nowrap;transition:color .15s;}
.date-txt:hover{color:var(--wh);}
.date-empty{font-size:.88rem;color:rgba(var(--ink),.18);cursor:pointer;font-style:italic;transition:color .15s;}
.date-empty:hover{color:rgba(var(--ink),.4);}
.addr-txt{font-size:.9rem;color:var(--wh4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:155px;cursor:pointer;display:block;transition:color .15s;}
.addr-txt:hover{color:var(--wh6);}
.addr-empty{font-size:.88rem;color:rgba(var(--ink),.18);cursor:pointer;font-style:italic;transition:color .15s;}
.addr-empty:hover{color:rgba(var(--ink),.4);}
.umsatz-wrap{display:inline-flex;align-items:center;gap:.3rem;}
.umsatz-txt{font-size:.96rem;font-weight:600;cursor:pointer;transition:opacity .15s;}
.umsatz-txt:hover{opacity:.7;}
.umsatz-clear{display:none;background:none;border:none;color:rgba(var(--ink),.35);font-size:.78rem;cursor:pointer;padding:0 .1rem;line-height:1;transition:color .15s;}
.umsatz-wrap:hover .umsatz-clear{display:inline;}
.umsatz-clear:hover{color:rgba(var(--ink),.7);}
.umsatz-empty{font-size:.88rem;color:rgba(var(--ink),.18);cursor:pointer;transition:color .15s;}
.umsatz-empty:hover{color:rgba(var(--ink),.4);}
.status-pill,.r-pill{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.45rem 1rem;border-radius:980px;white-space:nowrap;cursor:pointer;user-select:none;text-align:center;transition:filter .18s,transform .2s var(--ease-spring),box-shadow .18s;}
.status-pill:active,.r-pill:active{transform:scale(.91);filter:brightness(.9);}
.t-row > div > .status-pill{display:block;width:9.5rem;}
.t-row > div > .r-pill{display:block;width:12rem;}
.pd-back-btn{display:none;}
.inv-back-btn{display:none;}
.status-pill:hover,.r-pill:hover{filter:brightness(1.15);transform:scale(1.04);}
.s-erledigt{background:rgba(22,163,74,.85);color:var(--on-accent);box-shadow:0 2px 10px rgba(22,163,74,.3);}
.s-produktion{background:rgba(208,17,27,.85);color:var(--on-accent);box-shadow:0 2px 10px rgba(208,17,27,.3);}
.s-postprod{background:rgba(251,146,60,.85);color:var(--on-accent);box-shadow:0 2px 10px rgba(251,146,60,.3);}
.s-offen{background:rgba(var(--ink),.07);color:var(--wh4);border:1px solid rgba(var(--ink),.1);}
.r-bezahlt{background:rgba(22,163,74,.85);color:var(--on-accent);box-shadow:0 2px 10px rgba(22,163,74,.3);}
.r-zahlung{background:rgba(217,119,6,.85);color:var(--on-accent);box-shadow:0 2px 10px rgba(217,119,6,.3);}
.r-ausstehend{background:rgba(208,17,27,.85);color:var(--on-accent);box-shadow:0 2px 10px rgba(208,17,27,.3);}
/* Projektliste: Pills gedämpft (getönter Hintergrund statt Vollfarbe) —
   volle Farbe behalten nur handlungsrelevante Zustände (r-zahlung, r-ausstehend). */
.proj-statuses .s-erledigt{background:rgba(34,197,94,.12);color:#22c55e;box-shadow:none;}
.proj-statuses .s-produktion{background:rgba(229,72,77,.13);color:#e5484d;box-shadow:none;}
.proj-statuses .s-postprod{background:rgba(245,158,11,.14);color:#f59e0b;box-shadow:none;}
.proj-statuses .r-bezahlt{background:rgba(34,197,94,.08);color:rgba(34,197,94,.65);box-shadow:none;}
html[data-theme="light"] .proj-statuses .s-erledigt{color:#15803d;}
html[data-theme="light"] .proj-statuses .s-produktion{color:#c11a22;}
html[data-theme="light"] .proj-statuses .s-postprod{color:#b45309;}
html[data-theme="light"] .proj-statuses .r-bezahlt{color:rgba(21,128,61,.7);}
.r-leer{font-size:.76rem;color:rgba(var(--ink),.22);cursor:pointer;padding:.3rem .4rem;transition:color .15s;}
.r-leer:hover{color:rgba(var(--ink),.55);}
.cell-input{background:var(--d3);border:1px solid var(--red);border-radius:7px;padding:.33rem .6rem;font-size:.84rem;color:var(--wh);font-family:inherit;outline:none;}
.cell-textarea{background:var(--d3);border:1px solid var(--red);border-radius:7px;padding:.4rem .7rem;font-size:.84rem;color:var(--wh);font-family:inherit;outline:none;width:100%;resize:vertical;line-height:1.5;}

/* ── Abgelaufene Monate: zugeklappt schmaler ─────────────────────────────────
   Die Projektansicht beantwortet vor allem "was läuft gerade". Vergangene
   Monate sind Archiv und brauchten bisher genauso viel Höhe wie der laufende,
   obwohl sie nur eine Zahl tragen. Sie treten deshalb zurück: flacher, kleiner
   gesetzt, gedämpfte Farbe.

   Die Summe bleibt bewusst gut lesbar — sie ist der Grund, überhaupt
   hinzusehen. Und nur solange zugeklappt: Beim Aufklappen greifen diese Regeln
   nicht mehr (.month-collapsed fällt weg), damit der Inhalt normal gelesen
   werden kann. */
.month-past.month-collapsed{margin-bottom:.3rem;background:rgba(var(--ink),.015);}
.month-past.month-collapsed .month-header{padding:.26rem 1rem;line-height:1.3;}
.month-past.month-collapsed .month-name{font-size:.66rem;font-weight:600;color:var(--wh4);}
.month-past.month-collapsed .month-count{font-size:.64rem;color:rgba(var(--ink),.3);}
.month-past.month-collapsed .month-sum{font-size:.76rem;font-weight:600;color:var(--wh5);}
.month-past.month-collapsed .month-toggle svg{stroke:rgba(var(--ink),.2);}

/* ── Archiv: abgelaufene Monate in einem Block ───────────────────────────────
   Acht einzelne Monatszeilen standen bisher über der laufenden Arbeit und
   kosteten ein Drittel des Bildschirms, bevor der aktuelle Monat auftauchte.
   Sie liegen jetzt zusammengefasst in einer Zeile mit Zeitraum, Anzahl und
   Summe; ein Tipp öffnet sie, danach ist jeder Monat wie zuvor einzeln
   aufklappbar.

   Bewusst ruhiger gehalten als eine Monatskarte: Der Block ist ein Register,
   kein Inhalt. Ein Rahmen statt einer Fläche, gedämpfte Schrift. */
.month-archive{
  margin:0 1.5rem .65rem;
  border:1px solid rgba(var(--ink),.07);
  border-radius:10px;
  overflow:hidden;
}
.month-archive-header{
  display:flex;align-items:center;gap:.9rem;
  padding:.5rem 1rem;
  cursor:pointer;user-select:none;
  background:rgba(var(--ink),.012);
  transition:background .15s;
}
.month-archive-header:hover{background:rgba(var(--ink),.035);}
.month-archive-header .month-name{font-size:.66rem;font-weight:600;color:var(--wh4);white-space:nowrap;}
.month-archive-header .month-count{font-size:.64rem;color:rgba(var(--ink),.3);}
.month-archive-header .month-sum{font-size:.78rem;font-weight:600;color:var(--wh5);}
.month-archive-tag{
  font-size:.56rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(var(--ink),.35);
  border:1px solid rgba(var(--ink),.1);
  border-radius:5px;padding:.08rem .3rem;
}
/* Geöffnet: die Monate darin rücken ein und brauchen keinen eigenen Außenrand */
.month-archive-open .month-archive-header{border-bottom:1px solid rgba(var(--ink),.06);}
.month-archive-body{padding:.35rem .4rem .4rem;}
.month-archive-body .month-section{margin-left:0;margin-right:0;}

/* ── 03-modals.css ───────────────────────────── */
/* =============================================================================
   03-modals.css — Notizen, Projektdetail, Login, Einstellungen, Modal-Grundgerüst

   Teil von style.css (nach Bereichen aufgeteilt). Die Dateien werden in
   nummerierter Reihenfolge geladen — die Kaskade hängt daran, also nicht
   umsortieren. Eingebunden in index.html.
   ============================================================================= */

/* ── Notes modal ─────────────────────────────────────────────────────────── */
.notes-modal{padding:0;overflow:hidden;display:flex;flex-direction:column;width:580px;max-height:74vh;}
.notes-modal-header{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.3rem;border-bottom:1px solid var(--wh08);flex-shrink:0;}
.notes-modal-title{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red);}
.notes-modal-close{
  background:rgba(var(--ink),.08);
  border:1px solid rgba(var(--ink),.12);
  border-radius:50%;
  color:rgba(var(--ink),.6);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;flex-shrink:0;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:background .15s,color .15s,transform .15s var(--ease-spring);
  -webkit-tap-highlight-color:transparent;
}
.notes-modal-close:hover{background:rgba(var(--ink),.15);color:var(--wh);transform:scale(1.08);}
.notes-modal-close:active{transform:scale(.9);}
.notes-toolbar{display:flex;align-items:center;gap:3px;padding:.45rem .85rem;background:var(--d3);border-bottom:1px solid var(--wh08);flex-shrink:0;}
.notes-tool{background:none;border:1px solid transparent;border-radius:7px;color:var(--wh5);cursor:pointer;font-family:inherit;font-size:.82rem;font-weight:600;line-height:1;padding:.35rem .6rem;display:inline-flex;align-items:center;justify-content:center;min-width:32px;transition:background .15s,color .15s,border-color .15s;}
.notes-tool:hover{background:rgba(var(--ink),.07);border-color:var(--wh08);color:var(--wh);}
.notes-tool-sep{width:1px;height:18px;background:var(--wh08);margin:0 4px;flex-shrink:0;}
.notes-editor{flex:1;height:0;min-height:240px;padding:1.2rem 1.4rem;overflow-y:auto;outline:none;font-size:.9rem;line-height:1.72;color:var(--wh);}
/* Eingefuegte Inline-Farben ueberschreiben, damit Text immer weiss/sichtbar bleibt */
.notes-editor,.notes-editor *{color:var(--wh) !important;background:transparent !important;}
.notes-editor:empty::before{content:attr(data-placeholder);color:var(--wh3)!important;pointer-events:none;}
.notes-editor ul,.notes-editor ol{padding-left:1.5rem;margin:.25rem 0;}
.notes-editor li{margin:.2rem 0;}
.notes-modal-footer{display:flex;justify-content:flex-end;gap:.7rem;padding:.85rem 1.3rem;border-top:1px solid var(--wh08);background:var(--d3);flex-shrink:0;}

/* ── Project detail modal ────────────────────────────────────────────────── */
.modal-drag-handle{display:none;} /* shown only on mobile via media query */
.pd-modal{background:rgba(var(--srf1),.93);border:1px solid rgba(var(--ink),.1);border-top:1px solid rgba(var(--ink),.15);border-radius:24px;width:900px;max-width:calc(100vw - 2rem);max-height:90vh;display:flex;flex-direction:column;animation:scaleIn .28s var(--ease-spring);overflow:hidden;backdrop-filter:blur(48px) saturate(180%);-webkit-backdrop-filter:blur(48px) saturate(180%);box-shadow:var(--shadow-modal);}
.pd-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem 1.6rem 1rem;border-bottom:1px solid var(--wh08);flex-shrink:0;}
.pd-name-input{background:none;border:none;border-bottom:1px solid transparent;outline:none;font-size:1.15rem;font-weight:700;color:var(--wh);font-family:inherit;flex:1;min-width:0;transition:border-color .15s;padding-bottom:2px;}
.pd-name-input:hover{border-bottom-color:rgba(var(--ink),.2);}
.pd-name-input:focus{border-bottom-color:var(--red);}
.pd-name-input::placeholder{color:var(--wh3);}
.pd-header-meta{display:flex;align-items:center;gap:.75rem;flex-shrink:0;}
.pd-body{display:flex;flex:1;min-height:0;overflow:hidden;}
.pd-main{flex:1;min-width:0;padding:1.4rem 1.6rem;overflow-y:auto;overscroll-behavior-y:contain;display:flex;flex-direction:column;gap:1.2rem;}
.pd-sidebar{width:280px;flex-shrink:0;border-left:1px solid var(--wh08);overflow-y:auto;overscroll-behavior-y:contain;padding:1.4rem 1.2rem;}
.pd-quick-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem;}
.pd-quick-action{border:1px solid rgba(var(--ink),.1);border-radius:12px;background:linear-gradient(180deg,rgba(var(--ink),.08),rgba(var(--ink),.035));color:var(--wh);font-family:inherit;font-size:.72rem;font-weight:800;padding:.62rem .7rem;cursor:pointer;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s,border-color .15s,transform .15s;}
.pd-quick-action:hover{border-color:rgba(var(--ink),.22);background:rgba(var(--ink),.085);transform:translateY(-1px);}
.pd-quick-action.is-done{border-color:rgba(34,197,94,.24);background:rgba(34,197,94,.11);color:#86efac;}
.pd-quick-action.is-warn{border-color:rgba(245,158,11,.24);background:rgba(245,158,11,.1);color:#fbbf24;}
.pd-pills-row{display:flex;gap:1rem;flex-wrap:wrap;}
.pd-field-group{display:flex;flex-direction:column;gap:.35rem;min-width:120px;}
.pd-label{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--wh4);}
/* custom dropdown buttons */
.pd-dd-btn{display:inline-flex;align-items:center;gap:.45rem;background:rgba(var(--ink),.05);border:1px solid rgba(var(--ink),.09);border-radius:10px;color:var(--wh);font-family:inherit;font-size:.84rem;padding:.45rem .8rem;cursor:pointer;transition:border-color .15s,background .15s;white-space:nowrap;text-align:left;}
.pd-dd-btn:hover{border-color:rgba(var(--ink),.2);background:rgba(var(--ink),.08);}
.pd-dd-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.pd-dd-chev{color:var(--wh4);flex-shrink:0;}
.pd-dd-btn-wide{max-width:200px;overflow:hidden;}
.pd-dd-btn-wide span:not(.pd-dd-dot):not(.pd-dd-chev){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* date picker */
.pd-date-wrap{position:relative;}
.pd-calendar{position:absolute;top:calc(100% + 6px);left:0;background:var(--d2);border:1px solid rgba(var(--ink),.12);border-radius:16px;padding:.8rem;z-index:700;display:none;box-shadow:0 20px 60px rgba(0,0,0,.75);min-width:248px;}
.pd-calendar.open{display:block;animation:slideDown .15s ease;}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.65rem;padding:0 .1rem;}
.cal-title{font-size:.83rem;font-weight:600;color:var(--wh);}
.cal-nav{background:none;border:none;color:var(--wh5);cursor:pointer;font-size:1.3rem;line-height:1;padding:.1rem .45rem;border-radius:8px;transition:background .15s,color .15s;}
.cal-nav:hover{background:rgba(var(--ink),.07);color:var(--wh);}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.cal-day-name{font-size:.7rem;color:var(--wh4);text-align:center;padding:.15rem 0 .4rem;font-weight:600;letter-spacing:.04em;}
.cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--wh6);border-radius:8px;cursor:pointer;transition:background .12s,color .12s;}
.cal-day:hover{background:rgba(var(--ink),.09);color:var(--wh);}
.cal-day:empty{cursor:default;pointer-events:none;}
.cal-today{color:var(--red);font-weight:700;}
.cal-sel{background:var(--red) !important;color:var(--on-accent) !important;font-weight:700;}
/* fields */
.pd-fields{display:flex;flex-direction:column;gap:.7rem;}
.pd-field-row{display:flex;align-items:center;gap:.65rem;}
.pd-field-icon{width:16px;height:16px;flex-shrink:0;color:var(--wh3);}
.pd-input{background:rgba(var(--ink),.05);border:1px solid rgba(var(--ink),.08);border-radius:9px;color:var(--wh);font-family:inherit;font-size:.86rem;padding:.45rem .75rem;outline:none;transition:border-color .15s,background .15s;min-width:0;}
.pd-input:focus{border-color:rgba(var(--ink),.22);background:rgba(var(--ink),.07);}
.pd-input-time{width:90px;flex-shrink:0;}
.pd-input-wide{flex:1;}
.pd-currency{font-size:.88rem;font-weight:600;color:var(--wh5);flex-shrink:0;}
.pd-notes-section{display:flex;flex-direction:column;flex:1;}
.pd-section-label{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--wh4);margin-bottom:.5rem;}
.pd-notes-toolbar{display:flex;align-items:center;gap:3px;padding:.4rem .6rem;background:var(--d3);border:1px solid var(--wh08);border-radius:10px 10px 0 0;border-bottom:none;}
.pd-notes-editor{flex:1;height:0;min-height:160px;padding:1rem 1rem;background:var(--d3);border:1px solid var(--wh08);border-radius:0 0 10px 10px;outline:none;font-size:.88rem;line-height:1.72;color:var(--wh);overflow-y:auto;}
/* Eingefuegte Inline-Farben ueberschreiben, damit Text immer weiss/sichtbar bleibt */
.pd-notes-editor,.pd-notes-editor *{color:var(--wh) !important;background:transparent !important;}
.pd-notes-editor:empty::before{content:attr(data-placeholder);color:var(--wh3)!important;pointer-events:none;}
.pd-notes-editor ul,.pd-notes-editor ol{padding-left:1.5rem;margin:.25rem 0;}
.pd-notes-editor li{margin:.2rem 0;}
.pd-client-card{display:flex;flex-direction:column;gap:.9rem;}
.pd-no-client{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:2rem 0;color:var(--wh3);font-size:.85rem;text-align:center;}
.pd-client-hero{display:flex;align-items:center;gap:.85rem;}
.pd-client-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:700;color:var(--on-accent);flex-shrink:0;}
.pd-client-name{font-size:.95rem;font-weight:600;color:var(--wh);}
.pd-client-branch{font-size:.78rem;color:var(--wh4);margin-top:.1rem;}
.pd-client-info{display:flex;flex-direction:column;gap:.5rem;}
.pd-client-row{display:flex;align-items:flex-start;gap:.5rem;font-size:.82rem;color:var(--wh6);}
.pd-client-row svg{flex-shrink:0;margin-top:.12rem;color:var(--wh3);}
.pd-client-notes-preview{font-size:.8rem;color:var(--wh5);line-height:1.6;border-top:1px solid var(--wh05);padding-top:.75rem;max-height:120px;overflow-y:auto;}
.pd-workflow{border-top:1px solid var(--wh08);padding-top:.9rem;display:flex;flex-direction:column;gap:.75rem;}
.pd-workflow-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--wh4);}
.pd-workflow-head strong{letter-spacing:0;color:var(--wh);border:1px solid rgba(var(--ink),.12);border-radius:980px;padding:.12rem .48rem;background:rgba(var(--ink),.06);}
.pd-workflow-grid{display:grid;grid-template-columns:1fr;gap:.45rem;}
.pd-workflow-grid div{border:1px solid rgba(var(--ink),.08);border-radius:10px;background:rgba(var(--ink),.035);padding:.55rem .65rem;min-width:0;}
.pd-workflow-grid small{display:block;color:var(--wh4);font-size:.7rem;margin-bottom:.16rem;}
.pd-workflow-grid strong{display:block;color:var(--wh);font-size:.82rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0;}
.pd-workflow-flags{display:flex;flex-wrap:wrap;gap:.35rem;}
.pd-workflow-flags span{border:1px solid rgba(245,158,11,.28);border-radius:980px;background:rgba(245,158,11,.1);color:#fbbf24;font-size:.7rem;font-weight:700;padding:.22rem .5rem;}
.pd-workflow-actions{display:flex;flex-direction:column;gap:.42rem;}
.pd-workflow-btn{border:1px solid rgba(var(--ink),.12);border-radius:10px;background:rgba(var(--ink),.055);color:var(--wh);font-family:inherit;font-size:.76rem;font-weight:700;padding:.55rem .65rem;cursor:pointer;text-align:left;}
.pd-workflow-btn:hover{border-color:rgba(var(--ink),.24);background:rgba(var(--ink),.09);}
.pd-footer{display:flex;justify-content:flex-end;gap:.7rem;padding:.9rem 1.6rem;border-top:1px solid rgba(var(--ink),.06);background:rgba(var(--ink),.025);flex-shrink:0;}

.dropdown-popup{position:fixed;background:rgba(var(--srf2),.95);border:1px solid rgba(var(--ink),.12);border-top:1px solid rgba(var(--ink),.18);border-radius:16px;padding:6px;z-index:960;min-width:260px;display:none;box-shadow:0 20px 60px rgba(0,0,0,.75),0 4px 16px rgba(0,0,0,.4);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);}
.dropdown-popup.show{display:block;animation:slideDown .15s ease;}
.dp-search-wrap{padding:4px 4px 5px;}
.dp-search{width:100%;background:linear-gradient(180deg,rgba(var(--ink),.11),rgba(var(--ink),.045));border:1px solid rgba(var(--ink),.12);border-radius:12px;padding:.48rem .85rem;font-size:.84rem;color:var(--wh);font-family:inherit;outline:none;transition:border-color .15s,background .15s,box-shadow .15s;box-shadow:inset 0 1px 0 rgba(var(--ink),.1);}
.dp-search:focus{border-color:rgba(var(--ink),.3);background:linear-gradient(180deg,rgba(var(--ink),.14),rgba(var(--ink),.06));box-shadow:inset 0 1px 0 rgba(var(--ink),.14),0 8px 22px rgba(0,0,0,.18);}
.dp-search::placeholder{color:var(--wh3);}
.dp-items{max-height:260px;overflow-y:auto;}
.dp-empty{padding:.6rem 1rem;font-size:.8rem;color:rgba(var(--ink),.28);font-style:italic;}
.dp-item{padding:.55rem 1rem;border-radius:8px;cursor:pointer;font-size:.84rem;font-weight:500;transition:background .12s;display:flex;align-items:center;gap:.75rem;color:var(--wh6);}
.dp-copy{min-width:0;display:flex;flex-direction:column;gap:.12rem;line-height:1.25;}
.dp-main{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dp-sub{font-size:.68rem;font-weight:400;color:rgba(var(--ink),.36);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px;}
.dp-item:hover{background:rgba(var(--ink),.07);color:var(--wh);}
.dp-item.sel{background:rgba(var(--ink),.06);}
.dp-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.del-btn{background:none;border:none;cursor:pointer;color:rgba(var(--ink),.2);font-size:14px;padding:4px 6px;border-radius:4px;transition:all .18s;line-height:1;}
.del-btn:hover{color:var(--danger-bright);background:rgba(248,113,113,.1);}
.inv-list-actions{display:flex;align-items:center;gap:.25rem;}
.inv-dl-btn{background:none;border:none;cursor:pointer;color:rgba(var(--ink),.2);padding:4px 6px;border-radius:4px;transition:all .18s;display:flex;align-items:center;}
.inv-dl-btn:hover{color:#60a5fa;background:rgba(96,165,250,.1);}
.inv-dl-btn:disabled{opacity:.4;cursor:wait;}
.add-row{padding:.72rem 1.1rem;display:flex;align-items:center;gap:.5rem;cursor:pointer;transition:background .18s;border-top:1px solid var(--wh05);}
.add-row:hover{background:rgba(208,17,27,.06);}
.add-row span{font-size:.78rem;color:var(--wh4);transition:color .18s;}
.add-row:hover span{color:var(--red);}
.add-icon{width:18px;height:18px;border-radius:4px;background:var(--d3);border:1px solid var(--wh08);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--wh4);line-height:1;}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);display:none;align-items:flex-start;justify-content:center;z-index:950;padding-top:40px;}
.focus-pulse{position:relative;animation:focusPulse 1.8s ease-out;}
@keyframes focusPulse{
  0%{box-shadow:0 0 0 0 rgba(208,17,27,.58), inset 0 0 0 1px rgba(208,17,27,.7);}
  65%{box-shadow:0 0 0 12px rgba(208,17,27,0), inset 0 0 0 1px rgba(208,17,27,.45);}
  100%{box-shadow:none;}
}
.modal-bg.show{display:flex;animation:fadeIn .18s ease;}
.modal-bg.hide{animation:fadeOut .18s ease forwards;}
@keyframes fadeOut{to{opacity:0;}}
.modal{background:rgba(21,21,31,.92);border:1px solid rgba(var(--ink),.1);border-radius:22px;padding:2rem;width:480px;max-width:calc(100% - 2rem);max-height:88vh;overflow-y:auto;animation:scaleIn .22s ease;backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);box-shadow:var(--shadow-modal);}
.modal-back-btn{display:none;}
.modal-title{font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:1.5rem;display:flex;align-items:center;gap:.5rem;}
.modal-title::before{content:'';width:16px;height:1.5px;background:var(--red);}
.form-row{margin-bottom:1.1rem;position:relative;}
.form-row label{display:block;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--wh4);margin-bottom:.45rem;}
.form-row input:not([type=radio]):not([type=checkbox]),.form-row select,.form-row textarea{width:100%;background:linear-gradient(180deg,rgba(var(--ink),.09),rgba(var(--ink),.035));border:1px solid rgba(var(--ink),.1);border-radius:12px;padding:.62rem .9rem;font-size:.88rem;color:var(--wh);font-family:inherit;outline:none;transition:border-color .18s,background .18s,box-shadow .18s;-webkit-appearance:none;resize:none;color-scheme:dark;box-shadow:inset 0 1px 0 rgba(var(--ink),.08);}
.form-row input:not([type=radio]):not([type=checkbox]):focus,.form-row select:focus,.form-row textarea:focus{border-color:rgba(241,22,34,.65);background:linear-gradient(180deg,rgba(var(--ink),.12),rgba(var(--ink),.05));box-shadow:inset 0 1px 0 rgba(var(--ink),.12),0 0 0 3px rgba(241,22,34,.1);}
.form-row select option{background:var(--d3);color:var(--wh);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;}
.form-section{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--red);margin:1.3rem 0 .85rem;display:flex;align-items:center;gap:.5rem;}
.form-section::before{content:'';width:12px;height:1px;background:var(--red);}
.modal-btns{display:flex;gap:.7rem;margin-top:1.6rem;justify-content:flex-end;}
.color-picker-row{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin-top:.45rem;}
.color-swatch{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .15s,border-color .15s;flex-shrink:0;}
.color-swatch:hover{transform:scale(1.18);}
.color-swatch.selected{border-color:var(--wh);transform:scale(1.1);}
.color-custom{width:26px;height:26px;border-radius:50%;border:1.5px dashed rgba(var(--ink),.3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--wh4);overflow:hidden;flex-shrink:0;}
.color-custom input[type=color]{opacity:0;width:100%;height:100%;cursor:pointer;border:none;padding:0;}
.confirm-modal{background:rgba(var(--srf1),.93);border:1px solid rgba(208,17,27,.2);border-top:1px solid rgba(var(--ink),.12);border-radius:22px;padding:2rem;width:380px;max-width:calc(100% - 2rem);animation:scaleIn .22s ease;backdrop-filter:blur(48px) saturate(180%);-webkit-backdrop-filter:blur(48px) saturate(180%);box-shadow:var(--shadow-modal);}
.confirm-icon{width:46px;height:46px;border-radius:50%;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);display:flex;align-items:center;justify-content:center;margin-bottom:1.3rem;}
.confirm-icon svg{width:20px;height:20px;stroke:var(--danger-bright);fill:none;stroke-width:2;}
.confirm-title{font-size:.95rem;font-weight:600;margin-bottom:.55rem;}
.confirm-sub{font-size:.82rem;color:var(--wh4);line-height:1.65;margin-bottom:1.6rem;}
.btn-danger{background:var(--danger);color:var(--on-accent);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.45rem 1.1rem;border-radius:980px;border:none;cursor:pointer;font-family:inherit;transition:background .2s;}
.btn-danger:hover{background:var(--danger-dim);}
.app-wrap{position:relative;min-height:700px;width:100%;overflow-x:hidden;}

/* ── Login ───────────────────────────────────────────────────────────────── */
body.login-open{position:fixed;top:0;left:0;right:0;overflow:hidden;}
body.modal-open{overflow:hidden;}
.login-screen{position:fixed;inset:0;background:var(--blk);display:flex;align-items:center;justify-content:center;z-index:9999;overflow:hidden;touch-action:none;overscroll-behavior:none;}
.login-card{background:rgba(var(--srf1),.92);border:1px solid rgba(var(--ink),.12);border-top:1px solid rgba(var(--ink),.18);border-radius:28px;padding:2.8rem 3rem;width:420px;max-width:calc(100% - 2rem);backdrop-filter:blur(48px) saturate(180%);-webkit-backdrop-filter:blur(48px) saturate(180%);box-shadow:var(--shadow-modal);}
.login-logo{width:100%;height:auto;display:block;margin-bottom:.5rem;}
.login-divider{height:1px;background:var(--wh08);margin:1.8rem 0;}
.login-error{font-size:.72rem;color:var(--danger-bright);margin-bottom:.8rem;display:none;}
.login-btn{width:100%;background:linear-gradient(135deg,#ff4a52,#f11622);color:var(--on-accent);border:none;border-radius:980px;padding:.7rem;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;font-family:inherit;transition:background .2s,box-shadow .2s,transform .2s;box-shadow:0 8px 24px rgba(241,22,34,.24);}
.login-btn:hover{background:linear-gradient(135deg,#ff5a62,#e0101e);box-shadow:0 12px 30px rgba(241,22,34,.36);transform:translateY(-1px);}

/* ── Board search ────────────────────────────────────────────────────────── */
.board-search{width:100%;max-width:420px;background:var(--d3);border:1px solid var(--wh08);border-radius:9px;padding:.52rem 1rem;font-size:.88rem;color:var(--wh);font-family:inherit;outline:none;transition:border-color .18s;box-sizing:border-box;}
.board-search:focus{border-color:rgba(var(--ink),.22);}
.board-search::placeholder{color:var(--wh4);}
.search-results-wrap{padding:0 1.5rem;}
.search-result-count{font-size:.72rem;color:var(--wh4);letter-spacing:.08em;text-transform:uppercase;padding:.6rem 0 .4rem;}
.search-flat-list{background:var(--d2);border:1px solid var(--wh08);border-radius:14px;overflow:hidden;}
.search-flat-list .t-head{padding:.55rem 1.2rem;border-bottom:1px solid var(--wh05);}
.search-flat-list .t-row{border-bottom:1px solid var(--wh05);}
.search-flat-list .t-row:last-child{border-bottom:none;}
.search-empty{padding:2rem 1.5rem;color:var(--wh4);font-size:.88rem;}

/* ── Layout helpers ──────────────────────────────────────────────────────── */
.view-spacer{height:1rem;}
.btn-logout{color:rgba(var(--ink),.3);}
.btn-settings{color:rgba(var(--ink),.3);padding:.35rem .5rem;}
.btn-settings:hover{color:rgba(var(--ink),.7);}
/* ── Settings modal ──────────────────────────────────────────────────────── */
.settings-modal-bg{display:none;position:fixed;inset:0;z-index:4000;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:1.5rem;}
.settings-modal-bg.show{display:flex;}
.settings-modal{
  background:rgba(var(--srf1),.93);border:1px solid rgba(var(--ink),.1);
  border-top:1px solid rgba(var(--ink),.15);border-radius:22px;
  padding:1.75rem;width:min(880px,96vw);max-height:90vh;overflow-y:auto;
  box-shadow:var(--shadow-modal);
  backdrop-filter:blur(48px) saturate(180%);-webkit-backdrop-filter:blur(48px) saturate(180%);
}
.settings-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;font-size:.95rem;font-weight:600;color:var(--wh);}
.settings-modal-close{
  background:rgba(var(--ink),.08);
  border:1px solid rgba(var(--ink),.12);
  border-radius:50%;
  color:rgba(var(--ink),.6);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;flex-shrink:0;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:background .15s,color .15s,transform .15s var(--ease-spring);
  -webkit-tap-highlight-color:transparent;
}
.settings-modal-close:hover{background:rgba(var(--ink),.15);color:var(--wh);transform:scale(1.08);}
.settings-modal-close:active{transform:scale(.9);}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start;}
.settings-col{display:flex;flex-direction:column;gap:1rem;}
.settings-card{
  background:rgba(var(--ink),.03);border:1px solid rgba(var(--ink),.07);
  border-radius:14px;padding:1.1rem 1.2rem;
}
.settings-section-title{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(var(--ink),.35);margin-bottom:.8rem;}
.settings-2fa-status{font-size:.85rem;color:rgba(var(--ink),.6);margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem;}
.settings-hint{font-size:.78rem;color:rgba(var(--ink),.4);margin-bottom:.75rem;line-height:1.55;}
.settings-qr{width:140px;height:140px;border-radius:12px;border:2px solid rgba(var(--ink),.1);display:block;}
/* Angemeldete Geräte */
.session-list{display:flex;flex-direction:column;gap:.4rem;}
.session-row{
  display:flex;align-items:center;gap:.6rem;
  background:rgba(var(--ink),.04);border:1px solid rgba(var(--ink),.07);
  border-radius:10px;padding:.55rem .7rem;
}
.session-row-main{flex:1;min-width:0;}
.session-row-name{font-size:.82rem;color:rgba(var(--ink),.85);font-weight:600;display:flex;align-items:center;gap:.4rem;}
.session-row-meta{font-size:.72rem;color:rgba(var(--ink),.4);margin-top:.15rem;}
.session-badge{
  font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(var(--ink),.1);color:rgba(var(--ink),.55);
  border-radius:5px;padding:.1rem .35rem;
}
.session-revoke{
  background:none;border:none;cursor:pointer;flex-shrink:0;
  color:rgba(var(--ink),.35);padding:.25rem;border-radius:7px;line-height:0;
  transition:color .15s,background .15s;
}
.session-revoke:hover{color:var(--danger);background:rgba(var(--ink),.07);}
.session-empty{font-size:.78rem;color:rgba(var(--ink),.4);}
/* Push notification prefs */
.push-pref-group{margin-bottom:.85rem;}
.push-pref-label{font-size:.68rem;font-weight:600;color:rgba(var(--ink),.4);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.4rem;}
.push-pref-select{
  width:100%;background:rgba(var(--ink),.06);border:1px solid rgba(var(--ink),.1);
  border-radius:10px;padding:.5rem .7rem;color:var(--wh);font-family:inherit;font-size:.82rem;
  cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(var(--ink),.4)' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;padding-right:2rem;
}
.push-pref-select:focus{outline:none;border-color:rgba(var(--ink),.25);}
.push-pref-select option{background:var(--d3);color:var(--wh);}
.push-toggle-row{display:flex;flex-direction:column;gap:.5rem;}
.push-toggle-item{display:flex;align-items:center;gap:.6rem;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.push-toggle-item input[type=checkbox]{position:absolute;opacity:0;width:0;height:0;}
.push-toggle-track{
  width:36px;height:20px;border-radius:10px;flex-shrink:0;
  background:rgba(var(--ink),.12);border:1px solid rgba(var(--ink),.1);
  position:relative;transition:background .2s;
}
.push-toggle-track::after{
  content:'';position:absolute;top:2px;left:2px;
  width:14px;height:14px;border-radius:50%;background:#fff;
  transition:transform .2s var(--ease-spring);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.push-toggle-item input:checked + .push-toggle-track{background:#22c55e;border-color:#22c55e;}
.push-toggle-item input:checked + .push-toggle-track::after{transform:translateX(16px);}
.push-toggle-name{font-size:.82rem;color:rgba(var(--ink),.75);}
.totp-badge{font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:.2rem .55rem;border-radius:6px;}
.totp-on{background:rgba(22,163,74,.2);color:#4ade80;border:1px solid rgba(22,163,74,.3);}
.totp-off{background:rgba(var(--ink),.05);color:rgba(var(--ink),.35);border:1px solid rgba(var(--ink),.1);}
.totp-input-row{display:flex;align-items:center;gap:.75rem;}
.totp-input-row input{flex:1;}
.totp-timer{position:relative;width:52px;height:52px;flex-shrink:0;}
.totp-timer-svg{width:100%;height:100%;transform:rotate(-90deg);}
.totp-timer-bg{fill:none;stroke:rgba(var(--ink),.08);stroke-width:3;}
.totp-timer-ring{fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round;stroke-dasharray:138.23;stroke-dashoffset:0;transition:stroke-dashoffset .9s linear,stroke .4s;}
.totp-timer-ring.warn{stroke:#d97706;}
.totp-timer-num{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.72rem;font-weight:600;color:var(--wh);line-height:1;}
.totp-status-row{display:flex;align-items:center;gap:.75rem;}
.totp-status-row .totp-timer{width:44px;height:44px;}
.settings-divider{border:none;border-top:1px solid rgba(var(--ink),.07);margin:1.25rem 0;}
.pw-success-msg{font-size:.82rem;color:#4ade80;padding:.4rem 0;}
.stats-row-3{grid-template-columns:repeat(3,1fr);}
.stat-val-sm{font-size:1rem;}


/* ── 04-clients.css ───────────────────────────── */
/* =============================================================================
   04-clients.css — Kundenbuch, Kundensuche, Kundendetail, Kundenseite

   Teil von style.css (nach Bereichen aufgeteilt). Die Dateien werden in
   nummerierter Reihenfolge geladen — die Kaskade hängt daran, also nicht
   umsortieren. Eingebunden in index.html.
   ============================================================================= */

/* ── Client book layout ──────────────────────────────────────────────────── */
#viewClients.active{display:flex;flex-direction:column;height:calc(100vh - 100px);overflow:hidden;}
#viewClients .stats-row{flex-shrink:0;}
.kb-layout{padding:0 1.5rem 1.5rem;display:grid;grid-template-columns:1fr 1.6fr;gap:16px;align-items:stretch;flex:1;min-height:0;}
.kb-panel{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-card);}
#clientList{flex:1;overflow-y:auto;min-height:0;}
#clientDetail{overflow-y:auto;}
.kb-panel-header{padding:.85rem 1.2rem;background:rgba(var(--ink),.03);border-bottom:1px solid rgba(var(--ink),.05);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--wh6);font-weight:600;display:flex;align-items:center;justify-content:space-between;}
.kb-year-select{font-size:.68rem;font-weight:500;background:var(--d2);border:1px solid var(--wh08);color:var(--wh6);border-radius:6px;padding:.22rem .5rem;cursor:pointer;font-family:inherit;outline:none;letter-spacing:0;text-transform:none;transition:border-color .18s,color .18s;}
.kb-year-select:hover{border-color:rgba(var(--ink),.22);color:var(--wh);}
.kb-year-select option{background:var(--d2);color:var(--wh);}
.kb-empty{padding:3rem 1.4rem;text-align:center;}
.kb-empty p{font-size:.88rem;color:var(--wh4);}

/* ── Client search ───────────────────────────────────────────────────────── */
.kb-search-wrap{padding:.7rem 1rem;border-bottom:1px solid var(--wh05);}
.kb-search{
  width:100%;
  background:rgba(var(--ink),.07);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--wh08);
  border-radius:12px;
  padding:.55rem 1rem;
  font-size:.88rem;color:var(--wh);font-family:inherit;outline:none;
  transition:border-color .2s,background .2s;
  box-sizing:border-box;
}
.kb-search:focus{border-color:rgba(var(--ink),.25);background:rgba(var(--ink),.1);}
/* iOS Segmented Control (gleitender Thumb via updateSegThumbs) */
.kb-sort{
  display:flex;gap:2px;margin-top:.55rem;position:relative;
  background:rgba(var(--ink),.06);border:1px solid rgba(var(--ink),.08);
  border-radius:10px;padding:3px;
}
.kb-sort-btn{
  flex:1;padding:.32rem .5rem;border-radius:7px;cursor:pointer;
  background:none;border:none;position:relative;z-index:1;
  font-size:.7rem;font-weight:600;color:var(--wh4);font-family:inherit;
  transition:color .15s;
}
.kb-sort-btn:hover:not(.active){color:var(--wh6);}
.kb-sort-btn.active{color:var(--wh);}
.kb-sort .seg-thumb{border-radius:7px;}
.kb-search::placeholder{color:var(--wh4);}

/* ── Client list item ────────────────────────────────────────────────────── */
.cl-item{
  display:flex;align-items:center;gap:.9rem;
  padding:.95rem 1.2rem;
  border-bottom:none;
  cursor:pointer;
  transition:background .15s,transform .2s var(--ease-spring);
  position:relative;
}
/* iOS inset separator: beginnt nach dem Avatar */
.cl-item::after{
  content:'';position:absolute;left:calc(1.2rem + 42px + .9rem);right:0;bottom:0;
  height:1px;background:rgba(var(--ink),.06);
}
.cl-item:last-child::after{display:none;}
.cl-item:hover{background:rgba(var(--ink),.04);}
.cl-item:active{transform:scale(.98);background:rgba(var(--ink),.06);}
/* Chevron hint on desktop */
.cl-item::after{content:'›';color:var(--wh4);font-size:1.1rem;margin-left:auto;opacity:0;transition:opacity .15s,transform .15s;transform:translateX(-4px);}
.cl-item:hover::after{opacity:1;transform:translateX(0);}
.cl-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:700;color:var(--on-accent);flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.3);}
.cl-info{flex:1;min-width:0;}
.cl-name{font-size:.95rem;font-weight:600;margin-bottom:.18rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cl-meta{font-size:.75rem;color:var(--wh4);}
.cl-revenue{text-align:right;padding-right:.25rem;flex-shrink:0;}
.cl-revenue-val{font-size:.92rem;font-weight:700;font-variant-numeric:tabular-nums;}
.cl-revenue-pct{font-size:.72rem;margin-top:.1rem;font-variant-numeric:tabular-nums;}

/* ── Client detail panel ─────────────────────────────────────────────────── */
.cd-back-btn{display:none;}
.cd-header{padding:1.6rem 1.6rem 1.2rem;border-bottom:1px solid var(--wh08);display:flex;align-items:center;gap:1.2rem;}
.cd-avatar{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700;color:var(--on-accent);flex-shrink:0;}
.cd-name{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;}
.cd-branch{font-size:.8rem;color:var(--wh4);margin-top:.3rem;}
.cd-actions{margin-left:auto;display:flex;gap:.5rem;}
.cd-delete-btn{color:rgba(248,113,113,.6);border-color:rgba(248,113,113,.2);}
.cd-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--wh08);}
.cd-stat-cell{background:var(--d2);padding:1.1rem 1.2rem;}
.cd-stat-cell-label{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--wh4);margin-bottom:.4rem;}
.cd-stat-cell-val{font-size:1.3rem;font-weight:700;}
.cd-revenue-bar{padding:1rem 1.6rem;border-bottom:1px solid var(--wh08);}
.cd-revenue-label{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--wh4);margin-bottom:.6rem;}
.cd-bar-track{height:7px;background:var(--d3);border-radius:4px;overflow:hidden;}
.cd-bar-fill{height:100%;border-radius:4px;}
.cd-info-section{padding:1rem 1.6rem;border-bottom:1px solid var(--wh08);}
.cd-projects-section{padding:1rem 1.6rem;}
.cd-projects-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;}
.cd-projects-actions{display:flex;align-items:center;gap:.5rem;}
.cd-year-switcher .year-switcher-inner{gap:1px;border-radius:9px;padding:2px;}
.cd-year-switcher .year-btn{font-size:.72rem;padding:.22rem .5rem;border-radius:7px;}
.cd-projects-label{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--wh4);}
.cd-add-proj-btn{font-size:.72rem;padding:.25rem .65rem;}
.cd-proj-group{margin-bottom:1.2rem;}
.cd-proj-group-header{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--wh4);margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem;}
.cd-proj-count{background:rgba(var(--ink),.08);border-radius:20px;padding:.1rem .5rem;font-size:.72rem;font-weight:600;}
.cd-project-row{display:flex;align-items:center;gap:.8rem;padding:.7rem .4rem;border-bottom:1px solid var(--wh05);cursor:pointer;border-radius:7px;transition:background .15s;margin:0 -.4rem;}
.cd-project-row:hover{background:rgba(var(--ink),.04);}
.cd-proj-info{flex:1;min-width:0;}
.cd-project-name{display:block;font-size:.88rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cd-project-date{display:block;font-size:.72rem;color:var(--wh4);margin-top:.15rem;}
.cd-proj-badges{display:flex;gap:.35rem;flex-wrap:wrap;flex-shrink:0;}
.cd-project-amount{font-size:.88rem;font-weight:700;min-width:65px;text-align:right;flex-shrink:0;}
.cd-no-projects{font-size:.85rem;color:var(--wh4);}
.cd-proj-search-wrap{margin-bottom:.75rem;}
.cd-proj-search{font-size:.82rem;padding:.4rem .75rem;}
.cd-info-label{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--wh4);margin-bottom:.2rem;}
.cd-info-val{font-size:.92rem;color:var(--wh6);}
.cd-info-row{display:flex;align-items:flex-start;gap:.75rem;padding:.65rem 0;border-bottom:1px solid var(--wh05);}
.cd-info-row:last-child{border-bottom:none;}
.cd-info-icon{width:34px;height:34px;border-radius:8px;background:var(--d3);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cd-info-icon svg{width:15px;height:15px;stroke:var(--wh4);fill:none;stroke-width:2;}
.r-pill-sm{pointer-events:none;font-size:.68rem;}

/* ── Table footer sum ────────────────────────────────────────────────────── */
.t-footer-sum{color:var(--num);font-size:1rem;font-weight:700;}
.t-footer-sum-label{display:block;font-size:.7rem;color:rgba(var(--ink),.3);font-weight:400;}

/* ── Modals ──────────────────────────────────────────────────────────────── */
.modal-wide{width:680px;}
.modal-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 1.8rem;}
.confirm-actions{display:flex;gap:.7rem;justify-content:flex-end;}

/* ── Address Autocomplete Dropdown ───────────────────────────────────────── */
.places-dropdown{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(var(--srf2),.96);border:1px solid rgba(var(--ink),.12);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.65);margin-top:4px;overflow:hidden;z-index:9999;backdrop-filter:blur(32px) saturate(180%);-webkit-backdrop-filter:blur(32px) saturate(180%);}
.places-item{padding:.6rem .95rem;font-size:.88rem;color:rgba(var(--ink),.75);cursor:pointer;border-top:1px solid rgba(var(--ink),.06);}
.places-item:first-child{border-top:none;}
.places-item:hover{background:rgba(var(--ink),.07);color:var(--wh);}

/* ── Client page (pinned tab) ────────────────────────────────────────────── */
.cp-wrap{max-width:1300px;margin:0 auto;}
.cp-hero{display:flex;align-items:center;gap:1.5rem;background:var(--glass-bg);border:1px solid var(--glass-border);border-left:3px solid var(--cc,var(--red));border-radius:18px;padding:1.4rem 1.8rem;flex-wrap:wrap;gap:1.2rem;margin:1.5rem 1.5rem 0;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-card);}
.cp-hero-left{display:flex;align-items:center;gap:1.1rem;flex:0 0 auto;}
.cp-hero-avatar{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700;color:var(--on-accent);flex-shrink:0;}
.cp-hero-name{font-size:1.35rem;font-weight:700;letter-spacing:-.03em;}
.cp-hero-branch{font-size:.74rem;color:var(--wh4);margin-top:.2rem;}
.cp-hero-kpis{display:flex;gap:1.8rem;flex:1;justify-content:center;flex-wrap:wrap;}
.cp-kpi{text-align:center;}
.cp-kpi-label{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--wh4);margin-bottom:.3rem;}
.cp-kpi-val{font-size:1.1rem;font-weight:700;letter-spacing:-.025em;}
.cp-hero-actions{display:flex;gap:.5rem;flex:0 0 auto;flex-wrap:wrap;align-items:center;}
.cp-content{display:flex;flex-direction:column;gap:0;margin-top:1.2rem;}
.cp-projects-col{min-width:0;}
.cp-sidebar{display:flex;flex-direction:row;flex-wrap:wrap;gap:1.2rem;padding:1.2rem 1.5rem 1.5rem;}
.cp-sidebar .dash-panel{flex:1;min-width:260px;}
.cp-no-projs{padding:2.5rem 1.4rem;text-align:center;color:var(--wh3);font-size:.88rem;}
.cp-contact-body{padding:.9rem 1.4rem;display:flex;flex-direction:column;gap:.75rem;}
.cp-info-item{display:flex;align-items:flex-start;gap:.7rem;font-size:.85rem;color:var(--wh7);}
.cp-info-item svg{flex-shrink:0;margin-top:1px;opacity:.55;}
.cp-client-notes{padding:.9rem 1.4rem;font-size:.85rem;color:var(--wh6);line-height:1.65;}


/* ── 05-finance.css ───────────────────────────── */
/* =============================================================================
   05-finance.css — Finanzen, Dashboard, Mini-Kalender

   Teil von style.css (nach Bereichen aufgeteilt). Die Dateien werden in
   nummerierter Reihenfolge geladen — die Kaskade hängt daran, also nicht
   umsortieren. Eingebunden in index.html.
   ============================================================================= */

/* ── Finance view ────────────────────────────────────────────────────────── */
/* Vorjahresvergleich als Badge in der Netto-KPI */
.fin-yoy-badge{display:inline-block;vertical-align:.3em;font-size:.64rem;font-weight:700;letter-spacing:.05em;padding:.2rem .55rem;border-radius:980px;white-space:nowrap;}
.fin-yoy-badge.pos{background:rgba(34,197,94,.12);color:#22c55e;}
.fin-yoy-badge.neg{background:rgba(229,72,77,.12);color:#e5484d;}
html[data-theme="light"] .fin-yoy-badge.pos{color:#15803d;}
html[data-theme="light"] .fin-yoy-badge.neg{color:#c11a22;}
/* Finanzen: 3 KPI-Karten nebeneinander */
.dash-kpi-grid.fin-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
/* TVA-Panel nicht auf Nachbarhöhe strecken */
#viewFinance .dash-row{align-items:start;}
/* Einheitlicher Vertikal-Abstand zwischen den Finanz-Panels — Panels selbst
   haben keinen Margin, sonst kleben direkt aufeinanderfolgende aneinander */
#viewFinance .dashboard > .dash-panel{margin-bottom:1.5rem;}
#viewFinance .bank-panel{margin-top:0;}
/* Rechnungsstatus: Pills getönt statt Vollfarbe.
   Farbe nur wo sie etwas aussagt — reine Summenzeilen bleiben neutral. */
.fin-inv-row .r-bezahlt{background:rgba(34,197,94,.12);color:var(--pos);box-shadow:none;}
.fin-inv-row .r-zahlung{background:rgba(217,119,6,.14);color:var(--warn);box-shadow:none;}
.fin-inv-row .r-ausstehend{background:rgba(229,72,77,.13);color:var(--neg);box-shadow:none;}
.fin-inv-row .r-neutral{background:rgba(var(--ink),.07);color:var(--wh6);box-shadow:none;border:1px solid rgba(var(--ink),.1);}
.fin-tva-panel{border:1px solid rgba(245,158,11,.28) !important;background:rgba(245,158,11,.06) !important;padding:1.4rem;}
.fin-tva-title{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--warn);margin-bottom:.6rem;}
.fin-tva-amount{font-size:2.4rem;font-weight:800;color:var(--warn);letter-spacing:-.03em;line-height:1;}
.fin-tva-sub{font-size:.78rem;color:var(--wh4);margin-top:.5rem;}
.fin-inv-row{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1.4rem;border-bottom:1px solid var(--wh05);}
.fin-inv-row:last-child{border-bottom:none;}
.fin-inv-amount{font-size:.92rem;font-weight:700;}
.fin-table{width:100%;}
.fin-table-head{display:grid;grid-template-columns:1.4fr .7fr 1fr 1fr 1fr 1fr;padding:.6rem 1.4rem;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--wh4);border-bottom:1px solid var(--wh08);}
.fin-table-row{display:grid;grid-template-columns:1.4fr .7fr 1fr 1fr 1fr 1fr;padding:.75rem 1.4rem;border-bottom:1px solid var(--wh05);font-size:.88rem;align-items:center;}
.fin-table-row:hover{background:rgba(var(--ink),.025);}
.fin-table-footer{display:grid;grid-template-columns:1.4fr .7fr 1fr 1fr 1fr 1fr;padding:.75rem 1.4rem;background:var(--d3);border-top:1px solid var(--wh08);font-size:.88rem;font-weight:700;}
.fin-month{font-weight:600;}
.fin-tva-cell{color:var(--warn);}
.fin-paid-cell{color:#16a34a;}
/* Monatsübersicht: kompakte Tabelle statt 12 Karten */
.fin-month-table{padding:.2rem 0 .45rem;}
.fin-month-thead,.fin-month-tr{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:.6rem;padding:.44rem 1.4rem;align-items:baseline;}
.fin-month-thead{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--wh4);border-bottom:1px solid rgba(var(--ink),.07);padding-top:.55rem;padding-bottom:.55rem;}
.fin-month-thead span:not(:first-child),
.fin-month-tr span:not(:first-child){text-align:right;font-variant-numeric:tabular-nums;}
.fin-month-tr{font-size:.85rem;color:var(--wh6);border-bottom:1px solid rgba(var(--ink),.035);}
.fin-month-tr:last-child{border-bottom:none;}
.fin-month-tr.is-empty{opacity:.35;}
.fin-mt-name{font-weight:600;color:var(--wh);}
.fin-mt-count{font-style:normal;font-size:.68rem;font-weight:500;color:var(--wh4);margin-left:.5rem;}
.fin-chart{padding:1rem 1.4rem .25rem;display:flex;flex-direction:column;gap:.55rem;}
.fin-chart-row{display:grid;grid-template-columns:80px 1fr 90px;align-items:center;gap:.75rem;}
.fin-chart-label{font-size:.78rem;color:var(--wh6);font-weight:500;}
.fin-chart-bars{position:relative;height:10px;background:var(--wh08);border-radius:5px;overflow:hidden;}
.fin-chart-bar-bg{height:100%;border-radius:5px;background:rgba(var(--ink),.15);position:relative;transition:width .4s ease;}
.fin-chart-bar-paid{position:absolute;top:0;left:0;height:100%;border-radius:5px;background:#16a34a;transition:width .4s ease;}
.fin-chart-val{font-size:.8rem;font-weight:600;text-align:right;white-space:nowrap;}
.fin-chart-legend{display:flex;gap:1.2rem;padding:.25rem 1.4rem .75rem;border-bottom:1px solid var(--wh08);}
.fin-chart-leg{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--wh4);display:flex;align-items:center;gap:.35rem;}
.fin-chart-leg::before{content:'';display:inline-block;width:10px;height:4px;border-radius:2px;}
.fin-chart-leg-netto::before{background:rgba(var(--ink),.15);}
.fin-chart-leg-paid::before{background:#16a34a;}

/* ── Dashboard ───────────────────────────────────────────────────────────── */
.dashboard{padding:1.5rem;}
.dash-command{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(360px,.75fr);gap:14px;margin-bottom:1.5rem;}
.dash-command-hero,.dash-priority-panel{
  background:var(--glass-panel-bg);
  border:1px solid rgba(var(--ink),.105);
  border-radius:22px;
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-highlight),var(--shadow-card);
}
.dash-command-hero{position:relative;overflow:hidden;padding:1.45rem 1.55rem;}
.dash-command-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 14% 0%,rgba(208,17,27,.2),transparent 42%),
             radial-gradient(circle at 80% 10%,rgba(96,165,250,.11),transparent 38%);
  pointer-events:none;
}
.dash-command-hero>*{position:relative;}
.dash-command-kicker{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--ink),.45);margin-bottom:.65rem;}
.dash-command-title{font-size:1.75rem;font-weight:800;letter-spacing:-.045em;line-height:1.08;max-width:760px;}
.dash-command-sub{font-size:.86rem;color:rgba(var(--ink),.58);margin-top:.6rem;line-height:1.5;}
.dash-quick-actions{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1rem;}
.dash-quick-action{display:inline-flex;align-items:center;gap:.45rem;border:1px solid rgba(var(--ink),.12);border-radius:12px;background:rgba(var(--ink),.055);color:var(--wh);font-family:inherit;padding:.55rem .72rem;cursor:pointer;transition:transform .16s,border-color .16s,background .16s;min-height:38px;}
.dash-quick-action:hover{transform:translateY(-1px);border-color:rgba(var(--ink),.24);background:rgba(var(--ink),.09);}
.dash-quick-action span{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:7px;background:rgba(var(--ink),.1);font-size:.7rem;font-weight:800;}
.dash-quick-action strong{font-size:.74rem;font-weight:700;letter-spacing:0;white-space:nowrap;}
.dash-quick-action.primary{border-color:rgba(208,17,27,.28);background:rgba(208,17,27,.13);}
.dash-command-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;margin-top:1.25rem;}
.dash-command-metric{
  min-width:0;text-align:left;border:1px solid rgba(var(--ink),.11);
  border-radius:16px;padding:.75rem .85rem;cursor:pointer;color:var(--wh);font-family:inherit;
  background:linear-gradient(180deg,rgba(var(--ink),.1),rgba(var(--ink),.035));
  box-shadow:inset 0 1px 0 rgba(var(--ink),.12);
  transition:transform .18s var(--ease-spring),border-color .18s,background .18s;
}
.dash-command-metric:hover{transform:translateY(-2px);border-color:rgba(var(--ink),.2);background:linear-gradient(180deg,rgba(var(--ink),.14),rgba(var(--ink),.05));}
/* Grundzustand ist die Null — sie tritt zurück. Volle Helligkeit bekommen die
   Kacheln erst über .metric-active / .metric-alert, also wenn wirklich etwas
   anliegt. Sonst sieht ein ruhiger Tag aus wie ein volles Dashboard. */
.dash-command-metric span{display:block;font-size:1.35rem;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--dim);}
.dash-command-metric small{display:block;margin-top:.35rem;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(var(--ink),.42);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dash-priority-panel{overflow:hidden;}
.dash-priority-head{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1rem;border-bottom:1px solid rgba(var(--ink),.075);background:linear-gradient(180deg,rgba(var(--ink),.07),rgba(var(--ink),.025));font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--ink),.45);}
.dash-priority-count{border:1px solid rgba(var(--ink),.12);border-radius:980px;padding:.16rem .55rem;background:linear-gradient(180deg,rgba(var(--ink),.1),rgba(var(--ink),.035));}
.dash-priority-item{width:100%;box-sizing:border-box;display:grid;grid-template-columns:82px minmax(0,1fr) 18px;align-items:center;gap:.75rem;padding:.78rem 1rem;border:none;background:transparent;color:var(--wh);font-family:inherit;text-align:left;cursor:pointer;transition:background .15s,transform .18s;position:relative;}
/* iOS inset separator */
.dash-priority-item::after{content:'';position:absolute;left:calc(1rem + 82px + .75rem);right:0;bottom:0;height:1px;background:rgba(var(--ink),.06);}
.dash-priority-item:last-child::after{display:none;}
.dash-priority-item:last-child{border-bottom:none;}
.dash-priority-item:hover{background:rgba(var(--ink),.045);transform:translateX(3px);}
.dash-priority-type{justify-self:start;min-width:0;border:1px solid rgba(var(--ink),.12);border-radius:980px;padding:.22rem .5rem;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(var(--ink),.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dash-priority-item.is-danger .dash-priority-type{color:#fca5a5;border-color:rgba(239,68,68,.3);background:rgba(239,68,68,.1);}
.dash-priority-item.is-warn .dash-priority-type{color:#fbbf24;border-color:rgba(245,158,11,.28);background:rgba(245,158,11,.1);}
.dash-priority-item.is-info .dash-priority-type{color:#93c5fd;border-color:rgba(96,165,250,.26);background:rgba(96,165,250,.1);}
.dash-priority-item.is-private .dash-priority-type{color:#86efac;border-color:rgba(34,197,94,.28);background:rgba(34,197,94,.1);}
.dash-priority-main{min-width:0;}
.dash-priority-main strong,.dash-priority-main small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dash-priority-main strong{font-size:.82rem;font-weight:650;}
.dash-priority-main small{font-size:.69rem;color:rgba(var(--ink),.42);margin-top:.16rem;}
.dash-priority-arrow{color:rgba(var(--ink),.25);font-size:1.1rem;}
.dash-priority-empty{display:flex;flex-direction:column;gap:.25rem;padding:1.4rem 1rem;color:rgba(var(--ink),.38);font-size:.8rem;}
.dash-priority-empty strong{color:rgba(var(--ink),.76);font-size:.95rem;}
.dash-insights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:-.65rem 0 1.25rem;}
.dash-insight{display:grid;grid-template-columns:10px minmax(0,1fr) 14px;align-items:center;gap:.65rem;border:1px solid rgba(var(--ink),.1);border-radius:14px;background:rgba(var(--ink),.035);color:var(--wh);font-family:inherit;text-align:left;padding:.75rem .85rem;cursor:pointer;min-width:0;}
.dash-insight:hover{border-color:rgba(var(--ink),.2);background:rgba(var(--ink),.06);}
.dash-insight-dot{width:9px;height:9px;border-radius:50%;background:#60a5fa;}
.dash-insight.is-danger .dash-insight-dot{background:#ef4444;}
.dash-insight.is-warn .dash-insight-dot{background:#f59e0b;}
.dash-insight.is-bank .dash-insight-dot{background:#22c55e;}
.dash-insight-main{min-width:0;}
.dash-insight-main strong,.dash-insight-main small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dash-insight-main strong{font-size:.78rem;font-weight:750;}
.dash-insight-main small{font-size:.72rem;color:rgba(var(--ink),.42);margin-top:.14rem;}
.dash-insight-arrow{color:rgba(var(--ink),.28);}

/* KPI row */
.dash-kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-bottom:1.5rem;}
.dash-kpi-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:18px;padding:1.4rem 1.6rem;transition:border-color .25s,transform .25s var(--ease-spring),box-shadow .25s;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-card);}
.dash-kpi-card:hover{border-color:rgba(208,17,27,.25);transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.55),0 0 0 1px rgba(208,17,27,.1);}
.dash-kpi-card:active{transform:scale(.97)!important;}
/* Hero card */
.dash-kpi-hero{border-left:3px solid var(--red);grid-column:span 2;}
.dash-kpi-hero-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:.55rem;}
.dash-kpi-hero-val{font-size:2.6rem!important;letter-spacing:-.05em!important;}
.dash-kpi-hero-icon{width:44px;height:44px;border-radius:14px;background:rgba(208,17,27,.12);border:1px solid rgba(208,17,27,.2);display:flex;align-items:center;justify-content:center;color:var(--red);flex-shrink:0;}
/* Small icon badge on secondary cards */
.dash-kpi-icon-sm{width:26px;height:26px;border-radius:8px;background:rgba(var(--ink),.07);display:flex;align-items:center;justify-content:center;color:var(--wh4);margin-bottom:.6rem;}
/* Ring row */
.dash-kpi-ring-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.1rem;}
.dash-kpi-ring{flex-shrink:0;overflow:visible;}
.dash-kpi-label{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--wh4);margin-bottom:.5rem;}
.dash-kpi-val{font-size:2rem;font-weight:700;letter-spacing:-.04em;line-height:1;}
.dash-kpi-val.red{color:var(--num);}
.dash-kpi-val.muted{color:var(--wh4);font-size:1.25rem;letter-spacing:0;}
.dash-kpi-sub{font-size:.7rem;color:var(--wh4);margin-top:.45rem;}
.dash-kpi-focus{border-color:rgba(96,165,250,.18);}
.fin-balance-card{border-color:rgba(22,163,74,.22);}
.fin-balance-empty{font-size:2rem;font-weight:700;letter-spacing:-.04em;line-height:1;color:rgba(var(--ink),.2);}
.fin-reconnect-btn{background:none;border:1px solid rgba(var(--ink),.2);border-radius:6px;color:rgba(var(--ink),.6);cursor:pointer;font-family:inherit;font-size:.7rem;padding:.25rem .6rem;transition:border-color .15s,color .15s;}
.fin-reconnect-btn:hover{border-color:rgba(var(--ink),.5);color:var(--wh);}

/* Two-column rows */
.dash-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:1.5rem;}
.dash-row-chart{grid-template-columns:2fr 1fr;}
.dash-chart-panel{}
.dash-chart-wrap{padding:.85rem 1rem 1rem;height:180px;position:relative;}
.dash-chart-wrap canvas{width:100%!important;height:100%!important;}
.dash-quotes-total{padding:.55rem 1.2rem;font-size:.72rem;color:var(--wh4);border-top:1px solid var(--wh08);text-align:right;}

/* Panel card */
.dash-panel{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:18px;overflow:hidden;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-card);}
.dash-panel-header{padding:.72rem 1.2rem;background:rgba(var(--ink),.03);border-bottom:1px solid rgba(var(--ink),.05);display:flex;align-items:center;justify-content:space-between;}
.dash-panel-title{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--wh4);}
.dash-panel-count{font-size:.7rem;color:var(--wh4);background:var(--d2);border:1px solid var(--wh08);padding:.15rem .55rem;border-radius:980px;}

/* List items inside panels */
.dash-item{display:flex;align-items:center;gap:.75rem;padding:.68rem 1.2rem;border-bottom:1px solid var(--wh05);transition:background .15s,transform .18s;}
.dash-item:last-child{border-bottom:none;}
.dash-item-main{flex:1;min-width:0;}
.dash-item-name{font-size:.82rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dash-item-meta{font-size:.68rem;color:var(--wh4);margin-top:.15rem;}
.dash-item-amount{font-size:.82rem;font-weight:700;text-align:right;min-width:72px;flex-shrink:0;}
.dash-empty{padding:2.2rem;text-align:center;font-size:.78rem;color:rgba(var(--ink),.2);font-style:italic;}

/* Client bar in top clients panel */
.dash-client-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:var(--on-accent);flex-shrink:0;}
.dash-client-bar{height:3px;border-radius:2px;margin-top:.35rem;min-width:4px;}

/* Clickable states */
.dash-kpi-card[data-action]{cursor:pointer;}
.dash-item[data-action]{cursor:pointer;}
.dash-item[data-action]:hover{background:rgba(var(--ink),.04);transform:translateX(3px);}

/* ── Dashboard mini calendar ─────────────────────────────────────────────── */
.dcal-panel{margin-bottom:1.5rem;}
.dcal-header{justify-content:center;gap:1.2rem;}
.dcal-nav{font-size:1.2rem;padding:.05rem .45rem;line-height:1;}
.dcal-body{display:flex;min-height:0;}
.dcal-grid-wrap{padding:1rem 1.1rem;border-right:1px solid var(--wh08);flex-shrink:0;}
.dcal-grid{display:grid;grid-template-columns:repeat(7,34px);gap:2px;}
.dcal-dn{font-size:.7rem;color:var(--wh4);text-align:center;padding:.1rem 0 .5rem;font-weight:600;letter-spacing:.05em;}
.dcal-cell{display:flex;flex-direction:column;align-items:center;gap:3px;padding:.35rem .1rem;border-radius:9px;min-height:44px;cursor:pointer;transition:background .15s;}
.dcal-cell:hover{background:rgba(208,17,27,.12);}
.dcal-cell:hover .dcal-num{color:var(--wh);}
.dcal-busy:hover{background:rgba(208,17,27,.18);}
.dcal-today .dcal-num{background:var(--red);color:var(--on-accent);border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-weight:700;}
.dcal-num{font-size:.78rem;color:var(--wh6);line-height:1;}
.dcal-dots{display:flex;gap:2px;justify-content:center;flex-wrap:wrap;}
.dcal-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;}
.dcal-more{font-size:.68rem;color:var(--wh4);line-height:1;}
.dcal-events-list{flex:1;padding:.6rem .9rem;display:flex;flex-direction:column;gap:.25rem;}
.dcal-event{display:flex;align-items:center;gap:.7rem;padding:.55rem .65rem;border-radius:11px;transition:background .15s;}
.dcal-event:hover{background:rgba(var(--ink),.04);}
.dcal-event-date{display:flex;flex-direction:column;align-items:center;min-width:48px;flex-shrink:0;text-align:center;}
.dcal-event-d{font-size:.88rem;font-weight:700;color:var(--wh);line-height:1.2;white-space:nowrap;}
.dcal-event-dow{font-size:.7rem;color:var(--wh5);letter-spacing:.02em;white-space:nowrap;}
.dcal-event-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.dcal-event-main{flex:1;min-width:0;}
.dcal-event-name{font-size:.84rem;color:var(--wh);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dcal-event-meta{display:flex;gap:.5rem;align-items:baseline;margin-top:.15rem;flex-wrap:wrap;}
.dcal-event-client{font-size:.7rem;color:var(--wh4);white-space:nowrap;}
.dcal-event-addr{font-size:.68rem;color:var(--wh3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dcal-event-umsatz{font-size:.8rem;font-weight:700;color:var(--wh);white-space:nowrap;flex-shrink:0;margin-right:.3rem;}
.dcal-icloud-pill{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:980px;padding:.18rem .55rem;flex-shrink:0;}

/* ── Calendar event detail ───────────────────────────────────────────────── */
.cal-event-detail-modal{width:420px;max-width:calc(100vw - 2rem);background:rgba(var(--srf1),.94);border:1px solid rgba(var(--ink),.13);border-radius:20px;box-shadow:var(--shadow-modal);overflow:hidden;backdrop-filter:blur(42px) saturate(170%);-webkit-backdrop-filter:blur(42px) saturate(170%);}
.cal-event-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1rem 1.1rem;border-bottom:1px solid rgba(var(--ink),.08);}
.cal-event-detail-label{font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#86efac;margin-bottom:.35rem;}
.cal-event-detail-title{font-size:1rem;font-weight:800;color:var(--wh);letter-spacing:-.01em;line-height:1.2;}
.cal-event-detail-body{display:flex;flex-direction:column;gap:.55rem;padding:1rem 1.1rem;}
.cal-event-detail-row{border:1px solid rgba(var(--ink),.08);border-radius:12px;background:rgba(var(--ink),.035);padding:.68rem .75rem;}
.cal-event-detail-row span{display:block;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(var(--ink),.38);margin-bottom:.18rem;}
.cal-event-detail-row strong{font-size:.85rem;font-weight:700;color:var(--wh);}
.cal-event-detail-notes{font-size:.82rem;line-height:1.55;color:rgba(var(--ink),.68);border-top:1px solid rgba(var(--ink),.08);padding-top:.85rem;white-space:pre-wrap;}
.cal-event-detail-footer{display:flex;justify-content:flex-end;gap:.55rem;padding:.85rem 1.1rem;border-top:1px solid rgba(var(--ink),.08);background:rgba(var(--ink),.025);}


/* ── Fixkosten-Panel ─────────────────────────────────────────────────────── */
.fc-panel{margin-bottom:1.5rem;}
.fc-summary .bank-ledger-stat em{color:var(--wh4);}
.fc-stat-main{border-color:rgba(208,17,27,.28);background:rgba(208,17,27,.06);}
.fc-stat-main strong{color:var(--num);font-size:1.25rem;}
.fc-cats{display:flex;flex-direction:column;gap:.4rem;padding:.85rem 1.2rem;border-bottom:1px solid var(--wh08);}
.fc-cat-row{display:grid;grid-template-columns:minmax(0,9rem) 1fr auto;gap:.75rem;align-items:center;font-size:.74rem;}
.fc-cat-name{color:var(--wh5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fc-cat-bar{height:6px;border-radius:3px;background:rgba(var(--ink),.06);overflow:hidden;}
.fc-cat-bar span{display:block;height:100%;border-radius:3px;background:rgba(208,17,27,.55);}
.fc-cat-sum{font-variant-numeric:tabular-nums;color:var(--wh);font-weight:600;min-width:5.5rem;text-align:right;}
.fc-row{display:grid;grid-template-columns:minmax(0,1fr) auto 120px auto;gap:.85rem;align-items:center;padding:.6rem 1.4rem;border-bottom:1px solid rgba(var(--ink),.04);cursor:pointer;transition:background .15s;-webkit-tap-highlight-color:transparent;}
.fc-row:last-child{border-bottom:none;}
.fc-row:hover{background:rgba(var(--ink),.04);}
.fc-row:hover .rcpt-del{opacity:1;}
.fc-row.is-inactive{opacity:.5;}
.fc-row-main{min-width:0;}
.fc-row-name{font-size:.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fc-row-interval{font-size:.7rem;color:var(--wh4);white-space:nowrap;}
.fc-row-orig{font-size:.72rem;color:var(--wh4);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
.fc-row-amount{font-size:.88rem;font-weight:700;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
.fc-row-amount em{font-style:normal;font-weight:400;font-size:.66rem;color:var(--wh4);margin-left:.25rem;}
.fc-list{border-top:1px solid var(--wh08);}
.fc-list-head{display:flex;align-items:center;gap:.55rem;padding:.7rem 1.4rem;font-size:.78rem;font-weight:600;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent;}
.fc-list-head::-webkit-details-marker{display:none;}
.fc-list-head:hover{background:rgba(var(--ink),.04);}
.fc-list[open] > .fc-list-head .bank-month-chev{transform:rotate(90deg);}
.fc-list-hint{margin-left:auto;font-size:.7rem;font-weight:400;color:var(--wh4);}
.fc-list[open] > .fc-list-head{border-bottom:1px solid var(--wh08);}
.fc-inactive{border-top:1px solid var(--wh08);}
.fc-inactive summary{padding:.6rem 1.4rem;font-size:.72rem;color:var(--wh4);cursor:pointer;list-style:none;}
.fc-inactive summary::-webkit-details-marker{display:none;}
#fcBillingMonthField[hidden]{display:none;}
@media(max-width:768px){
  .fc-summary{grid-template-columns:1fr 1fr;padding:.85rem .9rem;}
  .fc-stat-main{grid-column:span 2;}
  .fc-cats{padding:.75rem .9rem;}
  .fc-cat-row{grid-template-columns:minmax(0,7rem) 1fr auto;}
  .fc-row{grid-template-columns:minmax(0,1fr) auto;padding:.6rem .9rem;row-gap:.1rem;}
  .fc-row-main{grid-row:1 / span 2;grid-column:1;}
  .fc-row-amount{grid-row:1;grid-column:2;}
  .fc-row-orig{grid-row:2;grid-column:2;}
  .fc-row .rcpt-row-actions{display:none;}
  .fc-inactive summary{padding:.6rem .9rem;}
  .fc-list-head{padding:.7rem .9rem;}
}
/* Schalter-Stil gilt sonst nur in .push-toggle-item */
#fixedCostModalBg .todo-modal-toggle-row input:checked + .push-toggle-track{background:#22c55e;border-color:#22c55e;}
#fixedCostModalBg .todo-modal-toggle-row input:checked + .push-toggle-track::after{transform:translateX(16px);}

/* ── 06-documents.css ───────────────────────────── */
/* =============================================================================
   06-documents.css — Rechnungen, Servicekatalog, Beleg-Editor, Druckvorlage

   Teil von style.css (nach Bereichen aufgeteilt). Die Dateien werden in
   nummerierter Reihenfolge geladen — die Kaskade hängt daran, also nicht
   umsortieren. Eingebunden in index.html.
   ============================================================================= */

/* ── Invoice list view ───────────────────────────────────────────────────────*/
.inv-view{padding:1.5rem;}
/* Kacheln behalten ihre Breite und rutschen sauber um, statt in ein festes
   4er-Raster gezwängt zu werden — bei fünf Kacheln blieb sonst ein Loch. */
.inv-kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,240px));gap:14px;justify-content:start;}
.inv-kpi{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:18px;padding:1.2rem 1.5rem;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-card);}
.inv-kpi-label{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--wh4);margin-bottom:.5rem;}
.inv-kpi-val{font-size:1.7rem;font-weight:700;letter-spacing:-.03em;}
.inv-kpi-val.green{color:var(--pos);}
.inv-empty{padding:3rem;text-align:center;color:var(--wh4);font-size:.85rem;}
.inv-table-wrap{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:18px;overflow:hidden;margin-top:1.5rem;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-card);}
.inv-group-stack{display:flex;flex-direction:column;gap:1rem;margin-top:1.15rem;}
.inv-group{border:1px solid var(--glass-border);border-radius:18px;background:rgba(var(--ink),.025);overflow:hidden;box-shadow:var(--shadow-card);}
.inv-group .inv-table-wrap{margin-top:0;border:none;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
.inv-group-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.82rem 1.1rem;border-bottom:1px solid rgba(var(--ink),.055);background:rgba(var(--ink),.028);}
.inv-group-header>div{display:flex;align-items:center;gap:.7rem;min-width:0;flex-wrap:wrap;}
.inv-group-bubble{display:inline-flex;align-items:center;border-radius:980px;padding:.28rem .72rem;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(var(--ink),.12);background:rgba(var(--ink),.08);color:var(--wh6);white-space:nowrap;}
.inv-group-title{font-size:.78rem;color:var(--wh4);}
.inv-group-total{font-size:.86rem;font-weight:800;color:var(--wh);font-variant-numeric:tabular-nums;white-space:nowrap;}
.inv-group-draft .inv-group-bubble{background:rgba(148,163,184,.12);border-color:rgba(148,163,184,.24);color:#cbd5e1;}
.inv-group-open .inv-group-bubble{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.28);color:#fbbf24;}
.inv-group-paid .inv-group-bubble{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.24);color:#4ade80;}
.inv-group-void .inv-group-bubble{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.2);color:var(--danger-bright);}
.inv-list-head{display:grid;grid-template-columns:1.2fr 1.2fr 1.2fr 1.6fr .9fr .9fr 1fr 1fr .4fr;padding:.65rem 1.2rem;background:rgba(var(--ink),.03);border-bottom:1px solid rgba(var(--ink),.05);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(var(--ink),.3);}
.inv-list-row{display:grid;grid-template-columns:1.2fr 1.2fr 1.2fr 1.6fr .9fr .9fr 1fr 1fr .4fr;padding:.8rem 1.2rem;border-bottom:1px solid rgba(var(--ink),.04);align-items:center;cursor:pointer;transition:background .15s;}
.inv-list-row:last-child{border-bottom:none;}
.inv-list-row:hover{background:rgba(var(--ink),.04);}
.inv-list-number{font-size:.78rem;font-weight:600;color:var(--wh);}
.inv-list-client,.inv-list-subject,.inv-list-project{font-size:.78rem;color:var(--wh6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:.5rem;}
.inv-list-project{color:var(--wh4);font-style:italic;}
.inv-list-date,.inv-list-due{font-size:.75rem;color:var(--wh4);}
.inv-list-amount{font-size:.82rem;font-weight:600;color:var(--wh);}
.inv-status-pill{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .7rem;border-radius:980px;white-space:nowrap;cursor:pointer;transition:opacity .15s;}
.inv-status-pill:hover{opacity:.75;}
.inv-status-draft{background:rgba(var(--ink),.08);color:rgba(var(--ink),.5);}
.inv-status-sent{background:rgba(234,179,8,.15);color:#fbbf24;}
.inv-status-paid{background:rgba(34,197,94,.15);color:#22c55e;}
.inv-status-void{background:rgba(239,68,68,.12);color:var(--danger-bright);}

/* ── Invoice view header ─────────────────────────────────────────────────────*/
/* Bereichswechsler und Sekundäraktion teilen sich eine Zeile — der Import-Button
   hatte sonst eine eigene, fast leere Reihe für sich. */
.inv-header-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.inv-header-row .doc-switcher{margin-bottom:0;}
.inv-header-row+*{margin-top:1.4rem;}
.inv-import-btn{font-size:.78rem;padding:.55rem 1.1rem;display:flex;align-items:center;}
.inv-import-btn[data-importing]{opacity:.5;pointer-events:none;}
.inv-imported-badge{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(var(--ink),.07);border:1px solid rgba(var(--ink),.12);color:rgba(var(--ink),.4);border-radius:4px;padding:.15rem .45rem;margin-left:.4rem;vertical-align:middle;}
/* ── Batch Import Modal ───────────────────────────────────────────────────── */
.batch-import-bg{align-items:flex-end;}
.batch-import-modal{background:var(--d1);border-radius:20px 20px 0 0;width:100%;max-width:680px;margin:0 auto;max-height:90dvh;display:flex;flex-direction:column;overflow:hidden;}
.batch-import-header{padding:1.25rem 1.25rem .75rem;border-bottom:1px solid var(--wh08);}
.batch-import-title{font-size:1.1rem;font-weight:600;margin:0 0 .2rem;}
.batch-import-subtitle{font-size:.8rem;color:var(--wh4);}
.batch-import-list{flex:1;overflow-y:auto;padding:.5rem .75rem;}
.batch-inv-row{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 0;border-bottom:1px solid var(--wh08);}
.batch-inv-row:last-child{border-bottom:none;}
.batch-inv-check{padding-top:.15rem;flex-shrink:0;}
.batch-inv-check input[type=checkbox]{width:18px;height:18px;accent-color:var(--red);cursor:pointer;}
.batch-inv-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.4rem;}
.batch-inv-top{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;}
.batch-inv-num{font-weight:600;font-size:.9rem;}
.batch-inv-date{font-size:.8rem;color:var(--wh5);}
.batch-inv-amt{font-size:.9rem;font-weight:500;color:#4ade80;margin-left:auto;}
.batch-inv-file{font-size:.72rem;color:var(--wh3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.batch-client-sel{width:100%;background:var(--d2);border:1px solid var(--wh12);border-radius:8px;color:var(--wh);padding:.4rem .6rem;font-size:.82rem;cursor:pointer;}
.batch-inv-warn{font-size:.72rem;color:#fbbf24;}
.batch-client-hint{font-size:.72rem;color:rgba(var(--ink),.38);display:block;margin-top:.2rem;}
.batch-client-hint.muted{color:rgba(var(--ink),.2);}
.batch-import-footer{padding:.75rem 1.25rem 1.25rem;border-top:1px solid var(--wh08);display:flex;gap:.75rem;justify-content:flex-end;}
.import-toast-success{border-color:rgba(74,222,128,.3);color:#4ade80;}

.import-toast{position:fixed;bottom:5rem;left:50%;transform:translateX(-50%) translateY(12px);background:var(--d2);border:1px solid rgba(var(--ink),.12);border-radius:12px;padding:.65rem 1.2rem;font-size:.8rem;color:var(--wh);z-index:9000;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;white-space:nowrap;box-shadow:0 8px 32px rgba(0,0,0,.5);}
.import-toast.import-toast-show{opacity:1;transform:translateX(-50%) translateY(0);}
.import-toast-action{
  margin-left:.9rem;padding:.3rem .7rem;border-radius:8px;cursor:pointer;
  background:rgba(var(--ink),.1);border:1px solid rgba(var(--ink),.18);
  color:var(--wh);font-size:.72rem;font-weight:700;font-family:inherit;
  pointer-events:auto;transition:background .15s;
}
.import-toast-action:hover{background:rgba(var(--ink),.18);}
.import-toast.import-toast-error{border-color:rgba(208,17,27,.35);color:var(--danger-bright);}
.import-toast.import-toast-warn{border-color:rgba(217,119,6,.35);color:#fbbf24;}
.inv-kpi-val.amber{color:var(--warn);}
.inv-empty-state{padding:3rem;text-align:center;color:var(--wh4);font-size:.85rem;display:flex;flex-direction:column;align-items:center;border:1px dashed var(--wh08);border-radius:16px;margin-bottom:1.5rem;}

/* ── Invoice custom dropdown buttons ────────────────────────────────────────*/
.inv-dd-btn{display:flex;align-items:center;gap:.45rem;background:var(--d3);border:1px solid var(--wh08);border-radius:8px;padding:.45rem .7rem;color:var(--wh);font-size:.82rem;font-family:inherit;cursor:pointer;transition:border-color .15s;width:100%;text-align:left;}
.inv-dd-btn:hover{border-color:rgba(var(--ink),.2);}
.inv-dd-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:rgba(var(--ink),.2);}
.inv-dd-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.inv-dd-chev{flex-shrink:0;color:var(--wh4);}
.inv-date-wrap{position:relative;}
.inv-calendar{position:absolute;top:calc(100% + 6px);left:0;background:var(--d2);border:1px solid rgba(var(--ink),.12);border-radius:16px;padding:.8rem;z-index:700;display:none;box-shadow:0 20px 60px rgba(0,0,0,.75);min-width:248px;}
.inv-calendar.open{display:block;animation:slideDown .15s ease;}

/* ── Servicekatalog ──────────────────────────────────────────────────────────*/
.inv-catalog{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:18px;overflow:hidden;margin-top:1.5rem;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-card);}
.inv-catalog-header{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.2rem;background:rgba(var(--ink),.03);border-bottom:1px solid rgba(var(--ink),.05);}
.inv-catalog-title{font-size:.82rem;font-weight:700;color:var(--wh);margin-right:.6rem;}
.inv-catalog-sub{font-size:.72rem;color:var(--wh4);}
.inv-catalog-add-btn{font-size:.72rem;flex-shrink:0;}
.inv-catalog-head{display:grid;grid-template-columns:1.5fr 2.5fr 1.2fr .6fr;padding:.5rem 1.2rem;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--wh4);border-bottom:1px solid var(--wh08);}
.inv-catalog-row{display:grid;grid-template-columns:1.5fr 2.5fr 1.2fr .6fr;padding:.7rem 1.2rem;border-bottom:1px solid var(--wh08);align-items:center;}
.inv-catalog-row:last-child{border-bottom:none;}
.inv-catalog-row:hover{background:rgba(var(--ink),.02);}
.inv-catalog-name{font-size:.82rem;font-weight:600;color:var(--wh);}
.inv-catalog-desc{font-size:.76rem;color:var(--wh4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:.5rem;}
.inv-catalog-price{font-size:.82rem;font-weight:600;color:var(--wh);text-align:right;}
.inv-catalog-actions{display:flex;gap:.3rem;justify-content:flex-end;}
.inv-catalog-edit{background:none;border:none;color:rgba(var(--ink),.3);font-size:.8rem;cursor:pointer;padding:.2rem .4rem;border-radius:4px;transition:color .15s,background .15s;}
.inv-catalog-edit:hover{color:var(--wh);background:rgba(var(--ink),.06);}
/* Catalog toolbar: search + category chips */
.inv-catalog-toolbar{display:flex;flex-direction:column;gap:.55rem;padding:.75rem 1.2rem;border-bottom:1px solid var(--wh08);background:rgba(var(--ink),.015);}
.inv-catalog-search-wrap{position:relative;display:flex;align-items:center;}
.inv-catalog-search-icon{position:absolute;left:.65rem;color:var(--wh4);pointer-events:none;flex-shrink:0;}
.inv-catalog-search{width:100%;background:var(--d2);border:1px solid var(--wh08);border-radius:8px;padding:.38rem .65rem .38rem 2rem;color:var(--wh);font-size:.8rem;font-family:inherit;transition:border-color .15s;}
.inv-catalog-search:focus{outline:none;border-color:rgba(208,17,27,.45);}
.inv-catalog-search-clear{position:absolute;right:.5rem;background:none;border:none;color:var(--wh4);cursor:pointer;font-size:.8rem;padding:.15rem .3rem;border-radius:4px;}
.inv-catalog-search-clear:hover{color:var(--wh);}
.inv-catalog-cats{display:flex;gap:.35rem;flex-wrap:wrap;}
.inv-cat-chip{background:rgba(var(--ink),.05);border:1px solid var(--wh08);border-radius:20px;padding:.22rem .7rem;font-size:.7rem;color:var(--wh4);cursor:pointer;transition:all .15s;white-space:nowrap;}
.inv-cat-chip:hover{color:var(--wh);border-color:rgba(var(--ink),.18);}
.inv-cat-chip.active{background:rgba(208,17,27,.18);border-color:rgba(208,17,27,.4);color:var(--danger-bright);}
/* Catalog group headers */
.inv-catalog-group-header{padding:.45rem 1.2rem;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--wh4);background:rgba(var(--ink),.02);border-bottom:1px solid var(--wh08);}
/* Badges in catalog rows */
.inv-cat-unit-badge,.inv-cat-badge{display:inline-block;margin-left:.45rem;padding:.08rem .45rem;border-radius:12px;font-size:.7rem;font-weight:600;vertical-align:middle;}
.inv-cat-unit-badge{background:rgba(99,102,241,.18);color:#a5b4fc;border:1px solid rgba(99,102,241,.25);}
.inv-cat-badge{background:rgba(var(--ink),.07);color:var(--wh4);border:1px solid var(--wh08);}
/* Price small unit label */
.inv-catalog-price small{font-size:.72rem;color:var(--wh4);font-weight:400;}
/* Product form row layout */
.inv-product-fields-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;}
.inv-product-input{background:var(--d2);border:1px solid var(--wh08);border-radius:8px;padding:.42rem .65rem;color:var(--wh);font-size:.82rem;font-family:inherit;transition:border-color .15s;width:100%;}
.inv-product-input:focus{outline:none;border-color:rgba(208,17,27,.5);}
.inv-product-modal-bg{position:fixed;inset:0;z-index:960;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.58);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);padding:1rem;}
.inv-product-modal-bg.show{display:flex;animation:fadeIn .18s ease;}
.inv-product-modal{width:min(860px,100%);max-height:min(760px,92dvh);display:flex;flex-direction:column;overflow:hidden;background:rgba(var(--srf1),.96);border:1px solid rgba(var(--ink),.11);border-radius:18px;box-shadow:var(--shadow-modal);animation:scaleIn .2s ease;}
.inv-product-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.1rem 1.2rem;border-bottom:1px solid var(--wh08);background:rgba(var(--ink),.03);}
.inv-product-modal-title{font-size:1rem;font-weight:700;color:var(--wh);}
.inv-product-modal-sub{font-size:.72rem;color:var(--wh4);margin-top:.18rem;}
.modal-x{width:30px;height:30px;border:none;border-radius:8px;background:rgba(var(--ink),.06);color:var(--wh5);cursor:pointer;font-size:.9rem;line-height:1;flex-shrink:0;}
.modal-x:hover{background:rgba(var(--ink),.1);color:var(--wh);}
.inv-product-modal-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.85fr);gap:1rem;padding:1.2rem;overflow-y:auto;flex:1;min-height:0;}
.inv-product-fields{display:grid;grid-template-columns:1fr 190px;gap:.85rem;}
.inv-product-desc-field{grid-column:1/-1;}
.inv-product-textarea{min-height:210px;line-height:1.55;resize:vertical;}
.inv-product-preview{border:1px solid var(--wh08);border-radius:8px;background:rgba(var(--ink),.025);padding:1rem;align-self:start;min-width:0;}
.inv-product-preview-label{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--wh4);margin-bottom:.85rem;}
.inv-product-preview-name{font-size:.92rem;font-weight:800;color:var(--wh);line-height:1.35;margin-bottom:.4rem;overflow-wrap:anywhere;}
.inv-product-preview-desc{font-size:.8rem;color:var(--wh5);white-space:pre-wrap;line-height:1.55;min-height:5rem;overflow-wrap:anywhere;}
.inv-product-preview-price{font-size:.86rem;font-weight:800;color:var(--wh);text-align:right;border-top:1px solid var(--wh08);margin-top:1rem;padding-top:.75rem;}
.inv-product-modal-actions{display:flex;gap:.55rem;justify-content:flex-end;padding:.9rem 1.2rem;border-top:1px solid var(--wh08);background:rgba(var(--ink),.025);}
.inv-catalog-pick{width:28px;height:28px;flex-shrink:0;background:none;border:1px solid var(--wh08);border-radius:6px;color:var(--wh4);font-size:.72rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s;}
.inv-catalog-pick:hover{color:var(--wh);border-color:rgba(var(--ink),.2);}

/* ── Invoice editor modal ────────────────────────────────────────────────────*/
.inv-editor-modal{background:rgba(var(--srf1),.93);border:1px solid rgba(var(--ink),.1);border-top:1px solid rgba(var(--ink),.15);border-radius:24px;width:min(1280px,98vw);max-height:96vh;display:flex;flex-direction:column;overflow:hidden;backdrop-filter:blur(48px) saturate(180%);-webkit-backdrop-filter:blur(48px) saturate(180%);box-shadow:var(--shadow-modal);}
.inv-editor-header{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.4rem;background:rgba(var(--ink),.03);border-bottom:1px solid rgba(var(--ink),.06);flex-shrink:0;}
.inv-editor-title{font-size:.95rem;font-weight:600;color:var(--wh);}
.inv-editor-split{flex:1;display:grid;grid-template-columns:1fr 380px;overflow:hidden;min-height:0;}
.inv-editor-body{overflow-y:auto;padding:1.4rem;display:flex;flex-direction:column;gap:.9rem;}
.inv-editor-preview{background:#0e0e0e;border-left:1px solid var(--wh08);display:flex;flex-direction:column;align-items:center;padding:.8rem .8rem 0;overflow-y:auto;}
.inv-preview-toolbar{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:.7rem;flex-shrink:0;}
.inv-preview-label{font-size:.72rem;color:rgba(var(--ink),.45);text-transform:uppercase;letter-spacing:.1em;}
.inv-preview-hint{font-size:.68rem;color:rgba(var(--ink),.25);margin-top:.14rem;}
.inv-preview-status{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:.24rem .55rem;border-radius:980px;background:rgba(148,163,184,.12);color:#94a3b8;border:1px solid rgba(148,163,184,.22);white-space:nowrap;}
.inv-preview-status-gesendet,.inv-preview-status-gesendet{background:rgba(245,158,11,.12);color:#f59e0b;border-color:rgba(245,158,11,.24);}
.inv-preview-status-bezahlt,.inv-preview-status-akzeptiert{background:rgba(22,163,74,.12);color:#22c55e;border-color:rgba(22,163,74,.24);}
.inv-preview-status-storniert,.inv-preview-status-abgelehnt{background:rgba(100,116,139,.16);color:#94a3b8;border-color:rgba(100,116,139,.25);}
.inv-preview-wrap{width:100%;position:relative;overflow:hidden;}
#invPreviewFrame,#qtePreviewFrame,#ctrPreviewFrame{width:794px;height:1123px;border:none;transform-origin:top left;display:block;background:#fff;border-radius:2px;box-shadow:0 4px 32px rgba(0,0,0,.6);}
.inv-editor-footer{display:flex;align-items:center;gap:.6rem;padding:.9rem 1.4rem;background:rgba(var(--ink),.025);border-top:1px solid rgba(var(--ink),.06);flex-shrink:0;}
/* PDF download button */
.btn-pdf{background:rgba(var(--ink),.07);color:var(--wh6);border:1px solid var(--wh08);display:flex;align-items:center;gap:.4rem;}
.btn-pdf:hover{background:rgba(var(--ink),.12);color:var(--wh);border-color:rgba(var(--ink),.2);}
/* Meta rows */
.inv-editor-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;}
.inv-editor-meta-cp{grid-template-columns:2fr 1fr;gap:.8rem;}
.inv-lang-row{grid-template-columns:1fr auto!important;}
.inv-lang-field{min-width:0;}
.inv-lang-toggle{display:flex;gap:2px;background:var(--d2);border:1px solid var(--wh12);border-radius:8px;padding:2px;}
.inv-lang-btn{background:transparent;border:none;color:rgba(var(--ink),.4);font-size:.75rem;font-weight:600;padding:.3rem .65rem;border-radius:6px;cursor:pointer;letter-spacing:.04em;transition:background .15s,color .15s;}
.inv-lang-btn.active{background:rgba(var(--ink),.12);color:var(--wh);}
.lang-radio-row{display:flex;gap:1rem;padding:.5rem 0;}
.lang-radio-opt{display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--wh7);cursor:pointer;}
.lang-radio-opt input{accent-color:var(--red);}
.inv-editor-field{display:flex;flex-direction:column;gap:.35rem;}
.inv-editor-field-client{grid-column:1;/* first col in 2fr grid */}
.inv-editor-field-subject{/* full width naturally */}
.inv-editor-field-notes{/* full width naturally */}
.inv-editor-field label{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--wh4);}
.inv-editor-field input,.inv-editor-field select,.inv-editor-field textarea{background:rgba(var(--ink),.05);border:1px solid rgba(var(--ink),.08);border-radius:8px;padding:.45rem .7rem;color:var(--wh);font-size:.82rem;font-family:inherit;transition:border-color .15s,background .15s;width:100%;}
.inv-editor-field input:focus,.inv-editor-field select:focus,.inv-editor-field textarea:focus{outline:none;border-color:rgba(208,17,27,.5);background:rgba(var(--ink),.07);}
.inv-editor-field textarea{resize:vertical;}
.inv-client-input::placeholder{color:var(--wh4);}
/* Items — grid layout so columns stay aligned */
.inv-items-header{display:grid;grid-template-columns:minmax(0,3fr) 30px minmax(48px,.75fr) minmax(70px,1fr) minmax(50px,.65fr) minmax(78px,1.05fr) 26px;align-items:center;gap:.5rem;padding:.35rem .4rem;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--wh4);border-bottom:1px solid var(--wh08);}
.inv-ih-qty,.inv-ih-price,.inv-ih-total,.inv-ih-discount{text-align:right;}
.inv-item-row{display:grid;grid-template-columns:minmax(0,3fr) 30px minmax(48px,.75fr) minmax(70px,1fr) minmax(50px,.65fr) minmax(78px,1.05fr) 26px;align-items:center;gap:.5rem;padding:.4rem 0;border-bottom:1px solid rgba(var(--ink),.04);}
/* Vertrags-Editor: eigenes Raster passend zu seinem Inline-Header (unabhaengig vom globalen) */
#ctrItemsList .inv-item-row{grid-template-columns:16px 1fr auto 80px 80px 70px 28px;}
.inv-item-desc{min-width:0;display:flex;flex-direction:column;gap:.25rem;}
.inv-item-input{background:var(--d3);border:1px solid var(--wh08);border-radius:7px;padding:.35rem .55rem;color:var(--wh);font-size:.78rem;font-family:inherit;width:100%;min-width:0;transition:border-color .15s;}
.inv-item-input:focus{outline:none;border-color:rgba(208,17,27,.4);}
.inv-item-detail{font-size:.72rem;color:var(--wh4);}
.inv-item-qty,.inv-item-price,.inv-item-discount{text-align:right;}
.inv-item-total{text-align:right;font-size:.8rem;font-weight:600;color:var(--wh);white-space:nowrap;}
.inv-item-del{width:22px;height:22px;flex-shrink:0;background:none;border:none;color:rgba(var(--ink),.25);font-size:.7rem;cursor:pointer;border-radius:4px;transition:color .15s,background .15s;}
.inv-item-del:hover{color:var(--danger-bright);background:rgba(248,113,113,.1);}
.inv-add-btns{margin-top:.35rem;display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}
.inv-add-line{background:none;border:1px dashed var(--wh08);border-radius:8px;color:var(--wh4);font-size:.74rem;padding:.4rem 1rem;cursor:pointer;transition:border-color .15s,color .15s;width:100%;}
.inv-add-line:hover{border-color:rgba(var(--ink),.2);color:var(--wh6);}
/* Filter bar */
.inv-filter-bar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:1rem 0 .5rem;flex-wrap:wrap;}
.inv-filter-pills{display:flex;gap:.35rem;flex-wrap:wrap;}
.inv-fs-pill{background:none;border:1px solid var(--wh08);border-radius:980px;padding:.28rem .75rem;font-size:.68rem;font-weight:600;letter-spacing:.04em;color:var(--wh4);cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:.3rem;}
.inv-fs-pill:hover{color:var(--wh6);border-color:rgba(var(--ink),.15);}
.inv-fs-pill.active{background:rgba(var(--ink),.1);border-color:rgba(var(--ink),.18);color:var(--wh);}
.inv-fs-pill-sent.active{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.25);color:#fbbf24;}
.inv-fs-pill-paid.active{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.22);color:#22c55e;}
.inv-fs-pill-void.active{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.18);color:var(--danger-bright);}
.inv-fs-count{font-size:.7rem;font-weight:700;opacity:.65;}
.inv-search-input{background:rgba(var(--ink),.05);border:1px solid var(--wh08);border-radius:8px;padding:.32rem .75rem;color:var(--wh);font-size:.78rem;font-family:inherit;width:170px;transition:border-color .15s,background .15s;}
.inv-search-input:focus{outline:none;border-color:rgba(var(--ink),.2);background:rgba(var(--ink),.07);}
.inv-search-input::placeholder{color:var(--wh3);}
/* Totals */
.inv-totals{margin-top:1rem;display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;padding-top:.8rem;border-top:1px solid var(--wh08);}
.inv-totals-row{display:flex;gap:2rem;font-size:.8rem;}
.inv-totals-row span:first-child{color:var(--wh4);min-width:100px;text-align:right;}
.inv-totals-row span:last-child{min-width:90px;text-align:right;font-weight:600;}
.inv-totals-total{font-size:.95rem;padding-top:.3rem;border-top:1px solid var(--wh08);}



/* ── 07-responsive.css ───────────────────────────── */
/* =============================================================================
   07-responsive.css — Breakpoints 768/640/480px

   Teil von style.css (nach Bereichen aufgeteilt). Die Dateien werden in
   nummerierter Reihenfolge geladen — die Kaskade hängt daran, also nicht
   umsortieren. Eingebunden in index.html.
   ============================================================================= */

/* =============================================================================
   MOBILE / RESPONSIVE — Breakpoints
   768px  = Tablet-Portrait (nav collapses)
   640px  = Mobile (board switches to card layout)
   480px  = Small mobile
   ============================================================================= */

/* ── Hamburger button (hidden on desktop) ───────────────────────────────────── */
.hamburger{display:none;background:none;border:none;cursor:pointer;color:var(--wh6);padding:.3rem;flex-shrink:0;}
.hamburger svg{display:block;}

/* ── Mobile FAB (hidden on desktop) ─────────────────────────────────────────── */
.mobile-fab{display:none;position:fixed;bottom:1.5rem;right:1.5rem;z-index:700;width:52px;height:52px;border-radius:50%;background:var(--red);border:none;color:var(--on-accent);cursor:pointer;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(208,17,27,.45);transition:transform .15s,box-shadow .15s;}
.mobile-fab:hover{transform:scale(1.08);box-shadow:0 6px 24px rgba(208,17,27,.55);}

/* ── Mobile nav overlay ─────────────────────────────────────────────────────── */
.nav-mobile-open .nav-bar{
  position:fixed;top:64px;left:0;right:0;z-index:800;
  flex-direction:column;align-items:flex-start;
  background:var(--d1);border-bottom:1px solid var(--wh08);
  padding:.5rem 0;gap:0;max-height:calc(100vh - 64px);overflow-y:auto;
}
.nav-mobile-open .nav-tab{width:100%;padding:.85rem 1.5rem;border-bottom:none;border-left:2px solid transparent;}
.nav-mobile-open .nav-tab.active{border-left-color:var(--red);}
.nav-mobile-open .nav-sep{width:calc(100% - 3rem);height:1px;margin:.3rem 1.5rem;}
.nav-mobile-open .mobile-fab{display:none;}
body.modal-open .mobile-fab{display:none!important;}

@media (max-width: 768px) {
  /* Topbar — Platzhalter in Höhe der Notch.
     Der Streifen klebt oben (position:sticky, top:0) und ist undurchsichtig,
     damit beim Scrollen kein Inhalt hinter der Statusleiste durchläuft. Mit
     einem flachen var(--blk) stach er als schwarzer Balken aus dem Verlauf
     heraus. Jetzt zeigt er dessen oberste Zeile — siehe Rezept in 01-base.css.
     Offset 0, weil top:0. */
  .topbar{
    height:env(safe-area-inset-top) !important;
    min-height:0 !important;
    padding:0 !important;
    background-color:var(--blk);
    background-image:var(--bg-glow);
    background-size:100vw 100vh;
    background-position:0 0;
    background-repeat:no-repeat;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border-bottom:none;
    box-shadow:none;
    pointer-events:none;
  }
  /* Hide all topbar content on mobile */
  .topbar-left,
  .topbar-search-wrap,
  .topbar-right,
  .topbar-year-progress,
  .hamburger{display:none!important;}

  /* Nav bar hidden on mobile (replaced by bottom tab bar) */
  .nav-bar{position:static;}
  .topbar-left{flex-shrink:0;}
  .topbar-logo{height:20px;width:auto;max-width:90px;}
  .topbar-year-progress{display:none;}
  .topbar-search-wrap{min-width:0;flex:1;}
  .topbar-right{gap:.4rem;}
  .topbar-right .btn-ghost:not(.btn-logout):not(.btn-settings){display:none;}
  #mainAddBtn{display:none;}
  .hamburger{display:flex;}

  /* FAB visible on mobile */
  .mobile-fab{display:flex;}

  /* Year-switcher wraps instead of overflowing */
  .year-switcher{padding:.4rem .75rem .2rem;}
  .year-switcher-inner{flex-wrap:wrap;}
  .year-btn{font-size:.68rem;padding:.28rem .65rem;}

  /* Status pills inside calendar events — don't force min-width */
  .dcal-event .status-pill{min-width:0;font-size:.68rem;padding:.18rem .55rem;}

  /* Modal dropdown buttons — smaller on mobile */
  .pd-dd-btn{font-size:.78rem;padding:.35rem .65rem;}

  /* Dashboard open invoices — compact pills */
  .dash-item .r-pill{min-width:0;font-size:.68rem;padding:.25rem .6rem;}

  /* Add bottom padding so FAB doesn't cover last content */
  .dashboard{padding-bottom:5rem;}
  .inv-view{padding-bottom:5rem;}
  .view-spacer{height:5rem;}

  /* Nav becomes hidden by default, toggled via .nav-mobile-open on body */
  .nav-bar{display:none;}
  .nav-mobile-open .nav-bar{display:flex;}

  /* Main content / dashboard padding */
  .dashboard{padding:.75rem;}
  .view.active{animation:viewSlideIn .26s cubic-bezier(.32,.72,0,1);}
  .dash-kpi-card,.stat-card,.dash-panel,.month-section,.kb-panel,.stat-strip-inner,.inv-panel,.bank-panel{
    border-color:rgba(var(--ink),.1);
  }
  .dash-command{grid-template-columns:1fr;gap:10px;margin-bottom:1rem;}
  .dash-command-hero{padding:1.1rem;}
  .dash-command-title{font-size:1.28rem;line-height:1.15;}
  .dash-command-sub{font-size:.78rem;}
  .dash-command-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin-top:1rem;}
  .dash-command-metric{padding:.68rem .75rem;border-radius:14px;}
  .dash-command-metric span{font-size:1.15rem;}
  .dash-priority-item{grid-template-columns:72px minmax(0,1fr) 14px;padding:.75rem .85rem;}

  /* Dashboard KPI grid → hero full width + 3 below */
  .dash-kpi-grid{grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:1rem;}
  .dash-kpi-hero{grid-column:1/-1;}
  .dash-kpi-focus{grid-column:span 1;}
  .dash-kpi-hero-val{font-size:2.2rem!important;}
  .dash-kpi-val{font-size:1.2rem;}
  .dash-kpi-ring{display:none;}  /* hide ring on mobile — keep card narrow */

  /* Dashboard panels → single column stack */
  .dash-row{grid-template-columns:1fr;gap:10px;margin-bottom:1rem;}
  #viewFinance .dashboard > .dash-panel{margin-bottom:1rem;}
  .dash-row-chart{grid-template-columns:1fr;}
  .dash-chart-wrap{height:150px;}

  /* Calendar → full width */
  .dcal-body{flex-direction:column;}
  .dcal-grid-wrap{border-right:none;width:100%;box-sizing:border-box;}
  .dcal-grid{grid-template-columns:repeat(7,1fr);}
  .dcal-cell{min-height:40px;}
  .dcal-events-list{border-top:1px solid var(--wh08);}

  /* Stats */
  .stats-row{grid-template-columns:repeat(2,1fr);gap:8px;padding:.65rem .75rem .4rem;}

  /* Invoice KPI row → 2 columns */
  .inv-kpi-row{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:1rem;}

  /* Rechnungskopf: Bereichswechsler oben, Import-Button darunter über die
     volle Breite — nebeneinander wird es auf dem Telefon zu eng. */
  .inv-header-row{
    display:grid;
    grid-template-columns:1fr;
    gap:.7rem;
    align-items:stretch;
    margin-bottom:1rem;
  }
  .inv-import-btn{
    min-width:0;
    width:100%;
    justify-content:center;
    padding:.62rem .55rem;
    font-size:.68rem;
    line-height:1.1;
    white-space:normal;
    text-align:center;
  }
  .inv-import-btn svg{margin-right:.25rem!important;flex-shrink:0;}

  /* Project detail modal — stack sidebar below main content */
  #projectDetailBg{align-items:flex-end;padding:0;}
  .pd-modal{width:100%;max-width:none;max-height:92dvh;height:92dvh;border-radius:22px 22px 0 0;border-left:none;border-right:none;border-bottom:none;animation:slideUp .24s cubic-bezier(.25,.46,.45,.94);}
  .pd-modal .modal-drag-handle{display:block;margin:.5rem auto .1rem;flex-shrink:0;}
  .pd-header{padding:.75rem .95rem .7rem;gap:.65rem;}
  .pd-name-input{font-size:1rem;}
  .pd-body{flex-direction:column;overflow-y:auto;}
  .pd-main{overflow-y:visible;padding:.9rem .95rem;gap:.9rem;}
  .pd-quick-actions{grid-template-columns:repeat(4,minmax(0,1fr));gap:.45rem;}
  .pd-quick-action{padding:.58rem .32rem;border-radius:11px;font-size:.72rem;}
  .pd-sidebar{width:100%;box-sizing:border-box;border-left:none;border-top:1px solid var(--wh08);overflow-y:visible;padding:.9rem .95rem 1.1rem;}
  .pd-pills-row{display:grid;grid-template-columns:1fr;gap:.65rem;}
  .pd-field-group{min-width:0;}
  .pd-dd-btn,.pd-dd-btn-wide{width:100%;max-width:none;justify-content:flex-start;}
  .pd-field-row{align-items:flex-start;gap:.5rem;}
  .pd-date-wrap{flex:1;min-width:0;}
  .pd-input-time{width:82px;height:34px;}
  .pd-footer{position:sticky;bottom:0;padding:.75rem .95rem calc(.75rem + env(safe-area-inset-bottom));}

  /* Invoice view padding */
  .inv-view{padding:.75rem;}

  /* Finance month table: compact on mobile */
  .fin-month-thead,.fin-month-tr{grid-template-columns:1fr 1fr 1fr 1fr;gap:.4rem;padding:.4rem .9rem;}
  .fin-month-tr{font-size:.78rem;}
  .fin-mt-count{display:none;}

  /* Projekte: Stats-Leiste als 2×2 auf Mobile */
  .stat-strip-item{flex:1 1 45%;padding:.5rem .8rem;}
  .stat-strip-item:nth-child(2){border-right:none;}
  .stat-strip-item:nth-child(-n+2){border-bottom:1px solid rgba(var(--ink),.06);}

  /* Finance table → fewer columns */
  .fin-table-head{grid-template-columns:1.8fr .8fr 1fr 1fr;padding:.5rem .9rem;}
  .fin-table-row{grid-template-columns:1.8fr .8fr 1fr 1fr;padding:.6rem .9rem;}
  .fin-table-footer{grid-template-columns:1.8fr .8fr 1fr 1fr;padding:.6rem .9rem;}
  .fin-table-head span:nth-child(5),
  .fin-table-row span:nth-child(5),
  .fin-table-footer span:nth-child(5),
  .fin-table-head span:nth-child(6),
  .fin-table-row span:nth-child(6),
  .fin-table-footer span:nth-child(6){display:none;}

  /* Global search results */
  .global-search-results{top:64px;left:.75rem;right:.75rem;width:auto;transform:none;}
  .cmdk-bg{padding:54px .75rem .75rem;align-items:flex-start;}
  .cmdk-panel{max-height:calc(100vh - 70px);border-radius:16px;}
  .cmdk-search{padding:.65rem;gap:.55rem;}
  .cmdk-search input{height:36px;font-size:.86rem;}
  .cmdk-item{grid-template-columns:30px minmax(0,1fr);padding:.58rem .62rem;}
  .cmdk-item-type{display:none;}

  /* ── Mobile client book — full-screen list + slide-in detail ─────────────── */
  #viewClients.active{height:auto;overflow:visible;}

  .kb-layout{
    display:block;
    padding:0;
    position:relative;
    overflow:hidden;        /* clip the slide */
  }

  /* Stats row — compact 2-col on mobile */
  .stats-row-3{grid-template-columns:1fr 1fr;gap:8px;padding:.75rem;}
  .stats-row-3 .stat-card:last-child{grid-column:1 / -1;}

  /* Client list panel — full width, no border-radius on sides */
  .kb-layout > .kb-panel:first-child{
    border-radius:0;
    border-left:none;border-right:none;
    background:transparent;
    border:none;
    margin-bottom:0;
  }

  /* Glass search bar */
  .kb-search-wrap{
    padding:.75rem .9rem;
    background:transparent;
    border-bottom:none;
    position:sticky;
    top:0;z-index:10;
  }
  .kb-search{
    background:rgba(var(--ink),.09);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-radius:14px;
    padding:.65rem 1.1rem;
    font-size:16px;
    border-color:transparent;
  }
  .kb-search:focus{border-color:rgba(var(--ink),.2);background:rgba(var(--ink),.13);}

  /* Section header */
  .kb-panel-header{
    background:transparent;
    border-bottom:none;
    padding:.3rem .9rem .0rem;
    font-size:.7rem;letter-spacing:.15em;color:var(--wh4);
  }

  /* Client list items — big iOS-style rows */
  .cl-item{
    padding:1rem 1.1rem;
    margin:0 .75rem;
    border-radius:14px;
    border-bottom:none;
    margin-bottom:.5rem;
    background:rgba(var(--ink),.04);
    border:1px solid var(--wh08);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    gap:1rem;
    animation:cardPop .3s var(--ease-spring) both;
  }
  .cl-item:nth-child(1){animation-delay:.04s}
  .cl-item:nth-child(2){animation-delay:.07s}
  .cl-item:nth-child(3){animation-delay:.10s}
  .cl-item:nth-child(4){animation-delay:.13s}
  .cl-item:nth-child(5){animation-delay:.16s}
  .cl-item:nth-child(6){animation-delay:.19s}
  .cl-item::after{display:none;} /* no hover chevron on mobile */
  .cl-item:active{transform:scale(.97)!important;background:rgba(var(--ink),.08);}

  .cl-avatar{width:46px;height:46px;font-size:.9rem;}
  .cl-name{font-size:1rem;font-weight:600;}
  .cl-meta{font-size:.78rem;}
  .cl-revenue-val{font-size:.95rem;}

  /* Add client row */
  .add-row{margin:.25rem .75rem .75rem;border-radius:14px;background:rgba(var(--ink),.04);border:1px solid var(--wh08);}

  /* ── Detail panel: slides in from the right ──────────────────────────────── */
  #clientDetail{
    position:fixed;
    inset:0;
    z-index:800;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    background:var(--d1);
    transform:translateX(100%);
    transition:transform .35s cubic-bezier(.32,.72,0,1);
    padding-top:0;
    padding-bottom:calc(54px + env(safe-area-inset-bottom));
    will-change:transform;
    border-radius:0;
    border:none;
  }
  #viewClients.client-detail-open #clientDetail{
    transform:translateX(0);
  }
  /* Block interaction with the list panel underneath — but NOT the fixed detail panel */
  #viewClients.client-detail-open .kb-panel:first-child{
    pointer-events:none;
    user-select:none;
  }

  /* Back button pinned inside detail panel */
  .cd-back-btn{
    display:flex;
    align-items:center;justify-content:center;
    width:36px;height:36px;flex-shrink:0;
    background:rgba(var(--ink),.09);
    border:1px solid rgba(var(--ink),.13);
    border-radius:50%;
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    color:rgba(var(--ink),.85);
    margin:max(env(safe-area-inset-top), 12px) 0 .5rem 1.1rem;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:background .15s,transform .15s var(--ease-spring);
  }
  .cd-back-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
  .cd-back-btn:active{transform:scale(.88);background:rgba(var(--ink),.16);}

  /* Detail content: remove side panels / gaps */
  .cd-header{padding:1rem 1.1rem .9rem;}
  .cd-stat-grid{border-radius:14px;overflow:hidden;margin:.75rem 1.1rem;background:none;}
  .cd-stat-cell{background:rgba(var(--ink),.05);backdrop-filter:blur(8px);}
  .cd-revenue-bar{padding:.75rem 1.1rem;}
  .cd-info-section{padding:.75rem 1.1rem;}
  .cd-projects-section{padding:.75rem 1.1rem;}

  /* On mobile: #clientDetail is position:fixed so it doesn't need display:none —
     the transform:translateX(100%) keeps it off-screen until opened */

  /* ── Client page: full mobile redesign ─────────────────────────────────── */
  .cp-hero{
    flex-direction:column;
    align-items:stretch;
    gap:.85rem;
    padding:1.1rem 1.1rem 1rem;
    margin:.6rem .75rem 0;
  }

  /* Top row: avatar + name */
  .cp-hero-left{gap:.9rem;}
  .cp-hero-name{font-size:1.1rem;}

  /* KPIs: 3-col glass grid */
  .cp-hero-kpis{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:.45rem;
    flex:unset;
    justify-content:unset;
  }
  .cp-kpi{
    background:rgba(var(--ink),.06);
    border-radius:12px;
    padding:.55rem .5rem .5rem;
    backdrop-filter:blur(8px);
    text-align:center;
  }
  .cp-kpi-val{font-size:.9rem;}
  .cp-kpi-label{font-size:.68rem;letter-spacing:.1em;}

  /* Actions: row, equal width */
  .cp-hero-actions{display:flex;gap:.45rem;flex-wrap:nowrap;}
  .cp-hero-actions .btn-sm{flex:1;text-align:center;padding:.44rem .3rem;font-size:.72rem;}

  /* Hide contact sidebar on mobile — accessible via Kunden tab */
  .cp-sidebar{display:none;}

  /* Prevent iOS Safari from zooming in when tapping inputs (< 16px triggers zoom) */
  .form-row input:not([type=radio]):not([type=checkbox]),.form-row select,.form-row textarea,
  .topbar-search-input,.board-search,.pd-input,
  .pd-name-input,.notes-editor{font-size:16px;}
}

@media (max-width: 640px) {
  /* ⌘K ist ein Desktop-Konzept — mobil ausblenden */
  .dash-quick-action[data-action="open-command-palette"]{display:none;}
  .dash-wt-card{flex-direction:column;align-items:stretch;gap:.55rem;}
  /* Mobil: identische Buttons wie im Zeit-Tab */
  .dash-wt-btns{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;}
  .dash-wt-btns .wt-btn{justify-content:center;gap:.5rem;padding:.8rem 1.2rem;font-size:.9rem;}
  .dash-wt-btns .wt-btn-start{grid-column:1 / -1;padding:.9rem 1.8rem;font-size:1.02rem;box-shadow:0 8px 24px rgba(16,185,129,.35);}
  .dash-wt-btns .wt-btn svg{width:18px;height:18px;}
  .dash-wt-btns .wt-btn-start svg{width:20px;height:20px;}

  /* Topbar: Suche volle Breite in eigener Zeile, Jahre horizontal scrollbar */
  .board-topbar{flex-direction:column;align-items:stretch;gap:.5rem;padding:.6rem .6rem .1rem;}
  .board-topbar .year-switcher{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .board-topbar .year-switcher::-webkit-scrollbar{display:none;}
  .board-topbar .year-switcher-inner{flex-wrap:nowrap;width:max-content;}
  .board-topbar .board-search{flex:0 0 auto;max-width:none;margin-left:0;width:100%;min-height:42px;}
  .stats-row{padding:.4rem .6rem .2rem!important;}

  /* Umsatz-Streifen: 4 Kennzahlen als 2×2-Grid statt gequetschter Zeile */
  .stat-strip-inner{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(var(--ink),.08);}
  .stat-strip-item{border-right:none;background:rgba(var(--srf1),.94);padding:.6rem .85rem;}
  .stat-strip-val{font-size:.98rem;}
  .stat-strip-note{display:block;margin-left:0;margin-top:.1rem;}
  .month-section{margin:0 .6rem .5rem;border-radius:18px;}

  /* ── Project table → glass cards ──────────────────────────────────────── */
  .t-head{display:none;}

  /* Month header gets tighter */
  .month-header{padding:.45rem .75rem;}
  .month-section{margin:0 .6rem .35rem;border-radius:10px;box-shadow:none;scroll-margin-top:95px;}
  .month-name{font-size:.68rem;letter-spacing:.08em;}
  .month-count{font-size:.66rem;}
  .month-sum{font-size:.7rem;}
  .month-now{font-size:.58rem;padding:.1rem .35rem;}
  .month-quiet{margin:.45rem .6rem 1rem;padding-top:.65rem;}
  .month-quiet-group{align-items:flex-start;gap:.4rem;}
  .month-quiet-label{width:100%;}
  .month-chip{font-size:.72rem;padding:.24rem .42rem;}

  /* Each row = glass card with client color accent */
  .t-row{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:.3rem .4rem;
    padding:.75rem 1rem .75rem calc(1rem + 3px);
    position:static;
    background:rgba(var(--ink),.035);
    border-left:3px solid var(--proj-color, rgba(var(--ink),.08));
    border-bottom:1px solid rgba(var(--ink),.05);
    transition:background .15s;
    animation:cardPop .32s var(--ease-spring) both;
  }
  .t-row:last-child{border-bottom:none;}
  .t-row:active{background:rgba(var(--ink),.07);}

  /* Stagger */
  .t-row:nth-child(1){animation-delay:.03s}
  .t-row:nth-child(2){animation-delay:.06s}
  .t-row:nth-child(3){animation-delay:.09s}
  .t-row:nth-child(4){animation-delay:.12s}
  .t-row:nth-child(5){animation-delay:.15s}
  .t-row:nth-child(6){animation-delay:.18s}
  .t-row:nth-child(7){animation-delay:.21s}

  /* Row 1: name (full width) */
  .t-row > div:nth-child(1){order:1;width:100%;min-width:0;}
  .proj-cell{gap:8px;align-items:center;}
  .proj-name-text{font-size:.95rem;font-weight:600;letter-spacing:-.015em;}

  /* Row 2: date (left) + revenue (right) */
  .t-row > div:nth-child(3){order:2;flex:1;min-width:0;}
  .t-row > div:nth-child(5){order:2;flex:0 0 auto;display:flex;justify-content:flex-end;align-items:center;}

  /* Row 3: status + invoice pills — small & subtle */
  .t-row > div:nth-child(2){order:3;flex:0 0 auto;display:flex;align-items:center;}
  .t-row > div:nth-child(6){order:3;flex:0 0 auto;display:flex;align-items:center;}

  /* Hidden: address, delete */
  .t-row > div:nth-child(4),
  .t-row > div:nth-child(7){display:none!important;}

  .t-row .umsatz-txt{font-size:.84rem;font-weight:700;color:var(--wh);}
  .t-row .umsatz-empty{display:none!important;}
  .t-row .umsatz-clear{display:none!important;}
  .t-row .umsatz-wrap{display:flex;align-items:center;gap:.25rem;}

  /* ── Pills: very compact on mobile ──────────────────────────────────────── */
  .t-row .status-pill,
  .t-row .r-pill{
    display:inline-flex;align-items:center;
    width:auto!important;
    padding:.2rem .55rem;
    font-size:.68rem;letter-spacing:.03em;
    border-radius:7px;
    white-space:nowrap;
    opacity:.8;
  }
  .t-row .r-leer{padding:.2rem .45rem;font-size:.7rem;}

  /* Date */
  .t-row .date-txt,
  .t-row .date-empty{font-size:.75rem;color:var(--wh4);}


  /* ── Proj-Row mobil: sauber zweizeilig ────────────────────────────────────
     Zeile 1: Avatar · Name · Betrag   |   Zeile 2: Meta · Status-Pills
     proj-main/title-stack werden per display:contents aufgelöst, damit die
     inneren Elemente direkt im Grid platziert werden können. */
  .proj-body{padding:.62rem .9rem .62rem .75rem;}
  .proj-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"av name amt" "meta meta pills";
    column-gap:.55rem;row-gap:.3rem;align-items:center;}
  .proj-main,.proj-title-stack{display:contents;}
  .proj-client-avatar{grid-area:av;}
  .proj-top .proj-name-text{grid-area:name;font-size:.91rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .proj-meta{grid-area:meta;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .proj-amount{grid-area:amt;justify-content:flex-end;border-top:none;padding-top:0;}
  .proj-statuses{grid-area:pills;justify-content:flex-end;flex-wrap:nowrap;}
  .proj-addr{display:none;}
  .proj-del{display:none;}

  /* Extra dates: 2-row grid — date+remove top, time+duration bottom */
  .pd-field-row.pd-extra-row{grid-template-columns:16px 1fr 44px;grid-template-rows:auto auto;row-gap:.4rem;}
  .pd-extra-row .pd-field-icon{grid-column:1;grid-row:1/span 2;align-self:start;margin-top:11px;}
  .pd-extra-row .pd-extra-date-inp{grid-column:2;grid-row:1;width:100%;}
  .pd-extra-row .pd-remove-date-btn{grid-column:3;grid-row:1;width:44px;height:44px;border-radius:10px;border-color:rgba(var(--ink),.1);background:rgba(var(--ink),.05);color:rgba(var(--ink),.5);}
  .pd-extra-row .pd-input-time{grid-column:2;grid-row:2;width:auto;height:40px;}
  .pd-extra-row .pd-input-duration{grid-column:3;grid-row:2;min-width:0;width:100%;height:40px;}
  .pd-note-row{padding-top:0;}
  .pd-note-row .pd-input{min-height:38px;}

  /* Main date row: 2-row grid — date top, time+duration bottom */
  .pd-field-row.pd-date-row{display:grid;grid-template-columns:16px 1fr auto;grid-template-rows:auto auto;row-gap:.4rem;align-items:center;}
  .pd-date-row>.pd-field-icon{grid-column:1;grid-row:1/span 2;align-self:start;margin-top:9px;}
  .pd-date-row>.pd-date-wrap{grid-column:2/span 2;grid-row:1;flex:none;min-width:0;}
  .pd-date-row>.pd-input-time{grid-column:2;grid-row:2;width:auto;height:38px;}
  .pd-date-row>.pd-input-duration{grid-column:3;grid-row:2;min-width:0;width:100%;height:38px;}

  /* Footer buttons — higher contrast on mobile */
  /* 4 Buttons (Löschen/Schließen/Rechnung/Speichern) → 2×2-Grid statt Quetsch-Zeile */
  .pd-footer{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}
  .pd-footer .btn-sm,.pd-footer .btn-primary,.pd-footer .btn-red{width:100%;margin:0;padding:.68rem .5rem;text-align:center;justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pd-footer .pd-delete-btn{margin-right:0;}
  .pd-footer .btn-ghost{border-color:rgba(var(--ink),.18);color:rgba(var(--ink),.75);background:rgba(var(--ink),.05);}

  /* Larger touch targets for inputs */
  .pd-input{min-height:40px;}
  .pd-dd-btn,.pd-dd-btn-wide{min-height:42px;}
  .pd-add-date-btn{min-height:42px;}

  /* Finance table — further hide columns */
  .fin-table-head span:nth-child(4),
  .fin-table-row span:nth-child(4),
  .fin-table-footer span:nth-child(4){display:none;}
  .fin-table-head{grid-template-columns:2fr .9fr 1fr;}
  .fin-table-row{grid-template-columns:2fr .9fr 1fr;}
  .fin-table-footer{grid-template-columns:2fr .9fr 1fr;}

  /* ── Modals: full-screen iOS sheet ─────────────────────────────────────── */
  .modal-bg{padding-top:0;align-items:stretch;}
  .cal-event-detail-bg{align-items:flex-end;padding:0;}
  .cal-event-detail-modal{
    width:100%;max-width:none;
    border-radius:18px 18px 0 0;
    animation:mobileModalIn .28s cubic-bezier(.32,.72,0,1);
  }
  .cal-event-detail-modal .modal-drag-handle{display:block;}
  .cal-event-detail-footer{padding-bottom:calc(.85rem + env(safe-area-inset-bottom));}
  .pd-modal,.inv-modal{
    width:100vw;max-width:100vw;
    height:100dvh;max-height:100dvh;
    border-radius:20px 20px 0 0;
    animation:mobileModalIn .38s cubic-bezier(.32,.72,0,1);
    transition:transform .35s cubic-bezier(.32,.72,0,1);
  }
  .pd-modal.swiping,.inv-editor-modal.swiping{transition:none;}
  @keyframes mobileModalIn{from{transform:translateY(100%);opacity:.7}to{transform:translateY(0);opacity:1}}

  /* Drag handle — visible pill at top of modal on mobile */
  .modal-drag-handle{
    display:block;
    width:40px;height:4px;border-radius:2px;
    background:rgba(var(--ink),.2);
    margin:.7rem auto .2rem;
    flex-shrink:0;
  }

  /* Header: become an iOS nav bar with back button */
  .pd-header{
    padding-top:max(env(safe-area-inset-top), 14px);
    padding-left:.9rem;
    padding-right:.9rem;
    padding-bottom:.7rem;
    flex-direction:row;
    align-items:center;
  }

  /* Hide the × close button — replaced by back button */
  .pd-header .notes-modal-close{display:none!important;}
  .pd-header .pd-header-meta{display:none!important;}

  /* Tappable back button — glass circle */
  .pd-back-btn{
    display:flex;align-items:center;justify-content:center;
    width:36px;height:36px;
    position:absolute;
    top:max(env(safe-area-inset-top), 10px);
    left:.9rem;
    background:rgba(var(--ink),.09);
    border:1px solid rgba(var(--ink),.13);
    border-radius:50%;
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    color:rgba(var(--ink),.85);
    cursor:pointer;z-index:10;
    -webkit-tap-highlight-color:transparent;
    transition:background .15s,transform .15s var(--ease-spring);
  }
  .pd-back-btn svg{stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
  .pd-back-btn:active{transform:scale(.88);background:rgba(var(--ink),.16);}

  /* Give header relative positioning for the absolute back btn */
  .pd-header{position:relative;padding-top:calc(max(env(safe-area-inset-top), 14px) + 2.4rem);}

  /* Name input: full width, larger */
  .pd-name-input{font-size:1.1rem;font-weight:700;width:100%;}

  /* Safe area for footer */
  .pd-footer{padding-bottom:max(.9rem, env(safe-area-inset-bottom));}
  .inv-modal-footer{padding-bottom:max(.9rem, env(safe-area-inset-bottom));}
  .inv-editor-footer{padding-bottom:max(.9rem, env(safe-area-inset-bottom));}

  /* Project detail: grouped glass sections on mobile */
  .pd-pills-row{
    margin:.5rem 0 .6rem;
    background:rgba(var(--ink),.05);
    border:1px solid rgba(var(--ink),.08);
    border-radius:16px;
    padding:.6rem .8rem;
    gap:.5rem;
    flex-wrap:wrap;
  }
  .pd-fields{
    background:rgba(var(--ink),.05);
    border:1px solid rgba(var(--ink),.08);
    border-radius:16px;
    padding:.4rem .6rem;
    margin-bottom:.65rem;
  }
  .pd-field-row{padding:.45rem 0;border-bottom:1px solid rgba(var(--ink),.05);}
  .pd-field-row:last-child{border-bottom:none;}
  /* Termin und seine Notiz bleiben optisch ein Block */
  .pd-date-row,.pd-extra-row{border-bottom:none;padding-bottom:.15rem;}
  .pd-note-row{padding-top:.15rem;}
  .pd-add-date-row{padding:.35rem 0;}
  .pd-attach-section,.pd-notes-section{
    background:rgba(var(--ink),.05);
    border:1px solid rgba(var(--ink),.08);
    border-radius:16px;
    padding:.75rem .9rem;
    margin-bottom:.65rem;
  }
  .pd-section-label{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--wh4);margin-bottom:.5rem;font-weight:600;}
  .pd-notes-toolbar{margin-bottom:.4rem;}

  /* Invoice editor modal: iOS nav bar with back button */
  .inv-editor-modal{
    width:100vw;max-width:100vw;
    height:100dvh;max-height:100dvh;
    border-radius:20px 20px 0 0;
    animation:mobileModalIn .38s cubic-bezier(.32,.72,0,1);
    display:flex;flex-direction:column;
  }
  .inv-editor-header{
    position:relative;
    padding-top:calc(max(env(safe-area-inset-top), 14px) + 2.4rem);
    padding-left:.9rem;padding-right:.9rem;padding-bottom:.7rem;
  }
  .inv-editor-header .notes-modal-close{display:none!important;}
  .inv-back-btn{
    display:flex;align-items:center;justify-content:center;
    width:36px;height:36px;
    position:absolute;
    top:max(env(safe-area-inset-top), 10px);left:.9rem;
    background:rgba(var(--ink),.09);
    border:1px solid rgba(var(--ink),.13);
    border-radius:50%;
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    color:rgba(var(--ink),.85);
    cursor:pointer;z-index:10;
    -webkit-tap-highlight-color:transparent;
    transition:background .15s,transform .15s var(--ease-spring);
  }
  .inv-back-btn svg{stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
  .inv-back-btn:active{transform:scale(.88);background:rgba(var(--ink),.16);}

  /* Invoice list → cards instead of squeezed table */
  .inv-table-wrap{
    background:none;
    border:none;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    margin-top:1rem;
    overflow:visible;
    display:flex;
    flex-direction:column;
    gap:.65rem;
  }
  .inv-group-stack{gap:.85rem;margin-top:1rem;}
  .inv-group{border-radius:16px;overflow:visible;background:transparent;border:none;box-shadow:none;}
  .inv-group-header{border:1px solid var(--wh08);border-radius:14px;background:rgba(var(--ink),.045);padding:.7rem .85rem;}
  .inv-group-title{font-size:.72rem;}
  .inv-group-total{font-size:.8rem;}
  .inv-list-head{display:none;}
  .inv-list-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:.28rem .75rem;
    padding:.85rem .95rem;
    border:1px solid var(--wh08);
    border-radius:14px;
    background:rgba(var(--ink),.045);
    box-shadow:0 10px 28px rgba(0,0,0,.18);
  }
  .inv-list-row span{min-width:0;}
  .inv-list-number{grid-column:1;grid-row:1;font-size:.86rem;}
  .inv-list-client{grid-column:1;grid-row:2;font-size:.74rem;color:var(--wh5);}
  .inv-list-date{grid-column:1;grid-row:3;display:block!important;font-size:.68rem;}
  .inv-list-amount{grid-column:2;grid-row:1;text-align:right;font-size:.86rem;white-space:nowrap;}
  .inv-status-pill{grid-column:2;grid-row:2;justify-self:end;align-self:center;font-size:.68rem;padding:.22rem .55rem;max-width:118px;overflow:hidden;text-overflow:ellipsis;}
  .inv-list-actions{grid-column:2;grid-row:3;justify-content:flex-end;gap:.35rem;}
  .inv-dl-btn,.inv-list-actions .del-btn{min-width:30px;min-height:30px;justify-content:center;}
  .inv-list-project,
  .inv-list-subject,
  .inv-list-due{display:none!important;}

  /* Invoice catalog table → simpler */
  .inv-catalog{border-radius:16px;margin-top:1rem;}
  .inv-catalog-header{align-items:stretch;gap:.75rem;flex-direction:column;}
  .inv-catalog-add-btn{width:100%;justify-content:center;padding:.58rem .7rem;}
  .inv-catalog-toolbar{padding:.65rem .85rem;gap:.45rem;}
  .inv-catalog-head span:nth-child(2),
  .inv-catalog-row span:nth-child(2){display:none;}
  .inv-catalog-head{grid-template-columns:minmax(0,1fr) 120px 56px;padding:.5rem .85rem;}
  .inv-catalog-row{grid-template-columns:minmax(0,1fr) 120px 56px;padding:.75rem .85rem;gap:.55rem;}
  .inv-catalog-name{font-size:.82rem;line-height:1.25;overflow-wrap:anywhere;}
  .inv-catalog-price{font-size:.82rem;white-space:nowrap;}
  .inv-catalog-actions{gap:.2rem;}
  .inv-product-modal-bg{align-items:flex-end;padding:0;}
  .inv-product-modal{width:100%;max-height:92dvh;border-radius:18px 18px 0 0;}
  .inv-product-modal-body{grid-template-columns:1fr;padding:1rem;}
  .inv-product-fields-row{grid-template-columns:1fr 1fr;}
  .inv-product-preview{display:none;}

  /* Finance inv-row panels stacked */
  .fin-tva-panel{margin-bottom:.75rem;}

  /* ── All modals: full-screen iOS sheet with back arrow ───────────────────── */
  .modal,.notes-modal,.settings-modal{
    width:100vw;max-width:100vw;
    height:100dvh;max-height:100dvh;
    border-radius:0;
    animation:mobileModalIn .35s cubic-bezier(.32,.72,0,1);
    overflow-y:auto;
  }
  .modal{padding:0 1.2rem 1.2rem;}
  .settings-modal-bg{padding:0;align-items:stretch;}
  .settings-grid{grid-template-columns:1fr;}
  .settings-modal{padding:1.2rem;}

  /* Form columns: single column on mobile */
  .modal-2col{grid-template-columns:1fr;gap:0;}

  /* Modal containers: relative so back btn can be absolute */
  .modal,.notes-modal,.settings-modal{position:relative;}

  /* Push title down to make room for the back arrow */
  .modal-title{
    padding-top:calc(max(env(safe-area-inset-top),14px) + 3rem);
    margin-bottom:.5rem;
    border-bottom:1px solid var(--wh08);
    padding-bottom:.9rem;
  }
  .modal-title::before{display:none;}

  .notes-modal-header,.settings-modal-header{
    padding-top:calc(max(env(safe-area-inset-top),14px) + 3rem);
    padding-bottom:.9rem;
    border-bottom:1px solid var(--wh08);
  }

  /* Footer: safe area + hide Abbrechen (arrow closes) */
  .modal-btns{padding-bottom:max(.9rem,env(safe-area-inset-bottom));justify-content:stretch;}
  .modal-btns .btn-ghost{display:none;}
  .modal-btns .btn-red{flex:1;}
  .notes-modal-footer{padding-bottom:max(.9rem,env(safe-area-inset-bottom));}

  /* ── Shared iOS-style back arrow ─────────────────────────────────────── */
  .modal-back-btn{
    display:flex;align-items:center;justify-content:center;
    position:absolute;
    top:max(env(safe-area-inset-top),10px);left:.9rem;
    width:36px;height:36px;
    background:rgba(var(--ink),.09);
    border:1px solid rgba(var(--ink),.13);
    border-radius:50%;
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    color:rgba(var(--ink),.85);cursor:pointer;z-index:10;
    -webkit-tap-highlight-color:transparent;
    transition:background .15s,transform .15s var(--ease-spring);
  }
  .modal-back-btn svg{stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
  .modal-back-btn:active{transform:scale(.88);background:rgba(var(--ink),.16);}

  /* Hide × buttons on mobile — arrow replaces them */
  .notes-modal-close,.settings-modal-close{display:none!important;}

  /* Project detail footer: safe area only (modal is now above tab bar) */
  .pd-footer{padding-bottom:max(.9rem,env(safe-area-inset-bottom));}
}

@media (max-width: 480px) {
  .stats-row{grid-template-columns:1fr 1fr;gap:6px;padding:.75rem;}
  .stat-val{font-size:1.4rem;}
  .topbar{height:50px;}
  .topbar-logo{height:18px;}
  .global-search-results{top:50px;}
  .cmdk-bg{padding:44px .5rem .5rem;}
  .cmdk-panel{max-height:calc(100vh - 54px);}
  .cmdk-search kbd{display:none;}
  .dash-command-title{font-size:1.12rem;}
  .dash-command-kicker{font-size:.68rem;}
  .dash-priority-item{grid-template-columns:minmax(0,1fr) 14px;gap:.42rem .55rem;}
  .dash-priority-type{grid-column:1/-1;margin-bottom:-.12rem;justify-self:stretch;width:100%;box-sizing:border-box;max-width:none;}
  .dash-command-metrics{gap:.48rem;}
  .dash-command-metric small{font-size:.68rem;}
  .dash-kpi-val{font-size:1.1rem;}
  .dash-kpi-val.muted{font-size:1rem;}
  .inv-kpi-val{font-size:1.1rem;}
}

/* ── Bank / Kontoauszug ──────────────────────────────────────────────────────── */
.bank-panel{margin-top:1.5rem;}
.bank-panel .dash-panel-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;}
.bank-header-right{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
.bank-balance-badge{font-size:1.05rem;font-weight:600;color:var(--wh9);letter-spacing:.01em;}
.bank-sync-ts{font-size:.72rem;color:var(--wh4);}
.bank-sync-error{font-size:.72rem;color:#f59e0b;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.18);border-radius:999px;padding:.22rem .55rem;}
.bank-import-btn{margin-left:auto;}
.btn-warn{background:rgba(251,146,60,.15);color:#fb923c;border:1px solid rgba(251,146,60,.3);border-radius:6px;padding:.3rem .7rem;font-size:.78rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;}

.bank-ledger-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:1rem 1.2rem;border-bottom:1px solid var(--wh08);}
.bank-ledger-stat{border:1px solid var(--wh08);border-radius:8px;background:rgba(var(--ink),.025);padding:.75rem .85rem;min-width:0;}
.bank-ledger-stat span{display:block;font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--wh4);margin-bottom:.32rem;}
.bank-ledger-stat strong{display:block;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bank-ledger-stat em{display:block;font-style:normal;font-size:.68rem;color:#f59e0b;margin-top:.22rem;}
.bank-section-title{padding:.85rem 1.2rem .35rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--wh4);}
.bank-section-title-list{border-top:1px solid var(--wh08);padding-top:.95rem;}
.bank-month-summary{border-bottom:1px solid var(--wh08);padding-bottom:.75rem;}
.bank-month-row{display:grid;grid-template-columns:160px 1fr 130px;gap:.75rem 1rem;margin:.45rem 1.2rem 0;padding:.7rem;border:1px solid var(--wh08);border-radius:8px;background:rgba(var(--ink),.022);align-items:center;}
.bank-month-main{min-width:0;}
.bank-month-label{display:block;font-size:.86rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bank-month-ratio{display:block;font-size:.68rem;color:var(--wh4);margin-top:.15rem;}
.bank-month-flow{display:flex;flex-direction:column;gap:5px;min-width:0;}
.bank-bar-row{display:grid;grid-template-columns:28px 1fr 96px;align-items:center;gap:.45rem;}
.bank-flow-label{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--wh4);}
.bank-bar-track{height:7px;border-radius:4px;background:var(--wh08);overflow:hidden;min-width:0;}
.bank-bar{height:100%;border-radius:4px;min-width:2px;flex-shrink:0;}
.bank-bar-in{background:#16a34a;}
.bank-bar-out{background:var(--danger-bright);}
.bank-bar-val{font-size:.76rem;white-space:nowrap;text-align:right;}
.bank-month-saldo{font-size:.82rem;font-weight:600;text-align:right;white-space:nowrap;}

.bank-tx-list{display:flex;flex-direction:column;gap:0;padding:0 1.2rem .7rem;}
.bank-date-group{font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--wh4);padding:.9rem 0 .35rem;}
.bank-tx-row{display:grid;grid-template-columns:10px 1fr;align-items:start;gap:.75rem;padding:.78rem .8rem;border:1px solid var(--wh08);border-radius:8px;background:rgba(var(--ink),.02);margin-bottom:7px;}
.bank-tx-row:last-child{margin-bottom:0;}
.bank-tx-in{background:rgba(22,163,74,.025);}
.bank-tx-out{opacity:.82;}
.bank-tx-mark{width:8px;height:8px;border-radius:50%;margin-top:.36rem;background:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.12);}
.bank-tx-out .bank-tx-mark{background:var(--danger-bright);box-shadow:0 0 0 4px rgba(248,113,113,.12);}

.bank-tx-desc{min-width:0;}
.bank-tx-topline{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;min-width:0;}
.bank-tx-name{font-size:.875rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bank-tx-ref{font-size:.75rem;color:var(--wh4);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bank-tx-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem;margin-top:.4rem;}
.bank-tx-type{font-size:.68rem;color:var(--wh4);border:1px solid var(--wh08);border-radius:980px;padding:.12rem .45rem;}
.bank-tx-amt{font-size:.9rem;font-weight:700;text-align:right;white-space:nowrap;}
.bank-amt-pos{color:#16a34a;}
.bank-amt-neg{color:var(--danger-bright);}

.bank-match-badge{font-size:.7rem;padding:.14rem .48rem;border-radius:980px;background:#16a34a22;color:#16a34a;font-weight:600;white-space:nowrap;}
.bank-match-miss{background:#f59e0b22;color:#d97706;}

.bank-match-select{font-size:.75rem;padding:.3rem .6rem;border:1px solid var(--wh08);border-radius:8px;background:var(--d3);color:var(--wh);cursor:pointer;max-width:200px;font-family:inherit;outline:none;-webkit-appearance:none;transition:border-color .15s;}
.bank-match-select:focus{border-color:var(--red);}
.bank-match-select option{background:var(--d3);color:var(--wh);}
.bank-unmatch-btn,.bank-dismiss-btn{font-size:.72rem;}

.bank-dismissed-note{text-align:center;font-size:.78rem;color:var(--wh4);padding:.5rem 0 .25rem;}

@media (max-width: 640px) {
  .bank-ledger-summary{grid-template-columns:repeat(2,1fr);padding:.8rem;gap:7px;}
  .bank-month-row{grid-template-columns:1fr;margin:.45rem .8rem 0;gap:.65rem;}
  .bank-month-saldo{text-align:left;font-size:.92rem;}
  .bank-bar-row{grid-template-columns:28px 1fr 88px;}
  .bank-tx-list{padding:0 .8rem .7rem;}
  .bank-tx-row{grid-template-columns:9px 1fr;gap:.6rem;padding:.72rem;}
  .bank-tx-topline{align-items:flex-start;}
  .bank-tx-name{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
  .bank-tx-amt{font-size:.86rem;}
  .bank-tx-type{display:inline-flex;}
  .bank-match-select{max-width:100%;width:100%;}
}


/* =============================================================================
   MOBILE — Scrollverhalten
   Steht bewusst am Ende: Diese Regeln nehmen weiter oben Gesetztes gezielt
   zurück und müssen deshalb später in der Kaskade stehen.
   ============================================================================= */

@media (max-width: 768px) {

  /* ── Kein Blur auf mitscrollenden Flächen ──────────────────────────────────
     backdrop-filter zwingt den Browser, für jedes Element eine eigene Ebene zu
     führen und deren Untergrund pro Frame neu zu filtern. Bei einer Liste sind
     das schnell dreißig Ebenen gleichzeitig — genau das ruckelt beim Scrollen.
     Sichtbar ändert sich nichts: Hinter diesen Karten liegt der flache
     Seitenhintergrund, es gibt also nichts zu verwischen. Die Leiste oben, die
     Tab-Leiste unten und die Dialoge behalten ihr Glas — dort scrollt der
     Inhalt tatsächlich dahinter durch, und es sind wenige, feste Elemente. */
  .month-section,
  .cl-item,
  .cp-kpi,
  .cd-stat-cell,
  .stat-card,
  .kb-panel,
  .cp-hero,
  .dash-panel,
  .dash-kpi-card,
  .dash-command-hero,
  .dash-priority-panel,
  .bank-panel{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  /* ── Einblenden nur beim Ansichtswechsel ───────────────────────────────────
     Die Listen wurden bisher bei jedem Neuzeichnen neu eingeblendet — und neu
     gezeichnet wird auch, wenn nur im Hintergrund ein Datensatz ankommt. Die
     Liste zuckte dann unter dem Finger. Am Desktop hing die Animation schon
     immer an .view-animate (wird beim Wechsel gesetzt, nach 800 ms entfernt);
     mobil galt sie unbedingt. Jetzt gleich: einmal beim Öffnen, danach Ruhe.

     Langform statt Kurzschreibweise: animation:… würde animation-delay auf 0
     zurücksetzen und damit die gestaffelten Verzögerungen weiter oben
     auslöschen — die Karten kämen dann alle gleichzeitig. */
  .t-row,
  .cl-item{
    animation-name:none;
  }
  .view.view-animate .t-row,
  .view.view-animate .cl-item{
    animation-name:cardPop;
    animation-fill-mode:both;
  }

  /* ── Rückmeldung beim Antippen ─────────────────────────────────────────────
     Eine Projektzeile hatte bisher nur einen Farbwechsel über 150 ms — der
     Finger ist längst wieder weg, bevor etwas zu sehen ist, und die Zeile
     wirkt tot. Die Kundenliste macht es seit jeher richtig (kurz eindrücken).
     Der Monatskopf, der die Liste auf- und zuklappt, hatte gar keine
     Rückmeldung. Das Eindrücken selbst kommt sofort (transition-duration:0s
     in 01-base.css), das Zurückfedern übernimmt die eigene Transition. */
  .t-row{transition:background .15s,transform .22s var(--ease-spring);}
  .t-row:active{transform:scale(.985);background:rgba(var(--ink),.08);}

  .month-header{transition:background .15s,transform .22s var(--ease-spring);}
  .month-header:active{transform:scale(.99);background:rgba(var(--ink),.07);}
}

@media (max-width: 768px) {
  /* Abgelaufene Monate am Handy noch etwas flacher — hier zählt jede Zeile,
     die man weniger scrollen muss, bis der laufende Monat im Bild ist.
     Erklärung der Regel in 02-chrome.css. */
  .month-past.month-collapsed{margin-bottom:.12rem;}
  .month-past.month-collapsed .month-header{padding:.16rem .75rem;line-height:1.25;}
  .month-past.month-collapsed .month-name{font-size:.61rem;}
  .month-past.month-collapsed .month-count{font-size:.59rem;}
  .month-past.month-collapsed .month-sum{font-size:.7rem;}
  .month-past.month-collapsed .month-toggle{width:12px;height:12px;}
  .month-past.month-collapsed .month-toggle svg{width:8px;height:8px;}
}

@media (max-width: 768px) {
  /* Archivblock am Handy — Erklärung der Regel in 02-chrome.css */
  .month-archive{margin:0 .6rem .35rem;border-radius:10px;}
  .month-archive-header{padding:.38rem .75rem;gap:.6rem;}
  .month-archive-header .month-name{font-size:.62rem;}
  .month-archive-header .month-count{font-size:.6rem;}
  .month-archive-header .month-sum{font-size:.74rem;}
  .month-archive-body{padding:.25rem .28rem .3rem;}
}

/* ── 08-tabbar.css ───────────────────────────── */
/* =============================================================================
   08-tabbar.css — iOS-Tab-Leiste unten (nur mobil)

   Teil von style.css (nach Bereichen aufgeteilt). Die Dateien werden in
   nummerierter Reihenfolge geladen — die Kaskade hängt daran, also nicht
   umsortieren. Eingebunden in index.html.
   ============================================================================= */

/* =============================================================================
   iOS BOTTOM TAB BAR
   Only visible on mobile (≤768px). Replaces hamburger + mobile-fab.
   ============================================================================= */

/* Hidden by default — shown only on mobile */
.btm-nav{display:none;transition:transform .32s cubic-bezier(.32,.72,0,1),opacity .22s ease;}
.btm-nav.btm-nav-hidden{transform:translateY(calc(100% + 14px));opacity:.2;}
.btm-more-sheet{display:none;}
.btm-more-overlay{display:none;}

@media (max-width: 768px) {

  /* ── Hide old nav elements replaced by bottom bar ─────────────────────────── */
  .hamburger{display:none!important;}
  .mobile-fab{display:none!important;}
  .nav-bar{display:none!important;}

  /* ── Bottom tab bar ───────────────────────────────────────────────────────── */
  .btm-nav{
    display:flex;
    position:fixed;
    bottom:max(8px, env(safe-area-inset-bottom));
    left:10px;right:10px;
    z-index:900;
    height:58px;
    padding:4px 6px;
    background:var(--glass-chrome-bg);
    backdrop-filter:blur(34px) saturate(210%);
    -webkit-backdrop-filter:blur(34px) saturate(210%);
    border:1px solid rgba(var(--ink),.13);
    border-radius:24px;
    box-shadow:inset 0 1px 0 rgba(var(--ink),.18),0 16px 48px rgba(0,0,0,.5),0 5px 18px rgba(0,0,0,.32);
    align-items:center;
    justify-content:space-around;
    gap:0;
    overflow:visible;
  }
  .btm-nav::before{
    content:'';
    position:absolute;
    inset:-12px -10px -10px;
    z-index:-1;
    border-radius:30px;
    background:linear-gradient(180deg,transparent,rgba(0,0,0,.28));
    pointer-events:none;
  }

  /* Push page content above the bar */
  .app-wrap{padding-bottom:calc(82px + env(safe-area-inset-bottom));}
  .dashboard{padding-bottom:calc(96px + env(safe-area-inset-bottom) + .75rem);}
  .inv-view{padding-bottom:calc(96px + env(safe-area-inset-bottom) + .75rem);}
  .view-spacer{height:calc(96px + env(safe-area-inset-bottom) + 1rem);}

  /* ── Tab buttons ──────────────────────────────────────────────────────────── */
  .btm-nav-btn{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;
    flex:1;height:50px;
    background:none;border:none;
    color:rgba(var(--ink),.5);
    cursor:pointer;
    font-family:inherit;
    transition:color .2s,transform .2s var(--ease-spring);
    -webkit-tap-highlight-color:transparent;
    min-width:0;
    position:relative;
    border-radius:18px;
  }
  .btm-nav-btn.active{color:var(--wh);}

  /* Spring bounce on tap */
  .btm-nav-btn:active .btm-nav-icon{animation:btmBounce .35s cubic-bezier(.36,.07,.19,.97) both;}

  .btm-nav-icon{
    width:22px;height:22px;
    flex-shrink:0;
    transition:transform .2s var(--ease-spring);
  }
  .btm-nav-btn.active .btm-nav-icon{transform:scale(1.12);}

  .btm-nav-label{
    font-size:.68rem;font-weight:500;
    letter-spacing:.02em;
    line-height:1;
    transition:opacity .2s;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .btm-nav-btn:not(.active) .btm-nav-label{opacity:.55;}

  /* Active indicator — sliding pill behind active tab */
  .btm-pill{
    position:absolute;
    top:7px;
    left:0;
    width:0;
    height:44px;
    border-radius:18px;
    background:linear-gradient(180deg,rgba(var(--ink),.22),rgba(var(--ink),.08));
    border:1px solid rgba(var(--ink),.14);
    box-shadow:inset 0 1px 0 rgba(var(--ink),.2),0 8px 18px rgba(0,0,0,.22);
    pointer-events:none;
    z-index:0;
    transition:transform .38s var(--ease-spring), width .38s var(--ease-spring), opacity .2s;
    opacity:0;
  }
  .btm-pill.visible{opacity:1;}
  .btm-nav-btn{z-index:1;}

  /* ── FAB in center ────────────────────────────────────────────────────────── */
  .btm-nav-fab{
    width:52px;height:52px;
    border-radius:50%;
    background:linear-gradient(180deg,#ff333d 0%,var(--red) 48%,#9e0c14 100%);
    border:1px solid rgba(var(--ink),.14);
    color:var(--on-accent);
    font-size:1.8rem;line-height:1;
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:inset 0 1px 0 rgba(var(--ink),.32),0 8px 24px rgba(208,17,27,.48),0 0 0 0 rgba(208,17,27,.3);
    flex-shrink:0;
    margin:0 2px;
    transition:transform .2s var(--ease-spring),box-shadow .2s;
    -webkit-tap-highlight-color:transparent;
    animation:fabPulse 3s ease-in-out infinite;
  }
  .btm-nav-fab:active{
    transform:scale(.91);
    box-shadow:0 2px 10px rgba(208,17,27,.4);
    animation:none;
  }

  /* ── "Mehr" bottom sheet ──────────────────────────────────────────────────── */
  .btm-more-sheet{
    display:block;
    position:fixed;
    bottom:0;left:0;right:0;
    z-index:1100;
    background:linear-gradient(180deg,rgba(var(--ink),.08),rgba(var(--ink),.035)),rgba(13,13,21,.76);
    backdrop-filter:blur(42px) saturate(210%);
    -webkit-backdrop-filter:blur(42px) saturate(210%);
    border-radius:24px 24px 0 0;
    border-top:1px solid rgba(var(--ink),.12);
    padding:0 0 calc(env(safe-area-inset-bottom) + .5rem);
    transform:translateY(100%);
    transition:transform .38s cubic-bezier(.32,.72,0,1);
    will-change:transform;
    box-shadow:inset 0 1px 0 rgba(var(--ink),.13),0 -10px 44px rgba(0,0,0,.55);
  }
  .btm-more-sheet.open{transform:translateY(0);}

  .btm-more-handle{
    width:40px;height:4px;border-radius:2px;
    background:rgba(var(--ink),.18);
    margin:.85rem auto .6rem;
  }

  /* Search field inside Mehr sheet */
  .btm-more-search-wrap{
    display:flex;align-items:center;gap:.6rem;
    margin:.2rem 1rem .6rem;
    background:linear-gradient(180deg,rgba(var(--ink),.12),rgba(var(--ink),.045));
    border:1px solid rgba(var(--ink),.13);
    border-radius:16px;
    padding:.65rem 1rem;
    box-shadow:inset 0 1px 0 rgba(var(--ink),.12);
  }
  .btm-more-search-wrap svg{color:var(--wh4);flex-shrink:0;}
  .btm-more-search{
    flex:1;background:none;border:none;outline:none;
    font-size:16px;color:var(--wh);font-family:inherit;
  }
  .btm-more-search::placeholder{color:var(--wh3);}
  .btm-more-search-clear{background:none;border:none;color:var(--wh4);font-size:.75rem;cursor:pointer;padding:0;line-height:1;}

  /* ── Homescreen-style app grid ─────────────────────────────────────────────── */
  .btm-more-section-label{
    font-size:.68rem;font-weight:600;letter-spacing:.1em;
    text-transform:uppercase;color:rgba(var(--ink),.35);
    padding:.55rem 1.1rem .15rem;
  }

  .btm-more-app-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:4px;
    padding:.1rem .6rem .3rem;
  }
  .btm-more-app-grid-sm{
    grid-template-columns:repeat(4,1fr);
    padding-bottom:calc(.3rem + env(safe-area-inset-bottom));
  }

  .btm-more-app{
    display:flex;flex-direction:column;align-items:center;
    gap:.42rem;background:none;border:none;cursor:pointer;
    padding:.5rem .2rem;border-radius:14px;
    transition:opacity .12s,background .12s,transform .12s;
    font-family:inherit;
    -webkit-tap-highlight-color:transparent;
  }
  .btm-more-app:active{
    opacity:.72;
    background:rgba(var(--ink),.07);
    transform:scale(.98);
    transition:opacity 0s;
  }

  .btm-more-app-icon{
    width:54px;height:54px;border-radius:13px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 2px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(var(--ink),.18);
    flex-shrink:0;
  }

  .btm-more-app-label{
    font-size:.72rem;font-weight:500;color:rgba(var(--ink),.82);
    text-align:center;line-height:1.2;
  }

  /* Staggered entrance */
  .btm-more-sheet.open .btm-more-app-grid{animation:sheetItemIn .28s .08s var(--ease-spring) both;}
  .btm-more-sheet.open .btm-more-app-grid + .btm-more-section-label,
  .btm-more-sheet.open .btm-more-app-grid + .btm-more-section-label + .btm-more-app-grid{
    animation:sheetItemIn .28s .16s var(--ease-spring) both;
  }
  .btm-more-sheet.open .btm-more-pinned-row{animation:sheetItemIn .25s .04s var(--ease-spring) both;}

  /* ── Pinned clients row ──────────────────────────────────────────────────── */
  .btm-more-pinned-row{
    display:flex;gap:.6rem;
    overflow-x:auto;padding:.1rem .9rem .4rem;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .btm-more-pinned-row::-webkit-scrollbar{display:none;}
  .btm-more-pinned-app{
    display:flex;flex-direction:column;align-items:center;gap:.35rem;
    background:none;border:none;cursor:pointer;
    padding:.2rem;flex-shrink:0;
    transition:opacity .12s;
    font-family:inherit;
    -webkit-tap-highlight-color:transparent;
  }
  .btm-more-pinned-app:active{opacity:.55;transition:opacity 0s;}
  .btm-more-pinned-icon{
    width:48px;height:48px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:.85rem;font-weight:700;color:var(--on-accent);
    box-shadow:0 2px 8px rgba(0,0,0,.35);
    flex-shrink:0;
  }
  .btm-more-pinned-label{
    font-size:.7rem;font-weight:500;color:rgba(var(--ink),.6);
    max-width:56px;text-align:center;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }

  .btm-more-sep{display:none;}

  /* ── Overlay behind sheet ─────────────────────────────────────────────────── */
  .btm-more-overlay{
    display:block;
    position:fixed;inset:0;
    z-index:1099;
    background:rgba(0,0,0,.5);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    opacity:0;pointer-events:none;
    transition:opacity .25s;
  }
  .btm-more-overlay.open{opacity:1;pointer-events:auto;}

  /* ── Modal safe area: push above tab bar ──────────────────────────────────── */
  .pd-footer{padding-bottom:max(.9rem, env(safe-area-inset-bottom));}
  .inv-modal-footer{padding-bottom:max(.9rem, env(safe-area-inset-bottom));}
}


/* ── 09-calendar.css ───────────────────────────── */
/* =============================================================================
   09-calendar.css — Badges, überfällige Rechnungen, Kalenderansichten

   Teil von style.css (nach Bereichen aufgeteilt). Die Dateien werden in
   nummerierter Reihenfolge geladen — die Kaskade hängt daran, also nicht
   umsortieren. Eingebunden in index.html.
   ============================================================================= */

/* ── Notification badge ──────────────────────────────────────────────────────── */
.notif-badge{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--red);color:var(--on-accent);
  font-size:.68rem;font-weight:700;line-height:1;
  min-width:15px;height:15px;border-radius:980px;padding:0 3px;
  margin-left:5px;vertical-align:middle;
}

/* ── Overdue invoice notice ──────────────────────────────────────────────────── */
.overdue-notice{
  display:flex;align-items:center;gap:.5rem;
  background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);
  border-radius:10px;padding:.65rem 1rem;
  font-size:.8rem;color:#fca5a5;margin-bottom:1rem;
}
.overdue-notice svg{flex-shrink:0;color:var(--danger-bright);}
.overdue-notice strong{color:var(--wh);}

/* ── Calendar view ───────────────────────────────────────────────────────────── */
/* Calendar view fills the full viewport below topbar + navbar */
#viewCalendar.active{
  display:flex;flex-direction:column;
  height:calc(100dvh - 112px);
  overflow:hidden;
}
.vcal-wrap{padding:1.25rem;flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;}

/* Header */
.vcal-hdr{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.25rem;gap:1rem;
}
.vcal-hdr-center{display:flex;align-items:center;gap:.75rem;}
.vcal-title{font-size:1.35rem;font-weight:700;color:var(--wh);letter-spacing:-.02em;margin:0;}
.vcal-nav{
  background:rgba(var(--ink),.07);border:1px solid rgba(var(--ink),.1);border-radius:12px;
  color:var(--wh6);width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .15s,color .15s,transform .15s var(--ease-spring);
  flex-shrink:0;
}
.vcal-nav:hover{background:rgba(var(--ink),.13);color:var(--wh);}
.vcal-nav:active{transform:scale(.88);}
.vcal-heute-btn{
  font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:.35rem .85rem;border-radius:980px;border:none;cursor:pointer;
  background:rgba(208,17,27,.15);border:1px solid rgba(208,17,27,.3);
  color:var(--red);font-family:inherit;
  transition:background .15s,transform .15s var(--ease-spring);
}
.vcal-heute-btn:hover{background:rgba(208,17,27,.25);}
.vcal-heute-btn:active{transform:scale(.92);}
.vcal-sync-btn{width:28px;height:28px;border-radius:8px;border:1px solid rgba(var(--ink),.08);background:rgba(var(--ink),.05);color:rgba(var(--ink),.5);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s;}
.vcal-sync-btn:hover{background:rgba(var(--ink),.1);color:var(--wh);border-color:rgba(var(--ink),.16);}
.vcal-sync-btn:active{transform:scale(.92);}
.vcal-sync-btn:disabled{opacity:.5;cursor:wait;}
.vcal-sync-btn.syncing svg{animation:spin .8s linear infinite;}

/* Body: side by side on desktop — both panels fill full height */
.vcal-body{
  display:grid;
  grid-template-columns:1fr 300px;
  grid-template-rows:1fr;
  gap:14px;
  flex:1;min-height:0;
}

/* Grid panel — flex column: day-names fixed, cells grow */
.vcal-grid-panel{
  background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:18px;
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--shadow-card);
  padding:1rem;overflow:hidden;
  display:flex;flex-direction:column;
}

/* Day names row — fixed height, no growing */
.vcal-daynames{
  display:grid;grid-template-columns:repeat(7,1fr);gap:3px;
  flex-shrink:0;padding-bottom:4px;
}
.vcal-dn{
  font-size:.7rem;font-weight:600;color:var(--wh4);text-align:center;
  padding:.2rem 0 .4rem;letter-spacing:.06em;text-transform:uppercase;
}

/* Cells grid — takes ALL remaining height; each row is 1fr */
.vcal-cells-grid{
  display:grid;grid-template-columns:repeat(7,1fr);
  grid-auto-rows:1fr;
  gap:3px;
  flex:1;min-height:0;overflow:hidden;
}

/* Day cells — height comes from grid row */
.vcal-cell{
  border-radius:10px;
  min-height:0;overflow:hidden;padding:.4rem .35rem;
  display:flex;flex-direction:column;gap:3px;
  cursor:pointer;
  transition:background .12s;
  border:1px solid transparent;
}
.vcal-cell:hover{background:rgba(var(--ink),.05);}
.vcal-cell.vcal-empty{cursor:default;pointer-events:none;}
.vcal-cell.vcal-today{background:rgba(208,17,27,.08);border-color:rgba(208,17,27,.25);}
.vcal-cell.vcal-sel{
  background:rgba(var(--ink),.09);
  border-color:rgba(var(--ink),.18);
  box-shadow:0 2px 12px rgba(0,0,0,.3);
}

/* Day number */
.vcal-num-wrap{display:flex;justify-content:flex-end;margin-bottom:2px;}
.vcal-num{
  font-size:.78rem;font-weight:500;color:var(--wh5);
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;line-height:1;
}
.vcal-num-today{
  background:var(--red);color:var(--on-accent);font-weight:700;
  box-shadow:0 2px 8px rgba(208,17,27,.5);
}

/* Dots (mobile) */
.vcal-dots-row{
  display:none; /* hidden on desktop */
  gap:3px;flex-wrap:wrap;justify-content:center;padding:0 2px;
}
.vcal-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.vcal-dot-more{font-size:.68rem;color:var(--wh4);line-height:1;}

/* Pills (desktop) */
.vcal-pills-col{display:flex;flex-direction:column;gap:2px;}
.vcal-pill{
  display:flex;align-items:center;justify-content:space-between;gap:3px;
  border-radius:5px;padding:2px 5px;cursor:pointer;
  white-space:nowrap;overflow:hidden;
  opacity:.92;transition:opacity .12s,transform .12s;
  line-height:1.4;
  flex-shrink:0;
}
.vcal-pill:hover{opacity:1;transform:translateX(2px);}
.vcal-pill-extra{opacity:.6;}
.vcal-pill-name{font-size:.72rem;font-weight:500;color:var(--wh);overflow:hidden;text-overflow:ellipsis;min-width:0;}
.vcal-pill-time{font-size:.68rem;color:rgba(var(--ink),.6);flex-shrink:0;}
.vcal-pill-more{font-size:.68rem;font-weight:500;color:var(--wh4);padding:1px 5px;flex-shrink:0;}

/* Events panel — fills the full height of its grid cell */
.vcal-events-panel{
  background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:18px;
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  display:flex;flex-direction:column;
  min-height:0;
}
.vcal-events-hdr{
  padding:.7rem 1.1rem;
  background:rgba(var(--ink),.03);
  border-bottom:1px solid rgba(var(--ink),.06);
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
}
.vcal-events-title{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--wh4);}
.vcal-clear-sel{
  font-size:.72rem;color:var(--red);background:none;border:none;cursor:pointer;
  font-family:inherit;font-weight:500;padding:0;
  -webkit-tap-highlight-color:transparent;
}
.vcal-event-list{overflow-y:auto;flex:1;}
.vcal-event{
  display:flex;align-items:center;gap:.7rem;
  padding:.65rem 1.1rem;border-bottom:none;
  cursor:pointer;transition:background .12s;
  position:relative;
}
/* iOS inset separator: beginnt erst nach der Datums-Spalte */
.vcal-event::after{
  content:'';position:absolute;left:calc(1.1rem + 62px);right:0;bottom:0;
  height:1px;background:rgba(var(--ink),.07);
}
.vcal-event:last-child::after{display:none;}
.vcal-event:last-child{border-bottom:none;}
.vcal-event:hover{background:rgba(var(--ink),.04);}
.vcal-event:active{background:rgba(var(--ink),.07);}
.vcal-event-date{
  display:flex;flex-direction:column;align-items:center;
  min-width:48px;text-align:center;flex-shrink:0;
}
.vcal-event-d{font-size:.86rem;font-weight:700;color:var(--wh);white-space:nowrap;line-height:1.2;}
.vcal-event-dow{font-size:.7rem;color:var(--wh5);white-space:nowrap;}
.vcal-event-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.vcal-event-main{flex:1;min-width:0;}
.vcal-event-name{font-size:.84rem;font-weight:500;color:var(--wh);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vcal-event-client{font-size:.7rem;color:var(--wh4);margin-top:.1rem;}
.vcal-event-umsatz{font-size:.8rem;font-weight:700;color:var(--wh);flex-shrink:0;white-space:nowrap;}
.vcal-empty{
  padding:2.5rem 1rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  color:var(--wh4);font-size:.82rem;
}

/* Hover tooltip */
.vcal-tooltip{
  position:fixed;z-index:9999;
  min-width:220px;max-width:280px;
  background:rgba(var(--srf1),.97);
  border:1px solid rgba(var(--ink),.14);
  border-radius:16px;
  padding:.75rem;
  backdrop-filter:blur(40px) saturate(180%);
  -webkit-backdrop-filter:blur(40px) saturate(180%);
  box-shadow:0 16px 48px rgba(0,0,0,.6),0 4px 12px rgba(0,0,0,.4);
  pointer-events:none;
  animation:fadeIn .12s ease;
}
.vcal-tt-top{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding-left:.5rem;margin-bottom:.55rem;
}
.vcal-tt-name{font-size:.88rem;font-weight:600;color:var(--wh);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vcal-tt-row{
  display:flex;align-items:center;gap:.5rem;
  font-size:.76rem;color:var(--wh6);
  padding:.2rem 0;
}
.vcal-tt-row svg{flex-shrink:0;color:var(--wh4);}
.vcal-tt-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.vcal-tt-amount{color:var(--wh);font-weight:600;}
.vcal-tt-note{color:var(--wh);font-weight:600;padding-left:.5rem;}
.vcal-tt-top-icloud{border-left:4px solid #3b82f6;padding-left:.5rem;}

/* iCloud-specific calendar elements */
.vcal-dot-icloud{background:#3b82f6;}
.vcal-pill-icloud{
  background:rgba(59,130,246,.15);border-left:3px solid #3b82f6;
  cursor:default;
}
.vcal-pill-icloud:hover{opacity:1;transform:translateX(2px);}
.vcal-event-icloud{cursor:default;}
.vcal-event-icloud:hover{background:rgba(59,130,246,.06);}
.vcal-event-dot-icloud{background:#3b82f6;}
.vcal-icloud-label{
  font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#3b82f6;background:rgba(59,130,246,.15);
  border-radius:4px;padding:.1rem .4rem;flex-shrink:0;
}
.vcal-icloud-badge{
  display:flex;align-items:center;gap:.3rem;
  font-size:.68rem;font-weight:600;color:#3b82f6;
  background:rgba(59,130,246,.12);border-radius:20px;
  padding:.2rem .6rem;flex-shrink:0;
}
.vcal-events-hdr-right{display:flex;align-items:center;gap:.5rem;}

/* iCloud label badges on event rows */
.vcal-ev-label-badge{
  font-size:.68rem;font-weight:600;border-radius:6px;
  padding:.18rem .55rem;flex-shrink:0;white-space:nowrap;
}
/* Rechte Spalte der Terminzeile: Preis über Status-Kapsel gestapelt */
.vcal-event-trail{
  display:flex;flex-direction:column;align-items:flex-end;gap:.28rem;
  flex-shrink:0;min-width:0;max-width:45%;
}
/* Kompakte getönte Status-Kapsel (iOS-Stil) für die Terminliste —
   ersetzt die große gefüllte status-pill, damit der Projektname Platz hat */
.vcal-status-badge{
  font-size:.68rem;font-weight:600;border-radius:980px;
  padding:.18rem .6rem;flex-shrink:1;min-width:0;max-width:9.5rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.vcal-status-badge.s-erledigt{background:rgba(34,197,94,.14);color:#22c55e;}
.vcal-status-badge.s-produktion{background:rgba(229,72,77,.13);color:#e5484d;}
.vcal-status-badge.s-postprod{background:rgba(245,158,11,.14);color:#f59e0b;}
.vcal-status-badge.s-offen{background:rgba(var(--ink),.07);color:var(--wh5);}
html[data-theme="light"] .vcal-status-badge.s-erledigt{color:#15803d;}
html[data-theme="light"] .vcal-status-badge.s-produktion{color:#c11a22;}
html[data-theme="light"] .vcal-status-badge.s-postprod{color:#b45309;}
.vcal-event-chevron{
  flex-shrink:0;color:rgba(var(--ink),.3);
  display:flex;align-items:center;
  transition:color .15s;
}
.vcal-event-icloud:hover .vcal-event-chevron{color:rgba(var(--ink),.6);}
.vcal-event-icloud-open .vcal-event-chevron{color:#3b82f6;}

/* Label popover */
.vcal-label-popover{
  display:flex;flex-wrap:wrap;gap:.4rem;
  padding:.65rem 1.1rem .75rem 1.1rem;
  background:rgba(59,130,246,.06);
  border-top:1px solid rgba(59,130,246,.12);
  border-bottom:1px solid rgba(var(--ink),.04);
  animation:fadeIn .12s ease;
}
.vcal-label-chip{
  font-size:.7rem;font-weight:500;
  background:rgba(var(--ink),.06);border:1px solid rgba(var(--ink),.1);
  color:var(--wh6);border-radius:20px;
  padding:.3rem .8rem;cursor:pointer;
  font-family:inherit;
  transition:background .12s,border-color .12s,color .12s;
  -webkit-tap-highlight-color:transparent;
}
.vcal-label-chip:hover{background:rgba(var(--ink),.1);color:var(--wh);}
.vcal-label-chip-active{font-weight:600;}
.vcal-label-clear{
  font-size:.72rem;color:rgba(var(--ink),.3);background:none;border:none;
  cursor:pointer;font-family:inherit;padding:.3rem .4rem;margin-left:auto;
  -webkit-tap-highlight-color:transparent;
}
.vcal-label-clear:hover{color:rgba(var(--ink),.6);}

/* ── Category summary chips ──────────────────────────────────────────────────── */
.vcal-sum-row{
  display:flex;flex-wrap:wrap;gap:.35rem;
  padding:.5rem .75rem .1rem;
}
.vcal-sum-chip{
  font-size:.7rem;font-weight:600;letter-spacing:.04em;
  padding:.22rem .6rem;border-radius:980px;
  flex-shrink:0;
}
.vcal-sum-crm{
  color:rgba(var(--ink),.7);
  background:rgba(var(--ink),.08);
}

/* ── Month navigation animations ────────────────────────────────────────────── */
@keyframes calSlideInNext{
  from{opacity:0;transform:translateX(36px);}
  to  {opacity:1;transform:translateX(0);}
}
@keyframes calSlideInPrev{
  from{opacity:0;transform:translateX(-36px);}
  to  {opacity:1;transform:translateX(0);}
}
.vcal-anim-next{animation:calSlideInNext .32s cubic-bezier(.34,1.1,.64,1) both;}
.vcal-anim-prev{animation:calSlideInPrev .32s cubic-bezier(.34,1.1,.64,1) both;}
/* Title moves less than the grid */
.vcal-title.vcal-anim-next,.vcal-title.vcal-anim-prev{
  animation-duration:.22s;
}
/* Event list follows with a tiny stagger */
.vcal-event-list.vcal-anim-next,.vcal-event-list.vcal-anim-prev,
.vcal-empty.vcal-anim-next,.vcal-empty.vcal-anim-prev{
  animation-delay:.04s;
}

/* ── Mobile calendar ────────────────────────────────────────────────────────── */
@media(max-width:768px){
  /* On mobile: revert to scrollable page, no fixed height */
  #viewCalendar.active{height:auto;overflow:visible;}
  .vcal-wrap{padding:.75rem;flex:none;overflow:visible;}
  .vcal-view-toggle-row{margin-bottom:.65rem;}
  .vcal-body{grid-template-columns:1fr;gap:10px;flex:none;align-items:start;}
  .vcal-grid-panel{display:flex;}
  .vcal-cells-grid{flex:none;grid-auto-rows:auto;}
  .vcal-events-panel{max-height:none;}

  /* Header: kompakter, Titel darf nicht mit den Buttons kollidieren */
  .vcal-hdr{margin-bottom:.7rem;gap:.5rem;}
  .vcal-hdr-center{gap:.5rem;min-width:0;flex-wrap:wrap;justify-content:center;}
  .vcal-title{font-size:1.05rem;white-space:nowrap;}
  .vcal-nav{width:34px;height:34px;border-radius:10px;}

  /* Compact cells: fixed height, dots only */
  .vcal-cell{height:72px;min-height:unset;padding:.3rem .25rem;border-radius:8px;}
  .vcal-pills-col{display:none;}
  .vcal-dots-row{display:flex;flex-wrap:wrap;gap:3px;margin-top:2px;}
  .vcal-num{font-size:.75rem;width:22px;height:22px;}

  /* Terminliste: etwas kompakter, Trenner an das schmalere Padding angepasst */
  .vcal-events-hdr{padding:.6rem .85rem;gap:.5rem;flex-wrap:wrap;}
  .vcal-sum-row{padding:.45rem .85rem .1rem;}
  .vcal-event{padding:.6rem .85rem;}
  .vcal-event::after{left:calc(.85rem + 62px);}
  .vcal-label-popover{padding:.6rem .85rem .7rem;}
}

/* ── Invoice email overlay ───────────────────────────────────────────────────── */
.inv-email-overlay{
  position:absolute;inset:0;
  background:rgba(10,10,10,.85);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;
  z-index:800;border-radius:inherit;
}
.inv-email-dialog{
  background:var(--d2);border:1px solid rgba(var(--ink),.12);
  border-radius:16px;padding:1.5rem;width:min(380px,90%);
  display:flex;flex-direction:column;gap:.75rem;
}
.inv-email-title{font-size:1rem;font-weight:600;color:var(--wh);}
.inv-email-label{font-size:.75rem;color:var(--wh4);}
.inv-email-input{
  background:var(--d3);border:1px solid var(--wh08);border-radius:10px;
  padding:.55rem .85rem;font-size:.85rem;color:var(--wh);font-family:inherit;
  outline:none;transition:border-color .15s;
}
.inv-email-input:focus{border-color:rgba(var(--ink),.25);}
.inv-email-btns{display:flex;gap:.5rem;justify-content:flex-end;}
.inv-email-success{
  display:flex;align-items:center;gap:.4rem;
  font-size:.78rem;color:#4ade80;padding:.4rem .75rem;
  background:rgba(74,222,128,.1);border-radius:8px;margin:0 1rem .5rem;
}

/* ── Backup list in settings ─────────────────────────────────────────────────── */
.backup-list{display:flex;flex-direction:column;gap:.35rem;margin-top:.25rem;}
.backup-item{
  display:flex;align-items:center;gap:.75rem;
  padding:.45rem .75rem;background:var(--d3);border-radius:8px;
  font-size:.78rem;
}
.backup-name{flex:1;color:var(--wh6);font-variant-numeric:tabular-nums;}
.backup-size{color:var(--wh4);font-size:.72rem;}
.backup-dl{
  color:var(--wh4);display:flex;align-items:center;padding:4px;
  border-radius:6px;transition:color .15s,background .15s;
  text-decoration:none;
}
.backup-dl:hover{color:var(--wh);background:var(--wh08);}
.backup-empty{font-size:.78rem;color:var(--wh4);padding:.5rem 0;}

/* ── Calendar sync URL box ───────────────────────────────────────────────────── */
.cal-sync-url-box{
  display:flex;align-items:center;gap:.5rem;
  background:var(--d3);border:1px solid var(--wh08);border-radius:10px;
  padding:.5rem .75rem;margin-bottom:.5rem;
}
.cal-sync-url-text{
  flex:1;font-size:.72rem;color:var(--wh4);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:'SF Mono',Menlo,monospace;
}
.cal-sync-copy{
  background:none;border:none;color:var(--wh4);cursor:pointer;
  padding:4px;border-radius:6px;display:flex;align-items:center;
  transition:color .15s,background .15s;flex-shrink:0;
}
.cal-sync-copy:hover{color:var(--wh);background:var(--wh08);}

/* ── Calendar view toggle row ────────────────────────────────────────────────── */
.vcal-view-toggle-row{
  display:flex;justify-content:center;
  margin-bottom:1rem;
}
.vcal-view-toggle{
  display:flex;background:rgba(var(--ink),.06);
  border:1px solid rgba(var(--ink),.09);border-radius:10px;
  padding:3px;gap:3px;
}
.vcal-vt-btn{
  background:none;border:none;color:rgba(var(--ink),.45);
  font-size:.78rem;font-weight:600;letter-spacing:.02em;font-family:inherit;
  padding:.38rem 1.4rem;border-radius:7px;cursor:pointer;
  transition:color .15s,background .15s,box-shadow .15s;
}
.vcal-vt-btn.active{color:var(--wh);}
.vcal-vt-btn:hover:not(.active){color:rgba(var(--ink),.75);}

/* ── Calendar week grid ──────────────────────────────────────────────────────── */
.vcal-week-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:6px;
  flex:1;min-height:0;overflow:hidden;
}
.vcal-wk-col{
  display:flex;flex-direction:column;
  background:rgba(var(--ink),.03);border:1px solid rgba(var(--ink),.06);
  border-radius:10px;overflow:hidden;min-width:0;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.vcal-wk-col:hover{background:rgba(var(--ink),.06);}
.vcal-wk-col.vcal-wk-today{background:rgba(208,17,27,.06);border-color:rgba(208,17,27,.22);}
.vcal-wk-col.vcal-wk-sel{background:rgba(var(--ink),.08);border-color:rgba(var(--ink),.2);}
.vcal-wk-hdr{
  display:flex;flex-direction:column;align-items:center;
  padding:.5rem .25rem .4rem;gap:5px;
  border-bottom:1px solid rgba(var(--ink),.06);
}
.vcal-wk-dow{
  font-size:.68rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(var(--ink),.35);line-height:1;
}
.vcal-wk-num{
  font-size:.95rem;font-weight:700;color:rgba(var(--ink),.75);
  width:28px;height:28px;display:flex;align-items:center;
  justify-content:center;border-radius:50%;
}
.vcal-wk-num-today{background:var(--red);color:var(--on-accent);box-shadow:0 0 8px rgba(208,17,27,.55);}
.vcal-wk-events{
  flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:3px;
  padding:.3rem;-webkit-overflow-scrolling:touch;
}
.vcal-wk-evt{
  border-radius:6px;padding:.3rem .4rem;cursor:pointer;
  transition:opacity .15s;
}
.vcal-wk-evt:hover{opacity:.82;}
.vcal-wk-evt-icloud{cursor:default;}
.vcal-wk-evt-name{
  font-size:.85rem;font-weight:600;color:var(--wh);overflow:hidden;
  text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35;
}
.vcal-wk-evt-note{font-size:.74rem;color:rgba(var(--ink),.6);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vcal-wk-evt-time{font-size:.76rem;color:rgba(var(--ink),.55);margin-top:3px;}
/* Dots-Zeile pro Wochentag — nur mobil sichtbar */
.vcal-wk-dots{display:none;}

/* Week view mobile: kompakter Tages-Strip (Wochentag + Zahl + Punkte),
   Termine stehen in der Agenda-Liste darunter — kein horizontales Scrollen */
@media(max-width:768px){
  .vcal-grid-panel:has(.vcal-week-grid){padding:.5rem .4rem;}
  .vcal-week-grid{
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:3px;min-width:0;overflow:visible;
  }
  .vcal-wk-col{
    background:none;border-color:transparent;border-radius:10px;
    min-height:64px;
  }
  .vcal-wk-col.vcal-wk-today{background:rgba(208,17,27,.06);border-color:rgba(208,17,27,.22);}
  .vcal-wk-col.vcal-wk-sel{background:rgba(var(--ink),.08);border-color:rgba(var(--ink),.2);}
  .vcal-wk-hdr{border-bottom:none;padding:.4rem .1rem .1rem;gap:4px;}
  .vcal-wk-dow{font-size:.6rem;letter-spacing:.06em;}
  .vcal-wk-num{width:26px;height:26px;font-size:.85rem;}
  .vcal-wk-events{display:none;}
  .vcal-wk-dots{
    display:flex;flex-wrap:wrap;gap:3px;
    justify-content:center;align-items:center;
    padding:1px 2px 7px;min-height:14px;
  }
}

/* ── Dashboard year progress widget (mobile) ────────────────────────────────── */
.dash-year-widget{
  display:none;
  background:rgba(var(--ink),.04);
  border:1px solid rgba(var(--ink),.08);border-radius:14px;
  padding:.75rem 1rem;
  align-items:center;gap:1rem;
}
.dash-yw-ring{position:relative;width:52px;height:52px;flex-shrink:0;}
.dash-yw-svg{width:52px;height:52px;transform:rotate(-90deg);}
.dash-yw-track{stroke:rgba(var(--ink),.09);stroke-width:4;}
.dash-yw-arc{
  stroke:var(--red);stroke-width:4;stroke-linecap:round;
  transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1);
}
.dash-yw-center{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.dash-yw-pct{font-size:.88rem;font-weight:700;color:var(--wh);line-height:1;font-variant-numeric:tabular-nums;}
.dash-yw-sym{font-size:.68rem;color:rgba(var(--ink),.45);}
.dash-yw-info{flex:1;min-width:0;}
.dash-yw-label{font-size:.68rem;color:rgba(var(--ink),.4);margin-bottom:.2rem;text-transform:uppercase;letter-spacing:.07em;font-weight:500;}
.dash-yw-year{font-size:1.1rem;font-weight:700;color:var(--wh);letter-spacing:-.01em;line-height:1;}
.dash-yw-bar-wrap{margin-top:.45rem;}
.dash-yw-bar-track{
  height:3px;background:rgba(var(--ink),.08);border-radius:2px;overflow:hidden;
}
.dash-yw-bar-fill{
  height:100%;background:var(--red);
  border-radius:2px;transition:width 1.2s cubic-bezier(.4,0,.2,1);
}
.dash-yw-quarters{display:flex;justify-content:space-between;margin-top:.3rem;}
.dash-yw-q{font-size:.68rem;font-weight:500;color:rgba(var(--ink),.25);}
.dash-yw-q.active{color:rgba(var(--ink),.55);}
.dash-yw-days{font-size:.68rem;color:rgba(var(--ink),.4);margin-top:.35rem;}
.dash-yw-days strong{color:rgba(var(--ink),.65);font-weight:600;}

@media(max-width:768px){
  .dash-year-widget{display:flex;margin-bottom:.75rem;}
}

/* ── Dashboard mobile density pass ─────────────────────────────────────────── */
@media (max-width: 768px) {
  #viewDashboard .year-switcher{
    padding:.32rem .75rem .12rem;
    overflow-x:auto;
    scrollbar-width:none;
  }
  #viewDashboard .year-switcher::-webkit-scrollbar{display:none;}
  #viewDashboard .year-switcher-inner{
    flex-wrap:nowrap;
    width:max-content;
    max-width:none;
  }

  #viewDashboard .dashboard{
    padding:.6rem .72rem calc(106px + env(safe-area-inset-bottom));
  }
  .dash-insights{grid-template-columns:1fr;gap:7px;margin:-.25rem 0 .8rem;}
  .dash-insight{border-radius:14px;padding:.62rem .72rem;min-height:46px;}
  .dash-insight-main strong{font-size:.74rem;}
  .dash-insight-main small{font-size:.7rem;}

  .dash-year-widget{
    border-radius:16px;
    padding:.65rem .85rem;
    gap:.85rem;
    margin-bottom:.5rem;
  }
  .dash-yw-ring,.dash-yw-svg{width:72px;height:72px;}
  .dash-yw-center{flex-direction:row;align-items:center;justify-content:center;gap:.06rem;}
  .dash-yw-pct{font-size:1.3rem;font-weight:800;letter-spacing:-.02em;line-height:1;}
  .dash-yw-sym{font-size:.7rem;font-weight:700;color:rgba(var(--ink),.6);line-height:1;margin-bottom:.3rem;}
  .dash-yw-label{font-size:.68rem;margin-bottom:.18rem;letter-spacing:.1em;}
  .dash-yw-year{font-size:1.15rem;font-weight:800;letter-spacing:-.02em;}
  .dash-yw-bar-wrap{margin-top:.4rem;}
  .dash-yw-bar-track{height:4px;border-radius:3px;}
  .dash-yw-days{font-size:.72rem;margin-top:.28rem;}
  .dash-yw-q{font-size:.68rem;}
  .dash-yw-quarters{margin-top:.35rem;}

  .dash-command{gap:7px;margin-bottom:.68rem;}
  .dash-command-hero,.dash-priority-panel{border-radius:18px;}
  .dash-command-hero{padding:.8rem .9rem;}
  .dash-command-kicker{font-size:.68rem;margin-bottom:.42rem;letter-spacing:.1em;}
  .dash-command-title{
    font-size:1.08rem;
    line-height:1.16;
    letter-spacing:-.02em;
  }
  .dash-command-sub{
    font-size:.7rem;
    line-height:1.28;
    margin-top:.38rem;
  }
  .dash-command-metrics{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:.4rem;
    margin-top:.66rem;
  }
  .dash-command-metric{
    min-height:46px;
    padding:.42rem .28rem;
    border-radius:13px;
  }
  .dash-command-metric span{font-size:.94rem;}
  .dash-command-metric small{
    margin-top:.24rem;
    font-size:.68rem;
    letter-spacing:.06em;
  }

  .dash-priority-head{padding:.56rem .78rem;}
  .dash-priority-item{
    min-height:48px;
    grid-template-columns:minmax(0,1fr) 16px;
    gap:.42rem .58rem;
    padding:.58rem .78rem;
  }
  .dash-priority-type{
    grid-column:1/-1;
    justify-self:stretch;
    width:100%;
    box-sizing:border-box;
    max-width:none;
    padding:.18rem .42rem;
    font-size:.68rem;
  }
  .dash-priority-main strong{font-size:.74rem;}
  .dash-priority-main small{font-size:.7rem;}

  .dash-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-bottom:.85rem;
  }
  .dash-kpi-card{
    min-width:0;
    border-radius:16px;
    padding:.88rem;
  }
  .dash-kpi-hero{grid-column:1/-1;}
  .dash-kpi-hero-top{margin-bottom:.36rem;}
  .dash-kpi-hero-val{font-size:1.82rem!important;}
  .dash-kpi-hero-icon{width:34px;height:34px;border-radius:12px;}
  .dash-kpi-icon-sm{width:24px;height:24px;margin-bottom:.48rem;}
  .dash-kpi-label{font-size:.68rem;letter-spacing:.09em;margin-bottom:.38rem;}
  .dash-kpi-val{font-size:1.18rem;letter-spacing:-.02em;}
  .dash-kpi-sub{
    font-size:.72rem;
    line-height:1.25;
    overflow-wrap:anywhere;
  }
  .dash-kpi-ring-row{gap:.35rem;}

  .dcal-panel{border-radius:18px;}
  .dcal-header{padding:.62rem .8rem;}
  .dcal-grid-wrap{padding:.72rem;}
  .dcal-cell{
    min-height:34px;
    padding:.22rem;
    border-radius:10px;
  }
  .dcal-num{font-size:.78rem;}
  .dcal-dots{gap:2px;margin-top:2px;}
  .dcal-dot{width:5px;height:5px;}
  .dcal-events-list{max-height:none;padding:.5rem .72rem .72rem;}
  .dcal-event{
    display:grid;
    grid-template-columns:58px 9px minmax(0,1fr);
    align-items:center;
    gap:.58rem;
    padding:.52rem 0;
    width:100%;
    box-sizing:border-box;
  }
  .dcal-event-date{width:auto;min-width:0;}
  .dcal-event-d{font-size:.86rem;}
  .dcal-event-dow{font-size:.72rem;}
  .dcal-event-dot{margin-top:.34rem;}
  .dcal-event-name{
    font-size:.86rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .dcal-event-meta{font-size:.68rem;gap:.3rem;}
  .dcal-event-addr{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .dcal-event-umsatz,
  .dcal-event .status-pill{
    grid-column:3;
    justify-self:start;
    margin-top:.08rem;
    font-size:.68rem!important;
    padding:.16rem .46rem!important;
  }
  .dcal-icloud-pill{display:none;}

  .dash-row{gap:8px;}
  .dash-panel{border-radius:18px;}
  .dash-panel-header{padding:.68rem .9rem;}
  .dash-item{gap:.58rem;padding:.62rem .9rem;}
  .dash-item-name{font-size:.8rem;}
  .dash-item-amount{min-width:62px;font-size:.78rem;}
  .dash-item .r-pill{
    max-width:132px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:.68rem;
    padding:.22rem .48rem;
  }
}

@media (max-width: 390px) {
  .dash-command-metrics{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dash-priority-item{grid-template-columns:minmax(0,1fr) 14px;}
  .dash-priority-type{grid-column:1/-1;margin-bottom:-.08rem;max-width:none;}
  .dash-kpi-card{padding:.78rem;}
  .dash-kpi-hero-val{font-size:1.62rem!important;}
  .dcal-event{grid-template-columns:52px 8px minmax(0,1fr);}
}

/* ── Extra dates (project detail modal) ───────────────────────────────────── */
.pd-extra-dates-label{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--ink),.28);padding:.6rem 0 .25rem;border-top:1px solid rgba(var(--ink),.07);margin-top:.35rem;}
/* Grid overrides the flex from pd-field-row */
.pd-field-row.pd-extra-row{display:grid;grid-template-columns:16px 1fr auto auto 34px;gap:.45rem;align-items:center;padding:.3rem 0;}
/* Termin + zugehörige Notiz bilden einen Block — die Trennlinie sitzt am Block */
.pd-extra-item{border-bottom:1px solid rgba(var(--ink),.04);}
.pd-extra-item:last-child{border-bottom:none;}
.pd-extra-row .pd-field-icon{opacity:.35;width:16px;height:16px;}
/* Terminnotiz ("Erstgespräch", "Vorher-Aufnahmen", …) — landet im Kalendertitel */
.pd-field-row.pd-note-row{padding:0 0 .3rem;gap:.45rem;}
.pd-note-row .pd-field-icon{opacity:.28;width:16px;height:16px;flex-shrink:0;}
.pd-note-row .pd-input{font-size:.8rem;}
.pd-date-row+.pd-note-row{padding-bottom:.45rem;}
.pd-extra-date-inp{min-width:0;width:100%;}
.pd-add-date-row{padding:5px 0 2px;}
.pd-add-date-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:5px;background:rgba(var(--ink),.035);border:1px dashed rgba(var(--ink),.13);border-radius:9px;color:rgba(var(--ink),.38);cursor:pointer;font-size:.78rem;font-weight:600;font-family:inherit;padding:7px 12px;transition:border-color .18s,color .18s,background .18s;}
.pd-add-date-btn:hover{border-color:rgba(241,22,34,.38);color:rgba(var(--ink),.72);background:rgba(241,22,34,.05);}
.pd-clear-date-btn{background:none;border:none;color:rgba(var(--ink),.28);cursor:pointer;font-size:.78rem;padding:3px 5px;line-height:1;transition:color .15s;flex-shrink:0;}
.pd-clear-date-btn:hover{color:var(--danger-bright);}
/* ── Duration select + Remove button — matching height ──────────────────────── */
.pd-input-duration{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='rgba(var(--ink),.4)' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:26px;cursor:pointer;min-width:82px;height:34px;}
.pd-remove-date-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:none;border:1px solid transparent;border-radius:8px;color:rgba(var(--ink),.25);cursor:pointer;padding:0;flex-shrink:0;transition:color .15s,background .15s,border-color .15s;}
.pd-remove-date-btn:hover{color:var(--danger-bright);background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.18);}

/* ── Project items (gebuchte Katalog-Positionen) ───────────────────────────── */
.pd-items-section { margin-bottom: 16px; }
.pd-items-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.pd-item-row {
  display: flex; align-items: center; gap: 6px;
  background: rgba(var(--ink),.04);
  border: 1px solid rgba(var(--ink),.08);
  border-radius: 6px;
  padding: 4px 6px;
}
.pd-item-name  { flex: 1; min-width: 0; }
.pd-item-qty   { width: 62px; flex-shrink: 0; text-align: right; }
.pd-item-price { width: 88px; flex-shrink: 0; text-align: right; }
.pd-item-x     { color: var(--wh3); font-size: .78rem; flex-shrink: 0; }
.pd-item-total { min-width: 78px; text-align: right; font-size: .82rem; font-weight: 600; color: var(--wh7); flex-shrink: 0; }
.pd-item-del   { flex-shrink: 0; }
.pd-input-derived { opacity: .65; cursor: default; }
.pd-umsatz-hint {
  font-size: .68rem; color: var(--wh4);
  border: 1px solid rgba(var(--ink),.12); border-radius: 99px;
  padding: 2px 8px; flex-shrink: 0;
}

/* ── Project attachments ───────────────────────────────────────────────────── */
.pd-attach-section { margin-bottom: 16px; }
.pd-attach-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
}
.pd-attach-empty { font-size: 12px; color: var(--wh3); padding: 2px 0 6px; }
.pd-attach-item {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(var(--ink),.04);
  border: 1px solid rgba(var(--ink),.08);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--wh7);
}
.pd-attach-item svg { flex-shrink: 0; color: var(--wh4); }
.pd-attach-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.pd-attach-size { color: var(--wh4); flex-shrink: 0; font-size: 11px; }
.pd-attach-open {
  background: none;
  border: 1px solid rgba(var(--ink),.15);
  border-radius: 4px;
  color: var(--wh6);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 8px;
  flex-shrink: 0;
  transition: border-color .15s, color .15s;
}
.pd-attach-open:hover { border-color: rgba(var(--ink),.4); color: var(--wh9); }
.pd-attach-add { margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── 10-todos.css ───────────────────────────── */
/* =============================================================================
   10-todos.css — To-Dos, Belege, Bottom-Sheets

   Teil von style.css (nach Bereichen aufgeteilt). Die Dateien werden in
   nummerierter Reihenfolge geladen — die Kaskade hängt daran, also nicht
   umsortieren. Eingebunden in index.html.
   ============================================================================= */

/* ── To-Do View ──────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════ */

#viewTodos.active { display:flex; flex-direction:column; height:calc(100dvh - 112px); overflow:hidden; }

.todo-wrap {
  display:flex; flex-direction:column; flex:1; min-height:0;
  max-width:640px; margin:0 auto; width:100%;
  padding:1.25rem 1.25rem 0;
}

.todo-hdr {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.25rem; flex-shrink:0;
}
.todo-title-main { font-size:1.5rem; font-weight:700; letter-spacing:-.03em; }
.todo-add-btn {
  width:36px; height:36px; border-radius:12px; border:none; cursor:pointer;
  background:var(--red); color:var(--on-accent);
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s var(--ease-spring), box-shadow .15s;
  box-shadow:0 4px 16px rgba(208,17,27,.4);
}
.todo-add-btn:hover { transform:scale(1.1); }
.todo-add-btn:active { transform:scale(.92); }

/* ── List ────────────────────────────────────────────────────────────────── */
.todo-list { flex:1; overflow-y:auto; min-height:0; padding-bottom:80px; }

.todo-group { margin-bottom:1.25rem; }
.todo-group-label {
  font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--wh4); margin-bottom:.5rem; padding:0 .1rem;
}
.todo-group-overdue .todo-group-label { color:#ef4444; }
.todo-group-today   .todo-group-label { color:#f59e0b; }

/* ── Row ─────────────────────────────────────────────────────────────────── */
.todo-row {
  display:flex; align-items:center; gap:.75rem;
  padding:.75rem .6rem; border-radius:14px;
  background:var(--glass-panel-bg); border:1px solid rgba(var(--ink),.105);
  box-shadow:var(--glass-highlight),0 6px 18px rgba(0,0,0,.22);
  margin-bottom:.5rem;
  transition:background .12s;
  -webkit-tap-highlight-color:transparent;
}
.todo-row:active { background:rgba(var(--ink),.07); }
.todo-row-done { opacity:.45; }

/* ── Checkbox ────────────────────────────────────────────────────────────── */
.todo-check {
  width:28px; height:28px; min-width:28px; border-radius:50%;
  border:2px solid rgba(var(--ink),.2); background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:transparent;
  transition:border-color .15s, background .15s, transform .15s var(--ease-spring);
  -webkit-tap-highlight-color:transparent;
}
.todo-check:active { transform:scale(.85); }
.todo-check-done {
  background:#22c55e; border-color:#22c55e; color:var(--on-accent);
}

/* ── Body ────────────────────────────────────────────────────────────────── */
.todo-body { flex:1; min-width:0; cursor:pointer; }
.todo-title {
  font-size:.92rem; font-weight:500; color:var(--wh); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.todo-row-done .todo-title { text-decoration:line-through; }
.todo-notes-preview { font-size:.72rem; color:var(--wh4); margin-top:.18rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.todo-meta-row { display:flex; align-items:center; gap:.4rem; margin-top:.3rem; }
.todo-priority-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.todo-due { font-size:.68rem; font-weight:500; }
.todo-due-overdue { color:#ef4444; }
.todo-due-today   { color:#f59e0b; }
.todo-due-soon    { color:#3b82f6; }
.todo-due-normal  { color:var(--wh4); }
.todo-bell { color:var(--wh3); display:flex; align-items:center; }
/* Badge: aus Apple Erinnerungen importiert */
.todo-src-badge{
  display:inline-flex;align-items:center;gap:.25rem;
  font-size:.62rem;font-weight:600;color:#f59e0b;
  background:rgba(245,158,11,.12);border-radius:980px;padding:.1rem .45rem;
}

/* ── Delete button ───────────────────────────────────────────────────────── */
.todo-delete {
  width:28px; height:28px; min-width:28px; border-radius:8px;
  border:none; background:none; color:rgba(var(--ink),.2); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:color .12s, background .12s;
  -webkit-tap-highlight-color:transparent;
}
.todo-delete:hover { color:var(--danger-bright); background:rgba(248,113,113,.1); }

/* ── Done toggle ─────────────────────────────────────────────────────────── */
.todo-done-toggle {
  font-size:.75rem; color:var(--wh4); cursor:pointer; padding:.5rem .1rem;
  -webkit-tap-highlight-color:transparent;
}
.todo-done-toggle:hover { color:var(--wh6); }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.todo-empty { display:flex; flex-direction:column; align-items:center; gap:.6rem; padding:3rem 0; }
.todo-empty span { font-size:.88rem; color:var(--wh4); }
.todo-empty-sub { font-size:.72rem !important; color:var(--wh3) !important; }

/* ── Quick-add bar ───────────────────────────────────────────────────────── */
.todo-quickadd {
  position:sticky; bottom:0;
  display:flex; gap:.5rem; align-items:center;
  padding:.75rem 0 calc(.75rem + env(safe-area-inset-bottom));
  background:linear-gradient(to top, var(--blk) 70%, transparent);
  flex-shrink:0;
}
.todo-quickadd-input {
  flex:1; background:linear-gradient(180deg,rgba(var(--ink),.11),rgba(var(--ink),.045)); border:1px solid rgba(var(--ink),.13);
  border-radius:14px; padding:.7rem 1rem; color:var(--wh); font-family:inherit; font-size:1rem;
  box-shadow:inset 0 1px 0 rgba(var(--ink),.1);
}
.todo-quickadd-input::placeholder { color:var(--wh3); }
.todo-quickadd-input:focus { outline:none; border-color:rgba(var(--ink),.25); }
.todo-quickadd-btn {
  width:42px; height:42px; min-width:42px; border-radius:14px; border:none;
  background:var(--red); color:var(--on-accent); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s var(--ease-spring);
}
.todo-quickadd-btn:active { transform:scale(.88); }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.todo-modal-bg {
  align-items:flex-end;
  z-index:950;        /* above bottom nav (900) */
  padding-top:0;      /* override default modal-bg padding-top:40px */
}
.todo-modal {
  width:100%; max-width:560px; margin:0 auto;
  background:var(--glass-chrome-bg); border:1px solid rgba(var(--ink),.14);
  border-radius:24px 24px 0 0;
  padding:0 0 calc(1.25rem + env(safe-area-inset-bottom));
  display:flex; flex-direction:column;
  max-height:92dvh; overflow-y:auto;
  animation:slideUp .28s cubic-bezier(.34,1.3,.64,1);
  backdrop-filter:blur(42px) saturate(210%);
  -webkit-backdrop-filter:blur(42px) saturate(210%);
  box-shadow:inset 0 1px 0 rgba(var(--ink),.13),0 -18px 60px rgba(0,0,0,.58);
}
@keyframes slideUp { from{transform:translateY(60px);opacity:0} to{transform:translateY(0);opacity:1} }

.todo-modal-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem .75rem;
}
.todo-modal-title { font-size:1rem; font-weight:700; }
.todo-modal-close{
  background:rgba(var(--ink),.08);
  border:1px solid rgba(var(--ink),.12);
  border-radius:50%;
  color:rgba(var(--ink),.6);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;flex-shrink:0;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:background .15s,color .15s,transform .15s var(--ease-spring);
  -webkit-tap-highlight-color:transparent;
}
.todo-modal-close:hover{background:rgba(var(--ink),.15);color:var(--wh);transform:scale(1.08);}
.todo-modal-close:active{transform:scale(.9);}

.todo-modal-body { padding:0 1.25rem; display:flex; flex-direction:column; gap:.9rem; }

.todo-modal-input {
  width:100%; background:linear-gradient(180deg,rgba(var(--ink),.11),rgba(var(--ink),.045)); border:1px solid rgba(var(--ink),.13);
  border-radius:12px; padding:.75rem 1rem; color:var(--wh); font-family:inherit; font-size:1rem; font-weight:500;
  box-shadow:inset 0 1px 0 rgba(var(--ink),.1);
}
.todo-modal-input:focus { outline:none; border-color:rgba(var(--ink),.25); }
.todo-modal-notes {
  width:100%; background:linear-gradient(180deg,rgba(var(--ink),.085),rgba(var(--ink),.032)); border:1px solid rgba(var(--ink),.1);
  border-radius:12px; padding:.65rem .9rem; color:var(--wh); font-family:inherit; font-size:.85rem;
  resize:none; line-height:1.5;
}
.todo-modal-notes:focus { outline:none; border-color:rgba(var(--ink),.2); }

.todo-modal-label { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--wh4); margin-bottom:.4rem; display:block; }
.todo-modal-row { display:flex; flex-direction:column; }
.todo-modal-dates { flex-direction:row; gap:.75rem; }
.todo-modal-field { flex:1; display:flex; flex-direction:column; }
.todo-modal-date {
  background:linear-gradient(180deg,rgba(var(--ink),.1),rgba(var(--ink),.04)); border:1px solid rgba(var(--ink),.12);
  border-radius:10px; padding:.55rem .8rem; color:var(--wh); font-family:inherit; font-size:.85rem;
  color-scheme:dark;
}
.todo-modal-date:focus { outline:none; border-color:rgba(var(--ink),.25); }

/* Priority chips */
.todo-prio-chips { display:flex; gap:.5rem; }
.todo-prio-chip {
  flex:1; padding:.5rem; border-radius:10px; border:1px solid rgba(var(--ink),.1);
  background:rgba(var(--ink),.05); color:var(--wh5); font-family:inherit; font-size:.78rem; font-weight:600;
  cursor:pointer; transition:background .15s, border-color .15s, color .15s;
  -webkit-tap-highlight-color:transparent;
}
.todo-prio-active { background:color-mix(in srgb, var(--pc) 18%, transparent); border-color:var(--pc); color:var(--pc); }

.todo-modal-toggle-row {
  display:flex; align-items:center; justify-content:space-between; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.todo-modal-toggle-row input[type=checkbox] { position:absolute; opacity:0; width:0; height:0; }

.todo-modal-footer {
  display:flex; gap:.75rem; padding:1rem 1.25rem 0; justify-content:flex-end;
}
.todo-modal-save { padding:.6rem 1.4rem; }

/* ── Beleg-Modal ─────────────────────────────────────────────────────────── */
.rcpt-file-row { display:flex; align-items:center; gap:.75rem; }
.rcpt-file-preview {
  width:52px; height:52px; flex-shrink:0; border-radius:10px; overflow:hidden;
  background:rgba(var(--ink),.05); border:1px dashed rgba(var(--ink),.14);
  display:flex; align-items:center; justify-content:center;
}
.rcpt-thumb { width:100%; height:100%; object-fit:cover; }
.rcpt-file-name { font-size:.62rem; color:var(--wh5); padding:.2rem; text-align:center; word-break:break-all; overflow:hidden; }
.rcpt-file-empty { font-size:.56rem; color:var(--wh4); text-align:center; padding:.2rem; line-height:1.25; }
.rcpt-file-btn { display:inline-flex; align-items:center; gap:.4rem; }
.rcpt-scan-status { font-size:.68rem; color:var(--wh4); }
.rcpt-scan-status.is-busy { color:var(--wh5); animation:scanPulse 1.2s ease-in-out infinite; }
.rcpt-scan-status.is-done { color:#22c55e; }
.rcpt-scan-status.is-error { color:#f59e0b; }
html[data-theme="light"] .rcpt-scan-status.is-done { color:#15803d; }
html[data-theme="light"] .rcpt-scan-status.is-error { color:#b45309; }
@keyframes scanPulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }
.rcpt-vat-chips { display:flex; gap:.4rem; }
.rcpt-vat-chip {
  flex:1; padding:.5rem .2rem; border-radius:10px; border:1px solid rgba(var(--ink),.1);
  background:rgba(var(--ink),.05); color:var(--wh5); font-family:inherit; font-size:.78rem; font-weight:600;
  cursor:pointer; transition:background .15s, border-color .15s, color .15s;
  -webkit-tap-highlight-color:transparent;
}
.rcpt-vat-active { background:rgba(208,17,27,.14); border-color:var(--red); color:var(--red); }
.rcpt-vat-hint { display:block; font-size:.66rem; color:var(--wh4); margin-top:.3rem; min-height:.9rem; }

/* ── Belege-Panel (Finanzen) ─────────────────────────────────────────────── */
.rcpt-header-right { display:flex; align-items:center; gap:.75rem; }
.rcpt-header-sum { font-size:.72rem; color:var(--wh4); }
.rcpt-list { display:flex; flex-direction:column; }
.rcpt-row {
  display:grid; grid-template-columns:78px minmax(0,1fr) auto 110px auto;
  gap:.85rem; align-items:center; padding:.6rem 1.4rem;
  border-bottom:1px solid rgba(var(--ink),.04); cursor:pointer; transition:background .15s;
  -webkit-tap-highlight-color:transparent;
}
.rcpt-row:last-child { border-bottom:none; }
.rcpt-row:hover { background:rgba(var(--ink),.04); }
.rcpt-row-date { font-size:.74rem; color:var(--wh4); font-variant-numeric:tabular-nums; }
.rcpt-row-vendor { font-size:.88rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rcpt-row-sub { display:flex; align-items:center; gap:.5rem; margin-top:.15rem; min-width:0; }
.rcpt-cat-chip {
  font-size:.62rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding:.14rem .48rem; border-radius:6px; background:rgba(var(--ink),.07); color:var(--wh5); white-space:nowrap;
}
.rcpt-row-desc { font-size:.7rem; color:var(--wh4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rcpt-row-linked { font-size:.62rem; font-weight:700; color:#22c55e; white-space:nowrap; }
html[data-theme="light"] .rcpt-row-linked { color:#15803d; }
.rcpt-row-vat { font-size:.7rem; color:var(--wh4); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.rcpt-row-amount { font-size:.88rem; font-weight:700; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.rcpt-row-actions { display:flex; align-items:center; gap:.3rem; }
.rcpt-icon-btn {
  width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
  border:none; border-radius:6px; background:rgba(var(--ink),.06); color:var(--wh5); cursor:pointer;
  transition:background .15s, color .15s;
}
.rcpt-icon-btn:hover { background:rgba(var(--ink),.12); color:var(--wh); }
.rcpt-del { opacity:0; transition:opacity .15s; }
.rcpt-row:hover .rcpt-del { opacity:1; }
.rcpt-footer {
  padding:.6rem 1.4rem .8rem; font-size:.72rem; color:var(--wh4);
  border-top:1px solid rgba(var(--ink),.05);
}
.fin-tva-vorsteuer { font-size:.7rem; color:var(--wh4); margin-top:.55rem; padding-top:.55rem; border-top:1px solid rgba(208,17,27,.14); }
@media(max-width:768px) {
  .rcpt-row { grid-template-columns:minmax(0,1fr) auto; padding:.6rem .9rem; row-gap:.1rem; }
  .rcpt-row-date { grid-row:2; grid-column:1; }
  .rcpt-row-main { grid-row:1; grid-column:1; min-width:0; }
  .rcpt-row-vat { display:none; }
  .rcpt-row-amount { grid-row:1; grid-column:2; }
  .rcpt-row-actions { grid-row:2; grid-column:2; justify-content:flex-end; }
  .rcpt-del { opacity:1; }
}

/* ── Desktop adjustments ─────────────────────────────────────────────────── */
@media(min-width:769px) {
  #viewTodos.active { height:calc(100dvh - 64px - 38px); }
  .todo-modal-bg { align-items:center; }
  .todo-modal { border-radius:20px; max-width:480px; }
  .todo-wrap { padding:1.5rem; }
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media(max-width:768px) {
  /* View fills space above bottom nav; quickadd is sticky so it floats above nav */
  #viewTodos.active {
    height:calc(100dvh - 64px);
    padding-bottom:calc(96px + env(safe-area-inset-bottom));
  }
  .todo-wrap { padding:.9rem .9rem 0; }
  .todo-list { padding-bottom:0; }
  .todo-row { padding:.85rem .6rem; }
  .todo-title { font-size:.95rem; }
  .todo-check { width:32px; height:32px; min-width:32px; }
  /* Quick-add sits just above the bottom nav */
  .todo-quickadd {
    position:fixed;
    bottom:calc(76px + env(safe-area-inset-bottom));
    left:.7rem; right:.7rem;
    padding:.55rem;
    background:linear-gradient(180deg,rgba(var(--ink),.11),rgba(var(--ink),.045)),rgba(var(--srf0),.72);
    backdrop-filter:blur(28px) saturate(190%);
    -webkit-backdrop-filter:blur(28px) saturate(190%);
    border:1px solid rgba(var(--ink),.12);
    border-radius:18px;
    box-shadow:inset 0 1px 0 rgba(var(--ink),.14),0 14px 36px rgba(0,0,0,.36);
    z-index:850;
  }
}

/* ── Mobile iOS improvements ─────────────────────────────────────────────── */

/* Prevent iOS auto-zoom on input focus (triggers at font-size < 16px) */
@media (max-width: 768px) {
  .form-row input:not([type=radio]):not([type=checkbox]),
  .form-row textarea,
  .pd-input, .pd-name-input,
  .dp-search, .ms-search,
  .todo-quickadd-input,
  .todo-modal-input, .todo-modal-notes, .todo-modal-date {
    font-size:16px !important;
  }

  /* Momentum scrolling on modal scroll areas */
  .pd-body, .modal, .notes-modal, .ms-items, .dp-items {
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }

  /* Larger tap targets for all form inputs */
  .form-row input:not([type=radio]):not([type=checkbox]),
  .form-row textarea {
    min-height:46px;
    padding:.72rem .9rem;
  }

  /* pd-dd-btn: easier to tap */
  .pd-dd-btn {
    min-height:40px;
    display:flex;align-items:center;
  }
}

/* ── Mobile bottom sheet (replaces dropdown on mobile) ───────────────────── */

#mobileSheetBg {
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  z-index:1050;
  animation:msOverlayIn .22s ease forwards;
}
#mobileSheetBg.ms-visible { display:block; }
@keyframes msOverlayIn { from{opacity:0} to{opacity:1} }

#mobileSheet {
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:1051;
  background:linear-gradient(180deg,rgba(var(--ink),.08),rgba(var(--ink),.035)),rgba(19,19,29,.82);
  border-radius:24px 24px 0 0;
  max-height:78dvh;
  display:flex;flex-direction:column;
  transform:translateY(100%);
  transition:transform .38s cubic-bezier(.32,.72,0,1);
  border-top:1px solid rgba(var(--ink),.14);
  box-shadow:inset 0 1px 0 rgba(var(--ink),.12),0 -24px 80px rgba(0,0,0,.65);
  backdrop-filter:blur(42px) saturate(210%);
  -webkit-backdrop-filter:blur(42px) saturate(210%);
}
#mobileSheet.ms-visible { transform:translateY(0); }
#mobileSheet.ms-closing { transform:translateY(100%); }

.ms-handle-row {
  padding:.85rem 0 .35rem;
  display:flex;justify-content:center;
  flex-shrink:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.ms-handle {
  width:36px;height:4px;border-radius:2px;
  background:rgba(var(--ink),.18);
}

.ms-label {
  font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(var(--ink),.32);
  padding:0 1.4rem .6rem;
  flex-shrink:0;
}

.ms-search-wrap {
  padding:.5rem 1rem .65rem;
  flex-shrink:0;
  border-bottom:1px solid rgba(var(--ink),.07);
}
.ms-search {
  width:100%;box-sizing:border-box;
  background:linear-gradient(180deg,rgba(var(--ink),.12),rgba(var(--ink),.045));
  border:1px solid rgba(var(--ink),.13);
  border-radius:16px;
  padding:.72rem 1rem;
  font-size:16px;
  color:var(--wh);font-family:inherit;
  outline:none;
  -webkit-appearance:none;
  transition:border-color .15s,background .15s,box-shadow .15s;
  box-shadow:inset 0 1px 0 rgba(var(--ink),.12);
}
.ms-search:focus { border-color:rgba(var(--ink),.3);background:linear-gradient(180deg,rgba(var(--ink),.15),rgba(var(--ink),.06));box-shadow:inset 0 1px 0 rgba(var(--ink),.16),0 8px 22px rgba(0,0,0,.18); }
.ms-search::placeholder { color:var(--wh3); }

.ms-items {
  flex:1;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:.45rem .75rem;
  padding-bottom:calc(.5rem + env(safe-area-inset-bottom));
}

.ms-item {
  display:flex;align-items:center;gap:.85rem;
  padding:.88rem 1rem;
  border-radius:14px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .1s, transform .1s,box-shadow .1s;
  min-height:52px;
}
.ms-item:active {
  background:linear-gradient(180deg,rgba(var(--ink),.12),rgba(var(--ink),.045));
  box-shadow:inset 0 1px 0 rgba(var(--ink),.1);
  transform:scale(.98);
  transition:none;
}
.ms-item.ms-sel { background:rgba(var(--ink),.055); }

.ms-dot {
  width:11px;height:11px;border-radius:50%;
  flex-shrink:0;
}
.ms-text {
  flex:1;font-size:.95rem;font-weight:500;color:var(--wh);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ms-check {
  flex-shrink:0;opacity:0;
  color:var(--red);
  transition:opacity .15s;
}
.ms-item.ms-sel .ms-check { opacity:1; }

.ms-empty {
  padding:2rem 1rem;
  font-size:.85rem;color:rgba(var(--ink),.3);
  text-align:center;font-style:italic;
}

/* Final glass pass: keep late component definitions in the same material system. */
.stat-card,.month-section,.kb-panel,.cp-hero,.stat-strip-inner,
.dash-kpi-card,.dash-panel,.inv-kpi,.inv-table-wrap,.inv-catalog,
.vcal-grid-panel,.vcal-side-panel,.todo-row,.bank-panel {
  background:var(--glass-panel-bg);
  border-color:rgba(var(--ink),.105);
  box-shadow:var(--glass-highlight),var(--shadow-card);
}
.dash-panel-header,.kb-panel-header,.inv-list-head,.inv-catalog-header,
.month-header,.inv-editor-header,.pd-footer,.inv-editor-footer,
.vcal-side-header,.vcal-labels-head {
  background:linear-gradient(180deg,rgba(var(--ink),.07),rgba(var(--ink),.025));
  border-color:rgba(var(--ink),.075);
}
.nav-sep{background:rgba(var(--ink),.06);height:18px;margin:0 .12rem;}
.dash-panel-count,.gs-item-tag,.inv-imported-badge {
  background:linear-gradient(180deg,rgba(var(--ink),.1),rgba(var(--ink),.035));
  border-color:rgba(var(--ink),.12);
  box-shadow:inset 0 1px 0 rgba(var(--ink),.1);
}

/* ── Finance page: mobile layout ─────────────────────────────────────────── */
@media (max-width: 768px) {
  /* 2-column KPI grid with Kontostand spanning full width */
  #viewFinance .dash-kpi-grid {
    grid-template-columns: 1fr 1fr;
  }
  #viewFinance .fin-balance-card {
    grid-column: 1 / -1;
  }

  /* TVA + Rechnungsstatus: stack vertically (already single column) */
  .dash-row { grid-template-columns:1fr; }

  /* Finance chart rows: compact */
  .fin-chart-row { grid-template-columns:60px 1fr 72px; gap:.5rem; }
  .fin-chart-label { font-size:.72rem; }
  .fin-chart-val { font-size:.74rem; }

  /* Bank ledger: stack on narrow */
  .bank-month-row { grid-template-columns:1fr; gap:.5rem; }
  .bank-month-saldo { text-align:left; }
}


/* ── 11-feedback.css ───────────────────────────── */
/* =============================================================================
   11-feedback.css — Offline-Banner, Pull-to-Refresh, Skeletons, Haptik

   Teil von style.css (nach Bereichen aufgeteilt). Die Dateien werden in
   nummerierter Reihenfolge geladen — die Kaskade hängt daran, also nicht
   umsortieren. Eingebunden in index.html.
   ============================================================================= */

/* ── Offline banner ──────────────────────────────────────────────────────── */
#offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: calc(.45rem + env(safe-area-inset-top, 0px)) 1rem .45rem;
  background: #b45309;
  color: var(--on-accent);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
#offline-banner[hidden] { display: none; }
.offline-banner-icon { font-size: 1rem; }

/* ── Pull-to-refresh indicator ──────────────────────────────────────────── */
#ptr-indicator {
  position: fixed;
  /* Start below the safe area (notch/Dynamic Island), then move up when hidden */
  top: env(safe-area-inset-top, 0px);
  left: 50%;
  z-index: 9990;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(var(--srf2),.96);
  border: 1px solid rgba(var(--ink),.14);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  transform: translateX(-50%) translateY(-52px);
  color: rgba(var(--ink),.8);
}
#ptr-indicator .ptr-icon {
  width: 17px;
  height: 17px;
  transition: transform .25s ease;
}
#ptr-indicator.ptr-ready .ptr-icon { transform: rotate(180deg); }
#ptr-indicator.ptr-loading .ptr-icon { animation: ptr-spin .7s linear infinite; }
@keyframes ptr-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Skeleton loading placeholders ──────────────────────────────────────── */
@keyframes skel-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.skeleton-wrap {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: .85rem;
}
.skel-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: 1rem 1.1rem;
  display: flex;
  gap: .9rem;
  align-items: center;
}
.skel-card--wide  { min-height: 82px; }
.skel-card--tall  { flex-direction: column; align-items: stretch; min-height: 130px; }
.skel-circle {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(90deg, rgba(var(--ink),.06) 25%, rgba(var(--ink),.12) 50%, rgba(var(--ink),.06) 75%);
  background-size: 400px 100%;
  animation: skel-shimmer 1.4s infinite linear;
}
.skel-lines { flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.skel-line {
  height: 11px; border-radius: 6px;
  background: linear-gradient(90deg, rgba(var(--ink),.06) 25%, rgba(var(--ink),.11) 50%, rgba(var(--ink),.06) 75%);
  background-size: 400px 100%;
  animation: skel-shimmer 1.4s infinite linear;
}
.skel-line--short { width: 40%; }
.skel-line--med   { width: 60%; }
.skel-line--long  { width: 85%; }
.skel-item {
  height: 44px; border-radius: 10px; margin-top: .5rem;
  background: linear-gradient(90deg, rgba(var(--ink),.05) 25%, rgba(var(--ink),.09) 50%, rgba(var(--ink),.05) 75%);
  background-size: 400px 100%;
  animation: skel-shimmer 1.4s infinite linear;
}
.skel-btn-row { display: flex; gap: .6rem; margin-top: .75rem; }
.skel-btn {
  flex: 1; height: 38px; border-radius: 10px;
  background: linear-gradient(90deg, rgba(var(--ink),.06) 25%, rgba(var(--ink),.11) 50%, rgba(var(--ink),.06) 75%);
  background-size: 400px 100%;
  animation: skel-shimmer 1.4s infinite linear;
}

/* ── Metric alert/active states ─────────────────────────────────────────── */
.dash-command-metric.metric-alert {
  border-color: rgba(208,17,27,.35);
  background: linear-gradient(180deg,rgba(208,17,27,.18),rgba(208,17,27,.06));
  box-shadow: inset 0 1px 0 rgba(var(--ink),.08), 0 0 0 1px rgba(208,17,27,.15);
}
.dash-command-metric.metric-alert span { color: #ff4d4d; }
.dash-command-metric.metric-active span { color: var(--wh); opacity: 1; }

/* ── Bottom sheet modals on mobile ──────────────────────────────────────── */
@media (max-width: 768px) {
  #clientModalBg,
  #confirmBg {
    align-items: flex-end;
    padding: 0;
  }
  #clientModalBg .modal {
    border-radius: 24px 24px 0 0;
    max-height: 92dvh;
    height: auto;
    animation: mobileModalIn .32s cubic-bezier(.32,.72,0,1);
    padding-bottom: calc(1.2rem + env(safe-area-inset-bottom));
  }
  #confirmBg .confirm-modal {
    border-radius: 24px 24px 0 0;
    width: 100vw;
    max-width: 100vw;
    animation: mobileModalIn .25s cubic-bezier(.32,.72,0,1);
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
  }
}

/* ── Board empty state ───────────────────────────────────────────────────── */
.board-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 4rem 2rem;
  text-align: center;
}
.board-empty-icon {
  color: rgba(var(--ink),.18);
  margin-bottom: .5rem;
}
.board-empty-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(var(--ink),.6);
  letter-spacing: -.01em;
}
.board-empty-sub {
  font-size: .82rem;
  color: rgba(var(--ink),.32);
  max-width: 240px;
  line-height: 1.6;
}

/* ── iOS haptic flash fallback ───────────────────────────────────────────── */
body.haptic-flash::after,
body.haptic-flash-red::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  animation: haptic-pop .08s ease-out forwards;
}
body.haptic-flash::after     { background: rgba(var(--ink),.07); }
body.haptic-flash-red::after { background: rgba(208,17,27,.1); }
@keyframes haptic-pop {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}


/* ── 12-misc.css ───────────────────────────── */
/* =============================================================================
   12-misc.css — Vertrags-Pills, Doc-Switcher, Vermögensverlauf, Barrierefreiheit

   Teil von style.css (nach Bereichen aufgeteilt). Die Dateien werden in
   nummerierter Reihenfolge geladen — die Kaskade hängt daran, also nicht
   umsortieren. Eingebunden in index.html.
   ============================================================================= */

/* ── Contract preset pills ──────────────────────────────────────────────── */
.ctr-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .55rem;
}
.ctr-preset-btn {
  font-size: .68rem;
  font-weight: 600;
  padding: .28rem .65rem;
  border-radius: 980px;
  border: 1px solid rgba(var(--ink),.14);
  background: rgba(var(--ink),.07);
  color: rgba(var(--ink),.6);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  font-family: inherit;
  white-space: nowrap;
}
.ctr-preset-btn:hover,
.ctr-preset-btn.ctr-preset-active {
  background: rgba(208,17,27,.18);
  border-color: rgba(208,17,27,.4);
  color: var(--wh);
}

/* ── Touch targets (mobile) ──────────────────────────────────────────────────
   Icon-Buttons sind visuell 22–28px — zu klein als Tap-Ziel (Apple: 44px).
   Ein unsichtbares ::after-Overlay vergrößert die Trefferfläche, ohne die
   Optik zu verändern. */
@media (max-width: 768px) {
  .todo-check,.todo-delete,.todo-done-toggle,
  .inv-item-del,.inv-catalog-pick,.inv-catalog-edit,
  .topbar-search-clear,.cal-nav,.vcal-nav,
  .btn-settings,.btn-logout{position:relative;}
  .todo-check::after,.todo-delete::after,.todo-done-toggle::after,
  .inv-item-del::after,.inv-catalog-pick::after,.inv-catalog-edit::after,
  .topbar-search-clear::after,.cal-nav::after,.vcal-nav::after,
  .btn-settings::after,.btn-logout::after{content:'';position:absolute;inset:-8px;}
  .btn-sm{min-height:40px;}
}

/* ── Doc-Switcher: Rechnungen · Angebote · Verträge ─────────────────────────
   Segmented Control oben in den drei Dokument-Views (teilen sich einen Nav-Tab) */
.doc-switcher{
  display:flex;gap:.25rem;margin-bottom:1.1rem;padding:.25rem;
  border:1px solid var(--glass-border);border-radius:14px;
  background:var(--glass-panel-bg);
  box-shadow:var(--glass-highlight);
  width:fit-content;
}
.doc-seg{
  display:flex;align-items:center;gap:.45rem;
  padding:.45rem 1.05rem;border:none;border-radius:10px;cursor:pointer;
  background:none;color:var(--wh5);
  font-size:.78rem;font-weight:600;font-family:inherit;
  transition:color .15s,background .15s;
}
.doc-seg:hover{color:var(--wh);background:rgba(var(--ink),.06);}
.doc-seg.active{
  color:var(--wh);background:linear-gradient(180deg,rgba(var(--ink),.13),rgba(var(--ink),.06));
  box-shadow:inset 0 1px 0 rgba(var(--ink),.14),0 2px 8px rgba(0,0,0,.3);
}
.doc-seg-badge{
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(208,17,27,.8);color:var(--on-accent);
  font-size:.68rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1;
}
@media (max-width: 768px){
  .doc-switcher{width:100%;}
  .doc-seg{flex:1;justify-content:center;padding:.55rem .5rem;}
}

/* ── Finanzen: Vermögensentwicklung ─────────────────────────────────────────── */
.fin-wealth-wrap{height:240px;}
@media (max-width: 768px){
  .fin-wealth-wrap{height:190px;}
}

/* ── Kontoauszug: Monats-Gruppen ────────────────────────────────────────────── */
.bank-month{margin:0 1.2rem .55rem;border:1px solid var(--wh08);border-radius:14px;background:rgba(var(--ink),.02);overflow:hidden;}
.bank-month:last-of-type{margin-bottom:.9rem;}
.bank-month-head{
  display:flex;align-items:center;gap:.6rem;
  padding:.7rem .95rem;cursor:pointer;list-style:none;
  transition:background .15s;user-select:none;-webkit-user-select:none;
}
.bank-month-head::-webkit-details-marker{display:none;}
.bank-month-head:hover{background:rgba(var(--ink),.04);}
.bank-month-chev{color:var(--wh4);font-size:1rem;line-height:1;transition:transform .2s;}
.bank-month[open] .bank-month-chev{transform:rotate(90deg);}
.bank-month-name{font-size:.82rem;font-weight:700;}
.bank-month-count{font-size:.7rem;color:var(--wh4);}
.bank-month-sums{margin-left:auto;display:flex;align-items:center;gap:.8rem;font-size:.74rem;font-weight:600;font-variant-numeric:tabular-nums;}
.bank-month-saldo{padding:.18rem .55rem;border-radius:8px;background:rgba(var(--ink),.06);font-weight:700;}
.bank-month .bank-tx-list{padding:0 .95rem .6rem;border-top:1px solid var(--wh05);}
@media (max-width: 768px){
  .bank-month{margin:0 .8rem .5rem;}
  /* Auf schmalen Screens nur den Saldo zeigen — Ein/Aus stehen im Detail */
  .bank-month-sums .bank-amt-pos:not(.bank-month-saldo),
  .bank-month-sums .bank-amt-neg:not(.bank-month-saldo){display:none;}
  .bank-month .bank-tx-list{padding:0 .7rem .5rem;}
}

/* ── Kalender: Schnellanlegen am selektierten Tag ───────────────────────────── */
.vcal-add-day-btn{
  margin-left:auto;padding:.3rem .7rem;border-radius:8px;cursor:pointer;
  background:rgba(208,17,27,.16);border:1px solid rgba(208,17,27,.4);
  color:#ff6b72;font-size:.72rem;font-weight:700;font-family:inherit;
  transition:background .15s,color .15s;white-space:nowrap;
}
.vcal-add-day-btn:hover{background:rgba(208,17,27,.3);color:var(--wh);}
.vcal-add-day-btn + .vcal-clear-sel{margin-left:.45rem;}

/* =============================================================================
   ACCESSIBILITY
   ============================================================================= */

/* Bewegung reduzieren: respektiert die Systemeinstellung (iOS/macOS
   "Bedienungshilfen → Bewegung reduzieren"). Schaltet Animationen und
   Transitions praktisch ab, ohne Layout oder Funktion zu ändern. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  html{scroll-behavior:auto!important;}
}

/* Focus-Ring nur bei Tastaturnavigation (Tab), nie bei Klick/Touch.
   Inputs behalten ihre eigenen :focus-Border-Styles. */
:focus-visible{
  outline:2px solid rgba(208,17,27,.75);
  outline-offset:2px;
  border-radius:6px;
}
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:none; /* haben eigene Border-/Background-Focus-Styles */
}

/* ═══ Zeiterfassung (wt-*) ══════════════════════════════════════════════════ */

.wt-wrap{max-width:720px;margin:0 auto;padding:1rem 1.5rem 4rem;display:flex;flex-direction:column;gap:1rem;}
.wt-cols,.wt-col{display:contents;} /* mobil: alles eine Spalte */
@media (min-width:1024px){
  .wt-wrap{max-width:1160px;}
  .wt-cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start;}
  .wt-col{display:flex;flex-direction:column;gap:1rem;min-width:0;}
}

/* — Timer-Hero — */
.wt-hero{position:relative;border-radius:22px;padding:1.5rem 1.4rem 1.3rem;text-align:center;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-card);
  overflow:hidden;transition:border-color .3s;}
.wt-hero.wt-running{border-color:rgba(52,211,153,.35);}
.wt-hero.wt-running::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% -20%,rgba(52,211,153,.14),transparent 60%);}
.wt-hero.wt-paused{border-color:rgba(245,158,11,.35);}
.wt-hero.wt-paused::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% -20%,rgba(245,158,11,.14),transparent 60%);}

.wt-hero-top{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:.6rem;position:relative;}
.wt-state-dot{width:9px;height:9px;border-radius:50%;background:rgba(var(--ink),.25);}
.wt-running .wt-state-dot{background:#34d399;box-shadow:0 0 8px rgba(52,211,153,.7);animation:wt-pulse 2s ease-in-out infinite;}
.wt-paused .wt-state-dot{background:#f59e0b;box-shadow:0 0 8px rgba(245,158,11,.7);}
@keyframes wt-pulse{0%,100%{opacity:1;}50%{opacity:.45;}}
.wt-state-label{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--wh5);}
.wt-hero-since{font-size:.78rem;color:var(--wh4);}

.wt-hero-time{font-size:3.2rem;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;position:relative;}
.wt-hero-sub{font-size:.82rem;color:var(--wh4);margin-top:.25rem;position:relative;font-variant-numeric:tabular-nums;}

.wt-forgot-hint{margin:.8rem auto 0;max-width:420px;padding:.5rem .9rem;border-radius:12px;cursor:pointer;
  font-size:.8rem;font-weight:600;color:#f59e0b;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);position:relative;}

.wt-hero-actions{display:flex;gap:.7rem;justify-content:center;margin-top:1.1rem;position:relative;}
.wt-btn{display:inline-flex;align-items:center;gap:.5rem;border:none;cursor:pointer;
  font-family:inherit;font-size:.95rem;font-weight:700;padding:.85rem 1.5rem;border-radius:980px;
  transition:transform .18s var(--ease-spring),box-shadow .2s,background .2s;}
.wt-btn:active{transform:scale(.96);}
.wt-btn-start{background:linear-gradient(145deg,#10b981,#059669);color:#fff;box-shadow:0 8px 24px rgba(16,185,129,.35);padding:.95rem 2.2rem;font-size:1.02rem;}
.wt-btn-break{background:rgba(245,158,11,.14);color:#f59e0b;border:1px solid rgba(245,158,11,.35);}
.wt-btn-break-active{background:linear-gradient(145deg,#10b981,#059669);color:#fff;border:none;box-shadow:0 8px 24px rgba(16,185,129,.3);}
.wt-btn-stop{background:rgba(208,17,27,.13);color:var(--red);border:1px solid rgba(208,17,27,.35);}

/* — Panels — */
.wt-panel{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:18px;overflow:hidden;
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-card);}
.wt-panel-hdr{padding:.72rem 1.2rem;background:rgba(var(--ink),.03);border-bottom:1px solid rgba(var(--ink),.05);
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;}
.wt-panel-title{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--wh4);font-weight:700;}
.wt-panel-meta{font-size:.78rem;color:var(--wh5);font-variant-numeric:tabular-nums;font-weight:600;}
.wt-empty{padding:1.4rem 1.2rem;text-align:center;font-size:.85rem;color:var(--wh4);}

/* — Wochenbalken — */
.wt-week-bars{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem;padding:1rem 1.2rem 1.1rem;align-items:end;}
.wt-week-day{display:flex;flex-direction:column;align-items:center;gap:.3rem;}
.wt-week-val{font-size:.64rem;color:var(--wh4);font-variant-numeric:tabular-nums;height:.9rem;}
.wt-week-bar-track{width:100%;max-width:34px;height:84px;border-radius:9px;background:rgba(var(--ink),.06);display:flex;align-items:flex-end;overflow:hidden;}
.wt-week-bar{width:100%;border-radius:9px;background:linear-gradient(180deg,#34d399,#059669);transition:height .4s var(--ease-spring);}
.wt-weekend .wt-week-bar{background:linear-gradient(180deg,#f59e0b,#d97706);}
.wt-week-dow{font-size:.7rem;font-weight:700;color:var(--wh5);}
.wt-weekend .wt-week-dow{color:#f59e0b;}
.wt-week-num{font-size:.64rem;color:var(--wh3);}
.wt-today .wt-week-dow{color:var(--red);}
.wt-today .wt-week-bar-track{outline:1.5px solid rgba(208,17,27,.4);outline-offset:2px;}

/* — Monatsstatistik — */
.wt-month-nav{display:flex;gap:.3rem;}
.wt-month-btn{width:28px;height:28px;border-radius:9px;border:1px solid rgba(var(--ink),.12);cursor:pointer;
  background:rgba(var(--ink),.05);color:var(--wh6);font-size:1rem;line-height:1;font-family:inherit;transition:background .15s;}
.wt-month-btn:disabled{opacity:.3;cursor:default;}
.wt-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(var(--ink),.05);}
.wt-stat{background:rgba(var(--srf0),.5);padding:.9rem .6rem;text-align:center;}
.wt-stat-val{font-size:1.15rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.wt-stat-lbl{font-size:.66rem;color:var(--wh4);text-transform:uppercase;letter-spacing:.1em;margin-top:.2rem;}
.wt-stat-warn .wt-stat-val{color:#f59e0b;}
.wt-stat-grid-4{grid-template-columns:repeat(4,1fr);}
.wt-stat-vac .wt-stat-val{color:#34d399;}

/* — Einträge — */
.wt-day-group{padding:.4rem 0;}
.wt-day-group + .wt-day-group{border-top:1px solid rgba(var(--ink),.05);}
.wt-day-label{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1.2rem .3rem;
  font-size:.72rem;font-weight:700;color:var(--wh4);text-transform:uppercase;letter-spacing:.1em;}
.wt-day-total{font-variant-numeric:tabular-nums;color:var(--wh5);}
.wt-entry{display:flex;align-items:center;gap:.8rem;padding:.6rem 1.2rem;cursor:pointer;transition:background .15s;}
.wt-entry:hover{background:rgba(var(--ink),.04);}
.wt-entry-times{font-size:.88rem;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}
.wt-entry-live{color:#34d399;font-weight:700;}
.wt-entry-meta{flex:1;display:flex;gap:.6rem;min-width:0;font-size:.75rem;color:var(--wh4);}
.wt-entry-break{white-space:nowrap;}
.wt-entry-note{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wt-entry-net{font-size:.88rem;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;}
.wt-entry-running .wt-entry-net{color:#34d399;}
.wt-entry-forgot{background:rgba(245,158,11,.07);}
.wt-entries-more{display:block;width:calc(100% - 2.4rem);margin:.5rem 1.2rem .9rem;padding:.55rem;border-radius:12px;cursor:pointer;
  border:1px dashed rgba(var(--ink),.18);background:none;color:var(--wh5);font-family:inherit;font-size:.82rem;font-weight:600;transition:border-color .15s,color .15s;}
.wt-entries-more:hover{border-color:rgba(var(--ink),.32);color:var(--wh6);}
.wt-entry-forgot .wt-entry-times::after{content:'!';margin-left:.4rem;color:#f59e0b;font-weight:800;}

/* — Urlaub — */
.wt-vac-row{display:flex;align-items:center;gap:.8rem;padding:.65rem 1.2rem;cursor:pointer;transition:background .15s;}
.wt-vac-row:hover{background:rgba(var(--ink),.04);}
.wt-vac-row + .wt-vac-row{border-top:1px solid rgba(var(--ink),.05);}
.wt-vac-icon{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:rgba(245,158,11,.12);color:#f59e0b;flex-shrink:0;}
.wt-vac-main{flex:1;min-width:0;}
.wt-vac-range{font-size:.88rem;font-weight:600;font-variant-numeric:tabular-nums;}
.wt-vac-note{font-size:.75rem;color:var(--wh4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wt-vac-days{font-size:.75rem;font-weight:700;color:var(--wh5);white-space:nowrap;}
.wt-vac-del{width:26px;height:26px;border-radius:8px;border:none;cursor:pointer;flex-shrink:0;
  background:rgba(var(--ink),.05);color:var(--wh4);display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;}
.wt-vac-del:hover{background:rgba(248,113,113,.14);color:var(--danger-bright);}
.wt-vac-add{display:block;width:calc(100% - 2.4rem);margin:.5rem 1.2rem .9rem;padding:.6rem;border-radius:12px;cursor:pointer;
  border:1px dashed rgba(var(--ink),.18);background:none;color:var(--wh5);font-family:inherit;font-size:.85rem;font-weight:600;transition:border-color .15s,color .15s;}
.wt-vac-add:hover{border-color:rgba(var(--ink),.32);color:var(--wh6);}

/* — Großer Monatskalender — */
.wtbig-dows{display:grid;grid-template-columns:repeat(7,1fr);padding:.6rem 1rem 0;}
.wtbig-dows span{text-align:center;font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--wh4);padding-bottom:.3rem;}
.wtbig-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem;padding:0 1rem .6rem;}
.wtbig-day{position:relative;min-height:64px;border-radius:12px;padding:.35rem .45rem;
  background:rgba(var(--ink),.03);border:1px solid rgba(var(--ink),.05);
  display:flex;flex-direction:column;gap:.15rem;}
.wtbig-empty{background:none;border:none;}
.wtbig-day>*{position:relative;z-index:1;}
.wtbig-worked::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(to top,rgba(16,185,129,.22) var(--fill,0%),transparent var(--fill,0%));}
.wtbig-num{font-size:.78rem;font-weight:700;color:var(--wh5);font-variant-numeric:tabular-nums;line-height:1;}
.wtbig-hours{font-size:.92rem;font-weight:800;letter-spacing:-.01em;color:#10b981;font-variant-numeric:tabular-nums;margin-top:auto;}
html[data-theme="light"] .wtbig-hours{color:#047857;}
.wtbig-tag{font-size:.56rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#10b981;margin-top:auto;}
.wtbig-tag-hol{color:#f59e0b;}
.wtbig-we{background:rgba(var(--ink),.065);}
.wtbig-we .wtbig-num{color:var(--wh3);}
.wtbig-hol{background:rgba(245,158,11,.09);border-color:rgba(245,158,11,.25);}
.wtbig-hol .wtbig-num{color:#f59e0b;}
.wtbig-vac{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.3);}
.wtbig-vac .wtbig-num{color:#10b981;}
.wtbig-vac .wtbig-tag{margin-top:auto;}
.wtbig-today{box-shadow:inset 0 0 0 1.5px rgba(208,17,27,.55);}
.wtbig-legend{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;padding:.2rem 1rem .8rem;font-size:.7rem;color:var(--wh4);}
.wtbig-legend span{display:inline-flex;align-items:center;gap:.35rem;}
.wtbig-dot{width:9px;height:9px;border-radius:3px;display:inline-block;}
.wtbig-dot-work{background:#34d399;}
.wtbig-dot-vac{background:rgba(16,185,129,.4);}
.wtbig-dot-hol{background:rgba(245,158,11,.55);}
.wtbig-dot-we{background:rgba(var(--ink),.18);}
@media (max-width:640px){
  .wtbig-grid{gap:.2rem;padding:0 .6rem .5rem;}
  .wtbig-day{min-height:48px;padding:.25rem .3rem;border-radius:9px;}
  .wtbig-num{font-size:.7rem;}
  .wtbig-hours{font-size:.74rem;}
  .wtbig-tag{font-size:.46rem;letter-spacing:.02em;}
}

/* — App-weite Kalender-Markierungen: Wochenende / Feiertag / Urlaub —
   Gleiche Sprache wie der Zeit-Kalender: Wochenende schattiert,
   Feiertag orange, Urlaub grün. */

/* Haupt-Kalender (Monat + Woche) */
.vcal-cell.vcal-day-we,.vcal-wk-col.vcal-day-we{background:rgba(var(--ink),.045);}
.vcal-cell.vcal-day-hol,.vcal-wk-col.vcal-day-hol{background:rgba(245,158,11,.08);box-shadow:inset 0 0 0 1px rgba(245,158,11,.22);}
.vcal-cell.vcal-day-vac,.vcal-wk-col.vcal-day-vac{background:rgba(16,185,129,.09);box-shadow:inset 0 0 0 1px rgba(16,185,129,.26);}
.vcal-day-hol .vcal-num,.vcal-day-hol .vcal-wk-num{color:#f59e0b;}
.vcal-day-vac .vcal-num,.vcal-day-vac .vcal-wk-num{color:#10b981;}
.vcal-day-tag{font-size:.54rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#10b981;line-height:1.1;}
.vcal-day-tag-hol{color:#f59e0b;}
.vcal-wk-col .vcal-day-tag{padding:0 .4rem .15rem;}
@media (max-width:640px){
  .vcal-cell .vcal-day-tag{display:none;} /* Mini-Zellen: Farbe reicht */
}

/* Dashboard-Minikalender */
.dcal-cell.dcal-we{background:rgba(var(--ink),.045);border-radius:9px;}
.dcal-cell.dcal-hol{background:rgba(245,158,11,.1);border-radius:9px;}
.dcal-cell.dcal-hol .dcal-num{color:#f59e0b;font-weight:700;}
.dcal-cell.dcal-vac{background:rgba(16,185,129,.12);border-radius:9px;}
.dcal-cell.dcal-vac .dcal-num{color:#10b981;font-weight:700;}

/* — Modal-Extras — */
.wt-modal-delete{color:var(--danger-bright);margin-right:auto;}
/* Löschen ist Gefahr, nicht Marke — deshalb --danger, nicht --red */
.pd-delete-btn{color:var(--danger-bright);margin-right:auto;}
.wt-time-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.6rem;}

/* — Inline-Kalender (Airline-Stil) — */
.wtcal{border:1px solid rgba(var(--ink),.1);border-radius:14px;padding:.7rem .75rem .55rem;background:rgba(var(--ink),.025);}
.wtcal-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;}
.wtcal-title{font-size:.85rem;font-weight:700;}
.wtcal-nav{width:30px;height:30px;border-radius:9px;border:1px solid rgba(var(--ink),.12);cursor:pointer;
  background:rgba(var(--ink),.05);color:var(--wh6);font-size:1.05rem;line-height:1;font-family:inherit;}
.wtcal-dows{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:.15rem;}
.wtcal-dows span{text-align:center;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--wh4);padding:.15rem 0;}
.wtcal-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:.18rem;}
.wtcal-day{position:relative;height:36px;border:none;background:none;cursor:pointer;font-family:inherit;
  font-size:.82rem;font-weight:600;color:var(--wh6);border-radius:10px;font-variant-numeric:tabular-nums;
  display:flex;align-items:center;justify-content:center;transition:background .12s;}
.wtcal-empty{cursor:default;}
.wtcal-we{color:var(--wh3);}
.wtcal-hol{color:#f59e0b;}
.wtcal-hol::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:#f59e0b;}
.wtcal-today{box-shadow:inset 0 0 0 1.5px rgba(208,17,27,.5);}
.wtcal-range{background:rgba(52,211,153,.16);border-radius:0;}
.wtcal-sel{background:linear-gradient(145deg,#10b981,#059669);color:#fff;}
.wtcal-sel.wtcal-hol,.wtcal-sel.wtcal-we{color:#fff;}
.wtcal-sel-start{border-radius:10px 0 0 10px;}
.wtcal-sel-end{border-radius:0 10px 10px 0;}
.wtcal-sel-start.wtcal-sel-end,.wtcal-sel:only-of-type{border-radius:10px;}
.wtcal-summary{margin-top:.55rem;padding-top:.5rem;border-top:1px solid rgba(var(--ink),.07);
  font-size:.78rem;font-weight:600;color:var(--wh5);text-align:center;font-variant-numeric:tabular-nums;}

/* — Dashboard-Timer-Karte — */
.dash-quick-wt-dot{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 7px rgba(52,211,153,.7);animation:wt-pulse 2s ease-in-out infinite;flex-shrink:0;}
.dash-wt-card{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin:.9rem 0 .2rem;
  padding:.65rem .9rem;border-radius:14px;
  background:rgba(52,211,153,.07);border:1px solid rgba(52,211,153,.28);}
.dash-wt-paused{background:rgba(245,158,11,.07);border-color:rgba(245,158,11,.3);}
.dash-wt-paused .dash-quick-wt-dot{background:#f59e0b;box-shadow:0 0 7px rgba(245,158,11,.7);animation:none;}
.dash-wt-info{display:flex;align-items:center;gap:.65rem;cursor:pointer;min-width:0;}
.dash-wt-texts{display:flex;flex-direction:column;gap:.05rem;min-width:0;}
.dash-wt-texts strong{font-size:1.05rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.15;}
.dash-wt-sub{font-size:.7rem;color:var(--wh4);font-variant-numeric:tabular-nums;white-space:nowrap;}
.dash-wt-btns{display:flex;gap:.45rem;flex-shrink:0;}
/* Gleiche Buttons wie im Zeit-Tab — auf Desktop nur kompakter */
.dash-wt-btns .wt-btn{gap:.35rem;font-size:.78rem;padding:.5rem .95rem;white-space:nowrap;}
.dash-wt-btns .wt-btn-start{font-size:.8rem;padding:.55rem 1.15rem;box-shadow:0 4px 14px rgba(16,185,129,.3);}
.dash-wt-btns .wt-btn svg{width:15px;height:15px;}
.dash-wt-idle{background:rgba(var(--ink),.035);border-color:rgba(var(--ink),.12);}
.dash-wt-dot-idle{background:rgba(var(--ink),.25);box-shadow:none;animation:none;}

/* — Mobile — */
@media (max-width:640px){
  .wt-wrap{padding:.6rem .9rem 6rem;}
  .wt-hero-time{font-size:2.7rem;}
  .wt-btn{padding:.8rem 1.2rem;font-size:.9rem;}
  .wt-btn-start{padding:.9rem 1.8rem;}
  .wt-week-bar-track{height:64px;}
  .wt-stat-grid{grid-template-columns:repeat(3,1fr);}
  .wt-stat-grid-4{grid-template-columns:repeat(2,1fr);}
  .wt-stat-val{font-size:1rem;}
}