/*
  GENO Group eG — main.css
  CI-Variablen, Reset, Typografie, Layout-Grundbausteine.
  Farben aus Logo (Bernstein #FFC559) abgeleitet, CI-Quelle: portal.geno-group.de
*/

/* ---------------------------------------------------------
   0. Schrift: Inter — LOKAL gehostet (DSGVO: kein Google-Fonts-
   Request, vgl. LG München I, 3 O 17493/20). Variable Font deckt
   alle Gewichte 100–900 ab. Lizenz: SIL Open Font License 1.1.
   Quelle: rsms.me/inter (offizieller Autor), Datei v4.66.
--------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------
   1. CSS Custom Properties — Hell-Modus (Default)
--------------------------------------------------------- */
:root {
  /* Farben */
  --color-primary:        #FFC559;
  --color-primary-hover:  #E5A93E;
  --color-accent:         #E30613;
  --color-accent-hover:   #C0000F;
  --color-text:           #1A1A1A;
  --color-text-soft:      #4A5568;
  --color-text-muted:     #6B7280;
  /* Gedecktes "Bronze-Gold" für Bernstein-Akzente AUF hellem Untergrund (Stat-Zahlen,
     Bewertungssterne): --color-primary/-primary-hover sind als Button-HINTERGRÜNDE
     mit dunklem Text darüber kalibriert (CI-Pflicht „auf Bernstein steht immer
     dunkler Text") und erreichen als Vordergrundfarbe auf Weiß/Glass-Karten nur
     2.08:1 (WCAG-Audit von .stat-box__value, #E5A93E auf #FFFFFF) – weit unter den
     3:1 (große Schrift) bzw. 4.5:1. #7F6228 behält denselben Bernstein-Farbton
     (Hue ≈ 40°, identisch zu --color-primary) bei, ist aber dunkel genug für
     5.7:1 auf Weiß und auf den hellen Glass-Karten-Flächen der Testimonials. */
  --color-gold-text:      #7F6228;
  --color-bg:             #FFFFFF;
  --color-bg-alt:         #FAF8F3;
  --color-bg-card:        #FFFFFF;
  --color-border:         #E8E0D0;
  --color-border-soft:    #F0EAE0;

  /* auf Bernstein steht immer dunkler Text (Kontrast-Pflicht, siehe Briefing 23.4) */
  --color-on-primary:     #1A1A1A;
  --color-on-accent:      #FFFFFF;

  /* Typografie */
  --font-heading: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.375vw, 1rem);
  --text-base: clamp(1rem,     0.9rem  + 0.5vw,   1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.625vw, 1.25rem);
  --text-xl:   clamp(1.25rem,  1.1rem  + 0.75vw,  1.5rem);
  --text-2xl:  clamp(1.5rem,   1.3rem  + 1vw,     2rem);
  --text-3xl:  clamp(2rem,     1.6rem  + 2vw,     2.75rem);
  --text-4xl:  clamp(2.5rem,   2rem    + 2.5vw,   3.5rem);
  --text-hero: clamp(2.5rem,   2rem    + 3vw,     4rem);

  /* Spacing */
  --space-xs:  clamp(0.5rem,  0.4rem + 0.5vw,  0.75rem);
  --space-sm:  clamp(0.75rem, 0.6rem + 0.75vw, 1rem);
  --space-md:  clamp(1rem,    0.8rem + 1vw,    1.5rem);
  --space-lg:  clamp(1.5rem,  1.2rem + 1.5vw,  2.5rem);
  --space-xl:  clamp(2rem,    1.5rem + 2.5vw,  3.5rem);
  --space-2xl: clamp(2.5rem,  1.8rem + 4vw,    5rem);

  /* Shapes */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.05);

  /* Glass-Oberflächen (Kacheln, Overlays) — halbtransparent + backdrop-blur */
  --glass-bg:         rgba(255, 255, 255, 0.55);
  --glass-bg-hover:   rgba(255, 255, 255, 0.72);
  --glass-border:     rgba(255, 255, 255, 0.65);
  --glass-shadow:     0 8px 32px rgba(26, 26, 26, 0.08);
  --glass-shadow-hover: 0 16px 40px rgba(26, 26, 26, 0.14);
  --glass-blur: blur(16px) saturate(160%);

  /* Aurora-Hintergrund (dezente Farbflächen aus CI-Bernstein/Akzent für Glass-Tiefe) */
  --aurora-bg:
    radial-gradient(ellipse 900px 560px at 12% -8%,  color-mix(in srgb, var(--color-primary) 16%, transparent), transparent 60%),
    radial-gradient(ellipse 760px 520px at 96% 18%,  color-mix(in srgb, var(--color-accent) 9%, transparent), transparent 58%),
    radial-gradient(ellipse 880px 620px at 40% 105%, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 60%);

  /* Layout */
  --container-max:     1280px;
  --container-padding: clamp(1rem, 4vw, 2rem);

  /* Bewegung */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
}

/* Dark-Modus */
[data-theme="dark"] {
  --color-primary:        #FFC559;
  --color-primary-hover:  #FFD480;
  --color-accent:         #FF6B6B;
  --color-accent-hover:   #FF4444;
  --color-text:           #F0F0F0;
  --color-text-soft:      #9CA3AF;
  /* unverändert aus dem Hell-Modus übernommen, aber #6B7280 erreicht auf den
     dunklen Hintergründen nur 3.4–4.5:1 (verifiziert per WCAG-Kontrastformel
     gegen --color-bg/-bg-alt/-bg-card) — unter der für Fließtext geforderten
     4,5:1-Schwelle (genutzt unter anderem in .text-muted, .badge--soft,
     Footer-Überschriften/Breadcrumbs). #868FA0 erreicht 4.75–5.7:1 auf allen
     drei dunklen Hintergrundtönen und bleibt dabei sichtbar dezenter als
     --color-text-soft (Hierarchie zwischen den beiden Stufen bleibt erhalten). */
  --color-text-muted:     #868FA0;
  --color-bg:             #0F1419;
  --color-bg-alt:         #1A1F26;
  --color-bg-card:        #1E252E;
  --color-border:         #2D3540;
  --color-border-soft:    #242B35;

  --color-on-primary:     #1A1A1A;
  --color-on-accent:      #1A1A1A;

  /* Glass-Oberflächen im Dark-Modus: dunkle, halbtransparente Flächen statt heller */
  --glass-bg:         rgba(30, 37, 46, 0.55);
  --glass-bg-hover:   rgba(40, 49, 60, 0.72);
  --glass-border:     rgba(255, 255, 255, 0.10);
  --glass-shadow:     0 8px 32px rgba(0, 0, 0, 0.30);
  --glass-shadow-hover: 0 16px 40px rgba(0, 0, 0, 0.42);
}

/* ---------------------------------------------------------
   2. Reset & Basis
--------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light dark;
  /* Schutz gegen horizontales Scrollen auf schmalen Viewports (verifiziert:
     bis zu ~150px Scroll-Spielraum bei 320px Breite auf mehreren Seiten,
     Ursache im Page-Layout nicht auf ein einzelnes Element zurückführbar —
     weder das Off-Canvas-Mobilmenü noch Pseudo-Elemente noch ein einzelner
     überbreiter Block waren laut DOM-Geometrie-Analyse die alleinige Quelle).
     "overflow-x: hidden" auf <html>/<body> blieb dabei je nach Cascade-Zustand
     wirkungslos oder inkonsistent (Chromes Viewport-Overflow-Propagation
     zwischen <html> und <body> verhält sich hier unvorhersehbar). "clip" auf
     BEIDEN Elementen schneidet zuverlässig ab Box-Kante ab, ohne einen
     Scroll-Container zu erzeugen oder zur Propagation beizutragen — einzige
     in allen Testkonstellationen robuste Lösung (scrollWidth/scrollX = 0
     auf allen Stichproben-Seiten verifiziert). */
  overflow-x: clip;
}

html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--aurora-bg), var(--color-bg);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--transition-base), color var(--transition-base);
  /* siehe Kommentar bei <html> oben — beide Elemente brauchen "clip" */
  overflow-x: clip;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
  color: var(--color-text);
}
h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { color: var(--color-text-soft); }
p, li { text-wrap: pretty; }

a {
  color: var(--color-text);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
}
a:hover { color: var(--color-primary-hover); }

ul, ol { padding-inline-start: 1.25em; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

/* ---------------------------------------------------------
   3. Barrierefreiheit — Fokus, Skip-Link, Bewegung
--------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  z-index: 1000;
  padding: 0.75em 1.5em;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition: top var(--transition-fast);
}
.skip-link:focus {
  top: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------
   4. Layout-Bausteine
--------------------------------------------------------- */
.container {
  width: min(var(--container-max), 100% - (var(--container-padding) * 2));
  margin-inline: auto;
}

.container-narrow {
  width: min(820px, 100% - (var(--container-padding) * 2));
  margin-inline: auto;
}

main { display: block; }

section { padding-block: var(--space-2xl); }
section.section-tight { padding-block: var(--space-xl); }

.section-head {
  max-width: 720px;
  margin-bottom: var(--space-xl);
}
.section-head.center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.bg-alt   { background: var(--color-bg-alt); }
.bg-card  { background: var(--color-bg-card); }
.bg-dark  {
  background: #1A1A1A;
  color: #F0F0F0;
}
.bg-dark h2, .bg-dark h3, .bg-dark p { color: inherit; }
.bg-dark .text-soft { color: rgba(240,240,240,0.7); }

/* Grids — mobil 1 Spalte, ab Tablet 2, ab Desktop exakt N Spalten.
   auto-fit/minmax alleine reicht nicht: auf 1360px+ passen 4 Spalten in
   ein 3er-Grid (4×280 + 3×40 = 1240 ≤ 1280px Container) — deshalb
   explizite repeat(N, 1fr) Breakpoints. */
.grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-xl);
}
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Formular+Sidebar-Layouts brauchen mehr Breite – erst ab 960px zweispaltig */
.grid-2--wide { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) {
  .grid-2--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.grid-3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}
@media (min-width: 600px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}
@media (min-width: 960px) {
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Lange deutsche Komposita (z. B. "Sondereigentumsverwaltung") dürfen
   Karten nie über die Spaltenbreite hinausdrücken */
.card h3, .card h2, .post-card h3 {
  overflow-wrap: break-word;
  hyphens: auto;
}

.stack { display: flex; flex-direction: column; gap: var(--space-md); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }

.text-center { text-align: center; }
.text-muted  { color: var(--color-text-muted); }

/* ---------------------------------------------------------
   5. Bild-Platzhalter (TODO: echte Fotos folgen von Steffen)
--------------------------------------------------------- */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  background: var(--color-bg-alt);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-md);
  aspect-ratio: 16 / 9;
  width: 100%;
}
.img-placeholder.is-square  { aspect-ratio: 1 / 1; }
.img-placeholder.is-portrait { aspect-ratio: 3 / 4; }
.img-placeholder .icon { opacity: 0.6; }

/* ---------------------------------------------------------
   6. Filter-Bar (Ratgeber-Hub)
--------------------------------------------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
}
.filter-btn {
  padding: 0.4rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  white-space: nowrap;
}
.filter-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.filter-btn.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.filter-empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-2xl) 0;
  grid-column: 1 / -1;
}

/* ---------------------------------------------------------
   7. Cookie-Banner (DSGVO/TDDDG – BGH-konform, 2026-Standard)
   Kategorien direkt sichtbar – kein versteckter Details-Bereich.
   BGH "Cookie-Einwilligung II" Jan 2024: beide Buttons gleich prominent.
--------------------------------------------------------- */
#cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9999;
  background: var(--color-bg);
  border-top: 2px solid var(--color-border);
  box-shadow: 0 -4px 32px rgba(0,0,0,.15);
  padding: var(--space-md) var(--space-lg);
  transform: translateY(100%);
  opacity: 0;
  transition: opacity 0.35s, transform 0.35s;
  max-height: 90vh;
  overflow-y: auto;
}
#cookie-banner.cookie-banner--visible {
  transform: translateY(0);
  opacity: 1;
}
.cookie-banner__inner {
  max-width: 960px;
  margin: 0 auto;
}
/* Header */
.cookie-banner__head {
  margin-bottom: var(--space-sm);
}
.cookie-banner__head strong {
  display: block;
  font-size: var(--text-base);
  margin-bottom: 0.25rem;
}
.cookie-banner__head p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.cookie-banner__head a {
  color: var(--color-gold-text);
  text-decoration: underline;
}
/* Categories container — visible by default */
.cookie-cats {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-sm);
}
.cookie-cat {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--color-border-soft);
}
.cookie-cat:last-child { border-bottom: none; }
.cookie-cat__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
}
.cookie-cat__info { flex: 1 1 0; }
/* Name + status badge in one line */
.cookie-cat__name-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
  flex-wrap: wrap;
}
.cookie-cat__name {
  font-weight: 600;
  font-size: var(--text-sm);
}
.cookie-cat__badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.cookie-cat__badge--on {
  background: rgba(127,98,40,.15);
  color: var(--color-gold-text);
}
.cookie-cat__badge--off {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
}
.cookie-cat__desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.55;
}
/* Toggle switch */
.cookie-toggle {
  flex-shrink: 0;
}
.cookie-toggle__track {
  width: 2.6rem; height: 1.4rem;
  border-radius: 999px;
  background: var(--color-border);
  position: relative;
  display: block;
}
.cookie-toggle--locked .cookie-toggle__track,
.cookie-toggle__track--on {
  background: var(--color-gold-text);
  cursor: not-allowed;
}
.cookie-toggle--disabled .cookie-toggle__track {
  opacity: 0.4;
  cursor: not-allowed;
}
.cookie-toggle__thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 1rem; height: 1rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform 0.2s;
}
.cookie-toggle__track--on .cookie-toggle__thumb { transform: translateX(1.2rem); }
/* Action buttons – symmetric per BGH */
.cookie-banner__actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: flex-end;
}
#cookie-banner .btn--cookie-secondary {
  padding: 0.5rem 1.25rem;
  font-size: var(--text-sm);
  border: 1.5px solid var(--color-text-muted) !important;
  background: transparent !important;
  color: var(--color-text);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
}
#cookie-banner .btn--cookie-secondary:hover {
  background: var(--color-bg-alt) !important;
  border-color: var(--color-text) !important;
}
#cookie-banner .btn--cookie-primary {
  padding: 0.5rem 1.25rem;
  font-size: var(--text-sm);
  border: 1.5px solid var(--color-primary) !important;
  background: var(--color-primary) !important;
  color: var(--color-text-on-primary, #1a1200);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s;
}
#cookie-banner .btn--cookie-primary:hover {
  background: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
}
.btn--sm {
  padding: 0.45rem 1.1rem;
  font-size: var(--text-sm);
}

/* ---------------------------------------------------------
   8. Newsletter-CTA
--------------------------------------------------------- */
.newsletter-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-2xl);
}
@media (max-width: 768px) {
  .newsletter-cta { grid-template-columns: 1fr; padding: var(--space-lg); }
}
.newsletter-cta__text h2 { margin-top: var(--space-xs); }
.newsletter-cta__text p  { color: var(--color-text-muted); margin-top: var(--space-sm); }
.newsletter-form {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.newsletter-input {
  flex: 1 1 200px;
  padding: 0.6rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-base);
  font-family: inherit;
}
.newsletter-input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-color: var(--color-accent);
}
.newsletter-cta__note {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------
   Wide-Screen Breakpoints — für geschwungene & Ultrawide-Monitore
   (2560 px+, 3440 px ultrawide, 4K curved)
   Verhindert "zu viel Leerraum" und "zu viel Abstand zwischen Sektionen"
   auf extrem breiten Displays, ohne schmale / iPad-Layouts zu beeinflussen.
--------------------------------------------------------- */

/* 1440p und breit: Container auf 1400px + Sektion-Padding leicht reduziert */
@media (min-width: 1600px) {
  :root {
    --container-max: 1400px;
    --space-2xl:     4rem;   /* von max. 5rem → 4rem: Sektionen wirken kompakter */
    --space-xl:      3rem;   /* von max. 3.5rem → 3rem */
  }
}

/* Ultrawide (3440 px+, 4 K) — Page-Cap + subtile Rahmung */
@media (min-width: 2000px) {
  :root {
    --container-max: 1520px;
    --space-2xl:     3.5rem;
  }
  /* Seite auf sinnvolle Gesamtbreite begrenzen, damit Inhalte nicht
     in einem Meer aus Leerraum verschwinden. */
  body {
    max-width: 2400px;
    margin-inline: auto;
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.06);
  }
}

/* ---------------------------------------------------------
   9. Blog-Artikel — Prosa-Typografie & Layout
   Die globalen h2/h3/h4-Größen (--text-3xl / --text-xl /
   --text-lg) sind für breite Service-Page-Sektionen ausgelegt.
   In der 820 px-Artikel-Spalte braucht es eine eigene Skala
   mit klarer visueller Hierarchie.
--------------------------------------------------------- */

/* Prosa-Überschriften: proportional zur schmalen Spalte */
article .container-narrow section > h2 {
  font-size: var(--text-2xl);          /* clamp(1.5 rem…2 rem) statt 2.75 rem */
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--color-border);
}
article .container-narrow section > h3 {
  font-size: var(--text-xl);           /* clamp(1.25 rem…1.5 rem) */
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}
article .container-narrow section > h4 {
  font-size: var(--text-lg);           /* clamp(1.125 rem…1.25 rem) */
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
  color: var(--color-text-soft);
}

/* Artikel-Content-Box etwas breiter (820 → 960 px) —
   wirkt weniger wie eine schmale Textsäule, bleibt lesbar */
article > .container-narrow {
  width: min(960px, 100% - (var(--container-padding) * 2));
}

/* Inline-Links in Artikel-Prosa: gold, deutlich sichtbar.
   #7F6228 = --color-gold-text = 5.7:1 auf Weiß → WCAG AA ✓  */
article .container-narrow section a:not([class]) {
  color: var(--color-gold-text);
  font-weight: 500;
}
article .container-narrow section a:not([class]):hover {
  color: var(--color-primary-hover);
}