/* =====================================================================
   LISI — Manifest „Was jetzt auf uns zukommt"
   AP3 · Immersives Longform-Redesign 2026 — „Organic Futurism"
   ---------------------------------------------------------------------
   Eigenes, gekapseltes Stylesheet fuer alle 7 Sprachfassungen + Login.
   Wird NACH assets/fonts.css und assets/subpage-harmony.css geladen und
   ueberschreibt gezielt die Bestands-Inline-Styles.
   Keine externen Requests. Fonts self-hosted (fonts.css). DSGVO-konform.
   ===================================================================== */

/* -------------------------------------------------------------------
   0 · Design-Tokens (Wald-Tinte + Kalkstein-Hell, zwei Welten)
   ------------------------------------------------------------------- */
:root{
  --m-ink:        #0C110D;   /* Wald-Tinte: immersive dunkle Buehne          */
  --m-ink-2:      #141B15;   /* Karten/Flaechen auf dunkel                    */
  --m-ink-3:      #1D261E;   /* leichte Erhebung auf dunkel                   */
  --m-bone:       #EDE7DA;   /* Kalkstein-Hell: Lese-Passagen                 */
  --m-bone-2:     #E2DACA;   /* Flaechen auf hell                             */
  --m-bone-3:     #F4F0E6;   /* leuchtendes Papier fuer Karten auf hell       */
  --m-chloro:     #59B36A;   /* Primaerakzent: Leben, CTAs, aktiv             */
  --m-chloro-br:  #8FE39B;   /* Leuchtakzent auf dunkel (Glow, Linien, Hover) */
  --m-amber:      #E0A43C;   /* Sekundaerakzent: Zahlen, Highlights           */
  --m-amber-soft: #F0C877;   /* weicheres Amber fuer Text auf dunkel          */
  --m-rust:       #B4543A;   /* sparsam: Warnung / „Vorher"-Welt              */

  /* -----------------------------------------------------------------
     Textfarben — verbindlich nach TYPO-SPEC-2026.md Abschnitt 2
     (weiches Kontrastsystem: nie Schwarz/Weiss, nie Weiss/Schwarz)
     ----------------------------------------------------------------- */
  /* auf hellem Grund (--m-bone #EDE7DA) */
  --text-strong:      #1A1F1B;  /* Headlines, strong                          */
  --text-body:        #33392F;  /* Lesetext (~10:1, warm statt hart)          */
  --text-muted:       #6B7263;  /* Captions, Meta, Sekundaeres (>=4.5:1)      */
  --accent-ink-green: #2E6B45;  /* Fraunces-Akzente/Links auf hell            */
  /* auf dunklem Grund (--m-ink #0C110D) */
  --text-strong-inv:  #F2EDE1;  /* Headlines                                  */
  --text-body-inv:    #C9C4B6;  /* Lesetext (gedaempftes Bone, blendet nicht) */
  --text-muted-inv:   #8B8A7B;  /* Meta                                       */
  /* Akzente auf dunkel: Gruen = Leben/Leitmotiv, Amber = Zahlen/Marker */

  /* Abwaertskompatible Aliase (alte Variablennamen -> Spec-Werte) */
  --m-on-dark:      var(--text-body-inv);   /* Fliesstext auf dunkel          */
  --m-on-dark-dim:  var(--text-muted-inv);  /* gedaempft auf dunkel           */
  --m-on-dark-soft: #D6D1C3;                /* halbstark auf dunkel           */
  --m-on-light:     var(--text-body);       /* Fliesstext auf hell            */
  --m-on-light-dim: var(--text-muted);      /* gedaempft auf hell             */

  /* Systematik */
  --m-measure:    66ch;                 /* Longform-Lesemass max 66 Zeichen    */
  --m-lh-read:    1.7;                  /* Lese-Zeilenhoehe (Spec)             */
  --m-lh-read-m:  1.65;                 /* Lese-Zeilenhoehe Mobile             */
  --m-radius:     18px;
  --m-radius-lg:  26px;
  --m-ease:       cubic-bezier(.16,.84,.3,1);
  --m-rhythm:     clamp(4.5rem, 11vh, 9rem);

  /* Typo-Familien (self-hosted). Clash Display nicht vorhanden ->
     Fraunces mit staerkerem Gewicht/Groesse als Display-Fallback. */
  --m-display: "Clash Display", "Fraunces", "Iowan Old Style", Georgia, ui-serif, serif;
  --m-serif:   "Fraunces", "Iowan Old Style", Georgia, ui-serif, serif;
  --m-sans:    "Satoshi", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --m-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Display-Fallback-Deklaration: Fraunces „opsz max", schweres Gewicht,
   damit die Kapitel-Headlines geometrisch-markant wirken (Clash-Ersatz). */
.m2026 .font-display,
.m2026 .hero-title,
.m2026 h1.headline,
.m2026 h1{
  font-family: var(--m-display);
  font-variation-settings: "opsz" 144;
}

/* =====================================================================
   1 · Globale Buehne — dunkle immersive Grundfarbe
   ===================================================================== */
html.m2026,
.m2026 body{
  background: var(--m-ink) !important;
  color: var(--m-on-dark) !important;
}
.m2026 body{
  font-family: var(--m-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Textauswahl: Chlorophyll-Hintergrund mit Ink-Text (Spec 4.44) */
.m2026 ::selection{ background: var(--m-chloro-br); color: var(--m-ink); }

/* Feines Filmkorn ueber der dunklen Buehne (rein dekorativ, SVG-Data-URI,
   kein externer Request). */
.m2026 body::after{
  content:""; position: fixed; inset:0; z-index: 1; pointer-events:none;
  opacity: .05; mix-blend-mode: overlay;
  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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce){
  .m2026 body::after{ opacity: .035; }
}

/* Fokus-Sichtbarkeit fuer Tastaturnavigation */
.m2026 a:focus-visible,
.m2026 button:focus-visible,
.m2026 input:focus-visible{
  outline: 2px solid var(--m-chloro-br);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =====================================================================
   2 · Kapitel-Progress-Indikator (oben, wachsende Chlorophyll-Linie)
   ===================================================================== */
.m-progress{
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 200; background: transparent; pointer-events: none;
}
/* Fortschritt = Leben -> durchgaengig Chlorophyll (Spec Konvention 2:
   Gruen fuer Leben/Leitmotiv, kein Amber-Uebergang). */
.m-progress__bar{
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--m-chloro) 0%, var(--m-chloro-br) 100%);
  box-shadow: 0 0 12px rgba(143,227,155,.55);
  transition: width .12s linear;
}
html[dir="rtl"] .m-progress__bar{ margin-left: auto; }

/* Kapitel-Zaehler-Pille unten (dezent, mono, amber-Nummer) */
.m-chapmark{
  position: fixed; z-index: 190;
  bottom: clamp(14px, 3vh, 26px);
  right: clamp(14px, 3vw, 28px);
  display: inline-flex; align-items: baseline; gap: .35rem;
  padding: .5rem .85rem; border-radius: 999px;
  background: rgba(12,17,13,.72);
  border: 1px solid rgba(143,227,155,.22);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: var(--m-mono); font-size: .72rem; letter-spacing: .12em;
  color: var(--m-on-dark-dim); text-transform: uppercase;
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s var(--m-ease), transform .4s var(--m-ease);
}
.m-chapmark.is-visible{ opacity: 1; transform: none; }
/* Kapitelzahl = Amber, Mono tabular (Spec Konvention 2 + 4.45) */
.m-chapmark{ font-variant-numeric: tabular-nums; }
.m-chapmark b{ color: var(--m-amber); font-weight: 600; font-size: .82rem; font-variant-numeric: tabular-nums; }
html[dir="rtl"] .m-chapmark{ right: auto; left: clamp(14px, 3vw, 28px); }
@media (prefers-reduced-motion: reduce){
  .m-progress__bar{ transition: none; }
  .m-chapmark{ transition: none; }
}

/* =====================================================================
   3 · Header — transparent, nach Scroll kompakt mit Blur (dunkel)
   ===================================================================== */
.m2026 #site-header{
  position: fixed !important; top:0; left:0; right:0; z-index: 100;
  background: linear-gradient(180deg, rgba(12,17,13,.78) 0%, rgba(12,17,13,.30) 70%, rgba(12,17,13,0) 100%) !important;
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--m-ease), border-color .3s var(--m-ease);
}
.m2026 #site-header.is-scrolled{
  background: rgba(12,17,13,.94) !important;
  border-bottom: 1px solid rgba(143,227,155,.14);
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.7);
}
.m2026 #site-header .h-px,
.m2026 #site-header > div:last-child{ background: transparent !important; }

.m2026 #site-header a,
.m2026 #site-header span,
.m2026 #site-header svg{ color: var(--m-on-dark) !important; }
.m2026 #site-header .font-display{ color: var(--m-bone) !important; letter-spacing:.01em; }

.m2026 .nav-link{ color: var(--m-on-dark-soft) !important; }
.m2026 .nav-link:hover{ color: var(--m-chloro-br) !important; }
.m2026 .nav-link::after{ background: var(--m-chloro-br) !important; }
.m2026 .nav-divider{ background: rgba(231,226,214,.22) !important; }

/* Sprach-Switcher (beide Varianten der Bestands-Markups) */
.m2026 .page-lang a,
.m2026 .lang-switch a{
  color: var(--m-on-dark-dim) !important; border-color: transparent !important;
  background: transparent !important;
}
.m2026 .page-lang a:hover,
.m2026 .lang-switch a:hover{
  color: var(--m-chloro-br) !important;
  border-color: rgba(143,227,155,.3) !important;
  background: rgba(143,227,155,.08) !important;
}
.m2026 .page-lang a[aria-current="page"],
.m2026 .lang-switch a[aria-current="page"]{
  background: var(--m-chloro) !important; color: var(--m-ink) !important;
  border-color: var(--m-chloro) !important;
}
.m2026 #site-header .logo .dot{
  background: linear-gradient(135deg, var(--m-chloro), var(--m-chloro-br)) !important;
}

/* =====================================================================
   4 · HERO — filmischer, dunkler Auftakt (DE-Longform)
   ===================================================================== */
.m2026 .hero-wrap{
  position: relative;
  background:
    radial-gradient(1100px 720px at 82% -12%, rgba(224,164,60,.16) 0%, transparent 60%),
    radial-gradient(820px 620px at 2% 6%, rgba(89,179,106,.14) 0%, transparent 62%),
    linear-gradient(180deg, #0A0E0A 0%, #0C110D 62%, #10160F 100%) !important;
  border-bottom: 1px solid rgba(143,227,155,.12) !important;
  overflow: hidden;
}
.m2026 .hero-inner{ position: relative; z-index: 2; max-width: 1180px; padding: clamp(7rem,14vh,10rem) 1.5rem clamp(3.5rem,8vh,5.5rem); }
@media(min-width:768px){ .m2026 .hero-inner{ padding: clamp(8rem,16vh,12rem) 2rem clamp(4.5rem,9vh,6.5rem); } }

.m2026 .hero-title{
  font-family: var(--m-display) !important;
  font-weight: 600 !important;
  font-variation-settings: "opsz" 144;
  line-height: .98 !important; letter-spacing: -.015em !important; /* Spec 3.8 */
  font-size: clamp(2.75rem, 7vw, 5.5rem) !important; /* Spec 3.7 h1 */
  color: var(--text-strong-inv) !important;
  text-wrap: balance;
}
/* Leitmotiv-Woerter (Fraunces Italic) = Gruen (Spec Konvention 2) */
.m2026 .hero-title em{
  font-family: var(--m-serif) !important;
  font-style: italic !important; font-weight: 500 !important;
  color: var(--m-chloro-br) !important;
  font-variation-settings: "opsz" 144;
}
.m2026 .hero-sub{
  max-width: var(--m-measure) !important; margin-top: 1.4rem !important;
  font-size: clamp(1.25rem, 1.6vw, 1.375rem) !important; /* Spec 3.5 Lead */
  line-height: 1.6 !important; color: var(--text-body-inv) !important;
}
.m2026 .hero-sub strong{ color: var(--text-strong-inv) !important; font-weight: 500; }

/* Versteckt-Badge */
.m2026 .hidden-badge{
  background: rgba(224,164,60,.12) !important; color: var(--m-amber-soft) !important;
  border: 1px solid rgba(224,164,60,.28);
}
.m2026 .hidden-badge::before,
.m2026 .hidden-badge .pulse{ background: var(--m-amber) !important; }

/* Buttons */
.m2026 .btn{ border-radius: 999px; font-family: var(--m-sans); font-weight: 600; }
.m2026 .btn-primary{
  background: var(--m-chloro) !important; color: var(--m-ink) !important;
  border: 1px solid var(--m-chloro) !important;
}
.m2026 .btn-primary:hover{
  background: var(--m-chloro-br) !important; transform: translateY(-1px);
  box-shadow: 0 16px 34px -16px rgba(89,179,106,.6);
}
.m2026 .btn-cream{
  background: transparent !important; color: var(--m-on-dark) !important;
  border: 1px solid rgba(231,226,214,.28) !important;
}
.m2026 .btn-cream:hover{
  background: rgba(231,226,214,.08) !important;
  border-color: rgba(143,227,155,.5) !important; color: var(--m-bone) !important;
}

/* Hero-Sprachreihe */
.m2026 .hero-lang-row{
  border-top: 1px dashed rgba(231,226,214,.2) !important; max-width: var(--m-measure);
}
.m2026 .hero-lang-label{ color: var(--m-amber-soft) !important; }
.m2026 .hero-lang-row a{ color: var(--m-on-dark-dim) !important; }
.m2026 .hero-lang-row a:hover{ color: var(--m-chloro-br) !important; border-bottom-color: var(--m-chloro-br) !important; }

/* Lesepfad-Auswahl */
.m2026 .audience-bar .label{ color: var(--m-amber-soft) !important; }
.m2026 .audience-btn{
  background: rgba(231,226,214,.05) !important;
  border: 1px solid rgba(231,226,214,.2) !important;
  color: var(--m-on-dark-soft) !important;
}
.m2026 .audience-btn:hover{ border-color: rgba(143,227,155,.5) !important; color: var(--m-bone) !important; }
.m2026 .audience-btn.is-active{ background: var(--m-bone) !important; color: var(--m-ink) !important; border-color: var(--m-bone) !important; }
.m2026 .audience-btn[data-audience="praktiker"].is-active{ background: var(--m-chloro) !important; border-color: var(--m-chloro) !important; color:var(--m-ink) !important; }
.m2026 .audience-btn[data-audience="wissenschaftler"].is-active{ background: var(--m-chloro-br) !important; border-color: var(--m-chloro-br) !important; color:var(--m-ink) !important; }
.m2026 .audience-btn[data-audience="visionaer"].is-active{ background: var(--m-amber) !important; border-color: var(--m-amber) !important; color:var(--m-ink) !important; }

/* =====================================================================
   5 · Shell: TOC-Rail (dunkel, sticky) + Content
   ===================================================================== */
.m2026 .page-shell{
  max-width: 1240px !important;
  padding: clamp(3rem,7vh,5rem) 1.25rem clamp(4rem,9vh,7rem) !important;
}
@media(min-width:1024px){
  .m2026 .page-shell{ grid-template-columns: 250px 1fr !important; gap: clamp(3rem,5vw,5rem) !important; padding: clamp(4rem,8vh,6rem) 2rem clamp(6rem,11vh,9rem) !important; }
}

.m2026 .toc-eyebrow-top{ color: var(--m-amber) !important; }
.m2026 .toc-list{ border-left: 1px solid rgba(231,226,214,.16) !important; }
html[dir="rtl"] .m2026 .toc-list{ border-left: none !important; border-right: 1px solid rgba(231,226,214,.16) !important; }
.m2026 .toc-list a{ color: var(--m-on-dark-dim) !important; border-left: 2px solid transparent !important; }
html[dir="rtl"] .m2026 .toc-list a{ border-left: none !important; border-right: 2px solid transparent !important; }
.m2026 .toc-list a:hover{ color: var(--m-bone) !important; border-color: var(--m-chloro) !important; }
.m2026 .toc-list a.is-current{
  color: var(--m-bone) !important; border-color: var(--m-amber) !important;
  background: rgba(224,164,60,.10) !important;
}
.m2026 .toc-eyebrow{ color: var(--m-amber) !important; }
.m2026 .toc-title{ color: var(--m-on-dark-soft) !important; }
.m2026 .toc-wrap p{ color: var(--m-on-dark-dim) !important; }

/* =====================================================================
   6 · KAPITEL — dunkler immersiver Einstieg + helle Lese-Passage
   ===================================================================== */
.m2026 .chapter{
  position: relative;
  margin-bottom: var(--m-rhythm) !important;
  scroll-margin-top: 88px !important;
}

/* Kapitel-Kopf: Oversized Mono-Ordinalzahl (amber, dezent) im Hintergrund */
.m2026 .chapter-head{ position: relative; padding-top: 1rem; }
/* Mono-Kicker: uppercase, .12em, .72-.78rem (Spec 1). Kapitelzahl = Amber. */
.m2026 .chapter-head .eyebrow{
  font-family: var(--m-mono) !important; color: var(--m-amber) !important;
  letter-spacing: .12em !important; font-size: .74rem !important;
  text-transform: uppercase;
  position: relative; z-index: 2;
}
.m2026 .chapter-head h2{
  font-family: var(--m-display) !important;
  font-weight: 600 !important; font-variation-settings: "opsz" 144;
  color: var(--text-strong-inv) !important;
  line-height: 1.1 !important; letter-spacing: -.015em !important; /* Spec 3 */
  font-size: clamp(2rem, 4.5vw, 3.25rem) !important; /* Spec 3.7 h2 */
  position: relative; z-index: 2; text-wrap: balance;
}
/* Kapitel-Untertitel: Fraunces Italic, dezent (Editorial-Akzent) */
.m2026 .chapter-eyebrow{
  font-family: var(--m-serif) !important; font-style: italic !important;
  color: var(--text-body-inv) !important; font-size: 1.08rem !important;
  max-width: var(--m-measure); position: relative; z-index: 2;
}
/* wachsende Linie unter dem Kapitel-Kopf */
.m2026 .chapter-head .hairline{
  background: linear-gradient(90deg, var(--m-chloro) 0%, var(--m-amber) 55%, transparent 100%) !important;
  height: 2px !important; opacity: .8;
  transform-origin: left;
}
html[dir="rtl"] .m2026 .chapter-head .hairline{
  background: linear-gradient(270deg, var(--m-chloro) 0%, var(--m-amber) 55%, transparent 100%) !important;
  transform-origin: right;
}

/* Full-bleed Kapitel-Bild mit Scrim aus Wald-Tinte */
.m2026 .chapter-figure{
  position: relative;
  margin: 2.5rem 0 0 !important;
  border-radius: var(--m-radius-lg) !important;
  overflow: hidden !important;
  border: 1px solid rgba(143,227,155,.12) !important;
  box-shadow: 0 50px 100px -50px rgba(0,0,0,.8) !important;
  background: var(--m-ink);
}
.m2026 .chapter-figure img{
  display: block; width: 100%; height: auto;
  aspect-ratio: 16/9; object-fit: cover;
}
/* Scrim-Gradient: von unten Wald-Tinte hoch, nachgedunkelt fuer Text-
   kontrast >=4.5:1 auf der Bildunterschrift (Spec 4.43). */
.m2026 .chapter-figure::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(12,17,13,.10) 0%, rgba(12,17,13,0) 28%, rgba(12,17,13,.08) 52%, rgba(12,17,13,.86) 100%),
    radial-gradient(130% 85% at 50% 122%, rgba(12,17,13,.66) 0%, transparent 60%);
}
/* Bildunterschrift: Fraunces Italic (Editorial-Akzent, Spec 1) */
.m2026 .chapter-figure figcaption{
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  padding: 1.5rem 1.6rem 1.25rem !important;
  background: transparent !important;
  color: var(--text-strong-inv) !important;
  font-family: var(--m-serif) !important; font-style: italic;
  font-size: 1rem !important; letter-spacing: 0; line-height: 1.5;
  text-transform: none !important;
}
html[dir="rtl"] .m2026 .chapter-figure figcaption{ text-align: right; }

/* Full-bleed-Ausbruch der Bilder aus der Content-Spalte (Desktop) */
@media(min-width:1024px){
  .m2026 .chapter-figure{
    width: calc(100% + clamp(1rem,4vw,4rem));
    margin-left: calc(clamp(1rem,4vw,4rem) / -2) !important;
    margin-right: calc(clamp(1rem,4vw,4rem) / -2) !important;
  }
}

/* ---- Lese-Passage: helle Insel fuer lange Texte (Lesbarkeit) ---- */
.m2026 .chapter-body,
.m2026 .content > #weiterlesen .prose-essay{
  background: var(--m-bone) !important;
  color: var(--m-on-light) !important;
  border-radius: var(--m-radius-lg) !important;
  padding: clamp(1.8rem, 4vw, 3.4rem) clamp(1.4rem, 4vw, 3.2rem) !important;
  margin-top: 2rem !important;
  box-shadow: 0 40px 90px -55px rgba(0,0,0,.75);
  max-width: none !important;
}

.m2026 .prose-essay{
  color: var(--text-body) !important;
  font-family: var(--m-sans) !important;
  font-size: 1.0625rem !important;          /* Spec 3.5 Desktop */
  line-height: var(--m-lh-read) !important; /* 1.7 */
  letter-spacing: 0 !important;
  max-width: var(--m-measure) !important;    /* 66ch */
  margin-left: auto; margin-right: auto;
  text-align: left !important;               /* kein justify (Spec 3.6) */
  hyphens: none;                             /* keine Silbentrennung Desktop */
}
.m2026 .prose-essay > * + *{ margin-top: 1em !important; } /* Absatzabstand 1em (Spec 3.6) */
.m2026 .prose-essay p{ color: var(--text-body) !important; }
.m2026 .prose-essay strong{ color: var(--text-strong) !important; font-weight: 700 !important; }
/* Fraunces Italic = Leitmotiv -> Akzent-Gruen auf hell (Spec 2/Konvention) */
.m2026 .prose-essay em{ font-family: var(--m-serif) !important; font-style: italic; color: var(--accent-ink-green) !important; }

/* h3: Satoshi 600 (ruhige Zwischenebene, NICHT Clash/Fraunces) — Spec 1 */
.m2026 .prose-essay h3{
  font-family: var(--m-sans) !important; color: var(--text-strong) !important;
  font-weight: 600 !important;
  font-size: 1.375rem !important; line-height: 1.3 !important; /* Spec 3.7 */
  letter-spacing: 0 !important;
  margin-top: 2em !important; margin-bottom: .5em !important; /* Kopf-Abstand 2x unten */
}
.m2026 .prose-essay h4{
  font-family: var(--m-sans) !important; color: var(--text-strong) !important;
  font-weight: 600 !important; font-size: 1.15rem !important; line-height: 1.35 !important;
  margin-top: 1.6em !important; margin-bottom: .4em !important;
}
/* Links: gleiche Textfarbe + 1.5px Akzent-Unterstreichung (Spec 4.42) */
.m2026 .prose-essay a{
  color: var(--text-body) !important;
  text-decoration: underline; text-decoration-color: var(--accent-ink-green) !important;
  text-underline-offset: 3px; text-decoration-thickness: 1.5px;
  transition: color .18s var(--m-ease);
}
.m2026 .prose-essay a:hover{ color: var(--accent-ink-green) !important; }
.m2026 .prose-essay .hairline{
  background: linear-gradient(90deg, transparent, rgba(26,33,27,.22), transparent) !important;
}

/* Blockzitat/Motto: Fraunces Italic, Leitmotiv-Kante in Akzent-Gruen (Spec 1/2) */
.m2026 .essay-motto{
  border-left: 3px solid var(--accent-ink-green) !important;
  font-family: var(--m-serif) !important; font-style: italic !important;
  color: var(--text-strong) !important;
  font-size: 1.2rem !important; line-height: 1.5 !important; max-width: var(--m-measure);
}
html[dir="rtl"] .m2026 .essay-motto{ border-left: none !important; border-right: 3px solid var(--accent-ink-green) !important; padding-left:0 !important; padding-right:1.25rem !important; }

/* Theorie/Praxis-Boxen — auf hellem Grund abgesetzt */
.m2026 .aside-box{
  border-radius: var(--m-radius) !important;
  max-width: var(--m-measure); font-size: .97rem !important;
  line-height: 1.65 !important;
  box-shadow: none !important;
}
.m2026 .aside-box p{ color: var(--text-body) !important; }
/* Mono-Kicker in Aside: uppercase, .12em (Spec 1) */
.m2026 .aside-box .aside-eyebrow{
  font-family: var(--m-mono) !important; letter-spacing: .12em !important; text-transform: uppercase;
}
/* Zahlenwerte in Asides: Mono tabular (Spec 4.45) */
.m2026 .aside-box .num,
.m2026 .aside-box data,
.m2026 .aside-box .value{ font-family: var(--m-mono) !important; font-variant-numeric: tabular-nums; }
.m2026 .aside-theorie{
  background: linear-gradient(180deg, rgba(89,179,106,.10), rgba(89,179,106,.03)) !important;
  border: 1px solid rgba(46,125,62,.30) !important;
}
.m2026 .aside-theorie .aside-eyebrow{ color: var(--accent-ink-green) !important; }
.m2026 .aside-praxis{
  background: linear-gradient(180deg, rgba(224,164,60,.12), rgba(224,164,60,.03)) !important;
  border: 1px solid rgba(180,132,45,.35) !important;
}
.m2026 .aside-praxis .aside-eyebrow{ color: #8A6216 !important; }

/* Tabellen */
.m2026 .prose-essay .table-wrap{
  border: 1px solid rgba(26,33,27,.16) !important; background: var(--m-bone-3) !important;
  border-radius: 14px !important;
  /* Ausbruch der Mapping-Matrix aus der Lesespalte, aber niemals ueber den
     Viewport hinaus -> horizontal scrollbar statt Seiten-Overflow. Die
     Lese-Insel hat ~2rem Innenabstand pro Seite (siehe .prose-essay). */
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
}
@media (min-width: 1100px){
  /* Auf grossen Schirmen darf die Tabelle etwas breiter als der Lauftext
     werden, aber nur so weit, wie in der Lese-Insel Platz ist. */
  .m2026 .prose-essay .table-wrap{ width: 100% !important; max-width: 100% !important; }
}
.m2026 .essay-table th, .m2026 .essay-table td{
  border-bottom: 1px solid rgba(26,33,27,.14) !important; color: var(--text-body) !important;
}
.m2026 .essay-table thead th{
  background: var(--m-bone-2) !important; color: var(--text-strong) !important;
  font-family: var(--m-mono) !important; letter-spacing: .06em; text-transform: uppercase;
  font-size: .8rem !important; font-weight: 500 !important;
}
/* Zahlenwerte in Tabellen: Mono tabular (Spec 4.45) */
.m2026 .essay-table td.num,
.m2026 .essay-table td[data-num],
.m2026 .essay-table .value{ font-family: var(--m-mono) !important; font-variant-numeric: tabular-nums; }
html[dir="rtl"] .m2026 .essay-table th,
html[dir="rtl"] .m2026 .essay-table td{ text-align: right; }

/* Code */
.m2026 .prose-essay code{ background: rgba(46,125,62,.12) !important; color:#1F5B2B !important; }
.m2026 .prose-essay pre{ background: var(--m-bone-3) !important; border: 1px solid rgba(26,33,27,.14) !important; color: var(--m-on-light) !important; }

/* Kapitel-Dimmen (Audience-Filter) */
.m2026 .chapter.is-dim{ opacity: .38 !important; }
.m2026 .toc-list li.is-dim{ opacity: .3 !important; }

/* =====================================================================
   7 · Reveal-Motion (Bestand nutzt .reveal / .in)
   ===================================================================== */
.m2026 .reveal{
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s var(--m-ease), transform .7s var(--m-ease);
}
.m2026 .reveal.in{ opacity: 1; transform: none; }
.m2026 .chapter-figure.reveal img{ transform: scale(1.04); transition: transform 1.1s var(--m-ease); }
.m2026 .chapter-figure.reveal.in img{ transform: scale(1); }
@media (prefers-reduced-motion: reduce){
  .m2026 .reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .m2026 .chapter-figure.reveal img{ transform: none !important; transition: none !important; }
}

/* =====================================================================
   8 · Footer — tiefe Wald-Tinte
   ===================================================================== */
.m2026 .site-foot{
  background: #080C08 !important; color: var(--m-on-dark-dim) !important;
  border-top: 1px solid rgba(143,227,155,.16) !important;
  margin-top: var(--m-rhythm) !important;
}
.m2026 .site-foot a{ color: var(--m-on-dark-soft) !important; }
.m2026 .site-foot a:hover{ color: var(--m-chloro-br) !important; }
.m2026 .site-foot .font-display{ color: var(--m-bone) !important; }
.m2026 .site-foot svg{ color: var(--m-chloro) !important; }

/* =====================================================================
   9 · STUB-Fassungen (EN/FR/IT/ES/ZH/AR) — „Uebersetzung in Vorbereitung"
   Gleiche immersive Bildsprache, single-column.
   ===================================================================== */
.m2026 main{ padding-top: 72px; }
.m2026 .container{
  max-width: 1000px !important; margin: 0 auto;
  padding: clamp(3rem,9vh,6rem) 1.5rem 2rem !important;
}
.m2026 .container .hidden-badge{
  background: rgba(224,164,60,.12) !important; border: 1px solid rgba(224,164,60,.28) !important;
  color: var(--m-amber-soft) !important;
}
.m2026 .container .hidden-badge .pulse{ background: var(--m-amber) !important; }

.m2026 h1.headline{
  font-family: var(--m-display) !important; font-weight: 600 !important;
  font-variation-settings: "opsz" 144;
  color: var(--text-strong-inv) !important; line-height: 1.1 !important;
  letter-spacing: -.015em !important; font-size: clamp(2.75rem, 7vw, 5.5rem) !important; /* Spec 3.7 */
  text-wrap: balance;
}
/* Leitmotiv-Wort (Fraunces Italic) = Gruen (Spec Konvention 2) */
.m2026 h1.headline em{
  font-family: var(--m-serif) !important; font-style: italic !important; font-weight: 500 !important;
  color: var(--m-chloro-br) !important;
}
.m2026 p.lede{
  color: var(--text-body-inv) !important; max-width: var(--m-measure) !important;
  line-height: 1.6 !important;
  font-size: clamp(1.25rem,1.6vw,1.375rem) !important; /* Spec 3.5 Lead */
}
.m2026 p.lede strong{ color: var(--text-strong-inv) !important; font-weight: 500; }
/* Mono-Kicker: uppercase, .12em (Spec 1) */
.m2026 .eyebrow{ color: var(--m-amber) !important; font-family: var(--m-mono) !important; letter-spacing: .12em !important; text-transform: uppercase; }

/* Uebersetzungs-Karte + Kapitel-Outline auf heller Lese-Insel */
.m2026 .translation-card{
  background: var(--m-bone) !important; border: 1px solid rgba(143,227,155,.14) !important;
  border-radius: var(--m-radius-lg) !important; color: var(--text-body) !important;
  padding: clamp(1.8rem,4vw,2.6rem) !important;
  box-shadow: 0 40px 90px -55px rgba(0,0,0,.75);
}
.m2026 .translation-card .eyebrow{ color: #8A6216 !important; }
.m2026 .translation-card h2{ font-family: var(--m-serif) !important; color: var(--text-strong) !important; font-weight: 600 !important; }
.m2026 .translation-card p{ color: var(--text-body) !important; max-width: var(--m-measure); line-height: var(--m-lh-read) !important; }

.m2026 .chapters-block h2{ font-family: var(--m-serif) !important; color: var(--text-strong-inv) !important; font-weight: 600 !important; }
.m2026 .chapters-block p.intro{ color: var(--text-body-inv) !important; max-width: var(--m-measure); }
.m2026 ol.outline{ border-top: 1px solid rgba(231,226,214,.16) !important; }
.m2026 ol.outline li{ border-bottom: 1px solid rgba(231,226,214,.12) !important; }
/* Kapitelnummer = Amber, Mono tabular (Spec Konvention 2 + 4.45) */
.m2026 ol.outline li .num{ font-family: var(--m-mono) !important; color: var(--m-amber) !important; font-variant-numeric: tabular-nums; }
.m2026 ol.outline li .ttl{ font-family: var(--m-serif) !important; color: var(--text-body-inv) !important; }
html[dir="rtl"] .m2026 ol.outline li{ grid-template-columns: 1fr 8rem; }

/* Stub-Footer (helle Linie auf dunkel) */
.m2026 footer:not(.site-foot){
  background: #080C08 !important; border-top: 1px solid rgba(143,227,155,.16) !important;
  margin-top: var(--m-rhythm) !important;
}
.m2026 footer:not(.site-foot) a{ color: var(--m-on-dark-soft) !important; }
.m2026 footer:not(.site-foot) a:hover{ color: var(--m-chloro-br) !important; }
.m2026 footer:not(.site-foot) .left{ font-family: var(--m-serif) !important; color: var(--m-bone) !important; }

/* RTL Feinschliff */
html[dir="rtl"] .m2026 .prose-essay,
html[dir="rtl"] .m2026 p.lede,
html[dir="rtl"] .m2026 .translation-card p{ text-align: right; }
html[dir="rtl"] .m2026 .chapter-head .eyebrow,
html[dir="rtl"] .m2026 .eyebrow{ letter-spacing: 0 !important; }
html[dir="rtl"] .m2026 body{ font-family: "Noto Naskh Arabic", "Noto Sans Arabic", var(--m-sans); }
html[dir="rtl"] .m2026 .prose-essay{ line-height: 1.9 !important; }

/* ZH Zeilenumbruch */
html[lang="zh"] .m2026 .prose-essay,
html[lang="zh"] .m2026 p.lede{ line-height: 1.9 !important; }

/* =====================================================================
   10 · Kleine responsive Korrekturen
   ===================================================================== */
/* Grid-Items duerfen unter Content-Breite schrumpfen (verhindert Overflow) */
.m2026 .page-shell{ min-width: 0; }
.m2026 .page-shell > .toc-wrap,
.m2026 .page-shell > .content{ min-width: 0; max-width: 100%; }

@media (max-width: 1023px){
  .m2026 .toc-wrap{
    background: var(--m-ink-2); border-radius: var(--m-radius);
    padding: 1.25rem 1.25rem .5rem; border: 1px solid rgba(143,227,155,.1);
    width: 100%; max-width: 100%; box-sizing: border-box;
    position: static !important; max-height: none !important; overflow: visible !important;
  }
  .m2026 .toc-wrap p{ max-width: 100%; }
  .m2026 .toc-list{ overflow: hidden; }
}
/* Lesetext Mobile: 1rem/1.65, Silbentrennung hier erlaubt (Spec 3.5/3.6) */
@media (max-width: 767px){
  .m2026 .prose-essay{ font-size: 1rem !important; line-height: var(--m-lh-read-m) !important; hyphens: auto; }
  .m2026 .hero-sub,
  .m2026 p.lede{ font-size: 1.15rem !important; line-height: 1.55 !important; }
}
@media (max-width: 640px){
  .m2026 .chapter-body{ padding: 1.5rem 1.2rem !important; }
  .m2026 .hero-title{ font-size: clamp(2.3rem, 11vw, 3.4rem) !important; }
  .m2026 .chapter-head h2{ font-size: clamp(1.8rem, 8vw, 2.6rem) !important; }
  .m2026 .m-chapmark{ font-size: .66rem; padding: .4rem .7rem; }
}

/* =====================================================================
   11 · LOGIN — manifest-login.html im gleichen immersiven Stil
   Aktiv ueber body.m2026-login (eigene Klassenhooks: .card/.brand/form)
   ===================================================================== */
body.m2026-login{
  min-height: 100vh;
  background: var(--m-ink) !important;
  background-image:
    radial-gradient(1000px 640px at 50% -8%, rgba(224,164,60,.10) 0%, transparent 58%),
    radial-gradient(760px 560px at 12% 30%, rgba(89,179,106,.12) 0%, transparent 60%),
    radial-gradient(820px 620px at 88% 78%, rgba(89,179,106,.08) 0%, transparent 62%) !important;
  color: var(--m-on-dark);
  font-family: var(--m-sans);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; position: relative; overflow-x: hidden;
}
/* Filmkorn */
body.m2026-login::before{
  content:""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.m2026-login::after{ content: none !important; }

body.m2026-login .card{
  position: relative; z-index: 1; width: 100%; max-width: 460px;
  background: rgba(20,27,21,.86) !important;
  backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(143,227,155,.16) !important;
  border-radius: var(--m-radius-lg) !important;
  padding: 46px 40px 34px !important;
  box-shadow:
    0 1px 0 rgba(231,226,214,.06) inset,
    0 50px 110px -40px rgba(0,0,0,.85),
    0 12px 40px -12px rgba(0,0,0,.5) !important;
}
body.m2026-login .eyebrow{
  font-family: var(--m-mono); color: var(--m-amber) !important;
  letter-spacing: .12em; text-transform: uppercase; font-size: .72rem;
}
body.m2026-login .eyebrow::before{ background: var(--m-amber) !important; }
body.m2026-login h1{
  font-family: var(--m-display) !important; font-weight: 600 !important;
  font-variation-settings: "opsz" 144;
  color: var(--text-strong-inv) !important; line-height: 1.1;
  font-size: clamp(1.7rem, 4.5vw, 2.3rem) !important; letter-spacing: -.015em;
}
/* Leitmotiv-Wort (Fraunces Italic) = Gruen (Spec Konvention 2) */
body.m2026-login h1 em{
  font-family: var(--m-serif) !important; font-style: italic; font-weight: 500;
  color: var(--m-chloro-br) !important;
}
body.m2026-login .lead{ color: var(--text-body-inv) !important; line-height: var(--m-lh-read); }
body.m2026-login form label{ color: var(--text-muted-inv) !important; font-family: var(--m-mono); letter-spacing: .12em; }
body.m2026-login form input[type=email],
body.m2026-login form input[type=password]{
  background: rgba(12,17,13,.6) !important; color: var(--m-bone) !important;
  border: 1px solid rgba(231,226,214,.2) !important; border-radius: 10px !important;
}
body.m2026-login form input::placeholder{ color: var(--m-on-dark-dim); opacity: .7; }
body.m2026-login form input:focus{
  border-color: var(--m-chloro) !important;
  box-shadow: 0 0 0 3px rgba(89,179,106,.25) !important; outline: none;
}
body.m2026-login button.submit{
  background: var(--m-chloro) !important; color: var(--m-ink) !important;
  border: 1px solid var(--m-chloro) !important; border-radius: 10px !important;
  font-family: var(--m-mono); letter-spacing: .16em; text-transform: uppercase;
}
body.m2026-login button.submit:hover:not(:disabled){ background: var(--m-chloro-br) !important; }
body.m2026-login .error{
  background: rgba(180,84,58,.14) !important; border: 1px solid rgba(180,84,58,.4) !important;
  color: #E9A18C !important;
}
body.m2026-login .footer{ color: var(--m-on-dark-dim) !important; }
body.m2026-login .footer a{ color: var(--m-on-dark-soft) !important; border-bottom-color: rgba(231,226,214,.25) !important; }
body.m2026-login .footer a:hover{ color: var(--m-chloro-br) !important; border-color: var(--m-chloro-br) !important; }
body.m2026-login .harmonia{ font-family: var(--m-serif) !important; color: var(--m-amber-soft) !important; }
@media (prefers-reduced-motion: reduce){
  body.m2026-login::before{ opacity: .035; }
}


/* ─── Runde 12: Lese-Textblock exakt so breit wie die Kapitelbilder ───
   Kundenwunsch 07/2026: Das 66ch-Lesemass im Essay entfaellt; die hellen
   Lese-Inseln (.chapter-body / #weiterlesen) brechen auf Desktop mit
   derselben Formel aus der Content-Spalte aus wie .chapter-figure —
   Aussenkanten von Textblock und Bild liegen damit buendig. */
.m2026 .prose-essay{ max-width: none !important; }
.m2026 .essay-motto,
.m2026 .aside-box{ max-width: none !important; }
@media(min-width:1024px){
  .m2026 .chapter-body,
  .m2026 .content > #weiterlesen .prose-essay{
    width: calc(100% + clamp(1rem,4vw,4rem));
    margin-left: calc(clamp(1rem,4vw,4rem) / -2) !important;
    margin-right: calc(clamp(1rem,4vw,4rem) / -2) !important;
  }
}