/* =================================================================
   ERINNERUNGEN SICHTBAR MACHEN — v3 Core
   Implements the full concept doc (Felchner 2026)
   Type: Playfair Display Variable · Merriweather · Source Sans 3 · Courier Prime
   ================================================================= */

:root{
  /* ---- documented palette ---- */
  /* ===== PALETTE v11 — LIGHT: elfenbein · sandbeige · marineblau + bernstein · kobalt · himbeer · türkis · violett ===== */
  /* ===== DESIGN SYSTEM (Felchner 2026) — LIGHT: Pergament · Tinte · Amber · Slate Blue ===== */
  --pergament:#F5EDD8;     /* Pergament — Seitenhintergrund (Basis) */
  --pergament-2:#FDFAF4;   /* Pergament hell — Karten, Panels, Sidebar */
  --pergament-3:#FFFFFF;   /* Weiß — Formularfelder, Pop-ups */
  --silver:#E0D4B8;        /* Rahmen — divider tone */
  --lime:#C8811A;          /* (legacy token) → Amber */
  --lime-d:#A86A12;
  --amber:#C8811A;         /* PRIMARY — Amber (persönliche Ereignisse, Akzente, Links) */
  --amber-l:#EDD9A3;       /* Amber hell — Highlight-Flächen, Tags, Chips */
  --amber-d:#B87010;       /* readable amber — Text, Hover (game-DS amber-strong light) */
  --amber-hi:#B87010;      /* highlight (light) */
  --schiefer:#3B5A8C;      /* Slate Blue dunkel — historische Fakten, Info */
  --schiefer-l:#6E8CB8;
  --gold:#C8811A;          /* Amber (secondary fill family) */
  --gold-l:#EDD9A3;
  --gold-ink:#7A5C2E;      /* readable amber/braun for text on light */
  /* SECONDARY — Slate Blue (links, navigation, interactive, historische Fakten) */
  --blau:#3B5A8C;
  --blau-d:#2E486F;        /* hover slate */
  --blau-l:#C8D8EE;        /* Slate Blue hell — Info-Flächen, Fakten-Boxen */
  --ink:#1A120A;           /* Tinte dunkel — Fließtext & Überschriften */
  --ink-soft:#4A3828;      /* Tinte mittel — Unterüberschriften, Bildunterschriften */
  --feldrot:#B5462F;       /* Akzent (Judenverfolgung-Faden, Warnung) — warmes Backstein-Rot */
  --feldrot-ink:#9A3A26;   /* readable for text */
  --terra:#3B5A8C;         /* → Slate (community, special) */
  --terra-ink:#2E486F;
  --history:#B5462F;       /* historischer Akzent */
  --history-ink:#9A3A26;
  --cyan:#3B5A8C;          /* → Slate */
  --cyan-l:#C8D8EE;
  --violet:#3B5A8C;        /* → Slate */
  --ok:#1F8A4C;            /* success (light) */
  --warn:#B5462F;          /* warning / error */
  --link:#3B5A8C;          /* interactive / links — Slate Blue */
  --heading:#1A120A;       /* Überschriften — Tinte dunkel */
  --hover:#A86A12;         /* hover — deeper amber */
  /* always-dark panels (decision, toast, chat, ticker…) — warm espresso, do NOT invert by theme */
  --ink-panel:#241A0E;     /* deep warm panel surface (light mode) */
  --on-ink:#F0E8D5;        /* light text on those panels */
  --war-bg:#100D06;        /* "Während des Krieges" — warm dark */
  --war-bg-2:#0E0B05;
  --war-text:#F0E8D5;      /* light text on war bg */
  --sepia:rgba(120,90,50,0.08);
  --line:#E0D4B8;          /* Rahmen — Divider, Kartenrahmen */
  --line-2:rgba(26,18,10,.06);

  /* epoch background (switched by scroll) */
  --epoch-bg:var(--pergament);
  --epoch-text:var(--ink);

  /* ---- type v12 — EXACTLY 4 families across the whole site:
         Clash Display (display/headings) · Space Grotesk (UI/nav/labels/mono) ·
         Inter (body) · Cormorant Garamond (quotes/memories) ---- */
  --f-display:'Barlow Condensed', 'Oswald', system-ui, sans-serif;  /* Display/H1 — game-inspired Impact-Titel (UPPERCASE) */
  --f-head:'Source Sans 3', system-ui, sans-serif;          /* H3/H4 — UI-/Kartenüberschriften */
  --f-emo:'Playfair Display', Georgia, serif;               /* H2 emotional — persönliche Stimme */
  --f-quote:'Merriweather', Georgia, serif;                 /* Zitate, Erinnerungen */
  --f-body:var(--f-user, 'Source Sans 3'), system-ui, sans-serif;  /* Fließtext */
  --f-ui:'Source Sans 3', system-ui, sans-serif;            /* Navigation, Buttons, Labels */
  --f-accent:'Barlow Condensed', system-ui, sans-serif;     /* Kicker, Rubriken, Tags — UPPERCASE */
  --f-mono:'Courier Prime', ui-monospace, monospace;        /* Dokumente, Quellen, Akten */
  --track:0.005em;

  --maxw:1200px;
  --gut:clamp(20px,4vw,56px);
  --rail:60px;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* WAR EPOCH — page turns cold blue-grey, text light */
body.epoch-war{--epoch-bg:var(--war-bg);--epoch-text:var(--war-text);}
body.epoch-war .kicker{color:var(--amber-l);}
body.epoch-war .kicker.b{color:#7fa8d8;}
body.epoch-war .lede{color:#a9bcd6;}
body.epoch-war .caption{color:#9db0c8;}
body.epoch-war .tl-axis{background:var(--war-text);opacity:.25;}
body.epoch-war .compare-note{color:var(--war-text);opacity:.85;}
body.epoch-war .divider{background:var(--amber-l);}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;}
body{
  background-color:var(--epoch-bg);color:var(--epoch-text);
  font-family:var(--f-body);font-size:18px;line-height:1.7;font-weight:400;letter-spacing:var(--track);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;transition:background .6s ease-in-out,color .6s ease-in-out;
}
/* font personalization presets */
body[data-font="inter"]{--f-user:'Inter';}
body[data-font="manrope"]{--f-user:'Manrope';}
body[data-font="general"]{--f-user:'General Sans';}
body[data-font="sora"]{--f-user:'Sora';}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
::selection{background:var(--amber);color:#fff;}

/* film grain */
body::after{content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:multiply;}

/* =========================================================
   TYPOGRAPHY  (Playfair used BOLD per concept)
   ========================================================= */
.display{font-family:var(--f-display);font-weight:900;line-height:1.04;letter-spacing:-.015em;}
.d-xl{font-size:clamp(52px,10vw,128px);font-weight:900;}
.d-lg{font-size:clamp(40px,7vw,84px);font-weight:900;}
.d-md{font-size:clamp(32px,5vw,60px);font-weight:800;}
.h2-it{font-family:var(--f-display);font-weight:400;font-style:italic;font-size:clamp(26px,3.4vw,38px);line-height:1.15;}
.quote{font-family:var(--f-quote);font-style:italic;font-size:clamp(22px,2.6vw,34px);line-height:1.4;}
.kicker{font-family:var(--f-ui);font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);}
.kicker.b{color:var(--schiefer);}
.kicker.r{color:var(--feldrot);}
.lede{font-family:var(--f-quote);font-size:clamp(19px,2.1vw,24px);line-height:1.5;color:var(--ink-soft);}
.body-l{font-size:clamp(17px,1.2vw,18.5px);line-height:1.75;}
.caption{font-family:var(--f-body);font-size:13px;font-style:italic;color:var(--ink-soft);line-height:1.5;}
.docref{font-family:var(--f-mono);font-size:12.5px;color:#7d7568;letter-spacing:.01em;font-style:normal;}
.mono{font-family:var(--f-mono);}

/* variable-weight heavy words */
.heavy{font-weight:300;transition:font-weight .4s ease,letter-spacing .4s ease;cursor:default;}
.heavy:hover{font-weight:900;letter-spacing:.005em;}

/* big year numeral */
.yearnum{font-family:var(--f-display);font-weight:900;line-height:.8;color:transparent;-webkit-text-stroke:2px currentColor;opacity:.16;user-select:none;}
.yearnum.fill{color:currentColor;-webkit-text-stroke:0;opacity:1;}

/* =========================================================
   LAYOUT
   ========================================================= */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);}
.wrap-n{max-width:920px;margin:0 auto;padding:0 var(--gut);}
.sec{padding:clamp(80px,11vh,140px) 0;position:relative;}
.sec.tint{background:var(--pergament-2);}
.center{text-align:center;}
.mt1{margin-top:10px}.mt2{margin-top:22px}.mt3{margin-top:40px}.mt4{margin-top:64px}
.divider{height:3px;width:60px;background:var(--amber);border:0;}

/* reveal + stagger */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform 1s var(--ease);}
.rv.on{opacity:1;transform:none;}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important;}
  .rv{opacity:1!important;transform:none!important;}
}

/* =========================================================
   CUSTOM CURSOR
   ========================================================= */
.cursor{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:7px;opacity:0;transition:opacity .25s;mix-blend-mode:normal;}
.cursor .dot{width:10px;height:10px;border-radius:50%;background:var(--amber);transition:transform .2s var(--ease),background .2s;}
.cursor .lab{font-family:var(--f-mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--ink);color:var(--pergament);padding:4px 9px;border-radius:30px;opacity:0;transform:translateX(-4px);transition:.2s var(--ease);white-space:nowrap;}
.cursor.show{opacity:1;}
.cursor.labeled .lab{opacity:1;transform:none;}
.cursor.labeled .dot{transform:scale(1.6);background:var(--amber-l);}
@media(hover:none),(pointer:coarse){.cursor{display:none!important;}}

/* =========================================================
   TOP PROGRESS + LEFT RAIL
   ========================================================= */
.topbar{position:fixed;top:0;left:0;height:3px;width:100%;z-index:120;background:transparent;}
.topbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blau),var(--amber));}

.rail{position:fixed;top:0;left:0;bottom:0;width:var(--rail);z-index:80;display:flex;flex-direction:column;align-items:center;
  padding:84px 0 28px;pointer-events:none;opacity:0;transition:opacity .5s;}
.rail.show{opacity:1;}
.rail-track{position:relative;flex:1;width:2px;background:rgba(26,26,26,.16);}
body.epoch-war .rail-track{background:rgba(197,213,235,.2);}
.rail-fill{position:absolute;top:0;left:0;right:0;height:0;background:linear-gradient(var(--amber),var(--schiefer));transition:height .12s linear;}
.rail-tick{position:absolute;left:50%;transform:translateX(-50%);pointer-events:auto;}
.rail-tick .dot{width:10px;height:10px;border-radius:50%;background:var(--pergament);border:2px solid var(--schiefer);transition:.3s;}
.rail-tick.p .dot{border-color:var(--amber);background:var(--amber);}
.rail-tick.on .dot{transform:scale(1.5);box-shadow:0 0 0 5px rgba(212,137,10,.2);}
.rail-tick .lab{position:absolute;left:18px;top:50%;transform:translateY(-50%) translateX(-6px);white-space:nowrap;
  background:var(--ink);color:var(--pergament);font-family:var(--f-mono);font-size:11px;padding:5px 9px;border-radius:5px;opacity:0;transition:.3s;}
.rail-tick .lab b{color:var(--amber-l);margin-right:6px;}
.rail-tick:hover .lab{opacity:1;transform:translateY(-50%);}

/* =========================================================
   NAV
   ========================================================= */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gut);transition:padding .4s var(--ease),background .4s,box-shadow .4s,color .4s;}
.nav.solid{background:rgba(245,237,216,.92);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line);padding-top:14px;padding-bottom:14px;}
body.epoch-war .nav.solid{background:rgba(30,37,53,.9);box-shadow:0 1px 0 rgba(197,213,235,.15);}
.brand{display:flex;flex-direction:column;line-height:1;cursor:pointer;}
.brand .l1{font-family:var(--f-display);font-weight:800;font-size:19px;letter-spacing:.01em;color:var(--amber);}
.brand .l2{font-family:var(--f-display);font-weight:800;font-size:19px;letter-spacing:.01em;color:var(--ink);}
.brand .rule{width:28px;height:2px;background:var(--line);margin-top:5px;}
.nav-light .brand .l2{color:var(--pergament);}
.nav-light.solid .brand .l2{color:var(--ink);}
body.epoch-war .nav-light.solid .brand .l2{color:var(--pergament);}
.nav-links{display:flex;align-items:center;gap:clamp(12px,1.8vw,26px);}
.nav-links .link{font-family:var(--f-ui);font-weight:500;font-size:15px;position:relative;padding:6px 0;color:var(--ink);transition:color .3s;}
.has-sub{position:relative;}
.nav-links .link::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);}
.nav-links .link:hover::after,.nav-links .link.active::after{transform:scaleX(1);}
.nav-light .nav-links .link{color:var(--pergament);text-shadow:0 1px 12px rgba(0,0,0,.5);}
.nav-light.solid .nav-links .link{color:var(--ink);text-shadow:none;}
body.epoch-war .nav-light.solid .nav-links .link{color:var(--war-text);}
.submenu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(6px);background:var(--pergament);
  border:1px solid var(--line);box-shadow:0 24px 50px -28px rgba(40,30,15,.6);min-width:250px;padding:8px;opacity:0;visibility:hidden;transition:.28s var(--ease);}
.has-sub:hover .submenu{opacity:1;visibility:visible;transform:translateX(-50%);}
.submenu a{display:block;color:var(--ink);padding:10px 12px;font-size:14px;transition:.2s;}
.submenu a:hover{background:var(--pergament-2);color:var(--amber);}
.submenu a small{display:block;font-family:var(--f-mono);color:#9a8f7f;font-size:11px;margin-top:2px;}
.submenu a.disabled{opacity:.5;cursor:not-allowed;}

.profile-chip{display:flex;align-items:center;gap:10px;padding:6px 18px 6px 6px;border:2px solid var(--ink);border-radius:40px;
  font-family:var(--f-body);font-size:14.5px;font-weight:600;transition:.3s;background:var(--pergament);color:var(--ink);}
.nav-light:not(.solid) .profile-chip{border-color:var(--pergament);background:rgba(255,255,255,.14);color:#F0E8D5;backdrop-filter:blur(6px);}
.profile-chip:hover{background:var(--ink);color:var(--pergament);}
.nav-light:not(.solid) .profile-chip:hover{background:var(--pergament);color:var(--ink);}
.profile-chip .av{width:38px;height:38px;border-radius:50%;object-fit:cover;filter:sepia(.3) contrast(1.05);background:var(--pergament-3);}
.profile-chip .lvl{font-family:var(--f-mono);font-size:11px;background:var(--amber);color:#1A120A;border-radius:20px;padding:2px 8px;font-weight:700;}
/* dark mode legibility — light text on a real dark surface, regardless of nav state */
html[data-theme="dark"] .profile-chip{background:#2A2318;color:#F0E8D5;border-color:rgba(245,242,234,.55);}
html[data-theme="dark"] .nav-light:not(.solid) .profile-chip{background:rgba(255,255,255,.16);color:#F0E8D5;border-color:rgba(255,255,255,.6);}
html[data-theme="dark"] .profile-chip:hover{background:var(--amber);color:#1A120A;border-color:var(--amber);}
html[data-theme="dark"] .profile-chip .lvl{background:var(--amber);color:#1A120A;}
.burger{display:none;width:30px;height:22px;flex-direction:column;justify-content:space-between;}
.burger span{height:2.5px;width:100%;background:currentColor;border-radius:2px;transition:.3s;}
.nav-light:not(.solid) .burger span{background:var(--pergament);}

@media(max-width:880px){
  :root{--rail:0px;}
  .rail{display:none;}
  .nav-links{position:fixed;inset:0 0 0 auto;width:min(84vw,360px);background:var(--ink);color:var(--pergament);
    flex-direction:column;align-items:flex-start;justify-content:center;gap:22px;padding:40px;transform:translateX(100%);transition:transform .5s var(--ease);z-index:130;}
  .nav-links.open{transform:none;}
  .nav-links .link{color:var(--pergament);font-size:20px;}
  .submenu{position:static;transform:none;opacity:1;visibility:visible;background:transparent;border:none;box-shadow:none;padding:8px 0 0 14px;min-width:0;}
  .submenu a{color:#cfc4b0;padding:6px 0;}
  .burger{display:flex;z-index:140;}
  .nav.menu-open .burger span:nth-child(1){transform:translateY(9.5px) rotate(45deg);background:var(--pergament);}
  .nav.menu-open .burger span:nth-child(2){opacity:0;}
  .nav.menu-open .burger span:nth-child(3){transform:translateY(-9.5px) rotate(-45deg);background:var(--pergament);}
}