/* ============================================================
   roadmap.css — Design-System „Papier & Bronze" für alle Roadmaps
   (Auftrag Roadmap-Redesign 19.08.2026). Erweiterung zu style.css,
   nicht Ersatz: Seitenrahmen, Navigation, .page/.rm-block usw. kommen
   weiter aus style.css; hier stehen Token, Papier-Panel, Legende,
   Kennzahlen-Leiste, TRL-Verknüpfung, Hover-Karte und Print-CSS.
   Prinzip: dunkler Seitenrahmen, helles Roadmap-Panel („Papier").
   ============================================================ */

:root {
  /* dunkler Rahmen — entspricht der bestehenden Seite */
  --rm-bg: #0a0e18; --rm-txt: #e8e6e0; --rm-txt2: #9aa3b5; --rm-txt3: #5c6579;
  --rm-gold: #d4af5f; --rm-gold-dim: #8a7340; --rm-line: #1e2940;
  /* Papier-Panel */
  --paper: #faf7f0; --paper-edge: #e6dfcf;
  --ink-p: #2b2822; --ink-p2: #6b6555; --ink-p3: #98917c;
  --bronze: #a67c2e; --bronze-dim: #8a6d2f;
  --grid-p: #e6dfcf; --axis-p: #c5bba1;
  --zone-p: rgba(43, 40, 34, .04); --today-txt: #f5f1e8;
  /* Wirkketten (papier-adaptiert) */
  --dep-enables: #a67c2e; --dep-requires: #0e7c86; --dep-slows: #b0483f;
  /* Konfidenz = Füllgrad */
  --conf-high: .75; --conf-mid: .45; --conf-low: .18;
}

/* ── Roadmap-Kopf: Kicker in Gold-Versalien, H1 46 px light ─────────── */
.rm .page-kicker { color: var(--rm-gold); letter-spacing: .28em; }
.rm h1 { font-size: 46px; font-weight: 300; letter-spacing: -.015em; line-height: 1.1; }
@media (max-width: 720px) { .rm h1 { font-size: 34px; } }

/* ── Panel ──────────────────────────────────────────────────────────── */
/* Die Seiten-Vignette würde das Papier an den Rändern abdunkeln (.page bildet einen Stapelkontext, z-index hilft nicht) — auf Panel-Seiten aus */
body:has(.rmp) .vignette { display: none; }
.rmp { margin-top: 1.5rem; background: var(--paper); border: 1px solid var(--paper-edge); border-radius: 6px; position: relative; z-index: 92;
  /* Aliase für SVGs aus der Design-Referenz (gleiche Namen wie dort); --ink wird im Panel zur Papier-Tinte */
  --zone: var(--zone-p); --grid: var(--grid-p); --axis: var(--axis-p); --ink3: var(--ink-p3); --ink: var(--ink-p); /* über Korn (90) und Vignette (91) der Seite: das Papier bleibt Papier */ }
.rmp-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rmp-svg { display: block; width: 100%; height: auto; min-width: 1000px; font-family: var(--font-sans, Inter, sans-serif); }
.rmp-svg text { font-family: inherit; }
/* Typografie im Panel (verbindlich) */
.rmp-svg .t-title { font-size: 16px; font-weight: 600; fill: var(--ink-p); }
.rmp-svg .t-desc  { font-size: 13px; fill: var(--ink-p2); }
.rmp-svg .t-meta  { font-size: 12px; fill: var(--bronze-dim); }
.rmp-svg .t-year  { font-size: 13px; fill: var(--ink-p3); }
.rmp-svg .t-zone  { font-size: 12px; letter-spacing: 3px; fill: var(--ink-p3); text-transform: uppercase; }
.rmp-svg .t-lane  { font-size: 12px; letter-spacing: 3px; fill: var(--bronze-dim); text-transform: uppercase; font-weight: 600; }
.rmp-svg .t-today { font-size: 11px; font-weight: 600; letter-spacing: 2.5px; fill: var(--today-txt); }
.rmp-svg .t-cand  { font-size: 13px; fill: var(--ink-p2); }
.rmp-svg .t-grund { font-size: 11.5px; fill: var(--ink-p3); }
.rmp-svg .t-deplabel { font-size: 11.5px; font-weight: 500; paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
/* Gitter, Achsen, Zonen */
.rmp-svg .grid  { stroke: var(--grid-p); stroke-width: 1; }
.rmp-svg .zone-edge { stroke: var(--axis-p); stroke-width: 1; stroke-dasharray: 2 4; }
.rmp-svg .axis  { stroke: var(--axis-p); stroke-width: 1.5; }
.rmp-svg .lane-edge { stroke: var(--grid-p); stroke-width: 1; }
.rmp-svg .zone-past { fill: var(--zone-p); }
.rmp-svg .today { stroke: var(--bronze); stroke-width: 1.2; stroke-dasharray: 5 5; }
.rmp-svg .today-tag { fill: var(--bronze); }
/* Einträge */
.rmp-svg .entry { cursor: pointer; }
.rmp-svg .stem { stroke: var(--bronze); stroke-width: 1; opacity: .8; }
.rmp-svg .dot { fill: var(--bronze); }
.rmp-svg .med { fill: #fff; stroke: var(--bronze); stroke-width: 1.5; }
.rmp-svg .med-fill { fill: var(--bronze); }
.rmp-svg .med-cand { fill: var(--paper); stroke: var(--ink-p3); stroke-width: 1.2; stroke-dasharray: 3 3; }
.rmp-svg .pic-past { color: var(--bronze); }
.rmp-svg .pic-future { color: var(--ink-p); }
.rmp-svg .pic-cand { color: var(--ink-p3); }
.rmp-svg .band { fill: url(#rmp-band); }
/* Hover-/Tap-Zustände: Wirkketten standardmäßig aus */
.rmp-svg .dep { fill: none; stroke-width: 1.8; opacity: 0; transition: opacity .18s ease; pointer-events: none; }
.rmp-svg .dep-ermoeglicht { stroke: var(--dep-enables); }
.rmp-svg .dep-erfordert { stroke: var(--dep-requires); stroke-dasharray: 7 5; }
.rmp-svg .dep-bremst { stroke: var(--dep-slows); stroke-dasharray: 2 5; }
.rmp-svg .dep-label { opacity: 0; transition: opacity .18s ease; pointer-events: none; }
.rmp-svg .dep-ermoeglicht + .dep-label { fill: var(--dep-enables); }
.rmp-svg .dep-erfordert + .dep-label { fill: var(--dep-requires); }
.rmp-svg .dep-bremst + .dep-label { fill: var(--dep-slows); }
.rmp-svg .dep.is-on, .rmp-svg .dep-label.is-on { opacity: 1; }
.rmp-svg.has-focus .entry { opacity: .32; transition: opacity .18s ease; }
.rmp-svg.has-focus .entry.is-on, .rmp-svg.has-focus .entry.is-linked { opacity: 1; }
.rmp-svg .entry.is-on .med { stroke-width: 2.4; }
.rmp-svg .entry.is-linked .med { stroke-width: 2; }
/* TRL-Verknüpfung: hervorgehobene Teiltechnologie */
.rmp-svg.has-teiltech .entry { opacity: .28; }
.rmp-svg.has-teiltech .entry.is-teiltech { opacity: 1; }
.rmp-svg .entry.is-teiltech .med { stroke: var(--rm-gold-dim); stroke-width: 2.4; }

/* Ebenen-Beschriftung als fixierte HTML-Schicht (mobil sichtbar) */
.rmp-lanes { position: sticky; left: 0; top: 0; width: 0; height: 0; overflow: visible; pointer-events: none; z-index: 2; }
.rmp-lanes span { position: absolute; left: 0; transform: translateY(-50%); padding: .2rem .55rem .2rem .8rem; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; color: var(--bronze-dim); background: rgba(250, 247, 240, .92); border-right: 1px solid var(--paper-edge); border-radius: 0 3px 3px 0; white-space: nowrap; display: none; }
@media (max-width: 767px) {
  .rmp-lanes span { display: block; }
  .rmp-svg .t-lane { display: none; }
  .rmp-svg { min-width: 1100px; }
  .rmp::after { content: "← wischen →"; position: absolute; right: .2rem; top: -1.25rem; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--rm-txt3); }
  .rmp-svg .t-lane-sub { display: none; }
}

/* Detail-Karte (Hover/Tap) — außerhalb des SVG, in Panel-Farben */
.rmp-card { position: absolute; z-index: 5; width: 22rem; max-width: calc(100% - 1.5rem); padding: .9rem 1rem 1rem; background: #fff; color: var(--ink-p); border: 1px solid var(--paper-edge); border-left: 3px solid var(--bronze); border-radius: 4px; box-shadow: 0 14px 40px rgba(43, 40, 34, .18); font-size: .85rem; line-height: 1.45; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease; }
.rmp-card.is-visible { opacity: 1; transform: none; }
.rmp-card.is-pinned { pointer-events: auto; }
.rmp-card .k { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-dim); margin: 0 0 .25rem; }
.rmp-card h4 { font-size: 1rem; font-weight: 600; margin: 0 0 .35rem; color: var(--ink-p); }
.rmp-card p { margin: 0; color: var(--ink-p2); max-width: none; }
.rmp-card .m { margin-top: .45rem; font-size: .78rem; color: var(--bronze-dim); }
.rmp-card ul { margin: .55rem 0 0; padding: 0; list-style: none; font-size: .78rem; }
.rmp-card li { padding-left: 1rem; position: relative; color: var(--ink-p2); }
.rmp-card li::before { content: ""; position: absolute; left: 0; top: .55em; width: .5rem; height: 2px; background: var(--dep-enables); }
.rmp-card li.erfordert::before { background: var(--dep-requires); }
.rmp-card li.bremst::before { background: var(--dep-slows); }
.rmp-card .q { margin-top: .5rem; font-size: .72rem; color: var(--ink-p3); }
.rmp-card .x { position: absolute; right: .4rem; top: .3rem; border: 0; background: none; color: var(--ink-p3); font-size: 1rem; cursor: pointer; line-height: 1; padding: .2rem .4rem; }
@media (max-width: 767px) {
  .rmp-card { position: fixed; left: .5rem !important; right: .5rem !important; bottom: .5rem !important; top: auto !important; width: auto; max-width: none; }
}

/* Legende direkt unter dem Panel (dunkler Bereich, Muster in Panel-Farben) */
.rmp-legend { display: flex; flex-wrap: wrap; gap: .6rem 2.2rem; margin-top: .9rem; font-size: .82rem; color: var(--rm-txt2); }
.rmp-legend span { display: inline-flex; align-items: center; gap: .55rem; }
.rmp-legend svg { flex: none; }
.rmp-legend .dep-hint { color: var(--rm-txt3); }

/* Kennzahlen-Leiste und TRL im dunklen Rahmen */
.rm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1rem 1.6rem; margin-top: 1.6rem; padding: 1.1rem 0; border-top: 1px solid var(--rm-line); border-bottom: 1px solid var(--rm-line); }
.rm-kpi b { display: block; font-size: 1.6rem; font-weight: 300; letter-spacing: -.01em; color: var(--rm-txt); line-height: 1.1; }
.rm-kpi span { display: block; margin-top: .25rem; font-size: .78rem; color: var(--rm-txt2); }
.rm-kpi small { display: block; font-size: .68rem; color: var(--rm-txt3); }
.rm-trl-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .45rem; max-width: 46rem; }
.rm-trl-item { display: grid; grid-template-columns: minmax(10rem, 1.3fr) minmax(8rem, 1fr) auto; gap: .6rem 1rem; align-items: center; padding: .45rem .6rem; border-radius: 3px; cursor: pointer; border: 1px solid transparent; }
.rm-trl-item:hover { background: rgba(232, 228, 216, .04); }
.rm-trl-item.is-active { border-color: rgba(212, 175, 95, .55); background: rgba(212, 175, 95, .07); }
.rm-trl-item .n { font-size: .9rem; color: var(--rm-txt); }
.rm-trl-item .bar { display: flex; gap: 2px; }
.rm-trl-item .bar i { width: 9%; height: 8px; background: rgba(232, 228, 216, .12); border-radius: 1px; }
.rm-trl-item .bar i.on { background: var(--rm-gold); }
.rm-trl-item .bar.mittel i.on { opacity: .72; }
.rm-trl-item .bar.niedrig i.on { opacity: .45; }
.rm-trl-item .v { font-size: .78rem; color: var(--rm-txt2); white-space: nowrap; }
.rm-trl-hint { font-size: .78rem; color: var(--rm-txt3); margin-top: .5rem; }

/* Bild-/Poster-Fassungen: gesperrt = unscharf (Teaser), nur Robotik frei */
.rmp-bild { display: block; border: 1px solid var(--paper-edge); border-radius: 6px; overflow: hidden; }
.rmp-bild img { display: block; width: 100%; height: auto; }
.rmp-bild.is-locked img { filter: blur(5px) saturate(.85); transform: scale(1.03); }

/* Entwurfs-Plakette (Gamechanger bis zur redaktionellen Freigabe) */
.rm-badge { display: inline-block; margin-top: .4rem; padding: 6px 12px; border: 1px solid var(--rm-gold); color: var(--rm-gold); font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; }
.rm-gc .rmp-svg { min-width: 1000px; }
.rm-gc .rmp-svg .t-cand { font-size: 13px; fill: var(--ink-p2); }

/* Marke/Impressum-Zeile nur im Druck und auf dem Poster */
.rm-print-brand { display: none; }

/* ── Print: dunkler Rahmen aus, Panel auf hellem Grund ─────────────── */
@media print {
  @page { size: A3 landscape; margin: 0; }
  html, body { background: #fff !important; color: #2b2822 !important; }
  body { padding: 12mm 12mm 10mm; }
  body::before, .grain, .vignette, .top, .site-footer, .rm-toc, .rm-poster, .rm-kauf-btns, .rmp-card, .rmp-lanes { display: none !important; }
  .page, .rm { max-width: none; padding: 0; }
  .rm .page-kicker { color: #8a6d2f; }
  .rm h1, .rm .lead, .rm h2, .rm p, .rm li, .rm td, .rm th { color: #2b2822; }
  .rm .lead, .rm p, .rm li { color: #3c3830; }
  .rmp { border-color: #c5bba1; break-inside: avoid; overflow: visible; margin-top: 8mm; }
  .rmp-scroll { overflow: visible; }
  .rmp-svg { min-width: 0; }
  .rmp-svg .dep { opacity: .3; }   /* im Druck: Wirkketten zurückhaltend sichtbar, Beschriftung nur in der Textfassung */
  .rmp-svg .dep-label { display: none; }
  .rmp-legend { color: #3c3830; }
  .rm-kpis { border-color: #e6dfcf; }
  .rm-kpi b { color: #2b2822; } .rm-kpi span { color: #6b6555; } .rm-kpi small { color: #98917c; }
  .rm-trl-item .n { color: #2b2822; } .rm-trl-item .v { color: #6b6555; }
  .rm-trl-item .bar i { background: #e6dfcf; } .rm-trl-item .bar i.on { background: #a67c2e; }
  .rm-block { break-inside: avoid; }
  .rm-print-brand { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: #6b6555; border-bottom: 1px solid #e6dfcf; padding-bottom: 6px; margin-bottom: 14px; }
  .rm-print-brand b { font-size: 20px; color: #2b2822; font-weight: 700; letter-spacing: -.01em; }
  .rm-print-brand b i { color: #a67c2e; font-style: normal; }
  /* Poster-Modus (?poster=1 bzw. body.poster): Kopf, Kennzahlen, Panel, Legende, TRL — Rest aus, eine Seite A1 hoch */
  body.poster .rm-block:not(#b2):not(#b4), body.poster .rm-poster, body.poster .method-nav, body.poster .rm-print-list, body.poster .rm-toc, body.poster .rm-trl-hint { display: none !important; }
  body.poster #b2 h2, body.poster #b4 h2 { font-size: 22px; margin-top: 14px; }
  body.poster #b2 > p.small { display: none; }
  body.poster .rm-trl-list { grid-template-columns: 1fr 1fr; gap: .3rem 2rem; max-width: none; }
  body.poster .rm-trl-item { padding: .25rem .4rem; }
  body.poster .rm-trl-beleg { display: none; }
  body.poster .rm-kpis { margin-top: 10px; padding: 10px 0; }
}
/* TRL-Beleg unter dem Listeneintrag (Bildschirm) */
.rm-trl-beleg { grid-column: 1 / -1; font-size: .78rem; color: var(--rm-txt3); line-height: 1.45; }

/* Poster-/Bildblock auf der Roadmap-Seite: Panel-Bild als Fensterausschnitt, über Korn/Vignette */
.rm .rm-poster-bild { position: relative; z-index: 92; }
.rm .rm-poster-bild img { aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }