/* ============================================================
   POSING GUIDE — Design System
   Entschlackte Kopie aus herzberger-crm/css/style.css: nur die
   generischen, seitenunabhängigen Komponenten. CRM-Spezifika
   (Sidebar, Finanzen, Kunde-Portal, Zeitplan, Print, Kompass/
   Assistent/Planer, Dashboard) sind bewusst nicht übernommen.

   REGEL: Nichts davon in HTML-Dateien überschreiben.
   Seiten-spezifische Ausnahmen: max. 20–30 Zeilen pro Datei.

   Struktur:
   1. Google Fonts
   2. Design Tokens (Farben, Radii, Shadows)
   3. Typografie-System (Custom Properties + Klassen)
   4. Spacing-System
   5. Reset & Base
   6. App-Shell (Posing Guide, eigenständig statt CRM-Sidebar)
   7. Komponenten (Badges, Buttons, Cards, Empty State,
      Filter-Bar & Chips, Formulare, Loading Spinner, Modals,
      Section Label, Toasts)
   8. Login
   9. Dark Mode
   10. Responsive (768px → Mobile)
   11. Galerie (Posing Guide — Cards, Upload-/Detail-Bild)
   ============================================================ */



/* ── 1. Google Fonts ──────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@300;400;500&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');


/* ── 2. Design Tokens ─────────────────────────────────────── */
:root {
  /* Primärfarbe — Brand Teal von herzberger-fotografie.de */
  --teal:       #049f82;
  --teal-dark:  #008f72;
  --teal-deep:  #13612e;
  --teal-l:     #d0f0ea;
  --teal-ll:    #edfaf7;
  --teal-m:     #86d8c9;

  /* Neutrale Töne — warm-grau */
  --ink:        #222222;
  --ink-2:      #353535;
  --ink-3:      #676767;
  --ink-4:      #999999;
  --paper:      #f7f7f7;
  --paper-2:    #efefef;
  --paper-3:    #e2e2e2;
  --paper-4:    #d4d4d4;
  --white:      #ffffff;

  /* Statusfarben */
  --amber:      #d97706;
  --amber-l:    #fef3c7;
  --amber-ll:   #fffbeb;
  --red:        #b91c1c;
  --red-l:      #fee2e2;
  --red-ll:     #fff5f5;
  --blue:       #1d4ed8;
  --blue-l:     #dbeafe;
  --blue-ll:    #eff6ff;
  --purple:     #6d28d9;
  --purple-l:   #ede9fe;
  --purple-ll:  #f5f3ff;
  /* Rosé — Kategorie-Farbe (Hochzeit). NICHT für Warnungen — dafür ist --red reserviert. */
  --rose:       #be123c;
  --rose-l:     #ffe4e6;
  --rose-ll:    #fff1f2;
  /* Indigo — Session-Karten (war vorher hardcoded #6366f1) */
  --indigo:     #6366f1;
  --indigo-l:   #818cf8;

  /* Semantische Aliasse — bei neuen Komponenten diese verwenden,
     damit Absicht (Warnung vs. Kategorie) im Code lesbar bleibt */
  --danger:  var(--red);
  --warning: var(--amber);
  --info:    var(--blue);
  --success: var(--green);
  --green:      #15803d;
  --green-l:    #dcfce7;
  --green-ll:   #f0fdf4;

  /* Aliasse — assistent.html und andere externe Seiten nutzen diese */
  --bg:     var(--paper);
  --card:   var(--white);
  --border: var(--paper-3);

  /* Radii */
  --r:     4px;
  --r-lg:  8px;
  --r-xl:  12px;
  --r-2xl: 16px;

  /* Shadows */
  --sh:    0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --sh-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.05);
  --sh-lg: 0 8px 24px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);

  /* Layout */
  --sidebar-w:    240px;
  --sidebar-w-sm: 56px;
  --mobile-bar-h: 44px;
  --topbar-h:     57px;        /* Topbar-Höhe auf Desktop */
  --topbar-h-mob: 50px;        /* Topbar-Höhe auf Mobile */
}


/* ── 3. Typografie-System ─────────────────────────────────── */
/*
  Skala (Desktop):
  --fs-label  10px  DM Mono, uppercase — ISO, BLENDE, etc.
  --fs-xs     12px  Sehr kleine Hinweise, Badges
  --fs-sm     13px  Sekundärer Text, Table-Zellen
  --fs-base   15px  Normaler Fließtext
  --fs-md     17px  Wichtige Werte, Card-Titel
  --fs-lg     20px  Modal-Kacheln, prominente Kennzahlen
  --fs-xl     22px  Modal-Titel, Page-Headlines

  Auf Mobile (≤768px) alles +1–2px für Lesbarkeit unter Stress.
  Einzige Ausnahme: --fs-label bleibt 11px (Mono-Labels).
*/
:root {
  --fs-label: 10px;
  --fs-xs:    12px;
  --fs-sm:    13px;
  --fs-base:  15px;
  --fs-md:    17px;
  --fs-lg:    20px;
  --fs-xl:    22px;

  /* Zeilenabstände */
  --lh-tight:  1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* Touch-Target Minimum (WCAG 2.5.5) */
  --touch: 44px;
}

/* Schriftgröße-Stufen — via JS auf <html> gesetzt */
/* Stufe A (Standard) entspricht dem bisherigen A+ */
/* Stufe A+ */
html[data-fontsize="lg"] {
  --fs-label: 12px;
  --fs-xs:    14px;
  --fs-sm:    15px;
  --fs-base:  18px;
  --fs-md:    20px;
  --fs-lg:    24px;
  --fs-xl:    27px;
}
/* Stufe A++ — entspricht ~125% Browserzoom, ideal für große Monitore */
html[data-fontsize="xl"] {
  --fs-label: 13px;
  --fs-xs:    15px;
  --fs-sm:    16px;
  --fs-base:  20px;
  --fs-md:    23px;
  --fs-lg:    27px;
  --fs-xl:    31px;
}

/* Typografie-Hilfsklassen — in HTML direkt nutzbar */
.t-display {
  font-family: 'DM Serif Display', serif;
  font-size: var(--fs-xl);
  color: var(--ink);
  line-height: var(--lh-tight);
}
.t-h1 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.3rem;
  color: var(--ink);
  line-height: var(--lh-tight);
}
.t-h2 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
}
.t-h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--ink);
}
.t-label {
  font-family: 'DM Mono', monospace;
  font-size: var(--fs-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
}
.t-meta {
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.t-mono {
  font-family: 'DM Mono', monospace;
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

/*
  Bereichs-Headlines — für benannte Abschnitte in Projekt, Dashboard, Modals.
  Beispiel: "Rechnungen", "Aufgaben", "Notizen", "Referenznutzung"
  Nicht für technische Metadaten (→ .t-label).
*/
.section-headline {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: .75rem;
  line-height: var(--lh-tight);
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--paper-3);
}
.section-headline i {
  color: var(--ink-3);
  font-size: var(--fs-sm);
  flex-shrink: 0;
}
.section-headline--bordered {
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--paper-3);
  margin-bottom: 1rem;
}

/*
  Section-Header — für collapsible oder prominente Abschnitte (Dashboard-Sektionen).
  Kombiniert Label + optionale Zahl + optionales Chevron.
*/
.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: .75rem;
}
.section-header-label {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
  flex: 1;
}
.section-header-count {
  font-family: 'DM Mono', monospace;
  font-size: var(--fs-label);
  color: var(--ink-4);
}

/* Dark Mode */
:root[data-theme="dark"] .section-headline { color: var(--ink); border-bottom-color: var(--paper-3); }
:root[data-theme="dark"] .section-headline--bordered { border-bottom-color: var(--paper-3); }
:root[data-theme="dark"] .section-header-label { color: var(--ink-2); }


/* ── 4. Spacing-System ────────────────────────────────────── */
:root {
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;

  /* Content-Padding je Breakpoint */
  --pad-content-desk: 1.5rem;   /* 24px */
  --pad-content-mob:  0.625rem; /* 10px — reduziert, war 14px */
}

/* ── 4b. Layout-Utilities ─────────────────────────────────────
   Ersatz für wiederholte Inline-Styles in den HTML-Dateien.
   Neue Module: diese Klassen statt style="display:flex;gap:8px…" */
.u-row      { display: flex; align-items: center; gap: var(--sp-2); }
.u-row-wrap { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.u-stack    { display: flex; flex-direction: column; gap: var(--sp-2); }
.u-gap-1    { gap: var(--sp-1); }
.u-gap-3    { gap: var(--sp-3); }
.u-end      { justify-content: flex-end; }
.u-between  { justify-content: space-between; }
.u-ml-auto  { margin-left: auto; }
.u-w-full   { width: 100%; box-sizing: border-box; }
.u-mb-2     { margin-bottom: var(--sp-2); }
.u-mb-3     { margin-bottom: var(--sp-3); }
.u-mb-4     { margin-bottom: var(--sp-4); }


/* ── 5. Reset & Base ──────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/*
  Basis-Schriftgröße: 17px Desktop, 17px Mobile.
  Wir skalieren über --fs-* Variablen, nicht über html font-size.
  iOS Zoom-Verhinderung: inputs/selects explizit auf 16px+ (weiter unten).
*/
html {
  font-size: var(--fs-md);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: var(--lh-normal);
}

a {
  color: var(--ink-2);
  text-decoration: none;
}
a:hover {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Echte externe Links (tel:, mailto:) und teal-Link-Klasse bleiben teal */
a[href^="tel:"],
a[href^="mailto:"],
a.link-teal {
  color: var(--teal);
  text-decoration: none;
}
a[href^="tel:"]:hover,
a[href^="mailto:"]:hover,
a.link-teal:hover {
  color: var(--teal-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Tastatur-Navigation */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: var(--r);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/*
  iOS: Inputs mind. 16px → kein automatischer Zoom beim Tippen.
  Wir setzen font-size direkt, nicht über html-Skala.
*/
input, textarea, select {
  font-size: var(--fs-base);
}


/* ── 6. App-Shell (app.html) ──────────────────────────────── */
/* Einfacher Header + Content, kein Sidebar-Layout wie im CRM */

.pg-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .875rem 1.25rem;
  background: var(--white);
  border-bottom: 1px solid var(--paper-3);
}

.pg-header-logo {
  font-family: 'DM Serif Display', serif;
  font-size: 20px;
  color: var(--ink);
}

.pg-header-sub {
  font-family: 'DM Mono', monospace;
  font-size: var(--fs-label);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-left: .5rem;
}

.pg-content {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.25rem;
}


/* ── Badges / Status ──────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-label);
  font-family: 'DM Sans', sans-serif; /* war DM Mono — Sans wirkt leichter, Mono bleibt für Micro-Labels/Zahlen */
  padding: 2px 8px;
  border-radius: 100px;
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: .01em;
}

/* Projekt-Status */
.badge-anfrage    { background: var(--paper-2);  color: var(--ink-3); }
.badge-abstimmung { background: var(--amber-l);  color: var(--amber); }
.badge-abgestimmt { background: var(--amber-l);  color: var(--amber); } /* Alias für badge-abstimmung */
.badge-session    { background: var(--blue-l);   color: var(--blue); }
.badge-editing    { background: var(--purple-l); color: var(--purple); }
.badge-marketing  { background: var(--teal-l);   color: var(--teal-dark); }
.badge-done       { background: var(--green-l);  color: var(--green); }

/* Rechnungs-Status */
.badge-offen     { background: var(--amber-l); color: var(--amber); }
.badge-gesendet  { background: var(--blue-l);  color: var(--blue); }
.badge-bezahlt   { background: var(--green-l); color: var(--green); }

/* Vertrag-Status */
.badge-kein      { background: var(--paper-2); color: var(--ink-4); }
.badge-ausstehend{ background: var(--amber-l); color: var(--amber); }
.badge-signiert  { background: var(--green-l); color: var(--green); }

/* Dark-Mode: teal/green Badges — Textfarbe aufhellen für Lesbarkeit */
:root[data-theme="dark"] .badge-marketing { color: #5eead4; }
:root[data-theme="dark"] .badge-done      { color: #86efac; }
:root[data-theme="dark"] .badge-bezahlt   { color: #86efac; }
:root[data-theme="dark"] .badge-signiert  { color: #86efac; }
:root[data-theme="dark"] .badge-taufe     { color: #5eead4; }
:root[data-theme="dark"] .badge-kita      { color: #86efac; }
:root[data-theme="dark"] .badge-family    { color: #93c5fd; }
:root[data-theme="dark"] .badge-newborn   { color: #c4b5fd; }
:root[data-theme="dark"] .badge-baby      { color: #c4b5fd; }
:root[data-theme="dark"] .badge-hochzeit  { color: var(--rose); }
:root[data-theme="dark"] .badge-business  { background: rgba(148,163,184,.15); color: #94a3b8; }
:root[data-theme="dark"] .badge-portrait  { background: rgba(240,171,252,.15); color: #f0abfc; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge-marketing { color: #5eead4; }
  :root:not([data-theme="light"]) .badge-done      { color: #86efac; }
  :root:not([data-theme="light"]) .badge-bezahlt   { color: #86efac; }
  :root:not([data-theme="light"]) .badge-signiert  { color: #86efac; }
  :root:not([data-theme="light"]) .badge-taufe     { color: #5eead4; }
  :root:not([data-theme="light"]) .badge-kita      { color: #86efac; }
  :root:not([data-theme="light"]) .badge-family    { color: #93c5fd; }
  :root:not([data-theme="light"]) .badge-newborn   { color: #c4b5fd; }
  :root:not([data-theme="light"]) .badge-baby      { color: #c4b5fd; }
  :root:not([data-theme="light"]) .badge-hochzeit  { color: var(--rose); }
  :root:not([data-theme="light"]) .badge-business  { background: rgba(148,163,184,.15); color: #94a3b8; }
  :root:not([data-theme="light"]) .badge-portrait  { background: rgba(240,171,252,.15); color: #f0abfc; }
}

/* Session-Typen -- je Typ eigene Farbe, klar unterscheidbar */
.badge-family    { background: var(--blue-l);   color: var(--blue); }
.badge-newborn   { background: var(--purple-l); color: var(--purple); }
.badge-baby      { background: var(--purple-l); color: var(--purple); }
.badge-taufe     { background: var(--teal-l);   color: var(--teal-dark); }
.badge-hochzeit  { background: var(--rose-l);   color: var(--rose); } /* Rosé statt Rot — Rot ist für Überfällig/Fehler reserviert */
.badge-kita      { background: var(--green-l);  color: var(--green); }
.badge-event     { background: var(--amber-l);  color: var(--amber); }
.badge-business  { background: #e2e8f0;         color: #334155; }
.badge-portrait  { background: #fae8ff;         color: #a21caf; } /* Fuchsia — Abstand zu badge-hochzeit (Rosé) */
.badge-other     { background: var(--paper-2);  color: var(--ink-3); }

/* Beta-Badge */
.badge-beta {
  font-family: 'DM Mono', monospace;
  font-size: var(--fs-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--teal-l);
  color: var(--teal-dark);
  border: 1px solid var(--teal-l);
  padding: 1px 5px;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 5px;
}

/* ── Buttons ──────────────────────────────────────────────── */
/*
  Formhierarchie:
  btn-primary   → r-lg (8px)  — Hauptaktion: Speichern, + Neu, Erledigt
  btn-secondary → r-lg (8px)  — Nebenaktionen: Abbrechen, Drucken, CSV
  btn-ghost     → r-lg (8px)  — Tertiär: Outline, Kontextaktionen
  btn-icon-only → r (4px)     — Icon-only in Karten und Tabellen
  filter-chip   → 100px       — Filter, Subnavi-Wechsler (Alle/Dennis/Daria)
*/
.btn {
  padding: 8px 16px;
  min-height: var(--touch);
  border-radius: var(--r-lg);
  font-size: var(--fs-sm);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all .15s;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
.btn-primary {
  background: var(--teal);
  color: white;
  border-radius: var(--r-lg);
}
.btn-primary:hover { background: var(--teal-dark); }

/* Neu: Sekundär-Button — gefüllt grau, klar abgestuft von Primary */
.btn-secondary {
  background: var(--paper-2);
  color: var(--ink-2);
  border: 1px solid var(--paper-3);
  border-radius: var(--r-lg);
}
.btn-secondary:hover { background: var(--paper-3); color: var(--ink); }

.btn-ghost {
  background: var(--paper-2);
  color: var(--ink-3);
  border: 1px solid var(--paper-3);
  border-radius: var(--r-lg);
}
.btn-ghost:hover { background: var(--paper-3); color: var(--ink-2); }

.btn-danger {
  background: var(--red-l);
  color: var(--red);
  border: 1px solid #fca5a5;
  border-radius: var(--r-lg);
}
.btn-danger:hover { background: #ffd0d0; }

/* Kleinere Variante — nur wo wirklich nötig */
.btn-sm {
  padding: 5px 10px;
  min-height: 32px;
  font-size: var(--fs-xs);
}
.btn-icon {
  padding: 6px 8px;
  min-width: var(--touch);
  font-size: var(--fs-sm);
}
.btn-icon-only {
  padding: 7px 10px;
  font-size: var(--fs-base);
  line-height: 1;
  min-width: var(--touch);
  min-height: var(--touch);
  border-radius: var(--r);
}



/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--paper-3);
  border-radius: var(--r-lg);
  padding: 1.25rem;
  box-shadow: var(--sh);
  margin-bottom: 1rem;
}
.card-title {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: .75rem;
}



/* ── Empty State ──────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--ink-3);
}
.empty-state-icon {
  font-size: 2.5rem;
  margin-bottom: .75rem;
  opacity: .5;
}
.empty-state-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.1rem;
  color: var(--ink-2);
  margin-bottom: .4rem;
}
.empty-state-text {
  font-size: var(--fs-sm);
  max-width: 280px;
  margin: 0 auto .75rem;
  line-height: var(--lh-loose);
}



/* ── Filter-Bar & Chips ───────────────────────────────────── */
/*
  Zwei Nutzungsmuster:
  A) Chip-Leiste (Dashboard, Projektliste): flex + gap 6px, kein align-items nötig
  B) Suchfeld + Controls (Kunden, Locations): align-items center, gap 8px
  Beide nutzen dieselbe Basisklasse; .filter-bar-search/.filter-bar-controls
  ergänzen das Layout für Muster B.
*/
.filter-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.filter-bar-search {
  flex: 1;
  min-width: 180px;
}
.filter-bar-controls {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.filter-chip {
  padding: 4px 12px;
  border-radius: 100px;
  font-size: var(--fs-xs);
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  border: none;
  background: var(--paper-2);
  color: var(--ink-3);
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}
.filter-chip:hover { background: var(--paper-3); color: var(--ink-2); }
.filter-chip.active {
  background: var(--white);
  color: var(--ink);
  font-weight: 500;
  box-shadow: var(--sh);
}

/* Filter-Collapse (Mobile) */
.filter-collapse-btn {
  display: none;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 10px 14px;
  min-height: var(--touch);
  background: var(--white);
  border: 1px solid var(--paper-3);
  border-radius: var(--r);
  font-size: var(--fs-base);
  font-family: 'DM Sans', sans-serif;
  color: var(--ink-2);
  cursor: pointer;
  margin-bottom: .5rem;
  justify-content: space-between;
}
.filter-collapse-btn:active { background: var(--paper-2); }
.filter-collapsible { transition: max-height .25s ease, opacity .25s ease; overflow: hidden; }
.filter-collapsible.collapsed { max-height: 0 !important; opacity: 0; }

/* filter-bar Mobile — Suchfeld + Controls untereinander */
@media (max-width: 768px) {
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .filter-bar-search {
    width: 100% !important;
    min-width: 0 !important;
  }
  .filter-bar-controls {
    flex-shrink: 1;
    flex-wrap: wrap;
    width: 100%;
  }
  .filter-bar-controls select,
  .filter-bar-controls .btn {
    flex: 1;
    min-width: 0;
  }
  .filter-bar-controls .btn-icon {
    flex: 0 0 auto;
    width: 38px;
    padding-left: 0;
    padding-right: 0;
  }
  /* Kunden-Sort: horizontal scrollen statt umbrechen */
  .csort-controls {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
  }
  .csort-controls::-webkit-scrollbar { display: none; }
  .csort-controls .btn {
    flex: 0 0 auto !important;
    min-width: 0;
    white-space: nowrap;
  }
}



/* ── Formulare / Felder ───────────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field label {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  font-weight: 400;
}
.field input,
.field select,
.field textarea {
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--paper-3);
  border-radius: var(--r);
  font-size: 16px;          /* 16px → kein iOS-Zoom */
  color: var(--ink);
  background: var(--white);
  font-family: 'DM Sans', sans-serif;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  min-height: var(--touch);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(4,159,130,.1);
}
.field input.plz-autofilled {
  border-color: var(--teal);
  background: var(--teal-ll);
  transition: background .4s, border-color .4s;
}
.plz-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--paper-3);
  border-radius: var(--r);
  box-shadow: var(--sh-md);
  z-index: 9999;
  overflow: hidden;
  max-height: 220px;
  overflow-y: auto;
}
.plz-dropdown-item {
  padding: 8px 12px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.plz-dropdown-item:hover,
.plz-dropdown-item.plz-active {
  background: var(--teal-ll);
  color: var(--teal-dark);
}
.plz-dropdown-item + .plz-dropdown-item {
  border-top: 1px solid var(--paper-2);
}
.plz-dropdown-plz {
  font-family: 'DM Mono', monospace;
  font-size: var(--fs-xs);
  color: var(--ink-4);
  white-space: nowrap;
}
.plz-dropdown-item:hover .plz-dropdown-plz,
.plz-dropdown-item.plz-active .plz-dropdown-plz {
  color: var(--teal);
}
[data-theme="dark"] .plz-dropdown {
  border-color: var(--paper-3);
}
.field textarea {
  resize: vertical;
  min-height: 80px;
  line-height: var(--lh-normal);
}
.field select {
  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='%23676767' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.field-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .75rem;
}



/* ── Loading Spinner ──────────────────────────────────────── */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--paper-3);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }



/* ── Modals ───────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal-overlay.open { display: flex; }

.modal {
  background: var(--white);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 560px;
  box-shadow: var(--sh-lg);
  padding: 1.5rem;
  position: relative;
  margin: auto;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.modal-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--ink);
}
.modal-close {
  background: none;
  border: none;
  font-size: var(--fs-lg);
  cursor: pointer;
  color: var(--ink-3);
  padding: 4px 8px;
  border-radius: var(--r);
  line-height: 1;
  transition: all .15s;
  min-width: var(--touch);
  min-height: var(--touch);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-close:hover { background: var(--paper); color: var(--ink); }
.modal-section {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--ink);
  line-height: var(--lh-tight);
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 1.25rem 0 .75rem;
  padding-bottom: .5rem;
  border-bottom: 1.5px solid var(--paper-4);
}
.modal-section i {
  color: var(--ink-3);
  font-size: var(--fs-sm);
  flex-shrink: 0;
}
.modal-grid { display: grid; gap: .75rem; }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--paper-3);
}

/* Zwei-Zeilen-Layout: destruktive Aktion oben allein, Aktionen unten */
.modal-actions--split {
  flex-direction: column;
  gap: 0;
}
.modal-actions--split .modal-actions-danger {
  display: flex;
  padding-bottom: .75rem;
  margin-bottom: .75rem;
  border-bottom: 1px solid var(--paper-2);
}
.modal-actions--split .modal-actions-main {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
/* Auf Mobile: Haupt-Buttons gleichmäßig verteilt */
@media (max-width: 768px) {
  .modal-actions--split .modal-actions-main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .modal-actions--split .modal-actions-main .btn {
    justify-content: center;
    font-size: var(--fs-sm);
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* Assistent-Modal (Sheet-Style, von unten) */
.modal-sheet {
  background: var(--card);
  width: 100%;
  max-width: 700px;
  max-height: 92vh;
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-lg);
}
.modal-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 900;
  display: none;
  align-items: flex-end;
  backdrop-filter: blur(2px);
}
.modal-sheet-overlay.open { display: flex; }

.modal-hdr {
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-shrink: 0;
}
.modal-hdr-title {
  font-family: 'DM Serif Display', serif;
  font-size: var(--fs-lg);
  line-height: 1.2;
}
.modal-hdr-sub {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin-top: 3px;
}
.modal-x {
  background: var(--bg);
  border: none;
  border-radius: 50%;
  width: var(--touch);
  height: var(--touch);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-base);
  color: var(--ink-3);
  flex-shrink: 0;
  margin-left: 12px;
  transition: background .15s;
}
.modal-x:hover { background: var(--border); }

/* Anker-Nav im Modal */
.modal-nav {
  display: flex;
  gap: 4px;
  padding: 10px 22px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.modal-nav::-webkit-scrollbar { display: none; }
.mnav-btn {
  padding: 6px 12px;
  min-height: 36px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: none;
  font-size: var(--fs-xs);
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  color: var(--ink-3);
  transition: all .15s;
}
.mnav-btn:hover { border-color: var(--teal); color: var(--teal); }
.mnav-btn.active { background: var(--teal); border-color: var(--teal); color: #fff; }

.modal-body {
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  flex: 1;
}
.msec { margin-bottom: 1.5rem; }
.msec:last-child { margin-bottom: 0; }
.msec-title {
  font-size: var(--fs-label);
  font-family: 'DM Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.msec-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Scroll-Fix */
body.modal-open { overflow: hidden; }



/* ── Section Label ────────────────────────────────────────── */
.sec {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  margin-bottom: .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--paper-3);
  display: flex;
  align-items: center;
  gap: 7px;
}
/* Container-Header: etwas prominenter */
.sec.sec-container-header {
  color: var(--ink);
  font-size: var(--fs-base);
  border-bottom-width: 1.5px;
  border-bottom-color: var(--paper-3);
}
/* Innere Sektionen: eingerückt, dezenter */
.sec.sec-inner {
  margin-left: .75rem;
  padding-left: .5rem;
  border-bottom: none;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  margin-top: 1rem !important;
  padding-top: .75rem;
  border-top: 1px solid var(--paper-3);
}
#sec-body-inbox .sec-collapsible {
  margin-left: .75rem;
  padding-bottom: .25rem;
}
.sec-title {
  font-size: var(--fs-label);
  font-family: 'DM Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sec-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}



/* ── Toasts ───────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--teal);
  color: #ffffff;
  padding: .6rem 1.125rem;
  border-radius: var(--r-lg);
  font-size: var(--fs-sm);
  box-shadow: var(--sh-lg);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  animation: toastIn .2s ease;
  white-space: nowrap;
}
.toast.toast-success { background: var(--teal); }
.toast.toast-error   { background: #dc2626; }
.toast.toast-warn    { background: #d97706; }
.toast.toast-success i { color: rgba(255,255,255,.85); }
.toast.toast-error   i { color: rgba(255,255,255,.85); }
.toast.toast-warn    i { color: rgba(255,255,255,.85); }

/* Dark Mode: --teal wird dort heller statt dunkler (Mint-Problem) —
   Erfolgs-Toast bekommt denselben abgedunkelten Ton wie die Speicher-Pill */
:root[data-theme="dark"] .toast.toast-success { background: var(--teal-m); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .toast.toast-success { background: var(--teal-m); }
}
@keyframes toastIn {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}



/* ── Login ────────────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  background-image:
    radial-gradient(circle at 20% 50%, rgba(4,159,130,.08) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(4,159,130,.05) 0%, transparent 50%);
  padding: 1.5rem;
}
.login-card {
  background: var(--white);
  border-radius: var(--r-xl);
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--sh-lg);
}
.login-logo {
  font-family: 'DM Serif Display', serif;
  font-size: 1.5rem;
  color: var(--ink);
  margin-bottom: .2rem;
  text-align: center;
}
.login-sub {
  font-family: 'DM Mono', monospace;
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  margin-bottom: 2rem;
}
.login-error {
  background: var(--red-l);
  color: var(--red);
  border-radius: var(--r);
  padding: .75rem 1rem;
  font-size: var(--fs-sm);
  margin-bottom: 1rem;
  display: none;
}
.login-error.show { display: block; }
.login-card .field { margin-bottom: .75rem; }
.login-card .field input {
  width: 100%;
  padding: 9px 12px;
  font-size: 14px;
}
.login-card .btn-primary {
  width: 100%;
  justify-content: center;
  padding: 10px;
  font-size: 14px;
  margin-top: .5rem;
}
.login-footer {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 11px;
  color: var(--ink-4);
  font-family: 'DM Mono', monospace;
  letter-spacing: .04em;
}
.login-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.25rem 0;
  color: var(--ink-4);
  font-size: 11px;
  font-family: 'DM Mono', monospace;
  letter-spacing: .05em;
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--paper-3);
}
.btn-loading {
  opacity: .7;
  pointer-events: none;
}
.btn-loading .spinner {
  width: 14px;
  height: 14px;
  border-width: 2px;
  border-color: rgba(255,255,255,.3);
  border-top-color: white;
}



/* ── 12. Dark Mode ────────────────────────────────────────────
   Aktivierung:
   A) Automatisch via System:  @media (prefers-color-scheme: dark)
   B) Manuell via Toggle:      html[data-theme="dark"]
   Manuelle Überschreibung hat Vorrang über System-Setting.
   ─────────────────────────────────────────────────────────── */

/* Dark-Token-Map */
:root[data-theme="dark"],
:root[data-theme="dark"] body {
  --teal:       #2dd4a8;
  --teal-dark:  #1fbf96;
  --teal-l:     rgba(45,212,168,.2);
  --teal-ll:    rgba(45,212,168,.08);
  --teal-m:     #1a8f74;

  --ink:        #f0f0f0;
  --ink-2:      #d4d4d4;
  --ink-3:      #a0a0a0;
  --ink-4:      #6b6b6b;

  --paper:      #161616;
  --paper-2:    #1e1e1e;
  --paper-3:    #2a2a2a;
  --paper-4:    #363636;
  --white:      #1e1e1e;

  --amber:      #fbbf24;
  --amber-l:    rgba(251,191,36,.15);
  --amber-ll:   rgba(251,191,36,.07);
  --red:        #f87171;
  --red-l:      rgba(248,113,113,.15);
  --red-ll:     rgba(248,113,113,.07);
  --blue:       #60a5fa;
  --blue-l:     rgba(96,165,250,.15);
  --blue-ll:    rgba(96,165,250,.07);
  --green:      #4ade80;
  --green-l:    rgba(74,222,128,.15);
  --green-ll:   rgba(74,222,128,.07);
  --purple:     #a78bfa;
  --purple-l:   rgba(167,139,250,.15);
  --purple-ll:  rgba(167,139,250,.07);
  --rose:       #fda4af;
  --rose-l:     rgba(253,164,175,.15);
  --rose-ll:    rgba(253,164,175,.07);
  --indigo:     #818cf8;
  --indigo-l:   #a5b4fc;

  --bg:         var(--paper);
  --card:       var(--white);
  --border:     var(--paper-3);

  --sh:    0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --sh-md: 0 4px 12px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.2);
  --sh-lg: 0 8px 24px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.25);
}

/* System Dark Mode — nur wenn kein manuelles Override gesetzt */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --teal:       #2dd4a8;
    --teal-dark:  #1fbf96;
    --teal-l:     rgba(45,212,168,.2);
    --teal-ll:    rgba(45,212,168,.08);
    --teal-m:     #1a8f74;

    --ink:        #f0f0f0;
    --ink-2:      #d4d4d4;
    --ink-3:      #a0a0a0;
    --ink-4:      #6b6b6b;

    --paper:      #161616;
    --paper-2:    #1e1e1e;
    --paper-3:    #2a2a2a;
    --paper-4:    #363636;
    --white:      #1e1e1e;

    --amber:      #fbbf24;
    --amber-l:    rgba(251,191,36,.15);
    --amber-ll:   rgba(251,191,36,.07);
    --red:        #f87171;
    --red-l:      rgba(248,113,113,.15);
    --red-ll:     rgba(248,113,113,.07);
    --blue:       #60a5fa;
    --blue-l:     rgba(96,165,250,.15);
    --blue-ll:    rgba(96,165,250,.07);
    --green:      #4ade80;
    --green-l:    rgba(74,222,128,.15);
    --green-ll:   rgba(74,222,128,.07);
    --purple:     #a78bfa;
    --purple-l:   rgba(167,139,250,.15);
    --purple-ll:  rgba(167,139,250,.07);
    --rose:       #fda4af;
    --rose-l:     rgba(253,164,175,.15);
    --rose-ll:    rgba(253,164,175,.07);
    --indigo:     #818cf8;
    --indigo-l:   #a5b4fc;

    --bg:         var(--paper);
    --card:       var(--white);
    --border:     var(--paper-3);

    --sh:    0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
    --sh-md: 0 4px 12px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.2);
    --sh-lg: 0 8px 24px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.25);
  }
}

/* Input / Select Dark-Mode-Korrekturen */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--paper-3);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) input,
  :root:not([data-theme="light"]) select,
  :root:not([data-theme="light"]) textarea {
    background: var(--paper-2);
    color: var(--ink);
    border-color: var(--paper-3);
    color-scheme: dark;
  }
}

/* Topbar im Dark Mode: schwarz wie die Sidebar, weisse Schrift */
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .page-header {
  background: #111111;
  border-bottom-color: #2a2a2a;
}
:root[data-theme="dark"] .page-title,
:root[data-theme="dark"] .page-header .page-title {
  color: #f0f0f0;
}
:root[data-theme="dark"] .topbar-search .search-input {
  background: #1e1e1e;
  border-color: #2a2a2a;
  color: #f0f0f0;
}
:root[data-theme="dark"] .filter-bar-search {
  background: var(--paper-2);
  border-color: var(--paper-3);
  color: var(--ink);
}
:root[data-theme="dark"] .filter-bar-search::placeholder {
  color: rgba(255,255,255,.35);
}
:root[data-theme="dark"] #global-search-results {
  background: #1e1e1e !important;
  border-color: #2a2a2a !important;
  color: #f0f0f0;
}
:root[data-theme="dark"] #global-search-results [data-sr-idx] {
  border-bottom-color: #2a2a2a !important;
  color: #f0f0f0;
}
:root[data-theme="dark"] #global-search-results [data-sr-idx]:hover,
:root[data-theme="dark"] #global-search-results [data-sr-idx][style*="teal-ll"] {
  background: rgba(4,159,130,.15) !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #global-search-results {
    background: #1e1e1e !important;
    border-color: #2a2a2a !important;
  }
  :root:not([data-theme="light"]) #global-search-results [data-sr-idx] {
    border-bottom-color: #2a2a2a !important;
    color: #f0f0f0;
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .topbar,
  :root:not([data-theme="light"]) .page-header {
    background: #111111;
    border-bottom-color: #2a2a2a;
  }
  :root:not([data-theme="light"]) .page-title {
    color: #f0f0f0;
  }
  :root:not([data-theme="light"]) .topbar-search .search-input {
    background: #1e1e1e;
    border-color: #2a2a2a;
    color: #f0f0f0;
  }
  :root:not([data-theme="light"]) .filter-bar-search {
    background: var(--paper-2);
    border-color: var(--paper-3);
    color: var(--ink);
  }
  :root:not([data-theme="light"]) .filter-bar-search::placeholder {
    color: rgba(255,255,255,.35);
  }
}

/* ── Mobile + Dark Mode Kombination ─────────────────────────
   iOS nutzt system dark mode automatisch — muss separat
   abgedeckt werden da Mobile-Styles in eigenem @media stehen
   ─────────────────────────────────────────────────────────── */

/* Theme + Schriftgröße Toggle in Sidebar */
.sidebar-prefs {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: .375rem .875rem .375rem .75rem;
  margin-top: .125rem;
  border-top: 1px solid var(--paper-3);
}
.sidebar-prefs-group {
  display: flex;
  align-items: center;
  gap: 2px;
}
.sidebar-prefs-divider { display: none; }
.pref-btn {
  height: 24px;
  min-width: 26px;
  padding: 0 5px;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  background: transparent;
  color: rgba(255,255,255,.45);
  font-size: var(--fs-label);
  font-family: 'DM Mono', monospace;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, border-color .15s;
  flex-shrink: 0;
  line-height: 1;
  letter-spacing: .02em;
}
.pref-btn:hover { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.2); }
.pref-btn.active {
  color: var(--teal);
  border-color: var(--teal);
  background: transparent;
}

/* Trennlinie zwischen den zwei Gruppen */
.sidebar-prefs-divider {
  width: 1px;
  height: 14px;
  background: var(--paper-3);
  flex-shrink: 0;
}

/* Collapsed Sidebar: Prefs-Zeile ausblenden */
.sidebar.collapsed .sidebar-prefs { display: none; }




/* ── 10. Responsive — Mobile (≤768px) ─────────────────────── */
@media (max-width: 768px) {
  :root {
    --fs-label: 11px;
    --fs-xs:    13px;
    --fs-sm:    15px;
    --fs-base:  16px;
    --fs-md:    18px;
    --fs-lg:    22px;
    --fs-xl:    24px;
  }

  .pg-header  { padding: .75rem 1rem; }
  .pg-content { padding: .875rem; }

  .field-row,
  .field-row-3 { grid-template-columns: 1fr; }

  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal {
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 1.25rem 1rem;
    max-height: calc(100vh - 2rem);
    overflow-x: hidden;
  }

  .toast-container { bottom: 1rem; left: 50%; transform: translateX(-50%); right: auto; }
  .toast { white-space: normal; max-width: calc(100vw - 2rem); }
}


/* ── 11. Galerie (Posing Guide) ────────────────────────────── */

.filter-select {
  padding: 8px 30px 8px 12px;
  min-height: var(--touch);
  border: 1px solid var(--paper-3);
  border-radius: var(--r);
  font-size: var(--fs-sm);
  font-family: 'DM Sans', sans-serif;
  color: var(--ink-2);
  background: var(--white);
  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='%23676767' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}

.pg-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.pg-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.pg-card {
  background: var(--white);
  border: 1px solid var(--paper-3);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh);
  cursor: pointer;
  transition: box-shadow .15s, transform .15s;
}
.pg-card:hover { box-shadow: var(--sh-md); transform: translateY(-1px); }

.pg-card-img-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--paper-2);
}
.pg-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pg-card-fav {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-3);
  font-size: 15px;
  transition: transform .1s;
}
.pg-card-fav:hover { transform: scale(1.1); }
.pg-card-fav.active { color: var(--rose); }

.pg-card-body {
  padding: .5rem .625rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pg-card-anlass {
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.pg-upload-preview {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: var(--r-lg);
  background: var(--paper-2);
  margin-bottom: .75rem;
}

.pg-detail-img {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: var(--r-lg);
  background: var(--paper-2);
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .pg-gallery { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
}