/* TwinOne AG — Design-Tokens
   Enthaelt ausschliesslich @font-face und Custom Properties (hell + dunkel).
   Reihenfolge der Stylesheets: tokens.css -> base.css -> components.css */

/* ---------------------------------------------------------------- Schrift */

@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
 src:url('/fonts/inter-latin-ext.woff2') format('woff2');
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
 src:url('/fonts/inter-latin.woff2') format('woff2');
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ------------------------------------------------------- Tokens (hell) */

:root{
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Calibri,Arial,sans-serif;

  /* Markenfarben (in beiden Modi unveraendert) */
  --c-navy:#1A356E;
  --c-blue:#1E5CC0;
  --c-gray:#666666;

  /* Flaechen */
  --c-bg:#FFFFFF;
  --c-bg-alt:#F4F7FC;
  --c-deep:#152C5E;
  --c-deep-2:#102348;
  --c-surface:#FFFFFF;
  --c-surface-alt:#FFFFFF;

  /* Text */
  --c-text:#1C2430;
  --c-text-muted:#4C5769;
  --c-text-faint:#656F86;
  --c-heading:#1A356E;

  /* Linien und Akzente */
  --c-border:#DCE3EF;
  --c-border-strong:#B9C5DC;
  /* Umriss von Bedienelementen (Buttons, Umschalter). Bewusst dunkler als
     --c-border-strong (1,74:1): WCAG 1.4.11 verlangt 3:1 fuer die Begrenzung
     von Bedienelementen. #7A88A6 erreicht 3,56:1 auf --c-bg (#FFFFFF) und
     3,31:1 auf --c-bg-alt (#F4F7FC). Keine Markenfarbe wird dafuer veraendert. */
  --c-border-control:#7A88A6;
  --c-accent:#1E5CC0;
  --c-accent-strong:#1A356E;

  /* Auf tiefer Flaeche */
  --c-on-deep:#FFFFFF;
  --c-on-deep-muted:#B7C6E4;
  --c-on-deep-border:rgba(255,255,255,.18);

  --c-focus:#1E5CC0;
  --shadow-1:0 1px 2px rgba(16,32,64,.05),0 12px 28px -18px rgba(16,32,64,.35);

  /* Kennfarbe von TwinEstate (Balken der Uebersichtsgrafik, Badge der Stationen
     05-06): gefuellt, mit weissem Text. Hell Navy (weisser Text 11,8:1), dunkel
     #2E63C4 (weisser Text 5,7:1; 3,0:1 gegen --c-bg-alt #111B2E) — beide klar abgesetzt
     von --c-accent, der Farbe von TwinAI. */
  --c-estate:#1A356E;
  --c-on-estate:#FFFFFF;

  /* Illustrationen (isometrische Bauteile, siehe .il in components.css).
     In beiden Modi gesetzt, damit die inline eingebetteten SVG den Dunkelmodus
     mitschalten. Hell (Runde 4, 06.10.2026) gegenueber der ersten Fassung
     abgedunkelt, weil Flaechen und Linien auf --c-bg-alt (#F4F7FC) zu blass
     standen: Linie --illu-line (#667DA8) erreicht 4,15:1 auf --c-bg, 3,86:1 auf
     --c-bg-alt und 3,23:1 auf der Bodenplatte --illu-ghost (#D9E4F6). Die
     Bodenplatte ist eine Flaeche (1,19:1 gegen --c-bg-alt, bewusst kein
     Linienwert), Dach/Wand/Seite bleiben durch Helligkeitsstufen getrennt.
     --illu-top2 (#DCE7FA; die erste Fassung #EEF4FD lag mit 1,03:1 auf
     --c-bg-alt praktisch auf dem Grund): 1,25:1 gegen --c-bg, 1,16:1 gegen
     --c-bg-alt, 1,31:1 gegen --illu-top, 1,76:1 gegen --illu-left2; gegen die
     Bodenplatte nur 1,03:1 — dort trennt die Umrisslinie. Nachgerechnet 06.10.2026. */
  --illu-top:#B4CCF2;
  --illu-left:#5C8BE0;
  --illu-right:#2455B0;
  --illu-top2:#DCE7FA;
  --illu-left2:#8FB0EA;
  --illu-accent:#1A356E;
  --illu-line:#667DA8;
  --illu-ghost:#D9E4F6;
  --illu-panel:#FFFFFF;

  /* Typografie */
  /* Untergrenzen bewusst niedrig: auf 360px-Geraeten muessen lange Komposita
     ("Wertschoepfungskette.") in eine Zeile passen. Obergrenzen unveraendert. */
  --fs-display:clamp(2rem,1.15rem + 4vw,4.25rem);
  --fs-h1:clamp(1.75rem,1.15rem + 2.7vw,3.25rem);
  --fs-h2:clamp(1.5rem,1.22rem + 1.15vw,2.125rem);
  --fs-h3:clamp(1.125rem,1.05rem + .35vw,1.3125rem);
  --fs-lead:clamp(1.0625rem,1rem + .45vw,1.3125rem);
  --fs-body:1.0625rem;
  --fs-sm:.9375rem;
  --fs-xs:.8125rem;
  --lh-tight:1.12;
  --lh-snug:1.3;
  --lh-normal:1.65;
  --ls-tight:-.022em;
  --ls-eyebrow:.14em;

  /* Raum */
  --sp-1:.25rem;
  --sp-2:.5rem;
  --sp-3:.75rem;
  --sp-4:1rem;
  --sp-5:1.5rem;
  --sp-6:2rem;
  --sp-7:3rem;
  --sp-8:4rem;
  --sp-9:6rem;
  --sp-10:8rem;

  /* Mass */
  --w-max:1200px;
  /* Hoehe des klebenden Kopfbereichs (.site-header__inner min-height) —
     Grundlage fuer scroll-padding-top und die Sprungziele auf /leistungen/. */
  --h-header:76px;
  --w-prose:65ch;
  --pad-x:clamp(1.25rem,5vw,3rem);

  /* Radius */
  --r-sm:2px;
  --r-md:4px;
  --r-lg:6px;

  /* Bewegung */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.4s;
}

/* ------------------------------------ Tokens (dunkel) — Systemvorgabe */

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --c-bg:#0D1524;
    --c-bg-alt:#111B2E;
    /* Der CTA-Block (.section--deep) muss sich im Dunkelmodus vom Seitengrund
       absetzen: #0A1220 lag mit 1,03:1 praktisch auf --c-bg. #13254A hebt sich
       mit 1,21:1 von --c-bg und 1,14:1 von --c-bg-alt ab (Trennung der Flaechen,
       kein Text); Text darauf: --c-on-deep 12,63:1, --c-on-deep-muted 6,88:1.
       Blauer Button (#1E5CC0) gegen das Band nur 2,41:1 — seine Begrenzung traegt
       die helle Haarlinie (5,48:1), die Ghost-Kontur liegt bei 5,54:1; weisser
       Text auf dem blauen Button 6,27:1. Nachgerechnet 06.10.2026. */
    --c-deep:#13254A;
    --c-deep-2:#080F1B;
    --c-surface:#182541;
    --c-surface-alt:#1C2A49;
    --c-text:#E6EBF5;
    --c-text-muted:#AFBBD2;
    --c-text-faint:#93A0B8;
    --c-heading:#DCE6FA;
    --c-border:#26334E;
    --c-border-strong:#3B4C70;
    /* 4,36:1 auf --c-bg (#0D1524), 4,11:1 auf --c-bg-alt, 3,40:1 auf --c-surface-alt. */
    --c-border-control:#6C7C9E;
    --c-accent:#7BA6F0;
    --c-accent-strong:#A6C2F7;
    --c-on-deep:#E6EBF5;
    --c-on-deep-muted:#9FB0CE;
    --c-on-deep-border:rgba(255,255,255,.14);
    --c-focus:#7BA6F0;
    --shadow-1:0 1px 2px rgba(0,0,0,.4),0 12px 28px -18px rgba(0,0,0,.8);
    --c-estate:#2E63C4;
    --c-on-estate:#FFFFFF;

    /* Illustrationen */
    --illu-top:#A9C4F0;
    --illu-left:#4E7ED4;
    --illu-right:#2A55A8;
    --illu-top2:#D6E3FA;
    --illu-left2:#7098DD;
    --illu-accent:#CFE0FA;
    --illu-line:#63779F;
    --illu-ghost:#21314F;
    --illu-panel:#101A2C;
  }
}

/* ------------------------------------ Tokens (dunkel) — manuell gesetzt */

:root[data-theme="dark"]{
  --c-bg:#0D1524;
  --c-bg-alt:#111B2E;
  /* wie im Block oben: --c-deep dunkel = Wert des hellen Modus */
  --c-deep:#13254A;
  --c-deep-2:#080F1B;
  --c-surface:#182541;
  --c-surface-alt:#1C2A49;
  --c-text:#E6EBF5;
  --c-text-muted:#AFBBD2;
  --c-text-faint:#93A0B8;
  --c-heading:#DCE6FA;
  --c-border:#26334E;
  --c-border-strong:#3B4C70;
  /* 4,36:1 auf --c-bg (#0D1524), 4,11:1 auf --c-bg-alt, 3,40:1 auf --c-surface-alt. */
  --c-border-control:#6C7C9E;
  --c-accent:#7BA6F0;
  --c-accent-strong:#A6C2F7;
  --c-on-deep:#E6EBF5;
  --c-on-deep-muted:#9FB0CE;
  --c-on-deep-border:rgba(255,255,255,.14);
  --c-focus:#7BA6F0;
  --shadow-1:0 1px 2px rgba(0,0,0,.4),0 12px 28px -18px rgba(0,0,0,.8);
  --c-estate:#2E63C4;
  --c-on-estate:#FFFFFF;

  /* Illustrationen */
  --illu-top:#A9C4F0;
  --illu-left:#4E7ED4;
  --illu-right:#2A55A8;
  --illu-top2:#D6E3FA;
  --illu-left2:#7098DD;
  --illu-accent:#CFE0FA;
  --illu-line:#63779F;
  --illu-ghost:#21314F;
  --illu-panel:#101A2C;
}