/* ===== KODEX° — gemeinsamer Hausstil aller Blätter ===== */
:root{
  /* Standard = rechte Hand · das Klare (ganz leicht cremefarbener Grund) */
  --ivory:#FBFAF6; --paper:#F3F0E8; --ink:#2E2B26; --soft:#857F74;
  --amber:#C0552F; --gold:#2B3FC0; --schau:#2B3FC0; --line:#E4DFD4;
  /* feste Markenfarben (Menü, Figur) — unabhängig vom Blatt-Thema */
  --copper:#C0552F; --copper-hi:#CE6A40; --magic:#1A82F0; --magic-hi:#2E90FF;
  --magicbg:#1A2360; --realgold:#EAC25C; --warmnav:#2A2722; --navtext:#D2CCC1;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; background:var(--ivory); color:var(--ink);
  font-family:'Fraunces',Georgia,serif; line-height:1.72; font-size:18px;}
.sheet{max-width:720px; margin:0 auto; padding:36px 34px 80px;}

/* ---- Kopf ---- */
.eyebrow{font-family:'Space Mono',monospace; font-size:11px; font-weight:700;
  letter-spacing:.26em; text-transform:uppercase; color:var(--amber); margin:0 0 16px;}
h1{font-family:'Fraunces',serif; font-weight:500; font-size:40px; line-height:1.05;
  letter-spacing:-.01em; margin:0 0 10px;}
.dek{font-style:italic; font-size:19px; color:var(--soft); margin:0 0 6px;}

/* ---- Ausgangslage: macht das Blatt selbsttragend ---- */
.ausgangslage{margin:30px 0 8px; padding:20px 22px; background:var(--paper);
  border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:5px;}
.ausgangslage .label{font-family:'Space Mono',monospace; font-size:10.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--amber); display:block; margin-bottom:8px;}
.ausgangslage p{margin:8px 0; font-size:16.5px; line-height:1.66; color:#3A352E;}

/* ---- Fließtext ---- */
.fig{text-align:center; margin:34px 0 10px;}
.fig svg{max-width:100%; height:auto;}
p{margin:15px 0;} em{font-style:italic;} strong{font-weight:600;}
h2.abschnitt{font-family:'Space Mono',monospace; font-size:12px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--amber);
  margin:42px 0 6px; padding-top:18px; border-top:1px solid var(--line);}
.rom{color:var(--soft);}
blockquote{margin:20px 0; padding:4px 0 4px 20px; border-left:2px solid var(--gold);
  font-style:italic; color:#3A352E;}

/* ---- Konfidenzmarken ---- */
.d{color:var(--amber); font-weight:700; font-family:'Space Mono',monospace; font-size:.8em;}  /* ◆ belegt */
.s{color:var(--schau); font-weight:700; font-family:'Space Mono',monospace; font-size:.8em;}  /* ▲ Schau */
.g{color:var(--gold);  font-weight:700; font-family:'Space Mono',monospace; font-size:.8em;}  /* ● Reim  */

/* ---- Anmerkungen / die Fäden (ausführlich) ---- */
.faeden{margin-top:46px; padding-top:8px; border-top:2px solid var(--line);}
.faeden h2{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--amber); margin:0 0 4px;}
.faeden .intro{font-style:italic; color:var(--soft); margin:6px 0 18px;}
.faden{margin:0 0 18px; padding-left:16px; border-left:2px solid var(--line);}
.faden .kopf{font-family:'Inter',sans-serif; font-weight:600; font-size:14.5px; color:var(--ink); margin-bottom:3px;}
.faden .txt{font-family:'Inter',sans-serif; font-size:14px; line-height:1.66; color:#47423A;}

/* ---- Stand der Akte ---- */
.stand{margin-top:40px; padding:22px 24px; background:var(--paper);
  border:1px solid var(--line); border-radius:5px;
  font-family:'Inter',sans-serif; font-size:14px; line-height:1.65; color:#47423A;}
.stand h3{font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--amber); margin:0 0 12px;} .stand p{margin:9px 0;}

footer{margin-top:38px; padding-top:16px; border-top:1px solid var(--line);
  text-align:center; font-family:'Space Mono',monospace; font-size:10px; line-height:1.9;
  letter-spacing:.06em; color:#9a9a94; text-transform:uppercase;}

/* ===== Kodex-Navigation (Kopfzeile auf jedem Blatt) ===== */
.kodex-bar{position:sticky; top:0; z-index:40; display:flex; flex-direction:column; gap:6px;
  max-width:720px; margin:0 auto; padding:9px 34px 10px; background:var(--warmnav);
  backdrop-filter:blur(6px); border-bottom:1px solid rgba(255,255,255,.10);
  color:var(--navtext); font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.04em;}
.kodex-row{display:flex; align-items:center; justify-content:space-between; gap:14px;}
.kodex-menu{background:none; border:1px solid var(--copper); color:var(--copper-hi); cursor:pointer;
  font-family:inherit; font-weight:700; font-size:11px; padding:4px 10px; border-radius:4px; white-space:nowrap;}
.kodex-menu:hover{background:rgba(194,104,62,.16); color:var(--copper-hi);}
.kodex-pn a{color:var(--copper-hi); font-weight:700; text-decoration:none; white-space:nowrap; padding:0 4px;}
.kodex-pn a:hover{text-decoration:underline;}
.kodex-pn .dis{color:rgba(210,204,193,.4); padding:0 4px;}
/* Brotkrumen-Pfad (2. Ebene) — bricht um statt abzuschneiden */
.kodex-crumbs{display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 7px; line-height:1.5;}
.kc-home{color:var(--magic-hi); text-decoration:none; font-weight:700; white-space:nowrap;}
.kc-home:hover{text-decoration:underline;}
.kc-sep{color:rgba(210,204,193,.4);}
.kc-grp{color:var(--magic-hi); font-weight:700; text-decoration:none; white-space:nowrap;}
.kc-grp:hover{text-decoration:underline;}
.kc-cur{color:var(--navtext);}
.kodex-panel{max-width:720px; margin:0 auto; background:#211E1A; color:var(--navtext);
  border:1px solid rgba(255,255,255,.10); border-top:none; max-height:70vh; overflow:auto;}
.kodex-panel-inner{padding:16px 34px 22px;}
.kp-gruppe{font-family:'Space Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--copper-hi); margin:16px 0 6px;}
.kp-gruppe:first-child{margin-top:0;}
.kp-link{display:block; font-family:'Fraunces',serif; font-size:16px; color:var(--navtext);
  text-decoration:none; padding:4px 0; border-bottom:1px solid rgba(255,255,255,.08);}
.kp-link:hover{color:var(--magic-hi);}
.kp-link[aria-current="page"]{color:var(--copper-hi); font-style:italic;}
.kp-link[aria-current="page"]::before{content:"› "; color:var(--copper-hi);}

/* ===== Index-Hub ===== */
.hub-hero{max-width:720px; margin:0 auto; padding:60px 34px 8px;}
.hub-hero .eyebrow{margin-bottom:12px;}
.hub-hero h1{font-size:46px;}
.hub-hero .intro{font-size:18px; color:#3A352E; max-width:60ch;}
.hub-wrap{max-width:720px; margin:0 auto; padding:8px 34px 80px;}
.hub-gruppe{margin-top:36px; scroll-margin-top:96px;}
.hub-h2{font-family:'Space Mono',monospace; font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber); margin:0 0 12px; padding-top:16px; border-top:1px solid var(--line);}
.hub-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.hub-card{display:block; padding:14px 16px; background:var(--paper); border:1px solid var(--line);
  border-radius:6px; text-decoration:none; transition:border-color .15s, transform .15s;}
.hub-card:hover{border-color:var(--gold); transform:translateY(-1px);}
.hub-titel{display:block; font-family:'Fraunces',serif; font-size:18px; font-weight:500; color:var(--ink); line-height:1.2;}
.hub-kurz{display:block; font-family:'Inter',sans-serif; font-size:13px; color:var(--soft); margin-top:5px; line-height:1.5;}

@media (max-width:560px){
  .sheet,.hub-hero,.hub-wrap{padding-left:20px; padding-right:20px;}
  .kodex-bar,.kodex-panel-inner{padding-left:20px; padding-right:20px;}
  h1{font-size:31px;} .hub-hero h1{font-size:34px;} body{font-size:17px;}
  .hub-grid{grid-template-columns:1fr;}
  .kodex-cur{display:none;}
}

/* --- Nachträge: Mono-Auszeichnung, Hinweis, Impressum-Link --- */
.mono{ font-family:'Space Mono',monospace; font-size:.9em;
  background:rgba(176,116,26,.08); padding:.05em .35em; border-radius:3px; color:#8a5a14; }
.hinweis{ font-size:.86rem; color:#6b6f78; font-style:italic; margin-top:-.4em; }
.kc-impressum{ margin-left:auto; color:#8a8d94; text-decoration:none; white-space:nowrap; }
.kc-impressum:hover{ color:var(--amber); text-decoration:underline; }

/* === Lesesaal (Frame-Ansicht): links die Spur, rechts das Blatt === */
body.lesesaal-body{ margin:0; padding:0; max-width:none; width:auto; }
.lesesaal{ display:flex; height:100dvh; overflow:hidden; }
.rail{ flex:0 0 340px; width:340px; overflow-y:auto; padding:26px 24px 56px;
  border-right:1px solid var(--line); background:rgba(241,242,239,.55); }
.frame-pane{ flex:1 1 auto; width:100%; height:100%; border:0; background:#fff; }
.rail-intro .eyebrow{ margin-bottom:.5em; }
.rail-intro h1{ font-size:25px; margin:0 0 .35em; line-height:1.1; }
.rail-intro p{ font-family:'Inter',sans-serif; font-size:14px; line-height:1.55; color:#3b3e45; }
.rail-gruppe{ font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--amber); margin:22px 0 6px; }
.rail-link{ display:block; color:var(--ink); text-decoration:none; font-family:'Inter',sans-serif;
  font-size:14.5px; line-height:1.35; padding:5px 9px; border-radius:5px; border-left:2px solid transparent; }
.rail-link:hover{ background:rgba(176,116,26,.07); }
.rail-link.active{ background:rgba(176,116,26,.12); border-left-color:var(--amber); font-weight:500; }
.rail-foot{ margin-top:26px; padding-top:15px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:6px 16px; font-family:'Space Mono',monospace; font-size:11px; }
.rail-foot a{ color:var(--amber); text-decoration:none; }
.rail-foot a:hover{ text-decoration:underline; }
/* Blatt im Rahmen: nur ein schlanker Ausklapp-Link statt voller Leiste */
.kodex-bar--frame{ padding:5px 16px 6px; }
.kf-label{ color:#9a9da4; }
.kc-pop{ margin-left:auto; color:#8a8d94; text-decoration:none; }
.kc-pop:hover{ color:var(--amber); text-decoration:underline; }
/* Lesesaal-Knopf auf der Startseite */
.hero-modes{ margin-top:1.4em; }
.modebtn{ display:inline-block; font-family:'Space Mono',monospace; font-size:12.5px;
  color:var(--amber); text-decoration:none; border:1px solid var(--amber);
  padding:8px 16px; border-radius:6px; letter-spacing:.03em; }
.modebtn:hover{ background:var(--amber); color:#fff; }

@media (max-width:720px){
  .lesesaal{ flex-direction:column; height:auto; overflow:visible; }
  .rail{ flex:none; width:auto; max-height:44vh; border-right:0; border-bottom:1px solid var(--line); }
  .frame-pane{ height:56vh; min-height:360px; }
}

/* === Schriften lokal eingebunden (selbst gehostet) — keine externen Aufrufe === */
@font-face{ font-family:'Fraunces'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('fonts/fraunces-normal.woff2') format('woff2'); }
@font-face{ font-family:'Fraunces'; font-style:italic; font-weight:100 900; font-display:swap;
  src:url('fonts/fraunces-italic.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('fonts/inter-normal.woff2') format('woff2'); }
@font-face{ font-family:'Space Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/space-mono-400.woff2') format('woff2'); }
@font-face{ font-family:'Space Mono'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/space-mono-700.woff2') format('woff2'); }

/* ===== Farbsprache der Figur ===== */
/* Nacht — der Spalt (Mitte-Blätter): warmes Fast-Schwarz, Gold */
body.nacht{
  --ivory:#0B0A08; --paper:#15130F; --ink:#ECE7DC; --soft:#8C867B;
  --amber:#E6B84F; --gold:#E0A24A; --schau:#9AA6C8; --line:#2A2620;
}
body.nacht .ausgangslage p, body.nacht blockquote{ color:#d4cfc4; }
body.nacht .faden .txt, body.nacht .stand{ color:#cbc6bb; }
body.nacht .ausgangslage, body.nacht .stand{ background:#141109; }
body.nacht footer{ color:#867f72; }
body.nacht .mono{ background:rgba(230,184,79,.12); color:#e8c980; }
body.nacht .hinweis{ color:#9a948a; }

/* Schau — linke Hand: helles Azurblau (Menü & Flächen), Seite in ganz hellem Ton, Schrift kalt */
body.schau{
  --ivory:#EAF4FF; --paper:#D8EAFF; --ink:#262A30; --soft:#5E6B7A;
  --amber:#C0552F; --gold:#1A82F0; --schau:#1A82F0; --line:#CBE0F8;
}
body.schau .ausgangslage p, body.schau blockquote{ color:#2E333B; }
body.schau .faden .txt, body.schau .stand{ color:#333941; }
body.schau .ausgangslage, body.schau .stand{ background:#D8EAFF; }
body.schau footer{ color:#5E6B7A; }
body.schau .mono{ background:rgba(26,130,240,.12); color:#15569C; }
body.schau .hinweis{ color:#5E6B7A; }

/* Klar — rechte Hand: entspricht dem Standard (cremefarben); hier nur ausdrücklich */
body.klar{ --ivory:#FBFAF6; --paper:#F3F0E8; --ink:#2E2B26; }

/* Eingebettete Figuren (SVG) im Blatt */
.figur{ margin:2.4rem 0; text-align:center; }
.figur svg{ max-width:100%; height:auto; }
.figur .cap{ margin:.7rem auto 0; max-width:33rem; font-size:.86rem; line-height:1.55; color:var(--soft); font-style:italic; }