/* ============================================================================
   Q4 Track — Design System (ds.css)
   Q4 media AG · Stand 2026-09 · kein Framework, kein Preprozessor
   Konventionen: Basis 13 px, 4-px-Raster, 1-px-Hairlines, Radius 4/6 px,
   Akzent sparsam, Schatten nur Drawer/Popover.
   ========================================================================== */

/* --- 1. Schriften ---------------------------------------------------------- */
@font-face{font-family:Geist;src:url(fonts/Geist-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Geist;src:url(fonts/Geist-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Geist;src:url(fonts/Geist-SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(fonts/GeistMono-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(fonts/GeistMono-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* --- 2. Tokens ------------------------------------------------------------- */
:root{
  /* Marke */
  --ds-navy:#040A11; --ds-ink:#0B1220;
  /* Flächen + Linien */
  --ds-bg:#FFFFFF; --ds-bg-sub:#F6F7F9; --ds-surface:#FFFFFF; --ds-surface-2:#F6F7F9;
  --ds-line:#E3E6EA; --ds-line-strong:#CDD3DA; --ds-overlay:rgba(11,18,32,.38);
  /* Text */
  --ds-text:#111827; --ds-text-2:#5B6472; --ds-text-3:#8A93A1; --ds-text-inv:#FFFFFF;
  /* Akzent + Signal */
  --ds-accent:#1B84F5; --ds-accent-hover:#146BD0; --ds-accent-soft:#E8F2FE; --ds-accent-line:#B9D9FC;
  --ds-ok:#16A34A;    --ds-ok-soft:#E7F6EC;    --ds-ok-line:#BEE6CB;
  --ds-warn:#D97706;  --ds-warn-soft:#FDF2E3;  --ds-warn-line:#F2D6A8;
  --ds-danger:#DC2626;--ds-danger-soft:#FDECEC;--ds-danger-line:#F4C4C4;
  --ds-violet:#7C3AED;--ds-violet-soft:#F1EAFE;--ds-violet-line:#DBC9FB;
  --ds-teal:#0D9488;  --ds-teal-soft:#E4F5F3;  --ds-teal-line:#B6E2DC;
  --ds-neutral-soft:#F1F3F5; --ds-neutral-line:#DDE1E6;
  /* Fahrtkategorien */
  --ds-cat-business:#1B84F5; --ds-cat-private:#5B6472;
  --ds-cat-commute:#7C3AED;  --ds-cat-family:#0D9488;
  /* Raster (4 px) */
  --ds-1:4px; --ds-2:8px; --ds-3:12px; --ds-4:16px; --ds-5:20px; --ds-6:24px;
  --ds-8:32px; --ds-10:40px; --ds-12:48px; --ds-16:64px;
  /* Radien */
  --ds-r-sm:4px; --ds-r-md:6px; --ds-r-dot:999px;
  /* Typografie */
  --ds-font:Geist,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ds-font-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ds-fs-micro:10.5px; --ds-fs-label:11px; --ds-fs-sm:12px; --ds-fs-table:12.5px;
  --ds-fs-base:13px; --ds-fs-md:14px; --ds-fs-lg:16px; --ds-fs-xl:20px;
  --ds-fs-stat:24px; --ds-fs-hero:44px;
  --ds-lh:1.45; --ds-track-label:.06em;
  /* Schatten (nur Popover/Drawer/Modal/Toast) */
  --ds-shadow-pop:0 4px 16px -4px rgba(11,18,32,.18),0 1px 3px rgba(11,18,32,.10);
  --ds-shadow-drawer:0 0 0 1px var(--ds-line),-12px 0 32px -12px rgba(11,18,32,.22);
  /* Höhen */
  --ds-topbar-h:48px; --ds-sidebar-w:216px; --ds-tabbar-h:52px;
  --ds-ctrl-h-sm:24px; --ds-ctrl-h-md:30px;
  /* Sichere Bereiche (iPhone-Notch, Home-Indikator, Querformat-Ränder).
     Als Token, damit calc() sie überall ohne env()-Wiederholung benutzen kann. */
  --ds-safe-t:env(safe-area-inset-top,0px);
  --ds-safe-r:env(safe-area-inset-right,0px);
  --ds-safe-b:env(safe-area-inset-bottom,0px);
  --ds-safe-l:env(safe-area-inset-left,0px);
  --ds-navdrawer-w:min(300px,84vw);
  /* z-Skala */
  --ds-z-base:0; --ds-z-sticky:10; --ds-z-topbar:20; --ds-z-tabbar:25;
  --ds-z-popover:40; --ds-z-scrim:50; --ds-z-drawer:60; --ds-z-modal:70; --ds-z-toast:80; --ds-z-tooltip:90;
}

/* Dark Mode — Systempräferenz (per data-theme="light" abschaltbar) */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ds-bg:#0B0F17; --ds-bg-sub:#0B0F17; --ds-surface:#121826; --ds-surface-2:#171E2E;
    --ds-line:#1F2937; --ds-line-strong:#2C3748; --ds-overlay:rgba(2,5,10,.62);
    --ds-text:#E5E7EB; --ds-text-2:#9AA4B2; --ds-text-3:#6B7686; --ds-text-inv:#0B0F17;
    --ds-accent:#3D9BFA; --ds-accent-hover:#63B0FB; --ds-accent-soft:#132437; --ds-accent-line:#1E3E5E;
    --ds-ok:#3FBE6C; --ds-ok-soft:#10241A; --ds-ok-line:#1D3E2B;
    --ds-warn:#E0961F; --ds-warn-soft:#241B0F; --ds-warn-line:#463216;
    --ds-danger:#F05252; --ds-danger-soft:#2A1414; --ds-danger-line:#4A2020;
    --ds-violet:#9B6BF7; --ds-violet-soft:#1D1631; --ds-violet-line:#33245A;
    --ds-teal:#2DB3A5; --ds-teal-soft:#0C2422; --ds-teal-line:#16403C;
    --ds-neutral-soft:#1A2231; --ds-neutral-line:#2A3445;
    --ds-cat-business:#3D9BFA; --ds-cat-private:#9AA4B2; --ds-cat-commute:#9B6BF7; --ds-cat-family:#2DB3A5;
    --ds-shadow-pop:0 4px 18px -4px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.4);
    --ds-shadow-drawer:0 0 0 1px var(--ds-line),-12px 0 36px -12px rgba(0,0,0,.7);
  }
}
/* Dark Mode — manuell erzwungen */
:root[data-theme="dark"]{
  --ds-bg:#0B0F17; --ds-bg-sub:#0B0F17; --ds-surface:#121826; --ds-surface-2:#171E2E;
  --ds-line:#1F2937; --ds-line-strong:#2C3748; --ds-overlay:rgba(2,5,10,.62);
  --ds-text:#E5E7EB; --ds-text-2:#9AA4B2; --ds-text-3:#6B7686; --ds-text-inv:#0B0F17;
  --ds-accent:#3D9BFA; --ds-accent-hover:#63B0FB; --ds-accent-soft:#132437; --ds-accent-line:#1E3E5E;
  --ds-ok:#3FBE6C; --ds-ok-soft:#10241A; --ds-ok-line:#1D3E2B;
  --ds-warn:#E0961F; --ds-warn-soft:#241B0F; --ds-warn-line:#463216;
  --ds-danger:#F05252; --ds-danger-soft:#2A1414; --ds-danger-line:#4A2020;
  --ds-violet:#9B6BF7; --ds-violet-soft:#1D1631; --ds-violet-line:#33245A;
  --ds-teal:#2DB3A5; --ds-teal-soft:#0C2422; --ds-teal-line:#16403C;
  --ds-neutral-soft:#1A2231; --ds-neutral-line:#2A3445;
  --ds-cat-business:#3D9BFA; --ds-cat-private:#9AA4B2; --ds-cat-commute:#9B6BF7; --ds-cat-family:#2DB3A5;
  --ds-shadow-pop:0 4px 18px -4px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.4);
  --ds-shadow-drawer:0 0 0 1px var(--ds-line),-12px 0 36px -12px rgba(0,0,0,.7);
}

/* --- 3. Basis -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ds-bg);color:var(--ds-text);
  font:400 var(--ds-fs-base)/var(--ds-lh) var(--ds-font);
  font-feature-settings:"tnum" 1,"cv11" 1;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--ds-accent);text-decoration:none}
a:hover{text-decoration:underline}
svg{display:block;flex:none}
:focus-visible{outline:2px solid var(--ds-accent);outline-offset:1px;border-radius:2px}
::selection{background:var(--ds-accent-soft);color:var(--ds-text)}

.ds-mono{font-family:var(--ds-font-mono);font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums}
.ds-num{font-family:var(--ds-font-mono);font-variant-numeric:tabular-nums;text-align:right}
.ds-label{font-size:var(--ds-fs-label);letter-spacing:var(--ds-track-label);text-transform:uppercase;color:var(--ds-text-3);font-weight:500}
.ds-muted{color:var(--ds-text-2)}
.ds-dim{color:var(--ds-text-3)}
.ds-h1{font-size:var(--ds-fs-xl);font-weight:600;letter-spacing:-.01em}
.ds-h2{font-size:var(--ds-fs-lg);font-weight:600;letter-spacing:-.005em}
.ds-h3{font-size:var(--ds-fs-md);font-weight:500}
.ds-hr{height:1px;background:var(--ds-line);border:0;margin:var(--ds-4) 0}
.ds-row{display:flex;align-items:center;gap:var(--ds-2)}
.ds-col{display:flex;flex-direction:column;gap:var(--ds-2)}
.ds-spacer{flex:1 1 auto}
.ds-grid{display:grid;gap:var(--ds-3)}

/* --- 4. Shell: Topbar + Sidebar + Inhalt ----------------------------------- */
/* Nie 100vh: iOS Safari rechnet die ein-/ausfahrende Werkzeugleiste nicht mit,
   der Seitenfuß landet dann hinter der Leiste. dvh ist die richtige Einheit,
   -webkit-fill-available die Rückfallebene für alte WebKit-Versionen. */
.ds-shell{min-height:-webkit-fill-available;min-height:100dvh;display:grid;grid-template-columns:var(--ds-sidebar-w) 1fr;grid-template-rows:var(--ds-topbar-h) 1fr;grid-template-areas:"top top" "side main";background:var(--ds-bg-sub)}
.ds-topbar{grid-area:top;position:sticky;top:0;z-index:var(--ds-z-topbar);display:flex;align-items:center;gap:var(--ds-3);padding:0 var(--ds-4);background:var(--ds-surface);border-bottom:1px solid var(--ds-line)}
.ds-brand{display:flex;align-items:center;gap:var(--ds-2);font-weight:600;font-size:var(--ds-fs-md);letter-spacing:-.01em;color:var(--ds-text)}
.ds-brand img,.ds-brand svg{width:22px;height:22px;border-radius:var(--ds-r-sm)}
.ds-brand small{font-weight:400;color:var(--ds-text-3);font-size:var(--ds-fs-sm)}
/* Burger + Seitentitel gibt es nur unter 900 px — auf dem Schreibtisch steht die Navigation offen. */
.ds-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-left:-10px;
  border:0;border-radius:var(--ds-r-sm);background:none;color:var(--ds-text);cursor:pointer;flex:none}
.ds-burger:active{background:var(--ds-surface-2)}
.ds-burger svg{width:20px;height:20px}
.ds-topbar-title{display:none;min-width:0;font-size:var(--ds-fs-md);font-weight:600;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-nav-scrim{display:none}
.ds-nav-head,.ds-nav-foot{display:none}
.ds-sidebar{grid-area:side;position:sticky;top:var(--ds-topbar-h);align-self:start;height:calc(100vh - var(--ds-topbar-h));overflow:auto;padding:var(--ds-3) var(--ds-2);background:var(--ds-surface);border-right:1px solid var(--ds-line);display:flex;flex-direction:column;gap:var(--ds-1)}
.ds-nav-group{margin:var(--ds-3) 0 var(--ds-1);padding:0 var(--ds-2);font-size:var(--ds-fs-label);letter-spacing:var(--ds-track-label);text-transform:uppercase;color:var(--ds-text-3);font-weight:500}
.ds-nav{display:flex;align-items:center;gap:var(--ds-2);height:30px;padding:0 var(--ds-2);border-radius:var(--ds-r-sm);color:var(--ds-text-2);font-size:var(--ds-fs-base);font-weight:400;white-space:nowrap;cursor:pointer;border:0;background:none;width:100%;text-align:left;font-family:inherit}
.ds-nav:hover{background:var(--ds-surface-2);color:var(--ds-text);text-decoration:none}
.ds-nav.is-on{background:var(--ds-accent-soft);color:var(--ds-accent);font-weight:500}
.ds-nav svg{width:16px;height:16px;opacity:.85}
.ds-nav .ds-nav-count{margin-left:auto;font-family:var(--ds-font-mono);font-size:var(--ds-fs-sm);color:var(--ds-text-3)}
.ds-nav.is-on .ds-nav-count{color:var(--ds-accent)}
.ds-main{grid-area:main;min-width:0;padding:var(--ds-5) var(--ds-6) var(--ds-12)}
.ds-page-head{display:flex;align-items:flex-end;gap:var(--ds-3);flex-wrap:wrap;margin-bottom:var(--ds-4)}
.ds-page-head .ds-h1{line-height:1.2}

/* ---------------------------------------------------------------------------
   Telefon (≤ 900 px): keine Reiterleiste am Fuß mehr, sondern Topbar mit
   Burger und eine Navigation, die von links einfährt. Alles, was am Rand
   klebt, bekommt den sicheren Bereich dazu (iPhone-Notch, Home-Indikator).
   --------------------------------------------------------------------------- */
@media (max-width:900px){
  :root{
    --ds-fs-base:14px; --ds-fs-md:15px; --ds-fs-table:13px; --ds-fs-sm:12.5px;
    --ds-ctrl-h-sm:36px; --ds-ctrl-h-md:44px;
    --ds-topbar-h:calc(52px + var(--ds-safe-t));
    --ds-gutter:max(var(--ds-3),var(--ds-safe-l));
    --ds-gutter-r:max(var(--ds-3),var(--ds-safe-r));
  }
  .ds-shell{grid-template-columns:1fr;grid-template-areas:"top" "main"}
  .ds-topbar{gap:var(--ds-1);padding:var(--ds-safe-t) var(--ds-gutter-r) 0 var(--ds-gutter)}
  .ds-burger{display:inline-flex}
  .ds-topbar-title{display:block}
  .ds-brand-name{display:none}
  .ds-brand img,.ds-brand svg{width:24px;height:24px}
  .ds-hide-sm{display:none !important}
  .ds-main{padding:var(--ds-4) var(--ds-gutter) calc(var(--ds-8) + var(--ds-safe-b));min-width:0}

  /* Navigationsschublade */
  .ds-nav-scrim{display:block;position:fixed;inset:0;z-index:var(--ds-z-scrim);
    background:var(--ds-overlay);opacity:0;pointer-events:none;transition:opacity .18s ease}
  .ds-shell.is-nav-open .ds-nav-scrim{opacity:1;pointer-events:auto}
  /* align-self:stretch zurücknehmen: bei „start" zieht Chrome ein fest
     positioniertes Feld auf Inhaltshöhe zusammen, statt top/bottom zu folgen. */
  .ds-sidebar{position:fixed;top:0;left:0;bottom:0;right:auto;height:auto;align-self:stretch;width:var(--ds-navdrawer-w);
    z-index:var(--ds-z-drawer);border-right:1px solid var(--ds-line);box-shadow:var(--ds-shadow-drawer);
    padding:0 0 calc(var(--ds-safe-b) + var(--ds-2)) var(--ds-safe-l);gap:0;overflow:hidden auto;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    /* visibility schaltet beim Öffnen sofort (sonst ist der erste Knopf noch nicht
       fokussierbar) und beim Schließen erst nach der Bewegung. */
    transform:translateX(-101%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s}
  .ds-shell.is-nav-open .ds-sidebar{transform:none;visibility:visible;transition:transform .22s ease,visibility 0s}
  .ds-nav-head{display:flex;align-items:center;gap:var(--ds-2);position:sticky;top:0;z-index:1;
    padding:calc(var(--ds-safe-t) + var(--ds-2)) var(--ds-2) var(--ds-2) var(--ds-3);
    background:var(--ds-surface);border-bottom:1px solid var(--ds-line)}
  .ds-nav-group{margin:var(--ds-3) 0 var(--ds-1);padding:0 var(--ds-5)}
  .ds-nav{height:44px;padding:0 var(--ds-3);margin:0 var(--ds-2);width:auto;border-radius:var(--ds-r-sm)}
  .ds-nav svg{width:18px;height:18px}
  .ds-nav-foot{display:flex;flex-direction:column;gap:var(--ds-3);margin-top:auto;
    padding:var(--ds-3);border-top:1px solid var(--ds-line)}
  .ds-nav-user{display:flex;flex-direction:column;gap:1px;min-width:0}
  .ds-nav-user b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ds-nav-user span{color:var(--ds-text-3);font-size:var(--ds-fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  .ds-page-head{margin-bottom:var(--ds-3)}
  .ds-h1{font-size:18px}
  /* Alles Weitere für schmale Geräte steht in §16 — die Bausteine sind
     erst weiter unten definiert, und Media-Queries erhöhen die Spezifität nicht. */
}
@media (prefers-reduced-motion:reduce){
  .ds-sidebar,.ds-nav-scrim{transition:none}
}
/* Solange die Schublade offen ist, scrollt nur sie — nicht die Seite darunter. */
body.ds-nav-lock{overflow:hidden}

/* --- 5. Button ------------------------------------------------------------- */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-1);height:var(--ds-ctrl-h-md);padding:0 10px;border:1px solid var(--ds-line-strong);border-radius:var(--ds-r-sm);background:var(--ds-surface);color:var(--ds-text);font:500 var(--ds-fs-base)/1 var(--ds-font);cursor:pointer;white-space:nowrap;transition:background .1s,border-color .1s,color .1s}
.ds-btn:hover{background:var(--ds-surface-2);text-decoration:none}
.ds-btn:active{transform:translateY(.5px)}
.ds-btn[disabled],.ds-btn.is-disabled{opacity:.45;pointer-events:none}
.ds-btn svg{width:15px;height:15px}
.ds-btn--primary{background:var(--ds-accent);border-color:var(--ds-accent);color:#fff}
.ds-btn--primary:hover{background:var(--ds-accent-hover);border-color:var(--ds-accent-hover)}
.ds-btn--secondary{/* = Grundzustand, nur zur Lesbarkeit im Markup */}
.ds-btn--ghost{border-color:transparent;background:transparent;color:var(--ds-text-2)}
.ds-btn--ghost:hover{background:var(--ds-surface-2);color:var(--ds-text)}
.ds-btn--danger{background:var(--ds-danger);border-color:var(--ds-danger);color:#fff}
.ds-btn--danger:hover{filter:brightness(.93)}
.ds-btn--sm{height:var(--ds-ctrl-h-sm);padding:0 var(--ds-2);font-size:var(--ds-fs-sm)}
.ds-btn--sm svg{width:13px;height:13px}
.ds-btn--icon{width:var(--ds-ctrl-h-md);padding:0}
.ds-btn--icon.ds-btn--sm{width:var(--ds-ctrl-h-sm)}
.ds-btn-group{display:inline-flex}
.ds-btn-group .ds-btn{border-radius:0;margin-left:-1px}
.ds-btn-group .ds-btn:first-child{border-radius:var(--ds-r-sm) 0 0 var(--ds-r-sm);margin-left:0}
.ds-btn-group .ds-btn:last-child{border-radius:0 var(--ds-r-sm) var(--ds-r-sm) 0}

/* --- 6. Formular ----------------------------------------------------------- */
.ds-field{display:flex;flex-direction:column;gap:var(--ds-1);min-width:0}
.ds-field > label{font-size:var(--ds-fs-label);letter-spacing:var(--ds-track-label);text-transform:uppercase;color:var(--ds-text-3);font-weight:500}
.ds-input,.ds-select,.ds-textarea{width:100%;min-height:var(--ds-ctrl-h-md);padding:5px var(--ds-2);border:1px solid var(--ds-line-strong);border-radius:var(--ds-r-sm);background:var(--ds-surface);color:var(--ds-text);font:400 var(--ds-fs-base)/var(--ds-lh) var(--ds-font)}
.ds-input::placeholder,.ds-textarea::placeholder{color:var(--ds-text-3)}
.ds-input:hover,.ds-select:hover,.ds-textarea:hover{border-color:var(--ds-text-3)}
.ds-input:focus,.ds-select:focus,.ds-textarea:focus{outline:2px solid var(--ds-accent);outline-offset:-1px;border-color:var(--ds-accent)}
.ds-textarea{min-height:64px;resize:vertical}
.ds-select{appearance:none;padding-right:var(--ds-6);background-image:linear-gradient(45deg,transparent 50%,currentcolor 50%),linear-gradient(135deg,currentcolor 50%,transparent 50%);background-position:calc(100% - 14px) 52%,calc(100% - 9px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.ds-hint{font-size:var(--ds-fs-sm);color:var(--ds-text-3)}
.ds-error{font-size:var(--ds-fs-sm);color:var(--ds-danger)}
.ds-field.is-invalid .ds-input,.ds-field.is-invalid .ds-select,.ds-field.is-invalid .ds-textarea{border-color:var(--ds-danger)}
.ds-field.is-invalid .ds-input:focus{outline-color:var(--ds-danger)}
.ds-check{display:inline-flex;align-items:center;gap:var(--ds-2);font-size:var(--ds-fs-base);cursor:pointer}
.ds-check input{accent-color:var(--ds-accent);width:14px;height:14px;margin:0}

/* Segment-Control */
.ds-seg{display:inline-flex;padding:2px;gap:2px;background:var(--ds-surface-2);border:1px solid var(--ds-line);border-radius:var(--ds-r-sm)}
.ds-seg > button{height:22px;padding:0 var(--ds-2);border:0;border-radius:3px;background:transparent;color:var(--ds-text-2);font:500 var(--ds-fs-sm)/1 var(--ds-font);cursor:pointer;white-space:nowrap}
.ds-seg > button:hover{color:var(--ds-text)}
.ds-seg > button.is-on{background:var(--ds-surface);color:var(--ds-text);box-shadow:0 0 0 1px var(--ds-line)}
.ds-seg--cat > button.is-on[data-cat="business"]{color:var(--ds-cat-business)}
.ds-seg--cat > button.is-on[data-cat="private"]{color:var(--ds-cat-private)}
.ds-seg--cat > button.is-on[data-cat="commute"]{color:var(--ds-cat-commute)}
.ds-seg--cat > button.is-on[data-cat="family"]{color:var(--ds-cat-family)}

/* --- 7. Karten + Stat-Tiles ------------------------------------------------ */
.ds-card{background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-r-md);padding:var(--ds-4)}
.ds-card--flush{padding:0;overflow:hidden}
.ds-card-head{display:flex;align-items:center;gap:var(--ds-2);padding:var(--ds-3) var(--ds-4);border-bottom:1px solid var(--ds-line)}
.ds-card-body{padding:var(--ds-4)}
.ds-card-foot{padding:var(--ds-3) var(--ds-4);border-top:1px solid var(--ds-line);background:var(--ds-surface-2)}
.ds-stat{background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-r-md);padding:var(--ds-3) var(--ds-4)}
.ds-stat-label{font-size:var(--ds-fs-label);letter-spacing:var(--ds-track-label);text-transform:uppercase;color:var(--ds-text-3);font-weight:500}
.ds-stat-value{display:flex;align-items:baseline;gap:var(--ds-1);margin-top:var(--ds-1);font-family:var(--ds-font-mono);font-variant-numeric:tabular-nums;font-size:var(--ds-fs-stat);font-weight:500;letter-spacing:-.02em;line-height:1.1}
.ds-stat-value small{font-size:var(--ds-fs-sm);font-weight:400;color:var(--ds-text-3);letter-spacing:0}
.ds-stat-delta{margin-top:var(--ds-1);font-size:var(--ds-fs-sm);color:var(--ds-text-3)}
.ds-stat-delta.is-up{color:var(--ds-ok)}
.ds-stat-delta.is-down{color:var(--ds-danger)}
.ds-stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:var(--ds-3)}

/* --- 8. Tabelle ------------------------------------------------------------ */
.ds-table-wrap{background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-r-md);overflow:auto;overscroll-behavior:contain;max-height:70vh}
.ds-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--ds-fs-table);font-variant-numeric:tabular-nums}
.ds-table th{position:sticky;top:0;z-index:var(--ds-z-sticky);background:var(--ds-surface-2);padding:var(--ds-2) 8px;text-align:left;font-size:var(--ds-fs-label);letter-spacing:var(--ds-track-label);text-transform:uppercase;font-weight:500;color:var(--ds-text-3);white-space:nowrap;border-bottom:1px solid var(--ds-line)}
.ds-table td{padding:6px 8px;border-bottom:1px solid var(--ds-line);vertical-align:top;color:var(--ds-text)}
.ds-table tbody tr:last-child td{border-bottom:0}
.ds-table tbody tr:hover > td{background:var(--ds-surface-2)}
.ds-table tbody tr.is-selected > td{background:var(--ds-accent-soft);box-shadow:inset 2px 0 0 var(--ds-accent)}
.ds-table tbody tr.is-selected:hover > td{background:var(--ds-accent-soft)}
.ds-table .num,.ds-table th.num{text-align:right;font-family:var(--ds-font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.ds-table th.num{font-family:var(--ds-font)}
.ds-table .ds-td-tight{width:1%;white-space:nowrap}
.ds-table .ds-td-route{min-width:180px}
.ds-table-toggle{border:0;background:none;padding:0;margin:0;cursor:pointer;color:var(--ds-text-3);line-height:0}
.ds-table-toggle:hover{color:var(--ds-text)}
.ds-table-toggle svg{width:14px;height:14px;transition:transform .12s}
tr.is-open .ds-table-toggle svg{transform:rotate(90deg)}
.ds-row-detail > td{background:var(--ds-surface-2);padding:var(--ds-3) var(--ds-4);border-bottom:1px solid var(--ds-line)}
.ds-table tbody tr.ds-row-detail:hover > td{background:var(--ds-surface-2)}
.ds-table-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-4);padding:var(--ds-2) 8px;border-top:1px solid var(--ds-line);background:var(--ds-surface-2);font-size:var(--ds-fs-table)}
.ds-table-foot b{font-family:var(--ds-font-mono);font-weight:500}

/* --- 9. Badge · Status-Dot · Pills · Kategorie-Chips ----------------------- */
.ds-badge{display:inline-flex;align-items:center;gap:var(--ds-1);height:18px;padding:0 6px;border:1px solid var(--ds-neutral-line);border-radius:3px;background:var(--ds-neutral-soft);color:var(--ds-text-2);font-size:var(--ds-fs-label);font-weight:500;letter-spacing:.02em;white-space:nowrap}
.ds-badge--blue{background:var(--ds-accent-soft);border-color:var(--ds-accent-line);color:var(--ds-accent)}
.ds-badge--green{background:var(--ds-ok-soft);border-color:var(--ds-ok-line);color:var(--ds-ok)}
.ds-badge--amber{background:var(--ds-warn-soft);border-color:var(--ds-warn-line);color:var(--ds-warn)}
.ds-badge--red{background:var(--ds-danger-soft);border-color:var(--ds-danger-line);color:var(--ds-danger)}
.ds-badge--violet{background:var(--ds-violet-soft);border-color:var(--ds-violet-line);color:var(--ds-violet)}
.ds-badge--teal{background:var(--ds-teal-soft);border-color:var(--ds-teal-line);color:var(--ds-teal)}
.ds-badge svg{width:11px;height:11px}

.ds-dot{display:inline-block;width:7px;height:7px;border-radius:var(--ds-r-dot);background:var(--ds-text-3);flex:none}
.ds-dot--online{background:var(--ds-ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ds-ok) 18%,transparent)}
.ds-dot--warn{background:var(--ds-warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--ds-warn) 18%,transparent)}
.ds-dot--offline{background:var(--ds-text-3)}

/* Frist-Ampel: >3 Tage grau · ≤3 gelb · ≤1 orange · überfällig rot */
.ds-pill{display:inline-flex;align-items:center;gap:var(--ds-1);height:20px;padding:0 6px;border:1px solid var(--ds-neutral-line);border-radius:var(--ds-r-sm);background:var(--ds-neutral-soft);color:var(--ds-text-2);font-family:var(--ds-font-mono);font-size:var(--ds-fs-sm);font-variant-numeric:tabular-nums;white-space:nowrap}
.ds-pill--grey{/* = Grundzustand: Frist laeuft noch */}
.ds-pill--yellow{background:var(--ds-warn-soft);border-color:var(--ds-warn-line);color:var(--ds-warn)}
.ds-pill--orange{background:var(--ds-warn-soft);border-color:var(--ds-warn);color:var(--ds-warn);font-weight:500}
.ds-pill--red{background:var(--ds-danger-soft);border-color:var(--ds-danger-line);color:var(--ds-danger);font-weight:500}
.ds-pill svg{width:12px;height:12px}

.ds-cat{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 var(--ds-2) 0 6px;border:1px solid var(--ds-line);border-radius:var(--ds-r-sm);background:var(--ds-surface);font-size:var(--ds-fs-sm);color:var(--ds-text);white-space:nowrap}
.ds-cat::before{content:"";width:6px;height:6px;border-radius:var(--ds-r-dot);background:var(--ds-text-3)}
.ds-cat--business::before{background:var(--ds-cat-business)}
.ds-cat--private::before{background:var(--ds-cat-private)}
.ds-cat--commute::before{background:var(--ds-cat-commute)}
.ds-cat--family::before{background:var(--ds-cat-family)}
.ds-cat--open{border-style:dashed;color:var(--ds-text-3)}

/* --- 10. Tabs -------------------------------------------------------------- */
.ds-tabs{display:flex;gap:var(--ds-4);border-bottom:1px solid var(--ds-line)}
.ds-tab{position:relative;padding:var(--ds-2) 0;border:0;background:none;color:var(--ds-text-2);font:500 var(--ds-fs-base)/1.2 var(--ds-font);cursor:pointer}
.ds-tab:hover{color:var(--ds-text)}
.ds-tab.is-on{color:var(--ds-text)}
.ds-tab.is-on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ds-accent)}

/* --- 11. Drawer · Modal · Scrim ------------------------------------------- */
.ds-scrim{position:fixed;inset:0;background:var(--ds-overlay);z-index:var(--ds-z-scrim)}
.ds-drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,92vw);z-index:var(--ds-z-drawer);display:flex;flex-direction:column;background:var(--ds-surface);box-shadow:var(--ds-shadow-drawer)}
.ds-drawer-head,.ds-modal-head{display:flex;align-items:center;gap:var(--ds-2);padding:var(--ds-3) var(--ds-4);border-bottom:1px solid var(--ds-line)}
.ds-drawer-body,.ds-modal-body{flex:1;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:var(--ds-4);display:flex;flex-direction:column;gap:var(--ds-4)}
.ds-drawer-foot,.ds-modal-foot{display:flex;justify-content:flex-end;gap:var(--ds-2);padding:var(--ds-3) var(--ds-4);border-top:1px solid var(--ds-line);background:var(--ds-surface-2)}
.ds-modal{position:fixed;left:50%;top:12vh;transform:translateX(-50%);width:min(480px,92vw);max-height:76vh;z-index:var(--ds-z-modal);display:flex;flex-direction:column;background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-r-md);box-shadow:var(--ds-shadow-pop)}
.ds-popover{position:absolute;z-index:var(--ds-z-popover);min-width:180px;padding:var(--ds-2);background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-r-md);box-shadow:var(--ds-shadow-pop)}
/* Überlaufmenü („…"): fest positioniert, damit es auch am Bildschirmrand passt. */
.ds-menu{position:fixed;display:flex;flex-direction:column;gap:2px;padding:var(--ds-1);min-width:220px;
  max-width:calc(100vw - 16px);max-height:70dvh;overflow:auto;overscroll-behavior:contain}
.ds-menu-item{display:flex;align-items:center;gap:var(--ds-2);min-height:40px;padding:0 var(--ds-2);
  border:0;border-radius:var(--ds-r-sm);background:none;color:var(--ds-text);
  font:400 var(--ds-fs-base)/1.3 var(--ds-font);text-align:left;cursor:pointer;width:100%}
.ds-menu-item:hover{background:var(--ds-surface-2);text-decoration:none;color:var(--ds-text)}
.ds-menu-item svg{width:16px;height:16px;color:var(--ds-text-3);flex:none}
.ds-menu-item[aria-disabled="true"]{opacity:.45;pointer-events:none}
.ds-menu-sep{height:1px;margin:var(--ds-1) 0;background:var(--ds-line)}
@media (max-width:900px){.ds-menu-item{min-height:44px}}
/* Telefon: der Drawer wird zum Vollbild-Blatt. Kopf und Fuß bleiben stehen,
   nur der Rumpf scrollt; der Fuß sitzt über dem Home-Indikator. */
@media (max-width:900px){
  .ds-drawer,.app-drawer--wide{top:0;right:0;bottom:0;left:0;width:auto;max-width:none;border-radius:0}
  .ds-drawer-head{position:sticky;top:0;z-index:1;background:var(--ds-surface);
    padding:calc(var(--ds-safe-t) + var(--ds-3)) var(--ds-gutter-r) var(--ds-3) var(--ds-gutter);min-height:52px}
  .ds-drawer-body{padding:var(--ds-4) var(--ds-gutter-r) var(--ds-4) var(--ds-gutter)}
  .ds-drawer-foot{padding:var(--ds-3) var(--ds-gutter-r) calc(var(--ds-3) + var(--ds-safe-b)) var(--ds-gutter)}
  .ds-drawer-foot .ds-btn{flex:1 1 0;min-height:44px}
  .ds-drawer-head .ds-btn--icon{width:40px;height:40px}
  /* Bestätigungsdialoge sitzen unten — dort ist der Daumen. */
  .ds-modal{top:auto;bottom:0;left:0;transform:none;width:auto;right:0;max-height:86dvh;
    border-radius:var(--ds-r-md) var(--ds-r-md) 0 0;border-bottom:0}
  .ds-modal-head{padding:var(--ds-3) var(--ds-gutter-r) var(--ds-3) var(--ds-gutter)}
  .ds-modal-body{padding:var(--ds-4) var(--ds-gutter-r) var(--ds-4) var(--ds-gutter)}
  .ds-modal-foot{padding:var(--ds-3) var(--ds-gutter-r) calc(var(--ds-3) + var(--ds-safe-b)) var(--ds-gutter)}
  .ds-modal-foot .ds-btn{flex:1 1 0;min-height:44px}
}

/* --- 12. Toast ------------------------------------------------------------- */
.ds-toasts{position:fixed;right:var(--ds-4);bottom:var(--ds-4);z-index:var(--ds-z-toast);display:flex;flex-direction:column;gap:var(--ds-2);max-width:min(380px,92vw)}
.ds-toast{display:flex;align-items:flex-start;gap:var(--ds-2);padding:10px var(--ds-3);background:var(--ds-surface);border:1px solid var(--ds-line);border-left:2px solid var(--ds-text-3);border-radius:var(--ds-r-sm);box-shadow:var(--ds-shadow-pop);font-size:var(--ds-fs-base)}
.ds-toast--ok{border-left-color:var(--ds-ok)}
.ds-toast--warn{border-left-color:var(--ds-warn)}
.ds-toast--error{border-left-color:var(--ds-danger)}
.ds-toast svg{width:15px;height:15px;margin-top:1px}
.ds-toast--ok svg{color:var(--ds-ok)} .ds-toast--warn svg{color:var(--ds-warn)} .ds-toast--error svg{color:var(--ds-danger)}
.ds-toast-title{font-weight:500}
.ds-toast-text{color:var(--ds-text-2);font-size:var(--ds-fs-sm)}

/* --- 13. Empty-State · Skeleton · Kbd · Tooltip --------------------------- */
.ds-empty{display:flex;flex-direction:column;align-items:center;gap:var(--ds-2);padding:var(--ds-12) var(--ds-4);text-align:center;color:var(--ds-text-2)}
.ds-empty svg{width:24px;height:24px;color:var(--ds-text-3)}
.ds-empty-title{font-size:var(--ds-fs-md);font-weight:500;color:var(--ds-text)}
.ds-empty p{max-width:44ch;color:var(--ds-text-3);font-size:var(--ds-fs-sm)}

.ds-skel{display:block;height:10px;border-radius:3px;background:linear-gradient(90deg,var(--ds-surface-2) 0%,var(--ds-neutral-soft) 50%,var(--ds-surface-2) 100%);background-size:200% 100%;animation:ds-skel 1.3s linear infinite}
.ds-skel--line{height:10px} .ds-skel--title{height:14px;width:40%} .ds-skel--block{height:56px;border-radius:var(--ds-r-sm)}
@keyframes ds-skel{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.ds-skel{animation:none}}

.ds-kbd{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;border:1px solid var(--ds-line-strong);border-bottom-width:2px;border-radius:3px;background:var(--ds-surface-2);color:var(--ds-text-2);font-family:var(--ds-font-mono);font-size:var(--ds-fs-label);line-height:1}

/* Nur CSS. `display:none` statt `opacity:0`, damit der Tooltip keine
   Scroll-Breite erzeugt. Achtung: in Containern mit overflow:auto wird er
   beschnitten — dort lieber title/Popover verwenden. */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);display:none;position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);z-index:var(--ds-z-tooltip);padding:3px 6px;border-radius:var(--ds-r-sm);background:var(--ds-ink);color:#fff;font:400 var(--ds-fs-sm)/1.3 var(--ds-font);white-space:nowrap;pointer-events:none}
[data-tip]:hover::after,[data-tip]:focus-visible::after{display:block;animation:ds-tip .1s .3s backwards}
@keyframes ds-tip{from{opacity:0}to{opacity:1}}
[data-tip-side="right"]::after{left:calc(100% + 6px);bottom:auto;top:50%;transform:translateY(-50%)}

/* --- 14. Fahrzeugkarte (Fachkomponente) ----------------------------------- */
.ds-vehicle{display:flex;flex-direction:column;gap:var(--ds-3);background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-r-md);padding:var(--ds-3) var(--ds-4)}
.ds-vehicle-head{display:flex;align-items:center;gap:var(--ds-2)}
.ds-plate{font-family:var(--ds-font-mono);font-size:var(--ds-fs-lg);font-weight:500;letter-spacing:.02em}
.ds-vehicle-sub{color:var(--ds-text-3);font-size:var(--ds-fs-sm)}
.ds-vehicle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ds-2) var(--ds-3);border-top:1px solid var(--ds-line);padding-top:var(--ds-3)}
.ds-vehicle-grid div{display:flex;flex-direction:column;gap:2px;min-width:0}
.ds-vehicle-grid b{overflow:hidden;text-overflow:ellipsis}
.ds-vehicle-grid b{font-family:var(--ds-font-mono);font-weight:500;font-size:var(--ds-fs-md)}

/* --- 15. Hilfsklassen ------------------------------------------------------ */
.ds-arrow{color:var(--ds-text-3);padding:0 2px}
.ds-trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* .ds-hide-sm blendet Elemente unter 900 px aus (siehe Shell-Media-Query). */
.ds-sep{width:1px;align-self:stretch;margin:var(--ds-2) 0;background:var(--ds-line)}

/* --- 16. Telefon-Feinschliff (≤ 900 px) -----------------------------------
   Steht bewusst am Dateiende: Media-Queries erhöhen die Spezifität nicht,
   eine Anpassung muss also NACH der Grunddefinition des Bausteins stehen.
   Die Shell selbst wird in §4 umgestellt.
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  /* Eingaben mindestens 16 px — kleiner, und Safari zoomt beim Hineintippen. */
  .ds-input,.ds-select,.ds-textarea{font-size:16px;padding:8px var(--ds-2)}
  .ds-select{background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%}
  .ds-textarea{min-height:80px}
  .ds-check{min-height:44px}
  .ds-check input{width:20px;height:20px}
  .ds-field > label{font-size:var(--ds-fs-sm)}

  /* Fingerkuppen brauchen Fläche. */
  .ds-seg{padding:3px;gap:2px}
  .ds-seg > button{height:40px;padding:0 var(--ds-3);font-size:var(--ds-fs-base)}
  .ds-btn{padding:0 var(--ds-3)}
  .ds-btn svg{width:16px;height:16px}
  .ds-btn--sm svg{width:15px;height:15px}
  .ds-btn--icon{width:var(--ds-ctrl-h-md)}
  .ds-btn--icon.ds-btn--sm{width:var(--ds-ctrl-h-sm)}
  .ds-tab{padding:var(--ds-3) 0}
  .ds-table-toggle svg{width:18px;height:18px}

  .ds-stat{padding:var(--ds-3)}
  .ds-stat-value{font-size:var(--ds-fs-xl)}
  .ds-stat-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-2)}
  .ds-card{padding:var(--ds-3)}
  .ds-card-head,.ds-card-body,.ds-card-foot{padding-left:var(--ds-3);padding-right:var(--ds-3)}
  .ds-vehicle{padding:var(--ds-3)}
  .ds-vehicle-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ds-table-wrap{max-height:none}
  .ds-empty{padding:var(--ds-8) var(--ds-3)}
  .ds-toasts{right:var(--ds-gutter-r);left:var(--ds-gutter);bottom:calc(var(--ds-3) + var(--ds-safe-b));max-width:none}
  /* Tooltips brauchen einen Zeiger — auf dem Telefon nur Platzverschwendung. */
  [data-tip]::after{content:none}
}