/* =====================================================================
   tokens.css — die einzige Quelle fuer Farben, Typo-Skala und Basisregeln.
   Eingebunden von index.html, thesis.html und comvm.html.

   Aenderungen hier wirken auf allen Seiten. Vorher galt: jede Farbaenderung
   musste an drei Stellen nachgezogen werden.

   NICHT hier drin, weil pro Seite unterschiedlich:
     --gut   (Seitenrand)      index 3rem   · Unterseiten 3.2rem
     --maxw  (Inhaltsbreite)   index 1240px · Unterseiten 1280px
   Diese beiden stehen weiterhin im :root der jeweiligen Datei.
   ===================================================================== */

:root{
  /* --- Farbe --- */
  --paper:#ECE6D8;        /* Papier, Seitenhintergrund */
  --paper-2:#E4DCC9;      /* Papier, eine Stufe tiefer (Kaesten, Bildflaechen) */
  --ink:#1B1714;          /* warmes Schwarz, Fliesstext        14.3:1 auf Papier */
  --ink-2:#3A342C;        /* Sekundaertext                      9.9:1 */
  --ink-soft:#5F5748;     /* Mikro-Labels, Metadaten            5.7:1 — WCAG AA */
  --ox:#B23A28;           /* Ochsenrot, Akzent                  4.8:1 */
  --ox-2:#8E2C1D;
  /* Ochsenrot AUFGEHELLT — gilt nur auf dunklem Grund. Das normale --ox erreicht
     auf --ink nur 3,0:1 und faellt damit unter die Lesbarkeitsgrenze von 4,5:1. */
  --ox-light:#D9705C;     /* 5,5:1 auf --ink */         /* Ochsenrot dunkel, Text auf Papier */
  --line:rgba(27,23,20,.20);
  --line-2:rgba(27,23,20,.34);

  /* --- Typo-Skala: 10 Stufen.
         Klein 1.2x (dort zaehlt die absolute Differenz), Display 1.4x.
         Werte gerundet bei 1440px Viewport. --- */
  --t-1:clamp(.60rem,.56rem + .13vw,.66rem);    /*  9.6 → 10.6  Bildunterschrift, Mikro-Label */
  --t-2:clamp(.72rem,.69rem + .10vw,.78rem);    /* 11.5 → 12.5  Kicker, Button, Chip, Navigation */
  --t-3:clamp(.84rem,.80rem + .13vw,.94rem);    /* 13.4 → 14.7  Kleintext, Beschreibungen */
  --t-4:clamp(1rem,.95rem + .25vw,1.13rem);     /* 16   → 18.1  Fliesstext */
  --t-5:clamp(1.25rem,1.1rem + .5vw,1.56rem);   /* 20   → 24.8  Vorspann, Lead */
  --t-6:clamp(1.62rem,1.35rem + .95vw,2.19rem); /* 25.9 → 35    Kennzahl, Unterueberschrift */
  --t-7:clamp(2rem,1.4rem + 1.9vw,3.13rem);     /* 32   → 49.8  Rubrik-Ueberschrift (h2) */
  --t-8:clamp(2.4rem,1.35rem + 3.5vw,4.5rem);   /* 38.4 → 72    Feature-Schlagzeile (h3) */
  --t-9:clamp(2.9rem,1.4rem + 5.4vw,6.25rem);   /* 46.4 → 100   Cover, Folio-Ziffern */
  --t-10:clamp(3.4rem,1.5rem + 8vw,8.75rem);    /* 54.4 → 139   Schluss-Statement */

  /* --- Bewegung --- */
  --ease:cubic-bezier(.16,1,.3,1);

  /* --- Schrift --- */
  --didone:'Bodoni Moda',Didot,'Times New Roman',serif;
  --read:'Newsreader',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

/* --- Basis, auf allen drei Seiten wortgleich --- */
*{box-sizing:border-box;margin:0;padding:0}
a{color:inherit}
/* height:auto verhindert Verzerrung, seit width/height auf jedem <img> stehen (gegen Layout-Sprung) */
img{display:block;max-width:100%;height:auto}
/* picture erzeugt keine eigene Box — Layout bleibt exakt wie ohne Wrapper */
picture{display:contents}
::selection{background:var(--ox);color:var(--paper)}

/* --- Tastatur-Fokus: sichtbar, gestaltet, nur bei Tastaturnutzung --- */
:focus-visible{outline:2px solid var(--ox);outline-offset:3px;border-radius:1px}
nav.top a:focus-visible,.hero :focus-visible{outline-color:#F4EFE4}

/* --- Skip-Link: springt an den Inhalt vorbei an der Navigation --- */
/* position:fixed statt absolute — so erscheint der Link auch dann, wenn schon
   gescrollt wurde. Mit absolute klebte er am Dokumentanfang und blieb unsichtbar. */
.skip{position:fixed;left:var(--gut);top:0;z-index:300;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:var(--t-2);letter-spacing:.14em;text-transform:uppercase;padding:.85rem 1rem;text-decoration:none;transform:translateY(-140%);transition:transform .2s var(--ease)}
.skip:focus{transform:translateY(.7rem)}

.pull span{color:var(--ox-2)}

/* Tastdruck-Rueckmeldung auf allen Klickflaechen. Ohne sie quittiert die Seite
   eine Beruehrung auf dem Telefon mit gar nichts. */
a,button,[role="button"]{-webkit-tap-highlight-color:rgba(178,58,40,.14)}
.toc a:active,.dir a:active,.teaser:active,.cl-req:active,
.nl a:active,.end a:active,.hscroll figure:active{transform:translateY(1px)}