:root {
  --ink: #1e2a24;
  --ink-soft: #3d4d44;
  --paper: #d5dbd0;
  --sheet: #eef1e8;
  --rule: #b7c3b4;
  --copper: #1f6b62;
  --copper-deep: #154f49;
  --pen: #a61f18;
  --pen-bg: #f4e4e1;
  --ok: #2b5c38;
  --ok-bg: #dce8de;
  --ballpoint: #1d4e74;
  --ballpoint-bg: #dce7ef;
  --rail: #1b2b24;
  --rail-line: #3e5a4c;
  --grid: rgba(30, 42, 36, 0.055);
  --font-ui: Bahnschrift, "Segoe UI Variable", "Segoe UI", sans-serif;
  --font-text: Cambria, "Palatino Linotype", Palatino, Georgia, serif;
  --shadow: 0 0 0 1px rgba(30, 42, 36, 0.12), 0 18px 40px rgba(27, 43, 36, 0.12);
  --sheet-w: 46rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    var(--paper);
  background-size: 24px 24px, 24px 24px, auto;
  font-family: var(--font-text);
  font-size: 1.05rem;
  line-height: 1.55;
}

.skip {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--sheet);
  padding: 0.5rem 0.8rem;
  z-index: 20;
}
.skip:focus { left: 0.6rem; top: 0.6rem; }

a { color: var(--copper-deep); }
a:hover { color: var(--ballpoint); }

:focus-visible {
  outline: 2px solid var(--ballpoint);
  outline-offset: 3px;
}

/* ----- layout ----- */
.shell {
  display: grid;
  grid-template-columns: 17.5rem minmax(0, 1fr);
  min-height: 100vh;
}

#nav-root { display: contents; }

.rail {
  background: var(--rail);
  color: #e4ece6;
  padding: 1.25rem 0.9rem 2rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
}

.rail-brand {
  display: grid;
  gap: 0.15rem;
  padding: 0.35rem 0.7rem 1.1rem;
  border-bottom: 1px solid var(--rail-line);
  margin-bottom: 1rem;
}
.rail-brand strong {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
}
.rail-brand span {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: #9fb3a6;
}

.rail-group {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: #8aa396;
  padding: 0.85rem 0.7rem 0.25rem;
  margin: 0;
}

.rail-toggle {
  display: none;
  font-family: var(--font-ui);
  background: transparent;
  color: #e4ece6;
  border: 1px solid var(--rail-line);
  padding: 0.45rem 0.7rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.rechenweg {
  list-style: none;
  margin: 0;
  padding: 0 0.4rem 0 0.85rem;
  border-left: 1px solid var(--rail-line);
}

.rechenweg a {
  display: grid;
  grid-template-columns: 1.7rem 1fr;
  gap: 0.45rem;
  color: #c5d4cb;
  text-decoration: none;
  padding: 0.38rem 0 0.38rem 0.7rem;
  margin-left: -0.85rem;
  position: relative;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  line-height: 1.25;
}
.rechenweg a::before {
  content: "";
  position: absolute;
  left: -0.22rem;
  top: 0.85rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--rail);
  border: 1px solid #7d9788;
}
.rechenweg a .nr {
  color: #7d9788;
  font-variant-numeric: tabular-nums;
}
.rechenweg a[aria-current="page"] {
  color: #fff;
  background: rgba(31, 107, 98, 0.35);
}
.rechenweg a[aria-current="page"]::before {
  background: #5fd0c3;
  border-color: #5fd0c3;
}

.sheet-wrap {
  padding: 1.4rem 1.5rem 3.5rem;
}

.sheet {
  max-width: calc(var(--sheet-w) + 12.5rem);
  margin: 0 auto;
  background: var(--sheet);
  box-shadow: var(--shadow);
}

.schriftfeld {
  display: grid;
  grid-template-columns: 6.2rem 1fr auto;
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-ui);
}
.schriftfeld > * {
  padding: 0.7rem 0.9rem;
  border-right: 1px solid var(--ink);
}
.schriftfeld > *:last-child { border-right: 0; }
.sf-code {
  font-size: 0.82rem;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
}
.sf-code b { color: var(--ink); font-size: 1rem; }
.sf-title {
  font-size: 1.45rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  line-height: 1.2;
}
.sf-meta {
  font-size: 0.78rem;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  min-width: 8.5rem;
}
.sf-meta b { color: var(--ink); font-weight: 600; }

.blatt {
  display: grid;
  grid-template-columns: minmax(0, var(--sheet-w)) 11.5rem;
  gap: 0;
}

.kolumne {
  padding: 1.25rem 1.35rem 2rem;
  min-width: 0;
}

.rand {
  border-left: 1px solid var(--rule);
  padding: 1.2rem 0.8rem 2rem 0.85rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--pen);
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 1.55rem,
      rgba(166, 31, 24, 0.07) 1.55rem 1.56rem
    );
}

.rand h2 {
  margin: 0 0 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--pen);
  border-bottom: 1px solid #e2b6b2;
  padding-bottom: 0.3rem;
}

.rand p { margin: 0 0 0.75rem; }
.rand a { color: var(--pen); }

h1 { font-size: 1.55rem; line-height: 1.2; margin: 0 0 0.6rem; }
h2 {
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1.7rem 0 0.55rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--rule);
}
h3 {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  margin: 1.15rem 0 0.35rem;
  color: var(--copper-deep);
}

p { margin: 0 0 0.8rem; }
ul, ol { margin: 0 0 0.9rem; padding-left: 1.2rem; }
li { margin: 0.2rem 0; }
li + li { margin-top: 0.28rem; }

.lead {
  font-size: 1.12rem;
  max-width: 40rem;
}

.pos {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 0.7rem;
  margin: 1.1rem 0;
  align-items: start;
}
.pos-nr {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--copper-deep);
  border: 1px solid var(--copper);
  text-align: center;
  padding: 0.28rem 0.15rem;
  background: rgba(31, 107, 98, 0.08);
}
.pos h3 { margin-top: 0.1rem; }

.eq {
  font-family: var(--font-text);
  background: var(--ballpoint-bg);
  color: var(--ballpoint);
  padding: 0.55rem 0.8rem;
  margin: 0.55rem 0 0.85rem;
  border-left: 3px solid var(--ballpoint);
  overflow-x: auto;
  font-variant-numeric: tabular-nums;
}
.eq-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin-bottom: 0.15rem;
}

.note {
  background: var(--pen-bg);
  border-left: 3px solid var(--pen);
  padding: 0.55rem 0.8rem;
  margin: 0.7rem 0 1rem;
  color: #6d1a16;
}
.note strong { color: var(--pen); }

.ok {
  background: var(--ok-bg);
  border-left: 3px solid var(--ok);
  padding: 0.55rem 0.8rem;
  margin: 0.7rem 0 1rem;
  color: #21462c;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  margin: 0.4rem 0 1rem;
}
th, td {
  border-bottom: 1px solid var(--rule);
  padding: 0.38rem 0.45rem;
  text-align: left;
  vertical-align: top;
}
th {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
}
td.num, th.num { text-align: right; }
.table-wrap { overflow-x: auto; }

.kasten {
  border: 1px solid var(--ink);
  padding: 0.7rem 0.85rem;
  margin: 0.8rem 0 1.1rem;
}
.kasten h3 { margin-top: 0; color: var(--ink); }

details.beispiel {
  border: 1px solid var(--ink);
  margin: 1.2rem 0 0.4rem;
  background: #f7f8f3;
}
details.beispiel summary {
  font-family: var(--font-ui);
  cursor: pointer;
  padding: 0.7rem 0.9rem;
  list-style: none;
  background: #e4ebe3;
  border-bottom: 1px solid transparent;
}
details.beispiel summary::-webkit-details-marker { display: none; }
details.beispiel summary::after {
  content: " aufklappen";
  color: var(--ink-soft);
  font-weight: 400;
}
details.beispiel[open] summary {
  border-bottom: 1px solid var(--ink);
}
details.beispiel[open] summary::after { content: " zuklappen"; }
.beispiel-body { padding: 0.9rem 1rem 0.3rem; }
.rechnung {
  font-variant-numeric: tabular-nums;
  margin: 0 0 0.55rem;
}
.rechnung span { color: var(--ink-soft); }

.flow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.4rem;
  align-items: center;
  margin: 0.8rem 0 1.1rem;
  font-family: var(--font-ui);
  font-size: 0.82rem;
}
.flow b {
  background: var(--ink);
  color: var(--sheet);
  padding: 0.28rem 0.55rem;
  font-weight: 600;
}
.flow i {
  font-style: normal;
  color: var(--ink-soft);
}

.pager {
  max-width: calc(var(--sheet-w) + 12.5rem);
  margin: 1rem auto 0;
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  font-family: var(--font-ui);
}
.pager a {
  text-decoration: none;
  border: 1px solid var(--ink);
  background: var(--sheet);
  color: var(--ink);
  padding: 0.65rem 0.8rem;
  min-width: 42%;
}
.pager a:hover { background: #e4ebe3; }
.pager .next { text-align: right; margin-left: auto; }
.pager small { display: block; color: var(--ink-soft); font-size: 0.72rem; }

.pruef-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin: 0.8rem 0 1.1rem;
}
.pruef-grid article {
  border: 1px solid var(--rule);
  padding: 0.7rem 0.8rem;
}
.pruef-grid h3 { margin: 0 0 0.3rem; }
.pruef-grid p { margin: 0; font-size: 0.95rem; }

.viz {
  margin: 0.9rem 0 1.25rem;
  border: 1px solid var(--ink);
  background: #f7f8f3;
  overflow: hidden;
}
.viz svg,
.viz img {
  display: block;
  width: 100%;
  height: auto;
  background: #f7f8f3;
}
.viz figcaption {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  line-height: 1.35;
  padding: 0.45rem 0.7rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
}
.viz-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin: 0.9rem 0 1.25rem;
}
.viz-row .viz { margin: 0; }

.lager-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
  margin: 0.8rem 0 1.1rem;
}
.lager {
  border: 1px solid var(--ink);
  padding: 0.55rem 0.5rem 0.45rem;
  background: #f7f8f3;
  font-family: var(--font-ui);
  font-size: 0.78rem;
}
.lager strong { display: block; margin-bottom: 0.35rem; }
.lager svg { width: 100%; height: auto; display: block; }
.lager span { display: block; color: var(--ink-soft); margin-top: 0.3rem; line-height: 1.3; }

.pdf-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 0.6rem;
  font-family: var(--font-ui);
}
.pdf-tools a,
.pdf-tools button {
  border: 1px solid var(--ink);
  background: #e4ebe3;
  color: var(--ink);
  padding: 0.4rem 0.65rem;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: none;
}
.pdf-tools a[aria-current="true"],
.pdf-tools button[aria-current="true"] {
  background: var(--ink);
  color: var(--sheet);
}
.pdf-frame {
  border: 1px solid var(--ink);
  height: min(78vh, 54rem);
  background: #bbb;
  margin-bottom: 1.2rem;
}
.pdf-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #525252;
}

.exam-cards {
  display: grid;
  gap: 0.55rem;
  margin: 0.8rem 0 1.2rem;
}
.exam-cards a {
  display: grid;
  grid-template-columns: 4.2rem 1fr auto;
  gap: 0.7rem;
  align-items: start;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 0.65rem 0.75rem;
  background: #f7f8f3;
}
.exam-cards a:hover { background: #e4ebe3; }
.exam-cards .yr {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--copper-deep);
}
.exam-cards h3 { margin: 0 0 0.15rem; font-size: 1rem; }
.exam-cards p { margin: 0; font-size: 0.9rem; }
.exam-cards small { font-family: var(--font-ui); color: var(--ink-soft); }

@media (max-width: 980px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: sticky;
    top: 0;
    height: auto;
    z-index: 8;
    padding: 0.7rem;
  }
  .rail-toggle { display: block; }
  .rail-brand { display: none; }
  .rechenweg, .rail-group { display: none; }
  .rail.open .rechenweg { display: block; padding-top: 0.35rem; }
  .rail.open .rail-group { display: block; }
  .blatt { grid-template-columns: minmax(0, 1fr); }
  .rand {
    border-left: 0;
    border-top: 1px solid var(--rule);
    background: var(--pen-bg);
  }
  .schriftfeld {
    grid-template-columns: 1fr 1fr;
  }
  .sf-code { grid-column: 1; grid-row: 1; }
  .sf-meta { grid-column: 2; grid-row: 1; border-right: 0; }
  .sf-title {
    grid-column: 1 / -1;
    grid-row: 2;
    border-right: 0;
    border-top: 1px solid var(--ink);
  }
  .pruef-grid { grid-template-columns: 1fr; }
  .viz-row, .lager-grid { grid-template-columns: 1fr 1fr; }
  .exam-cards a { grid-template-columns: 3.4rem 1fr; }
}

@media (max-width: 640px) {
  .sheet-wrap { padding: 0.7rem 0.55rem 2.5rem; }
  .kolumne { padding: 1rem 0.85rem 1.5rem; }
  .pos { grid-template-columns: 2.1rem 1fr; }
  .pager { flex-direction: column; }
  .pager a { min-width: 0; }
  .lager-grid { grid-template-columns: 1fr; }
  .pdf-frame { height: 70vh; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.checks {
  list-style: none;
  margin: 0.4rem 0 0.9rem;
  padding: 0;
}
.checks li {
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
  margin: 0.18rem 0;
}
.checks input {
  width: 0.85rem;
  height: 0.85rem;
  margin: 0.28rem 0 0;
  flex: 0 0 0.85rem;
  accent-color: var(--copper-deep);
}
.checks span { flex: 1; min-width: 0; }
.zwei {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  margin: 0.4rem 0 0.9rem;
}
.zwei .eq { margin: 0.3rem 0; }
.pen-line {
  border-left: 3px solid var(--pen);
  padding: 0.35rem 0.7rem;
  margin: 0.5rem 0 0.8rem;
  background: var(--pen-bg);
  color: #6d1a16;
  font-size: 0.95rem;
}
.mappe-toc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem 1.2rem;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  margin: 0.6rem 0 1.1rem;
}
.mappe-toc a { text-decoration: none; }
.mappe-kapitel {
  border-top: 2px solid var(--ink);
  padding-top: 0.8rem;
  margin-top: 1.6rem;
}
.mappe-kapitel h2 { margin-top: 0; }
.print-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}
body.mappe-page .blatt { grid-template-columns: 1fr; }
body.mappe-page .sheet { max-width: 52rem; }
body.mappe-page .kolumne { padding-bottom: 2.5rem; }

@media (max-width: 980px) {
  .zwei, .mappe-toc { grid-template-columns: 1fr; }
}

@media print {
  body { background: #fff; font-size: 10.5pt; line-height: 1.35; }
  .rail, .pager, .skip, .rail-toggle, .print-bar, .pdf-tools, .print-hint { display: none !important; }
  .shell { display: block; }
  .sheet-wrap { padding: 0; }
  .sheet { box-shadow: none; max-width: none; }
  .schriftfeld { break-after: avoid; }
  .rand { display: none; }
  .blatt { grid-template-columns: 1fr; }
  .kolumne { padding: 0; }
  details.beispiel { break-inside: avoid; }
  details.beispiel:not([open]) { border-style: dashed; }
  .mappe-kapitel { break-before: page; margin-top: 0; padding-top: 0; border-top: 0; }
  .mappe-kapitel.keep { break-before: auto; }
  .pen-line, .note, .ok, .eq { break-inside: avoid; }
  .checks input {
    -webkit-appearance: none;
    appearance: none;
    width: 8pt;
    height: 8pt;
    flex-basis: 8pt;
    border: 0.7pt solid #111;
    border-radius: 0;
    background: #fff;
  }
  a { color: #000; text-decoration: none; }
  @page { size: A4; margin: 12mm 12mm 14mm; }
}

/* ---------- Czerny-Tafel wählen ---------- */
.cz-edge { stroke: var(--ink); stroke-width: 2.2; stroke-linecap: square; }
.cz-edge.clamp { stroke-width: 3.2; }
.cz-edge.free { stroke: var(--ink-soft); stroke-width: 1.6; stroke-dasharray: 5 4; }
.cz-edge.mark, .cz-hatch.mark { stroke: var(--pen); }
.cz-hatch { stroke: var(--ink); stroke-width: 1.1; fill: none; }
.cz-fill { fill: #f7f8f3; }
.cz-lbl { font-family: var(--font-text); font-style: italic; font-size: 12px; fill: var(--ink-soft); }
.cz-sub { font-size: 9px; }
.cz-plate { width: 100%; max-width: 170px; height: auto; display: block; margin: 0 auto; }

.cz-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin: 0.6rem 0 1rem; }
.cz-leg-item { border: 1px solid var(--rule); background: #f7f8f3; padding: 0.4rem 0.55rem; font-family: var(--font-ui); font-size: 0.8rem; }
.cz-leg-item svg { width: 100%; max-width: 110px; height: auto; display: block; }
.cz-leg-item strong { display: block; }
.cz-leg-item span { color: var(--ink-soft); line-height: 1.3; display: block; }

.cz-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin: 0.8rem 0; }
.cz-rule { border: 1px solid var(--ink); padding: 0.6rem 0.75rem; background: #f7f8f3; }
.cz-rule h3 { margin: 0 0 0.3rem; }
.cz-rule p { font-size: 0.95rem; }
.cz-mini small { display: block; font-family: var(--font-ui); font-size: 0.75rem; color: var(--ink-soft); text-align: center; }
.cz-mini .cz-plan { max-width: 240px; margin: 0.2rem auto 0; }
.cz-mini-row { display: flex; justify-content: center; gap: 0.8rem; }
.cz-mini-row figure { margin: 0; text-align: center; font-family: var(--font-ui); font-size: 0.78rem; }
.cz-mini-row .cz-plate { max-width: 80px; }

.cz-catalog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin: 0.8rem 0 1rem; }
.cz-card { border: 1px solid var(--ink); background: #f7f8f3; padding: 0.5rem 0.55rem; font-family: var(--font-ui); font-size: 0.78rem; line-height: 1.3; }
.cz-card strong { font-size: 1rem; margin-right: 0.35rem; }
.cz-card em { font-style: normal; color: var(--copper-deep); }
.cz-card .cz-plate { max-width: 130px; margin: 0.2rem auto; }
.cz-card span { display: block; color: var(--ink-soft); margin-top: 0.2rem; }
.cz-card .cz-sym { color: var(--ballpoint); }

.cz-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin: 0.8rem 0; }
.cz-cmp { border: 1px solid var(--ink); padding: 0.55rem 0.7rem; background: #f7f8f3; }
.cz-cmp h3 { margin: 0 0 0.3rem; font-size: 1rem; }
.cz-cmp p { font-size: 0.92rem; margin: 0.3rem 0 0; }
.cz-cmp-row { display: flex; align-items: center; gap: 0.3rem; }
.cz-cmp-row figure { margin: 0; flex: 1; text-align: center; }
.cz-cmp-row figcaption { font-family: var(--font-ui); font-size: 0.72rem; color: var(--ink-soft); }
.cz-cmp-row .cz-plan { max-width: 190px; margin: 0 auto; }
.cz-cmp-row figure:first-child { flex: 1.4; }
.cz-arrow { font-family: var(--font-ui); color: var(--pen); font-weight: 600; white-space: nowrap; }

.cz-plan { width: 100%; height: auto; display: block; }
.cz-field { stroke: var(--ink-soft); stroke-width: 0.8; }
.cz-field.plus { fill: var(--rule); }
.cz-field.minus { fill: #f7f8f3; }
.cz-field.target { stroke: var(--pen); stroke-width: 3; }
.cz-plan.interactive .cz-field { cursor: pointer; }
.cz-plan.interactive .cz-field:hover { fill-opacity: 0.7; }
.cz-ftxt { font-family: var(--font-ui); font-size: 12px; fill: var(--ink-soft); pointer-events: none; }
.cz-sup { stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 6 3; pointer-events: none; }
.cz-sup.target { stroke: var(--pen); stroke-width: 4; stroke-dasharray: none; }
.cz-hit { stroke: transparent; stroke-width: 14; cursor: pointer; }
.cz-hit:hover { stroke: rgba(166, 31, 24, 0.25); }
.cz-outline { fill: none; stroke: var(--ink); stroke-width: 2.4; pointer-events: none; }
.cz-dim { font-family: var(--font-ui); font-size: 11px; fill: var(--ink-soft); }
.cz-axis { stroke: var(--ink-soft); fill: none; stroke-width: 1; }

.cz-app { border: 2px solid var(--ink); background: #f7f8f3; padding: 0.8rem; margin: 0.8rem 0 1.2rem; }
.cz-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem 0.8rem; font-family: var(--font-ui); font-size: 0.82rem; }
.cz-controls label { display: flex; flex-direction: column; gap: 0.15rem; }
.cz-controls input, .cz-controls select { font: inherit; font-size: 0.95rem; padding: 0.25rem 0.35rem; border: 1px solid var(--ink-soft); background: #fff; color: var(--ink); min-width: 0; }
.cz-buttons { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.7rem 0; }
.cz-buttons button, .cz-casecard button {
  font-family: var(--font-ui); font-size: 0.85rem; padding: 0.35rem 0.7rem; cursor: pointer;
  border: 1px solid var(--ink); background: var(--sheet); color: var(--ink);
}
.cz-buttons button:hover, .cz-casecard button:hover { background: var(--ink); color: var(--sheet); }
#cz-quiz { background: var(--copper); color: #fff; border-color: var(--copper-deep); }
#cz-reveal { background: var(--pen); color: #fff; border-color: var(--pen); }
.cz-plan-wrap { max-width: 460px; margin: 0 auto; }
.cz-plan-key { font-family: var(--font-ui); font-size: 0.78rem; color: var(--ink-soft); text-align: center; margin: 0.2rem 0 0; }
.cz-plan-key span { display: inline-block; width: 0.9rem; height: 0.7rem; vertical-align: -1px; border: 1px solid var(--ink-soft); }
.cz-plan-key .k-plus { background: var(--rule); }
.cz-plan-key .k-minus { background: #f7f8f3; }
.cz-plan-key .k-target { border: 2px solid var(--pen); }
.cz-question { background: var(--ballpoint-bg); border-left: 3px solid var(--ballpoint); padding: 0.55rem 0.8rem; margin: 0.7rem 0; }
.cz-result h3 { margin-top: 0.9rem; }
.cz-field-block { border-top: 1px solid var(--rule); padding-top: 0.5rem; margin-top: 0.6rem; }
.cz-field-block h4 { margin: 0.2rem 0 0.3rem; font-family: var(--font-ui); font-size: 0.95rem; }
.cz-field-block h4 small { font-weight: 400; color: var(--ink-soft); }
.cz-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.cz-fig { margin: 0; border: 1px solid var(--rule); background: #fff; padding: 0.45rem; text-align: center; }
.cz-fig figcaption { font-family: var(--font-ui); font-size: 0.82rem; }
.cz-case { margin: 0.2rem 0 0; font-family: var(--font-ui); font-size: 0.85rem; }
.cz-case b { font-size: 1.05rem; color: var(--copper-deep); }
.cz-case small { color: var(--ink-soft); }
.cz-rot { font-family: var(--font-ui); font-size: 0.82rem; color: var(--pen); margin: 0.2rem 0 0.4rem; }
.cz-ratio { font-family: var(--font-ui); font-size: 0.88rem; margin: 0.5rem 0 0.2rem; }
.cz-summary { font-family: var(--font-ui); font-size: 0.88rem; background: var(--ok-bg); border-left: 3px solid var(--ok); padding: 0.4rem 0.7rem; }

.cz-cases { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin: 0.8rem 0; }
.cz-casecard { border: 1px solid var(--ink); background: #f7f8f3; padding: 0.6rem 0.75rem; font-size: 0.92rem; }
.cz-casecard h3 { margin: 0 0 0.3rem; font-size: 1rem; }
.cz-casecard .cz-plan { max-width: 240px; max-height: 170px; margin: 0 auto 0.3rem; }
.cz-casecard ul { padding-left: 1.1rem; margin: 0.3rem 0; }
.cz-card, .cz-cmp, .cz-cmp-row figure, .cz-fig, .cz-casecard, .cz-rule, .cz-leg-item, .cz-controls label { min-width: 0; }
.cz-free .cz-fig { max-width: 260px; margin: 0.3rem auto 0.6rem; }

@media (max-width: 640px) {
  .cz-legend, .cz-rules, .cz-compare, .cz-cases { grid-template-columns: 1fr; }
  .cz-catalog { grid-template-columns: 1fr 1fr; }
  .cz-controls { grid-template-columns: 1fr 1fr; }
}

/* ---------- Scheibe / wandartiger Träger ---------- */
.wt-d { stroke: #2f8a3e; stroke-width: 3; stroke-dasharray: 8 5; fill: none; }
.wt-z { stroke: var(--pen); stroke-width: 3.4; fill: none; }
.wt-load { stroke: var(--ink); stroke-width: 1.8; }
.wt-load.thin { stroke-width: 1; }
.wt-arrow { fill: var(--ink); }
.wt-wall { fill: #f7f8f3; stroke: var(--ink); stroke-width: 1.6; }
.wt-uband { fill: rgba(166, 31, 24, 0.08); }
.wt-qband { fill: var(--rule); stroke: var(--ink-soft); stroke-width: 0.8; }
.wt-sup { fill: var(--ink-soft); }
.wt-node { fill: var(--ink); }
.wt-dim { stroke: var(--ink-soft); stroke-width: 1; fill: none; }
.wt-t { font-family: var(--font-ui); font-size: 11px; fill: var(--ink-soft); }
.wt-t.strong { fill: var(--ink); font-weight: 600; }
.wt-t.tz { fill: var(--pen); font-weight: 600; }
.wt-t.td { fill: #2f8a3e; font-weight: 600; }
.wt-fig svg { width: 100%; height: auto; display: block; background: #fff; }
.wt-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-family: var(--font-ui); font-size: 0.85rem; margin: 0.4rem 0; }
.wt-legend svg { width: 44px; height: 10px; vertical-align: middle; margin-right: 0.3rem; }

.wt-decide { font-family: var(--font-ui); font-size: 0.85rem; margin: 0.8rem 0 1rem; text-align: center; }
.wt-q { display: inline-block; background: var(--ink); color: var(--sheet); padding: 0.35rem 0.8rem; font-weight: 600; }
.wt-q.small { font-size: 0.8rem; margin-top: 0.3rem; }
.wt-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0.4rem; }
.wt-branches.inner { gap: 0.4rem; }
.wt-branch { border-top: 2px solid var(--ink); padding-top: 0.35rem; min-width: 0; }
.wt-edge { display: block; color: var(--ink-soft); font-size: 0.78rem; margin-bottom: 0.3rem; }
.wt-res { border: 1px solid var(--ink); background: #f7f8f3; padding: 0.4rem; font-weight: 600; }
.wt-res small { font-weight: 400; color: var(--ink-soft); }
.wt-res.a { border: 2px solid var(--pen); }
.wt-res.b { border: 2px solid var(--ballpoint); }

.wt-models { display: grid; grid-template-columns: 1fr; gap: 0.6rem; margin: 0.6rem 0; }
.wt-model { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0.2rem 0.8rem; align-items: center; }
.wt-model figcaption { grid-column: 1 / -1; }
.wt-model .wt-note { border-top: 0; border-left: 1px solid var(--rule); padding: 0 0 0 0.7rem; font-size: 0.86rem; }
.wt-model { margin: 0; border: 1px solid var(--rule); background: #fff; padding: 0.45rem; min-width: 0; }
.wt-model figcaption { font-family: var(--font-ui); font-size: 0.85rem; }
.wt-model svg { width: 100%; height: auto; display: block; }
.wt-note { font-family: var(--font-ui); font-size: 0.8rem; line-height: 1.45; color: var(--ink-soft); border-top: 1px solid var(--rule); padding-top: 0.3rem; }
.wt-note b { color: var(--pen); }
.wt-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.5rem; }
.wt-sum > div { border: 1px solid var(--ink); background: var(--sheet); padding: 0.45rem 0.55rem; font-family: var(--font-ui); min-width: 0; }
.wt-sum span { display: block; font-size: 0.75rem; color: var(--ink-soft); }
.wt-sum b { display: block; font-size: 1.05rem; }
.wt-sum small { display: block; font-size: 0.72rem; color: var(--ink-soft); line-height: 1.3; }
.wt-sum .good { border-color: var(--ok); background: var(--ok-bg); }
.wt-sum .bad { border-color: var(--pen); background: var(--pen-bg); }
.wt-app .ok, .wt-app .note { margin: 0.6rem 0; }

.wb-grid { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 0.8rem; align-items: start; margin-top: 0.6rem; }
.wb-fig { margin: 0; text-align: center; }
.wb-fig svg { width: 100%; height: auto; display: block; }
.wb-fig figcaption { font-family: var(--font-ui); font-size: 0.72rem; color: var(--ink-soft); }
.wb-held { stroke: var(--ink); stroke-width: 3; }
.wb-hatch { stroke: var(--ink); stroke-width: 1; fill: none; }
.wb-free { stroke: var(--ink-soft); stroke-width: 1.4; stroke-dasharray: 5 4; }

@media (max-width: 640px) {
  .wt-branches, .wb-grid { grid-template-columns: 1fr; }
}
.viz.narrow img { max-width: 560px; margin: 0 auto; display: block; }
@media (max-width: 640px) {
  .wt-model { grid-template-columns: 1fr; }
  .wt-model .wt-note { border-left: 0; border-top: 1px solid var(--rule); padding: 0.3rem 0 0; }
}