/* PDAI landing pages — shared styles for landing pages and narratives.
   Visual system of Kepleriana 2026 and Kármán 2026: Oxford blue, gold, sandstone. */

:root {
  --oxford: #002147;
  --oxford-deep: #00152e;
  --oxford-soft: #2c4a6e;
  --ink: #1b2733;
  --muted: #5c5348;
  --gold: #c4a15a;
  --gold-deep: #8c6d2a;
  --gold-pale: #efe3c4;
  --sand: #f6f1e7;
  --sand-deep: #ece3d2;
  --paper: #fffdf8;
  --line: #e3d9c6;
  --line-strong: #cdbfa4;
  --serif: "Source Serif 4", "Palatino Linotype", Palatino, serif;
  --display: "Fraunces", "Source Serif 4", Palatino, serif;
  --sans: "Source Sans 3", "Avenir Next", "Segoe UI", sans-serif;
  --p-studium: #8c6d2a;
  --p-aachen: #002147;
  --p-pasadena: #3f7686;
  --p-beratung: #9a4f3c;
  --p-agard: #5f6b3a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.no-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(1200px 480px at 50% -180px, rgba(196, 161, 90, 0.16), transparent 60%),
    var(--sand);
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.55;
}
a { color: var(--oxford); text-underline-offset: 0.18em; }
a:hover { color: var(--gold-deep); }
img { max-width: 100%; }
.skip {
  position: absolute; left: 1rem; top: -4rem;
  background: var(--oxford); color: #fff; padding: 0.4rem 0.7rem;
}
.skip:focus { top: 0.6rem; z-index: 50; }

/* ---------------------------------------------------------------- mast */
.mast {
  background: var(--oxford-deep);
  color: #f4efe4;
  border-bottom: 3px solid var(--gold);
  position: relative;
  z-index: 20;
}
.mast-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0.85rem 1.5rem 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.brand {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  font-weight: 650;
}
.brand.brand-lg {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  letter-spacing: -0.01em;
  font-weight: 560;
  line-height: 1.1;
}
.brand a { color: #f4efe4; text-decoration: none; }
.brand span { color: var(--gold); }
.mast nav { font-family: var(--sans); font-size: 0.92rem; }
.mast nav a { color: #f4efe4; text-decoration: none; margin-left: 1.15rem; }
.mast nav a:hover, .mast nav a[aria-current="page"] { color: var(--gold); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }

/* ---------------------------------------------------------------- hero */
.hero { padding: 3.4rem 0 1.6rem; }
.kicker {
  margin: 0 0 0.7rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--gold-deep);
  font-weight: 650;
}
h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 560;
  font-size: clamp(2.8rem, 7vw, 5.6rem);
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--oxford);
}
h1 em { font-style: italic; font-weight: 460; color: var(--gold-deep); }
.lead {
  max-width: 44rem;
  margin: 1.35rem 0 0;
  font-size: 1.22rem;
  line-height: 1.45;
}
.byline { margin: 1.1rem 0 0; max-width: 44rem; color: var(--muted); font-size: 0.98rem; }
.credit {
  margin: 0.9rem 0 0;
  max-width: 44rem;
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--muted);
  border-left: 3px solid var(--gold);
  padding: 0.15rem 0 0.15rem 0.7rem;
}

/* ---------------------------------------------------------------- key figures */
.figures {
  display: grid;
  grid-template-columns: repeat(var(--cols, 6), 1fr);
  gap: 0;
  margin: 1.8rem 0 1.4rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.figures div { padding: 0.8rem 0.7rem 0.75rem; border-right: 1px solid var(--line); }
.figures div:last-child { border-right: 0; }
.figures .v {
  display: block;
  font-family: var(--display);
  font-size: 1.85rem;
  color: var(--oxford);
  line-height: 1.05;
  font-variant-numeric: lining-nums tabular-nums;
}
.figures .k { display: block; font-family: var(--sans); font-size: 0.82rem; color: var(--muted); margin-top: 0.2rem; }

/* ---------------------------------------------------------------- portal cards */
.portals {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 1rem;
  padding-bottom: 1rem;
}
.portal {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--oxford);
  border-radius: 2px;
  padding: 1.3rem 1.35rem 1.2rem;
  box-shadow: 0 10px 28px rgba(0, 21, 46, 0.05);
  display: flex;
  flex-direction: column;
}
.portal.lead-card { grid-row: span 3; }
.portal.wide { grid-column: span 2; }
.portal.method {
  grid-column: 1 / -1;
  border-top-color: var(--gold);
  background: linear-gradient(180deg, rgba(196, 161, 90, 0.1), transparent 4.5rem), var(--paper);
}
.portal.method h2 span { color: var(--gold-deep); font-style: italic; font-weight: 460; }
.method-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 2rem; }
.method-cols p { margin: 0 0 0.75rem; }
.portal .mark {
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--gold-deep);
  font-weight: 650;
  margin: 0 0 0.45rem;
}
.portal h2 {
  margin: 0 0 0.55rem;
  font-family: var(--display);
  font-weight: 560;
  font-size: 1.7rem;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--oxford);
}
.portal p { margin: 0 0 0.85rem; }
.portal .spark { margin: 0.1rem 0 0.9rem; }
.contents { list-style: none; margin: 0.2rem 0 1.1rem; padding: 0; border-top: 1px solid var(--line); }
.contents li { border-bottom: 1px solid var(--line); }
.contents a {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.55rem;
  text-decoration: none;
  padding: 0.4rem 0;
  color: var(--ink);
  font-size: 0.98rem;
}
.contents a:hover { color: var(--oxford); }
.contents .num { font-family: var(--sans); color: var(--gold-deep); font-size: 0.8rem; padding-top: 0.2rem; }
.go {
  margin-top: auto;
  align-self: flex-start;
  display: inline-block;
  background: var(--oxford);
  color: #f7f1e4;
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 650;
  font-size: 0.95rem;
  padding: 0.6rem 0.95rem;
  border-radius: 2px;
}
.go:hover { background: #01315f; color: #fff; }
.go.quiet { background: transparent; color: var(--oxford); border: 1px solid var(--oxford); margin-left: 0.45rem; }
.go.quiet:hover { background: var(--oxford); color: #fff; }
.go-row { margin-top: auto; }

section.band { padding: 1.8rem 0 0.6rem; }
section.band > h2, .band-title {
  margin: 0 0 0.85rem;
  font-family: var(--display);
  font-weight: 560;
  font-size: 1.7rem;
  color: var(--oxford);
  letter-spacing: -0.02em;
}
.section-lead { margin: -0.35rem 0 1rem; color: var(--muted); max-width: 46rem; }

/* facsimile strip */
.facsimiles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.8rem;
}
.facsimile {
  display: block;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 0.45rem 0.45rem 0.6rem;
}
.facsimile:hover { border-color: var(--oxford); }
.facsimile img { display: block; width: 100%; aspect-ratio: 5 / 7; object-fit: cover; object-position: top; background: #eee; }
.facsimile .d { display: block; font-family: var(--sans); font-size: 0.76rem; color: var(--gold-deep); margin-top: 0.45rem; font-weight: 650; }
.facsimile .c { display: block; font-family: var(--sans); font-size: 0.8rem; line-height: 1.3; margin-top: 0.15rem; }

/* sources */
.sources { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1rem; padding-bottom: 2.5rem; }
.source-item { background: var(--paper); border: 1px solid var(--line); padding: 1rem 1.15rem; }
.source-item h3 { margin: 0 0 0.3rem; font-family: var(--display); font-weight: 560; font-size: 1.25rem; color: var(--oxford); }
.source-item p { margin: 0 0 0.35rem; font-size: 0.96rem; }
.source-item .meta { font-family: var(--sans); font-size: 0.84rem; color: var(--muted); }
.admission { margin: 0; padding-left: 1.2rem; font-size: 0.96rem; }
.admission li { margin-bottom: 0.3rem; }

footer {
  background: var(--oxford-deep);
  color: #d9d0c2;
  padding: 1.6rem 0 1.8rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  margin-top: 2rem;
}
footer .wrap { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
footer a { color: var(--gold); }
footer p { margin: 0.15rem 0; }

/* ---------------------------------------------------------------- narrative */
.story-hero { padding: 3rem 0 1.2rem; }
.story-hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); }
.home-back { margin: 1.15rem 0 0; }
.home-back a {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: #f4ead0;
  background: var(--oxford, #002147);
  text-decoration: none;
  padding: 0.38rem 0.85rem;
  border-radius: 999px;
}
.home-back a:hover { color: var(--gold, #c8a22a); }
.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin: 1.4rem 0 0.5rem;
  padding: 0;
  list-style: none;
  font-family: var(--sans);
  font-size: 0.88rem;
}
.toc a {
  display: inline-block;
  text-decoration: none;
  color: var(--oxford);
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 0.25rem 0.6rem;
  border-radius: 2px;
}
.toc a:hover { border-color: var(--oxford); }
.toc .n { color: var(--gold-deep); margin-right: 0.35rem; font-weight: 650; }

.chapter {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 2.4rem;
  padding: 3.2rem 0 1rem;
  border-top: 1px solid var(--line);
}
.chapter.no-figure { grid-template-columns: minmax(0, 46rem); }
.chapter-text { min-width: 0; }
.chapter-num { font-family: var(--sans); font-size: 0.8rem; color: var(--gold-deep); font-weight: 650; margin: 0 0 0.35rem; letter-spacing: 0.04em; }
.chapter h2 {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-weight: 560;
  font-size: 2.05rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--oxford);
}
.chapter h3 { font-family: var(--display); font-weight: 560; font-size: 1.25rem; color: var(--oxford); margin: 1.4rem 0 0.5rem; }
.step {
  margin: 0 0 2.4rem;
  padding: 0.2rem 0 0.2rem 1rem;
  border-left: 2px solid transparent;
  transition: border-color 200ms ease, opacity 200ms ease;
  opacity: 0.55;
}
.step:first-of-type { opacity: 1; }
.step.active { border-left-color: var(--gold); opacity: 1; }
.step p { margin: 0 0 0.85rem; }
.step:last-child { margin-bottom: 30vh; }
.chapter.no-figure .step, .chapter.no-figure .step:last-child { opacity: 1; margin-bottom: 1.4rem; }
.chapter-figure { min-width: 0; }
.chapter-figure .sticky {
  position: sticky;
  top: 1.2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 1rem 1rem 0.8rem;
  box-shadow: 0 10px 28px rgba(0, 21, 46, 0.05);
}
.fig { width: 100%; min-height: 320px; }
.fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.fig-title { font-family: var(--sans); font-weight: 650; font-size: 0.92rem; color: var(--oxford); margin: 0 0 0.4rem; }
.fig-note { font-family: var(--sans); font-size: 0.8rem; color: var(--muted); margin: 0.55rem 0 0; line-height: 1.35; }
.fig-legend { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; font-family: var(--sans); font-size: 0.78rem; color: var(--muted); margin: 0.4rem 0 0; }
.fig-legend i { display: inline-block; width: 0.75rem; height: 0.75rem; margin-right: 0.3rem; vertical-align: -0.1rem; border-radius: 1px; }

.locus { font-family: var(--sans); font-size: 0.78rem; color: var(--muted); }
.locus a { color: var(--muted); }
.locus a:hover { color: var(--gold-deep); }
.aside {
  font-family: var(--sans);
  font-size: 0.9rem;
  background: var(--gold-pale);
  border-left: 3px solid var(--gold);
  padding: 0.6rem 0.8rem;
  margin: 0.4rem 0 1rem;
}
.aside p { margin: 0 0 0.4rem; }
.aside p:last-child { margin: 0; }
.quote-card { display: grid; grid-template-columns: 7rem 1fr; gap: 0.9rem; align-items: start; margin: 0.6rem 0 1.1rem; }
.quote-card img { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: #fff; }
.quote-card figcaption { font-family: var(--sans); font-size: 0.84rem; color: var(--muted); }
.quote-card figcaption a { font-weight: 650; }

/* manuscript cards (full width band after a chapter) */
.ms-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; padding: 0.6rem 0 2rem; }
.ms-card { background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.ms-card:hover { border-color: var(--oxford); }
.ms-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; border-bottom: 1px solid var(--line); }
.ms-card .b { padding: 0.65rem 0.75rem 0.75rem; }
.ms-card .y { font-family: var(--sans); font-size: 0.78rem; color: var(--gold-deep); font-weight: 650; }
.ms-card h4 { font-family: var(--display); font-weight: 560; font-size: 1.05rem; margin: 0.15rem 0 0.3rem; color: var(--oxford); line-height: 1.2; }
.ms-card p { font-family: var(--sans); font-size: 0.82rem; margin: 0; color: var(--muted); line-height: 1.35; }

/* tooltip */
.tip {
  position: fixed;
  pointer-events: none;
  z-index: 60;
  background: var(--oxford-deep);
  color: #f4efe4;
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.35;
  padding: 0.45rem 0.6rem;
  border-radius: 2px;
  max-width: 22rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 120ms ease;
}
.tip b { color: var(--gold); font-weight: 650; }

/* chart text */
.axis text { font-family: var(--sans); font-size: 11px; fill: var(--muted); }
.lbl { font-family: var(--sans); font-size: 11px; }
.lbl:not([fill]) { fill: var(--muted); }
.axis path, .axis line { stroke: #cdbfa4; }
.lbl-strong { font-family: var(--sans); font-size: 11.5px; font-weight: 650; }
.lbl-strong:not([fill]) { fill: var(--oxford); }
.lbl-serif { font-family: var(--serif); font-size: 12px; }
.lbl-serif:not([fill]) { fill: var(--ink); }

/* ---------------------------------------------------------------- periods page */
.period-band {
  position: sticky;
  top: 0;
  z-index: 15;
  background: rgba(246, 241, 231, 0.96);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--line);
  padding: 0.55rem 0 0.5rem;
}
.period-band .wrap { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; }
.period-band .lbl-head { font-family: var(--sans); font-size: 0.8rem; color: var(--muted); font-weight: 650; }
.period-band svg { display: block; width: 100%; height: 46px; }
.period-band .seg { cursor: pointer; }
.period-band .seg text { font-family: var(--sans); font-size: 11.5px; fill: #fff; font-weight: 650; pointer-events: none; }
.period-band .seg .yr { font-weight: 400; fill: rgba(255, 255, 255, 0.85); }
.period-band .seg.dim rect { opacity: 0.3; }
.prov {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--gold-deep);
  border: 1px solid var(--gold);
  border-radius: 2px;
  padding: 0 0.3rem;
  margin-left: 0.4rem;
  vertical-align: 0.1rem;
}
.period-section { padding: 2.8rem 0 1rem; border-top: 1px solid var(--line); scroll-margin-top: 64px; transition: opacity 200ms ease; }
.period-section .head { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.period-section h2 { font-family: var(--display); font-weight: 560; font-size: 2.1rem; color: var(--oxford); margin: 0; letter-spacing: -0.02em; }
.period-section .years { font-family: var(--sans); font-size: 1rem; color: var(--gold-deep); font-weight: 650; }
.period-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 2.2rem; margin-top: 1rem; }
.period-text p { margin: 0 0 0.85rem; }
.period-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; align-content: start; }
.panel { background: var(--paper); border: 1px solid var(--line); padding: 0.7rem 0.8rem 0.6rem; min-width: 0; }
.panel.wide { grid-column: 1 / -1; }
.panel h4 { font-family: var(--sans); font-size: 0.8rem; font-weight: 650; color: var(--oxford); margin: 0 0 0.35rem; }
.panel .note { font-family: var(--sans); font-size: 0.76rem; color: var(--muted); margin: 0.35rem 0 0; }
.evidence { list-style: none; margin: 0; padding: 0; font-family: var(--sans); font-size: 0.82rem; }
.evidence li { border-top: 1px solid var(--line); padding: 0.35rem 0; }
.evidence li:first-child { border-top: 0; }
.evidence .d { color: var(--gold-deep); font-weight: 650; margin-right: 0.35rem; }
.evidence .t { color: var(--muted); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.check-table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 0.86rem; margin: 0.6rem 0 0; }
.check-table th, .check-table td { text-align: left; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.check-table th { color: var(--muted); font-weight: 650; }
.check-table .ok { color: var(--p-agard); font-weight: 650; }
.check-table .off { color: var(--p-beratung); font-weight: 650; }
.full-figure { background: var(--paper); border: 1px solid var(--line); padding: 1rem 1rem 0.8rem; margin: 0.8rem 0 1.6rem; box-shadow: 0 10px 28px rgba(0, 21, 46, 0.05); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1020px) {
  .portals { grid-template-columns: 1fr 1fr; }
  .portal.lead-card { grid-row: auto; grid-column: 1 / -1; }
  .portal.wide { grid-column: 1 / -1; }
  .figures { grid-template-columns: repeat(3, 1fr); }
  .figures div:nth-child(3) { border-right: 0; }
  .facsimiles { grid-template-columns: repeat(3, 1fr); }
  .ms-cards { grid-template-columns: repeat(2, 1fr); }
  .chapter, .period-grid { grid-template-columns: 1fr; }
  .chapter-figure { order: -1; }
  .chapter-figure .sticky { position: relative; top: 0; }
  .step { opacity: 1; }
  .step:last-child { margin-bottom: 1rem; }
}
@media (max-width: 680px) {
  .mast-inner { flex-direction: column; align-items: flex-start; }
  .mast nav a { margin-left: 0; margin-right: 0.9rem; }
  .portals, .method-cols, .sources, .period-panels { grid-template-columns: 1fr; }
  .figures { grid-template-columns: repeat(2, 1fr); }
  .figures div:nth-child(3) { border-right: 1px solid var(--line); }
  .figures div:nth-child(2n) { border-right: 0; }
  .facsimiles { grid-template-columns: repeat(2, 1fr); }
  .ms-cards { grid-template-columns: 1fr; }
  .go.quiet { margin-left: 0; margin-top: 0.45rem; }
  .hero { padding-top: 2.2rem; }
  .period-band .wrap { grid-template-columns: 1fr; gap: 0.2rem; }
  .quote-card { grid-template-columns: 5rem 1fr; }
  .chapter-figure .fig, .full-figure .fig { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .chapter-figure .fig svg, .full-figure .fig svg { min-width: 600px; }
  .chapter-figure .sticky, .full-figure { padding: 0.7rem 0.6rem 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .step { transition: none; }
}

/* ---------------------------------------------------------------- additions for the PDAI landing family */
.figures .k small { display: block; color: var(--gold-deep); font-size: 0.72rem; margin-top: 0.1rem; }
.status {
  display: inline-block; font-family: var(--sans); font-size: 0.72rem; font-weight: 650; letter-spacing: 0.03em;
  border: 1px solid var(--line-strong); border-radius: 2px; padding: 0 0.35rem; color: var(--muted); vertical-align: 0.08rem;
}
.status.ok { border-color: #5f6b3a; color: #5f6b3a; }
.status.part { border-color: var(--gold-deep); color: var(--gold-deep); }
.status.gap { border-color: #9a4f3c; color: #9a4f3c; }
.doc-table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 0.88rem; margin: 0.4rem 0 1rem; }
.doc-table th, .doc-table td { text-align: left; padding: 0.4rem 0.55rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc-table th { color: var(--muted); font-weight: 650; font-size: 0.8rem; }
.doc-table td.n, .doc-table th.n { text-align: right; font-variant-numeric: tabular-nums; }
.doc-table a { font-weight: 650; }
.note-box { font-family: var(--sans); font-size: 0.9rem; background: var(--gold-pale); border-left: 3px solid var(--gold); padding: 0.6rem 0.8rem; margin: 0.6rem 0 1rem; }
.note-box p { margin: 0 0 0.4rem; } .note-box p:last-child { margin: 0; }
.specimen { background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--gold); padding: 0.7rem 0.95rem; margin: 0.6rem 0 1.1rem; font-size: 0.98rem; }
.specimen .src { font-family: var(--sans); font-size: 0.8rem; color: var(--muted); margin: 0.4rem 0 0; }
.specimen .tl { font-family: "Source Serif 4", serif; font-style: italic; margin: 0 0 0.3rem; }
.fig-img { margin: 0.6rem 0 1.1rem; background: var(--paper); border: 1px solid var(--line); padding: 0.6rem; }
.fig-img img { display: block; width: 100%; height: auto; }
.fig-img figcaption { font-family: var(--sans); font-size: 0.82rem; color: var(--muted); margin-top: 0.5rem; }
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.9rem; padding: 0.4rem 0 1.2rem; }
.shots .fig-img { margin: 0; }
.mast nav a.sib { opacity: 0.85; }
.sibs { font-family: var(--sans); font-size: 0.86rem; margin-top: 0.7rem !important; }
.sibs a { margin-right: 0.85rem; }
.sib-row { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; }

/* arXiv family */
.filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0 1.2rem; font-family: var(--sans); }
.chip { border: 1px solid var(--line-strong); background: var(--paper); color: var(--oxford); font: inherit; font-size: 0.86rem; padding: 0.3rem 0.7rem; border-radius: 2px; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--oxford); color: #f7f1e4; border-color: var(--oxford); }
.chip .c { color: var(--gold-deep); margin-left: 0.3rem; }
.chip[aria-pressed="true"] .c { color: var(--gold); }
.papers { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: 1rem; padding-bottom: 2rem; }
.paper { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--oxford); display: grid; grid-template-columns: 6.4rem 1fr; gap: 0.9rem; padding: 0.9rem 1rem 0.9rem 0.9rem; box-shadow: 0 10px 28px rgba(0, 21, 46, 0.05); }
.paper[hidden] { display: none; }
.paper .cover { display: block; }
.paper .cover img { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: #fff; aspect-ratio: 1 / 1.414; object-fit: cover; object-position: top; }
.paper .cover .ph { aspect-ratio: 1 / 1.414; border: 1px dashed var(--line-strong); font-family: var(--sans); font-size: 0.7rem; color: var(--muted); display: flex; align-items: center; justify-content: center; text-align: center; padding: 0.3rem; }
.paper .theme { font-family: var(--sans); font-size: 0.74rem; color: var(--gold-deep); font-weight: 650; letter-spacing: 0.04em; margin: 0 0 0.2rem; }
.paper h3 { margin: 0 0 0.25rem; font-family: var(--display); font-weight: 560; font-size: 1.12rem; line-height: 1.2; color: var(--oxford); }
.paper .sub { font-family: var(--sans); font-size: 0.84rem; color: var(--muted); margin: 0 0 0.4rem; line-height: 1.3; }
.paper .abs { font-size: 0.9rem; line-height: 1.42; margin: 0 0 0.6rem; }
.paper .meta { font-family: var(--sans); font-size: 0.78rem; color: var(--muted); margin: 0 0 0.5rem; }
.paper .links { font-family: var(--sans); font-size: 0.86rem; display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: auto; }
.paper .links a { font-weight: 650; }
.paper .body { display: flex; flex-direction: column; min-width: 0; }
.stage { font-family: var(--sans); font-size: 0.7rem; font-weight: 650; border: 1px solid var(--gold); color: var(--gold-deep); padding: 0 0.3rem; border-radius: 2px; margin-left: 0.4rem; vertical-align: 0.1rem; }
@media (max-width: 680px) { .paper { grid-template-columns: 4.6rem 1fr; } }

/* ── Specimen: one real catalogue entry beside its facsimile (generated by a collector) ── */
.specimen { display: grid; grid-template-columns: minmax(180px, 300px) 1fr; gap: 1.4rem; align-items: start; margin: 0.6rem 0 1rem; }
.specimen .sp-img img { display: block; width: 100%; border: 1px solid var(--line-strong); background: #eee; }
.specimen .sp-cap { margin: 0 0 0.5rem; font-family: var(--sans); font-size: 0.82rem; color: var(--gold-deep); font-weight: 650; }
.specimen dl { margin: 0; background: var(--paper); border: 1px solid var(--line); padding: 0.4rem 1rem; }
.specimen .sp-row { display: grid; grid-template-columns: 7.2rem 1fr; gap: 0.8rem; padding: 0.42rem 0; border-bottom: 1px solid var(--line); }
.specimen .sp-row:last-child { border-bottom: 0; }
.specimen dt { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--oxford); font-weight: 650; padding-top: 0.2rem; }
.specimen dd { margin: 0; font-size: 0.96rem; line-height: 1.45; }
.specimen dd .sc { font-variant: small-caps; letter-spacing: 0.02em; }
.specimen .sp-note { margin: 0.6rem 0 0; font-family: var(--sans); font-size: 0.8rem; color: var(--muted); }
@media (max-width: 760px) { .specimen { grid-template-columns: 1fr; } .specimen .sp-row { grid-template-columns: 1fr; gap: 0.1rem; } }

/* ---------------------------------------------------------------- reading guide: "Read first" */
.guide-hint {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.1rem;
  margin: 1.6rem 0 0; padding: 0.9rem 1.2rem;
  background: var(--gold-pale); border: 1px solid var(--gold); border-left: 6px solid var(--gold-deep);
}
.guide-hint-text { margin: 0; font-size: 1.02rem; }
.guide-hint-actions { margin: 0; display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.guide-sticker {
  display: inline-block; flex: none;
  font-family: var(--display); font-weight: 560; font-size: 0.95rem; line-height: 1.05; letter-spacing: 0.02em;
  color: var(--paper); background: var(--oxford); border: 2px solid var(--gold);
  padding: 0.45rem 0.7rem; text-align: center; transform: rotate(-6deg);
  box-shadow: 2px 3px 0 rgba(0, 33, 71, 0.22);
}
.guide-toggle {
  font: inherit; font-family: var(--sans); font-size: 0.86rem; color: var(--oxford);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 0.18em;
}
.guide-toggle:hover { color: var(--gold-deep); }
.portal.guide-card { grid-column: 1 / -1; position: relative; border-color: var(--gold); border-top-color: var(--gold); }
.portal.guide-card .guide-sticker { position: absolute; top: -0.9rem; right: 1rem; }
.guide-restore { display: none; margin-left: 0.9rem; }
.guide-off .guide-hint, .guide-off .portal.guide-card .guide-sticker { display: none; }
.guide-off .guide-restore { display: inline; }
@media (max-width: 680px) {
  .guide-hint { grid-template-columns: 1fr; }
  .guide-sticker { justify-self: start; }
}

/* the shared question form of every landing: one input, one action, opens the viewer's Anfrage column */
.ask { margin: 1.4rem 0 0.4rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--paper, #fbf8f1) 92%, #c8a22a 8%); }
.ask label { display: block; font-family: var(--sans, "Source Sans 3", sans-serif); font-weight: 650; color: var(--oxford, #002147); margin-bottom: 0.45rem; }
.ask-row { display: flex; gap: 0.5rem; }
.ask-row input[type=text] { flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: 0.55rem 0.7rem; border: 1px solid var(--line-strong, #b9b2a2); border-radius: 7px; background: #fff; }
.ask-row input[type=text]:focus { outline: none; border-color: #c8a22a; box-shadow: 0 0 0 3px rgba(200, 162, 42, 0.25); }
.ask-row button { font: inherit; font-weight: 650; padding: 0.55rem 1rem; border: 0; border-radius: 7px; background: var(--oxford, #002147); color: #fff; cursor: pointer; }
.ask-row button:hover { background: #c8a22a; color: #002147; }
.ask-hint { margin: 0.5rem 0 0; font-size: 0.86rem; color: var(--muted, #5c5c5c); }
@media (max-width: 600px) { .ask-row { flex-direction: column; } }

/* ---------------------------------------------------------------- guides: the tour and the guide cards
   The tour band runs across the full width (box-shadow + clip-path: no horizontal overflow). guide-player.js builds
   the player inside .gp; the cards show the text of the active guide language (html[data-guide-lang]). */
.guide-band {
  position: relative; margin: 1.2rem 0 2.2rem; padding: 3rem 0 2.6rem; color: #f4efe4;
  background: radial-gradient(900px 420px at 78% 0%, rgba(196, 161, 90, 0.24), transparent 65%), linear-gradient(180deg, #00152e, #002147 70%, #00152e);
  box-shadow: 0 0 0 100vmax #00152e; clip-path: inset(0 -100vmax);
}
.guide-head { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 2rem; align-items: end; margin-bottom: 1.6rem; }
.guide-head .kicker { color: var(--gold); margin: 0; }
.guide-head h2 { grid-column: 1; margin: 0; font-family: var(--display); font-weight: 460; font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.04; letter-spacing: -0.025em; color: #fffdf8; }
.guide-head .lead { grid-column: 1; margin: 0.5rem 0 0; max-width: 46rem; color: #d9d2c2; font-size: 1.08rem; }
.guide-lang { grid-column: 2; grid-row: 1 / span 3; align-self: end; display: inline-flex; border: 1px solid rgba(196, 161, 90, 0.7); border-radius: 999px; overflow: hidden; }
.guide-lang button { font: 650 0.85rem/1 var(--sans); letter-spacing: 0.06em; padding: 0.5rem 0.95rem; border: 0; background: transparent; color: #e9e1cf; cursor: pointer; }
.guide-lang button[aria-pressed="true"] { background: var(--gold); color: #00152e; }
.guide-lang button:focus-visible { outline: 2px solid #fffdf8; outline-offset: -3px; }
.guide-light .guide-lang { border-color: var(--gold-deep); }
.guide-light .guide-lang button { color: var(--oxford); }

/* the player; the tour is never taller than the window (stage 16:10 + bar + controls) */
.gp { position: relative; outline: none; }
.gp-tour { max-width: min(100%, calc((100vh - 12rem) * 1.6)); margin: 0 auto; }
.gp-window {
  position: relative; border-radius: 12px; overflow: hidden; background: #0b1b30;
  border: 1px solid rgba(196, 161, 90, 0.55);
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.3), 0 0 80px -20px rgba(196, 161, 90, 0.35);
  transition: transform 0.7s cubic-bezier(.2, .8, .2, 1), box-shadow 0.7s;
}
.gp-bar { display: flex; align-items: center; gap: 0.9rem; height: 34px; padding: 0 0.9rem; background: linear-gradient(#22324a, #1a283d); border-bottom: 1px solid #0d1a2c; transition: height 0.6s cubic-bezier(.2, .8, .2, 1), opacity 0.4s; }
.gp-dots { width: 44px; height: 10px; flex: none; background: radial-gradient(circle at 5px 5px, #e0605a 4px, transparent 4.5px), radial-gradient(circle at 22px 5px, #e5b44a 4px, transparent 4.5px), radial-gradient(circle at 39px 5px, #5fb35a 4px, transparent 4.5px); }
.gp-url { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 0.78rem/1.9 ui-monospace, Menlo, monospace; color: #c9d3e0; background: #0f1d30; border-radius: 6px; padding: 0 0.7rem; }
.gp-window.gp-full { transform: scale(1.025); box-shadow: 0 60px 120px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(196, 161, 90, 0.9), 0 0 120px -10px rgba(196, 161, 90, 0.45); }
.gp-window.gp-full .gp-bar { height: 0; opacity: 0; border: 0; }
.gp-stage { position: relative; aspect-ratio: 1280 / 800; overflow: hidden; background: #1a2333; }
.gp-cam { position: absolute; inset: 0; transform-origin: 0 0; transition: transform 1.1s cubic-bezier(.25, .8, .25, 1); }
.gp-cam.gp-now, .gp-cam.gp-now * { transition: none !important; }
.gp-f { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.45s ease; }
.gp-f.on { opacity: 1; }
.gp-spot {
  position: absolute; border-radius: 8px; opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 2px var(--gold), 0 0 26px 4px rgba(196, 161, 90, 0.55), 0 0 0 200vmax rgba(0, 16, 36, 0.42);
  transition: left 0.7s cubic-bezier(.25, .8, .25, 1), top 0.7s cubic-bezier(.25, .8, .25, 1), width 0.7s cubic-bezier(.25, .8, .25, 1), height 0.7s cubic-bezier(.25, .8, .25, 1), opacity 0.5s;
}
.gp-spot.on { opacity: 1; }
.gp-cursor { position: absolute; left: 62%; top: 55%; width: 26px; height: 26px; margin: -3px 0 0 -4px; opacity: 0; pointer-events: none; z-index: 3;
  transform: scale(var(--cz, 1)); transform-origin: 4px 3px; transition: opacity 0.3s; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45)); }
.gp-cursor.on { opacity: 1; }
.gp-cursor svg { width: 100%; height: 100%; display: block; transition: transform 0.1s; transform-origin: 4px 3px; }
.gp-cursor.down svg { transform: scale(0.82); }
.gp-ripple { position: absolute; width: 0; height: 0; z-index: 2; pointer-events: none; }
.gp-ripple::after { content: ""; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--gold); background: rgba(196, 161, 90, 0.25); animation: gp-ripple 0.65s ease-out forwards; }
@keyframes gp-ripple { from { transform: scale(0.2); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.gp-keys { position: absolute; left: 50%; top: 6%; transform: translateX(-50%); display: flex; gap: 0.4rem; z-index: 4; pointer-events: none; }
.gp-key, .gk {
  display: inline-block; min-width: 2.1em; padding: 0.38em 0.6em 0.32em; text-align: center; white-space: nowrap;
  font: 700 0.95rem/1 var(--sans); color: #00152e; background: linear-gradient(#fffdf8, #efe7d6);
  border: 1px solid #cdbfa4; border-bottom: 4px solid var(--gold-deep); border-radius: 7px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}
.gp-key { animation: gp-key 0.42s cubic-bezier(.3, 1.6, .5, 1) both; font-size: clamp(0.8rem, 1.6vw, 1.15rem); }
@keyframes gp-key { from { transform: translateY(-14px) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.gp-cap {
  position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); width: min(88%, 52rem); z-index: 4;
  padding: 0.7rem 1.1rem 0.75rem; border-left: 5px solid var(--gold); border-radius: 4px;
  background: rgba(0, 21, 46, 0.9); color: #fffdf8; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
  font: 560 clamp(0.82rem, 1.65vw, 1.12rem)/1.35 var(--sans); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.gp-cap:empty { display: none; }
.gp-cap.in { animation: gp-cap 0.5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes gp-cap { from { transform: translate(-50%, 10px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.gp-nocc .gp-cap { display: none; }
.gp-cover { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: radial-gradient(closest-side, rgba(0, 21, 46, 0.55), rgba(0, 21, 46, 0.82)); }
.gp-cover[hidden], .gp-end[hidden] { display: none; }
.gp-big { display: inline-flex; align-items: center; gap: 0.8rem; font: 650 1.15rem/1 var(--sans); color: #00152e; background: var(--gold); border: 0; border-radius: 999px; padding: 0.9rem 1.5rem 0.9rem 1rem; cursor: pointer; box-shadow: 0 12px 40px rgba(196, 161, 90, 0.5); transition: transform 0.2s; }
.gp-big:hover { transform: scale(1.04); }
.gp-big-icon { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: #00152e; color: var(--gold); font-size: 0.95rem; padding-left: 0.15rem; }
.gp-big-time { font-weight: 500; opacity: 0.75; }
.gp-end { position: absolute; inset: 0; z-index: 6; display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; justify-content: center; align-content: center; padding: 1rem; background: rgba(0, 21, 46, 0.78); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.gp-go { font: 650 1rem/1 var(--sans); text-decoration: none; padding: 0.8rem 1.2rem; border-radius: 999px; border: 1px solid var(--gold); background: var(--gold); color: #00152e; cursor: pointer; }
.gp-go.quiet { background: transparent; color: #fffdf8; }
.gp-go:hover { filter: brightness(1.08); }
.gp-ctrl { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.9rem; font-family: var(--sans); color: #d9d2c2; }
.gp-btn { flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 1px solid rgba(196, 161, 90, 0.6); background: transparent; color: #fffdf8; font: 700 1rem/1 var(--sans); cursor: pointer; }
.gp-btn.gp-play { width: 2.8rem; height: 2.8rem; background: var(--gold); color: #00152e; border: 0; font-size: 0.9rem; }
.gp-btn.gp-cc { width: auto; border-radius: 6px; padding: 0 0.55rem; height: 1.8rem; font-size: 0.75rem; letter-spacing: 0.05em; }
.gp-btn.gp-cc[aria-pressed="false"] { opacity: 0.5; }
.gp-btn:focus-visible, .gp:focus-visible .gp-window { outline: 2px solid var(--gold); outline-offset: 3px; }
.gp-track { position: relative; flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.16); cursor: pointer; }
.gp-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); transition: width 0.2s linear; }
.gp-mark { position: absolute; top: -3px; width: 2px; height: 12px; margin-left: -1px; background: rgba(255, 253, 248, 0.45); border-radius: 1px; }
.gp-time { flex: none; font: 500 0.82rem/1 ui-monospace, Menlo, monospace; min-width: 6.6em; text-align: right; }
.gp-empty .gp-cap { position: static; transform: none; width: auto; }

/* the guide cards */
.guide-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2.2rem; position: relative; }
.guide-card {
  display: flex; flex-direction: column; background: var(--paper); color: var(--ink); border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: 0 18px 40px -18px rgba(0, 21, 46, 0.45); transition: transform 0.25s, box-shadow 0.25s;
}
.guide-card:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -18px rgba(0, 21, 46, 0.55); }
.guide-card .gp-window { border-radius: 0; border: 0; border-bottom: 1px solid var(--line); box-shadow: none; }
.guide-card .gp-bar { height: 22px; padding: 0 0.6rem; gap: 0.5rem; }
.guide-card .gp-dots { transform: scale(0.7); transform-origin: 0 50%; width: 32px; }
.guide-card .gp-url { font-size: 0.62rem; line-height: 1.6; }
.guide-card .gp-cap { display: none; }
.guide-card .gp-keys { top: auto; bottom: 7%; }
.guide-card .gp-key { font-size: 0.8rem; }
.gc-body { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.15rem 1.1rem; }
.gc-num { font: 650 0.74rem/1 var(--sans); letter-spacing: 0.08em; color: var(--gold-deep); margin: 0 0 0.4rem; }
.gc-body h3 { margin: 0 0 0.45rem; font-family: var(--display); font-weight: 560; font-size: 1.35rem; line-height: 1.12; letter-spacing: -0.015em; color: var(--oxford); }
.gc-body p { margin: 0 0 0.8rem; font-size: 0.97rem; line-height: 1.5; }
.gc-keys { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.9rem; }
.gc-keys .gk { font-size: 0.78rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); border-bottom-width: 3px; }
.gc-go { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gc-go a { font: 650 0.86rem/1 var(--sans); text-decoration: none; padding: 0.55rem 0.85rem; border-radius: 999px; border: 1px solid var(--oxford); color: var(--oxford); }
.gc-go a.try { background: var(--oxford); color: #fff; }
.gc-go a:hover { background: var(--gold); border-color: var(--gold); color: #00152e; }
.guide-card.gc-keyboard { grid-column: span 2; }
.gc-table { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem 1rem; align-items: center; margin: 0.2rem 0 0.4rem; }
.gc-table .gc-k { display: flex; gap: 0.25rem; }
.gc-table .gk { font-size: 0.8rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); border-bottom-width: 3px; }
.guide-more { position: relative; margin: 1.6rem 0 0; text-align: center; }
.guide-more a { font: 650 1rem/1 var(--sans); color: var(--gold); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 0.15rem; }
.guide-light .guide-more a { color: var(--oxford); }
html[data-guide-lang="de"] [data-gl="en"], html[data-guide-lang="en"] [data-gl="de"] { display: none !important; }
html:not([data-guide-lang]) [data-gl="en"] { display: none !important; }
@media (max-width: 980px) { .guide-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .guide-band { padding: 2.2rem 0 2rem; }
  .guide-head { grid-template-columns: 1fr; }
  .guide-lang { grid-column: 1; grid-row: auto; justify-self: start; }
  .guide-cards { grid-template-columns: 1fr; }
  .guide-card.gc-keyboard { grid-column: auto; }
  .gp-bar { height: 24px; }
  .gp-url { font-size: 0.66rem; line-height: 1.7; }
  .gp-cap { position: static; transform: none; width: auto; border-radius: 0; box-shadow: none; padding: 0.6rem 0.8rem; font-size: 0.92rem; min-height: 4.2em; }
  .gp-cap.in { animation: none; }
  .gp-keys { top: 4%; }
  .gp-ctrl { gap: 0.4rem; }
  .gp-time { display: none; }
  .gp-btn { width: 2rem; height: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gp-window, .gp-cam, .gp-spot, .gp-f, .guide-card { transition: none !important; }
  .gp-key, .gp-cap.in, .gp-ripple::after { animation: none !important; }
}

/* guide slides (card steps): drawn by the player over the picture */
.gp-slide {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; gap: 0.6rem;
  padding: 6% 8%; opacity: 0; pointer-events: none; transition: opacity 0.6s ease; color: #fffdf8;
  background: radial-gradient(900px 500px at 80% 0%, rgba(196, 161, 90, 0.28), transparent 60%), linear-gradient(160deg, #00152e, #002147 60%, #0b2a52);
}
.gp-slide.on { opacity: 1; }
.gp-slide.gp-now, .gp-slide.gp-now * { transition: none !important; animation: none !important; }
.gp-s-kicker { margin: 0; font: 650 clamp(0.7rem, 1.3vw, 0.95rem)/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.gp-s-title { margin: 0 0 0.6rem; font: 460 clamp(1.4rem, 3.6vw, 2.8rem)/1.05 var(--display); letter-spacing: -0.02em; color: #fffdf8; }
.gp-s-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem 1.4rem; margin: 0.4rem 0 0.6rem; }
.gp-s-fig { border-top: 2px solid rgba(196, 161, 90, 0.7); padding-top: 0.45rem; animation: gp-rise 0.6s cubic-bezier(.2, .8, .2, 1) both; }
.gp-s-v { display: block; font: 560 clamp(1.3rem, 3.4vw, 2.6rem)/1 var(--display); color: var(--gold); font-variant-numeric: tabular-nums lining-nums; }
.gp-s-k { display: block; margin-top: 0.3rem; font: 500 clamp(0.68rem, 1.25vw, 0.92rem)/1.25 var(--sans); color: #d9d2c2; }
.gp-s-line { margin: 0; max-width: 46rem; font: 400 clamp(0.8rem, 1.6vw, 1.15rem)/1.4 var(--serif); color: #efe8d8; animation: gp-rise 0.6s cubic-bezier(.2, .8, .2, 1) both; }
.gp-s-line::before { content: "— "; color: var(--gold); }
@keyframes gp-rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 680px) { .gp-slide { padding: 5% 6%; gap: 0.3rem; } .gp-s-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the hint when the browser holds the narration back until the reader touches the page */
.gp-unmute {
  position: absolute; top: 4%; right: 3%; z-index: 7; font: 650 clamp(0.8rem, 1.5vw, 1.05rem)/1 var(--sans);
  color: #00152e; background: var(--gold); border: 0; border-radius: 999px; padding: 0.7rem 1.1rem; cursor: pointer;
  box-shadow: 0 10px 30px rgba(196, 161, 90, 0.55); animation: gp-pulse 1.8s ease-in-out infinite;
}
.gp-unmute[hidden] { display: none; }
@keyframes gp-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .gp-unmute { animation: none; } }

/* ---------------------------------------------------------------- the first screen: logo, faint portrait, tour sticker
   (project.yaml hero_logo / hero_portrait / hero_sticker; build.py render_hero_extras) */
.hero { position: relative; }
.hero > * { position: relative; z-index: 1; }
.hero-logo { display: block; width: clamp(150px, 18vw, 220px); height: auto; margin: 0 0 1.4rem; }
.hero-bild {
  position: absolute; z-index: 0; top: 1.2rem; right: 0; margin: 0; width: clamp(200px, 30vw, 360px); pointer-events: none;
  opacity: 0.16; filter: grayscale(0.55) sepia(0.25) contrast(0.95);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 46%, #000 52%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 46%, #000 52%, transparent 100%);
}
.hero-bild img { display: block; width: 100%; height: auto; }
.hero-mit-bild h1, .hero-mit-bild .lead { max-width: min(46rem, 70%); }
.hero-sticker {
  --obe: #981134;
  position: absolute; z-index: 2; top: clamp(15rem, 26vw, 21rem); right: clamp(0.5rem, 17vw, 14rem);
  display: grid; justify-items: center; align-content: center; gap: 0.15rem;
  width: 8.6rem; height: 8.6rem; border-radius: 50%; text-align: center; text-decoration: none;
  color: #fff; background: radial-gradient(circle at 35% 30%, #c0284f, var(--obe) 62%, #6e0b25);
  border: 3px solid #fff; outline: 2px solid var(--obe);
  box-shadow: 0 10px 26px rgba(110, 11, 37, 0.45), inset 0 -6px 14px rgba(0, 0, 0, 0.18);
  transform: rotate(-9deg); transition: transform 0.25s cubic-bezier(.3, 1.6, .5, 1), box-shadow 0.25s;
  animation: hs-wink 5.5s ease-in-out 1.2s infinite;
}
.hero-sticker:hover, .hero-sticker:focus-visible { transform: rotate(-4deg) scale(1.07); box-shadow: 0 16px 34px rgba(110, 11, 37, 0.55); animation: none; }
.hero-sticker:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.hs-k { font: 650 0.75rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.hs-t { font: 560 1.12rem/1.05 var(--display); max-width: 6.4rem; }
.hs-play { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; margin: 0.2rem 0 0.1rem; border-radius: 50%; background: #fff; color: var(--obe); font-size: 0.8rem; padding-left: 0.12rem;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); animation: hs-pulse 2.2s ease-out infinite; }
.hs-s { font: 500 0.75rem/1.1 var(--sans); opacity: 0.9; }  /* 12 px: TÜV L5 minimum */
@keyframes hs-wink { 0%, 86%, 100% { transform: rotate(-9deg); } 90% { transform: rotate(-3deg) scale(1.06); } 94% { transform: rotate(-12deg) scale(1.02); } }
@keyframes hs-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.65); } 70%, 100% { box-shadow: 0 0 0 0.75rem rgba(255, 255, 255, 0); } }
@media (max-width: 760px) {
  .hero-bild { width: 46vw; opacity: 0.1; }
  .hero-mit-bild h1, .hero-mit-bild .lead { max-width: none; }
  .hero-sticker { position: relative; top: auto; right: auto; float: right; width: 7rem; height: 7rem; margin: -0.4rem 0 0.6rem 0.8rem; }
  .hs-t { font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) { .hero-sticker, .hs-play { animation: none; } }

/* the tour filling the screen (started from the sticker): the browser's full screen, or the window where an element
   cannot go full screen (.gp-screen) */
.gp:fullscreen, .gp.gp-screen {
  max-width: none; width: 100vw; height: 100vh; margin: 0; padding: 1rem 1.5rem 0.8rem;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  background: radial-gradient(1100px 520px at 75% 0%, rgba(196, 161, 90, 0.22), transparent 65%), #00152e;
}
.gp.gp-screen { position: fixed; inset: 0; z-index: 1000; }
.gp:fullscreen .gp-window, .gp.gp-screen .gp-window, .gp:fullscreen .gp-ctrl, .gp.gp-screen .gp-ctrl { width: min(100%, calc((100vh - 6.5rem) * 1.6)); }
.gp-close { display: none; }
.gp:fullscreen .gp-close, .gp.gp-screen .gp-close {
  display: grid; place-items: center; position: absolute; top: 0.8rem; right: 1rem; z-index: 10; width: 2.4rem; height: 2.4rem;
  border-radius: 50%; border: 1px solid rgba(196, 161, 90, 0.7); background: rgba(0, 21, 46, 0.8); color: #fffdf8; font: 700 1rem/1 var(--sans); cursor: pointer;
}
html.gp-screen-open { overflow: hidden; }
/* the player behind the sticker when the landing has no tour band (guide.band: false): seen only full screen */
.gp-nur-vollbild:not(:fullscreen):not(.gp-screen) { display: none; }

/* the evidence sequence (card.evidence, guide-player.js evidence()): a usual AI answer, then the same statement in its
   parts, bound line by line to the spans of the source; four role colours */
.gp-ev-slide { justify-content: flex-start; padding: 4.5% 6%; }
.gp-ev { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; }
.gp-ev .gp-s-title { font-size: clamp(1.1rem, 2.6vw, 2rem); margin-bottom: 0.4rem; }
.gp-ev-lab { display: inline-block; font: 650 clamp(0.6rem, 1.05vw, 0.8rem)/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; padding: 0.3em 0.6em; border-radius: 4px; background: rgba(255, 255, 255, 0.1); color: #d9d2c2; margin-bottom: 0.5rem; }
.gp-ev-satz { margin: 0; font: 460 clamp(0.9rem, 2.05vw, 1.55rem)/1.35 var(--display); color: #fffdf8; }
.gp-ev-ki { position: absolute; left: 0; right: 0; top: 30%; padding: 1.1rem 1.3rem; border: 1px dashed rgba(217, 210, 194, 0.5); border-radius: 10px;
  background: rgba(255, 255, 255, 0.04); opacity: 0; transform: translateY(10px); transition: opacity 0.6s, transform 0.6s; }
.gp-ev-ki .gp-ev-satz { color: #c9c2b3; }
.gp-ev-ki.an { opacity: 1; transform: none; }
.gp-ev-ki.weg { opacity: 0; transform: translateY(-14px) scale(0.97); }
.gp-ev-woher { position: absolute; right: 1.1rem; bottom: -1.1rem; font: 700 clamp(1rem, 2.4vw, 1.8rem)/1 var(--display); color: #e07a5f;
  background: #00152e; padding: 0.15em 0.5em; border: 2px solid #e07a5f; border-radius: 999px; opacity: 0; transform: scale(0.6); transition: opacity 0.4s, transform 0.4s cubic-bezier(.3, 1.6, .5, 1); }
.gp-ev-woher.an { opacity: 1; transform: none; }
.gp-ev-grid { display: grid; grid-template-rows: auto auto; gap: clamp(1.2rem, 4.5vh, 2.6rem); margin-top: 0.3rem; }
.gp-ev-fam, .gp-ev-quelle { opacity: 0; transform: translateY(10px); transition: opacity 0.6s, transform 0.6s; }
.gp-ev-fam.an, .gp-ev-quelle.an { opacity: 1; transform: none; }
.gp-ev-fam .gp-ev-lab { background: var(--gold); color: #00152e; }
.gp-ev-rollen { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.55rem; }
.gp-ev-rolle { font: 650 clamp(0.6rem, 1.1vw, 0.82rem)/1 var(--sans); padding: 0.32em 0.65em; border-radius: 999px; border: 1.5px solid var(--evc); color: var(--evc); opacity: 0.25; transition: opacity 0.4s; }
.gp-ev-rolle.an { opacity: 1; }
.gp-ev-m { background: transparent; color: inherit; border-radius: 3px; padding: 0 0.08em; box-shadow: inset 0 -0.12em 0 transparent; transition: background 0.5s, box-shadow 0.5s; }
.gp-ev-m.an { background: color-mix(in srgb, var(--evc) 26%, transparent); box-shadow: inset 0 -0.14em 0 var(--evc); }
.gp-ev-c0 { --evc: #c4a15a; } .gp-ev-c1 { --evc: #4fb3a9; } .gp-ev-c2 { --evc: #e07a5f; } .gp-ev-c3 { --evc: #9b8cd9; }
.gp-ev-quelle { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); gap: 0.4rem 1.2rem; align-items: start; padding: 0.9rem 1rem; border-radius: 10px; background: rgba(255, 253, 248, 0.06); border: 1px solid rgba(196, 161, 90, 0.45); }
.gp-ev-img { grid-row: 1 / span 2; width: 100%; height: auto; max-height: 34vh; object-fit: contain; object-position: top left; border-radius: 4px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
.gp-ev-beleg { font: 400 clamp(0.82rem, 1.7vw, 1.25rem)/1.4 var(--serif); color: #efe8d8; }
.gp-ev-beleg::before { content: "„"; color: var(--gold); } .gp-ev-beleg::after { content: "“"; color: var(--gold); }
.gp-ev-ref { margin: 0; font: 500 clamp(0.62rem, 1.15vw, 0.86rem)/1.35 var(--sans); color: #c9c2b3; }
.gp-ev-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
.gp-ev-line { fill: none; stroke: var(--evc); stroke-width: 2.2; stroke-linecap: round; opacity: 0.9; transition: stroke-dashoffset 1.1s cubic-bezier(.4, 0, .2, 1); }
.gp-ev-fazit { margin: 0.6rem 0 0; text-align: center; font: 560 clamp(0.95rem, 2.2vw, 1.6rem)/1.2 var(--display); color: var(--gold); opacity: 0; transition: opacity 0.7s; }
.gp-ev-fazit.an { opacity: 1; }
.gp-now .gp-ev-ki { display: none; }
.gp-now .gp-ev-fam, .gp-now .gp-ev-quelle, .gp-now .gp-ev-fazit, .gp-now .gp-ev-m, .gp-now .gp-ev-rolle { opacity: 1; transform: none; }
.gp-now .gp-ev-m { background: color-mix(in srgb, var(--evc) 26%, transparent); box-shadow: inset 0 -0.14em 0 var(--evc); }
@media (prefers-reduced-motion: reduce) { .gp-ev-ki, .gp-ev-fam, .gp-ev-quelle, .gp-ev-fazit, .gp-ev-line { transition: none; } }

/* ---------------------------------------------------------------- issues: the card on the landing and the navigation
   (project.yaml issues:, build.py render_issues_card / render_issues_nav, js/issues.js) */
.iss-card { margin: 1rem 0 0.4rem; padding: 1.05rem 1.15rem 0.9rem; border: 1px solid var(--line); border-left: 5px solid var(--oxford); border-radius: 10px; background: #fff; }
.iss-kopf { display: flex; gap: 0.8rem; align-items: flex-start; }
.iss-symbol { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--oxford); color: var(--gold); font: 700 1.05rem/1 var(--display); }
.iss-kopf h2 { margin: 0; font: 650 1.02rem/1.25 var(--sans); color: var(--oxford); }
.iss-kopf p { margin: 0.15rem 0 0; font-size: 0.9rem; color: var(--muted); }
.iss-form { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.iss-form[hidden] { display: none; }
.iss-form textarea { flex: 1; min-width: 0; resize: vertical; min-height: 2.6rem; font: inherit; font-size: 0.98rem; padding: 0.55rem 0.7rem; border: 1px solid var(--line-strong, #b9b2a2); border-radius: 7px; }
.iss-form textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200, 162, 42, 0.25); }
.iss-form button, .iss-knopf { font: 650 0.95rem/1 var(--sans); padding: 0.62rem 1rem; border: 0; border-radius: 7px; background: var(--oxford); color: #fff; cursor: pointer; text-decoration: none; display: inline-block; }
.iss-form button:hover, .iss-knopf:hover { background: var(--gold); color: var(--oxford); }
.iss-form button:disabled { opacity: 0.6; cursor: wait; }
.iss-knopf.iss-leise { background: transparent; color: var(--oxford); border: 1px solid var(--line-strong, #b9b2a2); }
.iss-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.iss-antwort:empty { display: none; }
.iss-antwort { margin-top: 0.75rem; display: grid; gap: 0.6rem; }
.iss-schritt { margin: 0; font: 650 1rem/1.3 var(--sans); color: var(--oxford); }
.iss-warte { margin: 0; font-size: 0.95rem; color: var(--muted); }
.iss-warte::before { content: ""; display: inline-block; width: 0.9em; height: 0.9em; margin-right: 0.5em; vertical-align: -0.12em; border: 2px solid var(--gold); border-right-color: transparent; border-radius: 50%; animation: iss-dreh 0.9s linear infinite; }
@keyframes iss-dreh { to { transform: rotate(360deg); } }
.iss-hinweis { margin: 0; color: #8a2b14; }
.iss-treffer { display: grid; gap: 0.55rem; }
.iss-treffer-k { padding: 0.7rem 0.85rem; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--paper, #fbf8f1) 70%, #fff); display: grid; gap: 0.35rem; justify-items: start; }
.iss-treffer-kopf { margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: baseline; }
.iss-treffer-t { font-weight: 650; color: var(--ink, #1a1a1a); }
.iss-grund, .iss-meta { margin: 0; font-size: 0.88rem; color: var(--muted); }
.iss-danke { margin: 0; }
.iss-reihe { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.iss-id { font: 650 0.8rem/1 ui-monospace, Menlo, monospace; color: var(--oxford); background: rgba(0, 33, 71, 0.07); padding: 0.25em 0.45em; border-radius: 4px; }
.iss-st { font: 650 0.74rem/1 var(--sans); letter-spacing: 0.02em; padding: 0.3em 0.6em; border-radius: 999px; white-space: nowrap; background: #e9e5dc; color: #4b4537; }
.iss-st-gemeldet { background: #fdf0d3; color: #7a5600; }
.iss-st-bestaetigt { background: #e3ecf7; color: #1d4673; }
.iss-st-geplant { background: #ebe9f5; color: #4a3f7a; }
.iss-st-in_arbeit { background: #ddf1ee; color: #0f5f55; }
.iss-st-entscheidung { background: #fbe4e6; color: #8a1f35; }
.iss-st-erledigt { background: #e2f1e2; color: #276127; }
.iss-st-verworfen { background: #ecebe8; color: #6b6b6b; text-decoration: line-through; }
.iss-zahlen { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; margin-top: 0.8rem; padding-top: 0.6rem; border-top: 1px solid var(--line); font: 500 0.88rem/1.2 var(--sans); color: var(--muted); text-decoration: none; }
.iss-zahlen b { color: var(--oxford); font-weight: 700; }
.iss-alle { margin-left: auto; color: var(--oxford); font-weight: 650; }
.iss-zahlen:hover .iss-alle { color: var(--gold-deep); }

.iss-nav-band { margin: 2.6rem 0 1.5rem; scroll-margin-top: 5rem; }
.iss-nav-band h2 { font-family: var(--display); color: var(--oxford); }
.iss-filter { display: grid; gap: 0.55rem; margin: 1rem 0 0.9rem; }
.iss-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.iss-chip { font: 600 0.86rem/1 var(--sans); padding: 0.45rem 0.75rem; border-radius: 999px; border: 1px solid var(--line-strong, #b9b2a2); background: #fff; color: var(--oxford); cursor: pointer; }
.iss-chip[aria-pressed="true"] { background: var(--oxford); color: #fff; border-color: var(--oxford); }
.iss-chip-n { opacity: 0.6; font-weight: 500; margin-left: 0.15rem; }
.iss-suche { font: inherit; font-size: 0.95rem; padding: 0.5rem 0.7rem; border: 1px solid var(--line-strong, #b9b2a2); border-radius: 7px; max-width: 28rem; width: 100%; }
.iss-liste { display: grid; gap: 0.5rem; }
.iss-item { border: 1px solid var(--line); border-left: 4px solid var(--isc, var(--line-strong, #b9b2a2)); border-radius: 8px; background: #fff; scroll-margin-top: 6rem; }
.iss-art-luecke { --isc: #c4a15a; } .iss-art-fehler { --isc: #c0392b; } .iss-art-referenz { --isc: #5b6fb5; } .iss-art-ablauf { --isc: #6b7d6b; } .iss-art-bedienung { --isc: #2a8f83; }
.iss-item.iss-ziel { box-shadow: 0 0 0 3px rgba(200, 162, 42, 0.45); }
.iss-item summary { display: grid; grid-template-columns: auto auto 1fr auto; gap: 0.6rem; align-items: center; padding: 0.7rem 0.85rem; cursor: pointer; list-style: none; }
.iss-item summary::-webkit-details-marker { display: none; }
.iss-art { font: 600 0.74rem/1 var(--sans); text-transform: uppercase; letter-spacing: 0.06em; color: var(--isc); }
.iss-titel { font-weight: 600; color: var(--ink, #1a1a1a); min-width: 0; }
.iss-body { padding: 0 0.95rem 0.9rem; display: grid; gap: 0.6rem; }
.iss-befund { margin: 0; line-height: 1.5; }
.iss-weg { list-style: none; margin: 0.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.2rem; font: 500 0.8rem/1.2 var(--sans); color: var(--muted); }
.iss-weg li { display: flex; gap: 0.35rem; align-items: center; }
.iss-weg li + li::before { content: "→"; color: var(--line-strong, #b9b2a2); margin-right: 0.15rem; }
.iss-weg li.jetzt { color: var(--oxford); font-weight: 650; }
.iss-weg-d { font-variant-numeric: tabular-nums; }
.iss-daten { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 0.9rem; margin: 0; font-size: 0.9rem; }
.iss-daten dt { color: var(--muted); }
.iss-daten dd { margin: 0; overflow-wrap: anywhere; }
.iss-leer, .iss-laden { color: var(--muted); }
.iss-stand { margin: 0.8rem 0 0; font: 500 0.8rem/1.2 var(--sans); color: var(--muted); }
@media (max-width: 600px) {
  .iss-form { flex-direction: column; }
  .iss-item summary { grid-template-columns: auto 1fr; }
  .iss-item summary .iss-art { display: none; }
  .iss-item summary .iss-st { grid-column: 2; justify-self: start; }
  .iss-titel { grid-column: 1 / -1; }
  .iss-daten { grid-template-columns: 1fr; }
  .iss-daten dt { margin-top: 0.3rem; }
  .iss-alle { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .iss-warte::before { animation: none; } }

/* a wide table of a chapter (the task lists of a "Lücken" page) scrolls within itself on a phone, never the page */
main table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- task list of a collection's deficits (facts *_html of build/facts/<slug>.py, 27 Oct 2026) */
.defizite { display: grid; gap: 1rem; margin: 1.4rem 0 0.4rem; }
.defizit {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--oxford-soft);
  border-radius: 6px;
  padding: 1rem 1.2rem 1.05rem;
}
.defizit.st-erledigt { border-left-color: #5f6b3a; }
.defizit.st-in_arbeit { border-left-color: var(--gold); }
.defizit.st-entscheidung { border-left-color: #9a4f3c; }
.defizit-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.75rem; margin-bottom: 0.45rem; }
.defizit-id {
  font-family: var(--sans); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--oxford); background: var(--sand-deep); border-radius: 3px; padding: 0.1rem 0.45rem;
}
.defizit-titel { font-family: var(--display); font-size: 1.12rem; font-weight: 600; color: var(--oxford); margin: 0; flex: 1 1 16rem; }
.defizit-stand {
  font-family: var(--sans); font-size: 0.74rem; font-weight: 650; white-space: nowrap;
  border-radius: 999px; padding: 0.15rem 0.6rem; background: var(--sand-deep); color: var(--ink);
}
.st-erledigt .defizit-stand { background: #e6ead6; color: #3d4626; }
.st-in_arbeit .defizit-stand { background: var(--gold-pale); color: var(--gold-deep); }
.st-geplant .defizit-stand { background: #dfe7f0; color: var(--oxford); }
.st-entscheidung .defizit-stand { background: #f3e0da; color: #7a3a2b; }
.defizit-befund { margin: 0 0 0.7rem; line-height: 1.55; }
.defizit dl { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.3rem 0.9rem; margin: 0; font-size: 0.93rem; }
.defizit dt { font-family: var(--sans); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); padding-top: 0.15rem; }
.defizit dd { margin: 0; }
.defizit dd code { font-size: 0.8rem; word-break: break-all; color: var(--muted); }
@media (max-width: 640px) {
  .defizit dl { grid-template-columns: 1fr; }
  .defizit dt { padding-top: 0.4rem; }
}
/* reading modes of a document in the document table (Seiten · Tafeln) */
.doc-table .doc-modes { display: block; margin-top: .15rem; font-size: .82em; }
.doc-table .doc-modes a { color: var(--gold-deep); }
/* download page of a landing (Euler, 5 Nov 2026): one card per volume (article.band; a bare .band also hit section.band, the gallery/sources heading, 9 Nov 2026) — title-leaf thumbnail, sigle, title, one action */
.chapter.no-figure:has(.baende) { grid-template-columns: minmax(0, 1fr); }
.baende { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1rem; margin: 1.2rem 0 0.4rem; }
article.band { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 0.85rem; padding: 0.85rem; background: var(--paper); border: 1px solid var(--line); border-radius: 3px; }
.band-titel { display: block; align-self: start; line-height: 0; border: 1px solid var(--line-strong); box-shadow: 0 1px 3px rgba(0, 33, 71, 0.12); }
.band-titel img { width: 100%; height: auto; display: block; }
.band-titel:hover, .band-titel:focus-visible { border-color: var(--gold); outline: none; }
.band-text { min-width: 0; display: flex; flex-direction: column; }
.band-sigle { margin: 0; font-family: var(--sans); font-size: 0.78rem; font-weight: 650; letter-spacing: 0.04em; color: var(--gold-deep); }
article.band h3 { margin: 0.15rem 0 0.3rem; font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.band-hrsg, .band-meta, .band-fassung { margin: 0 0 0.25rem; font-family: var(--sans); font-size: 0.8rem; color: var(--muted); overflow-wrap: anywhere; }
.band-fassung a { color: var(--oxford-soft); }
.band-pdf { margin-top: auto; align-self: start; padding: 0.35rem 0.7rem; font-family: var(--sans); font-size: 0.82rem; font-weight: 600; color: var(--paper); background: var(--oxford); border-radius: 2px; text-decoration: none; }
.band-pdf:hover, .band-pdf:focus-visible { background: var(--gold-deep); color: var(--paper); }
@media (max-width: 680px) { .baende { grid-template-columns: 1fr; } }