/* =====================================================================
   Long & Short — "Frankfurter Broadsheet", Parkett-Violett edition
   Light, editorial finance aesthetic. Single source of styling; no
   Tailwind, no build step. Diagrams are inline SVG and inherit these
   tokens via currentColor / explicit hex matching the palette below.
   ===================================================================== */

:root {
  --paper:    #F6F3EC;   /* page background, warm financial-print white   */
  --paper-2:  #EFEAE0;   /* recessed surface, table zebra                 */
  --card:     #FFFFFF;   /* raised surfaces: diagrams, cards              */
  --ink:      #16202A;   /* primary text, near-black slate                */
  --ink-2:    #46535E;   /* secondary text                                */
  --ink-3:    #6C7782;   /* muted captions                                */
  --rule:     #DCD6C8;   /* hairlines                                     */
  --rule-2:   #C9C2B1;   /* stronger borders                              */
  --violet:     #4E3D78;   /* brand accent (Parkett-Violett)               */
  --violet-2:   #675796;   /* brand accent, lighter                         */
  --violet-ink: #3D2F5E;   /* brand accent on light tint                    */
  --gold:     #B0832B;   /* secondary accent                              */
  --gold-2:   #946C1E;
  --up:       #1F7A4D;   /* semantic: market up / positive                */
  --down:     #B23A48;   /* semantic: market down / risk / Verbot         */
  --tint-violet: #F0EDF6;  /* callout backgrounds                           */
  --tint-gold: #F7F0E0;
  --tint-down: #F8ECEC;
  --tint-up:   #ECF3EE;
  --maxw:     1080px;
  --measure:  68ch;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* faint financial chart grid — atmosphere, not noise */
  background-image:
    linear-gradient(to right, rgba(78,61,120,.030) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(78,61,120,.030) 1px, transparent 1px);
  background-size: 34px 34px;
}

.serif { font-family: "Newsreader", Georgia, serif; }
.mono  { font-family: "IBM Plex Mono", ui-monospace, monospace; }
.wrap  { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.tnum  { font-variant-numeric: tabular-nums; }

a { color: var(--violet); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

img, svg { max-width: 100%; height: auto; }

::selection { background: rgba(176,131,43,.22); }

/* skip link for keyboard users */
.skip { position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--paper);
        padding:10px 16px; z-index:200; border-radius:0 0 6px 0; }
.skip:focus { left:0; }

/* ---------------------------------------------------------------- masthead */
.mast {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--rule);
  border-top: 3px solid var(--gold);
  background: rgba(246,243,236,.88);
  backdrop-filter: saturate(140%) blur(8px);
}
.mast .row { display:flex; align-items:center; justify-content:space-between; gap:22px;
             padding: 15px 0; max-width: var(--maxw); margin:0 auto; padding-left:28px; padding-right:28px; }
.brand { font-family:"Newsreader",serif; font-weight:600; font-size:24px; letter-spacing:-.01em;
         color:var(--ink); white-space:nowrap; }
.brand:hover { text-decoration:none; }
.brand .dot { color: var(--gold); }
/* Wordmark: Long in up-green, Short in down-red, & in gold — the brand explains the topic */
.brand .lng { color: var(--up); }
.brand .amp { color: var(--gold); font-weight:500; }
.brand .shrt { color: var(--down); }
.mast nav { display:flex; gap:22px; flex-wrap:wrap; }
.mast nav a { font-size:14.5px; font-weight:500; color:var(--ink-2); padding:3px 0;
              border-bottom:2px solid transparent; }
.mast nav a:hover { color:var(--ink); text-decoration:none; }
.mast nav a.active { color:var(--ink); border-color:var(--violet); }
.navtoggle { display:none; }

/* Kapitel-Dropdown im Masthead: <details class="navdrop"> in navbar.html,
   gespeist aus _data/kapitel.yml; Außenklick/Escape schließt (js/main.js). */
.navdrop { position:relative; }
.navdrop summary { list-style:none; cursor:pointer; user-select:none; -webkit-user-select:none;
  font-size:14.5px; font-weight:500; color:var(--ink-2); padding:3px 0;
  border-bottom:2px solid transparent; white-space:nowrap; }
.navdrop summary::-webkit-details-marker { display:none; }
.navdrop summary::after { content:"▾"; font-size:10px; margin-left:5px; color:var(--ink-3); }
.navdrop summary:hover, .navdrop[open] summary { color:var(--ink); }
.navdrop.active summary { color:var(--ink); border-color:var(--violet); }
.navdrop ul { position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%);
  margin:0; padding:10px; list-style:none; z-index:60;
  background:var(--card); border:1px solid var(--rule-2); border-top:3px solid var(--gold);
  border-radius:8px; box-shadow:0 12px 32px rgba(22,32,42,.14);
  min-width:560px; columns:2; column-gap:8px; }
.navdrop li { break-inside:avoid; }
.navdrop li a { display:flex; align-items:baseline; gap:9px; padding:6px 10px;
  border-radius:6px; border-bottom:none; font-size:14px; color:var(--ink-2); }
.navdrop li a:hover { background:var(--paper); color:var(--ink); text-decoration:none; }
.navdrop li a.active { color:var(--violet-ink); background:var(--tint-violet); border-color:transparent; }
.navdrop li .no { font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px;
  color:var(--gold-2); min-width:34px; text-align:right; flex:none; }

/* ---------------------------------------------------------------- footer */
footer.site {
  border-top: 3px solid var(--gold);
  background: var(--ink);
  color: #c7d0d8;
  margin-top: 64px;
}
footer.site .wrap { padding-top:40px; padding-bottom:40px; }
footer.site .cols { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:34px; }
footer.site h4 { font:600 12px/1 "IBM Plex Mono",monospace; letter-spacing:.14em;
                 text-transform:uppercase; color:#8b97a1; margin:0 0 14px; }
footer.site a { color:#dfe5ea; }
footer.site a:hover { color:#fff; }
footer.site .fbrand { font-family:"Newsreader",serif; font-size:20px; color:#fff; }
footer.site ul { list-style:none; padding:0; margin:0; display:grid; gap:8px; font-size:14px; }
footer.site .legal { margin-top:30px; padding-top:18px; border-top:1px solid #2a3540;
                     display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
                     font:500 12.5px/1.5 "IBM Plex Mono",monospace; color:#7e8b95; }

/* ---------------------------------------------------------------- shared bits */
.kicker { font:600 12px/1 "IBM Plex Mono",monospace; letter-spacing:.18em;
          text-transform:uppercase; color:var(--violet); }
.sec-no { font-family:"IBM Plex Mono",monospace; font-weight:600; color:var(--gold); }
.eyebrow { display:inline-block; font:600 11.5px/1 "IBM Plex Mono",monospace;
           letter-spacing:.16em; text-transform:uppercase; color:var(--violet);
           background:var(--tint-violet); border:1px solid #DBD5E7; border-radius:999px; padding:7px 13px; }
.badge { display:inline-block; background:var(--paper-2); border:1px solid var(--rule);
         border-radius:999px; padding:3px 12px; font:600 11.5px/1.7 "IBM Plex Mono",monospace;
         color:var(--violet-ink); letter-spacing:.03em; }
.badge.gold { color:var(--gold-2); background:var(--tint-gold); border-color:#e7d9b6; }
.badges { display:flex; gap:8px; flex-wrap:wrap; }

/* ---------------------------------------------------------------- chapter header */
.chapter-head { padding: 56px 0 8px; }
.chapter-head .meta { display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.chapter-head h1 { font-family:"Newsreader",serif; font-weight:600;
  font-size:clamp(38px,6vw,68px); line-height:1.03; letter-spacing:-.02em; margin:.1em 0 .3em; }
.chapter-head h1 em { font-style:italic; color:var(--violet); }
.lede { font-family:"Newsreader",serif; font-size:clamp(19px,2.2vw,24px); line-height:1.48;
        color:#28333d; max-width:60ch; }
.readmeta { margin-top:18px; font:500 13px/1 "IBM Plex Mono",monospace; color:var(--ink-3);
            display:flex; gap:18px; flex-wrap:wrap; }
.readmeta b { color:var(--ink-2); font-weight:600; }

/* ---------------------------------------------------------------- table of contents */
.toc { background:var(--card); border:1px solid var(--rule); border-radius:6px;
       padding:20px 22px; margin:36px 0 8px; box-shadow:0 14px 30px -26px rgba(22,32,42,.4); }
.toc .t { font:600 11.5px/1 "IBM Plex Mono",monospace; letter-spacing:.14em; text-transform:uppercase;
          color:var(--ink-3); margin-bottom:14px; }
.toc ol { list-style:none; counter-reset:toc; margin:0; padding:0;
          columns:2; column-gap:34px; }
.toc li { counter-increment:toc; margin:0 0 9px; break-inside:avoid; }
.toc li a { color:var(--ink); font-size:14.5px; display:flex; gap:10px; }
.toc li a::before { content:counter(toc,decimal-leading-zero); font-family:"IBM Plex Mono",monospace;
                    font-size:12px; color:var(--gold); font-weight:600; }
.toc li a:hover { color:var(--violet); text-decoration:none; }
.toc li a.active { color:var(--violet); font-weight:600; }
.toc li a.active::before { color:var(--violet); }

/* ---------------------------------------------------------------- document body */
.doc { padding: 18px 0 40px; }
.doc > section { padding: 30px 0; border-top:1px solid var(--rule); }
.doc > section:first-of-type { border-top:0; }

.sec-head { display:flex; align-items:baseline; gap:13px; margin-bottom:6px; }
.sec-head .sec-no { font-size:14px; }
.sec-head .lbl { font:600 11.5px/1 "IBM Plex Mono",monospace; letter-spacing:.16em;
                 text-transform:uppercase; color:var(--ink-3); align-self:center; }

.doc h2 { font-family:"Newsreader",serif; font-weight:600;
  font-size:clamp(27px,3.4vw,38px); line-height:1.1; letter-spacing:-.015em;
  margin:.1em 0 .5em; scroll-margin-top:84px; }
.doc h3 { font-family:"Newsreader",serif; font-weight:600; font-size:23px; line-height:1.25;
  margin:1.7em 0 .5em; scroll-margin-top:84px; }
.doc h4 { font:600 12.5px/1.3 "IBM Plex Mono",monospace; letter-spacing:.1em; text-transform:uppercase;
  color:var(--violet-ink); margin:1.6em 0 .5em; }
.doc p { max-width: var(--measure); margin: 0 0 1.05em; }
.doc .lede { margin-bottom: 1.1em; }
.doc strong { font-weight:600; color:var(--ink); }
.doc em { font-style:italic; }
.doc a { font-weight:500; border-bottom:1px solid rgba(78,61,120,.3); }
.doc a:hover { text-decoration:none; border-color:var(--violet); }

.doc ul, .doc ol { max-width: var(--measure); margin:0 0 1.15em; padding-left:0; }
.doc ul { list-style:none; }
.doc ul > li { position:relative; padding-left:24px; margin:0 0 .55em; }
.doc ul > li::before { content:""; position:absolute; left:4px; top:.62em; width:7px; height:7px;
  background:var(--gold); border-radius:1px; transform:rotate(45deg); }
.doc ol { list-style:none; counter-reset:li; }
.doc ol > li { position:relative; padding-left:34px; margin:0 0 .6em; counter-increment:li; }
.doc ol > li::before { content:counter(li,decimal-leading-zero); position:absolute; left:0; top:.05em;
  font:600 13px/1.4 "IBM Plex Mono",monospace; color:var(--violet); }
.doc li > ul { margin:.5em 0 .5em; }
/* Ausnahme: das Inhaltsverzeichnis behält seine eigene Zählung, auch wenn es
   in einem .doc-Kontext steht (default-Layout: Analysen). */
.doc .toc ol { counter-reset:toc; }
.doc .toc ol > li { padding-left:0; margin:0 0 9px; counter-increment:toc; }
.doc .toc ol > li::before { content:none; }

.doc blockquote { margin:1.6em 0; border-left:3px solid var(--gold); padding:2px 0 2px 22px; }
.doc blockquote p { font-family:"Newsreader",serif; font-style:italic; font-size:21px;
  line-height:1.42; color:var(--ink); max-width:46ch; }
.doc blockquote cite { display:block; font:600 12px/1.4 "IBM Plex Mono",monospace; font-style:normal;
  text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); margin-top:10px; }

.doc code, .doc kbd { font-family:"IBM Plex Mono",monospace; font-size:.86em;
  background:var(--paper-2); border:1px solid var(--rule); border-radius:4px; padding:1px 6px; color:var(--violet-ink); }

/* ---------------------------------------------------------------- pull quote (standalone) */
.pull { border-left:3px solid var(--gold); padding:6px 0 6px 22px; margin:30px 0; max-width:54ch; }
.pull .q { font-family:"Newsreader",serif; font-style:italic; font-size:22px; line-height:1.4; color:var(--ink); }
.pull .src { font:600 12px/1.4 "IBM Plex Mono",monospace; color:var(--ink-3); margin-top:9px;
  text-transform:uppercase; letter-spacing:.06em; }

/* ---------------------------------------------------------------- callouts */
.callout { border:1px solid var(--rule); border-left-width:4px; border-radius:6px;
  background:var(--card); padding:18px 20px; margin:26px 0; max-width:var(--measure); }
.callout .ct { font:600 12px/1 "IBM Plex Mono",monospace; letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:8px; display:flex; align-items:center; gap:9px; }
.callout p:last-child { margin-bottom:0; }
.callout p { max-width:none; }
.callout.note { border-left-color:var(--violet); background:var(--tint-violet); }
.callout.note .ct { color:var(--violet-ink); }
.callout.key  { border-left-color:var(--gold); background:var(--tint-gold); }
.callout.key .ct { color:var(--gold-2); }
.callout.risk { border-left-color:var(--down); background:var(--tint-down); }
.callout.risk .ct { color:var(--down); }
.callout.good { border-left-color:var(--up); background:var(--tint-up); }
.callout.good .ct { color:var(--up); }

/* ---------------------------------------------------------------- definition box */
.defbox { background:var(--card); border:1px solid var(--rule); border-radius:6px; padding:4px 22px;
  margin:24px 0; max-width:var(--measure); }
.defbox dl { margin:0; }
.defbox dt { font-family:"Newsreader",serif; font-weight:600; font-size:18px; color:var(--ink);
  padding-top:16px; border-top:1px solid var(--rule); }
.defbox dt:first-child { border-top:0; }
.defbox dd { margin:4px 0 16px; color:var(--ink-2); font-size:15.5px; }

/* ---------------------------------------------------------------- stat band */
.stats { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule); margin:14px 0; }
.stat { padding:22px 22px 22px 0; border-right:1px solid var(--rule); }
.stat:last-child { border-right:0; }
.stat .n { font-family:"Newsreader",serif; font-weight:600; font-size:30px; line-height:1; }
.stat .n.violet { color:var(--violet); } .stat .n.gold { color:var(--gold); }
.stat .n.down { color:var(--down); } .stat .n.up { color:var(--up); }
.stat .l { font-size:13.5px; color:var(--ink-2); margin-top:8px; line-height:1.4; }

/* ---------------------------------------------------------------- figures / diagrams */
.figure { background:var(--card); border:1px solid var(--rule); border-radius:6px;
  padding:26px 24px 18px; margin:30px 0; box-shadow:0 1px 0 rgba(22,32,42,.04), 0 20px 44px -30px rgba(22,32,42,.3); }
.figure .cap { font:500 11.5px/1 "IBM Plex Mono",monospace; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:12px; }
.figure .ct { font-family:"Newsreader",serif; font-size:20px; font-weight:600; margin-bottom:18px; line-height:1.25; }
.figure svg { display:block; width:100%; height:auto; }
.figure .note { font-size:13px; color:var(--ink-3); margin-top:14px; max-width:none; }
.figure.plain { box-shadow:none; }

/* ---------------------------------------------------------------- comparison table */
.tablewrap { overflow-x:auto; margin:26px 0; border:1px solid var(--rule); border-radius:6px; background:var(--card); }
table.ct { border-collapse:collapse; width:100%; font-size:14.5px; min-width:560px; }
table.ct caption { text-align:left; font:500 11.5px/1 "IBM Plex Mono",monospace; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); padding:14px 16px 12px; }
table.ct th, table.ct td { text-align:left; padding:11px 16px; border-bottom:1px solid var(--rule);
  vertical-align:top; }
table.ct thead th { font:600 12px/1.3 "IBM Plex Mono",monospace; letter-spacing:.04em; color:var(--violet-ink);
  background:var(--paper-2); text-transform:uppercase; border-bottom:2px solid var(--rule-2); }
table.ct tbody tr:last-child td { border-bottom:0; }
table.ct tbody th { font-weight:600; color:var(--ink); white-space:nowrap; }
table.ct .num { font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; }
table.ct tbody tr:hover td, table.ct tbody tr:hover th { background:#fbfaf6; }

/* ---------------------------------------------------------------- chapter cards (home) */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:18px 0; }
.card { display:block; background:var(--card); border:1px solid var(--rule); border-radius:8px;
  padding:22px 22px 24px; position:relative; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.card:hover { text-decoration:none; transform:translateY(-3px); border-color:var(--rule-2);
  box-shadow:0 22px 40px -28px rgba(22,32,42,.45); }
.card .cn { font:600 12px/1 "IBM Plex Mono",monospace; color:var(--gold); letter-spacing:.05em; }
.card h3 { font-family:"Newsreader",serif; font-weight:600; font-size:22px; margin:12px 0 8px; color:var(--ink);
  line-height:1.2; }
.card p { font-size:14.5px; color:var(--ink-2); margin:0; }
.card .arrow { margin-top:16px; font:600 13px/1 "IBM Plex Mono",monospace; color:var(--violet); }
.card:hover .arrow { color:var(--violet-2); }

/* ---------------------------------------------------------------- legend (for split bars etc.) */
.legend { display:grid; gap:10px; }
.legend .li { display:flex; align-items:center; gap:11px; font-size:14.5px; }
.legend .sw { width:13px; height:13px; border-radius:3px; flex:none; }
.legend .pc { margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--ink-2); }
.split { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; margin:24px 0; }
.splitbar { display:flex; height:46px; border-radius:4px; overflow:hidden; border:1px solid var(--rule-2); }
.splitbar > div { display:flex; align-items:center; justify-content:center;
  font:600 12px/1 "IBM Plex Mono",monospace; color:#fff; }

/* two-column generic */
.two { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin:24px 0; }
.two > * { min-width:0; }

/* prev / next chapter nav */
.pager { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:46px 0 6px; }
.pager a { background:var(--card); border:1px solid var(--rule); border-radius:6px; padding:16px 18px;
  display:block; transition:border-color .15s; }
.pager a:hover { text-decoration:none; border-color:var(--violet); }
.pager .dir { font:600 11px/1 "IBM Plex Mono",monospace; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); }
.pager .ti { font-family:"Newsreader",serif; font-weight:600; font-size:19px; color:var(--ink); margin-top:6px; }
.pager .next { text-align:right; }

/* glossary */
.glossary { margin:30px 0; }
.gl-letter { font-family:"Newsreader",serif; font-weight:600; font-size:15px; color:var(--gold);
  border-bottom:1px solid var(--rule); padding-bottom:6px; margin:30px 0 4px; }
.gl-item { padding:16px 0; border-bottom:1px solid var(--rule); scroll-margin-top:84px; }
.gl-item dt { font-family:"Newsreader",serif; font-weight:600; font-size:19px; color:var(--ink); }
.gl-item dt .en { font:500 12px/1 "IBM Plex Mono",monospace; color:var(--ink-3); margin-left:8px;
  text-transform:none; letter-spacing:0; }
.gl-item dd { margin:6px 0 0; color:var(--ink-2); max-width:var(--measure); font-size:15.5px; }
.gl-index { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 0; }
.gl-index a { font:600 13px/1 "IBM Plex Mono",monospace; color:var(--violet); background:var(--card);
  border:1px solid var(--rule); border-radius:5px; padding:7px 10px; min-width:34px; text-align:center; }
.gl-index a:hover { background:var(--violet); color:#fff; text-decoration:none; }

/* ---------------------------------------------------------------- steps (vertical numbered process) */
.steps { margin:26px 0; max-width:var(--measure); counter-reset:step; }
.steps .step { position:relative; padding:0 0 26px 64px; }
.steps .step::before { content:counter(step,decimal-leading-zero); counter-increment:step;
  position:absolute; left:0; top:0; width:42px; height:42px; border-radius:50%;
  background:var(--card); border:1.6px solid var(--violet); color:var(--violet);
  font:600 14px/42px "IBM Plex Mono",monospace; text-align:center; z-index:1; }
.steps .step::after { content:""; position:absolute; left:21px; top:42px; bottom:-2px; width:1.6px;
  background:var(--rule-2); }
.steps .step:last-child { padding-bottom:0; }
.steps .step:last-child::after { display:none; }
.steps .step.exec::before { border-color:var(--gold); color:var(--gold); }
.steps .step.post::before { background:var(--violet); border-color:var(--violet); color:#fff; }
.steps .step h4 { margin:7px 0 4px; font-family:"Hanken Grotesk",sans-serif; font-weight:600;
  font-size:17px; text-transform:none; letter-spacing:0; color:var(--ink); }
.steps .step p { margin:0; font-size:15px; color:var(--ink-2); max-width:54ch; }
.steps .step .tagline { font:600 10.5px/1 "IBM Plex Mono",monospace; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:2px; }
.phase-row { display:flex; gap:8px; align-items:center; margin:30px 0 16px; }
.phase-row .pl { font:600 11px/1 "IBM Plex Mono",monospace; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-2); } .phase-row .ln { flex:1; border-top:1px solid var(--rule); }

/* ---------------------------------------------------------------- timeline (T+ settlement) */
.timeline { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; margin:8px 0 4px;
  border-top:2px solid var(--rule-2); }
.timeline .tp { padding:16px 14px 0; border-right:1px solid var(--rule); position:relative; }
.timeline .tp:last-child { border-right:0; }
.timeline .tp::before { content:""; position:absolute; top:-7px; left:14px; width:12px; height:12px;
  border-radius:50%; background:var(--violet); border:2px solid var(--paper); }
.timeline .tp.t0::before { background:var(--gold); }
.timeline .tp .d { font:600 12px/1 "IBM Plex Mono",monospace; color:var(--violet-ink); }
.timeline .tp .h { font-family:"Newsreader",serif; font-weight:600; font-size:16px; margin:7px 0 4px; }
.timeline .tp .x { font-size:13px; color:var(--ink-2); }

/* ---------------------------------------------------------------- bars (leverage, generic compare) */
.barset { display:grid; gap:14px; margin:24px 0; max-width:var(--measure); }
.barset .b { display:grid; grid-template-columns:130px 1fr; gap:14px; align-items:center; }
.barset .b .lab { font-size:14px; color:var(--ink-2); text-align:right; }
.barset .b .track { background:var(--paper-2); border:1px solid var(--rule); border-radius:4px; height:34px;
  position:relative; overflow:hidden; }
.barset .b .fill { height:100%; display:flex; align-items:center; padding:0 12px;
  font:600 13px/1 "IBM Plex Mono",monospace; color:#fff; white-space:nowrap; }
.barset .b .fill.up { background:var(--up); } .barset .b .fill.down { background:var(--down); }
.barset .b .fill.violet { background:var(--violet); } .barset .b .fill.gold { background:var(--gold); color:#fff; }
.barset .b .fill.mut { background:var(--ink-3); }

/* ---------------------------------------------------------------- order book ladder */
.ladder { max-width:440px; margin:24px 0; border:1px solid var(--rule); border-radius:6px; overflow:hidden;
  background:var(--card); font-family:"IBM Plex Mono",monospace; }
.ladder .lr { display:grid; grid-template-columns:1fr 1fr 1fr; font-size:13px; }
.ladder .lr > div { padding:7px 12px; border-bottom:1px solid var(--rule); }
.ladder .lr.head > div { font-weight:600; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); background:var(--paper-2); }
.ladder .lr .px { text-align:center; font-weight:600; }
.ladder .ask .px { color:var(--down); } .ladder .bid .px { color:var(--up); }
.ladder .lr .qa { text-align:right; color:var(--ink-2); } .ladder .lr .qb { color:var(--ink-2); }
.ladder .spread { background:var(--tint-gold); }
.ladder .spread > div { grid-column:1/-1; text-align:center; color:var(--gold-2); font-weight:600;
  border-bottom:1px solid var(--rule); padding:8px; font-size:12px; }
.ladder .lr:last-child > div { border-bottom:0; }

/* ---------------------------------------------------------------- architecture stack */
.stack { max-width:var(--measure); margin:24px 0; display:grid; gap:8px; }
.stack .layer { background:var(--card); border:1px solid var(--rule); border-left:4px solid var(--violet);
  border-radius:5px; padding:14px 18px; }
.stack .layer.edge { border-left-color:var(--gold); }
.stack .layer.core { border-left-color:var(--violet); background:#fbfaf6; }
.stack .layer.data { border-left-color:var(--ink-3); }
.stack .layer .lh { font-weight:600; font-size:15.5px; color:var(--ink); display:flex; gap:10px; align-items:baseline; }
.stack .layer .lh .tag { font:600 10px/1 "IBM Plex Mono",monospace; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); }
.stack .layer .chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.stack .layer .chips span { font:500 12px/1.5 "IBM Plex Mono",monospace; color:var(--violet-ink);
  background:var(--tint-violet); border:1px solid #DBD5E7; border-radius:4px; padding:2px 8px; }
.stack .arrow-down { text-align:center; color:var(--rule-2); font-size:14px; line-height:.4; }

/* home hero */
.hero { padding:60px 0 26px; }
.hero-grid { display:grid; grid-template-columns:1.12fr .88fr; gap:48px; align-items:end; }
.hero h1 { font-family:"Newsreader",serif; font-weight:600; font-size:clamp(42px,6.6vw,78px);
  line-height:1.0; letter-spacing:-.022em; margin:.28em 0 .26em; }
.hero h1 em { font-style:italic; color:var(--violet); }
.hero .intro { font-size:16.5px; color:var(--ink-2); line-height:1.62; max-width:46ch; }
.hero .intro strong { color:var(--ink); font-weight:600; }

/* utility */
.mt0 { margin-top:0; } .center { text-align:center; }
hr.rule { border:0; border-top:1px solid var(--rule); margin:34px 0; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 880px) {
  .hero-grid { grid-template-columns:1fr; gap:26px; align-items:start; }
  .cards { grid-template-columns:1fr 1fr; }
  .stats { grid-template-columns:1fr 1fr; }
  .split, .two { grid-template-columns:1fr; }
  .toc ol { columns:1; }
  footer.site .cols { grid-template-columns:1fr 1fr; }
  .pager { grid-template-columns:1fr; }
}
@media (max-width: 620px) {
  body { font-size:16px; }
  .wrap, .mast .row { padding-left:20px; padding-right:20px; }
  .cards { grid-template-columns:1fr; }
  .stats { grid-template-columns:1fr; }
  footer.site .cols { grid-template-columns:1fr; }
  /* nav wraps; kein Scroll-Strip mehr — der würde das Kapitel-Panel abschneiden */
  .mast .row { flex-wrap:wrap; }
  .mast nav { gap:16px; font-size:14px; width:100%; }
  /* Kapitel-Panel: volle Breite unter dem Masthead (Anker ist .mast, sticky) */
  .navdrop { position:static; }
  .navdrop ul { left:16px; right:16px; transform:none; min-width:0; columns:1; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}

/* ---------------------------------------------------------------- long-and-short additions (inherited from fin: zeitgeist, badges) */
/* 2x2 framework card grid + verdict badges for the Podcast-Check */
.cards.four { grid-template-columns:repeat(2,1fr); }
@media (max-width: 620px) { .cards.four { grid-template-columns:1fr; } }
.badge.ok { color:var(--up); background:var(--tint-up); border-color:#cfe0d5; }
.badge.no { color:var(--down); background:var(--tint-down); border-color:#e6cdd1; }

/* Nachrechnen-Zeilen (Callout „Vertiefung“): beschriftete Formel + Link,
   der die Rechnung im Google-Rechner öffnet. */
.calc { margin:12px 0 4px; display:grid; gap:10px; }
.calc .row { font:500 13.5px/1.65 "IBM Plex Mono",monospace; color:var(--ink); }
.calc .lbl { display:block; font:600 10.5px/1 "IBM Plex Mono",monospace;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:3px; }
.calc .row a { white-space:nowrap; }

/* Analysen — Drei-Register-Block je Behauptung (Befund / Einordnung / Meinung).
   Aufbau: <div class="registers"><p><span class="reg">Befund</span> …</p> …</div>
   danach optional <p class="tool">Werkzeug: …</p> (Kapitelverweis). */
.registers { margin:12px 0 10px; border-left:3px solid var(--rule-2); padding:2px 0 2px 16px; }
.registers p { margin-bottom:10px; max-width:var(--measure); }
.registers p:last-child { margin-bottom:0; }
.registers .reg { display:inline-block; font:600 11px/1 "IBM Plex Mono",monospace;
  letter-spacing:.12em; text-transform:uppercase; color:var(--violet-ink); margin-right:7px; }
.registers p.meinung .reg { color:var(--ink-3); }
.tool { font:500 13px/1.7 "IBM Plex Mono",monospace; color:var(--ink-3); margin-bottom:30px; }
.claim-verdict { margin:10px 0 6px; }

/* Zeitgeist — der Einwand der Gegenwart, ernst genommen.
   Broadsheet-Zwischenruf: Doppellinien oben/unten statt Callout-Kastens.
   Aufbau: .zt (Kicker) → .zq (die Zeitgeist-These, Serif kursiv) → Antwort-Absätze. */
.zeitgeist { margin:36px 0; padding:20px 4px 18px;
  border-top:4px double var(--ink); border-bottom:4px double var(--ink);
  background:transparent; }
.zeitgeist .zt { font:600 12px/1 "IBM Plex Mono",monospace; letter-spacing:.14em;
  text-transform:uppercase; color:var(--down); margin-bottom:14px; }
.zeitgeist .zt .stand { color:var(--ink-3); letter-spacing:.08em; }
.zeitgeist .zq { font-family:"Newsreader",serif; font-style:italic; font-size:20px;
  line-height:1.45; color:var(--ink); margin:0 0 14px; max-width:56ch; }
.zeitgeist p { max-width:var(--measure); }
.zeitgeist p:last-child { margin-bottom:0; }

/* Editorial-Panels — generierte Infografiken (specs/panel-prompts/README.md).
   .panel-placeholder hält den Build grün, solange die Datei fehlt. */
.panel { margin:34px 0; }
.panel img { display:block; width:100%; border:1px solid var(--rule-2); }
.panel figcaption { margin-top:10px; font:500 13px/1.5 "IBM Plex Mono",monospace;
  color:var(--ink-3); }
.panel-placeholder .ph { display:flex; align-items:center; gap:12px; min-height:180px;
  padding:24px 26px; border:1px dashed var(--rule-2); background:var(--paper-2);
  font-family:"Newsreader",serif; font-style:italic; font-size:17px; color:var(--ink-2); }
.panel-placeholder .tag { font:600 11px/1 "IBM Plex Mono",monospace; font-style:normal;
  letter-spacing:.14em; text-transform:uppercase; color:var(--violet);
  border:1px solid var(--violet); border-radius:999px; padding:5px 10px; flex:none; }

/* Orderbuch-Diagramm (§ 1) — zwei Buchseiten, Spread in der Mitte */
.obook { display:grid; grid-template-columns:1fr 150px 1fr; gap:14px; align-items:stretch; }
.obook .side { border:1px solid var(--rule-2); border-radius:6px; overflow:hidden; background:var(--paper); }
.obook .side .hd { padding:9px 14px; font:600 11.5px/1 "IBM Plex Mono",monospace;
  letter-spacing:.12em; text-transform:uppercase; color:#fff; }
.obook .side.buy .hd { background:var(--up); }
.obook .side.sell .hd { background:var(--down); }
.obook .orow { display:flex; justify-content:space-between; gap:10px; padding:10px 14px;
  border-top:1px solid var(--rule); font-size:14px; }
.obook .orow .who { color:var(--ink-2); }
.obook .orow .px { font-family:"IBM Plex Mono",monospace; font-weight:600;
  font-variant-numeric:tabular-nums; }
.obook .orow.best { background:var(--paper-2); }
.obook .orow.best .px { color:var(--ink); }
.obook .mid { align-self:center; text-align:center; padding:12px 8px; }
.obook .mid .sp { font:600 12px/1 "IBM Plex Mono",monospace; letter-spacing:.1em;
  text-transform:uppercase; color:var(--violet-ink); }
.obook .mid .val { font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:20px;
  color:var(--violet); margin:8px 0; }
.obook .mid .arr { color:var(--ink-3); font-size:13px; }
@media (max-width:640px){ .obook { grid-template-columns:1fr; } .obook .mid { order:-1; } }

/* Handelszeiten-Diagramm (§ 1) — Balken auf 7–23-Uhr-Achse */
.hours { margin-top:6px; }
.hours .hrow { display:grid; grid-template-columns:130px 1fr; gap:12px; align-items:center;
  margin-bottom:10px; }
.hours .hlab { font-size:13.5px; font-weight:600; color:var(--ink-2); }
.hours .hlab .sub { display:block; font:500 11px/1.5 "IBM Plex Mono",monospace;
  color:var(--ink-3); font-weight:500; }
.hours .track { position:relative; height:26px; background:var(--paper-2); border-radius:4px;
  background-image:repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px calc(100%/16)); }
.hours .bar { position:absolute; top:4px; bottom:4px; border-radius:3px; background:var(--violet-2);
  display:flex; align-items:center; justify-content:center;
  font:600 10.5px/1 "IBM Plex Mono",monospace; color:#fff; letter-spacing:.05em; white-space:nowrap; }
.hours .bar.ref { background:var(--violet); }
.hours .axis { display:flex; justify-content:space-between; margin-top:4px; padding-left:142px;
  font:500 11px/1 "IBM Plex Mono",monospace; color:var(--ink-3); }
@media (max-width:640px){ .hours .hrow { grid-template-columns:86px 1fr; }
  .hours .axis { padding-left:98px; } }

/* Rollover-Diagramm (§ 5) — Zinslast-Balken über 10 Jahre */
.rollbars { display:flex; gap:6px; align-items:flex-end; height:190px; margin-top:10px; }
.rollbars .rb { flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  height:100%; text-align:center; }
.rollbars .rb .val { font:600 10.5px/1 "IBM Plex Mono",monospace; color:var(--ink-2);
  margin-bottom:4px; font-variant-numeric:tabular-nums; }
.rollbars .rb .col { background:var(--violet-2); border-radius:3px 3px 0 0; }
.rollbars .rb.y0 .col { background:var(--up); }
.rollbars .rb.done .col { background:var(--down); }
.rollbars .rb .yr { font:500 10.5px/1 "IBM Plex Mono",monospace; color:var(--ink-3);
  margin-top:6px; }
@media (max-width:560px){ .rollbars { gap:3px; } .rollbars .rb .val { font-size:9px; } }