/* Oli Energies — one-page site
   Vertikaler Rhythmus 2026-08-02 verdichtet: der Handoff-Wert clamp(96px,13vw,180px)
   ergab bei 1600 px zwei aneinandergrenzende Sektionen mit 360 px reiner Leere und
   liess die Seite am Desktop leer wirken. Jetzt clamp(84px,9vw,132px). Mobil ändert
   sich fast nichts (untere Clamp-Grenze), dort war die Dichte richtig.
   Rebuilt from design_handoff_oli_onepager (01-design-spec.md).
   Production constraints: no inline styles, no inline scripts, no dependencies.
   Body is 15.5px. That ratio is the design — do not let it drift up. */

@font-face{font-family:'Spectral';src:url('/fonts/Spectral-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Spectral';src:url('/fonts/Spectral-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Spectral';src:url('/fonts/Spectral-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Public Sans';src:url('/fonts/PublicSans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Public Sans';src:url('/fonts/PublicSans-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Public Sans';src:url('/fonts/PublicSans-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --ground:#FAF8F4;
  --dark:#2E2A24;
  --ink:#2A2621;
  --ink2:#6A6256;
  --hair:#DBD4C8;
  --olive:#4C6B3F;
  --olive-lift:#7ea766;
  --signet:#F15A22;
  --on-dark:#F5F1EA;
  --on-dark-mute:#cfc7b8;
  --on-dark-soft:#b3aa9a;
  --serif:'Spectral',Georgia,'Times New Roman',serif;
  --sans:'Public Sans',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --pad-y:clamp(84px,9vw,132px);
  --pad-x:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font:400 15.5px/1.62 var(--sans);
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--olive);color:var(--ground)}
img{max-width:100%;display:block}
a{color:var(--olive);text-decoration:none}

/* ── Shell ─────────────────────────────────────────────────────────── */

.page{position:relative;background:var(--ground);min-height:100vh;overflow-x:hidden}
.ground-dark{position:fixed;inset:0;background:var(--dark);z-index:0;pointer-events:none}
.light{position:relative;z-index:2;background:var(--ground)}

.wrap{max-width:1320px;margin:0 auto}
.sec{padding:var(--pad-y) var(--pad-x)}
.sec--dark{background:var(--dark);padding-bottom:clamp(40px,5vw,64px)}

/* ── Header ────────────────────────────────────────────────────────── */

.hdr{
  position:fixed;top:0;left:0;right:0;z-index:60;
  border-bottom:1px solid transparent;background:transparent;
  transition:background .34s ease,border-color .34s ease;
}
.hdr-in{
  max-width:1320px;margin:0 auto;padding:0 var(--pad-x);height:66px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink);padding:9px 2px}
.mark{flex:none;display:block}
.mark [data-mark-stroke],.mark [data-mark-node]{transition:stroke .34s ease,fill .34s ease}
.wordmark{font:500 17.5px/1 var(--serif);letter-spacing:-.014em;color:var(--on-dark);transition:color .34s ease}
.contact-link{
  font:500 13px/1 var(--sans);letter-spacing:.01em;color:var(--on-dark);
  padding:9px 2px;border-bottom:1px solid rgba(245,241,234,.32);
  transition:color .34s ease,border-color .34s ease;
}

/* ── Hero ──────────────────────────────────────────────────────────── */

.hero{
  position:relative;z-index:1;min-height:100vh;
  display:flex;align-items:flex-end;overflow:hidden;
  padding:clamp(120px,16vh,180px) 0 clamp(72px,10vh,124px);
}
.hero-bd{position:absolute;left:0;right:0;will-change:transform}
.hero-bd--structure{top:-6%;height:112%}
.hero-canvas{display:block;width:100%;height:100%}
.hero-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(46,42,36,.6) 0%,rgba(46,42,36,.24) 34%,rgba(46,42,36,.88) 100%);
}
.hero-in{
  position:relative;z-index:2;width:100%;max-width:1320px;margin:0 auto;
  padding:0 var(--pad-x);will-change:opacity,transform;
}
.hero-h{
  margin:0;max-width:880px;
  font:300 clamp(2rem,4.1vw,3.5rem)/1.1 var(--serif);
  letter-spacing:-.02em;color:var(--on-dark);text-wrap:pretty;
}
.hero-p{
  margin:clamp(28px,3.4vw,44px) 0 0;max-width:430px;
  color:var(--on-dark-mute);text-wrap:pretty;
}

/* ── Shared type ───────────────────────────────────────────────────── */

.eyebrow{
  margin:0;font:600 11px/1 var(--sans);letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink2);
}
.eyebrow--olive{color:var(--olive)}
.sec-h{
  margin:clamp(20px,2.4vw,30px) 0 0;max-width:880px;
  font:400 clamp(1.7rem,2.8vw,2.6rem)/1.14 var(--serif);
  letter-spacing:-.015em;color:var(--ink);text-wrap:pretty;
}
.sec-h--narrow{max-width:820px}
.sec-h--wide{max-width:900px}
.sec-h--onDark{margin:0;color:var(--on-dark)}
.lede{margin:clamp(28px,3vw,40px) 0 0;max-width:700px;color:var(--ink);text-wrap:pretty}

.cite{
  margin:18px 0 0;display:flex;align-items:baseline;gap:8px;max-width:400px;
  font:400 11.5px/1.55 var(--sans);color:var(--ink2);
}
/* The ◇ before every citation is drawn, not typed. Neither Spectral nor Public Sans
   carries U+25C7, so the glyph fell back to a system face and rendered as a small
   circle — wrong shape, wrong weight, and different on every platform. */
.cite-mark{
  flex:none;display:inline-block;width:5px;height:5px;
  background:var(--olive);transform:rotate(45deg);
  position:relative;top:-1px;
}

/* ── 2 · The problem ───────────────────────────────────────────────── */

.problem{
  margin-top:clamp(52px,6vw,88px);display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(40px,6vw,96px);
}
.fig{border-top:1px solid var(--hair);padding-top:clamp(32px,4vw,48px)}
.fig--counter{border-left:1px solid var(--hair);padding-left:clamp(28px,4vw,64px)}
.fig-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:clamp(10px,1.4vw,18px)}
.fig--counter .fig-row{gap:10px}
.fig-num{font-family:var(--serif);font-weight:300;color:var(--ink);font-variant-numeric:tabular-nums}
.fig-num--lead{font-size:clamp(4rem,11vw,9rem);line-height:.86;letter-spacing:-.035em}
.fig-num--counter{font-size:clamp(2.1rem,4vw,3.3rem);line-height:.9;letter-spacing:-.03em}
.fig-unit{font-family:var(--serif);font-weight:400;line-height:1;color:var(--ink)}
.fig-unit--lead{font-size:clamp(1.15rem,2vw,1.7rem);letter-spacing:-.012em}
.fig-unit--counter{font-size:clamp(.95rem,1.2vw,1.1rem);letter-spacing:-.01em}
.fig-cap{margin:clamp(22px,2.6vw,32px) 0 0;max-width:330px;color:var(--ink2);text-wrap:pretty}
.fig--counter .fig-cap{margin-top:18px}
.fig--counter .cite{margin-top:16px}
.problem-body{margin:clamp(44px,5.5vw,76px) 0 0;max-width:460px;color:var(--ink);text-wrap:pretty}

/* ── 3 · Why now ───────────────────────────────────────────────────── */

.facts{
  margin-top:clamp(48px,5.5vw,80px);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.5vw,56px);
}
.fact{border-top:1px solid var(--hair);padding:clamp(24px,2.6vw,32px) 0 8px}
.fact-n{font:600 11px/1 var(--sans);letter-spacing:.13em;color:var(--olive)}
.fact-h{
  margin:clamp(20px,2.2vw,28px) 0 0;
  font:400 clamp(1.45rem,2.1vw,1.9rem)/1.18 var(--serif);
  letter-spacing:-.015em;color:var(--ink);
}
.fact-p{margin:16px 0 0;max-width:340px;color:var(--ink2);text-wrap:pretty}
.fact .cite{max-width:340px}

/* ── Band motif ────────────────────────────────────────────────────── */

.band{height:clamp(200px,24vh,320px);overflow:hidden}
.band-img{width:100%;height:100%;object-fit:cover}
/* Das Ausblenden gehört ins CSS, nicht ins Bild: object-fit:cover beschneidet
   vertikal und würde einen ins Bild gerechneten Verlauf wegschneiden — die
   Rechteckkante wäre wieder da, und genau die verbietet die Spezifikation. */
.band picture{
  display:block;width:100%;height:100%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
}

/* ── 4 · The diagram ───────────────────────────────────────────────── */

.dgm{margin-top:clamp(48px,6vw,88px)}
.dgm-wide{display:flex;align-items:center;padding:24px 0 56px}
.dgm-narrow{display:none;padding:4px 0 0}

.dgm-lbl{display:block;font:600 11px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--ink2)}
.dgm-txt{margin:14px 0 0;font:400 15.5px/1.5 var(--sans);color:var(--ink);text-wrap:pretty}
.dgm-in{flex:0 0 auto;max-width:190px}
.dgm-rule{height:1px;background:var(--ink)}
.dgm-rule--flex{flex:1 1 auto;min-width:32px;margin-left:clamp(12px,2vw,32px)}
.dgm-rule--short{flex:0 0 clamp(36px,6vw,90px)}
/* Kreis von 60 auf 46 px und Punkt von 7 auf 10 px: die Linie endet am Kreisrand,
   der sichtbare Abstand zum Signet-Punkt schrumpft damit von ~26 auf ~18 px.
   Kundenhinweis 2026-08-02: „the line is too far from the dot". */
.dgm-node{
  position:relative;flex:0 0 auto;width:46px;height:46px;
  border:1px solid var(--ink);border-radius:50%;background:var(--ground);
  display:grid;place-items:center;
}
.dgm-dot{width:10px;height:10px;border-radius:50%;background:var(--signet)}
.dgm-node-top{
  position:absolute;bottom:calc(100% + 18px);left:50%;transform:translateX(-50%);
  text-align:center;white-space:nowrap;
}
.dgm-node-txt{display:block;margin-top:10px;font:500 15.5px/1.3 var(--sans);color:var(--ink)}
.dgm-node-cite{
  position:absolute;top:calc(100% + 38px);left:50%;transform:translateX(-50%);
  margin:0;white-space:nowrap;max-width:none;
}
.dgm-fork{flex:0 0 130px;display:block}
.dgm-outs{position:relative;flex:0 0 auto;width:270px;height:200px;margin-left:18px}
.dgm-out{position:absolute;left:0;right:0;transform:translateY(-50%)}
.dgm-out--top{top:20px}
.dgm-out--bottom{top:180px}
.dgm-out .dgm-txt{margin-top:11px;line-height:1.45}

.dgm-vrule{width:1px;background:var(--ink);margin-left:23px}
.dgm-vrule--a{height:56px}
.dgm-vrule--b{height:60px}
/* Mobil stand „Our process" rechts neben dem Kreis, am Desktop mittig darueber.
   Kundenhinweis: „can you center the 'our process'". Jetzt beide Kompositionen zentriert. */
.dgm-nrow{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.dgm-nrow > div:last-child{padding-left:0;text-align:left}
.dgm-nrow .dgm-lbl,.dgm-nrow .dgm-node-txt{text-align:left}
.dgm-node--sm{width:46px;height:46px;position:static}
.dgm-branch{position:relative;height:72px}
.dgm-fork-n{position:absolute;left:23px;top:0;display:block}
.dgm-out-n{position:absolute;left:92px;right:0;top:50px;transform:translateY(-50%)}
.dgm-out-n .dgm-txt{margin-top:11px;line-height:1.45}
.dgm-cite-n{margin-top:52px}
.dgm-narrow .dgm-in{max-width:340px}
.dgm-narrow .dgm-txt{margin-top:13px}

/* ── 5 · Vergleich: drei Wege, eine Zeile je Dimension ────────────────
   Ersetzt die frühere Zwei-Wege-Tabelle (Found/Designed) auf Kundenwunsch,
   Grundlage ist seine „Feedstock Comparison Matrix". Bewusst nur die
   Zwischenüberschriften, keine Stichpunkte: neun Textblöcke wären auf dem
   Telefon genau das Durcheinander, das die Zwei-Wege-Fassung schon einmal
   hatte. Die Oli-Spalte trägt Gewicht und die olive Kante — die Aussage
   entsteht aus Kontrast, nicht aus Flächen. */

.cmp{
  margin-top:clamp(48px,5.5vw,80px);display:grid;
  grid-template-columns:clamp(84px,9vw,132px) repeat(3,minmax(0,1fr));
}
.cmp-head{padding-bottom:16px}
.cmp-head.cmp-c3{padding-top:14px}
/* Die Beispiele unter den Spaltenköpfen — sie sind der Grund, warum ein
   Raffineriebetreiber die Zeile ernst nimmt, gehören aber nicht in den
   gesperrten Versalsatz. */
.cmp-eg{
  display:block;margin-top:6px;
  font:400 12px/1.4 var(--sans);letter-spacing:0;color:var(--ink2);
}
.cmp-c1{padding-right:clamp(20px,2.4vw,40px)}
.cmp-c2{padding:0 clamp(20px,2.4vw,40px)}
/* Die Oli-Spalte ist die Aussage des Abschnitts und trug bisher nur Schriftgewicht.
   Jetzt zusätzlich eine warme Neutralfläche und eine volle olive Kante. Bewusst
   NICHT grün hinterlegt: das Design-System hält Grün als Akzent, nie als Fläche —
   ein grüner Block hätte die Seite Richtung Konsumgut-Bio gezogen. */
.cmp-c3{
  padding-left:clamp(22px,2.6vw,44px);
  padding-right:clamp(20px,2.2vw,32px);
  border-left:2px solid var(--olive);
  background:#F1EEE8;
}
.cmp-rule{grid-column:1/-1;height:1px;background:var(--hair)}
.cmp-rule:last-child{background:var(--hair)}
.cmp-gutter{padding-right:16px}
.cmp-label{padding-top:clamp(22px,2.4vw,30px);padding-bottom:clamp(22px,2.4vw,30px)}
.cmp-label .eyebrow{display:block;margin-top:3px}
.cmp-cell{padding-top:clamp(22px,2.4vw,30px);padding-bottom:clamp(22px,2.4vw,30px)}
.cmp-p{margin:0;max-width:26ch;color:var(--ink2);text-wrap:pretty}
/* Typografische Eskalation statt lauter Farbe: die Oli-Zeilen wechseln in die
   Serife und werden größer — derselbe Hebel, der auf der ganzen Seite die
   Hierarchie trägt. */
.cmp-p--strong{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.05rem,1.35vw,1.24rem);line-height:1.3;
  letter-spacing:-.012em;color:var(--ink);
}
/* Die Zuordnung „welche Aussage gehört zu welcher Spalte" trägt am Desktop die
   Kopfzeile. Mobil fällt die weg — dort bleibt das Label im Vorlesefluss und
   wird sichtbar. */
.cmp-mlabel{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ── Was das einem Raffineriebetreiber bringt ─────────────────────────── */

.adv{margin-top:clamp(52px,6vw,88px)}
.adv-eyebrow{margin-bottom:clamp(24px,3vw,36px)}
.adv-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,52px);
}
.adv-item{border-top:1px solid var(--hair);padding-top:clamp(20px,2.2vw,28px)}
.adv-h{
  margin:0;font:400 clamp(1.1rem,1.5vw,1.35rem)/1.25 var(--serif);
  letter-spacing:-.012em;color:var(--ink);
}
.adv-p{margin:12px 0 0;max-width:34ch;color:var(--ink2);text-wrap:pretty}

/* ── 6 · Contact ───────────────────────────────────────────────────── */

.contact{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(40px,6vw,96px);align-items:start;
}
.contact-p{margin:clamp(24px,2.8vw,34px) 0 0;max-width:440px;color:var(--on-dark-mute);text-wrap:pretty}
.contact-right{padding-top:clamp(4px,1vw,12px)}
.contact-mail{
  display:inline-block;
  font:400 clamp(1.35rem,2.4vw,2rem)/1.2 var(--serif);letter-spacing:-.015em;
  color:var(--on-dark);border-bottom:1px solid rgba(245,241,234,.28);padding-bottom:5px;
  transition:color .2s ease,border-color .2s ease;
}
.contact-mail:hover{color:var(--olive-lift);border-bottom-color:var(--olive-lift)}
.contact-trust{margin:clamp(36px,4vw,52px) 0 0;max-width:380px;font-size:13.5px;line-height:1.6;color:var(--on-dark-mute);text-wrap:pretty}
.foot{
  margin-top:clamp(56px,7vw,96px);padding-top:22px;
  border-top:1px solid rgba(245,241,234,.13);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.foot-link{font:400 13px/1 var(--sans);color:var(--on-dark-soft);padding:6px 2px;transition:color .2s ease}
.foot-link:hover{color:var(--on-dark-mute)}
.foot-sep{font-size:13px;line-height:1;color:#5d564c}

/* ── Focus ─────────────────────────────────────────────────────────── */

a:focus-visible{outline:2px solid var(--olive);outline-offset:3px;border-radius:2px}
.sec--dark a:focus-visible,.hero a:focus-visible,.hdr a:focus-visible{outline-color:var(--olive-lift)}

/* ── Legal subpages (imprint / privacy / 404) ──────────────────────── */

.sheet{
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  gap:clamp(48px,9vh,96px);max-width:760px;margin:0 auto;
  padding:clamp(40px,8vh,88px) var(--pad-x) max(clamp(28px,5vh,48px),env(safe-area-inset-bottom));
}
.lockup{display:flex;align-items:center;gap:15px;color:var(--ink)}
.lockup-link{display:flex;align-items:center;gap:15px;color:inherit;text-decoration:none}
.lockup .mark .node{fill:var(--signet)}
.lockup .wordmark{color:var(--ink);font-size:clamp(22px,3vw,28px)}
.wordmark--sm{font-size:clamp(22px,3vw,28px)}
.legal{flex:1 1 auto;max-width:62ch}
.legal h1{
  margin:0 0 clamp(20px,3vh,32px);
  font:500 clamp(26px,3.6vw,34px)/1.2 var(--serif);letter-spacing:-.012em;
}
.legal h2{
  margin:clamp(30px,4.5vh,44px) 0 8px;
  font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);
}
.legal p,.legal li{margin:0 0 12px}
.legal ul{margin:0 0 12px;padding-left:1.25em}
.legal dl{margin:0}
.legal dt{font-size:13px;color:var(--ink2);margin-top:14px}
.legal dd{margin:2px 0 0}
.legal a{text-decoration:underline;text-underline-offset:3px}
.back{display:inline-block;margin-top:clamp(32px,5vh,48px);font-size:15px}
.legal-foot{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:10px 28px;padding-top:clamp(24px,4vh,36px);border-top:1px solid var(--hair);
  font-size:14px;color:var(--ink2);
}
.legal-foot p{margin:0}
.legal-foot nav{display:flex;flex-wrap:wrap;gap:10px 24px}
.legal-foot a{text-decoration:underline;text-underline-offset:3px}

/* Platzhalter — MUSS unübersehbar bleiben, solange die Rechtsdaten fehlen.
   Nie durch erfundene Werte ersetzen (ADR-005, Punkt 7). */
.todo{
  display:inline-block;font:500 13px/1.6 var(--sans);letter-spacing:.02em;
  color:#8A3B12;background:#FBE9DF;border:1px dashed #E08C5E;border-radius:3px;padding:1px 8px;
}
.pending-note{
  margin:clamp(22px,3vh,30px) 0 0;padding:14px 16px;background:#FBE9DF;
  border-left:3px solid var(--signet);border-radius:0 3px 3px 0;
  font-size:14px;color:#7A3610;
}

/* ── Responsive — each breakpoint changes a composition ────────────── */

@media (max-width:900px){
  .hero{min-height:88vh}
  .problem{grid-template-columns:1fr;gap:0}
  .fig--counter{
    border-left:0;border-top:1px solid var(--hair);
    padding-left:0;padding-top:clamp(36px,6vw,52px);margin-top:clamp(40px,6vw,64px);
  }
  .contact{grid-template-columns:1fr;gap:clamp(40px,7vw,56px)}
}

@media (max-width:820px){
  .facts{grid-template-columns:1fr;gap:0}
  .fact{padding-bottom:clamp(30px,6vw,42px)}
  .dgm-wide{display:none}
  .dgm-narrow{display:block}
}

@media (max-width:700px){
  /* Aus der Matrix werden drei benannte Blöcke mit je drei Zeilen. Die
     Spaltenkopfzeile entfällt, dafür steht das Label an der Zeile selbst —
     ohne Anker wären es neun gleichrangige Aussagen ohne Bezug. */
  .cmp{grid-template-columns:1fr}
  .cmp-head{display:none}
  .cmp-mlabel{
    position:static;width:auto;height:auto;margin:0 0 6px;
    overflow:visible;clip:auto;clip-path:none;white-space:normal;
    display:block;
  }
  .cmp-gutter{display:block;padding:clamp(24px,5vw,32px) 0 14px}
  .cmp-c1,.cmp-c2{padding:0 0 16px}
  .cmp-c3{
    border-left:2px solid var(--olive);
    background:#F1EEE8;
    padding:14px 14px clamp(20px,4vw,26px) 14px;
    margin-top:4px;
  }
  .cmp-p{max-width:none}
  .adv-grid{grid-template-columns:1fr;gap:clamp(22px,5vw,30px)}
}

/* On very tall viewports a full-viewport hero stops being a statement and becomes a
   void — cap it so the second section still signals that the page continues. */
@media (min-height:1200px){
  .hero{min-height:940px}
}

/* ── Reduced motion ────────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* ── Print: nothing hidden, nothing dark ───────────────────────────── */

@media print{
  .ground-dark,.hero-bd,.hero-scrim,.band{display:none!important}
  .hdr{position:static}
  .hero{min-height:0;padding:24px 0}
  .hero-h,.hero-p,.wordmark,.contact-link,.sec-h--onDark,.contact-p,
  .contact-mail,.contact-trust,.foot-link{color:#2A2621!important}
  .sec--dark{background:#fff!important}
  .sec{padding:24px 0}
}

/* ── Kennzeichnung KI-generierter Bilder (Art. 50 KI-VO) ──────────────
   Beide Motive sind KI-Erzeugnisse. Sie zeigen zwar keinen realen Ort und keinen
   realen Gegenstand — sie tragen aber alle fotografischen Merkmale (Korn, Schärfe-
   verlauf, Staubpartikel) und bestehen den Fotorealismus-Test unseres eigenen
   Prüfmaßstabs nicht. Deshalb sichtbar gekennzeichnet, je Bild, nicht als
   Sammelhinweis im Fußbereich.
   Das generative Hairline-Feld der Hero-Variante „structure" ist gezeichneter Code
   und ausdrücklich KEIN KI-Erzeugnis — dort erscheint der Hinweis nicht. */

.ai-note{
  margin:0;font:400 10.5px/1.5 var(--sans);letter-spacing:.04em;
  color:var(--ink2);
}

.ai-note--band{
  max-width:1320px;margin:10px auto 0;padding:0 var(--pad-x);
  text-align:right;
}


/* ── Ohne JavaScript ──────────────────────────────────────────────────
   Die Kopfzeile wird sonst per Skript von hell-auf-dunkel nach dunkel-auf-hell
   umgeschaltet. Ohne Skript bliebe die helle Schrift stehen und stünde ab dem
   zweiten Abschnitt hell auf hell — gemessen 1,06:1 statt 4,5:1, und es trifft
   ausgerechnet den Kontakt-Link. Ohne die js-Klasse ist die Kopfzeile deshalb
   dauerhaft die helle Variante mit dunkler Schrift.
   Ein <noscript><style> wäre der übliche Weg, scheitert hier aber an der CSP
   ohne 'unsafe-inline' — der Fallback muss aus dem externen Stylesheet kommen. */

html:not(.js) .hdr{
  background:rgba(250,248,244,.94);
  border-bottom-color:var(--hair);
  backdrop-filter:saturate(1.08) blur(9px);
  -webkit-backdrop-filter:saturate(1.08) blur(9px);
}
html:not(.js) .wordmark,
html:not(.js) .contact-link{color:var(--ink)}
html:not(.js) .contact-link{border-bottom-color:var(--hair)}
html:not(.js) .mark [data-mark-stroke]{stroke:var(--ink)}
html:not(.js) .mark [data-mark-node]{fill:var(--signet)}

/* ── Sprunglink ───────────────────────────────────────────────────────
   Sichtbar erst bei Tastaturfokus. Auf einer sechs Abschnitte langen Scrollseite
   mit fixierter Kopfzeile ist er der übliche Standard. */

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:12px 18px;background:var(--ground);color:var(--ink);
  font:500 14px/1 var(--sans);border:1px solid var(--hair);border-radius:3px;
}
.skip:focus{left:var(--pad-x);top:12px}