/* tokens.css: eine Quelle fuer Farbe, Schrift, Abstand, Form, Bewegung (Theme blechline).
   Herkunft: 20_blechline/web/theme/assets/blechline-tokens.css (Shopify-Fassung), fuer WordPress bereinigt.
   Werte: 00_gruppe/marke/ci-blechline.md. Kein sichtbarer Text unter 13 px (--t-mikro). */
:root{
  --bl-blau-500:#0082b4;--bl-blau-600:#005f85;--bl-blau-800:#003f5a;--bl-blau-100:#c8e1f0;--bl-blau-50:#eef6fb;
  --bl-ink:#16223a;--bl-text-2:#516079;--bl-text-3:#5d6b83;
  --bl-flaeche:#f5f7fa;--bl-linie:#e5e8ef;--bl-linie-2:#d5dbe4;
  --bl-metall-1:#eef2f5;--bl-metall-2:#c3ccd4;--bl-metall-3:#7c8794;
  --bl-gut:#1f7a4d;--bl-warn:#b45309;--bl-fehler:#b3261e;--bl-weiss:#fff;
  --bl-f-kopf:'Barlow','Helvetica Neue',Arial,sans-serif;
  --bl-f-text:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --t-display:clamp(34px,5vw,56px);--t-h1:clamp(28px,3.6vw,42px);--t-h2:clamp(24px,2.8vw,34px);
  --t-h3:clamp(18px,1.5vw,21px);--t-text:clamp(16px,.35vw + 14.6px,17px);--t-klein:14px;--t-mikro:13px;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:72px;--s-9:104px;
  --bl-max:1240px;--bl-rand:20px;--bl-sektion:var(--s-7);
  --r-s:8px;--r-m:14px;--r-pill:8px;/* Inhaber 2026-10-19: keine Halbkreis-Knöpfe, nur Eckenradius (CI 8 px). Name bleibt, damit alle Verweise greifen */
  --sh-1:0 1px 2px rgba(22,34,58,.06),0 1px 1px rgba(22,34,58,.04);--sh-2:0 10px 28px -10px rgba(22,34,58,.22);
  --m-fast:120ms;--m-base:200ms;--m-slow:320ms;--m-kurve:cubic-bezier(.2,.7,.3,1);
}
@media (min-width:750px){:root{--bl-rand:28px;--bl-sektion:var(--s-9)}}
::selection{background:var(--bl-blau-100);color:var(--bl-ink)}
h1,h2,h3,h4{text-wrap:balance;hyphens:manual}
p,li{text-wrap:pretty}
table,dl,.bl-zahl{font-variant-numeric:tabular-nums}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--bl-blau-500);outline-offset:3px;border-radius:var(--r-s)}
:where(.b-schluss,.b-fuss,.b-hero--dunkel) :where(a,button,input,summary):focus-visible{outline-color:#fff}
.rte a{color:var(--bl-blau-600);text-underline-offset:.18em;text-decoration-thickness:1px}
.rte a:hover{color:var(--bl-blau-800);text-decoration-thickness:2px}
@media (prefers-reduced-motion:no-preference){
  html.bl-motion .bl-reveal{opacity:0;transform:translateY(10px);transition:opacity var(--m-slow) var(--m-kurve),transform var(--m-slow) var(--m-kurve)}
  html.bl-motion .bl-reveal.ist-da{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important}
  .bl-reveal{opacity:1!important;transform:none!important}
}
