/* ==========================================================================
   apricus-solar.de - Design-System
   Quelle: docs/REPORT-inhalt.md Abschnitt 4 (gemessen am Live-System 2026-08-08).
   Diese Datei ist die Bibel. Werte hier nicht "aufraeumen" - sie sind gemessen,
   nicht erfunden. Bewusste Abweichungen stehen in docs/UMZUGSPLAN.md Abschnitt 6.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schrift
   Das Theme deklariert 28 @font-face-Familien, geladen wird genau eine Datei.
   Original: InterVariable.ttf (863 KB, font-display: fallback).
   Nachbau:  InterVariable.woff2 (345 KB, font-display: swap).
   Achsen der Datei: opsz 14-32, wght 100-900.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/InterVariable.woff2') format('woff2');
}

:root {
  --font-sans: Inter, sans-serif;

  /* ------------------------------------------------------------------------
     2. Farben
     Es gibt keine Markenfarbe. Reines Schwarz/Weiss/Grau; Farbe kommt nur aus
     Fotos, Siegeln und Kundenlogos.
     ------------------------------------------------------------------------ */

  --color-theme-1: #ffffff; /* Seitenhintergrund, Text auf dunklen Baendern */
  --color-theme-2: #eeeeee; /* abgesetzte Sektionen */
  --color-theme-3: #bbbbbb; /* Input-Border-Preset; faktisch Testimonial-Text */
  --color-theme-4: #1e1e1e; /* Standard-Textfarbe (body, Links) + Button-BG */
  --color-theme-5: #000000; /* Ueberschriften, schwarze Baender, Footer, Hover */
  /* theme-6 ist im Original undefiniert (Klasse ohne CSS-Regel).
     Der Header-CTA faellt auf den wp-element-button-Default zurueck -> #1e1e1e. */
  --color-theme-6: #1e1e1e;

  /* Weitere gemessene Grautoene. ACHTUNG UMZUGSPLAN A6/A7: diese Werte
     verfehlen WCAG AA (4,17:1 / 2,92:1 / 1,92:1 auf Weiss). Sie stehen hier
     als Referenz des Ist-Zustands - beim Seitenbau die AA-Variante nehmen. */
  --color-gray-body: #7c7c7c;   /* Fliesstext Gewerbe/Industrie */
  --color-gray-steps: #979797;  /* Bewerbungsschritte */
  --color-gray-quote: #bbbbbb;  /* Testimonials */
  --color-gray-label: #777771;  /* Forminator-Labels */

  --color-form-submit: #1a1a1a;
  --color-form-submit-alt: #333333;
  --color-error: #e51919;
  --color-error-bg: #f9e4e8;
  --color-success: #119e44;

  /* Semantische Aliase - nur diese im Seitenbau verwenden */
  --color-bg: var(--color-theme-1);
  --color-bg-alt: var(--color-theme-2);
  --color-bg-inverse: var(--color-theme-5);
  --color-text: var(--color-theme-4);
  --color-text-inverse: var(--color-theme-1);
  --color-heading: var(--color-theme-5);
  --color-link: var(--color-theme-4);

  /* ------------------------------------------------------------------------
     3. Fluid Typography
     WORTWOERTLICH aus REPORT-inhalt.md Abschnitt 4. Feste Steigung ueber
     (1vw - 3.2px), keine Breakpoint-Spruenge. Nicht durch Media Queries
     ersetzen - das weicht auf allen Zwischengroessen ab (Aufwandstreiber 9.3.1).
     ------------------------------------------------------------------------ */

  --fs-small:    clamp(14px,     0.875rem + ((1vw - 3.2px) * 0.179), 16px);
  --fs-medium:   clamp(15.747px, 0.984rem + ((1vw - 3.2px) * 0.737), 24px);
  --fs-large:    clamp(24.034px, 1.502rem + ((1vw - 3.2px) * 1.426), 40px);
  --fs-x-large:  clamp(33.419px, 2.089rem + ((1vw - 3.2px) * 2.373), 60px);
  --fs-xx-large: clamp(40px,     2.5rem   + ((1vw - 3.2px) * 5),     96px);

  /* Element-Groessen. Aus der Messtabelle (Desktop 1920 / Mobile 390) in
     dieselbe Formelform gefittet, weil die Ueberschriften des Themes nicht auf
     den fuenf Presets oben sitzen. Kontrolle: Einsetzen von 1vw = 19.2px
     (1920) bzw. 3.9px (390) reproduziert die gemessenen Werte. */
  --fs-h1:     clamp(37px,   2.235rem + ((1vw - 3.2px) * 1.765), 64px);
  --fs-h2:     clamp(29.1px, 1.765rem + ((1vw - 3.2px) * 1.235), 48px);
  --fs-h3:     clamp(16.3px, 0.997rem + ((1vw - 3.2px) * 0.503), 24px);
  --fs-body:   var(--fs-small);  /* 16px @1920 / 14.1px @390 - deckungsgleich */
  --fs-li:     clamp(14.3px, 0.880rem + ((1vw - 3.2px) * 0.307), 19px);
  --fs-button: var(--fs-li);     /* 19px / 450 Desktop, 14.3px Mobile */
  --fs-nav:    clamp(14px,   0.875rem + ((1vw - 3.2px) * 0.322), 19px);

  /* Ausnahme /stromspeicher-bess/: H1 96px, font-weight 700 statt 500.
     Stil-Fremdkoerper, bleibt vorerst so (UMZUGSPLAN 9.3.6). */
  --fs-h1-bess: var(--fs-xx-large);

  --fw-regular: 400;
  --fw-button: 450;
  --fw-medium: 500;   /* alle Ueberschriften ausser BESS */
  --fw-bold: 700;     /* nur BESS-Seite + Formular-Labels */

  --lh-heading: 1;    /* h1 + h2 - gemessen exakt 1.0 */
  --lh-h3: 1.2;
  --lh-body: 1.65;    /* body, li, Buttons */

  /* ------------------------------------------------------------------------
     4. Spacing
     WP-Presets sind viewport-abhaengig: spacing--N0 = min(10*(2n)px, 2n vw).
     Token 20 = n1 ... Token 80 = n7; Token 90 = n8 als Reserve nach oben.
     ------------------------------------------------------------------------ */

  --space-20: min(20px, 2vw);
  --space-30: min(40px, 4vw);
  --space-40: min(60px, 6vw);
  --space-50: min(80px, 8vw);
  --space-60: min(100px, 10vw);
  --space-70: min(120px, 12vw);
  --space-80: min(140px, 14vw);
  --space-90: min(160px, 16vw);

  --root-padding-inline: var(--space-40); /* Seitenrand, wie im Original */
  --block-gap: var(--space-20);

  /* ------------------------------------------------------------------------
     5. Container
     Drei bis vier Breiten, nicht eine. Der Wechsel zwischen 620px-Textspalte
     und 1300px-Sektion ist die eigentliche Layout-Logik (Aufwandstreiber 9.3.2).
     ------------------------------------------------------------------------ */

  --container-content: 620px;  /* Textspalten, /kontakt/ + /impressum/ komplett */
  --container-md: 1100px;
  --container-lg: 1300px;
  --container-wide: 1440px;    /* alignwide */

  /* ------------------------------------------------------------------------
     6. Radien, Rahmen, Schatten
     Sechs gewachsene Button-Radien - kein System. Bleibt vorerst so (A10).
     Schatten gibt es auf der ganzen Site nicht.
     ------------------------------------------------------------------------ */

  --radius-2: 2px;   /* Forminator-Submit */
  --radius-4: 4px;   /* Header-CTA */
  --radius-5: 5px;   /* Standard-Buttons Home/Karriere */
  --radius-6: 6px;   /* Inputs, Karriere-FAQ-CTA */
  --radius-8: 8px;   /* Plugin-Button "Initativbewerbung" */
  --radius-10: 10px; /* Stellen-Buttons */
  --shadow-none: none;

  /* Input-Basis aus theme.css (ueberschreibt das 3px/#bbb-Preset) */
  --input-border: 1px solid currentColor;
  --input-radius: var(--radius-6);
  --input-min-height: 42px;
  --input-padding: 0.8rem 1rem;

  /* ------------------------------------------------------------------------
     7. Globale Bausteine
     ------------------------------------------------------------------------ */

  --header-height: 118px;        /* Desktop, gemessen */
  --header-height-mobile: 126.6px;
  --footer-height: 479px;        /* Referenz, nicht erzwungen */
  --tap-target-min: 44px;        /* UMZUGSPLAN A6, Original hat 20-24px */
  --breakpoint-nav: 600px;       /* einziger echter Layout-Breakpoint */
}

/* ==========================================================================
   8. Basis-Elemente
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anker springen sonst unter den (jetzt wirklich klebenden) Header */
  scroll-padding-top: var(--header-height);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  /* Original laeuft auf /datenschutz/ mobil 923px breit (A4) - das hier
     verhindert die Wiederholung des Defekts. */
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6, blockquote {
  text-wrap: balance;
  margin: 0;
  color: var(--color-heading);
  font-weight: var(--fw-medium);
}

p {
  text-wrap: pretty;
  margin: 0;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--color-text); }
h4, h5, h6 { font-size: var(--fs-h3); line-height: var(--lh-h3); }

li { font-size: var(--fs-li); line-height: var(--lh-body); }

a {
  color: var(--color-link);
  text-underline-offset: 0.2em;
}

img, picture, video, svg {
  max-width: 100%;
  height: auto;
}

/* Lange, nicht umbrechende URLs im Fliesstext - Ursache des Mobile-Overflows
   auf /datenschutz/ (A4). */
a[href^="http"] {
  overflow-wrap: anywhere;
}

/* ==========================================================================
   9. Container-Helfer
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-lg);
  margin-inline: auto;
  padding-inline: var(--root-padding-inline);
}

.container--content { max-width: calc(var(--container-content) + 2 * 60px); }
.container--md      { max-width: var(--container-md); }
.container--wide    { max-width: var(--container-wide); }

/* ==========================================================================
   10. Buttons
   Hover im Original: genau eine Regel, background-color -> theme-5 (#000).
   Kein Textfarbwechsel, kein Transform, kein Schatten, keine Duration.
   ========================================================================== */

.button {
  display: inline-block;
  border: 0;
  background-color: var(--color-theme-4);
  color: var(--color-theme-1);
  border-radius: var(--radius-5);
  padding: 14px 22px;
  font-family: inherit;
  font-size: var(--fs-button);
  font-weight: var(--fw-button);
  line-height: var(--lh-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  min-height: var(--tap-target-min);
}

.button:hover,
.button:focus-visible {
  background-color: var(--color-theme-5);
}

.button--light {
  background-color: var(--color-theme-1);
  color: var(--color-theme-5);
}

.button--light:hover,
.button--light:focus-visible {
  background-color: var(--color-theme-5);
  color: var(--color-theme-1);
}

/* ==========================================================================
   11. Zugaenglichkeit
   ========================================================================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  transform: translateY(-200%);
  background: var(--color-theme-5);
  color: var(--color-theme-1);
  padding: 12px 20px;
}

.skip-link:focus {
  transform: none;
}

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--color-theme-5);
  outline-offset: 2px;
}