/* ============================================================================
   verk.studio CRM — System
   Regelwerk und Begruendungen: docs/DESIGN.md (dort steht das Warum, hier das Wie)

   Aufbau dieser Datei, in dieser Reihenfolge:
     1. Marken (Tokens)          6. Formulare
     2. Grundlagen               7. Karten und Flaechen
     3. Huelle (Leisten, Nav)    8. Tabellen und Listen
     4. Typografie               9. Zustaende und Rueckmeldung
     5. Bedienelemente          10. Hilfsklassen

   ZWEI REGELN, die diese Datei zusammenhalten:

   a) MOBIL ZUERST. Jede Regel gilt ab 0px. Groessere Schirme bekommen NUR
      `@media (min-width: …)`. Es gibt in dieser Datei kein einziges
      `max-width` — wer eins einfuegt, faengt wieder an, Ausnahmen zu pflegen.
      Genau daran ist der Vorgaenger gestorben: 1009 Zeilen mobile.css, die
      Desktop-Regeln zuruecknahmen.

   b) FINGER ODER MAUS ist keine Frage der Breite. Die Zielgroesse haengt an
      `@media (pointer: coarse)`, nicht an Pixeln. Ein Tablet mit Tastatur und
      ein Notebook mit Tastschirm bekommen so beide das Richtige, und die
      Dichte am Schreibtisch bleibt erhalten.
   ========================================================================= */

/* ── 0. Schriften, selbst gehostet ──────────────────────────────────────────
   Frueher ueber fonts.googleapis.com. Ein Werkzeug, das im Auto zwischen zwei
   Anrufen aufgeht, darf nicht auf einen fremden Server warten — und jede
   Seitenansicht des CRM ging als Anfrage nach Kalifornien. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('/static/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('/static/fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('/static/fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('/static/fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;
  src:url('/static/fonts/inter-800.woff2') format('woff2')}

/* ── 1. Marken ───────────────────────────────────────────────────────────── */
:root{
  /* Flaechen: vier Stufen, von der Seite bis zur gehobenen Karte.
     Reines Schwarz bleibt der Grund — das Werkzeug laeuft abends und nachts. */
  --bg:            #000000;
  --bg2:           #070708;
  --card:          #0d0e10;
  --card2:         #131418;
  --raised:        #191b20;

  --border:        #1e2026;
  --border2:       #2a2d35;

  /* Ein Akzent, nur fuer Hauptaktion, Auswahl und Zustand — nie als Schmuck. */
  --accent:        #8fdcff;
  --accent-ink:    #04121a;   /* Text AUF dem Akzent */
  --accent-dim:    rgba(143,220,255,.14);
  --accent-line:   rgba(143,220,255,.40);
  --accent-glow:   rgba(143,220,255,.20);

  --green:         #35d05a;
  --yellow:        #ffc53d;
  --red:           #ff6b63;
  --orange:        #fb923c;
  --violet:        #a78bfa;
  --cyan:          #8fdcff;

  /* Schrift: drei Stufen. --text3 ist auf --card mit 4.6:1 gemessen und darf
     nicht weiter abgesenkt werden, sonst faellt jede Beschriftung durch. */
  --text:          #f5f7fa;
  --text2:         #c3ccd9;
  --text3:         #8b95a5;
  --text-on-accent:#04121a;
  /* Schrift auf einer vollen Signalflaeche (roter Zaehler, gruene Marke).
     Dunkel auf dem hellen Rot des Nachtanstrichs = 6.7:1. */
  --signal-ink:   #2b0603;

  /* Abstaende: eine Leiter, keine freien Zahlen. */
  --s1: 4px;  --s2: 6px;  --s3: 8px;  --s4: 12px;
  --s5: 16px; --s6: 24px; --s7: 32px; --s8: 48px;

  /* Radien */
  --radius-sm: 5px;
  --radius:    8px;
  --radius-lg: 13px;
  --radius-pill: 999px;

  /* Schriftgroessen: feste rem-Leiter, Schrittweite ~1.2. Kein clamp() —
     in einem Arbeitswerkzeug soll Text ueberall gleich gross sein. */
  --t-xs:  0.6875rem;  /* 11   Marken, Zaehler */
  --t-sm:  0.78125rem; /* 12.5 Beschriftung, Nebentext */
  --t-md:  0.875rem;   /* 14   Grundschrift der Oberflaeche */
  --t-lg:  1rem;       /* 16   Eingaben, Kartenueberschrift */
  --t-xl:  1.25rem;    /* 20   Seitentitel mobil */
  --t-2xl: 1.625rem;   /* 26   Seitentitel, Kennzahl */
  --t-3xl: 2.125rem;   /* 34   grosse Kennzahl */

  /* Bedienhoehen. Am Zeigegeraet dicht, am Finger gross — siehe Regel b). */
  --h-ctl:    34px;
  --h-ctl-sm: 28px;
  --h-field:  38px;

  /* Huelle */
  --topbar-h:  52px;
  --tabbar-h:  58px;
  --rail-w:    64px;
  --rail-w-xl: 232px;
  --gutter:    var(--s4);
  --content-max: 1600px;

  /* Bewegung: kurz, zustandstragend. 150–250 ms, nichts darueber. */
  --fast: 140ms;
  --base: 200ms;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* Schatten: Versatz UND weiche Streuung. Ein Ring ohne Versatz ist Deko. */
  --shadow-1: 0 1px 2px rgba(0,0,0,.55);
  --shadow-2: 0 6px 18px -6px rgba(0,0,0,.75);
  --shadow-3: 0 18px 44px -12px rgba(0,0,0,.85);

  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-line);
}

[data-theme="light"]{
  --bg:            #f4f6fa;
  --bg2:           #eaeef5;
  --card:          #ffffff;
  --card2:         #f7f9fc;
  --raised:        #ffffff;
  --border:        #dde3ec;
  --border2:       #c3ccdb;
  /* 5.3:1 auf dem Seitengrund, 5.4:1 auf Karten — #0b7fb4 kam nur auf 4.1. */
  --accent:        #0a6d9c;
  --accent-ink:    #ffffff;
  --accent-dim:    rgba(10,109,156,.10);
  --accent-line:   rgba(10,109,156,.50);
  --accent-glow:   rgba(10,109,156,.18);
  --green:         #15803d;
  --yellow:        #a16207;
  --red:           #be123c;
  --orange:        #c2410c;
  --violet:        #6d28d9;
  --cyan:          #0369a1;
  --text:          #0d1424;
  --text2:         #35405a;
  --text3:         #5d6880;
  --text-on-accent:#ffffff;
  /* Im Taganstrich sind die Signalfarben dunkel — dort traegt Weiss (6.3:1). */
  --signal-ink:   #ffffff;
  --shadow-1: 0 1px 2px rgba(15,23,42,.10);
  --shadow-2: 0 6px 18px -8px rgba(15,23,42,.18);
  --shadow-3: 0 18px 44px -14px rgba(15,23,42,.22);
}

/* Am Finger wachsen die Ziele auf die WCAG-Schwelle 44px — unabhaengig von
   der Schirmbreite. Das ist die eine Stelle, an der Dichte nachgibt. */
@media (pointer: coarse){
  :root{ --h-ctl: 44px; --h-ctl-sm: 44px; --h-field: 46px; }
}

/* ── 2. Grundlagen ──────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:var(--t-md);
  line-height:1.5;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* Der Inhalt endet ueber der unteren Leiste, nicht darunter. */
  padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  overflow-x:hidden;
}

img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}

/* Ein einziger Fokusring, ueberall gleich. Sichtbar nur bei Tastatur. */
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-sm)}

::selection{background:var(--accent-dim);color:var(--text)}

/* Rollbalken bleiben die des Systems; nur die Farbe passt sich an. */
*{scrollbar-color:var(--border2) transparent}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

.skip-link{position:absolute;left:var(--s4);top:-100px;z-index:1000;
  display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s5);
  background:var(--accent);color:var(--accent-ink);font-weight:700;
  border-radius:var(--radius);transition:top var(--fast) var(--ease)}
.skip-link:focus{top:var(--s3)}

/* ── 3. Huelle ───────────────────────────────────────────────────────────── */
/* Mobil: obere Leiste (Ort und Suche) + untere Leiste (Wege). Dazwischen der
   Inhalt. Ab 1024px wandern die Wege nach links an eine stehende Schiene und
   die untere Leiste verschwindet — dieselben fuenf Ziele, andere Gestalt. */

.app-topbar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3);
  min-height:calc(var(--topbar-h) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) var(--gutter) 0;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.topbar-home{display:inline-flex;align-items:center;flex-shrink:0;
  font-size:var(--t-lg);letter-spacing:-.04em;min-height:44px}
.topbar-home /* Zeichen in Knoepfen und Zeilen: laufen mit der Schrift mit. */
.ico{width:15px;height:15px;flex-shrink:0;stroke-width:2}

.logo-verk{color:var(--accent);font-weight:800;letter-spacing:-.03em}
.topbar-home .logo-studio{color:var(--text);font-weight:400}

.topbar-title{
  flex:1;min-width:0;
  font-size:var(--t-md);font-weight:700;letter-spacing:-.02em;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.topbar-actions{display:flex;align-items:center;gap:var(--s2);flex-shrink:0}
/* Mobil rutschen die Seitenaktionen in eine zweite Zeile der Kopfleiste
   (`:has(*)` — eine leere Zeile soll keinen Platz kosten). Frueher liefen sie
   nach rechts aus dem Bild: bei /kunden endete der letzte Knopf bei 570px auf
   einem 390er Schirm. Weglassen war keine Loesung — auf dem Handy fehlt sonst
   genau die Aktion, wegen der man die Seite geoeffnet hat. */
.topbar-actions:has(*){
  flex:1 0 100%;order:9;flex-wrap:wrap;
  padding-bottom:var(--s3);margin-top:calc(var(--s2) * -1)}
@media (min-width: 900px){
  .topbar-actions:has(*){flex:0 0 auto;order:0;padding-bottom:0;margin-top:0}
}

.topbar-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--h-ctl);height:var(--h-ctl);flex-shrink:0;
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--card);color:var(--text2);cursor:pointer;
  transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease),
             background var(--fast) var(--ease);
}
.topbar-icon:hover{color:var(--text);border-color:var(--border2);background:var(--card2)}
.topbar-icon svg{width:17px;height:17px}
.topbar-icon .zaehler{
  position:absolute;transform:translate(13px,-13px);
  min-width:17px;height:17px;padding:0 4px;border-radius:var(--radius-pill);
  background:var(--red);color:var(--signal-ink);font-size:10px;font-weight:800;line-height:17px;
  text-align:center;box-shadow:0 0 0 2px var(--bg)}

/* Suche: mobil ein Knopf, der ein Feld ausklappt; ab 900px steht das Feld. */
.topbar-search{position:relative;display:none;flex:0 1 320px}
.topbar-search input{
  width:100%;height:var(--h-ctl);padding:0 var(--s7) 0 var(--s4);
  /* 16px, sonst zoomt iOS beim Antippen in die Kopfleiste hinein. Erst mit
     Maus darf es kleiner werden. */
  font-size:var(--t-lg);color:var(--text);
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}
.topbar-search input::placeholder{color:var(--text3)}
.topbar-search input:focus{border-color:var(--accent-line);outline:none}
.topbar-search-button{position:absolute;right:0;top:0;height:var(--h-ctl);width:var(--h-ctl);
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;color:var(--text3);cursor:pointer}
.topbar-search-button:hover{color:var(--accent)}
.app-topbar.suche-offen .topbar-search{display:block;flex:1}
.app-topbar.suche-offen .topbar-title{display:none}
@media (min-width: 900px){
  .topbar-search{display:block}
  .topbar-suche-knopf{display:none}
}
@media (pointer: fine){
  .topbar-search input{font-size:var(--t-md)}
}

/* Untere Leiste: fuenf Ziele im Daumenbereich. */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:grid;grid-template-columns:repeat(5,1fr);
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:color-mix(in srgb, var(--bg2) 92%, transparent);
  backdrop-filter:blur(16px);
  border-top:1px solid var(--border);
}
.tabbar-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:44px;padding:var(--s2) 2px;
  color:var(--text3);font-size:10px;font-weight:600;letter-spacing:-.01em;
  background:none;border:0;cursor:pointer;text-align:center;
  transition:color var(--fast) var(--ease);
}
.tabbar-item svg{width:21px;height:21px;stroke-width:1.9}
.tabbar-item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabbar-item:hover{color:var(--text2)}
.tabbar-item.active{color:var(--accent)}
.tabbar-item.active svg{stroke-width:2.3}
.tabbar-item .zaehler{
  position:absolute;transform:translate(11px,-9px);
  min-width:16px;height:16px;padding:0 4px;border-radius:var(--radius-pill);
  background:var(--red);color:var(--signal-ink);font-size:10px;font-weight:800;line-height:16px}

/* „Mehr": ein Blatt von unten, kein Menue im Nirgendwo. */
.sheet-backdrop{
  position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.6);
  opacity:0;pointer-events:none;transition:opacity var(--base) var(--ease)}
.sheet-backdrop.offen{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:81;
  max-height:82vh;overflow:auto;overscroll-behavior:contain;
  padding:var(--s4) var(--gutter) calc(var(--s6) + env(safe-area-inset-bottom));
  background:var(--card);border-top:1px solid var(--border2);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow:var(--shadow-3);
  transform:translateY(101%);
  transition:transform var(--base) var(--ease);
}
.sheet.offen{transform:translateY(0)}
.sheet-griff{width:40px;height:4px;margin:0 auto var(--s4);
  border-radius:var(--radius-pill);background:var(--border2)}
.sheet-titel{font-size:var(--t-xs);font-weight:700;letter-spacing:.10em;
  text-transform:uppercase;color:var(--text3);margin:var(--s5) 0 var(--s3)}
.sheet-titel:first-of-type{margin-top:0}
.sheet-liste{display:flex;flex-direction:column;gap:2px}

.nav-item{
  display:flex;align-items:center;gap:var(--s4);
  min-height:var(--h-ctl);padding:var(--s3) var(--s4);
  color:var(--text2);font-size:var(--t-md);font-weight:500;
  border-radius:var(--radius);border:1px solid transparent;
  background:none;cursor:pointer;width:100%;text-align:left;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.nav-item:hover{background:var(--card2);color:var(--text)}
.nav-item.active{background:var(--accent-dim);color:var(--accent);border-color:var(--accent-line)}
.nav-item svg{width:18px;height:18px;flex-shrink:0}
.nav-item .nav-icon{width:18px;text-align:center;flex-shrink:0;font-size:15px}
.nav-badge{margin-left:auto;min-width:20px;padding:1px 6px;border-radius:var(--radius-pill);
  background:var(--card2);color:var(--text2);font-size:var(--t-xs);font-weight:700;text-align:center}
.nav-badge.red{background:var(--red);color:var(--signal-ink)}
.nav-badge.green{background:var(--green);color:#04140a}
.nav-badge.yellow{background:var(--yellow);color:#1a1200}

/* Schiene ab Tablet quer / Notebook: dieselben Ziele, stehend. */
.railbar{display:none}

.app-main{min-width:0}
.content{
  width:100%;max-width:var(--content-max);margin:0 auto;
  padding:var(--s5) var(--gutter) var(--s7);
}

@media (min-width: 640px){
  :root{ --gutter: var(--s6); }
}

@media (min-width: 1024px){
  :root{ --topbar-h: 56px; }
  body{padding-bottom:0;padding-left:var(--rail-w)}
  .tabbar{display:none}
  .railbar{
    position:fixed;left:0;top:0;bottom:0;z-index:75;
    display:flex;flex-direction:column;gap:var(--s2);
    width:var(--rail-w);padding:var(--s4) var(--s2);
    background:var(--bg2);border-right:1px solid var(--border);
  }
  .railbar-logo{display:flex;align-items:center;justify-content:center;
    min-height:var(--h-ctl);margin-bottom:var(--s3);font-size:19px;font-weight:800;
    color:var(--accent);letter-spacing:-.06em}
  .railbar .nav-item{flex-direction:column;gap:4px;justify-content:center;
    padding:var(--s3) 2px;font-size:10px;font-weight:600;text-align:center}
  .railbar .nav-item svg{width:20px;height:20px}
  .railbar .nav-item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .railbar-fuss{margin-top:auto}
  .app-topbar{padding-left:var(--s6);padding-right:var(--s6)}
  .topbar-home{display:none}
}

@media (min-width: 1280px){
  body{padding-left:var(--rail-w-xl)}
  .railbar{width:var(--rail-w-xl);padding:var(--s5) var(--s4)}
  .railbar-logo{justify-content:flex-start;padding-left:var(--s3);font-size:17px}
  .railbar .nav-item{flex-direction:row;gap:var(--s4);justify-content:flex-start;
    padding:var(--s3) var(--s4);font-size:var(--t-md);font-weight:500;text-align:left}
  .railbar .nav-item span{max-width:none}
}

/* ── 4. Typografie ──────────────────────────────────────────────────────── */
h1,h2,h3,h4{line-height:1.2;letter-spacing:-.025em;font-weight:700;text-wrap:balance}
h1{font-size:var(--t-xl)}
h2{font-size:var(--t-lg)}
h3{font-size:var(--t-md)}
@media (min-width: 640px){
  h1{font-size:var(--t-2xl)}
  h2{font-size:var(--t-xl)}
}

.page-header{margin-bottom:var(--s5)}
.page-header h1{margin-bottom:var(--s2)}
.page-sub{font-size:var(--t-sm);color:var(--text3);line-height:1.55;max-width:68ch}
.page-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s4)}
@media (min-width: 900px){
  .page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s6)}
  .page-actions{margin-top:0;flex-shrink:0}
}

.text-mono,.numeric,.money,.amount{
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1,'ss01' 1}
.text-right{text-align:right}
.small-help{font-size:var(--t-sm);color:var(--text3);line-height:1.5}
.link{color:var(--accent);border-bottom:1px solid transparent}
.link:hover{border-bottom-color:var(--accent-line)}
.divider,.card-divider{height:1px;background:var(--border);border:0;margin:var(--s5) 0}

/* ── 5. Bedienelemente ──────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:var(--h-ctl);min-width:var(--h-ctl);padding:0 var(--s4);
  font-size:var(--t-sm);font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  color:var(--text);background:var(--card2);
  border:1px solid var(--border2);border-radius:var(--radius);
  cursor:pointer;text-decoration:none;
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),
             color var(--fast) var(--ease),transform var(--fast) var(--ease);
}
.btn:hover{background:var(--raised);border-color:var(--text3)}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn.disabled,.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}
.btn-primary:hover{background:color-mix(in srgb, var(--accent) 86%, #fff);
  border-color:color-mix(in srgb, var(--accent) 86%, #fff)}
.btn-secondary{background:var(--card2);color:var(--text2);border-color:var(--border2)}
.btn-secondary:hover{color:var(--text)}
.btn-danger,.btn-delete,.btn-reject{background:transparent;color:var(--red);border-color:color-mix(in srgb, var(--red) 45%, transparent)}
.btn-danger:hover,.btn-delete:hover,.btn-reject:hover{background:color-mix(in srgb, var(--red) 14%, transparent);color:var(--red)}
.btn-warning{background:transparent;color:var(--yellow);border-color:color-mix(in srgb, var(--yellow) 45%, transparent)}
.btn-warning:hover{background:color-mix(in srgb, var(--yellow) 14%, transparent)}
.btn-success,.btn-confirm,.btn-ok{background:transparent;color:var(--green);border-color:color-mix(in srgb, var(--green) 45%, transparent)}
.btn-success:hover,.btn-confirm:hover,.btn-ok:hover{background:color-mix(in srgb, var(--green) 14%, transparent)}
.btn-neutral,.btn-cancel{background:transparent;color:var(--text3);border-color:var(--border)}
.btn-neutral:hover,.btn-cancel:hover{color:var(--text2);border-color:var(--border2)}
.btn-admin{background:var(--accent-dim);color:var(--accent);border-color:var(--accent-line)}

.btn-sm{min-height:var(--h-ctl-sm);padding:0 var(--s3);font-size:var(--t-xs)}
.btn-icon{width:var(--h-ctl);padding:0;flex-shrink:0}
.btn-block{width:100%}

/* Knopfreihen: mobil untereinander in voller Breite, ab 640px nebeneinander.
   Die Hauptaktion steht mobil OBEN, damit sie im Daumenbereich liegt. */
.button-row,.card-actions,.dialog-actions,.action-bar,.actions{
  display:flex;flex-direction:column;gap:var(--s3)}
.button-row > .btn,.card-actions > .btn,.dialog-actions > .btn,.actions > .btn{width:100%}
@media (min-width: 640px){
  .button-row,.card-actions,.dialog-actions,.action-bar,.actions{
    flex-direction:row;flex-wrap:wrap;align-items:center}
  .button-row > .btn,.card-actions > .btn,.dialog-actions > .btn,.actions > .btn{width:auto}
}

.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--h-ctl);height:var(--h-ctl);flex-shrink:0;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-pill);
  color:var(--text3);cursor:pointer;transition:color var(--fast) var(--ease)}
.theme-toggle:hover{color:var(--accent);border-color:var(--accent-line)}

/* Reiter */
.tabs,.nav-tabs,.uov-tabs{
  display:flex;gap:var(--s2);margin-bottom:var(--s5);
  overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--border)}
.tabs::-webkit-scrollbar,.nav-tabs::-webkit-scrollbar,.uov-tabs::-webkit-scrollbar{display:none}
.tab-button,.uov-tab{
  flex:0 0 auto;min-height:var(--h-ctl);padding:0 var(--s4);
  display:inline-flex;align-items:center;
  color:var(--text3);font-size:var(--t-sm);font-weight:600;white-space:nowrap;
  background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;
  transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.tab-button:hover,.uov-tab:hover{color:var(--text2)}
.tab-button.active,.uov-tab.active{color:var(--accent);border-bottom-color:var(--accent)}

/* Merkmal-Pillen (Filter) */
.filter-chips{display:flex;gap:var(--s2);flex-wrap:wrap}
.filter-chip{
  display:inline-flex;align-items:center;gap:var(--s2);
  min-height:var(--h-ctl-sm);padding:0 var(--s4);
  color:var(--text2);font-size:var(--t-sm);font-weight:600;white-space:nowrap;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-pill);
  cursor:pointer;transition:all var(--fast) var(--ease)}
.filter-chip:hover{border-color:var(--border2);color:var(--text)}
.filter-chip.active{background:var(--accent-dim);border-color:var(--accent-line);color:var(--accent)}
.filter-chip .fc-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* ── 6. Formulare ───────────────────────────────────────────────────────── */
.form-group{margin-bottom:var(--s5)}
.form-label{display:block;margin-bottom:var(--s2);
  font-size:var(--t-sm);font-weight:600;color:var(--text2)}

.form-control{
  width:100%;min-height:var(--h-field);padding:var(--s3) var(--s4);
  /* 16px ist Pflicht: iOS zoomt beim Fokus in jedes kleinere Feld hinein. */
  font-size:var(--t-lg);line-height:1.4;color:var(--text);
  background:var(--card);border:1px solid var(--border2);border-radius:var(--radius);
  transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease)}
.form-control::placeholder{color:var(--text3)}
.form-control:hover{border-color:var(--text3)}
.form-control:focus{outline:none;border-color:var(--accent);background:var(--card2);
  box-shadow:0 0 0 3px var(--accent-dim)}
.form-control[disabled],.form-control:disabled{opacity:.5;cursor:not-allowed}
.form-control[aria-invalid="true"],.form-control.fehler{border-color:var(--red)}
textarea.form-control{min-height:96px;resize:vertical;line-height:1.55}
select.form-control{
  appearance:none;padding-right:var(--s7);cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b95a5' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--s4) center;background-size:15px}
@media (pointer: fine) and (min-width: 900px){
  /* Dichter NUR mit Maus. An der Breite festgemacht war es falsch: Ein iPad
     quer misst 1024px und wird mit dem Finger bedient — iOS zoomt dann in
     jedes Feld unter 16px hinein (03.08.2026 bei 1024px gemessen). */
  .form-control{font-size:var(--t-md)}
}

.form-grid{display:grid;grid-template-columns:1fr;gap:var(--s4)}
@media (min-width: 720px){
  .form-grid,.form-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
}
@media (min-width: 1100px){
  .form-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.form-grid-2,.form-grid-3{display:grid;grid-template-columns:1fr;gap:var(--s4)}

.form-check{display:flex;align-items:center;gap:var(--s3);min-height:var(--h-ctl)}
.form-check input[type=checkbox],.form-check input[type=radio]{
  width:19px;height:19px;flex-shrink:0;accent-color:var(--accent);cursor:pointer}
.form-check label{font-size:var(--t-md);color:var(--text2);cursor:pointer}

.list-filter{display:flex;flex-direction:column;gap:var(--s3);margin-bottom:var(--s5)}
.list-filter input[type=search]{width:100%}
.list-filter-count{font-size:var(--t-sm);color:var(--text3);white-space:nowrap}
@media (min-width: 900px){
  .list-filter{flex-direction:row;align-items:center;gap:var(--s4)}
  .list-filter input[type=search]{max-width:340px}
  .list-filter-count{margin-left:auto}
}
.filter-bar,.search-filter-row,.table-toolbar,.toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-bottom:var(--s5)}

/* ── 7. Karten und Flaechen ─────────────────────────────────────────────── */
.card,.panel,.settings-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--s5);margin-bottom:var(--s5)}
@media (min-width: 640px){
  .card,.panel,.settings-card{padding:var(--s6)}
}
.card-header,.panel-header{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;margin-bottom:var(--s4);
  padding-bottom:var(--s4);border-bottom:1px solid var(--border)}
.card-title,.panel-title{
  font-size:var(--t-md);font-weight:700;letter-spacing:-.02em;color:var(--text)}

/* Kennzahlen: eine Leiste, keine acht gleich grossen Kaesten.
   Mobil zwei Spalten, ab 640 drei, ab 1024 automatisch. */
.stats-grid,.settings-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);
  margin-bottom:var(--s5)}
@media (min-width: 640px){
  .stats-grid,.settings-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s4)}
}
.stat-card{
  position:relative;overflow:hidden;
  padding:var(--s4);background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius);
  transition:border-color var(--fast) var(--ease)}
.stat-card:hover{border-color:var(--border2)}
.stat-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent)}
.stat-card.green::before{background:var(--green)}
.stat-card.yellow::before{background:var(--yellow)}
.stat-card.red::before{background:var(--red)}
.stat-card.cyan::before{background:var(--cyan)}
.stat-card.orange::before{background:var(--orange)}
.stat-label{font-size:var(--t-xs);font-weight:600;color:var(--text3);
  letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat-value{font-size:var(--t-2xl);font-weight:800;line-height:1.05;letter-spacing:-.04em;
  margin-top:var(--s2);font-variant-numeric:tabular-nums}
.stat-sub{font-size:var(--t-xs);color:var(--text3);margin-top:var(--s1)}
@media (min-width: 640px){
  .stat-value{font-size:var(--t-3xl)}
}

.grid-2,.detail-grid,.detail-grid-2col{display:grid;grid-template-columns:1fr;gap:var(--s5)}
.grid-3{display:grid;grid-template-columns:1fr;gap:var(--s5)}
@media (min-width: 900px){
  .grid-2,.detail-grid,.detail-grid-2col{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width: 1200px){
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ── 8. Tabellen und Listen ─────────────────────────────────────────────── */
/* Mobil wird jede Tabelle zur Kartenliste. Dafuer braucht jede Zelle ein
   data-label; ohne das faellt sie auf waagerechtes Rollen zurueck. */
.table-wrap,.table-container,.responsive-table{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card)}
table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
thead th{
  padding:var(--s3) var(--s4);text-align:left;white-space:nowrap;
  font-size:var(--t-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text3);background:var(--card2);border-bottom:1px solid var(--border)}
tbody td{padding:var(--s4);border-bottom:1px solid var(--border);color:var(--text2);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background var(--fast) var(--ease)}
tbody tr:hover{background:var(--card2)}

/* Am Handy wird jede Tabelle zur Kartenliste: Kopfzeile links, Wert rechts.
   Die Beschriftung kommt aus data-label, das enhanceMobileTables() setzt.
   Ohne diesen Umbau muesste man bei zwoelf Spalten waagerecht wischen und
   verloere beim Wischen die Zeile aus den Augen. */
.karten-tabelle{display:block}
.karten-tabelle thead{display:none}
.karten-tabelle tbody,.karten-tabelle tr,.karten-tabelle td{display:block;width:100%}
.karten-tabelle tr{
  padding:var(--s3) var(--s4);margin-bottom:var(--s3);
  background:var(--card2);border:1px solid var(--border);border-radius:var(--radius)}
.karten-tabelle td{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding:var(--s2) 0;border:0;text-align:right}
.karten-tabelle td::before{
  content:attr(data-label);flex:0 0 auto;
  font-size:var(--t-xs);font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--text3);text-align:left}
.karten-tabelle td:empty{display:none}
@media (min-width: 900px){
  /* Ab hier ist wieder Platz fuer echte Spalten. */
  .karten-tabelle{display:table}
  .karten-tabelle thead{display:table-header-group}
  .karten-tabelle tbody{display:table-row-group}
  .karten-tabelle tr{display:table-row;padding:0;margin:0;background:none;border:0;border-radius:0}
  .karten-tabelle td{display:table-cell;text-align:left;padding:var(--s4);
    border-bottom:1px solid var(--border)}
  .karten-tabelle td::before{content:none}
}

/* Werkzeug im Vollbild (Website-Editor): keine Wege, kein Rand, alle Hoehe. */
body.vollbild{padding-bottom:0}
body.vollbild .tabbar,body.vollbild .railbar{display:none}
@media (min-width: 1024px){ body.vollbild{padding-left:0} }
body.vollbild .content{max-width:none;padding:0}

/* Zeichen in Knoepfen und Zeilen: laufen mit der Schrift mit. */
.ico{width:15px;height:15px;flex-shrink:0;stroke-width:2}

.logo-verk{color:var(--accent);font-weight:800;letter-spacing:-.03em}
.logo-studio{color:var(--text);font-weight:400}

/* Zeilenliste: das Muster fuer alle Arbeitslisten (Website, Uebergeben, …).
   Mobil eine Karte je Datensatz, ab 900px eine Zeile mit Aktionen rechts. */
.zeilen{display:flex;flex-direction:column;gap:var(--s3)}
.zeile{
  display:flex;flex-direction:column;gap:var(--s3);
  padding:var(--s4);background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius);
  transition:border-color var(--fast) var(--ease)}
.zeile:hover{border-color:var(--border2)}
.zeile-kopf{display:flex;align-items:flex-start;gap:var(--s3);min-width:0}
.zeile-titel{font-size:var(--t-md);font-weight:700;color:var(--text);
  line-height:1.3;overflow-wrap:anywhere}
.zeile-meta{font-size:var(--t-sm);color:var(--text3);margin-top:2px}
.zeile-aktionen{display:flex;flex-wrap:wrap;gap:var(--s2)}
@media (min-width: 900px){
  .zeile{flex-direction:row;align-items:center;gap:var(--s5)}
  .zeile-kopf{flex:1}
  .zeile-aktionen{flex-wrap:nowrap;flex-shrink:0}
}

/* ── 8b. Arbeitsliste (.ia-*) ──────────────────────────────────────────────
   Das Muster aller Phasenlisten: Website, Übergeben, Finale Änderungen,
   Rechnung, Rückmeldung, Prüfprozess, Aussortiert, Powerdialer-Liste.

   Es stand am 03.08.2026 in ZEHN Vorlagen als eigene Kopie — jede Änderung
   musste zehnmal gemacht werden, und nach der dritten Kopie stimmte keine
   mehr mit der anderen überein. Seitdem steht es genau hier.

   Mobil ist jede Zeile eine Karte (Punkt + Name, Zustand darunter, Aktionen
   als eigene Reihe). Ab 900px wird daraus eine echte Zeile mit den Aktionen
   rechts — dort ist Platz, und dort arbeitet man mit der Maus. */
.ia-list{display:flex;flex-direction:column;gap:var(--s3)}
.ia-row{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--s3) var(--s4);align-items:start;
  padding:var(--s4);background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius);
  transition:border-color var(--fast) var(--ease)}
.ia-row:hover{border-color:var(--border2)}

.ia-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;position:relative;margin-top:5px}
.ia-dot.red{background:var(--red)}
.ia-dot.yellow{background:var(--yellow)}
.ia-dot.green{background:var(--green)}
.ia-dot.blue{background:#4f96f6}
.ia-dot.cyan{background:var(--cyan)}
.ia-dot.gray{background:var(--text3)}
.ia-dot.yellow::after{content:'';position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--yellow);opacity:.5;animation:iapulse 1.8s infinite}
@keyframes iapulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:0;transform:scale(1.25)}}

.ia-main{min-width:0}
.ia-name{display:inline-flex;align-items:center;
  /* Auch ein kurzer Firmenname („Elling") bleibt eine volle Tippflaeche. */
  min-height:var(--h-ctl);min-width:var(--h-ctl);
  font-size:var(--t-md);font-weight:700;color:var(--text);letter-spacing:-.015em;
  text-decoration:none;overflow-wrap:anywhere}
.ia-name:hover{color:var(--accent)}
.ia-meta{font-size:var(--t-xs);color:var(--text3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ia-frist{font-size:var(--t-xs);color:var(--cyan);font-weight:600;margin-top:2px}
.ia-frist .wann{color:var(--text2);font-weight:500}
.ia-frist.faellig{color:var(--red)}
.ia-termin{font-size:var(--t-xs);color:var(--text3);margin-top:2px}
.ia-termin.faellig{color:var(--red);font-weight:700}

.ia-badge{grid-column:2;justify-self:start;
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:3px var(--s3);border-radius:var(--radius-pill);
  font-size:var(--t-xs);font-weight:700;white-space:nowrap;
  border:1px solid transparent}
.ia-badge.red,.ia-badge.spaet{background:color-mix(in srgb,var(--red) 14%,transparent);
  color:var(--red);border-color:color-mix(in srgb,var(--red) 35%,transparent)}
.ia-badge.yellow,.ia-badge.warn{background:color-mix(in srgb,var(--yellow) 14%,transparent);
  color:var(--yellow);border-color:color-mix(in srgb,var(--yellow) 35%,transparent)}
.ia-badge.green{background:color-mix(in srgb,var(--green) 14%,transparent);
  color:var(--green);border-color:color-mix(in srgb,var(--green) 35%,transparent)}
.ia-badge.blue{background:rgba(79,150,246,.14);color:#7db2ff;border-color:rgba(79,150,246,.35)}
.ia-badge.cyan,.ia-badge.mail{background:var(--accent-dim);color:var(--accent);border-color:var(--accent-line)}
.ia-badge.gray{background:var(--card2);color:var(--text3);border-color:var(--border2)}

.ia-actions{grid-column:1 / -1;display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.ia-call,.ia-btn,.ia-termin-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:var(--h-ctl);min-width:var(--h-ctl);padding:0 var(--s4);
  border-radius:var(--radius-pill);font-size:var(--t-sm);font-weight:700;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease),
             background var(--fast) var(--ease)}
.ia-call{background:var(--green);color:#04210a;border:1px solid var(--green)}
.ia-call:hover{filter:brightness(1.06)}
.ia-call.disabled{background:var(--card2);color:var(--text3);border-color:var(--border2);pointer-events:none}
.ia-btn,.ia-termin-btn{font-weight:600;border:1px solid var(--border2);color:var(--text2);background:transparent}
.ia-btn:hover,.ia-termin-btn:hover{color:var(--text);border-color:var(--text3);background:var(--card2)}
.ia-btn.primary{background:var(--accent-dim);color:var(--accent);border-color:var(--accent-line)}
.ia-btn.primary:hover{background:var(--accent);color:var(--text-on-accent)}
.ia-btn.danger{color:var(--red);border-color:color-mix(in srgb,var(--red) 35%,transparent)}
.ia-btn.danger:hover{background:color-mix(in srgb,var(--red) 12%,transparent);border-color:var(--red)}
.ia-btn.disabled{opacity:.4;pointer-events:none}
/* „Bauen" ist der einzige Weg zur Website-Erstellung — deshalb abgesetzt. */
.ia-bau{display:inline-flex}
.ia-btn.bauen{background:var(--accent-dim);color:var(--accent);
  border-color:var(--accent-line);font-weight:800}
.ia-btn.bauen:hover{background:var(--accent);color:var(--text-on-accent)}
.ia-btn.bauen:disabled{opacity:.6;cursor:progress}

.ia-pager{display:flex;gap:var(--s3);align-items:center;justify-content:center;margin-top:var(--s5)}
.ia-pager .btn{min-width:110px}
.ia-pager .disabled{opacity:.4;pointer-events:none}

@media (min-width: 900px){
  .ia-row{grid-template-columns:auto minmax(0,1fr) auto auto;
    gap:var(--s5);align-items:center;padding:var(--s3) var(--s5)}
  .ia-dot{margin-top:0}
  .ia-badge{grid-column:auto;justify-self:end}
  .ia-actions{grid-column:auto;flex-wrap:nowrap;justify-content:flex-end}
  .ia-bau{margin-left:var(--s3)}
}
/* Der Firmenname ist der Weg in den Lead. Er darf seine Tippflaeche nur
   verlieren, wo mit der Maus gezielt wird — nicht ab einer Breite. */
@media (pointer: fine){
  .ia-name{min-height:0}
}

/* Haken und X: „erledigt" bzw. „abgelehnt" direkt in der Zeile.
   Lag bis 04.08.2026 als eingebundenes Stueck CSS in vier Vorlagen. */
.phase-knoepfe{display:flex;gap:var(--s2);align-items:center;flex-shrink:0}
.phase-knoepfe form{display:inline-flex;margin:0}
.phase-ja,.phase-nein{
  width:var(--h-ctl);height:var(--h-ctl);display:inline-grid;place-items:center;
  border-radius:var(--radius);font-size:15px;font-weight:800;line-height:1;
  cursor:pointer;font-family:inherit;
  border:1px solid var(--border2);background:transparent;color:var(--text3);
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),
             color var(--fast) var(--ease)}
.phase-ja:hover{background:color-mix(in srgb,var(--green) 14%,transparent);
  border-color:var(--green);color:var(--green)}
.phase-nein:hover{background:color-mix(in srgb,var(--red) 14%,transparent);
  border-color:var(--red);color:var(--red)}

/* ── 9. Zustaende und Rueckmeldung ─────────────────────────────────────── */
.badge,.status-badge,.tag,.user-badge{
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:3px var(--s3);border-radius:var(--radius-pill);
  font-size:var(--t-xs);font-weight:700;letter-spacing:.01em;white-space:nowrap;
  background:var(--card2);color:var(--text2);border:1px solid var(--border2)}

.badge-neu,.badge-info,.badge-blue,.status-info{background:var(--accent-dim);color:var(--accent);border-color:var(--accent-line)}
.badge-interessiert,.badge-aktiv,.badge-success,.badge-green,.badge-bezahlt,.badge-paid,
.badge-fertig,.badge-live,.badge-freigegeben,.badge-angenommen,.badge-approved,.badge-confirmed,
.status-success{background:color-mix(in srgb, var(--green) 16%, transparent);color:var(--green);
  border-color:color-mix(in srgb, var(--green) 40%, transparent)}
.badge-pruefung,.badge-wiedervorlage,.badge-warning,.badge-yellow,.badge-offen,.badge-faellig,
.badge-nachfassen,.badge-laeuft,.badge-entwurf,.badge-pausiert,.status-warning
{background:color-mix(in srgb, var(--yellow) 16%, transparent);color:var(--yellow);
  border-color:color-mix(in srgb, var(--yellow) 40%, transparent)}
.badge-kein_interesse,.badge-danger,.badge-red,.badge-ueberfaellig,.badge-fehler,
.badge-abgelehnt,.badge-storniert,.badge-gekuendigt,.badge-gestoppt,.badge-zurueckgewiesen,
.badge-dringend,.status-danger
{background:color-mix(in srgb, var(--red) 16%, transparent);color:var(--red);
  border-color:color-mix(in srgb, var(--red) 40%, transparent)}
.badge-aussortiert,.badge-inaktiv,.badge-archiviert,.badge-neutral,.badge-default,.status-neutral
{background:var(--card2);color:var(--text3);border-color:var(--border)}
.badge-abo,.badge-subscription,.status-subscription{background:color-mix(in srgb, var(--violet) 16%, transparent);
  color:var(--violet);border-color:color-mix(in srgb, var(--violet) 40%, transparent)}
.badge-provision,.badge-commission,.status-commission{background:color-mix(in srgb, var(--orange) 16%, transparent);
  color:var(--orange);border-color:color-mix(in srgb, var(--orange) 40%, transparent)}

/* Meldungen */
.flash-container{display:flex;flex-direction:column;gap:var(--s3);margin-bottom:var(--s5)}
.flash,.alert{
  display:flex;align-items:flex-start;gap:var(--s3);
  padding:var(--s4) var(--s5);border-radius:var(--radius);
  font-size:var(--t-sm);line-height:1.5;
  background:var(--card);border:1px solid var(--border2);color:var(--text2)}
.flash.success,.alert-success{border-color:color-mix(in srgb, var(--green) 45%, transparent);
  background:color-mix(in srgb, var(--green) 10%, var(--card));color:var(--text)}
.flash.danger,.alert-danger,.alert-error{border-color:color-mix(in srgb, var(--red) 45%, transparent);
  background:color-mix(in srgb, var(--red) 10%, var(--card));color:var(--text)}
.flash.warning,.alert-warning{border-color:color-mix(in srgb, var(--yellow) 45%, transparent);
  background:color-mix(in srgb, var(--yellow) 10%, var(--card));color:var(--text)}
.flash.info,.alert-info{border-color:var(--accent-line);
  background:color-mix(in srgb, var(--accent) 8%, var(--card));color:var(--text)}

/* Leerzustaende erklaeren die Oberflaeche, statt „nichts da" zu sagen. */
.empty-state,.empty-group{
  display:flex;flex-direction:column;align-items:center;gap:var(--s3);
  padding:var(--s7) var(--s5);text-align:center;
  border:1px dashed var(--border2);border-radius:var(--radius-lg);background:var(--card)}
.empty-state-icon{font-size:26px;opacity:.6;line-height:1}
.empty-state-text{font-size:var(--t-md);font-weight:600;color:var(--text2)}
.empty-state-sub{font-size:var(--t-sm);color:var(--text3);max-width:46ch}

/* Ladezustand: Platzhalter in Inhaltsform, kein Kreisel in der Mitte. */
.skelett{
  border-radius:var(--radius-sm);
  background:linear-gradient(90deg,var(--card2) 0%,var(--raised) 50%,var(--card2) 100%);
  background-size:200% 100%;animation:skelett 1.4s linear infinite;color:transparent}
@keyframes skelett{from{background-position:200% 0}to{background-position:-200% 0}}

/* Modal — nur, wenn der Vorgang wirklich abgeschottet gehoert.
   Mobil ist es ein Blatt von unten, am Schreibtisch ein Fenster in der Mitte. */
.modal,.dialog{
  position:fixed;inset:0;z-index:90;display:none;
  align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.66);backdrop-filter:blur(3px);padding:0}
.modal.show,.modal.offen,.dialog.show,.dialog.offen{display:flex}
.modal-dialog,.dialog-panel{
  width:100%;max-height:88vh;overflow:auto;
  background:var(--card);border:1px solid var(--border2);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:var(--s5) var(--gutter) calc(var(--s6) + env(safe-area-inset-bottom));
  box-shadow:var(--shadow-3)}
.modal-header,.dialog-header{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);margin-bottom:var(--s4);font-size:var(--t-lg);font-weight:700}
.modal-footer{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s5)}
@media (min-width: 640px){
  .modal,.dialog{align-items:center;padding:var(--s6)}
  .modal-dialog,.dialog-panel{max-width:560px;border-radius:var(--radius-lg);padding:var(--s6)}
  .modal-footer{flex-direction:row;justify-content:flex-end}
}

/* Mehr-Menue als natives <details> */
.more-menu{position:relative}
.more-menu summary{list-style:none;cursor:pointer}
.more-menu summary::-webkit-details-marker{display:none}
.more-menu-list{
  position:absolute;right:0;top:calc(100% + var(--s2));z-index:50;min-width:200px;
  padding:var(--s2);background:var(--raised);border:1px solid var(--border2);
  border-radius:var(--radius);box-shadow:var(--shadow-2)}
.more-menu-item{display:flex;align-items:center;gap:var(--s3);width:100%;
  min-height:var(--h-ctl);padding:0 var(--s3);border-radius:var(--radius-sm);
  color:var(--text2);font-size:var(--t-sm);background:none;border:0;cursor:pointer;text-align:left}
.more-menu-item:hover{background:var(--card2);color:var(--text)}
.more-menu-item.danger{color:var(--red)}

/* Sofortmeldung */
.toast{
  position:fixed;left:var(--gutter);right:var(--gutter);
  bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s4));
  z-index:95;padding:var(--s4) var(--s5);
  background:var(--raised);border:1px solid var(--border2);border-radius:var(--radius);
  box-shadow:var(--shadow-2);font-size:var(--t-sm);color:var(--text)}
@media (min-width: 640px){
  .toast{left:auto;right:var(--s6);bottom:var(--s6);min-width:280px;max-width:380px}
}

/* ── 10. Hilfsklassen ──────────────────────────────────────────────────── */
.stack{display:flex;flex-direction:column;gap:var(--s4)}
.reihe{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.schieben{margin-left:auto}
.nur-desktop{display:none}
.nur-mobil{display:block}
@media (min-width: 900px){
  .nur-desktop{display:block}
  .nur-mobil{display:none}
}