/* ==========================================================================
   Wabner´s Bautechnik GmbH — Token-Vertrag  (Tokens → Komponenten → Pages)
   Erstellt: 2026-08-10 · Mode T-I Quell-Klasse B · Vorlage siehe _review/varianten-karte.md
   Spezifikation: _review/varianten-karte.md

   HERLEITUNG (nicht geraten, gemessen):
   Die dominanten Farben des Firmenlogos wurden per Canvas ausgelesen
   (_review/quelle/bilder/76848d_368962…webp) und durch Firmengebaeude und
   Team-Shirts auf _DSC2891 bestaetigt:
     Blau  #1D368A  25,0 % der Nicht-Weiss-Pixel  → Anker
     Gelb  #FCE403   9,5 %                        → Signal
     Gruen #42AB35   4,9 %  ("DER RASENPAPST")    → Akzent
   Kontrast gegen Weiss: #1D368A = 10,8 : 1 → text- UND buttontauglich.
   Unterschied zur Vorlage: deren Orange durfte keinen Text tragen, deshalb trennte
   der Vertrag "Original" (500) und "Signal" (700). Die Trennung bleibt bestehen,
   damit der Vertrag nicht bricht — das Blau sitzt auf 700 und darf beides.
   Gelb traegt NIE Text auf hellem Grund (1,1 : 1), nur Flaechen auf Dunkel.
   ========================================================================== */

/* ---------- Fonts (lokal, kein CDN — Absolut-Regel 3) ---------- */
/* Lizenzen: fonts/OFL.txt + fonts/Apache-2.0.txt
   Typo-Wechsel gegenueber der Vorlage (Klasse-0-Achse Font): Playfair Display raus.
   Eine hochkontrastige Display-Serif traegt ein Moebelhaus, aber nicht einen Betrieb,
   der Minibagger vermietet und Kettensaegen repariert — das waere ein Sag-Zeig-Bruch
   (coherence). Archivo ist eine kraeftige Grotesk und liegt naeher am Logo-Wortbild. */
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo/archivo-v25-latin-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo/archivo-v25-latin-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo/archivo-v25-latin-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo/archivo-v25-latin-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('fonts/work-sans/work-sans-v24-latin-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('fonts/work-sans/work-sans-v24-latin-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('fonts/work-sans/work-sans-v24-latin-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* ================= SCHICHT 1 — Roh-Paletten ================= */

  /* Brand — Logo-Blau, Anker auf 700 */
  --ws-brand-50:  #eff3fc;
  --ws-brand-100: #dde5f8;
  --ws-brand-200: #bccbf0;
  --ws-brand-300: #93a9e2;
  --ws-brand-400: #6a84d0;
  --ws-brand-500: #4761b8;  /* Flaechen, Ziffern, Linien */
  --ws-brand-600: #2f489e;
  --ws-brand-700: #1d368a;  /* Marken-Original — Text + Buttons (10.8:1) */
  --ws-brand-800: #16296a;
  --ws-brand-900: #101e4e;
  --ws-brand-950: #0a1332;

  /* Akzente aus dem Logo */
  --ws-accent-yellow: #fce403;  /* Signal auf Dunkel/Blau — NIE Text auf Hell (1.1:1) */
  --ws-accent-yellow-dim: #d8c400;
  --ws-accent-green:  #42ab35;  /* "DER RASENPAPST"-Bogen — Rasen-/Garten-Bezug */
  --ws-accent-green-deep: #2f7d25;  /* texttauglich auf Weiss (4.6:1) */

  /* Neutrals — kuehl, minimal blaustichig (Bildwelt: Blech, Lack, Beton) */
  --ws-neutral-50:  #f8f9fb;
  --ws-neutral-100: #f1f3f7;
  --ws-neutral-200: #e4e7ee;
  --ws-neutral-300: #d0d5e0;
  --ws-neutral-400: #a6adbd;
  --ws-neutral-500: #828a9c;
  --ws-neutral-600: #626a7c;
  --ws-neutral-700: #494f5e;
  --ws-neutral-800: #313644;
  --ws-neutral-900: #1e222c;
  --ws-neutral-950: #11141b;

  /* ================= SCHICHT 2 — Rollen ================= */

  /* Flaechen */
  --ws-surface-page:      var(--ws-neutral-50);   /* Hell-Default (color.md §2) */
  --ws-surface-raised:    #ffffff;
  --ws-surface-sunken:    var(--ws-neutral-100);
  --ws-surface-tint:      var(--ws-brand-50);     /* Brand-Tint-Zone (sanfte Stufe vor Dark) */
  --ws-surface-inverse:   var(--ws-neutral-950);  /* max 1 Section pro Page */
  --ws-surface-border:    var(--ws-neutral-200);
  --ws-surface-border-strong: var(--ws-neutral-300);

  /* Text */
  --ws-text-primary:      var(--ws-neutral-900);  /* 15.6:1 auf Page */
  --ws-text-secondary:    var(--ws-neutral-700);  /*  8.5:1 auf Page */
  --ws-text-muted:        var(--ws-neutral-600);  /*  5.5:1 auf Page */
  --ws-text-on-brand:     #ffffff;                /* APCA 84 auf brand-700 */
  --ws-text-on-inverse:   var(--ws-neutral-100);
  --ws-text-signal:       var(--ws-brand-700);    /* Wort-Akzent in Headlines */
  --ws-text-placeholder:  var(--ws-neutral-600);  /* neutral-500 gemessen Lc 64 -> zu schwach (Welle 420) */

  /* Aktionen */
  --ws-action-bg:         var(--ws-brand-700);
  --ws-action-bg-hover:   var(--ws-brand-800);
  --ws-action-bg-active:  var(--ws-brand-900);
  --ws-action-text:       #ffffff;
  --ws-action-ghost-border: var(--ws-neutral-900);
  --ws-action-ghost-text:   var(--ws-neutral-900);

  /* Signal-Orte (color.md §11 Einbau-Orte) */
  --ws-signal-flat:       var(--ws-brand-500);    /* Flaechen, Balken, Marker */
  --ws-signal-numeric:    var(--ws-brand-700);    /* grosse Ziffern ab 48px */
  --ws-signal-rule:       var(--ws-accent-yellow); /* Trennlinien — Gelb traegt hier keinen Text */
  --ws-focus-ring:        var(--ws-brand-700);

  /* ================= SCHICHT 3 — Typografie ================= */
  --ws-font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ws-font-body:    'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fluid-Skala (Utopia-Prinzip: 390px → 1440px Viewport) */
  --ws-step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);   /* 14 → 15  Meta */
  --ws-step-0:  clamp(1rem, 0.96rem + 0.19vw, 1.125rem);         /* 16 → 18  Body */
  --ws-step-1:  clamp(1.125rem, 1.06rem + 0.29vw, 1.3125rem);    /* 18 → 21  Lead */
  --ws-step-2:  clamp(1.375rem, 1.25rem + 0.57vw, 1.75rem);      /* 22 → 28  H3 */
  --ws-step-3:  clamp(1.75rem, 1.5rem + 1.14vw, 2.5rem);         /* 28 → 40  H2 */
  --ws-step-4:  clamp(2.25rem, 1.8rem + 2.1vw, 3.5rem);          /* 36 → 56  H1-Sub */
  --ws-step-5:  clamp(3rem, 1.9rem + 5.4vw, 6.75rem);           /* 48 → 108 H1 / Display */
  --ws-step-6:  clamp(3.5rem, 2.2rem + 5.9vw, 7rem);             /* 56 → 112 Kennzahl */

  /* Rollen-Bindung: eine Rolle = eine Groesse/Familie/Weight/Line-Height site-weit */
  --ws-h1-size: var(--ws-step-5);
  --ws-h1-weight: 700;          /* Archivo hat kein 800 */
  --ws-h1-lh: 1.02;
  --ws-h1-ls: -0.022em;         /* Grotesk vertraegt engere Laufweite als die Serif */

  --ws-h2-size: var(--ws-step-3);
  --ws-h2-weight: 600;
  --ws-h2-lh: 1.12;
  --ws-h2-ls: -0.008em;

  --ws-h3-size: var(--ws-step-2);
  --ws-h3-weight: 600;
  --ws-h3-lh: 1.2;

  --ws-body-size: var(--ws-step-0);
  --ws-body-weight: 400;
  --ws-body-lh: 1.65;

  --ws-lead-size: var(--ws-step-1);
  --ws-lead-lh: 1.5;

  --ws-meta-size: var(--ws-step--1);
  --ws-meta-weight: 500;
  --ws-meta-ls: 0.02em;

  --ws-numeric-size: var(--ws-step-6);
  --ws-numeric-weight: 500;

  /* ================= Raum, Form, Bewegung ================= */
  --ws-space-3xs: 0.25rem;
  --ws-space-2xs: 0.5rem;
  --ws-space-xs:  0.75rem;
  --ws-space-s:   1rem;
  --ws-space-m:   1.5rem;
  --ws-space-l:   2.25rem;
  --ws-space-xl:  3.5rem;
  --ws-space-2xl: 5rem;
  --ws-space-3xl: clamp(4rem, 3rem + 5vw, 8rem);   /* Section-Padding vertikal */

  --ws-container:      75rem;   /* 1200px Lesebreite */
  --ws-container-wide: 90rem;   /* 1440px fuer Medien-Grids */
  --ws-container-text: 42rem;   /* 672px  Fliesstext-Maximum (45–75 Zeichen) */
  --ws-gutter: clamp(1.25rem, 1rem + 2vw, 2.5rem);

  /* Form-Sprache: technisch-kantig statt weich (Klasse-0-Achse Radius) */
  --ws-radius-xs: 0px;
  --ws-radius-s:  2px;
  --ws-radius-m:  4px;
  --ws-radius-l:  8px;
  --ws-radius-pill: 999px;

  --ws-elev-1: 0 1px 2px rgb(17 20 27 / 0.06), 0 1px 1px rgb(17 20 27 / 0.04);
  --ws-elev-2: 0 4px 12px rgb(17 20 27 / 0.08), 0 1px 3px rgb(17 20 27 / 0.05);
  --ws-elev-3: 0 14px 34px rgb(17 20 27 / 0.12), 0 3px 8px rgb(17 20 27 / 0.06);

  --ws-dur-fast:  180ms;
  --ws-dur-base:  320ms;
  --ws-dur-slow:  620ms;
  --ws-ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ws-ease-in-out: cubic-bezier(0.45, 0.05, 0.55, 0.95);

  /* Mikro-Basics (color.md §11 — Einbau-Orte, die sonst grau bleiben) */
  accent-color: var(--ws-brand-700);
  color-scheme: light;
  --ws-scrim-hero: linear-gradient(
    to top,
    rgb(10 19 50 / 0.82) 0%,
    rgb(10 19 50 / 0.58) 32%,
    rgb(10 19 50 / 0.20) 62%,
    rgb(10 19 50 / 0.05) 100%
  );
}

/* Mikro-Orte, die Farbe tragen muessen */
::selection { background: var(--ws-accent-yellow); color: var(--ws-brand-950); }
::marker { color: var(--ws-signal-flat); }
:focus-visible {
  outline: 3px solid var(--ws-focus-ring);
  outline-offset: 2px;
  border-radius: var(--ws-radius-xs);
}
html { -webkit-tap-highlight-color: rgb(29 54 138 / 0.18); }

@media (prefers-reduced-motion: reduce) {
  :root { --ws-dur-fast: 1ms; --ws-dur-base: 1ms; --ws-dur-slow: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}