/* =====================================================================
   5FSoftware · Design Tokens (Layer 1 Brand Book + Layer 2 Web) · v2
   Stand 07/2026 · inkl. Kundenfeedback Juli: --c-neutral-200 #f7f7f7
   Regel: Abschnitts-Hintergründe nur Weiß oder Grau — Dunkelblau nur
   für größere Karten/Slider (nie ganze Sektionen).
   ===================================================================== */

/* Inter Variable · self-hosted (DSGVO) — woff2 aus dem offiziellen
   Release (rsms/inter v4.1), liegt in ../fonts/ */
@font-face{font-family:"Inter var";font-weight:100 900;font-style:normal;font-display:swap;
  src:url("../fonts/InterVariable.woff2") format("woff2-variations")}

:root{
  /* ─── LAYER 1 · BRAND BOOK ─── */
  --c-base:#1c2433;
  --c-white:#ffffff;
  --c-neutral-200:#f7f7f7;  /* Web-Erweiterung: heller Flächen-Hintergrund (Kundenfeedback Juli 2026) */
  --c-neutral-300:#ededed;
  --c-neutral-400:#cecece;
  --c-primary:#432df4;
  --c-red:#ed3b51;
  --c-amber:#f6a600;
  --c-green:#83cc8e;
  --c-red-t1:#f17d8b;     --c-red-t2:#f4bec5;
  --c-amber-t1:#fbc63e;   --c-amber-t2:#ffe67b;
  --c-primary-t1:#7a70f7; --c-primary-t2:#b2b2f9;
  --c-green-t1:#addfb3;   --c-green-t2:#d7f2d9;

  --font:"Inter var","Inter",system-ui,sans-serif;
  --fw-light:300; --fw-light-2:350; --fw-regular:400; --fw-regular-2:450;
  --fw-medium:500; --fw-medium-2:550; --fw-semibold:600;

  --fs-h1:clamp(48px,6vw,90px);
  --fs-h2:clamp(32px,4vw,57px);
  --fs-h3:clamp(26px,3vw,41px);
  --fs-h4:clamp(22px,2.4vw,28px);
  --fs-h5:clamp(18px,1.8vw,22px);
  --fs-h6:17px;
  --fs-body:16px; --fs-subline:15px; --fs-caption:13px;
  --fs-body-lg:17px; --fs-body-sm:14px; --fs-micro:12px; --fs-lead:clamp(17px,1.6vw,20px); --radius:10px; --radius-sm:8px; --radius-pill:999px; --fs-display-xl:clamp(96px,14vw,180px); --c-primary-hover:#3520d4; --r-icon:12px; --c-tint-1:#efedfe; --c-tint-2:#f6f5ff; --fs-h1-inner:clamp(34px,4.5vw,52px);
  --ls-h1:-0.030em; --ls-h2:-0.025em; --ls-h3:-0.015em; --ls-body:-0.010em;
  --lh-heading:1.05; --lh-body:1.25;

  /* ─── LAYER 2 · WEB-ERWEITERUNGEN ─── */
  --c-text:var(--c-base);
  --c-text-muted:#4f5567;
  --c-bg:var(--c-white);
  --c-bg-subtle:var(--c-neutral-200);
  --c-border:var(--c-neutral-400);
  --c-border-subtle:var(--c-neutral-300);
  /* Audit 27.07 · WCAG 1.4.11: Rahmen von Formular-Steuerelementen brauchen
     3:1 gegen die Fläche. #cecece liefert nur 1,57:1 — untauglich. Dieser Ton
     ist --c-base bei 54 % auf Weiß (also aus der Markenfamilie, kein fremdes
     Grau) und misst 3,52:1 auf Weiß, 3,28:1 auf #f7f7f7, 3,01:1 auf #ededed.
     NUR für Eingabefelder — dekorative Kartenrahmen bleiben --c-border. */
  --c-border-field:#848991;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --r-sm:6px; --r-btn:10px; --r-card:20px; --r-card-lg:24px; --r-pill:100px;

  --sh-1:0 1px 3px rgba(28,36,51,0.08);
  --sh-2:0 4px 12px rgba(28,36,51,0.12);
  --sh-3:0 12px 40px rgba(28,36,51,0.16);

  --dur:0.2s;
  --ease:cubic-bezier(0.25,0.46,0.45,0.94);

  --wrap:1200px;
  --wrap-in:calc(var(--wrap) - 2 * var(--s5));
  --bp-mobile:520px;
  --bp-tablet:768px;
  --bp-desktop:1024px;
}

/* ─── Basis-Typografie (Hello Theme bringt eigenen Reset mit) ─── */
body{font-family:var(--font);font-weight:var(--fw-regular-2);font-size:var(--fs-body);
  line-height:var(--lh-body);letter-spacing:var(--ls-body);color:var(--c-text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv01","cv02","cv03","cv04";font-variation-settings:"opsz" 14}
html{scroll-behavior:smooth;scroll-padding-top:84px}
img,svg{max-width:100%;height:auto}

/* ─── Links: Design-System-Regel, überschreibt Hello-Platzhalter #c36 ─── */
a{color:var(--c-primary);text-decoration:none}
a:hover,a:focus,a:active{color:var(--c-primary)}  /* Guard gegen Hellos Platzhalter (#c36 = Pink!) und #54595f, auch :focus/:active abdecken. Global ohne Underline; Links im Fließtext unterstrichen (WCAG 1.4.1), Regel am Ende von 5f-components.css. */

/* ─── Headings außerhalb von Elementor (Blog-Fallback, Suche, 404) ─── */
h1,h2,h3,h4,h5,h6{font-weight:var(--fw-medium-2);line-height:var(--lh-heading);color:var(--c-base)}
/* Audit 27.07, ZURÜCKGENOMMEN 27.07 (Theme 1.1.1).
   Hier stand `h1..h6{overflow-wrap:break-word}` als Auffangnetz für lange
   Komposita. Die Begründung im Audit war falsch: break-word greift nicht
   erst beim Überlauf des Viewports, sondern sobald ein Wort breiter ist
   als sein CONTAINER. In einem Hero mit 76px-Headline passiert das
   ständig — das Wort wird ohne Trennstrich mitten durchgeschnitten UND
   die Headline bekommt eine Zeile mehr.

   Folge, gemessen an .hero5f--a mit „Wirtschaftsprüfungsgesellschaften":
     320px  Hero 657 → 779px   (+122)
     390px  Hero 636 → 758px   (+122)
     1440px Hero 628 → 668px   (+40)
   Das Punktraster-Canvas liegt mit inset:0 auf dieser Box, skaliert also
   mit — dieselbe Punktzahl auf anderer Fläche, das Muster verschiebt sich.
   Der Überlauf, den die Regel verhindern sollte, trat dabei gar nicht auf
   (scrollWidth == clientWidth in beiden Fassungen).

   Der dokumentierte Weg für lange Komposita bleibt ­ im Elementor-Feld;
   das steht so im Redaktionshandbuch. Keine globale Heading-Regel. */
h1{font-size:var(--fs-h2);letter-spacing:var(--ls-h2)}
h2{font-size:var(--fs-h3);letter-spacing:var(--ls-h3)}
h3{font-size:var(--fs-h4)}

/* ─── Skip-Link (BFSG / WCAG 2.4.1) ─── */
.skip{position:absolute;left:-9999px;top:0;background:var(--c-base);color:var(--c-white);
  padding:10px 14px;border-radius:var(--r-sm);font-weight:var(--fw-semibold);font-size:14px;z-index:200}
.skip:focus{left:var(--s4);top:var(--s4)}
main[tabindex="-1"]:focus{outline:none}

/* ─── Globaler Fokus + Reduced Motion (WCAG 2.2 AA) ─── */
:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px;border-radius:var(--r-sm)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
  html{scroll-behavior:auto}
  /* Audit 27.07 · Die alten Selektoren trafen nur die Katalog-Klassen aus der
     Komponenten-Bibliothek. Die Widgets geben andere Klassen aus — das Raster
     lief bei „Bewegung reduzieren" also weiter. Beide Sätze bleiben stehen. */
  .hero-home canvas,.cta canvas{display:none}
  .pr-divider canvas,
  .rf2-cta canvas,.vb2-einsatz canvas{display:none}
}