/* 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 — V3 kuehl/mono (Zinc), ersetzt warmes Sand -- */
  --dgfe-n-0:   #FFFFFF;   /* reine Karten-Flaeche                            */
  --dgfe-n-25:  #FAFAFA;   /* App-Canvas                                      */
  --dgfe-n-50:  #F4F4F5;   /* Table-Header / subtile Zonen (zinc-100)        */
  --dgfe-n-100: #EFEFF1;   /* Hover-Surface                                  */
  --dgfe-n-200: #E4E4E7;   /* Border default — Haarlinie (zinc-200)         */
  --dgfe-n-300: #D4D4D8;   /* Border strong / Dividers (zinc-300)           */
  --dgfe-n-400: #A1A1AA;   /* Disabled-Text / Icons dezent (zinc-400)       */
  --dgfe-n-500: #71717A;   /* Muted-Text / Captions (zinc-500)              */
  --dgfe-n-600: #52525B;   /* Secondary-Text (zinc-600)                      */
  --dgfe-n-700: #3F3F46;   /* Body-Text (zinc-700)                           */
  --dgfe-n-800: #27272A;   /* Headings (zinc-800)                            */
  --dgfe-n-900: #18181B;   /* Header-BG / Ink (zinc-900)                    */
  --dgfe-n-950: #09090B;   /* tiefste Flaeche / Overlays (zinc-950)         */

  /* -- "GOLD"-Tokens = jetzt MONO-Ink (V3: kein Gold; Chrome schwarz/grau).
        Funktionale Akzente liegen in --st-* + Semantik. -- */
  --dgfe-gold-50:  #F4F4F5;
  --dgfe-gold-100: #E4E4E7;
  --dgfe-gold-200: #D4D4D8;
  --dgfe-gold-300: #A1A1AA;
  --dgfe-gold-400: #52525B;
  --dgfe-gold-500: #27272A;   /* PRIMARY-Aktion = near-black (zinc-800)      */
  --dgfe-gold-600: #18181B;   /* Hover (zinc-900)                            */
  --dgfe-gold-700: #3F3F46;   /* "Akzent-Text auf hell" = dunkles Grau       */
  --dgfe-gold-800: #18181B;
  --dgfe-gold-soft:#F4F4F5;   /* "Tint-Flaeche" = helles Grau                */

  /* -- 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 — V3 mono: heller Grund + dunkler Text, Farbe NUR
        als Punkt (Signal). Gewonnen = einziger leichter Farb-Fill. -- */
  --st-neu-bg:        #FFFFFF;  --st-neu-fg:        #3F3F46;  --st-neu-dot:        #0EA5E9;
  --st-kontakt-bg:    #FFFFFF;  --st-kontakt-fg:    #3F3F46;  --st-kontakt-dot:    #14B8A6;
  --st-angebot-bg:    #FFFFFF;  --st-angebot-fg:    #3F3F46;  --st-angebot-dot:    #F59E0B;
  /* Verfeinerte Pipeline (kunden_service.STATUS_WERTE) — V3 mono: heller
     Grund + dunkler Text, Farbe NUR als Punkt-Signal (Klärfall = leichter
     roter Fill als Problem-Signal, analog Gewonnen). */
  --st-rechnung_angefordert-bg: #FFFFFF; --st-rechnung_angefordert-fg: #3F3F46; --st-rechnung_angefordert-dot: #F59E0B;
  --st-angebot_erstellt-bg:     #FFFFFF; --st-angebot_erstellt-fg:     #3F3F46; --st-angebot_erstellt-dot:     #EAB308;
  --st-angebot_versendet-bg:    #FFFFFF; --st-angebot_versendet-fg:    #3F3F46; --st-angebot_versendet-dot:    #14B8A6;
  --st-klaerfall-bg:            #FEF2F2; --st-klaerfall-fg:            #B91C1C; --st-klaerfall-dot:            #EF4444;
  --st-vertrag_eingereicht-bg:  #FFFFFF; --st-vertrag_eingereicht-fg:  #3F3F46; --st-vertrag_eingereicht-dot:  #6366F1;
  --st-gewonnen-bg:   #ECFDF5;  --st-gewonnen-fg:   #047857;  --st-gewonnen-dot:   #10B981;
  --st-verloren-bg:   #FFFFFF;  --st-verloren-fg:   #A1A1AA;  --st-verloren-dot:   #D4D4D8;
  --st-archiviert-bg: #FFFFFF;  --st-archiviert-fg: #A1A1AA;  --st-archiviert-dot: #D4D4D8;

  /* -- TYPO — V3: durchgehend Inter (kein Serif/Fraunces mehr) -- */
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-sans:    'Inter', 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(24,24,27,.16);   /* neutraler Fokus-Ring (mono) */
  --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(24,24,27,.10);          /* neutraler Flash (mono) */

  /* -- ALIASE fuer Komponenten-CSS (EINE Wahrheit, keine Parallelpalette) -- */
  --dgfe-gold:      var(--dgfe-gold-500);
  --dgfe-gold-dark: var(--dgfe-gold-600);
  --dgfe-beige:      #F4F4F5;
  --dgfe-beige-line: #E4E4E7;
  --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:.4rem; padding:.1875rem .5rem;
  border-radius:var(--r-sm); border:1px solid var(--dgfe-n-200);
  font-size:.6875rem; font-weight:600; letter-spacing:.02em; }
.st::before{ content:""; width:.45rem; height:.45rem; border-radius:9999px; flex:none; }
.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-rechnung_angefordert{ background:var(--st-rechnung_angefordert-bg); color:var(--st-rechnung_angefordert-fg); } .st-rechnung_angefordert::before{ background:var(--st-rechnung_angefordert-dot); }
.st-angebot_erstellt{ background:var(--st-angebot_erstellt-bg); color:var(--st-angebot_erstellt-fg); } .st-angebot_erstellt::before{ background:var(--st-angebot_erstellt-dot); }
.st-angebot_versendet{ background:var(--st-angebot_versendet-bg); color:var(--st-angebot_versendet-fg); } .st-angebot_versendet::before{ background:var(--st-angebot_versendet-dot); }
.st-klaerfall{ background:var(--st-klaerfall-bg); color:var(--st-klaerfall-fg); } .st-klaerfall::before{ background:var(--st-klaerfall-dot); }
.st-vertrag_eingereicht{ background:var(--st-vertrag_eingereicht-bg); color:var(--st-vertrag_eingereicht-fg); } .st-vertrag_eingereicht::before{ background:var(--st-vertrag_eingereicht-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:.1875rem .5rem;
  border-radius:var(--r-sm); font-size:.6875rem; font-weight:600; white-space:nowrap; line-height:1.1; }
.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-success{ background:var(--dgfe-success-50); color:var(--dgfe-success-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.8b TOP-NAV DROPDOWN-GRUPPE — .nav-group (Header zinc-900)
   Entzerrt die ueberladene Admin/Chef-Nav: gruppiert Berichte/Provision
   ("Auswertung") + Benutzer/Mein Netzwerk ("Verwaltung") in Dropdowns.
   Trigger sitzt im dunklen Header und sieht aus wie ein Nav-Link; das Panel
   recycelt das helle .menu/.menu-item-Popover (gleiche Hover/Shadow wie
   Benutzer-Menue). Toggle via dgfe-crm.js (Click + Outside-Click + Escape),
   Hover/Focus-within als progressive Enhancement (CSS-only Fallback).
   ---------------------------------------------------------------------------- */
.nav-group{ position:relative; display:inline-flex; align-items:stretch; }
.nav-group__panel{
  position:absolute; top:100%; left:0; margin-top:.25rem;
  min-width:13rem;
  opacity:0; visibility:hidden; transform:translateY(.25rem);
  /* Schliess-Verzoegerung (.3s): beim Rausfahren bleibt das Panel kurz offen,
     damit der Weg Trigger->Panel leicht zu treffen ist (Hover-Intent). */
  transition:opacity .12s ease .3s, transform .12s ease .3s, visibility .12s ease .3s;
  pointer-events:none;
}
/* Sichtbar: JS-Toggle (data-open), Tastatur (focus-within) ODER Hover. */
/* Unsichtbare Bruecke ueber den margin-top-Gap -> Hover bleibt durchgehend
   (kein Flicker/Schliessen beim Ruebergehen Trigger->Panel). Grosszuegig
   (.85rem, deckt den margin-top-Gap + etwas Toleranz). */
.nav-group__panel::before{ content:""; position:absolute; left:0; right:0; top:-.85rem; height:.85rem; }
/* Auto-Open per Hover/Focus ODER Click/Touch (JS data-open) — sofort (delay 0). */
.nav-group:hover > .nav-group__panel,
.nav-group:focus-within > .nav-group__panel,
.nav-group__panel[data-open="true"]{
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
  transition-delay:0s;
}
/* Caret dreht, wenn offen (Hover/Focus/JS). */
.nav-group__caret{ transition:transform .12s ease; }
.nav-group:hover .nav-group__caret,
[data-nav-group-trigger][aria-expanded="true"] .nav-group__caret{ transform:rotate(180deg); }
/* Aktives Item innerhalb der Gruppe (active_nav). */
.nav-group__panel .menu-item[aria-current="page"]{ color:var(--c-ink); font-weight:600; background:var(--dgfe-beige); }

/* ============================================================================
   §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; } }

/* ============================================================================
   §7 WELCOME-TOUR  (#dgfe-tour-root — eigene Vanilla-Engine, dgfe-tour.js)
   Energy-Sales-Look: Primaerblau #2563eb, ruhige Flaechen, klarer Fortschritt.
   Self-contained: das Tour-Root haengt am document.body (ausserhalb .et-scope),
   daher eigene Blau-Variablen statt Scope-Tokens.
   ============================================================================ */
#dgfe-tour-root{ position:fixed; inset:0; z-index:var(--z-overlay); pointer-events:none;
  --et-tour-blue:#2563eb; --et-tour-blue-dark:#1d4ed8; }
.dgfe-tour-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.55);
  pointer-events:auto; animation:dgfe-tour-fade var(--dgfe-t-base) var(--dgfe-ease); }
.dgfe-tour-spot{ position:fixed; border-radius:10px;
  box-shadow:0 0 0 9999px rgba(15,23,42,.55), 0 0 0 3px #fff, 0 0 0 5px var(--et-tour-blue);
  background:transparent; pointer-events:none; z-index:1;
  transition:top var(--dgfe-t-base) var(--dgfe-ease), left var(--dgfe-t-base) var(--dgfe-ease),
    width var(--dgfe-t-base) var(--dgfe-ease), height var(--dgfe-t-base) var(--dgfe-ease); }
.dgfe-tour-pop{ position:fixed; z-index:2; width:min(360px, calc(100vw - 16px));
  pointer-events:auto; background:var(--c-surface); color:var(--c-ink-soft);
  border:1px solid var(--c-line); border-top:3px solid var(--et-tour-blue);
  border-radius:12px; box-shadow:0 18px 48px rgba(15,23,42,.20), 0 6px 16px rgba(15,23,42,.10);
  padding:16px 18px 14px;
  font-family:var(--font-sans); font-size:var(--fs-sm); line-height:var(--lh-sm);
  animation:dgfe-tour-pop-in var(--dgfe-t-base) var(--dgfe-ease) both;
  transition:top var(--dgfe-t-base) var(--dgfe-ease), left var(--dgfe-t-base) var(--dgfe-ease); }
.dgfe-tour-x{ position:absolute; top:8px; right:10px; border:0; background:transparent;
  color:var(--c-faint); font-size:18px; line-height:1; cursor:pointer; padding:2px; border-radius:6px; }
.dgfe-tour-x:hover{ color:var(--c-ink); background:var(--c-line-soft); }
.dgfe-tour-step{ font-size:var(--fs-label); text-transform:uppercase; letter-spacing:var(--ls-label);
  font-weight:700; color:var(--et-tour-blue); margin:0 0 6px; }
.dgfe-tour-track{ height:4px; border-radius:999px; background:#e2e8f0; overflow:hidden; margin:0 0 12px; }
.dgfe-tour-bar{ display:block; height:100%; width:0; border-radius:999px;
  background:var(--et-tour-blue); transition:width var(--dgfe-t-base) var(--dgfe-ease); }
.dgfe-tour-title{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-h3);
  line-height:var(--lh-h3); color:var(--dgfe-n-900); margin:0 0 6px; }
.dgfe-tour-body{ margin:0 0 16px; color:var(--c-ink-soft); }
.dgfe-tour-actions{ display:flex; align-items:center; gap:8px; }
.dgfe-tour-spacer{ flex:1; }
.dgfe-tour-skip{ border:0; background:transparent; color:var(--c-muted);
  font-size:var(--fs-sm); cursor:pointer; padding:6px 8px; border-radius:6px; }
.dgfe-tour-skip:hover{ color:var(--c-ink); background:var(--c-line-soft); }
.dgfe-tour-back,.dgfe-tour-next{ font:inherit; font-weight:600; font-size:var(--fs-sm);
  cursor:pointer; border-radius:8px; padding:7px 14px; border:1px solid transparent;
  transition:background-color .12s, border-color .12s, color .12s, box-shadow .12s; }
.dgfe-tour-back{ background:#fff; color:#334155; border-color:#cbd5e1; }
.dgfe-tour-back:hover{ background:#f1f5f9; border-color:#94a3b8; }
.dgfe-tour-next{ background:var(--et-tour-blue); color:#fff; box-shadow:0 1px 2px rgba(37,99,235,.35); }
.dgfe-tour-next:hover{ background:var(--et-tour-blue-dark); }
.dgfe-tour-next:active{ transform:translateY(.5px); box-shadow:none; }
.dgfe-tour-dismiss:hover{ color:var(--et-tour-blue) !important; }
@keyframes dgfe-tour-fade{ from{opacity:0;} to{opacity:1;} }
@keyframes dgfe-tour-pop-in{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }