/* =====================================================================
 * LISI · redesign.css — „Organic Futurism" (2026-07)
 * ---------------------------------------------------------------------
 * Oberste Kaskadenschicht (nach dem Inline-<style> geladen). Bringt:
 *  1. Typo-System: Clash Display (self-hosted) für Headlines, Satoshi
 *     Body, JetBrains Mono Kicker; Fraunces Italic sparsam für Leitmotive.
 *  2. Zwei-Welten-Rhythmus: helle Kalkstein-Kapitel + dunkle Wald-Kapitel.
 *  3. Übergroße Ordinalzahlen, 12-Spalten-Offsets, Full-Bleed-Hero-Hooks.
 *  4. Header-Transformation (transparent → kompakt/blur).
 *  5. Korn-Layer auf dunklen Flächen, Motion-Reveals.
 *
 * KEINE Änderung an Markup/IDs/i18n-Keys/Routen. Alles rein visuell.
 * prefers-reduced-motion wird respektiert.
 * =================================================================== */

/* ------------------------------------------------------------------ *
 * 0 · Fallback-Ketten (AR/ZH behalten Noto; Latin nutzt Clash)
 * ------------------------------------------------------------------ */
:root{
  --font-display: "Clash Display", "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --font-quote: "Fraunces", Georgia, serif;

  --rhythm: clamp(6rem, 12vh, 10rem);
  --measure: 68ch;
  --ease-reveal: cubic-bezier(.16,.84,.3,1);
  --ease-drama: cubic-bezier(.16,1,.3,1);

  /* =============================================================
   * TYPO-SPEC-2026 · Abschnitt 2 — Weiches Kontrast-Farbsystem.
   * Nie Schwarz-auf-Weiß, nie Weiß-auf-Schwarz. Ein System, keine
   * Einzelfarben. ALLE Textfarben mappen auf diese Token.
   * ============================================================= */
  /* Auf hellem Grund (--bone #EDE7DA) */
  --text-strong:  #1A1F1B;   /* Headlines, strong */
  --text-body:    #33392F;   /* Lesetext ~10:1, warm */
  --text-muted:   #6B7263;   /* Captions, Meta (>=4.5:1) */
  /* Runde 5: hue-gleicher, nur so weit noetig abgedunkelter Ton DERSELBEN
     Farbfamilie wie --chlorophyll-bright #8FE39B (Farbton 128.6deg identisch;
     S 0.55, V 0.44). Ersetzt das stumpfe Forest-Gruen #2E6B45 (Farbton 142.6deg
     = anderer, blaeulicher Ton). Kontrast auf --bone #EDE7DA = 4.85:1 (>=4.5),
     auf Ivory 5.21:1, auf Paper 5.54:1. Wird als "derselbe Gruenton" wie
     #8FE39B wahrgenommen, nur legbar auf hellem Grund. */
  --accent-ink-green: #32703B; /* helles Chlorophyll, hue-gleich zu #8FE39B, fuer Text/Links/Kicker auf hell */
  /* Auf dunklem Grund (--ink #0C110D) */
  --text-strong-inv: #F2EDE1; /* Headlines invers */
  --text-body-inv:   #C9C4B6; /* Lesetext invers (gedämpftes Bone) */
  --text-muted-inv:  #8B8A7B; /* Meta invers */
  /* Akzente auf dunkel (Grün=Leben/Leitmotiv, Amber=Zahlen/Marker) */
  --chlorophyll-bright: #8FE39B;
  --amber: #E0A43C;

  /* --- Bestehende Token auf das Spec-System umgebogen, damit ALLE
   *     vorhandenen text-[var(--…)]-Aufrufe automatisch mitziehen. --- */
  --ink2: var(--text-body);          /* war #3B4738 → warmer Lesetext */
  --leaf2: var(--accent-ink-green);  /* war #3E7E4C → dunkles Chlorophyll für Text/Links */
  --dim:  var(--text-muted);         /* Meta/Sekundär */
  --ink1: var(--text-strong);        /* fehlte (undefiniert) → jetzt Strong */
}

/* ------------------------------------------------------------------ *
 * 1 · TYPOGRAFIE
 * ------------------------------------------------------------------ */
/* Display: Clash Display. Enge Zeilen, leicht negatives Tracking.
   Greift auf alle Überschriften + .font-display, außer AR/ZH (dort
   überschreibt i18n.css bereits mit Noto — wir respektieren das via
   :not-Selektoren auf <html>). */
/* Display: Clash NUR fuer h1/h2 + .font-display (Spec Abschnitt 1).
   h3 ist bewusst NICHT mehr dabei — h3 = Satoshi 600 (ruhige Zwischenebene). */
html:not([data-lang="ar"]):not([data-lang="zh"]):not([lang^="ar"]):not([lang^="zh"]) .font-display,
html:not([data-lang="ar"]):not([data-lang="zh"]):not([lang^="ar"]):not([lang^="zh"]) h1,
html:not([data-lang="ar"]):not([data-lang="zh"]):not([lang^="ar"]):not([lang^="zh"]) h2{
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;   /* Spec: Clash letter-spacing -0.015em */
  line-height: 1.08;
  font-feature-settings: "ss01";
}

/* ---- h3 = Satoshi 600 (Spec Abschnitt 1): SCHRIFTROLLE erzwingen ----
   Ueberschreibt auch h3.font-display, damit Templates mit
   class="font-display" auf h3 trotzdem Satoshi 600 rendern.
   Groesse bleibt aus den Template-Utilities (text-xl/2xl/3xl), damit
   Sektions-Hierarchie erhalten bleibt; nur die Rolle wird korrigiert. */
/* WICHTIG (Runde 5): mit body:not(.home-tree) begrenzen. Die Home-Tree-World
   nutzt eigene h3-Rollen (.branch-h/.root-h in Fraunces-Serif auf dunklem
   Foto-Grund). Ohne diese Begrenzung faerbte die Regel die Kachel-Titel
   (DELEGATIS, CITY-OS, ...) dunkel (--text-strong) auf dunklem Grund ein und
   erzwang Satoshi statt Serif. Der Guard haelt die Tree-World unangetastet. */
body:not(.home-tree) h3,
body:not(.home-tree) h3.font-display,
html:not([data-lang="ar"]):not([data-lang="zh"]):not([lang^="ar"]):not([lang^="zh"]) body:not(.home-tree) h3,
html:not([data-lang="ar"]):not([data-lang="zh"]):not([lang^="ar"]):not([lang^="zh"]) body:not(.home-tree) h3.font-display{
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  line-height: 1.3;
  letter-spacing: -0.005em;
  font-variation-settings: normal;
  color: var(--text-strong);
}
/* Standard-h3 ohne explizite Groessen-Utility: Spec-Basisgroesse 1.375rem. */
body:not(.home-tree) h3:not([class*="text-"]){ font-size: 1.375rem; }

/* Hero-Skala: nur für Seiten-Titel (h1 in Hero-Kontexten). */
body:not(.home-tree) h1.font-display,
body:not(.home-tree) .hero-stage h1{
  font-size: clamp(2.6rem, 7vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  font-weight: 600;
}
body:not(.home-tree) h2.font-display,
body:not(.home-tree) section h2{
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  line-height: 1.0;
  letter-spacing: -0.02em;
}

/* Fraunces Italic sparsam: Leitmotive, Zitate, Bild-Captions. */
.font-display.italic,
.font-display .italic,
.ital,
.pull-quote,
.lede em,
.prose-essay em{
  font-family: var(--font-quote) !important;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

/* Kicker/Eyebrow — Mono, gesperrt. Spec Abschnitt 1+2: .12em, 0.72–0.78rem,
   Farbe auf hell = --accent-ink-green, auf dunkel = --chlorophyll-bright.
   Überall identisch. */
.eyebrow,
.page-hero__kicker,
.sec-marker .sec-kicker,
.proj-card__cta,
.proj-feature__cta{
  letter-spacing: .12em;
}
.eyebrow{
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: .74rem;
  color: var(--accent-ink-green);
  display: inline-flex;
  align-items: center;
  gap: .55em;
}
/* Auf dunklen Kapiteln/Heros: helles Chlorophyll (Spec). */
.chapter-dark .eyebrow,
.section-dark .eyebrow,
.page-hero .eyebrow,
.page-hero__kicker,
.proj-feature__body .eyebrow,
.fact-rail__card .eyebrow{ color: var(--chlorophyll-bright); }
/* Kicker-Strich entfernt (Kundenwunsch R4): kein fuehrender Gedankenstrich/
   Trennstrich mehr vor dem Seitentitel-Kicker — einheitlich auf allen Seiten. */
.eyebrow::before{ content: none; display: none; }

/* ------------------------------------------------------------------ *
 * BODY / LESETEXT — Spec Abschnitt 3 (Lesemaß, Rhythmus, Farbe)
 * ------------------------------------------------------------------ */
/* Grund-Lesetext auf hell: warmer Body-Ton, ruhige Zeile.
   Farbe/Zeilenhoehe/Ausrichtung fuer ALLE Absaetze; Groesse nur dort setzen,
   wo das Template keine explizite text-*-Utility vergibt (Hierarchie erhalten). */
body:not(.home-tree){ color: var(--text-body); }
body:not(.home-tree) p{
  color: var(--text-body);
  line-height: 1.7;                 /* Spec Desktop /1.7 */
  text-align: left;                 /* nie justify */
  hyphens: none;                    /* keine Silbentrennung im Web-Fließtext */
}
/* WICHTIG: Der obige (0,1,1)-Selektor darf die HELLEN Hero-Texte nicht
   ueberschreiben. Die Hero-Kicker/Lede-Regeln (weiter unten) tragen daher
   den .home-tree-freien Praefix + Klasse = (0,2,0) und gewinnen. Dark-Chapter
   (.chapter-dark p, (0,1,1), spaeter im File) gewinnen per Quellreihenfolge. */
body:not(.home-tree) p:not([class*="text-"]){
  font-size: 1.0625rem;             /* Spec Desktop 1.0625rem */
  max-width: var(--measure);        /* Spec: nie volle Breite (68ch) */
}
@media (max-width: 640px){
  body:not(.home-tree) p{ line-height: 1.65; hyphens: auto; }       /* Spec: hyphens nur Mobile */
  body:not(.home-tree) p:not([class*="text-"]){ font-size: 1rem; }
}
/* Absatzabstand ~1em nur bei Absaetzen OHNE eigene margin-Utility
   (bricht bestehende mt-*/space-y-* Layouts nicht). */
body:not(.home-tree) p:not([class*="mt-"]):not([class*="my-"]) + p:not([class*="mt-"]):not([class*="my-"]){ margin-top: 1em; }
/* Strong = --text-strong; Headlines h1/h2 = strong. */
body:not(.home-tree) strong,
body:not(.home-tree) b{ color: var(--text-strong); }
body:not(.home-tree) h1,
body:not(.home-tree) h2{ color: var(--text-strong); }
/* Breiten-Hooks bleiben erhalten; Container-Utilities dürfen breiter sein. */
.prose-essay p,
.measure{ max-width: var(--measure); }
/* Ausnahme: Text in Karten/Grid-Panels darf die volle Kartenbreite nutzen
   (das 68ch-Maß gilt fuer Fließtext-Spalten, nicht fuer schmale Tiles). */
.card p, .proj-card__body p, .feat__panel p, .fact-rail__card p,
[class*="grid"] p, .page-hero__lede{ max-width: none; }
.page-hero__lede{ max-width: 60ch; }

/* Editorial-Akzent Fraunces auf hell: dunkles Chlorophyll (Spec Abschnitt 2). */
body:not(.home-tree) .ital-leaf,
body:not(.home-tree) .prose-essay em{ color: var(--accent-ink-green); }

/* ------------------------------------------------------------------ *
 * LINKS im Fließtext — Spec Abschnitt 4:
 * gleiche Textfarbe + 1.5px Unterstreichung in Akzentfarbe;
 * Hover: Textfarbe → Akzent. Kein Farbwechsel-only-Link.
 * ------------------------------------------------------------------ */
body:not(.home-tree) .prose-essay a,
body:not(.home-tree) p a:not(.btn):not(.proj-card):not([class*="rounded"]),
body:not(.home-tree) li a:not(.btn){
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent-ink-green);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
body:not(.home-tree) .prose-essay a:hover,
body:not(.home-tree) p a:not(.btn):not(.proj-card):not([class*="rounded"]):hover,
body:not(.home-tree) li a:not(.btn):hover{
  color: var(--accent-ink-green);
  text-decoration-color: var(--accent-ink-green);
}
/* Auf dunklen Kapiteln: Akzent = helles Chlorophyll. */
.chapter-dark .prose-essay a, .section-dark p a:not(.btn){
  text-decoration-color: var(--chlorophyll-bright);
}

/* ::selection — Spec Abschnitt 4: Chlorophyll-Hintergrund, --ink Text. */
::selection{ background: var(--chlorophyll-bright); color: var(--forest-ink, #0C110D); }
::-moz-selection{ background: var(--chlorophyll-bright); color: var(--forest-ink, #0C110D); }

/* ------------------------------------------------------------------ *
 * 2 · ZWEI WELTEN — helle & dunkle Kapitel
 * ------------------------------------------------------------------ */
/* Basis: Subpages sind hell (Kalkstein). Dunkle Kapitel werden über
   .chapter-dark markiert (per app.js optional gesetzt; wir liefern die
   Klasse + robuste Fallbacks). Da wir Markup nicht verändern dürfen,
   gilt die dunkle Welt v.a. für Hero-Sektionen mit .hero-stage sowie
   für bestehende dunkle Bänder. */

.chapter-dark,
.section-dark{
  background: var(--forest-ink);
  color: var(--text-body-inv);
  position: relative;
  isolation: isolate;
}
.chapter-dark h1,.chapter-dark h2,.chapter-dark h3,
.section-dark h1,.section-dark h2,.section-dark h3{ color: var(--text-strong-inv); }
.chapter-dark .eyebrow,
.section-dark .eyebrow{ color: var(--chlorophyll-bright); }
.chapter-dark p,
.section-dark p{ color: var(--text-body-inv); }
.chapter-dark strong,.section-dark strong,
.chapter-dark b,.section-dark b{ color: var(--text-strong-inv); }
.chapter-dark a:not(.btn),
.section-dark a:not(.btn){ color: var(--chlorophyll-bright); }

/* Korn-Layer auf dunklen Flächen (opacity ~0.04). */
.chapter-dark::after,
.section-dark::after,
body.home-tree .grain-layer{
  content:"";
  position:absolute; inset:0;
  pointer-events:none; z-index:-1;
  opacity:.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ *
 * 3 · ÜBERGROSSE ORDINALZAHLEN
 * ------------------------------------------------------------------ */
.numeral,
.ordinal{
  font-family: var(--font-mono);
  font-weight: 300;
  color: var(--amber);
  opacity: .10;
  line-height: 1;
  letter-spacing: -0.04em;
  font-size: clamp(6rem, 22vw, 18rem);
  user-select: none;
  pointer-events: none;
}
.chapter-dark .numeral,
.section-dark .numeral{ color: var(--amber); opacity:.14; }

/* ------------------------------------------------------------------ *
 * 4 · GRID / OFFSET-LAYOUT-HOOKS
 * ------------------------------------------------------------------ */
.grid-12{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
}
.col-text{ grid-column: 1 / span 6; }
.col-media{ grid-column: 6 / span 7; }  /* überlappt Text bewusst */
@media (max-width: 860px){
  .col-text,.col-media{ grid-column: 1 / -1; }
}

/* Full-Bleed-Hero + Ink-Scrim. */
.bleed{
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.hero-scrim{ position: relative; }
.hero-scrim::before{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(12,17,13,.15) 0%, rgba(12,17,13,.55) 60%, rgba(12,17,13,.85) 100%);
}
.hero-scrim > *{ position:relative; z-index:2; }

/* ------------------------------------------------------------------ *
 * 5 · VERTIKALER RHYTHMUS
 * ------------------------------------------------------------------ */
body:not(.home-tree) main > section,
body:not(.home-tree) main > .section{
  padding-block: var(--rhythm);
}

/* ------------------------------------------------------------------ *
 * 6 · HEADER-TRANSFORMATION
 * ------------------------------------------------------------------ */
#site-header{
  transition: background .4s var(--ease-reveal), box-shadow .4s var(--ease-reveal),
              backdrop-filter .4s var(--ease-reveal), padding .35s var(--ease-reveal);
}
/* Runde 5 — Glass-Header im GESCROLLTEN Zustand.
   Frueher: rgba(237,231,218,.82) = fast opakes Bone -> wirkte hart/einfarbig.
   Jetzt: klar transluzent (Bone bei 0.58 Deckkraft) mit kraeftigem
   backdrop-filter blur+saturate, damit derselbe Glas-Eindruck wie ganz oben
   erhalten bleibt, nur mit minimal mehr Toenung fuer Lesbarkeit ueber hellem
   UND dunklem Inhalt. Sanfte Transition kommt aus der #site-header-Basisregel. */
#site-header.is-scrolled{
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  background: rgba(237,231,218,.58);
  border-bottom: 1px solid rgba(26,31,27,.10);
}
/* Fallback fuer Browser OHNE backdrop-filter: ohne Blur braucht es mehr
   Deckkraft, damit die Navigation lesbar bleibt — bleibt aber leicht getoent,
   nie voll opak. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  #site-header.is-scrolled{ background: rgba(237,231,218,.92); }
}
/* Runde 5: Auf dem transluzenten Glass-Header (0.58) muss die Navigation auch
   ueber DUNKLEN Kapiteln sicher lesbar sein. --text-strong (#1A1F1B) liefert
   selbst im Worst Case (Glass ueber ganz dunklem Inhalt) >=5:1 Kontrast, ueber
   hellen Bone-Flaechen bis 16:1. Gilt fuer gescrollten Zustand auf allen Seiten;
   der ungescrollte over-hero-Zustand (helle Schrift) bleibt unberuehrt. */
#site-header.is-scrolled a,
#site-header.is-scrolled .top-nav-uni a,
#site-header.is-scrolled .brand,
#site-header.is-scrolled .brand *{ color: var(--text-strong, #1A1F1B) !important; text-shadow: none !important; }
/* Nav-Links: Amber-Unterstrich beim Hover. */
.nav-link{ position: relative; }
/* Fluide Nav-Typo: Menuepunkte wachsen/schrumpfen mit der Viewport-Breite,
   damit die Zeile so lange wie moeglich einreihig bleibt (laengste Sprache: ES).
   1280-1920px: identisch zu vorher (12px/24px). Darunter sanftes Schrumpfen
   bis 9px/11px (~eine Reihe bis ca. 1000px), ab 2200px moderates Mitwachsen. */
#site-header .top-nav-uni{
  font-size: clamp(9px, 0.9375vw, 12px);
  column-gap: clamp(9px, 4.6875vw - 36px, 24px);
}
@media (min-width: 2200px){
  /* Header-Innencontainer ist auf ~1280px gedeckelt — 13px ist das Maximum,
     bei dem auch die laengste Sprache (ES) einreihig bleibt. */
  #site-header .top-nav-uni{ font-size: clamp(12px, 9.36px + 0.12vw, 12.6px); }
}
/* Sprachumschalter: skaliert im festen Verhaeltnis 10:12 zur Nav-Schrift mit
   (i18n.css setzt fix 10px). Auch die Button-Innenabstaende schrumpfen mit,
   damit der Schalter bei schmalen Fenstern Platz fuer die einreihige Nav laesst. */
#site-header .lang-switch button{
  font-size: clamp(7.5px, 0.78125vw, 10px);
  padding: 4px clamp(5px, 0.703vw, 9px);
}
@media (min-width: 2200px){
  #site-header .lang-switch button{ font-size: clamp(10px, 7.8px + 0.1vw, 10.5px); }
}

.nav-link::after{ background: var(--chlorophyll) !important; }

/* ------------------------------------------------------------------ *
 * 7 · BUTTONS / KARTEN — neue Palette
 * ------------------------------------------------------------------ */
.btn-primary{
  background: var(--chlorophyll);
  color: #08240F;
  font-weight: 600;
}
.btn-primary:hover{
  background: var(--chlorophyll-bright);
  box-shadow: 0 16px 30px -14px rgba(89,179,106,.5);
}
.btn-terra{ background: var(--amber); color:#221602; }
.btn-terra:hover{ box-shadow:0 16px 28px -14px rgba(224,164,60,.55); }

.card{
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: border-color .3s ease, transform .3s var(--ease-reveal), box-shadow .3s ease;
}
.card:hover{
  border-color: var(--chlorophyll);
  box-shadow: 0 22px 50px -30px rgba(12,17,13,.30);
}

/* R9: Hover-Glow für bildlose Text-Widgets (MISSION) — gespiegelt von .card:hover.
   Nur border/shadow animieren; Reveal läuft über animation, daher kein Konflikt. */
.card-hover{ transition: border-color .3s ease, box-shadow .3s ease; }
.card-hover:hover{
  border-color: var(--chlorophyll);
  box-shadow: 0 22px 50px -30px rgba(12,17,13,.30);
}

.chip-leaf{ background:#E4EEDD; border-color:#BFD3B4; color:var(--leaf2); }

/* ------------------------------------------------------------------ *
 * 8 · HAIRLINES / ORNAMENTS
 * ------------------------------------------------------------------ */
.hairline{
  height:1px;
  background: linear-gradient(to right, transparent, var(--line), transparent);
}
.grow-line{
  height:1px; background: var(--chlorophyll);
  transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--ease-drama);
}
.grow-line.is-in{ transform: scaleX(1); }

/* ------------------------------------------------------------------ *
 * 9 · MOTION — Reveals (nur wenn Motion erlaubt)
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference){
  .rd-reveal{
    opacity:0; transform: translateY(24px);
    transition: opacity .6s var(--ease-reveal), transform .6s var(--ease-reveal);
  }
  .rd-reveal.is-in{ opacity:1; transform:none; }
  .rd-img{ overflow:hidden; }
  .rd-img img{ transform: scale(1.04); transition: transform 1.1s var(--ease-drama); }
  .rd-img.is-in img{ transform: scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .rd-reveal, .grow-line{ opacity:1 !important; transform:none !important; }
}

/* ------------------------------------------------------------------ *
 * 10 · RTL-Feinschliff
 * ------------------------------------------------------------------ */
html[dir="rtl"] .eyebrow::before{ order: 2; }
html[dir="rtl"] .col-text{ grid-column: 7 / span 6; }
html[dir="rtl"] .col-media{ grid-column: 1 / span 7; }
@media (max-width: 860px){
  html[dir="rtl"] .col-text,
  html[dir="rtl"] .col-media{ grid-column: 1 / -1; }
}

/* ================================================================== *
 * 11 · EDITORIAL LAYOUT — Runde 2
 * Full-bleed dunkle Kapitel-Heros, überlappende Sektionsbilder,
 * Oversized-Ordinalzahlen, Sticky-Fakten-Rail, editoriale Karten.
 * Klassen sind additiv; i18n-Keys/IDs/ARIA in Templates unberührt.
 * ================================================================== */

/* --- Full-bleed Utility: sprengt jeden max-w-Container auf 100vw --- */
.fullbleed{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* --- 11.1 Seiten-Hero als dunkles Full-bleed-Kapitel --- */
.page-hero{
  position:relative;
  /* R7-Fix Punkt 1: Hero-Hoehe an die BREITE koppeln, nicht an vh.
     Frueher min-height:72vh -> auf hohen/4K-Schirmen wurde der Hero 1500px+
     hoch, wodurch object-fit:cover das (ca. 1.5-1.8:1 breite) Motiv oben/unten
     stark beschnitt (Koepfe/Gesichter "enthauptet"). Jetzt waechst die Hoehe
     mit der Viewport-Breite (vw), sodass das Seitenverhaeltnis des Heros dem
     des Bildes nahekommt und weniger vertikal geschnitten wird. Unterer Wert
     sichert genug Platz fuer den Text-Block, oberer Cap verhindert extrem
     hohe Heros. */
  min-height:clamp(30rem, 50vw, 52rem);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--forest-ink, #0C110D);
  isolation:isolate;
  /* Hero reicht unter den fixierten Header (cancelt #main padding-top:88px),
     damit der transparente Header auf dem dunklen Bild + Scrim liegt statt
     auf hellem Seiten-Hintergrund. */
  margin-top:-88px;
}
@media (max-width:820px){
  .page-hero{ margin-top:-72px; }
}
.page-hero__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  /* Standard-Fokus; per-Seite via .page-hero--* feinjustiert (R7-Fix Punkt 1),
     damit Motive (Gesichter/Koepfe) auch bei breiten Zuschnitten sichtbar bleiben. */
  object-position:var(--hero-focus, 50% 42%);
  z-index:-2;
}
/* R7-Fix Punkt 1: per-Seite Fokuspunkt.
   delegatis: Mann + Roboter-Kopf liegen im oberen Bilddrittel -> Fokus nach oben.
   resil-soil: Roboterhund/Setzling mittig-oben -> leicht nach oben. */
.page-hero--delegatis{ --hero-focus:50% 30%; }
.page-hero--resil-soil{ --hero-focus:50% 34%; }
.page-hero--mission{ --hero-focus:60% 21%; } /* Gesicht des Mädchens (oben rechts) bei breiten Zuschnitten im Bild halten */
@media (min-width: 2200px){
  /* 4K/Ultrawide: Beim 52rem-Cap waeren nur ~39% der Bildhoehe sichtbar — Augen (16%) und
     Finger am Setzling (80%) passen nicht gleichzeitig ins Fenster. Deshalb waechst der
     Mission-Hero hier moderat mit der Breite weiter (38vw ≈ 68% Bildfenster, nahtlos am
     Breakpoint: 38vw@2200px ≈ 836px ≈ alter Cap) und der Fokus rutscht auf 44%. */
  .page-hero--mission{ --hero-focus:60% 44%; min-height:clamp(52rem, 38vw, 100rem); }
}
/* Scrim: dunkel unten (Text-Lesbarkeit) + oben (Header-Kontrast) */
.page-hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg,
      rgba(12,17,13,.74) 0%,
      rgba(12,17,13,.32) 20%,
      rgba(12,17,13,.22) 46%,
      rgba(12,17,13,.40) 66%,
      rgba(12,17,13,.90) 100%),
    linear-gradient(90deg,
      rgba(12,17,13,.62) 0%,
      rgba(12,17,13,.14) 58%,
      rgba(12,17,13,0) 100%);
}
/* rbay-Variante (Kundenwunsch R4): helleres Key-Visual -> deutlich staerkerer
   Scrim von unten/links + leichte Gesamt-Abdunklung, damit Kicker/Headline/Lead
   die TYPO-SPEC-Kontrastanforderungen (>=4.5:1) erfuellen. Wir DUNKELN den
   Scrim ab, nicht den Text (Spec Abschnitt 4). */
.page-hero--rbay .page-hero__scrim{
  background:
    /* leichte Gesamt-Abdunklung ueber das ganze Bild */
    linear-gradient(0deg, rgba(12,17,13,.30), rgba(12,17,13,.30)),
    /* vertikal: oben moderat, unten sehr kraeftig */
    linear-gradient(180deg,
      rgba(12,17,13,.80) 0%,
      rgba(12,17,13,.44) 22%,
      rgba(12,17,13,.40) 50%,
      rgba(12,17,13,.66) 78%,
      rgba(12,17,13,.96) 100%),
    /* horizontal: linke Textspalte zusaetzlich abgedunkelt */
    linear-gradient(90deg,
      rgba(12,17,13,.82) 0%,
      rgba(12,17,13,.42) 46%,
      rgba(12,17,13,.06) 82%,
      rgba(12,17,13,0) 100%);
}
.page-hero__inner{
  position:relative;
  width:100%;
  max-width:80rem;
  margin:0 auto;
  padding:clamp(2.5rem,7vw,6rem) clamp(1.25rem,4vw,2.5rem) clamp(2.2rem,5vw,4rem);
}
body:not(.home-tree) .page-hero__kicker{
  font-family:var(--mono, "JetBrains Mono", monospace);
  font-size:clamp(10px,1.1vw,12px);
  letter-spacing:.12em;            /* Spec: einheitliche Kicker-Sperrung */
  text-transform:uppercase;
  font-weight:500;
  color:var(--chlorophyll-bright, #8FE39B);
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  margin:0 0 1.1rem;
}
/* Hero-Kicker-Strich ebenfalls entfernt (Kundenwunsch R4). */
.page-hero__kicker::before{ content: none; display: none; }
html:not([data-lang="ar"]):not([data-lang="zh"]):not([lang^="ar"]):not([lang^="zh"]) .page-hero__title{
  font-family:'Clash Display', var(--display, sans-serif);
}
body:not(.home-tree) .page-hero__title{
  color:var(--text-strong-inv, #F2EDE1);   /* Spec: helle Headline auf Foto-Scrim, (0,2,0) schlaegt h1/h2-Body-Regel */
  font-weight:600;
  font-size:clamp(2.6rem, 8.2vw, 7rem);
  line-height:.96;
  letter-spacing:-.025em;
  margin:0;
  max-width:16ch;
  text-shadow:0 2px 40px rgba(12,17,13,.35);
}
/* Zweizeilige Hero-Headline (Kundenwunsch R4, Forschungsseite): jeder Satz in
   eigener Block-Zeile. Innerhalb der Zeile bleibt der Umbruch fluide/responsive. */
.page-hero__title .hero-line{ display:block; }
.page-hero__title .ital,
.page-hero__title em{
  font-family:Fraunces, Georgia, serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:-.01em;
  font-variation-settings:'opsz' 144;
}
/* Hero-Leitmotiv (Runde 5): auf dem DUNKLEN Foto-Hero muss die Fraunces-
   Kursive (z.B. Mission "in Harmonie") das HELLE Chlorophyll #8FE39B tragen,
   nie das abgedunkelte --accent-ink-green. body:not(.home-tree)-Prefix hebt
   die Spezifitaet ueber die allgemeine Hell-Regel `body:not(.home-tree)
   .ital-leaf` (0,2,1) an -> hier (0,3,1), gewinnt sicher. */
/* AMOC-Karte (dunkle Ink-Karte, portiert aus Master): Headline muss hell bleiben,
   die generische Dunkel-Regel fuer h3 auf hellen Seiten darf hier nicht greifen. */
/* R9: .amoc-card entfernt — AMOC-Widget nutzt jetzt das helle CADI-Layout. */

body:not(.home-tree) .page-hero__title .ital-leaf,
body:not(.home-tree) .page-hero__title .ital-glow{ color:var(--glow, #8FE39B); }
body:not(.home-tree) .page-hero__title .ital-terra,
body:not(.home-tree) .page-hero__title .ital-amber{ color:var(--amber, #E0A43C); }
body:not(.home-tree) .page-hero__lede{
  color:var(--text-body-inv);        /* Spec: Lesetext invers, blendet nicht */
  font-size:clamp(1.15rem,1.6vw,1.375rem);
  line-height:1.6;
  max-width:60ch;
  margin:1.6rem 0 0;
  text-align:left;
}
.page-hero__meta{
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem;
  margin-top:1.6rem;
}
.page-hero__meta .hero-fact{
  font-family:var(--mono, monospace);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(244,239,228,.62);
}
.page-hero__meta .hero-fact b{ color:var(--amber,#E0A43C); font-weight:500; }
@media (max-width:640px){
  .page-hero{ min-height:64vh; }
  .page-hero__title{ font-size:clamp(2.3rem,12vw,3.4rem); max-width:100%; }
}

/* --- 11.2 Header hell-auf-dunkel über dem Hero --- */
/* Solange nicht gescrollt UND eine Subpage mit Dark-Hero: Header transparent, helle Schrift. */
#site-header.over-hero:not(.is-scrolled){
  background:transparent !important;
  box-shadow:none !important;
  border-color:transparent !important;
}
/* Leichter dunkler Scrim hinter dem Header für garantierten Kontrast auf jedem Hero-Bild */
#site-header.over-hero:not(.is-scrolled)::before{
  content:"";
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(12,17,13,.55) 0%, rgba(12,17,13,.28) 55%, rgba(12,17,13,0) 100%);
}
#site-header.over-hero:not(.is-scrolled) .header-rule{ opacity:0; }
#site-header.over-hero:not(.is-scrolled) a,
#site-header.over-hero:not(.is-scrolled) .top-nav-uni a,
#site-header.over-hero:not(.is-scrolled) .lang-switch button{
  color:rgba(244,239,228,.95) !important;
  text-shadow:0 1px 12px rgba(12,17,13,.55) !important;
}
/* Sprachumschalter-Kapsel: dunkel-transparent mit hellem Rahmen statt heller Füllung */
#site-header.over-hero:not(.is-scrolled) .lang-switch{
  background:rgba(12,17,13,.30) !important;
  border-color:rgba(244,239,228,.38) !important;
}
#site-header.over-hero:not(.is-scrolled) .lang-switch button[aria-pressed="true"],
#site-header.over-hero:not(.is-scrolled) .lang-switch button.is-active{
  color:#0C110D !important; background:var(--glow,#8FE39B) !important;
}
#site-header.over-hero:not(.is-scrolled) .brand,
#site-header.over-hero:not(.is-scrolled) .brand *{ color:#F4EFE4 !important; }
/* Kompakt/Blur nach Scroll (Mechanik existiert via .is-scrolled).
   Runde 5: die frueher hier doppelt gesetzte .is-scrolled-Blur-Regel
   (blur(12px) ohne saturate/background) wurde entfernt — sie hob das neue
   Glass-Design (blur(16px) saturate(1.4), rgba(...,.58)) oben wieder teilweise
   auf. Der Glass-Zustand wird jetzt ausschliesslich in Abschnitt 6 definiert. */
#site-header{ transition:background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease, padding .3s ease; }

/* --- 11.2b Lead-/Intro-Absatz nach dem Hero (Fließtext, NICHT Clash Display) --- */
.lead-intro{
  font-family:var(--font-body, 'Satoshi', system-ui, sans-serif);
  font-weight:400;                                  /* Spec: Leads NICHT strong */
  color:var(--text-body);
  font-size:clamp(1.25rem, 1.6vw, 1.375rem);        /* Spec: 1.25–1.375rem */
  line-height:1.6;                                  /* Spec: Leads /1.6 */
  max-width:64ch;
  margin:0;
  letter-spacing:-.005em;
  text-align:left;
}
.lead-intro em, .lead-intro .ital{
  font-family:Fraunces, Georgia, serif; font-style:italic; font-weight:400;
}

/* --- 11.3 Übergang Hero → helle Substanz-Sektion --- */
.page-body{
  position:relative;
  background:var(--bone, #EDE7DA);
}
.page-body__inner{
  max-width:80rem; margin:0 auto;
  padding:clamp(3rem,6vw,5.5rem) clamp(1.25rem,4vw,2.5rem);
}

/* --- 11.4 Überlappende asymmetrische Sektionsbilder --- */
.feat{
  position:relative;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(1.5rem,3vw,3rem);
  align-items:center;
  margin:clamp(3.5rem,8vw,7rem) 0;
}
.feat__media{
  grid-column:1 / span 7;
  position:relative;
  border-radius:2px;
  overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(12,17,13,.45);
}
.feat__media img{ width:100%; height:auto; display:block; transition:transform 1.2s var(--ease-drama, cubic-bezier(.16,1,.3,1)); }
.feat__media:hover img{ transform:scale(1.035); }
.feat__text{
  grid-column:7 / span 6;         /* bewusster Überlapp mit der Medienspalte */
  position:relative;
  z-index:2;
}
/* gespiegelte Variante (Bild rechts, Text links, überlappt) */
.feat--rev .feat__media{ grid-column:6 / span 7; }
.feat--rev .feat__text{ grid-column:1 / span 6; }
/* Text-Panel als helle Karte, die aufs Bild ragt */
.feat__panel{
  background:var(--ivory, #F4EFE4);
  border:1px solid var(--line,#D5CCB9);
  padding:clamp(1.5rem,2.5vw,2.4rem);
  box-shadow:0 30px 60px -34px rgba(12,17,13,.30);
}
@media (max-width:860px){
  .feat, .feat--rev{ display:block; margin:clamp(2.5rem,10vw,4rem) 0; }
  .feat__media, .feat--rev .feat__media{ grid-column:auto; }
  .feat__text, .feat--rev .feat__text{ grid-column:auto; margin-top:-2rem; padding:0 clamp(.5rem,3vw,1.2rem); }
  .feat__panel{ padding:1.4rem; }
}

/* --- 11.5 Oversized Ordinalzahl als Sektionsmarker --- */
.sec-ord{
  font-family:var(--mono, monospace);
  font-weight:500;
  font-size:clamp(2.6rem,6vw,4.4rem);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--amber, #E0A43C);
  opacity:.42;
  display:block;
}
.sec-marker{
  display:flex; align-items:baseline; gap:1.1rem;
  margin-bottom:1.1rem;
}
.sec-marker .sec-kicker{
  font-family:var(--mono, monospace);
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--leaf2, #3E7E4C);
}

/* --- 11.6 Sticky-Fakten-Rail --- */
.fact-rail{
  position:relative;
}
@media (min-width:900px){
  .fact-rail{ position:sticky; top:96px; align-self:start; }
}
.fact-rail__card{
  background:var(--forest-ink, #0C110D);
  color:#EDE7DA;
  padding:clamp(1.5rem,2.2vw,2rem);
  border-radius:2px;
  box-shadow:0 30px 60px -34px rgba(12,17,13,.5);
}
.fact-rail__card .eyebrow{ color:var(--glow,#8FE39B); }
.fact-rail__card dt{
  font-family:var(--mono, monospace);
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--amber,#E0A43C);
}
.fact-rail__card dd{ color:rgba(237,231,218,.94); margin:.2rem 0 0; }
.fact-rail__card a{ color:var(--glow,#8FE39B); }

/* --- 11.7 Produkte-Übersicht: Full-width Feature + editoriale Karten --- */
.proj-feature{
  position:relative;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  min-height:clamp(360px,44vw,520px);
  overflow:hidden;
  background:var(--forest-ink,#0C110D);
  border-radius:2px;
  isolation:isolate;
}
.proj-feature__media{ position:relative; overflow:hidden; }
.proj-feature__media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:transform 1.2s var(--ease-drama,cubic-bezier(.16,1,.3,1));
}
.proj-feature:hover .proj-feature__media img{ transform:scale(1.05); }
.proj-feature__body{
  position:relative; z-index:2;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2rem,4vw,3.5rem);
  color:#EDE7DA;
}
.proj-feature__body .eyebrow{ color:var(--glow,#8FE39B); }
html:not([data-lang="ar"]):not([data-lang="zh"]):not([lang^="ar"]):not([lang^="zh"]) .proj-feature__h{
  font-family:'Clash Display', var(--display, sans-serif);
}
body:not(.home-tree) .proj-feature__h{
  font-size:clamp(2rem,4vw,3.4rem); line-height:.98; letter-spacing:-.02em;
  color:var(--text-strong-inv, #F2EDE1); font-weight:600; margin:.6rem 0 0;   /* (0,2,0) schlaegt Body-h2-Regel */
}
body:not(.home-tree) .proj-feature__desc{ color:var(--text-body-inv); margin-top:1rem; max-width:44ch; line-height:1.6; } /* (0,2,0) schlaegt Body-p-Regel */
.proj-feature__cta{
  font-family:var(--mono,monospace); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--glow,#8FE39B);
  margin-top:1.6rem; display:inline-flex; gap:.5rem; align-items:center;
  transition:gap .25s ease;
}
.proj-feature:hover .proj-feature__cta{ gap:.9rem; }
@media (max-width:820px){
  .proj-feature{ grid-template-columns:1fr; }
  .proj-feature__media{ min-height:240px; position:relative; }
  .proj-feature__media img{ position:absolute; }
}

/* Editoriale Karte mit Hover-Zoom (randloser, mutiger) */
.proj-card{
  display:block; position:relative; overflow:hidden;
  background:var(--ivory,#F4EFE4);
  border:1px solid var(--line,#D5CCB9);
  border-radius:2px;
  text-decoration:none; color:inherit;
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.proj-card:hover{
  border-color:var(--leaf,#59B36A);
  box-shadow:0 26px 54px -30px rgba(12,17,13,.34);
  transform:translateY(-3px);
}
.proj-card__media{ position:relative; overflow:hidden; aspect-ratio:16/10; }
.proj-card__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.1s var(--ease-drama,cubic-bezier(.16,1,.3,1));
}
.proj-card:hover .proj-card__media img{ transform:scale(1.07); }
.proj-card__body{ padding:clamp(1.2rem,2vw,1.6rem); }
.proj-card__cta{
  font-family:var(--mono,monospace); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--leaf2,#3E7E4C);
  margin-top:1rem; display:inline-flex; gap:.45rem; align-items:center;
  transition:gap .25s ease;
}
.proj-card:hover .proj-card__cta{ gap:.85rem; }

/* --- RTL Spiegelung für neue Grids --- */
html[dir="rtl"] .feat__media{ grid-column:6 / span 7; }
html[dir="rtl"] .feat__text{ grid-column:1 / span 6; }
html[dir="rtl"] .feat--rev .feat__media{ grid-column:1 / span 7; }
html[dir="rtl"] .feat--rev .feat__text{ grid-column:7 / span 6; }
html[dir="rtl"] .page-hero__kicker::before{ order:2; }
html[dir="rtl"] .proj-feature{ grid-template-columns:.85fr 1.15fr; }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce){
  .feat__media img, .proj-card__media img, .proj-feature__media img{ transition:none !important; }
  .feat__media:hover img, .proj-card:hover .proj-card__media img,
  .proj-feature:hover .proj-feature__media img{ transform:none !important; }
  .proj-card:hover{ transform:none !important; }
}

/* --- 11.8 Produkt-Extra-Figuren aufwerten (CSS-only, kein Markup-Change) ---
   Die inline `extra`-Bloecke der Produktseiten nutzen
   <figure class="rounded-2xl overflow-hidden border ..."> mit <img> + <figcaption>.
   Wir entfernen die Box-Anmutung, vergroessern die Bilder, geben ihnen einen
   editorialen Schatten und einen dezenten Hover-Zoom. Scope: nur innerhalb #main. */
#main figure.rounded-2xl{
  border-radius:2px !important;
  border:none !important;
  background:transparent !important;
  box-shadow:0 40px 80px -44px rgba(12,17,13,.42);
  overflow:hidden;
}
#main figure.rounded-2xl > img{
  transition:transform 1.2s var(--ease-drama, cubic-bezier(.16,1,.3,1));
}
#main figure.rounded-2xl:hover > img{ transform:scale(1.03); }
#main figure.rounded-2xl > figcaption{
  background:var(--ivory,#F4EFE4);
  border:1px solid var(--line,#D5CCB9);
  border-top:none;
}
@media (prefers-reduced-motion: reduce){
  #main figure.rounded-2xl > img{ transition:none !important; }
  #main figure.rounded-2xl:hover > img{ transform:none !important; }
}

/* R7 Nachtrag (Kundenwunsch): Figure-Widgets in Karten-Grids.
   1) Bei ungleich hohen Nachbar-Widgets fuellt die Caption die Resthoehe
      selbst aus -> Fuellflaeche hat exakt dieselbe Farbe wie hinter dem Text
      (vorher schien die dunklere Sektionsflaeche durch).
   2) Gleiche kleine Rundung an allen vier Ecken wie bei den .card-Widgets. */
#main .grid > figure.rounded-2xl{
  display:flex;
  flex-direction:column;
  border-radius:var(--r-card, 18px) !important;
}
#main .grid > figure.rounded-2xl > img{ flex:0 0 auto; }
#main .grid > figure.rounded-2xl > figcaption{ flex:1 1 auto; }
