/* =====================================================================
   ProBit Design-Tokens  —  zentrale Design-System-Variablen (SSoT)
   Website-pbautomation · angelegt 2026-07-01 (Audit-Modernisierung P2)
   Regel: Look-Entscheidungen NUR hier ändern, nie inline pro View.
   Alle Farben AA-geprüft (>=4.5:1 für Text auf ihrem Standard-Grund).
   ===================================================================== */

:root {
  /* --- Marken-Farben ------------------------------------------------ */
  --pb-blue:        #002F66;  /* Primär (Header, Headings, Links)      */
  --pb-blue-700:    #04407a;
  --pb-blue-600:    #055089;  /* Hover/Interaktion (aus harrison-pro)  */
  --pb-navy:        #0c2846;  /* NEU Marke: tiefes Navy (Hero-Bühne)   */
  --pb-navy-800:    #14385f;  /* Navy heller (Flächen/Würfel)          */
  --pb-cyan:        #29a3e0;  /* NEU Marke: Cyan-Akzent (Bits)         */
  --pb-cyan-bright: #4fc3ef;  /* Cyan hell (Highlights auf Navy)       */
  --pb-cyan-ink:    #1c6fa8;  /* Cyan dunkel — AA-tauglich für Text auf Hell */
  --pb-red:         #b03022;  /* Alt-Akzent (umschaltbar) — AA ~5.9:1  */
  --pb-red-bright:  #c9493b;  /* Nur dekorativ, NICHT für Text         */
  --pb-grey:        #d9d8d7;  /* Marken-Grau (Seiten-Hintergrund)      */

  /* --- Neutrale / Text ---------------------------------------------- */
  --pb-ink:         #1a1a1a;  /* Fließtext ~17:1                        */
  --pb-muted:       #565656;  /* Sekundärtext ~7:1                      */
  --pb-line:        #e4e4e4;  /* Trennlinien/Borders                   */
  --pb-surface:     #ffffff;  /* Karten/Content-Flächen                */
  --pb-surface-alt: #f4f4f3;  /* leicht abgesetzte Fläche              */
  --pb-canvas:      #e9edf1;  /* Unterseiten-Canvas (Cards sitzen drauf) */
  --pb-card-border: #e2e5e8;  /* Card-Rahmen auf Canvas                 */

  /* --- Semantische Rollen -------------------------------------------
     Akzent zentral umschaltbar: --pb-accent hier ändern = ganze Seite.
     Aktuell Cyan (neue Marke). Für Rot-Test: var(--pb-red) einsetzen. */
  --pb-text:            var(--pb-ink);
  --pb-text-muted:      var(--pb-muted);
  --pb-heading:         var(--pb-navy);
  --pb-link:            var(--pb-navy);
  --pb-link-hover:      var(--pb-cyan-ink);
  --pb-accent:          var(--pb-cyan);      /* Flächen/Grafik (auf Navy) */
  --pb-accent-ink:      var(--pb-cyan-ink);  /* Akzent-TEXT auf Hell (AA) */
  --pb-accent-on-navy:  var(--pb-cyan-bright);
  --pb-bg:              var(--pb-grey);
  --pb-hero-bg:         var(--pb-navy);

  /* --- Typografie-Skala (Basis 1.125rem / ~18px, Ratio ~1.2) -------- */
  --pb-font-sans:  inherit; /* Theme-Font beibehalten (self-hosted)     */
  --pb-fs-sm:    0.9375rem;  /* 15px  Kleintext/Meta                    */
  --pb-fs-base:  1.125rem;   /* 18px  Fließtext                         */
  --pb-fs-md:    1.35rem;    /* 21-22px  Lead/Intro                     */
  --pb-fs-lg:    1.62rem;    /* h3                                      */
  --pb-fs-xl:    1.95rem;    /* h2                                      */
  --pb-fs-2xl:   2.4rem;     /* h1 klein                                */
  --pb-fs-3xl:   3.0rem;     /* Hero-Headline                           */
  --pb-lh-tight: 1.15;
  --pb-lh-snug:  1.35;
  --pb-lh-body:  1.7;

  /* --- Spacing-Skala ------------------------------------------------- */
  --pb-space-1: 0.25rem;
  --pb-space-2: 0.5rem;
  --pb-space-3: 0.75rem;
  --pb-space-4: 1rem;
  --pb-space-5: 1.5rem;
  --pb-space-6: 2.25rem;
  --pb-space-7: 3.5rem;
  --pb-space-8: 5rem;
  --pb-space-9: 7rem;

  /* --- Display-Skala (Signalfluss) - Tag 9: site-weit vereinheitlicht.
     Vorher liefen Startseite und Unterseiten auf zwei getrennten Skalen
     (H1 61 vs 48, Sektions-H2 48 vs 31 vs 26 vs 12). Rollen statt Tags:  */
  --pb-fs-display:  clamp(2.2rem, 5.4vw, 3.8rem);  /* Hero-H1 -> 61px @1440, 35px @375 */
  --pb-fs-section:  clamp(2rem, 4.2vw, 3rem);      /* Sektions-H2 -> 48px       */
  --pb-fs-sub:      clamp(1.5rem, 2.6vw, 1.95rem); /* H2 im Fliesstext -> 31px  */

  /* --- Layout -------------------------------------------------------- */
  /* EIN Breiten-System (Tag 9). Vorher: 1280/1200/1080/1032/1016/840/640. */
  --pb-container:   1200px;   /* Sektionen, Raster, Hero-Inner            */
  --pb-container-narrow: 820px;
  --pb-fs-lede:     clamp(1.15rem, 1.6vw, 1.5rem); /* Lede ueber vollbreitem Inhalt -> 23px @1440 */
  --pb-measure-read:  680px;  /* Lesespalte -> ~76 Zeichen/Zeile (gemessen) */
  --pb-gutter:        2rem;   /* Innenabstand aller Container             */

  /* Full-Bleed ohne Scrollbar-Versatz (Tag 9): 100vw enthaelt die Scrollbar,
     100% nicht - dadurch sassen ausbrechende Sektionen 7-8px links neben dem
     uebrigen Inhalt (auf 375px sichtbar: Hero-H1 bei 24, Text bei 32).
     --pb-sbw setzt site-fx.js; ohne JS bleibt 0px = bisheriges Verhalten. */
  --pb-sbw:       0px;
  --pb-bleed-w:   calc(100vw - var(--pb-sbw));
  --pb-bleed-m:   calc(-50vw + 50% + var(--pb-sbw) / 2);
  --pb-rhythm:  clamp(3.5rem, 6vw, 5.5rem);   /* Sektions-Rhythmus -> 86px */

  /* --- Radius / Shadow / Motion ------------------------------------- */
  --pb-radius-sm: 6px;
  --pb-radius-md: 12px;
  --pb-radius-lg: 20px;
  --pb-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
  --pb-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
  --pb-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.18);
  --pb-transition: 180ms ease;

  /* --- Fokus (A11y) -------------------------------------------------- */
  --pb-focus-ring:   3px solid var(--pb-blue-600);
  --pb-focus-offset: 2px;
}

/* =====================================================================
   Basis-A11y: sichtbarer Tastatur-Fokus (WCAG 2.4.7)
   Nur bei Tastatur-Navigation (:focus-visible), nicht bei Maus-Klick.
   ===================================================================== */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--pb-focus-ring);
  outline-offset: var(--pb-focus-offset);
  border-radius: var(--pb-radius-sm);
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}