/* TEC — Basis. Palette und Typografie aus der Design-Phase, siehe CLAUDE.md. */
:root{
  /* Gründe */
  --ink:#171A1C;          /* Anthrazit — nicht Schwarz */
  --bg:#F4F3F0;           /* Off-White — nicht Weiß */
  --bg-2:#E7E6E3;         /* zweite helle Stufe */

  /* Schrift auf hellem Grund */
  --text:#2A2D2F;         /* bewusst heller als --ink */
  --text-mid:#5F6467;
  --line:#D6D4CF;

  /* Schrift auf dunklem Grund */
  --on-dark:#F4F3F0;
  --on-dark-2:#C5CACC;
  --on-dark-3:#9BA1A4;
  --on-dark-4:#868C8F;
  --line-dark:rgba(244,243,240,.14);

  /* Akzent und Auszeichnung */
  --accent:#CDBD41;       /* Oliv */
  --accent-dark:#A89B2E;  /* nur Hover */
  --grey:#848484;         /* nimmt Überschriftenteile zurück, hält 3:1 auf allen Gründen */

  --max:1000px;           /* Satzspiegel, „DIN-A4-Gefühl" */
  --nav-h:84px;

  --sans:"Jost","Futura",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; overflow-x:clip; }
html, body{ scroll-padding-top:calc(var(--nav-h) + 12px); max-width:100%; }

img, svg{ max-width:100%; }

body{
  margin:0;
  font-family:var(--sans);
  background:var(--ink);
  color:var(--text);
  font-size:16px;            /* nichts unter 14px auf der Seite */
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3{
  font-family:var(--sans);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.1;
  margin:0;
}
h1{ font-size:clamp(30px,3.6vw,46px); line-height:1.02; letter-spacing:-.035em; }
h2{ font-size:clamp(27px,2.9vw,38px); line-height:1.16; }
h3{ font-size:clamp(18px,1.5vw,20px); font-weight:700; letter-spacing:-.01em; line-height:1.3; }

p{ margin:0 0 14px; }
a{ color:inherit; }

/* Grau nimmt einen Überschriftenteil zurück — Renobrac-Muster. */
.g{ color:var(--grey); }

.eyebrow{
  font-size:14px; font-weight:700; letter-spacing:.19em;
  text-transform:uppercase; color:var(--text-mid); margin-bottom:20px;
}
.dark .eyebrow{ color:var(--accent); font-weight:600; }

.lead-muted{ font-size:16px; line-height:1.6; color:var(--text-mid); }
.dark .lead-muted{ color:var(--on-dark-2); }

/* ---------- Textfarben aus der Palette ----------
   Nur diese vier setzt das Layout-Werkzeug. Freie Farbwahl gibt es bewusst
   nicht (TE, 10.09.2026) — sonst laesst sich die Kontrastarbeit unbemerkt
   aushebeln. Das Werkzeug misst vor dem Speichern und nennt den Wert.
   !important seit 14.09.2026: ohne verloren sie gegen Regeln wie
   .dark .bullets li — gespeichert, aber unsichtbar. */
.t-ink   { color:var(--ink)!important; }
.t-mid   { color:#5c5f66!important; }
.t-weiss { color:#fff!important; }
.t-akzent{ color:var(--accent, #c2362d)!important; }

/* ---------- Abstaende oben/unten, Desktop und Mobil getrennt ----------
   Vier feste Stufen, gesetzt vom Layout-Werkzeug (TE, 14.09.2026). Am
   Abschnitt wirken sie als Innenabstand, an allen anderen Bausteinen als
   Aussenabstand. Freie Pixelwerte gibt es bewusst nicht — die gehoeren ins
   Stylesheet, nicht an einzelne Elemente. !important, weil eine Hilfsklasse
   eine ausdrueckliche Uebersteuerung ist und sonst gegen spezifischere Regeln
   verliert. */
.ab-o-0{ margin-top:0!important; }     .ab-u-0{ margin-bottom:0!important; }
.ab-o-1{ margin-top:12px!important; }  .ab-u-1{ margin-bottom:12px!important; }
.ab-o-2{ margin-top:28px!important; }  .ab-u-2{ margin-bottom:28px!important; }
.ab-o-3{ margin-top:56px!important; }  .ab-u-3{ margin-bottom:56px!important; }
section.ab-o-0{ margin-top:0!important; padding-top:0!important; }
section.ab-o-1{ margin-top:0!important; padding-top:32px!important; }
section.ab-o-2{ margin-top:0!important; padding-top:64px!important; }
section.ab-o-3{ margin-top:0!important; padding-top:104px!important; }
section.ab-u-0{ margin-bottom:0!important; padding-bottom:0!important; }
section.ab-u-1{ margin-bottom:0!important; padding-bottom:32px!important; }
section.ab-u-2{ margin-bottom:0!important; padding-bottom:64px!important; }
section.ab-u-3{ margin-bottom:0!important; padding-bottom:104px!important; }
@media (max-width:760px){
  .m-ab-o-0{ margin-top:0!important; }     .m-ab-u-0{ margin-bottom:0!important; }
  .m-ab-o-1{ margin-top:12px!important; }  .m-ab-u-1{ margin-bottom:12px!important; }
  .m-ab-o-2{ margin-top:28px!important; }  .m-ab-u-2{ margin-bottom:28px!important; }
  .m-ab-o-3{ margin-top:56px!important; }  .m-ab-u-3{ margin-bottom:56px!important; }
  section.m-ab-o-0{ margin-top:0!important; padding-top:0!important; }
  section.m-ab-o-1{ margin-top:0!important; padding-top:32px!important; }
  section.m-ab-o-2{ margin-top:0!important; padding-top:64px!important; }
  section.m-ab-o-3{ margin-top:0!important; padding-top:104px!important; }
  section.m-ab-u-0{ margin-bottom:0!important; padding-bottom:0!important; }
  section.m-ab-u-1{ margin-bottom:0!important; padding-bottom:32px!important; }
  section.m-ab-u-2{ margin-bottom:0!important; padding-bottom:64px!important; }
  section.m-ab-u-3{ margin-bottom:0!important; padding-bottom:104px!important; }
}


/* Herkunftsmarke. Ohne Wirkung, absichtlich.
   Wer dieses Stylesheet kopiert, nimmt sie mit — und macht damit aus
   einem Verdacht einen Nachweis. Registriert in
   _input/FINGERABDRUCK.md. Nicht entfernen. */
:root{ --fp-aab46362:1; }