/* =================================================================
   ERINNERUNGEN SICHTBAR MACHEN — system.css
   FINALE DESIGN-SYSTEM-EBENE (wird als LETZTE geladen)
   Vereinheitlicht: Typografie · Whitespace · Dark Mode · Logo ·
   gerade Bilder · konsistente Icons.
   Eine einzige Quelle der Wahrheit — überschreibt frühere Ebenen
   bewusst mit gleicher/höherer Spezifität + !important.
   ================================================================= */

/* -----------------------------------------------------------------
   1. SCHRIFTEN — moderner, gut lesbarer Fließtext (Hanken Grotesk)
   Display bleibt Barlow Condensed (Marke), Zitate Merriweather,
   Akten/Quellen Courier Prime. Genau vier Familien.
   ----------------------------------------------------------------- */
:root{
  --f-body:'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-ui:'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-head:'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-quote:'Playfair Display', Georgia, serif;   /* Zitate = Playfair (4 Familien: Barlow · Playfair · Space Grotesk · Courier) */

  /* ---- EINE Typo-Skala (Designsystem-Rollen, projektweit identisch) ---- */
  --fs-masthead: clamp(36px, 5.6vw, 76px);  /* Display / Epochen-Titel (Barlow) */
  --fs-h2:       clamp(26px, 3vw, 42px);    /* Abschnitts-Titel (Barlow)        */
  --fs-emo:      clamp(23px, 2.6vw, 34px);  /* H2 emotional (Playfair)          */
  --fs-h3:       clamp(17px, 1.4vw, 20px);  /* H3 Sektion / UI (Hanken 600)     */
  --fs-quote:    clamp(15.5px, 1.1vw, 17.5px);/* Zitate (Playfair italic) kleiner */
  --fs-pull:     clamp(18px, 1.7vw, 24px);  /* kinetische Leitsätze             */
  --fs-lede:     clamp(17px, 1.4vw, 20px);  /* Vorspann / Intro                 */
  --fs-body:     clamp(16px, 1vw, 17.5px);  /* Fließtext                        */
  --fs-cap:      13px;                        /* Bildunterschrift               */
  --fs-kicker:   12.5px;                      /* Rubrik / Eyebrow               */
  --lh-body: 1.8;
}

body{ font-family:var(--f-body); font-size:var(--fs-body); line-height:var(--lh-body); }

/* -----------------------------------------------------------------
   2. ÜBERSCHRIFTEN — pro Rolle EINE Größe (überall gleich)
   ----------------------------------------------------------------- */
/* Mastheads: Hero + Kapitelköpfe (identische Größe) */
h1.hero-big,
.chap-hd h2{
  font-size:var(--fs-masthead) !important;
  line-height:1.06 !important;
}

/* Abschnitts-Titel in Barlow (Entdecken, Spiele, Glossar, Reflexion …) */
h2.d-md,
.center h2.display,
h2.display.d-md,
.decision .dq{
  font-size:var(--fs-h2) !important;
  line-height:1.1 !important;
  letter-spacing:-.01em !important;
}

/* H2 EMOTIONAL — Johannes' Stimme: Playfair Italic in Amber (Designsystem) */
.intro h2{
  font-family:var(--f-emo) !important;   /* Playfair Display */
  font-weight:600 !important;
  font-style:italic !important;
  text-transform:none !important;
  font-size:var(--fs-emo) !important;
  line-height:1.22 !important;
  letter-spacing:0 !important;
  color:var(--amber-d) !important;
}
html[data-theme="dark"] .intro h2{ color:#FFB733 !important; }
.intro h2 em{ font-weight:600 !important; font-style:italic !important; }

/* H3 Szenen-/Schritt-Überschriften: Space Grotesk 600 — ruhig, EIN Schriftwechsel
   weniger beim Lesen (Body + Subhead jetzt dieselbe Familie) */
.scene-body h3,
.step h3{
  font-family:var(--f-head) !important;   /* Space Grotesk */
  font-weight:600 !important;
  font-style:normal !important;
  text-transform:none !important;
  font-size:clamp(19px,2vw,25px) !important;
  line-height:1.24 !important;
  letter-spacing:-.005em !important;
  color:var(--heading) !important;
}
html[data-theme="dark"] .scene-body h3,
html[data-theme="dark"] .step h3{ color:var(--ink) !important; }

/* H3 Sektion / UI-Überschriften (ruhig, Hanken 600) */
.compare h3.display,
.rv > .center h3.display,
#footModalTitle.display{
  font-size:clamp(20px,2.2vw,26px) !important;
  line-height:1.14 !important;
  letter-spacing:-.01em !important;
}

/* -----------------------------------------------------------------
   3. ZITATE — alle zitierten Zitate identisch · Leitsätze identisch
   ----------------------------------------------------------------- */
.auth-q,
.mission-q,
.compare .mem q,
blockquote.auth-q,
blockquote.mission-q,
.scene-body .auth-q,
.scene-body .mission-q,
.intro .auth-q,
.rv .auth-q{
  font-family:var(--f-quote) !important;
  font-style:italic !important;
  font-size:var(--fs-quote) !important;
  line-height:1.7 !important;
  color:var(--amber-d) !important;        /* Designsystem: Zitate IMMER Amber */
}
html[data-theme="dark"] .auth-q,
html[data-theme="dark"] .mission-q,
html[data-theme="dark"] .compare .mem q{ color:#FFB733 !important; }
.auth-q cite,
.mission-q cite{ font-size:12px !important; color:var(--ink-soft) !important; font-style:normal !important; }
html[data-theme="dark"] .auth-q cite,
html[data-theme="dark"] .mission-q cite{ color:#B9AC92 !important; }

/* kinetische Leitsätze (eigene, untereinander gleiche Rolle) — ebenfalls Amber */
.kq{
  font-family:var(--f-quote) !important;
  font-size:var(--fs-pull) !important;
  line-height:1.34 !important;
  color:var(--amber-d) !important;
}
html[data-theme="dark"] .kq{ color:#FFB733 !important; }

/* -----------------------------------------------------------------
   4. FLIESSTEXT & VORSPANN — alle gleich
   ----------------------------------------------------------------- */
.body-l,
.body-l p,
.step .tx,
.step .tx p,
.tx,
.tx p,
.scene-body p,
.dsub,
.dctx,
.dreveal p,
.fact p{
  font-family:var(--f-body) !important;
  font-size:var(--fs-body) !important;
  line-height:var(--lh-body) !important;
}
.lede,
.game-intro,
.compare-note{
  font-size:var(--fs-lede) !important;
  line-height:1.6 !important;
}
.caption{ font-size:var(--fs-cap) !important; }
.kicker{ font-size:var(--fs-kicker) !important; }

/* -----------------------------------------------------------------
   5. WHITESPACE — viel Luft zum Atmen, ruhiger Lesefluss
   (Spacing-Skala des Designsystems: 24 / 40 / 64 / 96 px)
   ----------------------------------------------------------------- */
.sec{ padding-block:clamp(88px,12vh,160px) !important; }
.chap-hd{ padding-top:clamp(120px,18vh,200px) !important; padding-bottom:clamp(56px,9vh,110px) !important; }

/* Lesespalte nie zu breit — bessere Lesbarkeit, mehr Rand */
.scene-body .body-l,
.step .tx,
.intro .rv p.body-l,
.scene-body p{ max-width:60ch; }

/* großzügige Abstände rund um Überschriften & Zitate */
.scene-body h3{ margin:16px 0 26px !important; }
.step h3{ margin:16px 0 26px !important; }
.intro h2{ margin-bottom:8px !important; }
.auth-q{ margin:36px 0 !important; padding-left:24px !important; }
.mission-q{ margin-top:40px !important; padding-left:24px !important; }
.chap-hd .emo{ margin-top:36px !important; max-width:26ch; }
.chap-hd .range{ margin-top:26px !important; }
.fact{ padding:clamp(26px,2.8vw,36px) clamp(28px,3vw,38px) !important; margin-top:42px !important; }
.scene{ margin-bottom:clamp(72px,11vh,148px) !important; gap:clamp(48px,5.6vw,96px) !important; }
.intro{ gap:clamp(40px,6.5vw,100px) !important; }
.big-stat{ margin-top:42px !important; gap:42px !important; }
.body-l + .body-l{ margin-top:1.2em; }
.body-l p, .tx p, .step .tx p{ margin-bottom:1.3em !important; }
.src-badge{ margin-top:16px; display:inline-flex; }
.prov-banner{ margin-bottom:clamp(40px,6vh,64px) !important; }
.learn-meter{ margin:clamp(28px,4vh,44px) 0 !important; }
.decision{ margin-top:clamp(48px,7vh,90px) !important; }
.compare{ margin-top:clamp(20px,3vh,32px); }

/* Abschnittseinleitungen mittig & ruhig */
.center .kicker{ margin-bottom:10px; }
.center h2.display{ margin-bottom:clamp(8px,2vh,18px); }

/* -----------------------------------------------------------------
   6. LOGO oben links — kleiner, bricht den Rahmen nicht mehr
   ----------------------------------------------------------------- */
.nav .logo-mark{ width:21px !important; height:21px !important; position:relative; overflow:visible !important; flex:0 0 auto !important; }
.nav .logo-mark .lm-img{ width:100% !important; height:100% !important; object-fit:contain !important; display:block !important; position:relative; z-index:1; }
.brand{ gap:11px !important; max-width:70vw; align-items:center !important; }
.brand .wm{ overflow:hidden; }
.brand .wm .l1{ font-size:15.5px !important; letter-spacing:.04em !important; }
.brand .wm .l2{ font-size:11px !important; letter-spacing:.14em !important; }

/* Dark Mode: helle Logo-Fassung (logo_wissen_invert) direkt auf dunklem Grund,
   ohne die weiße Wolke dahinter */
html[data-theme="dark"] .nav .logo-mark,
html[data-theme="dark"] .nav-light .nav .logo-mark,
html[data-theme="dark"] .sidebar-logo .logo-mark{
  background:none !important;
  padding:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  position:relative;
}
/* Wolke entfernen */
html[data-theme="dark"] .nav .logo-mark::before,
html[data-theme="dark"] .sidebar-logo .logo-mark::before{
  content:none !important;
  display:none !important;
  background:none !important;
}
/* helle Logo-Version verwenden */
html[data-theme="dark"] .nav .logo-mark .lm-img,
html[data-theme="dark"] .sidebar-logo .logo-mark .lm-img{
  content:url("assets/img/logo_wissen_invert.png") !important;
  position:relative; z-index:1;
}

/* -----------------------------------------------------------------
   7. DARK MODE — alles jederzeit lesbar & sichtbar
   ----------------------------------------------------------------- */
/* === EXAKTE DESIGNSYSTEM-PALETTE === */
html[data-theme="dark"]{
  --ink:#F8F2E4;            /* text-primary  */
  --ink-soft:#D0C0A0;       /* text-secondary */
  --amber:#E3A94A; --amber-l:#F0D9A6; --amber-d:#E3A94A; --amber-hi:#F0D9A6;
  --blau:#8FB0D9; --blau-d:#A9C6EA; --blau-l:#1D2C46; --schiefer:#8FB0D9; --link:#8FB0D9;
  --feldrot:#DE8168; --feldrot-ink:#E89B84; --history:#DE8168;
  --gold:#E3A94A; --gold-l:#F0D9A6;
  --heading:#F8F2E4;
}
html[data-theme="light"]{
  --pergament:#F5EDD8; --pergament-2:#FDFAF4; --pergament-3:#FFF8EC;
  --ink:#1A120A; --ink-soft:#4A3828; --heading:#1A120A;
  --amber:#C8811A; --amber-d:#9A6410; --amber-l:#EDD9A3; --amber-hi:#9A6410;
  --blau:#3B5A8C; --blau-d:#2E486F; --blau-l:#C8D8EE; --schiefer:#3B5A8C; --link:#2E486F;
  --feldrot:#B5462F; --feldrot-ink:#9A3A26; --history:#B5462F;
  --gold:#C8811A; --gold-l:#EDD9A3;
  --line:#D8CCBA; --hairline:#D8CCBA;
}
/* Fließtext, Überschriften, Zitate, Bildunterschriften: immer hell */
html[data-theme="dark"] :is(
  p, li, h1, h2, h3, h4, h5, blockquote, figcaption,
  .body-l, .body-l p, .tx, .tx p, .step .tx, .lede,
  .intro h2, .intro h2 + *, .scene-body h3, .step h3,
  .auth-q, .mission-q, .compare .mem q, .emo,
  .dq, .dsub, .dctx, .dreveal p, .dreveal h4,
  .qt, .fact h4, .fact p, .caption, .game-intro, .compare-note,
  .mnote, .big-stat .s span, .recap p, .prov-banner
){
  color:var(--ink) !important;
}
/* zitierte Autorinnen/Quellenzeile etwas gedämpft, aber lesbar */
html[data-theme="dark"] :is(.auth-q cite, .mission-q cite, .docref){
  color:#B9AC92 !important;
}
/* Akzent-Beschriftungen behalten ihre Farbe (bewusst) */
html[data-theme="dark"] :is(.kicker, .syr, .chap-hd .range, .src-badge, .fact .fl){ color:revert-layer; }
html[data-theme="dark"] .chap-hd .range{ color:var(--amber-l) !important; }
html[data-theme="dark"] .scene-body .syr{ color:var(--amber-l) !important; }
/* „intro em“ (Geschichte) hebt sich ab */
html[data-theme="dark"] .intro h2 em{ color:var(--amber-l) !important; }
/* Provenienz-Banner (Echte Quelle) — Text hell, Häkchen grün */
html[data-theme="dark"] .prov-banner b{ color:#F4EEE0 !important; }
html[data-theme="dark"] .prov-banner .pic{ color:#74C79A !important; }
/* Vergleichsfenster Dokumentseite bleibt hell auf Blau */
html[data-theme="dark"] .compare .doc,
html[data-theme="dark"] .compare .doc .dx{ color:#F5F3FF !important; }
/* Entscheidungs-Panel (immer dunkel) Optionstext hell */
html[data-theme="dark"] .dopt .ot{ color:#F0E7D7 !important; }

/* -----------------------------------------------------------------
   8. BILDER IMMER GERADE — keine Schrägen, Skews oder 3D-Kippung
   ----------------------------------------------------------------- */
.scene-media .arch,
.scene-media .arch img,
.sv-frame,
.sv-frame img,
.intro-portrait .ph,
.intro-portrait .ph img,
.mfront img,
.era img,
.wall-card,
.tilt{
  transform:none !important;
  perspective:none !important;
}
/* sanfter Zoom beim Hover bleibt erlaubt, aber ohne Drehung */
.scene-media .arch:hover img{ transform:scale(1.03) !important; }
.era:hover img{ transform:scale(1.05) !important; }
.wall-card:hover{ transform:translateY(-4px) !important; }
/* Hub-Karten: sauberer flacher Lift statt 3D-Kippung (überschreibt JS-Inline-Tilt) */
.hub-card{ transform:none !important; }
.hub-card:hover{ transform:translateY(-5px) !important; }
.hub-card .hc-ic{ transform:none !important; }
.hub-card:hover .hc-ic{ transform:scale(1.06) !important; }
.hub-card h4, .hub-card p{ transform:none !important; }
/* SIDEBAR-LOGO — zentriert ÜBER den Subpage-Icons, nicht links klebend */
.sidebar-logo .logo-mark{ width:30px !important; height:30px !important; flex:0 0 auto !important; overflow:visible !important; }
.sidebar-logo .logo-mark .lm-img{ width:100% !important; height:100% !important; object-fit:contain !important; display:block !important; position:relative; z-index:1; }
.sidebar-logo .wm .l1{ font-size:12px !important; }
.sidebar-logo .wm .l2{ font-size:9.5px !important; }
/* Eingeklappte Leiste (Desktop): Logo + Icons mittig in der schmalen Spalte */
@media (min-width:861px){
  .sidebar:not(.x) .sidebar-logo{ justify-content:center !important; padding-left:0 !important; padding-right:0 !important; gap:0 !important; }
  .sidebar:not(.x) .sidebar-logo .wm{ display:none !important; }
  .sidebar:not(.x) .sb-item{ justify-content:center !important; padding-left:0 !important; padding-right:0 !important; gap:0 !important; }
  .sidebar:not(.x) .sb-item .sb-label{ display:none !important; }
  .sidebar:not(.x) .sb-item .ic{ margin:0 auto !important; }
  .sidebar:not(.x) .sb-prof{ justify-content:center !important; }
}
/* Inhalts-Karten: gerader, flacher Lift statt 3D-Kippung (überschreibt JS-Tilt) */
.fact, .rcard, .group-card{ transform:none !important; perspective:none !important; }
.fact:hover, .rcard:hover, .group-card:hover{ transform:translateY(-4px) !important; }

/* -----------------------------------------------------------------
   9. KONSISTENTE ANIMIERTE ICONS — ein einheitlicher Rhythmus
   (die „cute“-Piktogramme sind das System; gleiche Taktung)
   ----------------------------------------------------------------- */
/* Icons NUR in fest dimensionierten Containern auf 100% — sonst feste Größe */
.hub-card .hc-ic{ width:54px; height:54px; }
.hub-card .hc-ic svg.cute{ width:38px; height:38px; }
.ro-ic svg.cute, .tc-ic svg.cute, .mat-ic svg.cute{ width:100%; height:100%; }
/* Lern-Meter-Sternchen: klein & fest (Fix gegen Riesen-Icon) */
.learn-meter .lm-ic, .lm-ic{ width:28px !important; height:28px !important; flex:0 0 auto !important; display:inline-flex !important; align-items:center; justify-content:center; }
.learn-meter .lm-ic svg, .lm-ic svg.cute, .lm-ic svg{ width:26px !important; height:26px !important; }

/* -----------------------------------------------------------------
   10. KLEINIGKEITEN — sauberer Lesefluss
   ----------------------------------------------------------------- */
/* Lange Überschriften nie abgeschnitten (Umlaute, Unterlängen) */
h1.hero-big, .chap-hd h2, .intro h2, .scene-body h3, .step h3, h2.display{
  overflow:visible !important;
  padding-bottom:.08em;
}
/* schönere Worttrennung im Fließtext */
.body-l, .tx, .step .tx, .scene-body p, .lede{ text-wrap:pretty; }

/* -----------------------------------------------------------------
   11. KARTE — Info-Leiste & Infobox kompakter (war zu groß)
   ----------------------------------------------------------------- */
.map-title{ padding:14px 16px !important; max-width:min(40ch,66vw) !important; }
.map-title h1{ font-size:clamp(17px,1.9vw,23px) !important; line-height:1.05 !important; }
.map-title p{ font-size:12.5px !important; line-height:1.5 !important; margin-top:8px !important; }
.rail-place{ font-size:clamp(19px,1.9vw,25px) !important; line-height:1.06 !important; }
.rail-text{ font-size:13.5px !important; line-height:1.62 !important; margin-top:12px !important; }
.rail-yr{ font-size:12px !important; }
.rail-counter b{ font-size:14px !important; }
.rail-now{ font-size:12px !important; }
.rail-nav button{ font-size:13px !important; padding:11px !important; }

/* -----------------------------------------------------------------
   12. MEHR KONTRAST (Dark) + BILDQUALITÄT + MEHR WHITESPACE
   ----------------------------------------------------------------- */
/* Exakte Dark-Oberflächen (Designsystem) + sichtbare Rahmen */
html[data-theme="dark"]{
  --pergament:#060402;        /* bg-base      */
  --pergament-2:#0E0B06;      /* bg-surface-1 */
  --pergament-3:#161210;      /* bg-surface-2 */
  --line:#2A2218;
  --hairline:#2A2218;
  --line-2:rgba(248,242,228,.06);
}
html[data-theme="dark"], html[data-theme="dark"] body, html[data-theme="dark"] body.epoch-war{ background-color:#060402 !important; }
html[data-theme="dark"] .fact,
html[data-theme="dark"] .learn-meter,
html[data-theme="dark"] .gloss-card,
html[data-theme="dark"] .cn-card,
html[data-theme="dark"] .recap,
html[data-theme="dark"] .qcard,
html[data-theme="dark"] .rcard,
html[data-theme="dark"] .inne-card{
  background:#161210 !important;
  border:1px solid #2A2218 !important;
  box-shadow:0 18px 40px -28px rgba(0,0,0,.8) !important;
}
/* Faktbox-Akzentkante kräftiger */
html[data-theme="dark"] .fact{ border-left:4px solid var(--blau) !important; }
html[data-theme="dark"] .fact.ns{ border-left:4px solid var(--feldrot) !important; }

/* BILDER: gerade, scharf, natürlicher (weniger Sepia-Schleier -> mehr „Qualität") */
.scene-media .arch img,
.sv-frame img,
.intro-portrait .ph img,
.rail-photo img,
.mfront img,
.gitem img{
  filter:grayscale(1) contrast(1.05) brightness(1.03) !important;
  image-rendering:auto;
}
/* Szenenfotos: natürliches Verhältnis, randlos (Mount-/Abzugsrand weggeschnitten), immer gerade */
.scene-media .arch, .arch{ aspect-ratio:auto !important; overflow:hidden !important; background:transparent !important; }
.scene-media .arch img, .arch img{ position:relative !important; width:100% !important; height:auto !important; object-fit:fill !important; background:transparent !important; display:block !important; transform:scale(1.16) !important; transform-origin:center 42% !important; }
.scene-media .arch:hover img, .arch:hover img{ transform:scale(1.2) !important; }
/* Porträt- und Slideshow-Rahmen: sauber gefüllt, ohne Balken oder Rand */
.sv-frame, .intro-portrait .ph, .ph-now, .rail-photo{ overflow:hidden !important; background:transparent !important; }
.sv-frame img,
.intro-portrait .ph img,
.ph-now img,
.rail-photo img{ object-fit:cover !important; background:transparent !important; object-position:center 30% !important; transform:scale(1.08) !important; transform-origin:center 38% !important; }

/* LEBENSABSCHNITTE: mehr Luft, nichts gequetscht */
#vorkrieg .scene, #kapitel + #kap2scope .scene, #nachkrieg .scene, .scene{ margin-bottom:clamp(84px,13vh,168px) !important; }
.scene-body .auth-q{ margin:40px 0 !important; }
.scene-body h3{ margin:18px 0 30px !important; }
.scene-body .body-l{ margin-bottom:1.3em; }
.step{ padding:8px 0 !important; }
.step h3{ margin:16px 0 28px !important; }
.fact{ margin-top:48px !important; }
.learn-meter{ margin:clamp(34px,5vh,56px) 0 !important; }
.kq{ margin:clamp(28px,5vh,56px) 0 !important; }
.compare{ margin-top:clamp(28px,4vh,44px) !important; }
.decision{ margin-top:clamp(56px,8vh,104px) !important; }
.chap-hd .emo{ font-size:clamp(18px,2.2vw,26px) !important; }

@media (max-width:880px){
  .brand .wm .l1{ font-size:14px !important; }
  .brand .wm .l2{ font-size:10px !important; }
  .nav .logo-mark{ width:19px !important; height:19px !important; }
}