/* ============================================================
   LEANS DESIGN SYSTEM — Tokens
   Bildwelt: "Werkstatt bei Nacht". Anthrazit, Betongrau,
   Signalgruen als Betriebsanzeige, Kupfer als Material-Echo
   der Rohrleitung. Kein Emerald/Cyan, kein Violett-Verlauf.
   ============================================================ */

:root {
  /* --- Grundflaechen --------------------------------------- */
  --l-ink:        #101418;   /* Anthrazit mit Blaustich, NIE #000 */
  --l-ink-2:      #171c21;   /* eine Stufe heller, fuer Flaechen */
  --l-ink-3:      #1f252b;   /* Kanten, Rillen                   */
  --l-paper:      #f2efe8;   /* warmes Off-White, NIE #fff       */
  --l-paper-2:    #e7e3da;

  /* --- Signal (LEANS-Gruen, aus dem Briefkopf abgeleitet) --- */
  --l-signal:     #b6e34a;   /* 12.4:1 auf ink                   */
  --l-signal-2:   #a3d13c;
  --l-signal-ink: #3f5a15;   /*  6.8:1 auf paper — Text auf hell */

  /* --- Kupfer (Material der Leitung) ----------------------- */
  --l-cu:         #e09355;   /*  7.5:1 auf ink                   */
  --l-cu-2:       #c9743c;
  --l-cu-ink:     #7a3f18;   /*  7.2:1 auf paper                 */

  /* --- Beton (Grauskala, leicht warm) --------------------- */
  --l-beton:      #a8aeb3;
  --l-beton-2:    #767d84;
  --l-beton-ink:  #5a6167;

  /* --- Rollen (das benutzt man im Code) ------------------- */
  --bg:      var(--l-ink);
  --surface: var(--l-ink-2);
  --line:    color-mix(in oklab, var(--l-beton) 22%, transparent);
  --line-2:  color-mix(in oklab, var(--l-beton) 40%, transparent);
  --text:    var(--l-paper);
  --text-2:  var(--l-beton);
  --accent:  var(--l-signal);
  --accent-2:var(--l-cu);

  /* --- Schrift --------------------------------------------- */
  --f-disp:  'Archivo', 'Arial Black', system-ui, sans-serif;
  --f-body:  'Instrument Sans', system-ui, sans-serif;
  --f-tech:  'IBM Plex Mono', ui-monospace, monospace;
  --f-edit:  'Instrument Serif', Georgia, serif;

  /* Signatur: Display laeuft BREIT (>100%) und eng gesperrt.
     Das ist der Maschinenschild-Look. Niemand macht das per Default. */
  --disp-stretch: 112%;
  --disp-track:   -0.028em;

  /* Fluide Skala — 1.28er Verhaeltnis, kein Standard-1.25 */
  --t-xs:   clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --t-sm:   clamp(0.84rem, 0.81rem + 0.15vw, 0.92rem);
  --t-base: clamp(1.00rem, 0.96rem + 0.20vw, 1.09rem);
  --t-md:   clamp(1.28rem, 1.18rem + 0.48vw, 1.56rem);
  --t-lg:   clamp(1.64rem, 1.40rem + 1.10vw, 2.44rem);
  --t-xl:   clamp(2.10rem, 1.60rem + 2.40vw, 3.82rem);
  --t-2xl:  clamp(2.68rem, 1.70rem + 4.60vw, 5.96rem);
  --t-3xl:  clamp(3.43rem, 1.60rem + 8.60vw, 9.31rem);

  /* --- Raster & Mass --------------------------------------- */
  --u: 0.25rem;
  --s-1: calc(var(--u) * 1);   --s-2: calc(var(--u) * 2);
  --s-3: calc(var(--u) * 3);   --s-4: calc(var(--u) * 4);
  --s-6: calc(var(--u) * 6);   --s-8: calc(var(--u) * 8);
  --s-12: calc(var(--u) * 12); --s-16: calc(var(--u) * 16);
  --s-24: calc(var(--u) * 24); --s-32: calc(var(--u) * 32);
  --s-48: calc(var(--u) * 48);

  --bund: clamp(1.25rem, 4vw, 4.5rem);   /* Seitenrand */
  --breite: 82rem;                        /* max. Satzspiegel */

  /* --- Kante: SCHARF. Kein rounded-2xl. -------------------- */
  --r:    2px;
  --r-lg: 3px;
  --hair: 1px;

  /* --- Bewegung -------------------------------------------- */
  --e-out:  cubic-bezier(.16, 1, .3, 1);      /* expo-out, LEANS-Kurve */
  --e-in:   cubic-bezier(.7, 0, .84, 0);
  --e-snap: cubic-bezier(.2, .9, .1, 1);
  --e-mech: cubic-bezier(.83, 0, .17, 1);     /* mechanisch, beidseitig */

  --d-1: 140ms;  --d-2: 260ms;  --d-3: 480ms;
  --d-4: 780ms;  --d-5: 1200ms;

  --z-deko: 0; --z-inhalt: 10; --z-nav: 100; --z-modal: 1000;
}

/* --- Heller Modus: Rollen tauschen, Farben bleiben --------- */
[data-modus="hell"] {
  --bg:      var(--l-paper);
  --surface: var(--l-paper-2);
  --line:    color-mix(in oklab, var(--l-ink) 16%, transparent);
  --line-2:  color-mix(in oklab, var(--l-ink) 32%, transparent);
  --text:    var(--l-ink);
  --text-2:  var(--l-beton-ink);
  --accent:  var(--l-signal-ink);
  --accent-2:var(--l-cu-ink);
}

/* ============================================================
   BASIS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.55;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Ueberschriften: breit laufend, eng gesperrt, kurze Zeilen */
h1, h2, h3, .disp {
  font-family: var(--f-disp);
  font-stretch: var(--disp-stretch);
  letter-spacing: var(--disp-track);
  font-weight: 700;
  line-height: 0.94;
  text-wrap: balance;
  margin: 0 0 var(--s-4);
}
h1, .disp-1 { font-size: var(--t-3xl); }
h2, .disp-2 { font-size: var(--t-xl);  }
h3, .disp-3 { font-size: var(--t-lg);  line-height: 1.04; }

p { max-width: 68ch; text-wrap: pretty; margin: 0 0 var(--s-4); }

/* Editorial-Akzent: einzelne Woerter in der Headline kursiv setzen */
.kursiv {
  font-family: var(--f-edit);
  font-style: italic;
  font-stretch: normal;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--accent);
}

/* SIGNATUR: jeder technische Wert steht in Mono mit Tabellenziffern.
   kW, m3/h, DN, Pa, Grad C, EUR — immer. Das ist unser Erkennungszeichen. */
.wert, .tech, kbd, code, .zahl {
  font-family: var(--f-tech);
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: -0.01em;
}
.wert { font-weight: 500; color: var(--accent); }
.wert .einheit {
  font-weight: 400; font-size: 0.62em;
  color: var(--text-2); margin-left: 0.28em;
  letter-spacing: 0.06em; text-transform: uppercase;
}

a { color: inherit; text-decoration-thickness: var(--hair);
    text-underline-offset: 0.22em; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r);
}

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }

::selection { background: var(--accent); color: var(--l-ink); }