/* DGFE CRM-Tool — Brand-Basis.
 * Gold #B8975F, Beige #F5F1E8, Inter.
 * Tailwind-CDN macht das Layout; hier nur Font-Face + kleine Globals.
 */

/* Fonts werden via <link> in _base.html geladen (Fraunces + Hanken Grotesk + JetBrains Mono).
 * Self-Host (woff2 -> /static/fonts/ + @font-face) ist als TODO offen. */

/* Bestands-Tokens — bleiben als Aliase erhalten; werden im DESIGN-TOKENS-Block
 * unten kanonisch (auf die Sand/Gold-Skala) ueberschrieben. */
:root {
  --dgfe-gold: #B8975F;
  --dgfe-gold-dark: #a3854f;
  --dgfe-beige: #F5F1E8;
}

/* font-inter-Alias erbt jetzt die neue Body-Font (Hanken Grotesk via --font-sans).
 * Klassen-Selektor schlaegt den body-Element-Selektor — daher hier explizit angleichen,
 * damit bestehende .font-inter-Templates nicht weiter Inter erzwingen. */
.font-inter,
body {
  font-family: var(--font-sans, 'Hanken Grotesk', -apple-system, system-ui, sans-serif);
}

/* ============================================================================
   DGFE DESIGN-SYSTEM — Foundation (aus docs/STYLE.md, rein additiv angehaengt)
   §2 Tokens · §3 Typo-Basis · §4.0 Signatur/Fokus · §4.1–4.13 Komponenten · §6.4 Transitions
   ============================================================================ */

/* ============================================================================
   §2.1 DESIGN TOKENS  (Single Source of Truth)
   Default: dark-text-on-light. AA-geprueft (Body >= 7:1, UI-Text >= 4.5:1).
   ============================================================================ */
:root {
  /* -- NEUTRAL — warm getoent (Hue ~40), harmoniert mit Beige #F5F1E8 -- */
  --dgfe-n-0:   #FFFFFF;   /* reine Karten-Flaeche                            */
  --dgfe-n-25:  #FBFAF7;   /* App-Canvas (ruhiger als reines Beige)          */
  --dgfe-n-50:  #F5F1E8;   /* DGFE-Beige — Brand-Surface / Table-Header      */
  --dgfe-n-100: #ECE7DC;   /* Hover-Surface / subtile Zonen                  */
  --dgfe-n-200: #DED7C7;   /* Border default (warm statt kalt-grau)          */
  --dgfe-n-300: #C7BDA8;   /* Border strong / Dividers auf Beige             */
  --dgfe-n-400: #A99E86;   /* Disabled-Text / Icons dezent                   */
  --dgfe-n-500: #847A66;   /* Muted-Text / Captions      (AA auf n-0)        */
  --dgfe-n-600: #5E564A;   /* Secondary-Text                                 */
  --dgfe-n-700: #443E35;   /* Body-Text                                      */
  --dgfe-n-800: #2B2722;   /* Headings                                       */
  --dgfe-n-900: #1A1714;   /* Header-BG (warmes Schwarz, nicht #000)         */
  --dgfe-n-950: #100E0C;   /* tiefste Flaeche / Overlays                     */

  /* -- PRIMARY — DGFE-Gold, verfeinert + Tints/Shades -- */
  --dgfe-gold-50:  #FBF6EC;
  --dgfe-gold-100: #F4E9D2;
  --dgfe-gold-200: #E8D3A8;
  --dgfe-gold-300: #D7B97D;
  --dgfe-gold-400: #C7A468;
  --dgfe-gold-500: #B8975F;   /* BRAND-Signatur (= Bestands-Gold)            */
  --dgfe-gold-600: #A3854F;   /* Hover (= Bestands-golddark)                 */
  --dgfe-gold-700: #836A3E;   /* Active / Gold-Text auf hell (AA 4.7:1)      */
  --dgfe-gold-800: #5F4D2D;   /* Gold-Text klein, max. Kontrast             */
  --dgfe-gold-soft:#EFE7D6;   /* Gold-Tint-Flaeche (aktive Akzente, dezent)  */

  /* -- SEMANTIK — gedaempft-serioes, keine Ampel-Grellfarben -- */
  --dgfe-success-50:  #EBF3EC;  --dgfe-success-500: #3E7C4F;  --dgfe-success-700: #2C5C39;
  --dgfe-warning-50:  #FBF1DE;  --dgfe-warning-500: #B5832E;  --dgfe-warning-700: #845E1E;
  --dgfe-danger-50:   #F8ECEA;  --dgfe-danger-500:  #B23A30;  --dgfe-danger-700:  #832A23;
  --dgfe-info-50:     #E9EFF4;  --dgfe-info-500:    #3D6589;  --dgfe-info-700:    #2A4A66;

  /* -- STATUS-PIPELINE — gut unterscheidbar, AA, kein Neon -- */
  --st-neu-bg:        #E7EDF3;  --st-neu-fg:        #34516E;  --st-neu-dot:        #4C7195;
  --st-kontakt-bg:    #DEEDED;  --st-kontakt-fg:    #2C5C5C;  --st-kontakt-dot:    #3E8585;
  --st-angebot-bg:    #F4E9D2;  --st-angebot-fg:    #836A3E;  --st-angebot-dot:    #B8975F;
  --st-gewonnen-bg:   #E1EDE2;  --st-gewonnen-fg:   #2C5C39;  --st-gewonnen-dot:   #3E7C4F;
  --st-verloren-bg:   #F1E2E0;  --st-verloren-fg:   #832A23;  --st-verloren-dot:   #B23A30;
  --st-archiviert-bg: #ECE7DC;  --st-archiviert-fg: #5E564A;  --st-archiviert-dot: #A99E86;

  /* -- TYPO -- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --fs-display: 1.875rem;  --lh-display: 2.25rem;  --ls-display: -0.02em;  /* H1 30/36 */
  --fs-h2:      1.25rem;   --lh-h2:      1.75rem;  --ls-h2:      -0.01em;  /* 20/28    */
  --fs-h3:      1.0625rem; --lh-h3:      1.5rem;   --ls-h3:      -0.005em; /* 17/24    */
  --fs-body:    0.9375rem; --lh-body:    1.5rem;                          /* 15/24    */
  --fs-sm:      0.8125rem; --lh-sm:      1.25rem;                         /* 13/20    */
  --fs-label:   0.6875rem; --lh-label:   1rem;     --ls-label:   0.06em;  /* 11 UPPER */

  /* -- SPACING-SCALE (4/8-basiert) -- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* -- RADIUS -- */
  --r-xs: 4px;   /* badge/pill innen, checkbox      */
  --r-sm: 6px;   /* button, input, select           */
  --r-md: 8px;   /* segmented control, menu          */
  --r-lg: 12px;  /* card, table-wrapper, panel       */
  --r-xl: 16px;  /* modal                           */
  --r-full: 9999px;
  --radius-card: var(--r-lg);
  --radius-pill: var(--r-full);

  /* -- SHADOW-SKALA (dezent, mehrstufig, neutral-warm) -- */
  --sh-xs: 0 1px 1px rgba(26,23,20,.04);
  --sh-sm: 0 1px 2px rgba(26,23,20,.06), 0 1px 1px rgba(26,23,20,.04);
  --sh-md: 0 2px 6px rgba(26,23,20,.07), 0 1px 2px rgba(26,23,20,.05);
  --sh-lg: 0 8px 20px rgba(26,23,20,.10), 0 2px 6px rgba(26,23,20,.06);
  --sh-xl: 0 18px 48px rgba(26,23,20,.18), 0 6px 16px rgba(26,23,20,.10);
  --sh-focus: 0 0 0 3px rgba(184,151,95,.40);   /* Gold-Focus-Ring */
  --shadow-card: var(--sh-sm);
  --shadow-pop:  var(--sh-lg);

  /* -- SIGNATUR — Gold-Akzentkante + Focus -- */
  --dgfe-rule:        2px;
  --dgfe-ring-offset: 0 0 0 2px var(--dgfe-n-0), 0 0 0 4px var(--dgfe-gold-500);

  /* -- Z-INDEX-LEITER -- */
  --z-sticky: 20; --z-bulkbar: 30; --z-dropdown: 40;
  --z-overlay: 60; --z-modal: 70; --z-toast: 90;

  /* -- LAYOUT-BREITEN -- */
  --container-app:  1280px;   /* datendichte Seiten (Tabelle/Board/Dashboard) */
  --container-form: 768px;    /* Lese-/Editier-Formulare zentriert            */

  /* -- INTERAKTIONS-TIMING -- */
  --dgfe-t-fast: 110ms;
  --dgfe-t-base: 150ms;
  --dgfe-ease:   cubic-bezier(.2,.6,.2,1);      /* ruhiges ease-out */
  --dgfe-flash:  rgba(184,151,95,.28);          /* Gold, transluzent */

  /* -- ALIASE fuer Komponenten-CSS (EINE Wahrheit, keine Parallelpalette) -- */
  --dgfe-gold:      var(--dgfe-gold-500);
  --dgfe-gold-dark: var(--dgfe-gold-600);
  --dgfe-beige:      #F5F1E8;
  --dgfe-beige-line: #E7DFCD;
  --c-ink:        var(--dgfe-n-800);   /* primaerer Text / Werte  */
  --c-ink-soft:   var(--dgfe-n-700);   /* sekundaerer Text / Td   */
  --c-muted:      var(--dgfe-n-500);   /* Labels / Captions      */
  --c-faint:      var(--dgfe-n-400);   /* Placeholder / disabled */
  --c-line:       var(--dgfe-n-200);   /* Standard-Border        */
  --c-line-soft:  #F1EFEA;             /* Zebra / Divider        */
  --c-surface:    var(--dgfe-n-0);
  --c-surface-2:  var(--dgfe-n-25);
  --c-canvas:     var(--dgfe-n-50);
  --dgfe-focus:   var(--dgfe-gold-500);
  --dgfe-toast-ok:  #3E7C4F;
  --dgfe-toast-err: #B23A30;
}

/* ============================================================================
   §3.2 TYPO-BASIS  (Element-Selektoren — greifen sofort global)
   ============================================================================ */
body { font-family: var(--font-sans); color: var(--dgfe-n-700);
       background: var(--dgfe-n-25);
       font-feature-settings:"ss01","cv01"; -webkit-font-smoothing:antialiased; }
h1, .dgfe-h1 { font-family:var(--font-display); font-weight:600;
       font-size:var(--fs-display); line-height:var(--lh-display);
       letter-spacing:var(--ls-display); color:var(--dgfe-n-900); font-optical-sizing:auto; }
h2, .dgfe-h2 { font-family:var(--font-sans); font-weight:600;
       font-size:var(--fs-h2); line-height:var(--lh-h2);
       letter-spacing:var(--ls-h2); color:var(--dgfe-n-800); }
h3, .dgfe-h3 { font-family:var(--font-sans); font-weight:600;
       font-size:var(--fs-h3); line-height:var(--lh-h3);
       letter-spacing:var(--ls-h3); color:var(--dgfe-n-800); }
.dgfe-label { font-weight:600; font-size:var(--fs-label); line-height:var(--lh-label);
       letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--dgfe-n-500); }

/* Tabellarische Ziffern fuer ALLE Zahlen/Geld/Daten */
.tabular-nums, .dgfe-num, table td, .dgfe-money {
  font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1,"lnum" 1;
}
.dgfe-money { font-weight:600; color:var(--dgfe-n-800); }

/* ============================================================================
   §4.0 SIGNATUR-DETAIL — Gold-Akzentkante & Fokus
   ============================================================================ */
.dgfe-rule-left { position:relative; }
.dgfe-rule-left::before { content:""; position:absolute; left:0; top:.15em; bottom:.15em;
  width:var(--dgfe-rule); border-radius:2px;
  background:linear-gradient(180deg, var(--dgfe-gold-400), var(--dgfe-gold-600)); }

/* Globaler sichtbarer Gold-Fokus-Ring (AA, Tastatur) */
:where(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline:none; box-shadow:var(--sh-focus); border-radius:var(--r-sm);
}

/* ============================================================================
   §4.1 BUTTONS — .btn + Variante + Size
   ============================================================================ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font-weight:600; font-size:.875rem; line-height:1.25rem; padding:.5rem .875rem;
  border-radius:var(--r-sm); border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s; user-select:none; }
.btn:disabled,.btn[aria-disabled="true"]{ opacity:.5; pointer-events:none; }
.btn-primary{ background:var(--dgfe-gold); color:#fff; box-shadow:var(--sh-xs); }
.btn-primary:hover{ background:var(--dgfe-gold-dark); }
.btn-primary:active{ background:var(--dgfe-gold-dark); box-shadow:none; transform:translateY(.5px); }
.btn-secondary{ background:var(--c-surface); color:var(--c-ink-soft); border-color:var(--c-line); box-shadow:var(--sh-xs); }
.btn-secondary:hover{ background:var(--c-surface-2); border-color:var(--c-faint); }
.btn-secondary:active{ background:var(--dgfe-beige); }
.btn-dark{ background:var(--c-ink); color:#fff; }
.btn-dark:hover{ background:var(--dgfe-n-900); }
.btn-ghost{ background:transparent; color:var(--c-ink-soft); }
.btn-ghost:hover{ background:var(--c-line-soft); }
.btn-danger{ background:var(--dgfe-danger-500); color:#fff; }
.btn-danger:hover{ background:var(--dgfe-danger-700); }
.btn-danger-ghost{ background:transparent; color:var(--dgfe-danger-500); }
.btn-danger-ghost:hover{ background:var(--dgfe-danger-50); }
.btn-sm{ padding:.3125rem .625rem; font-size:.8125rem; gap:var(--sp-1); }
.btn-lg{ padding:.625rem 1.125rem; font-size:.9375rem; }
.btn-icon{ padding:.5rem; }
.btn-block{ width:100%; }

/* ============================================================================
   §4.2 CARDS — .card + .kpi / .card-link / .datalist
   ============================================================================ */
.card{ background:var(--c-surface); border:1px solid var(--c-line);
  border-radius:var(--r-lg); box-shadow:var(--sh-sm); }
.card--accent{ border-top:var(--dgfe-rule) solid var(--dgfe-gold-500); }
.card-pad{ padding:var(--sp-5); }
.card-link{ transition:border-color .15s,box-shadow .15s; }
.card-link:hover{ border-color:var(--dgfe-gold); box-shadow:var(--sh-md); }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
  padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--c-line-soft); }
.card-title{ font-size:.8125rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; color:var(--c-muted); }
.card-body{ padding:var(--sp-5); }
.kpi{ display:flex; flex-direction:column; padding:var(--sp-5); }
.kpi-label{ font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:var(--c-muted); }
.kpi-value{ font-size:1.875rem; font-weight:600; margin-top:var(--sp-2);
  font-variant-numeric:tabular-nums; color:var(--c-ink); }
.kpi-hint{ font-size:.75rem; color:var(--dgfe-gold-700); margin-top:var(--sp-1); }
.datalist{ display:grid; grid-template-columns:max-content 1fr; gap:.5rem 1rem; font-size:.875rem; }
.datalist dt{ color:var(--c-muted); }
.datalist dd{ color:var(--c-ink); font-weight:500; font-variant-numeric:tabular-nums; }

/* ============================================================================
   §4.3 DATEN-TABELLE — .table-wrap / .table (+ Modifier)
   ============================================================================ */
.table-wrap{ background:var(--c-surface); border:1px solid var(--c-line);
  border-radius:var(--r-lg); box-shadow:var(--sh-sm); overflow:hidden; }
.table-scroll{ overflow:auto; }
.table{ width:100%; font-size:.875rem; border-collapse:separate; border-spacing:0; }
.table thead th{ position:sticky; top:0; z-index:1; background:var(--dgfe-beige); color:var(--c-muted);
  font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  text-align:left; padding:.625rem 1rem; white-space:nowrap; border-bottom:1px solid var(--dgfe-beige-line); }
.table tbody td{ padding:.625rem 1rem; color:var(--c-ink-soft);
  border-bottom:1px solid var(--c-line-soft); vertical-align:middle; }
.table tbody tr:last-child td{ border-bottom:0; }
.table tbody tr{ transition:background-color .12s; }
.table-hover tbody tr:hover{ background:var(--dgfe-beige); }
.table-zebra tbody tr:nth-child(even){ background:var(--c-surface-2); }
.table-zebra.table-hover tbody tr:hover{ background:var(--dgfe-beige); }
.table-compact thead th{ padding:.5rem .75rem; }
.table-compact tbody td{ padding:.4375rem .75rem; }
.td-num{ text-align:right; font-variant-numeric:tabular-nums; }
.td-right{ text-align:right; }
.td-strong{ color:var(--c-ink); font-weight:600; }
.col-w-8{ width:2rem; }

/* ============================================================================
   §4.4 STATUS-BADGES / PILLS — .st-* (Kanon) + .badge-*
   ============================================================================ */
.st{ display:inline-flex; align-items:center; gap:.375rem; padding:.125rem .625rem;
  border-radius:var(--r-full); font-size:var(--fs-label); font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; }
.st::before{ content:""; width:.4rem; height:.4rem; border-radius:9999px; }
.st-neu{ background:var(--st-neu-bg); color:var(--st-neu-fg); }                .st-neu::before{ background:var(--st-neu-dot); }
.st-kontakt{ background:var(--st-kontakt-bg); color:var(--st-kontakt-fg); }    .st-kontakt::before{ background:var(--st-kontakt-dot); }
.st-angebot{ background:var(--st-angebot-bg); color:var(--st-angebot-fg); }    .st-angebot::before{ background:var(--st-angebot-dot); }
.st-gewonnen{ background:var(--st-gewonnen-bg); color:var(--st-gewonnen-fg); } .st-gewonnen::before{ background:var(--st-gewonnen-dot); }
.st-verloren{ background:var(--st-verloren-bg); color:var(--st-verloren-fg); } .st-verloren::before{ background:var(--st-verloren-dot); }
.st-archiviert{ background:var(--st-archiviert-bg); color:var(--st-archiviert-fg); } .st-archiviert::before{ background:var(--st-archiviert-dot); }

/* Generische Badges / Tags (Nicht-Status-Marker) */
.badge{ display:inline-flex; align-items:center; gap:.375rem; padding:.125rem .625rem;
  border-radius:var(--r-full); font-size:.75rem; font-weight:600; white-space:nowrap; }
.badge-dot::before{ content:""; width:.375rem; height:.375rem; border-radius:var(--r-full);
  background:currentColor; opacity:.7; flex:none; }
.badge-num{ display:inline-flex; align-items:center; justify-content:center; min-width:1.25rem;
  height:1.25rem; padding:0 .375rem; border-radius:var(--r-full); font-size:.6875rem;
  font-weight:700; font-variant-numeric:tabular-nums; background:var(--dgfe-danger-50); color:var(--dgfe-danger-700); }
.badge-neutral{ background:var(--dgfe-n-100); color:var(--dgfe-n-600); }
.badge-gold{ background:var(--dgfe-gold-soft); color:var(--dgfe-gold-700); }
.badge-danger{ background:var(--dgfe-danger-50); color:var(--dgfe-danger-700); }
.badge-warn{ background:var(--dgfe-warning-50); color:var(--dgfe-warning-700); }
.badge-info{ background:var(--dgfe-info-50); color:var(--dgfe-info-700); }
.badge-funnel{ background:var(--dgfe-info-50); color:var(--dgfe-info-700); }
.tag{ display:inline-flex; align-items:center; gap:.25rem; padding:.125rem .5rem;
  border-radius:var(--r-xs); font-size:.75rem; font-weight:500;
  background:var(--c-line-soft); color:var(--c-ink-soft); }

/* ============================================================================
   §4.5 INPUTS / FORMS — .field .label .input .select .textarea .hint
   ============================================================================ */
.field{ display:block; }
.label{ display:block; font-size:.875rem; font-weight:500; color:var(--c-ink-soft); margin-bottom:.375rem; }
.label .req{ color:var(--dgfe-danger-500); }
.hint{ font-size:.75rem; color:var(--c-muted); margin-top:.375rem; }
.hint-err{ color:var(--dgfe-danger-500); }
.input,.select,.textarea{ display:block; width:100%; font-size:.875rem; color:var(--c-ink);
  background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r-sm);
  padding:.5rem .75rem; box-shadow:var(--sh-xs); transition:border-color .15s,box-shadow .15s; }
.input::placeholder,.textarea::placeholder{ color:var(--c-faint); }
.input:hover,.select:hover,.textarea:hover{ border-color:var(--c-faint); }
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--dgfe-gold); box-shadow:var(--sh-focus); }
.input:disabled,.select:disabled,.textarea:disabled{ background:var(--c-surface-2); color:var(--c-faint); cursor:not-allowed; }
.input-invalid,[aria-invalid="true"]{ border-color:var(--dgfe-danger-500); }
.input-num{ text-align:right; font-variant-numeric:tabular-nums; }
.input-affix{ position:relative; }
.input-affix > .input{ padding-right:2.75rem; }
.input-affix-tag{ position:absolute; right:.75rem; top:50%; transform:translateY(-50%);
  font-size:.75rem; color:var(--c-muted); pointer-events:none; }
.dgfe-field-error{ color:var(--dgfe-danger-500); font-size:.75rem; margin-top:.25rem; }

/* ============================================================================
   §4.6 FILTER-BAR — .filterbar
   ============================================================================ */
.filterbar{ background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r-lg);
  box-shadow:var(--sh-sm); padding:var(--sp-4); margin-bottom:var(--sp-4); }
.filterbar-row{ display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; }
.filterbar .select,.filterbar .input{ padding-top:.4375rem; padding-bottom:.4375rem; }

/* ============================================================================
   §4.7 SEGMENTED / TABS — .segmented (Pill) · .tabs/.tab (Underline)
   ============================================================================ */
.segmented{ display:inline-flex; padding:2px; gap:2px; background:var(--c-surface-2);
  border:1px solid var(--c-line); border-radius:var(--r-md); }
.segmented-item{ padding:.375rem .875rem; border-radius:calc(var(--r-md) - 3px);
  font-size:.8125rem; font-weight:600; color:var(--c-muted); cursor:pointer;
  transition:background-color .15s,color .15s; }
.segmented-item:hover{ color:var(--c-ink); }
.segmented-item[aria-selected="true"],.segmented-item.is-active{
  background:var(--dgfe-gold); color:#fff; box-shadow:var(--sh-xs); }
.tabs{ display:flex; gap:var(--sp-1); border-bottom:1px solid var(--c-line); }
.tab{ padding:.625rem .875rem; font-size:.875rem; font-weight:500; color:var(--c-muted);
  border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer;
  transition:color .15s,border-color .15s; }
.tab:hover{ color:var(--c-ink); }
.tab[aria-selected="true"]{ color:var(--dgfe-gold-700); border-bottom-color:var(--dgfe-gold); }

/* ============================================================================
   §4.8 DROPDOWN / MENU — .menu .menu-item
   ============================================================================ */
.menu{ min-width:12rem; background:var(--c-surface); color:var(--c-ink-soft); border-radius:var(--r-md);
  box-shadow:var(--sh-lg); border:1px solid var(--c-line); padding:.25rem; z-index:var(--z-dropdown); }
.menu-item{ display:flex; align-items:center; gap:.5rem; width:100%; text-align:left; padding:.5rem .625rem;
  border-radius:var(--r-sm); font-size:.875rem; color:var(--c-ink-soft); cursor:pointer; transition:background-color .12s; }
.menu-item:hover{ background:var(--dgfe-beige); }
.menu-item-danger{ color:var(--dgfe-danger-500); }
.menu-item-danger:hover{ background:var(--dgfe-danger-50); }
.menu-sep{ height:1px; background:var(--c-line-soft); margin:.25rem 0; }
.menu-label{ padding:.375rem .625rem; font-size:.6875rem; text-transform:uppercase; letter-spacing:.04em; color:var(--c-faint); }

/* ============================================================================
   §4.9 MODAL / OVERLAY — .overlay .modal .modal-panel
   ============================================================================ */
.overlay{ position:fixed; inset:0; background:rgba(26,23,20,.55); backdrop-filter:blur(2px); z-index:var(--z-overlay); }
.modal{ position:fixed; inset:0; z-index:var(--z-modal); display:flex; align-items:center; justify-content:center; padding:var(--sp-4); }
.modal-panel{ width:100%; max-width:42rem; max-height:90vh; display:flex; flex-direction:column;
  background:var(--c-surface); border-radius:var(--r-xl); box-shadow:var(--sh-xl); overflow:hidden; }
.modal-panel-lg{ max-width:64rem; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--c-line); }
.modal-title{ font-size:1rem; font-weight:600; color:var(--c-ink); }
.modal-body{ padding:var(--sp-5); overflow:auto; }
.modal-body-flush{ padding:0; overflow:auto; background:var(--c-surface-2); }
.modal-foot{ display:flex; justify-content:flex-end; gap:var(--sp-2);
  padding:var(--sp-4) var(--sp-5); border-top:1px solid var(--c-line); background:var(--c-surface-2); }

/* ============================================================================
   §4.10 TOAST — #dgfe-toast-root + .dgfe-toast
   ============================================================================ */
#dgfe-toast-root{ position:fixed; top:1rem; right:1rem; z-index:var(--z-toast);
  display:flex; flex-direction:column; gap:.5rem; max-width:min(92vw,22rem); pointer-events:none; }
.dgfe-toast{ pointer-events:auto; display:flex; align-items:flex-start; gap:.625rem;
  background:var(--c-surface); color:var(--c-ink); border:1px solid var(--c-line);
  border-left:3px solid var(--c-faint); border-radius:var(--r-md); padding:.625rem .75rem;
  box-shadow:var(--sh-lg); font-size:.8125rem; line-height:1.3; animation:dgfe-toast-in var(--dgfe-t-base) var(--dgfe-ease); }
.dgfe-toast--ok{ border-left-color:var(--dgfe-toast-ok); }
.dgfe-toast--err{ border-left-color:var(--dgfe-toast-err); }
.dgfe-toast__close{ margin-left:auto; color:var(--c-faint); cursor:pointer; line-height:1; }
.dgfe-toast__close:hover{ color:var(--c-ink); }
.dgfe-toast.dgfe-out{ animation:dgfe-toast-out var(--dgfe-t-base) var(--dgfe-ease) forwards; }
@keyframes dgfe-toast-in{ from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;} }
@keyframes dgfe-toast-out{ from{opacity:1;} to{opacity:0; transform:translateX(8px);} }

/* ============================================================================
   §4.11 KANBAN-BOARD — .kanban .kanban-col .kanban-card
   ============================================================================ */
.kanban{ display:grid; grid-template-columns:1fr; gap:var(--sp-3); }
@media (min-width:640px){ .kanban{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .kanban{ grid-template-columns:repeat(5,1fr); } }
.kanban-col{ display:flex; flex-direction:column; min-height:12rem; background:var(--c-surface-2);
  border:1px solid var(--c-line); border-radius:var(--r-lg); }
.kanban-col-head{ position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between;
  padding:.625rem .75rem; background:var(--c-surface-2); border-bottom:1px solid var(--c-line); border-radius:var(--r-lg) var(--r-lg) 0 0; }
.kanban-drop{ flex:1; padding:var(--sp-2); display:flex; flex-direction:column; gap:var(--sp-2); overflow-y:auto; max-height:70vh; }
.kanban-col.is-dragover{ border-color:var(--dgfe-gold); background:var(--dgfe-gold-soft); }
.kanban-card{ background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r-md);
  box-shadow:var(--sh-xs); padding:.75rem; cursor:grab; transition:box-shadow .15s,border-color .15s; }
.kanban-card:hover{ border-color:var(--dgfe-gold); box-shadow:var(--sh-sm); }
.kanban-card.is-dragging{ opacity:.5; cursor:grabbing; box-shadow:var(--sh-lg); }
.dgfe-drop-ph{ border:2px dashed var(--dgfe-gold); border-radius:.625rem; height:3rem; background:rgba(184,151,95,.06); }

/* ============================================================================
   §4.12 EMPTY-STATE / PAGINATION / BULK-BAR
   ============================================================================ */
.empty{ background:var(--c-surface); border:1px dashed var(--c-faint); border-radius:var(--r-lg);
  padding:var(--sp-12) var(--sp-6); text-align:center; color:var(--c-muted); }
.empty-title{ font-size:1.0625rem; font-weight:600; color:var(--c-ink-soft); }
.empty-text{ font-size:.875rem; margin-top:var(--sp-1); }
.empty .btn{ margin-top:var(--sp-4); }
.pager{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-1); font-size:.875rem; color:var(--c-muted); }
.pager-nav{ display:flex; gap:var(--sp-1); }
.pager-btn{ min-width:2rem; height:2rem; display:inline-flex; align-items:center; justify-content:center;
  padding:0 .5rem; border:1px solid var(--c-line); border-radius:var(--r-sm); background:var(--c-surface);
  font-variant-numeric:tabular-nums; cursor:pointer; transition:background-color .12s,border-color .12s; }
.pager-btn:hover{ background:var(--c-surface-2); border-color:var(--c-faint); }
.pager-btn.is-active{ background:var(--c-ink); color:#fff; border-color:var(--c-ink); }
.pager-btn:disabled{ opacity:.4; pointer-events:none; }
.bulkbar{ position:sticky; top:0; z-index:var(--z-bulkbar); display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--sp-3); margin-bottom:var(--sp-3); background:var(--c-ink); color:#fff; border-radius:var(--r-lg);
  box-shadow:var(--sh-lg); padding:.625rem 1rem; font-size:.875rem; }

/* ============================================================================
   §4.13 APP-SHELL / PAGE-HEADER
   ============================================================================ */
.app-main{ max-width:var(--container-app); margin-inline:auto; padding:var(--sp-6) var(--sp-4); }
@media (min-width:640px){ .app-main{ padding:var(--sp-6); } }
.container-form{ max-width:var(--container-form); margin-inline:auto; }
.page-head{ display:flex; flex-direction:column; gap:var(--sp-3); margin-bottom:var(--sp-6); }
@media (min-width:640px){ .page-head{ flex-direction:row; align-items:center; justify-content:space-between; } }
.page-title{ font-family:var(--font-display); font-size:1.875rem; line-height:2.25rem; font-weight:600;
  letter-spacing:-.02em; color:var(--dgfe-n-900); }
.page-subtitle{ font-size:.875rem; color:var(--c-muted); margin-top:var(--sp-1); }
.page-actions{ display:flex; align-items:center; gap:var(--sp-2); flex-shrink:0; }

/* ============================================================================
   §6.4 TRANSITIONS & MIKRO-INTERAKTIONEN (<=150ms, ease-out)
   ============================================================================ */
.htmx-indicator{ opacity:0; transition:opacity var(--dgfe-t-base) var(--dgfe-ease); }
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{ opacity:1; }
.dgfe-swap-target.htmx-request{ opacity:.6; pointer-events:none; transition:opacity var(--dgfe-t-fast) var(--dgfe-ease); }
.dgfe-progress{ position:relative; }
.dgfe-progress.htmx-request::before{ content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg,transparent,var(--dgfe-gold),transparent); background-size:40% 100%;
  animation:dgfe-bar 900ms linear infinite; }
@keyframes dgfe-bar{ 0%{background-position:-40% 0;} 100%{background-position:140% 0;} }
@keyframes dgfe-flash{ from{background-color:var(--dgfe-flash);} to{background-color:transparent;} }
.dgfe-flash{ animation:dgfe-flash 600ms var(--dgfe-ease); }
@keyframes dgfe-enter{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }
.dgfe-enter{ animation:dgfe-enter var(--dgfe-t-base) var(--dgfe-ease) both; }
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation:none !important; transition:none !important; } }