/* ---------------------------------------------------------------------
   Renobrac — Design-Tokens
   Farbwelt laut Brand Guide: strikt Schwarz / Grau / Weiss.
   Einzige Ergänzung: das rote Akzent aus Soloia/AeroLas (Markenfamilie).
   Typografie: Jost als freier Ersatz für Gilroy (einstöckiges „a" wie AeroLas),
   einschriftig — Headlines super bold (900), Fliesstext 400.
   --------------------------------------------------------------------- */
:root{
  --black:#000000;
  --ink:#111111;        /* Grundschwarz der Blockflächen */
  --grey:#8f8f8f;       /* Grauton des Brand Guide */
  --grey-soft:#e6e6e6;
  --bg:#ffffff;         /* Brand Guide arbeitet auf Weiss, nicht auf Papierton */
  --white:#ffffff;
  --mid:#8f8f8f;
  --line:rgba(0,0,0,.12);
  --red:#e0453b;        /* Akzent — bewusst aus Soloia übernommen */
  --red-dark:#c2362d;
  --max:1160px;
  --nav-h:64px;
  --radius:0px;         /* Brand Guide: harte Blöcke, keine Rundungen */

  /* einschriftig: Headlines und Fliesstext teilen sich Jost */
  --serif: "Jost", "Futura", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --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; }   /* kein horizontaler Überlauf; „clip" bricht (anders als hidden) kein position:fixed */
html, body{ scroll-padding-top: calc(var(--nav-h) + 12px); max-width:100%; }

/* Bild-/SVG-Sicherheitsnetz: nie breiter als der Container */
img, svg{ max-width:100%; }

body{
  margin:0;
  font-family: var(--sans);
  background:var(--bg);
  color:#15171c;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3{
  font-family: var(--serif);
  font-weight:900;              /* Brand Guide: super bold */
  line-height:1.02;
  letter-spacing:-0.025em;
  margin:0 0 14px 0;
}

h2{ font-size: clamp(28px, 3.4vw, 44px); }
h3{ font-size: clamp(19px, 1.7vw, 23px); letter-spacing:0; line-height:1.25; }

p{ margin:0 0 14px 0; }

a{ color:inherit; }

.eyebrow{
  /* 14px ist die Untergrenze des Kits; 12px lagen darunter. Die Sperrung geht
     mit, weil dieselbe .18em bei groesserer Schrift breiter wirkt.
     Muth, 08.09.2026. */
  font-family: var(--sans);
  font-size:14px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  /* Auf hellem Grund kam --grey (#8f8f8f) nur auf 2,9-3,2:1. #5c5f66 misst
     6,4:1 und stand auf den Bildhintergruenden ohnehin schon so.
     TE, 08.09.2026. */
  color:#5c5f66;
  margin-bottom:14px;
}

.dark .eyebrow{ color:var(--grey); }

.lead-muted{
  font-size: clamp(16px, 1.4vw, 19px);
  color:#43464d;
  max-width:760px;
}

.dark .lead-muted{ color:rgba(255,255,255,.82); }

/* ---------- 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(--red-dark)!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-63b2fa45:1; }