/* ===========================================================================
   Purevirtual — Design Tokens
   Übernommen aus dem Claude-Design-Projekt "Purevirtual Design System"
   (design-source/_ds/.../tokens/*.css). Werte sind unverändert; ergänzt wurden
   ausschließlich die responsiven Layout-Tokens am Ende der Datei.
   =========================================================================== */

/* ------------------------------------------------------------------ Fonts --
   Matter — Purevirtual's primary and only corporate typeface (Displaay, 2017).
   Weights in brand use: Light 300, Regular 400, Medium 500.
   MatterSQ ist der Companion-Cut mit eckigen Terminals; nur für technische Daten. */
@font-face{font-family:"Matter";src:url("../fonts/Matter-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Matter";src:url("../fonts/Matter-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Matter";src:url("../fonts/Matter-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Matter SQ";src:url("../fonts/MatterSQ-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Matter SQ";src:url("../fonts/MatterSQ-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Matter SQ";src:url("../fonts/MatterSQ-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  /* --------------------------------------------------------------- Farben --
     Brand Manual 02—04 */
  --pv-ebony-blue:#182B38;   /* 01 — primary brand color */
  --pv-silver-tree:#95A6A5;  /* 02 — highlight / background */
  --pv-iron:#E9E9EA;         /* 03 — background */
  --pv-white:#FFFFFF;        /* 04 */
  --pv-black:#000000;        /* 05 */

  --pv-silver-tree-80:#AAB8B7;
  --pv-silver-tree-60:#BFCACA;
  --pv-silver-tree-40:#D5DBDB;
  --pv-silver-tree-20:#EAEDED;

  --pv-ebony-blue-80:#465561;
  --pv-ebony-blue-60:#748089;
  --pv-ebony-blue-40:#A3AAB0;
  --pv-ebony-blue-20:#D1D5D8;

  --surface-page:var(--pv-white);
  --surface-muted:var(--pv-iron);
  --surface-card:var(--pv-white);
  --surface-inverse:var(--pv-ebony-blue);
  --surface-accent:var(--pv-silver-tree);
  --surface-accent-soft:var(--pv-silver-tree-20);

  --text-strong:var(--pv-black);
  --text-body:var(--pv-ebony-blue);
  --text-muted:var(--pv-ebony-blue-60);
  --text-on-dark:var(--pv-white);
  --text-on-dark-muted:var(--pv-silver-tree);
  --text-link:var(--pv-ebony-blue);
  --text-link-hover:var(--pv-silver-tree);

  /* Hairlines sind der einzige Trenner der Marke. */
  --line-strong:var(--pv-black);
  --line-default:var(--pv-ebony-blue-40);
  --line-subtle:var(--pv-silver-tree-40);
  --line-on-dark:rgba(255,255,255,.24);
  --hairline:1px;
  --rule-strong:2px;

  /* ---------------------------------------------------------- Typografie --
     Brand Manual 02—05 & 04—09. Nie mehr als drei Schriftgrößen pro Layout,
     alle Größen durch 2 teilbar. */
  --font-core:"Matter","Helvetica Neue",Helvetica,sans-serif;
  --font-technical:"Matter SQ","Matter",ui-monospace,monospace;

  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;

  --size-display:96px;
  --size-headline-1:64px;
  --size-headline-2:48px;
  --size-headline-3:36px;
  --size-title-1:28px;
  --size-title-2:22px;
  --size-title-3:18px;
  --size-body:16px;
  --size-body-sm:14px;
  --size-caption:12px;

  --leading-display:1.02;
  --leading-headline:1.08;
  --leading-title:1.2;
  --leading-body:1.5;
  --leading-tight:1.3;

  --tracking-display:-0.02em;
  --tracking-headline:-0.015em;
  --tracking-title:-0.01em;
  --tracking-body:0em;
  --tracking-label:0.06em;

  --text-display:var(--weight-light) var(--size-display)/var(--leading-display) var(--font-core);
  --text-headline:var(--weight-regular) var(--size-headline-2)/var(--leading-headline) var(--font-core);
  --text-title:var(--weight-medium) var(--size-title-2)/var(--leading-title) var(--font-core);
  --text-copy:var(--weight-regular) var(--size-body)/var(--leading-body) var(--font-core);
  --text-label:var(--weight-medium) var(--size-caption)/1.2 var(--font-core);
  --text-data:var(--weight-regular) var(--size-body-sm)/1.4 var(--font-technical);

  /* --------------------------------------------------- Raster & Abstände --
     Brand Manual 04—08: 12 Spalten, 4 mm Bundsteg, 10 mm Mindestrand.
     Bildschirm-Äquivalent: 16 px Gutter, 40 px Rand. */
  --grid-gutter:16px;
  --grid-margin:40px;
  --measure:68ch;

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:40px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;

  --container-max:1440px;

  /* ----------------------------------------------------------- Effekte ----
     Die Marke ist flach und orthogonal: keine Schatten, keine Verläufe,
     rechte Winkel. */
  --radius-none:0;
  --radius-sm:2px;

  --border-hairline:1px solid var(--line-default);
  --border-subtle:1px solid var(--line-subtle);
  --border-strong:2px solid var(--line-strong);
  --border-on-dark:1px solid var(--line-on-dark);

  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --duration-fast:120ms;
  --duration-base:200ms;
  --duration-slow:400ms;

  --focus-ring:2px solid var(--pv-ebony-blue);
  --focus-offset:2px;

  /* ======================================================================
     Ergänzung für die Website: fließende Layout-Tokens.
     Der Seitenrand folgt dem 10-mm-Raster (40 px) und schrumpft auf kleinen
     Displays proportional, statt per Breakpoint zu springen.
     ====================================================================== */
  --pv-margin:clamp(20px, 4.4vw, 40px);
  --pv-gutter:clamp(12px, 1.6vw, 16px);
  --pv-section-y:clamp(48px, 7vw, 72px);
  --pv-shell:1600px;
}

/* Auf schmalen Displays eine Stufe kleiner — bleibt auf der geraden Zahlenleiter. */
@media (max-width: 640px){
  :root{
    --size-title-1:24px;
    --size-title-2:20px;
    --size-title-3:16px;
    --size-headline-3:28px;
  }
}