/*
 * DEPLA Theme: Design-Tokens
 * Quelle: docs/analyse/design-tokens.json (Messwerte der Live-Seite, kein Theme-Code).
 * Nur Custom Properties, keine Regeln. Alle anderen Dateien verwenden ausschliesslich diese Tokens.
 * Breakpoints (in Media Queries nicht als var() nutzbar, daher hier nur dokumentiert):
 *   mobil      bis 767px   (max-width: 767px)
 *   tablet     768 bis 1024px
 *   desktop    ab 1025px  (min-width: 1025px)
 */

:root {
  /* Farben */
  --color-primary: #ff5100;
  --color-primary-90: rgba(255, 81, 0, 0.9);
  --color-secondary: #2e3841;
  --color-text: #555555;
  --color-heading: #3b3c42;
  --color-text-light: #b4b4b4;
  --color-text-dark: #4c4c4c;
  --color-text-muted: #969696;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-on-dark: rgba(255, 255, 255, 0.6);
  --color-on-dark-strong: rgba(255, 255, 255, 0.8);
  --color-white-90: rgba(255, 255, 255, 0.9);
  --color-white-50: rgba(255, 255, 255, 0.5);
  --color-white-30: rgba(255, 255, 255, 0.3);
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-05: rgba(255, 255, 255, 0.05);
  --color-surface-muted: #f8f8f8;
  --color-gray-100: #eeeeee;
  --color-gray-200: #dddddd;
  --color-border: #dcdcdc;
  --color-border-input: rgba(0, 0, 0, 0.2);
  --color-border-subtle: rgba(0, 0, 0, 0.1);
  --color-border-on-dark: rgba(255, 255, 255, 0.27);
  --color-button-dark: #333333;
  --color-overlay: rgba(0, 0, 0, 0.7);
  --color-overlay-nav: rgba(0, 0, 0, 0.8);
  --color-overlay-consent: rgba(0, 0, 0, 0.6);
  --color-overlay-compare: rgba(0, 0, 0, 0.5);
  --color-error: #ff0000;              /* live: Pflichtfeld-Stern und Fehlertext (form p.error, span.mandatory) */
  --color-border-input-hover: #999999; /* live: Rahmen der Formularfelder bei Hover */

  /* Werte aus dem Bestands-CSS, nicht in design-tokens.json (Legacy-Klassen color-gray, bb-dark, To-top-Rahmen) */
  --color-text-gray: #7f7f7f;
  --color-border-light: #e5e5e5;
  --color-totop-border: #ebedeb;

  /* Schrift */
  --font-body: 'Open Sans', Arial, sans-serif;
  --font-heading: 'Montserrat', Arial, sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-bold: 700;
  --fs-base: 1rem;
  --lh-base: 1.8;
  --lh-heading: 1.3;
  --lh-lead: 1.5;

  /* Ueberschriften: Desktop-Werte, mobil in base.css per Media Query (Original springt hart bei 768px) */
  --fs-h1: 3rem;
  --fs-h2: 2.333rem;
  --fs-h3: 1.867rem;
  --fs-h4: 1.5rem;
  --fs-h5: 1.333rem;
  --fs-h6: 1.2rem;
  --fs-h1-mobile: 1.733rem;
  --fs-h2-mobile: 1.6rem;
  --fs-h3-mobile: 1.467rem;
  --fs-h4-mobile: 1.2rem;
  --fs-h5-mobile: 1.067rem;
  --fs-h6-mobile: 1.067rem;
  --heading-mb: 25px;
  --heading-mb-mobile: 10px;
  --h1-mb-mobile: 15px;
  --p-mb: 15px;

  /* Leadtext-Stufen (Legacy font-size-xxs bis font-size-l) */
  --fs-lead-xxs: 1.2rem;
  --fs-lead-xs: 1.467rem;
  --fs-lead-s: 1.667rem;
  --fs-lead-m: 2.333rem;
  --fs-lead-l: 3rem;
  --fs-lead-xxs-mobile: 0.933rem;
  --fs-lead-xs-mobile: 1.067rem;
  --fs-lead-s-mobile: 1.133rem;
  --fs-lead-m-mobile: 1.2rem;
  --fs-lead-l-mobile: 1.467rem;

  --fs-nav: 0.8125rem;
  --fs-nav-mobile: 1rem;
  --fs-nav-overlay: 1.7rem;
  --lh-nav-overlay: 2rem;
  --fs-button: 0.9rem;
  --fs-button-form: 0.8rem;
  --fs-form: 0.9rem;        /* Formularfelder 14.4px */
  --fs-small: 0.9rem;
  --fs-footer: 0.93rem;
  --lh-footer: 1.6rem;
  --ls-iconbox: 1px;

  /* Layout */
  --container-max: 1240px;
  --container-pad: 40px;
  --container-pad-mobile: 20px;
  --content-max: 1160px;
  --content-small: 720px;   /* smallwidth: 800px inkl. 40px Innenabstand */
  --content-xsmall: 570px;  /* xsmallwidth: 650px inkl. 40px Innenabstand */
  --gutter: 15px;
  --gutter-m: 30px;
  --gutter-l: 40px;
  --grid-columns: 12;

  /* Header */
  --header-h: 100px;
  --header-h-sticky: 70px;
  --header-h-mobile: 70px;
  --logo-w: 200px;
  --logo-w-sticky: 170px;
  --logo-w-mobile: 150px;
  --nav-item-gap: 15px;

  /* Elementabstaende mt-/mb- */
  --space-xxs: 20px;
  --space-xs: 30px;
  --space-s: 40px;
  --space-m: 50px;
  --space-l: 60px;
  --space-xl: 70px;
  --space-xxl: 80px;
  --space-xs-mobile: 25px;  /* Klasse *-xs-m */
  --space-m-mobile: 35px;   /* Klasse *-m-m */

  /* Skala mt-/mb- auf kleineren Breiten (live: Tablet 768 bis 1024px, Phone bis 767px) */
  --space-tablet-xxs: 25px;
  --space-tablet-xs: 25px;
  --space-tablet-s: 25px;
  --space-tablet-m: 30px;
  --space-tablet-l: 40px;
  --space-tablet-xl: 50px;
  --space-tablet-xxl: 60px;
  --space-phone-xxs: 25px;
  --space-phone-xs: 25px;
  --space-phone-s: 20px;
  --space-phone-m: 25px;
  --space-phone-l: 30px;
  --space-phone-xl: 40px;
  --space-phone-xxl: 50px;

  /* Skala pt-/pb- (Elemente) auf kleineren Breiten */
  --pad-tablet-xxs: 30px;
  --pad-tablet-xs: 40px;
  --pad-tablet-s: 70px;
  --pad-tablet-m: 80px;
  --pad-tablet-l: 100px;
  --pad-tablet-xl: 110px;
  --pad-tablet-xxl: 130px;
  --pad-phone-xxs: 30px;
  --pad-phone-xs: 40px;
  --pad-phone-s: 50px;
  --pad-phone-m: 60px;
  --pad-phone-l: 70px;
  --pad-phone-xl: 70px;
  --pad-phone-xxl: 80px;

  /* Sektionsabstaende article-pt-/article-pb- */
  --section-xxs: 30px;
  --section-xs: 50px;
  --section-s: 90px;
  --section-m: 100px;
  --section-l: 120px;
  --section-xl: 150px;
  --section-xxl: 170px;
  --section-default: 160px; /* article-pt/-pb ohne Groesse, nur Artikel ohne fullwidth, ab 768px */
  --section-base: 100px;    /* Artikel ohne fullwidth und ohne Abstandsklasse */
  --section-mobile: 50px;
  --article-offset-top: 60px;

  /* Footer */
  --footer-pad-y: 65px;
  --footer-pad-y-mobile: 40px;
  --footer-pad-bottom-mobile: 75px; /* live: 40px plus Abstand unter der letzten Spalte */
  --bottom-h: 40px;
  --totop-size: 40px;
  --totop-float-size: 45px;

  /* Form, Radius, Schatten */
  --form-gap: 20px;          /* Abstand zwischen Formularzeilen */
  --form-field-pad: 15px;    /* Innenabstand Eingabefelder */
  --form-textarea-h: 317px;  /* Textarea, live 15 Zeilen */
  --radius-form: 3px;
  --radius-consent: 5px;
  --radius-circle: 50%;
  --shadow-header: 0 0 2px 2px rgba(0, 0, 0, 0.1);
  --shadow-accordion: 0 2px 2px 2px rgba(0, 0, 0, 0.03);
  --shadow-dropdown: 1px 8px 15px rgba(0, 0, 0, 0.1);
  --shadow-card-soft: 0 0 25px 0 rgba(0, 0, 0, 0.04);
  --shadow-compare-handle: 0 0 12px 0 rgba(51, 51, 51, 0.5);

  /* Bewegung */
  --ease-fast: 0.2s ease-out;
  --ease-base: 0.3s ease;
  --ease-slow: 0.4s ease;
  --ease-gallery: 0.5s ease;
  --ease-overlay: 0.5s ease;
  --ease-form: 0.15s linear;
  --hover-opacity: 0.8;

  /* Ebenen */
  --z-header: 100;
  --z-nav: 110;
  --z-burger: 120;
  --z-totop: 90;
}