/* ═══════════════════════════════════════════════════════════════════════════
   heimseiten.de — THEME-NEUBAU: Design-Tokens (einzige Quelle für Farben/Maße)
   Dark Mode = reiner Variablen-Flip in diesem File; Komponenten-CSS kennt
   möglichst KEINE Literal-Farben.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  interpolate-size: allow-keywords;
  color-scheme: light;

  /* ── 1. EXTERNE API — diese Namen konsumieren Framework/Bundles: NIE umbenennen.
        grid-framework: --content_width --content_margin --grid_gap --cell_min_width
        text-image-positioning: --content_width --content_margin --image_margin --article_margin
        mod_navigation_accessible: --header_height --nav-*
        inviewport: --fade_duration --move_duration --ivp_animation_delay
        customswiper: --color_1 (+ --swiper_progress via theme.js)
        formlabelmover: --font_color --form_gap --form_input_padding            */
  --content_width: 1024px;
  --content_margin: 20px;
  --image_margin: 60px;
  --grid_gap: 60px;
  --cell_min_width: 200px;
  @media (max-width: 1023px) {
    --grid_gap: 20px;
    --image_margin: 20px;
  }
  --header_height: 130px;
  --header_height_mobile: 51px;
  --form_gap: 15px;
  --form_input_padding: 8px;
  --fade_duration: 1.2s;
  --move_duration: 1.2s;
  --ivp_animation_delay: 0s;
  --color_1: var(--c-brand);
  --font_color: 85 85 85;   /* TRIPEL (Bestands-Semantik fürs alte rgb(var()/x)-Muster,
                               Stufe 13 aus live-design übernommen). Konsumenten laufen heute
                               ALLE über invalid-at-computed-value→ERBEN: formlabelmover
                               `color:var(--font_color,#444)` und countup-suffix `var(…,#555)`.
                               NICHT auf Farbwert umstellen — Dark-Shift belegt (#cdcdcd ≠
                               geerbtes #cfcfcf am countup-suffix). Vereinheitlichung = P6. */
  --primary_color: var(--c-brand);   /* Alt-API (Stufe 13 aus live-design-:root): funnel.css ×14 + components (hs-cards i.svg) */
  --primary_font_family: "Open Sans", Helvetica, Arial;   /* Alt-API: Logo (components) — EXAKT ohne sans-serif-Fallback (Bestand) */

  /* ── 2. FARB-PALETTE (Light-Werte; Dark-Flip unten) ── */
  --c-brand: #7cab16;          /* Marken-Grün — in beiden Modi gleich */
  --c-brand-dark: #629100;     /* dunkleres Grün: Footer-Streifen, Hover */
  --c-brand-bright: #8fc41d;   /* helles Grün: Akzente */
  --c-brand-area: #7cab16;     /* GRÜNE FLÄCHEN (Buttons/Footer): dunkelt im Dark ab,
                                  Text in var(--c-brand) bleibt hell (Merkregel Map §3) */
  --c-surface: #fff;           /* Karten/Panels */
  --c-surface-2: #fbfbfb;      /* alternierende Karten, Eselsohren */
  --c-bg: #f8f8f8;             /* Flächen-Hintergrund (aktive Mobile-Nav, graue Flächen) */
  --c-page: #fff;              /* Body / Artikel-Grundfläche */
  --c-page-alt: #fbfbfb;       /* alternierende Artikel (odd) */
  --c-card: rgb(255 255 255 / .95);
  --c-card-2: rgb(251 251 251 / .95);
  --c-header: rgb(255 255 255 / .95);
  --c-text: #444;
  --c-text-2: #555;            /* Fließtext (bisheriges --font_color) */
  --c-text-strong: #000;
  --c-muted: #767676;
  --c-border: #ddd;
  --c-border-nav: #f2f2f2;
  --c-chrome: #f2f2f2;         /* Header-Top/Footer-Grundfläche (bisher --color_4) */
  --c-input-bg: #fff;
  --c-error: #c0392b;

  /* ── 3. TYPO / MASSE / SONSTIGES ── */
  --font_family: "Open Sans", Helvetica, Arial, sans-serif;
  --font_size: 16px;
  --font_size_small: 12px;
  --font_size_big: 18px;
  --font_weight: 400;
  --font_weight_strong: 600;
  --line_height: 1.7;
  /* (P6 2026-07-15: --header_width/--footer_width/--info_row_height gestrichen —
     je 0 Konsumenten über alle geladenen CSS/JS/Templates; Werte stimmten eh nicht
     mit den echten Breiten überein [STAND Session 1].) */
  --horizontal_spacing: 20px;
  --vertical_spacing: 60px;
  @media (max-width: 1023px) {
    --horizontal_spacing: 10px;
    --vertical_spacing: 20px;
  }
  --border_color: var(--c-border);
  --border_radius: 3px;
  --border_width: 1px;
  --header_border_bottom: 1px solid var(--c-border);
  --article_border-bottom: 0;
  --field_height: 38px;
  --input_border_radius: var(--border_radius);
  --tr: all 0.25s ease-in-out;

  /* Buttons (Token-API des Button-Systems) */
  --button_background_color: var(--c-brand-area);
  --button_font_color: #fff;
  --button_border_color: var(--c-brand-area);
  --button_border_width: 1px;
  --button_border_radius: var(--border_radius);
  --button_font_size: 1em;
  --button_font_weight: var(--font_weight_strong);
  --button_padding: 10px 22px;
  --button_hover_background_color: var(--c-brand-dark);
  --button_hover_font_color: #fff;

  /* Artikel-Layout-Variablen (Konsumenten: Artikel-/Abstands-Regeln, bisher live-design :root-nah) */
  --document_content_margin: 20px;
  --text_image_margin: 60px;
  --article_inside_width: 1024px;
  --article_space_top: 60px;
  --article_space_bottom: 60px;
  @media (max-width: 1023px) {
    --text_image_margin: 20px;
    --article_space_top: 20px;
    --article_space_bottom: 20px;
  }

  /* Navigation (Core-a11y-Nav-API — Werte unverändert aus settings.css) */
  --nav-breakpoint: 1024;
  --nav-color: #555;   /* bewusst literal: live-design macht --font_color zum Tripel */
  --nav-active-color: var(--c-brand);
  --nav-item-line-height: 1.5;
  --nav-font-size: 16px;
  --nav-font-weight: 400;
  --nav-icon-background: transparent;
  --nav-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%237cab16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>');
  --nav-mobile-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="%237cab16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>');
  --nav-mobile-background: var(--c-surface);
  --nav-mobile-color: #555;
  --nav-mobile-active-background: var(--c-bg);
  --nav-mobile-active-color: var(--c-brand);
  --nav-mobile-active-border-color: var(--c-brand);
  --nav-mobile-btn-clr: var(--c-brand);
  --nav-mobile-separator-color: var(--c-border);
  --nav-mobile-padding: 0px 20px 20px;
  --nav-mobile-font-size: 18px;
  --nav-mobile-backdrop-height: 0;
  --nav-submenu-background: var(--c-surface);
  --nav-burger-line-color: var(--c-brand);
}

/* ═══════════ DARK MODE = Variablen-Flip ═══════════ */
:root[data-theme="dark"] {
  color-scheme: dark;
  --font_color: 205 205 205;   /* Dark-Tripel (Stufe 13 aus heimseiten übernommen) */
  /* UX-Runde 2026-07-15 (Niels-Freigabe): Fehler-Rot im Dark aufgehellt (Kontrast ~4,6:1
     auf #161616 — #c0392b läge bei ~2,6:1); Mobile-Menü-Links lesbar statt Core-#555 */
  --c-error: #e0645a;
  --nav-mobile-color: #d8d8d8;
  --c-brand-bright: #9bcc3a;
  --c-brand-area: #557d00;
  --c-surface: #232323;
  --c-surface-2: #1f1f1f;
  --c-bg: #161616;
  --c-page: #161616;
  --c-page-alt: #1b1b1b;
  --c-card: rgb(35 35 35 / .95);
  --c-card-2: rgb(31 31 31 / .95);
  --c-header: rgb(18 18 18 / .95);
  --c-text: #cfcfcf;
  --c-text-2: #cdcdcd;
  --c-text-strong: #ececec;
  --c-muted: #a6a6a6;
  --c-border: #3a3a3a;
  --c-border-nav: #3a3a3a;
  --c-chrome: #1c1c1c;
  --c-input-bg: #232323;
  /* ⚠ KEIN --nav-*-Flip hier: das nav-accessible-Bundle konsumiert die Vars direkt —
     der Bestand löst Dark-Nav über Element-Overrides in heimseiten.css. Der Umstieg
     auf Var-Flip passiert kontrolliert in der NAVIGATIONS-Stufe (A/B-belegt);
     ein früher Flip änderte den offenen Mobile-Burger im Dark (Verify 2026-07-14). */
}