/* ============================================================
   ROIDINGER ENERGIETECHNIK e.U. — DESIGN-TOKENS (Single Source)
   Konzept: „Nachhaltige Energiezukunft — grün, klar, vertrauenswürdig."
   Regeln:  Komponenten referenzieren NUR Tokens. Neuer Wert = neuer Token.
            Kontrast-Ratios: WCAG-gerechnet (Node-Script), nicht geschätzt.
   ============================================================ */
:root {
  /* ---------- PRIMITIVE: Waldgrün-Skala 50–900 ---------- */
  --green-50:  #F0F7F2;
  --green-100: #DCEEE2;
  --green-200: #B7DCC6;
  --green-300: #8CC7A6;
  --green-400: #52B788;
  --green-500: #40916C;
  --green-600: #2D6A4F;   /* Markenkern „Waldgrün" */
  --green-700: #24543F;
  --green-800: #1B4332;
  --green-900: #10281E;

  /* ---------- FLÄCHEN: genau 3 Stufen (nie reines Grau) ---------- */
  --bg-base:       #FFFFFF;   /* Haupt-Hintergrund */
  --bg-elevated:   #F6F8F5;   /* Sektions-Wechselfläche, warmes Off-White */
  --bg-elevated-2: #EDF2EC;   /* Karten/Info-Flächen auf elevated */

  /* ---------- LINIEN: 2 Stärken ---------- */
  --line:        #E3E9E2;
  --line-strong: #C9D3C6;

  /* ---------- AKZENT-FAMILIE (EIN Akzent = Grün) ---------- */
  --primary:        var(--green-600); /* CTA-Fläche, Headline-Wörter — 6.39:1 auf Weiß (AA) */
  --accent:         var(--green-400); /* Marker/Hover-FLÄCHEN. NIE kleiner Text auf hell (2.5:1)
                                         und NIE kleiner Text auf --bg-dark (4.48:1) — dort
                                         nur ≥24px-Text oder Grafik/Fläche (3:1 erfüllt). */
  --accent-dim:     var(--green-500);
  --accent-ink:     #0B2019;          /* Text AUF Akzent-/Primärfläche — 6.87:1 (AA) */
  --accent-on-dark: var(--green-300); /* kleiner Akzent-TEXT (Eyebrows/Links) auf --bg-dark — 7.6:1 (AAA) */
  --accent-glow:    rgba(82, 183, 136, 0.35);

  /* ---------- TEXT: 3 Rollen — jede auf JEDER hellen Fläche ≥4.5 ---------- */
  --text-primary:   #1B2B24;  /* 14.81 / 13.87 / 13.06 (AAA auf base/elevated/elevated-2) */
  --text-secondary: #43524A;  /*  8.25 /  7.73 /  7.28 (AAA) */
  --text-muted:     #5C6B62;  /*  5.62 /  5.27 /  4.96 (AA)  */

  /* ---------- DUNKLE SEKTIONEN (Grün statt Schwarz) ---------- */
  --bg-dark:          var(--green-800);
  --bg-dark-2:        var(--green-900);
  --text-on-dark:     #EAF2EC;              /* 9.71:1 auf --bg-dark (AAA) */
  --text-on-dark-2:   #B9CCC0;              /* 6.57:1 auf --bg-dark (AA)  */
  --line-on-dark:        rgba(234, 242, 236, 0.16);
  --line-on-dark-strong: rgba(234, 242, 236, 0.30);

  /* ---------- SEMANTIK ---------- */
  --success:        var(--green-600);
  --warning:        #9A5B00;  /* 5.43:1 auf Weiß (AA) */
  --danger:         #B3261E;  /* 6.54:1 auf Weiß (AA) */
  --danger-on-dark: #FFB4AB;  /* 6.53:1 auf --bg-dark (AA) */

  /* ---------- TYPO (self-hosted woff2: Space Grotesk + Inter) ---------- */
  --font:         "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", var(--font);
  --fs-display: clamp(2.4rem, 1.2rem + 5vw, 4.5rem);     /* Hero-Headlines */
  --fs-h2:      clamp(1.75rem, 1.1rem + 2.8vw, 2.75rem); /* Sektions-Headlines */
  --fs-h3:      clamp(1.15rem, 1rem + 0.6vw, 1.4rem);    /* Karten-/Subheadlines */
  --fs-lead:    clamp(1.1rem, 1rem + 0.5vw, 1.3rem);     /* Intro-/Leadtext */
  --fs-body:    clamp(1rem, 0.93rem + 0.3vw, 1.125rem);  /* Fließtext */
  --fs-small:   0.9rem;                                  /* Meta, Footer-Kleintext */
  --fs-label:   0.78rem;                                 /* Eyebrows, Labels */
  --tracking-display: -0.01em;
  --tracking-label:    0.16em;
  --lh-tight: 1.12;
  --lh-body:  1.65;

  /* ---------- SPACING: 8px-Basis ---------- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;
  --section-y: clamp(3.5rem, 2.2rem + 6vw, 6.5rem); /* DER Sektionsabstand — einzige Quelle */

  /* ---------- MOTION: EINE Bewegungssprache ---------- */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:   0.18s;
  --dur:        0.28s;
  --dur-reveal: 0.65s;

  /* ---------- FORM + LAYOUT ---------- */
  --radius:      6px;   /* bewusst eckiger (Kundenfeedback 08.07.2026, pvfux-Nähe) */
  --radius-sm:   4px;
  --radius-pill: 999px;
  --maxw:        1240px;                     /* Content-Cap */
  --maxw-wide:   1440px;                     /* Hero/Galerie-Cap */
  --gutter:      clamp(1.25rem, 4vw, 3.5rem);
  --brandbar-h:  68px;                       /* Header-Zeile 1: Wortmarke + Kontakt + CTA */
  --navbar-h:    52px;                       /* Header-Zeile 2: Tab-Leiste (klebt beim Scrollen) */
  --header-h:    var(--navbar-h);            /* Anker-Offset = klebende Leiste; Mobile-Override
                                                in components.css beim Nav-Breakpoint (1100px) */
  --header-overlay-h: calc(var(--brandbar-h) + var(--navbar-h));
                                             /* volle Höhe des fixed Overlay-Headers (ungescrollt) —
                                                Hero-Content reserviert diesen Puffer; Mobile-Override
                                                an derselben Breakpoint-Stelle wie --header-h */
  --shadow-header: 0 4px 16px rgba(16, 40, 30, 0.12);
  --shadow-lift:   0 18px 36px rgba(16, 40, 30, 0.14); /* Karten-Hover (Mikrointeraktionen) */

  /* ---------- KONTEXT-ROLLEN (von .theme-dark überschrieben) ---------- */
  --surface:      var(--bg-base);
  --card-bg:      var(--bg-base);
  --link:         var(--primary);            /* Textlinks — 6.39:1 (AA) */
  --eyebrow-ink:  var(--primary);
  --focus-ring:   var(--primary);
  --btn-bg:       var(--primary);
  --btn-bg-hover: var(--green-700);          /* Weiß darauf: 8.70:1 (AAA) */
  --btn-ink:      #FFFFFF;                   /* auf --btn-bg: 6.39:1 (AA) */
  --ghost-ink:    var(--primary);
  --ghost-line:   var(--line-strong);
  --ghost-hover-bg: var(--green-50);         /* Primary-Text darauf: 5.87:1 (AA) */
}

/* ============================================================
   DUNKLE SEKTIONEN — EINE Umschaltung, alle Komponenten folgen.
   Einsatz: <section class="sec theme-dark">
   ============================================================ */
.theme-dark {
  color: var(--text-primary); /* greift auch ohne .sec (z. B. .hero) — Wert unten umgeschaltet */
  --surface:        var(--bg-dark);
  --card-bg:        rgba(255, 255, 255, 0.06);
  --text-primary:   var(--text-on-dark);
  --text-secondary: var(--text-on-dark-2);
  --text-muted:     var(--text-on-dark-2);
  --line:           var(--line-on-dark);
  --line-strong:    var(--line-on-dark-strong);
  --link:           var(--accent-on-dark);   /* 7.6:1 (AAA) */
  --eyebrow-ink:    var(--accent-on-dark);
  --focus-ring:     var(--accent);
  --btn-bg:         var(--accent);           /* Akzent-CTA auf Dunkelgrün (pvfux-Prinzip) */
  --btn-bg-hover:   var(--green-300);        /* accent-ink darauf: 8.77:1 (AAA) */
  --btn-ink:        var(--accent-ink);       /* 6.87:1 (AA) */
  --ghost-ink:      var(--text-on-dark);
  --ghost-line:     var(--line-on-dark-strong);
  --ghost-hover-bg: rgba(255, 255, 255, 0.08);
  --danger:         var(--danger-on-dark);
}

/* Tiefste Variante (z. B. Footer, Kontrast-Sektion) */
.theme-dark--deep {
  --surface:   var(--bg-dark-2);
  --bg-dark:   var(--bg-dark-2); /* Alias für verschachtelte Bezüge */
}