/* Oswald, selbst gehostet. Das Design beruht auf einer Condensed-Schrift; die
   bisherigen Rückfalloptionen (Arial Narrow, Liberation Sans Narrow) existieren
   auf Linux und Android nicht — dort fiel alles auf normales Arial zurück und
   die typografische Identität verschwand. Eine Variable-Font-Datei, 21 KB,
   deckt 200–700. Lizenz: /assets/fonts/OFL.txt */
@font-face {
  font-family: "Oswald";
  src: url("/assets/fonts/oswald-var.woff2") format("woff2-variations"),
       url("/assets/fonts/oswald-var.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   LSPD Training Manual — Stylesheet
   Farbwelt: Uniformblau (Navy) + Abzeichen-Gold + Aktenpapier
   ========================================================================== */

:root {
  --navy-900: #050d18;
  --navy-800: #081426;
  --navy-700: #0b1c32;
  --navy-600: #10273f;
  --navy-500: #17364f;
  --navy-line: #1e405c;

  --gold-500: #c9a43c;
  --gold-400: #dcbb5c;
  --gold-300: #eed690;
  --gold-dim:  #735c20;   /* war #8a7027 — 4.47:1 auf Aktenpapier */

  --paper:     #faf8f4;
  --paper-alt: #f2eee6;
  --paper-line:#ddd6c8;

  --ink:       #1b1f24;
  --ink-soft:  #434b55;
  --ink-faint: #5f6874;   /* war #767f8a — 3.83:1 auf Aktenpapier, zu wenig */

  /* Gedämpfter Text auf dunklem Grund. Die vorherigen Werte lagen zwischen
     3.0 und 3.8 zu 1 und damit unter WCAG AA für kleine Schrift. */
  --dim-1:     #93a8be;   /* Hinweise, Fußtexte */
  --dim-2:     #8299b0;   /* Labels, Kennzahlen */

  --red-500:   #a8322c;
  --green-500: #2f6b4f;

  --sans: "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, system-ui, sans-serif;
  --cond: "Oswald", "Arial Narrow", "Helvetica Neue Condensed", "Liberation Sans Narrow", var(--sans);
  --serif: Georgia, "Times New Roman", "Liberation Serif", serif;
  --mono: "SF Mono", "Cascadia Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;

  --sidebar-w: 310px;
  --topbar-h: 62px;
}

* { box-sizing: border-box; }

/* Das Attribut hidden muss stärker sein als jede Klassenregel. Ohne diese
   Zeile gewann `.lockbar { display: flex }` gegen das Attribut, und der
   Konfigurator zeigte jedem Besucher dauerhaft „Gesperrte Ansicht“ über
   einem Formular, das sich einwandfrei bearbeiten ließ. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--navy-900);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- Topbar -- */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--topbar-h);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 20px;
  background: linear-gradient(180deg, var(--navy-700) 0%, var(--navy-800) 100%);
  border-bottom: 2px solid var(--gold-dim);
  box-shadow: 0 2px 14px rgba(0,0,0,.45);
}

.topbar__badge { flex: 0 0 auto; display: flex; align-items: center; }
.topbar__badge svg { display: block; height: 42px; width: auto; }

.topbar__titles { flex: 0 0 auto; min-width: 0; }
.topbar__dept {
  font-family: var(--cond);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-300);
  line-height: 1.15;
  white-space: nowrap;
}
.topbar__manual {
  font-family: var(--cond);
  font-size: 11.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #7e93aa;
  white-space: nowrap;
}

.topbar__spacer { flex: 1 1 auto; }

.topbar__motto {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: #6b8099;
  white-space: nowrap;
}

/* Search */
.search {
  position: relative;
  flex: 0 0 auto;
  width: 290px;
}
.search input {
  width: 100%;
  height: 36px;
  padding: 0 34px 0 12px;
  font-family: var(--sans);
  font-size: 14px;
  color: #e8eef4;
  background: var(--navy-900);
  border: 1px solid var(--navy-line);
  border-radius: 3px;
  outline: none;
}
.search input::placeholder { color: #5b6f86; }
.search input:focus { border-color: var(--gold-500); background: #030a12; }
.search__key {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 11px;
  color: #5b6f86;
  border: 1px solid var(--navy-line);
  border-radius: 3px;
  padding: 1px 5px;
  pointer-events: none;
}
.search input:focus + .search__key { display: none; }

.search__results {
  display: none;
  position: absolute;
  top: 42px; right: 0;
  width: 520px;
  max-height: 66vh;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  box-shadow: 0 18px 44px rgba(0,0,0,.5);
}
.search__results.is-open { display: block; }
.search__empty { padding: 16px 18px; color: var(--ink-faint); font-size: 14px; }
.search__hit {
  display: block;
  padding: 11px 16px;
  border-bottom: 1px solid var(--paper-line);
  text-decoration: none;
  color: var(--ink);
}
.search__hit:last-child { border-bottom: 0; }
.search__hit:hover, .search__hit.is-active { background: #eae3d4; }
.search__hit-ch {
  font-family: var(--cond);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.search__hit-title { font-weight: 600; font-size: 14.5px; margin: 1px 0 2px; }
.search__hit-snip { font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
.search__hit-snip mark { background: var(--gold-300); color: var(--ink); padding: 0 1px; }

/* Burger (mobile) */
.burger {
  display: none;
  flex: 0 0 auto;
  width: 38px; height: 34px;
  background: transparent;
  border: 1px solid var(--navy-line);
  border-radius: 3px;
  cursor: pointer;
  padding: 8px 8px;
}
.burger span { display: block; height: 2px; background: var(--gold-400); margin: 3px 0; }

/* --------------------------------------------------------------- Sidebar -- */

.sidebar {
  position: fixed;
  top: var(--topbar-h); bottom: 0; left: 0;
  width: var(--sidebar-w);
  z-index: 50;
  overflow-y: auto;
  background: var(--navy-800);
  border-right: 1px solid var(--navy-line);
  padding: 20px 0 60px;
}
.sidebar::-webkit-scrollbar { width: 9px; }
.sidebar::-webkit-scrollbar-track { background: var(--navy-900); }
.sidebar::-webkit-scrollbar-thumb { background: var(--navy-line); border-radius: 5px; }

.nav__part {
  font-family: var(--cond);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-500);
  padding: 18px 22px 7px;
  border-bottom: 1px solid var(--navy-line);
  margin-bottom: 4px;
}
.nav__part:first-child { padding-top: 4px; }

.nav__link {
  display: flex;
  gap: 11px;
  align-items: baseline;
  padding: 7px 22px 7px 20px;
  text-decoration: none;
  color: #b6c5d4;
  font-size: 14.5px;
  line-height: 1.4;
  border-left: 3px solid transparent;
}
.nav__link:hover { background: var(--navy-700); color: #fff; }
.nav__num {
  flex: 0 0 26px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--gold-dim);
  letter-spacing: .04em;
}
.nav__link.is-current {
  background: var(--navy-600);
  border-left-color: var(--gold-500);
  color: #fff;
  font-weight: 600;
}
.nav__link.is-current .nav__num { color: var(--gold-400); }

/* ----------------------------------------------------------------- Layout - */

.layout {
  margin-left: var(--sidebar-w);
  padding-top: var(--topbar-h);
  min-height: 100vh;
  background: var(--navy-900);
}

.sheet {
  max-width: 1180px;
  margin: 26px auto 60px;
  padding: 0 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 216px;
  gap: 34px;
  align-items: start;
}
.sheet--wide { grid-template-columns: minmax(0, 1fr); }

/* ------------------------------------------------------------- Paper doc -- */

.doc {
  position: relative;
  background: var(--paper);
  border: 1px solid #cfc7b6;
  border-top: 4px solid var(--gold-500);
  border-radius: 2px;
  box-shadow: 0 14px 40px rgba(0,0,0,.42);
  padding: 0 0 54px;
  min-width: 0;
}

/* Aktenkopf */
.doc__header {
  padding: 22px 46px 16px;
  border-bottom: 1px solid var(--paper-line);
  background: linear-gradient(180deg, #fffdf9 0%, var(--paper) 100%);
}
.doc__stamp {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-family: var(--cond);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 14px;
}
.doc__stamp b { color: var(--gold-dim); font-weight: 600; }
.doc__kicker {
  font-family: var(--cond);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.doc__title {
  font-family: var(--cond);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: .005em;
  margin: 4px 0 0;
  color: var(--navy-700);
}

.doc__body { padding: 26px 46px 0; }

/* ----------------------------------------------------------- Typography -- */

.doc__body > *:first-child { margin-top: 0; }

/* Nur im Textkörper: dort ist ein h1 ein Überrest der Markdown-Quelle, deren
   erste Überschrift render_md ohnehin entfernt. Der Titel im Aktenkopf ist
   seit der h1-Umstellung selbst ein h1 und darf hier nicht mitgefangen
   werden — sonst hat die Seite keine sichtbare Überschrift mehr. */
.doc__body h1 { display: none; }

.doc h2 {
  font-family: var(--cond);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--navy-700);
  margin: 42px 0 14px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--gold-500);
  scroll-margin-top: calc(var(--topbar-h) + 16px);
}
.doc h3 {
  font-family: var(--cond);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--navy-600);
  margin: 30px 0 10px;
  scroll-margin-top: calc(var(--topbar-h) + 16px);
}
.doc h4 {
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--navy-600);
  margin: 22px 0 8px;
  scroll-margin-top: calc(var(--topbar-h) + 16px);
}

.doc p { margin: 0 0 14px; }
.doc strong { color: #0c1622; }
.doc em { color: var(--ink-soft); }

.doc a {
  color: #2a5f8f;
  text-decoration: none;
  border-bottom: 1px solid rgba(42,95,143,.35);
}
.doc a:hover { color: var(--red-500); border-bottom-color: var(--red-500); }

.doc ul, .doc ol { margin: 0 0 16px; padding-left: 24px; }
.doc li { margin: 4px 0; }
.doc li > ul, .doc li > ol { margin: 4px 0; }

.doc hr {
  border: 0;
  height: 1px;
  background: var(--paper-line);
  margin: 34px 0;
}

/* Heading-Anker */
.anchor {
  float: left;
  margin-left: -22px;
  width: 22px;
  opacity: 0;
  color: var(--gold-dim) !important;
  border: 0 !important;
  font-weight: 400;
  text-align: left;
}
h2:hover .anchor, h3:hover .anchor, h4:hover .anchor { opacity: 1; }

/* --------------------------------------------------------------- Tables -- */

.table-wrap {
  overflow-x: auto;
  margin: 0 0 20px;
  border: 1px solid var(--paper-line);
  border-radius: 2px;
  background: #fff;
}
.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.doc thead th {
  background: var(--navy-700);
  color: var(--gold-300);
  font-family: var(--cond);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: left;
  padding: 9px 13px;
  white-space: nowrap;
  position: sticky;
  top: 0;
}
.doc tbody td {
  padding: 8px 13px;
  border-bottom: 1px solid #e8e2d6;
  vertical-align: top;
  line-height: 1.5;
}
.doc tbody tr:nth-child(even) { background: #f7f4ee; }
.doc tbody tr:hover { background: #f0ead9; }
.doc tbody tr:last-child td { border-bottom: 0; }
.doc td strong { color: var(--navy-700); }

/* -------------------------------------------------------------- Callouts -- */

.callout {
  position: relative;
  margin: 20px 0 22px;
  padding: 14px 18px 14px 18px;
  border-left: 4px solid var(--ink-faint);
  background: var(--paper-alt);
  border-radius: 0 2px 2px 0;
}
.callout > *:first-child { margin-top: 0; }
.callout > *:last-child { margin-bottom: 0; }
.callout__label {
  display: block;
  font-family: var(--cond);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 7px;
  color: var(--ink-faint);
}

.callout--note   { border-left-color: var(--navy-500); background: #eef1f5; }
.callout--note   .callout__label { color: var(--navy-500); }

.callout--game   { border-left-color: var(--green-500); background: #ecf3ee; }
.callout--game   .callout__label { color: var(--green-500); }

.callout--server { border-left-color: var(--gold-500); background: #fbf4e2; }
.callout--server .callout__label { color: var(--gold-dim); }

.callout--warn   { border-left-color: var(--red-500); background: #f9eceb; }
.callout--warn   .callout__label { color: var(--red-500); }

/* Funkspruch — Funkprotokoll-Optik */
.callout--radio {
  border-left-color: var(--gold-500);
  background: var(--navy-800);
  color: var(--gold-300);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  padding: 15px 20px;
}
.callout--radio .callout__label { color: var(--gold-500); font-family: var(--cond); }
.callout--radio .callout__label::after {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-left: 9px;
  border-radius: 50%;
  background: var(--red-500);
  vertical-align: middle;
}
.callout--radio p { margin: 0 0 8px; }
.callout--radio p:last-child { margin-bottom: 0; }
.callout--radio strong { color: #fff; }
.callout--radio em { color: var(--gold-400); }
.callout--radio code { background: rgba(255,255,255,.08); color: var(--gold-300); }

/* Wortlaut — gesprochene Formulierung */
.callout--speech {
  border-left-color: var(--navy-500);
  background: #fffdf7;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  color: #2b3138;
  padding: 15px 22px 15px 52px;
}
.callout--speech::before {
  content: "\201C";
  position: absolute;
  left: 15px; top: 16px;
  font-family: var(--serif);
  font-size: 52px;
  line-height: .8;
  color: var(--gold-500);
  opacity: .5;
}
.callout--speech .callout__label { font-family: var(--cond); color: var(--navy-500); }
.callout--speech p { margin: 0 0 10px; }
.callout--speech p:last-child { margin-bottom: 0; }

.callout--rule {
  border-left-color: var(--gold-500);
  background: var(--navy-700);
  color: #e6edf4;
  padding: 18px 22px;
}
.callout--rule .callout__label { color: var(--gold-400); }
.callout--rule strong { color: #fff; }
.callout--rule em { color: var(--gold-300); }
.callout--rule a { color: var(--gold-300); border-bottom-color: rgba(238,214,144,.4); }
.callout--rule code { background: rgba(255,255,255,.1); color: var(--gold-300); }

/* ----------------------------------------------------------------- Code -- */

.doc code {
  font-family: var(--mono);
  font-size: .88em;
  background: #ece6d9;
  color: #6b3d12;
  padding: 1.5px 5px;
  border-radius: 2px;
  white-space: nowrap;
}
.doc pre {
  margin: 0 0 20px;
  padding: 16px 18px;
  overflow-x: auto;
  background: var(--navy-900);
  border: 1px solid var(--navy-line);
  border-left: 4px solid var(--gold-500);
  border-radius: 2px;
  line-height: 1.42;
}
.doc pre code {
  background: none;
  color: #cddbe8;
  padding: 0;
  font-size: 12.6px;
  white-space: pre;
}
/* Die Funkcode-Karte in Anhang A */
.doc pre.is-card code { font-size: 11.2px; color: var(--gold-300); line-height: 1.3; }

/* -------------------------------------------------------------- Rechts-TOC */

.toc {
  position: sticky;
  top: calc(var(--topbar-h) + 26px);
  max-height: calc(100vh - var(--topbar-h) - 60px);
  overflow-y: auto;
  font-size: 13.5px;
}
.toc__label {
  font-family: var(--cond);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-500);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--navy-line);
  margin-bottom: 9px;
}
.toc a {
  display: block;
  padding: 4px 0 4px 11px;
  color: #90a4b8;
  text-decoration: none;
  border-left: 2px solid var(--navy-line);
  line-height: 1.35;
}
.toc a:hover { color: #fff; border-left-color: var(--gold-500); }
.toc a.is-active { color: var(--gold-300); border-left-color: var(--gold-500); }
.toc a.lvl-3 { padding-left: 22px; font-size: 12.8px; color: #77899c; }

/* ------------------------------------------------------------- Prev/Next -- */

.pager {
  display: flex;
  gap: 14px;
  margin: 28px 46px 0;
  padding-top: 22px;
  border-top: 1px solid var(--paper-line);
}
.pager a {
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--paper-line);
  border-radius: 2px;
  text-decoration: none;
  background: #fff;
}
.pager a:hover { border-color: var(--gold-500); background: #fffdf6; }
.pager__dir {
  display: block;
  font-family: var(--cond);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 3px;
}
.pager__t { color: var(--navy-700); font-weight: 600; font-size: 14.5px; }
.pager .is-next { text-align: right; }
.pager .is-spacer { border: 0; background: none; pointer-events: none; }

/* ---------------------------------------------------------------- Cover -- */

.cover {
  background: linear-gradient(165deg, var(--navy-700) 0%, var(--navy-900) 100%);
  border: 1px solid var(--navy-line);
  border-top: 4px solid var(--gold-500);
  border-radius: 2px;
  box-shadow: 0 14px 40px rgba(0,0,0,.5);
  padding: 46px 46px 40px;
  text-align: center;
  margin-bottom: 26px;
}
.cover svg { height: 116px; width: auto; margin-bottom: 18px; }
.cover__dept {
  font-family: var(--cond);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.cover__rule {
  width: 190px; height: 2px;
  background: var(--gold-dim);
  margin: 16px auto;
}
.cover__title {
  font-family: var(--cond);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.06;
  margin: 0;
}
.cover__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: #8ba2b9;
  margin-top: 12px;
}
.cover__meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 26px;
  font-family: var(--cond);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #66809a;
}
.cover__meta b { color: var(--gold-400); font-weight: 600; }

/* ------------------------------------------------------------------ Misc -- */

.doc__footer {
  margin: 34px 46px 0;
  padding-top: 18px;
  border-top: 1px solid var(--paper-line);
  font-family: var(--cond);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.doc__footer a { color: var(--ink-faint); border: 0; }
.doc__footer a:hover { color: var(--red-500); }

.scrim {
  display: none;
  position: fixed;
  inset: var(--topbar-h) 0 0 0;
  background: rgba(2,7,14,.6);
  z-index: 45;
}

/* ----------------------------------------------------------- Responsive -- */

@media (max-width: 1080px) {
  .sheet { grid-template-columns: minmax(0,1fr); }
  .toc { display: none; }
}
@media (max-width: 900px) {
  :root { --sidebar-w: 290px; }
  .burger { display: block; }
  .layout { margin-left: 0; }
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .scrim { display: block; }
  .topbar__motto, .topbar__manual { display: none; }
  .search { width: 190px; }
  .search__results { width: min(92vw, 520px); right: -60px; }
  .doc__header, .doc__body, .pager, .doc__footer { padding-left: 20px; padding-right: 20px; }
  .pager, .doc__footer { margin-left: 20px; margin-right: 20px; }
  .doc__title { font-size: 26px; }
  .cover { padding: 32px 20px; }
  .cover__title { font-size: 30px; }
}
@media (max-width: 620px) {
  .pager { flex-direction: column; }
  .search { width: 130px; }
}

/* ---------------------------------------------------------------- Print -- */

@media print {
  :root { --topbar-h: 0px; }
  body { background: #fff; font-size: 10.5pt; }
  .topbar, .sidebar, .toc, .pager, .scrim, .anchor, .burger { display: none !important; }
  .layout { margin: 0; padding: 0; background: #fff; }
  .sheet { display: block; max-width: none; margin: 0; padding: 0; }
  .doc, .cover {
    box-shadow: none;
    border: 0;
    background: #fff;
    padding: 0;
  }
  .doc__header, .doc__body, .doc__footer { padding-left: 0; padding-right: 0; }
  .doc__footer { margin-left: 0; margin-right: 0; }
  .doc__title { color: #000; font-size: 20pt; }
  .doc h2 { color: #000; page-break-after: avoid; border-bottom: 1.5pt solid #000; }
  .doc h3, .doc h4 { color: #000; page-break-after: avoid; }
  .table-wrap { overflow: visible; border: .5pt solid #999; }
  .doc thead th { background: #e8e8e8 !important; color: #000 !important; position: static; }
  .doc table, .callout, .doc pre { page-break-inside: avoid; }
  .callout--rule { background: #f0f0f0 !important; color: #000 !important; }
  .callout--radio { background: #f0f0f0 !important; color: #000 !important; }
  .callout--radio .callout__label::after { display: none; }
  .callout--speech::before { color: #999; }
  .callout--rule strong, .callout--rule em { color: #000 !important; }
  .doc pre { background: #f6f6f6; border: .5pt solid #999; }
  .doc pre code { color: #000; }
  .cover { color: #000; }
  .cover__dept, .cover__title { color: #000; }
  .doc a { color: #000; border: 0; }
}

/* ==========================================================================
   Platform-Erweiterung: Bereichsfarben, Kopfzeile, Startseite
   ========================================================================== */

/* Akzentfarbe pro Bereich. build.py setzt --dept-accent* am <body>; die
   Gold-Variablen des Grundlayouts leiten sich daraus ab, damit jedes Bauteil
   automatisch mitzieht. */
:root {
  --dept-accent:       #c9a43c;
  --dept-accent-dim:   #8a7027;
  --dept-accent-light: #eed690;
  --dept-accent-ink:   #6f591f;   /* Akzent für Text auf Aktenpapier */
}
body {
  --gold-500: var(--dept-accent);
  --gold-400: var(--dept-accent-light);
  --gold-300: var(--dept-accent-light);
  --gold-dim: var(--dept-accent-dim);
}

/* ------------------------------------------------------- Kopfzeile neu -- */

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
  text-decoration: none;
}
.topbar__mark {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 1.5px solid var(--dept-accent-dim);
  border-radius: 3px;
  background: var(--navy-900);
  color: var(--dept-accent-light);
  font-family: var(--cond);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
}
.topbar__brand:hover .topbar__mark { border-color: var(--dept-accent); }
.topbar__titles { display: block; }

/* Bereichsumschalter */
.deptsw {
  display: flex;
  align-items: stretch;
  gap: 4px;
  flex: 0 0 auto;
  margin-left: 12px;
  padding-left: 14px;
  border-left: 1px solid var(--navy-line);
}
.deptsw__home, .deptsw__item {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--navy-line);
  border-radius: 3px;
  background: var(--navy-900);
  color: #8fa4ba;
  font-family: var(--cond);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.deptsw__home:hover, .deptsw__item:hover {
  border-color: var(--dept-accent-dim);
  color: #fff;
}
.deptsw__item.is-active {
  border-color: var(--dept-accent);
  color: var(--dept-accent-light);
  background: var(--navy-700);
}

/* Bereichskopf in der Seitenleiste */
.nav__dept {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 20px 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--navy-line);
}
.nav__dept svg { height: 46px; width: auto; flex: 0 0 auto; }
.nav__dept-name {
  font-family: var(--cond);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dept-accent-light);
  line-height: 1.1;
}
.nav__dept-tag {
  font-family: var(--cond);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6b8099;
}

/* ------------------------------------------------------- Startseite ----- */

.layout--full { margin-left: 0; }
body.is-landing .sheet { max-width: 1120px; }

.hero {
  padding: 54px 0 34px;
  text-align: center;
}
.hero__eyebrow {
  font-family: var(--cond);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--dept-accent-dim);
}
.hero__title {
  font-family: var(--cond);
  font-size: clamp(34px, 6vw, 62px);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
  margin: 12px 0 0;
}
.hero__sub {
  max-width: 640px;
  margin: 18px auto 0;
  font-size: 17px;
  line-height: 1.6;
  color: #93a8be;
}
.hero__meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 26px;
  font-family: var(--cond);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #66809a;
}
.hero__meta b { color: var(--dept-accent-light); font-weight: 600; }

/* Kacheln */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 18px;
  margin-bottom: 34px;
}
.tiles--small { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 14px; }

.tile {
  display: flex;
  gap: 18px;
  padding: 22px 22px 20px;
  background: linear-gradient(165deg, var(--navy-700) 0%, var(--navy-800) 100%);
  border: 1px solid var(--navy-line);
  border-top: 3px solid var(--dept-accent);
  border-radius: 2px;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(0,0,0,.34);
  transition: transform .13s ease, border-color .13s ease, box-shadow .13s ease;
}
.tile:hover {
  transform: translateY(-2px);
  border-color: var(--dept-accent-dim);
  border-top-color: var(--dept-accent-light);
  box-shadow: 0 16px 38px rgba(0,0,0,.46);
}
.tile__badge { flex: 0 0 auto; }
.tile__badge svg { height: 92px; width: auto; display: block; }
.tile__body { min-width: 0; }
.tile__tag {
  font-family: var(--cond);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dept-accent);
}
.tile__name {
  font-family: var(--cond);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  margin: 3px 0 8px;
}
.tile__desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: #93a8be;
}
.tile__meta {
  display: flex;
  gap: 18px;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--navy-line);
  font-family: var(--cond);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #66809a;
}
.tile__meta b { color: var(--dept-accent-light); font-weight: 600; }

.tile.is-planned {
  opacity: .5;
  box-shadow: none;
  border-top-style: dashed;
  cursor: default;
}
.tile.is-planned .tile__badge svg { height: 62px; filter: grayscale(.55); }
.tile.is-planned .tile__name { font-size: 17px; }
.tile.is-planned .tile__desc { font-size: 13.5px; }

/* Nutzen-Streifen */
.strip {
  padding: 24px 26px;
  margin-bottom: 34px;
  background: var(--navy-800);
  border: 1px solid var(--navy-line);
  border-left: 3px solid var(--dept-accent-dim);
  border-radius: 2px;
}
.strip__label {
  font-family: var(--cond);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dept-accent);
  margin-bottom: 14px;
}
.strip__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 18px 26px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #93a8be;
}
.strip__grid b { color: #e4ecf4; }
.strip__grid code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--navy-900);
  color: var(--dept-accent-light);
  padding: 1px 5px;
  border-radius: 2px;
}

.planned { margin-bottom: 40px; }
.planned__label {
  font-family: var(--cond);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #5b7089;
  padding-bottom: 9px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--navy-line);
}

.sitefoot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding: 22px 0 50px;
  border-top: 1px solid var(--navy-line);
  font-family: var(--cond);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #5b7089;
}

@media (max-width: 900px) {
  .deptsw { margin-left: 6px; padding-left: 8px; }
  .deptsw__item { padding: 0 7px; font-size: 11.5px; min-width: 28px; }
  /* Stand aus der Zeit, als die Säulen in Reihe eins lagen. Seit die
     Kopfzeile zweireihig ist, ist hier Platz — und ohne den Namen fehlte
     unterwegs jeder Hinweis, in welchem Handbuch man liest. */
  .topbar__titles { display: block; min-width: 0; flex: 1 1 auto; }
  .hero { padding: 34px 0 24px; }
  .hero__title { font-size: clamp(26px, 8vw, 40px); }
  .hero__sub { font-size: 15.5px; }
  .tile { flex-direction: column; gap: 12px; }
  .tile__badge svg { height: 68px; }
}
@media (max-width: 620px) {
  /* Bleibt sichtbar: seit der Säulenstreifen wischbar ist, kostet das keinen
     Platz mehr, und es ist der kürzeste Weg zurück zum Hub. */
  .deptsw__home { display: grid; }
}

@media print {
  .deptsw, .topbar__brand { display: none !important; }
}

/* ==========================================================================
   Hub: Hero-Aktionen, Zielgruppenkarten, Säulenkopf, Bereichswechsler
   ========================================================================== */

/* Buttons */
.hero__cta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.btn {
  display: inline-block;
  padding: 11px 22px;
  font-family: var(--cond);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: #cddbe8;
  background: var(--navy-800);
  border: 1px solid var(--navy-line);
  border-radius: 3px;
}
.btn:hover { border-color: var(--dept-accent-dim); color: #fff; background: var(--navy-700); }
.btn--primary {
  background: var(--dept-accent);
  border-color: var(--dept-accent);
  color: #0b1c32;
}
.btn--primary:hover {
  background: var(--dept-accent-light);
  border-color: var(--dept-accent-light);
  color: #050d18;
}

/* Zielgruppenkarten */
.audience { margin-bottom: 34px; }
.audience__label {
  font-family: var(--cond);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dept-accent);
  padding-bottom: 9px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--navy-line);
}
.audience__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 16px;
}
.acard {
  display: block;
  padding: 20px 22px;
  background: var(--navy-800);
  border: 1px solid var(--navy-line);
  border-left: 3px solid var(--dept-accent-dim);
  border-radius: 2px;
  text-decoration: none;
}
.acard:hover { border-left-color: var(--dept-accent); background: var(--navy-700); }
.acard__who {
  font-family: var(--cond);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  margin-bottom: 8px;
}
.acard p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.55; color: #93a8be; }
.acard__go {
  font-family: var(--cond);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dept-accent);
}

/* Kopf einer Säulenseite */
.phead {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  padding: 40px 0 30px;
}
.phead__badge { flex: 0 0 auto; }
.phead__badge svg { height: 124px; width: auto; display: block; }
.phead__kicker {
  font-family: var(--cond);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--dept-accent);
}
.phead__title {
  font-family: var(--cond);
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
  margin: 6px 0 0;
}
.phead__sub {
  max-width: 62ch;
  margin: 14px 0 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: #93a8be;
}
.phead__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 20px;
  font-family: var(--cond);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #66809a;
}
.phead__meta b { color: var(--dept-accent-light); font-weight: 600; }

/* Angekündigte Säule in der Kopfzeile */
.deptsw__item.is-soon {
  opacity: .42;
  cursor: default;
  border-style: dashed;
}
.deptsw__item.is-soon:hover { border-color: var(--navy-line); color: #8fa4ba; }

/* Wechsel zu anderen Handbüchern, am Fuß der Seitenleiste */
.deptpick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 22px 20px 0;
  padding-top: 16px;
  border-top: 1px solid var(--navy-line);
}
.deptpick__label {
  flex: 1 0 100%;
  font-family: var(--cond);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #5b7089;
  margin-bottom: 2px;
}
.deptpick__item {
  padding: 4px 11px;
  font-family: var(--cond);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dept-accent-light);
  background: var(--navy-900);
  border: 1px solid var(--dept-accent-dim);
  border-radius: 3px;
}
.deptpick__item:hover { border-color: var(--dept-accent); color: #fff; }

@media (max-width: 760px) {
  .phead { flex-direction: column; gap: 16px; padding-top: 26px; }
  .phead__badge svg { height: 84px; }
}

@media print {
  .hero__cta, .audience, .deptpick { display: none !important; }
}

/* ==========================================================================
   Apps: Bedienleisten, Karteikarten, Tabellen, Tool-Übersicht
   ========================================================================== */

.app {
  background: var(--navy-800);
  border: 1px solid var(--navy-line);
  border-top: 3px solid var(--dept-accent);
  border-radius: 2px;
  padding: 24px 26px 28px;
  margin-bottom: 26px;
  box-shadow: 0 10px 26px rgba(0,0,0,.34);
}
.app__back {
  display: inline-block;
  margin: 22px 0 -12px;
  font-family: var(--cond);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7e93aa;
  text-decoration: none;
}
.app__back:hover { color: var(--dept-accent-light); }
.phead--app { padding: 26px 0 22px; }

.app__refs {
  padding: 18px 22px;
  margin-bottom: 40px;
  background: var(--navy-800);
  border: 1px solid var(--navy-line);
  border-left: 3px solid var(--dept-accent-dim);
  border-radius: 2px;
}
.app__refs-label {
  font-family: var(--cond);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dept-accent);
  margin-bottom: 10px;
}
.app__refs ul { margin: 0; padding-left: 20px; color: #93a8be; font-size: 14.5px; }
.app__refs li { margin: 4px 0; }
.app__refs a { color: #a8bdd2; text-decoration: none; border-bottom: 1px solid rgba(168,189,210,.3); }
.app__refs a:hover { color: var(--dept-accent-light); border-bottom-color: var(--dept-accent); }

/* Bedienleiste */
.ctrl {
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--navy-line);
}
.ctrl__row { display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: flex-end; }
.ctrl__row + .ctrl__row { margin-top: 18px; }
.ctrl__row--tabs { gap: 8px; }

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field--wide { width: 100%; margin-bottom: 16px; }
.field label {
  font-family: var(--cond);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7e93aa;
}
.field select, .field input[type="search"], .field input[type="text"],
.field input[type="number"], .field textarea {
  font-family: var(--sans);
  font-size: 14.5px;
  color: #e8eef4;
  background: var(--navy-900);
  border: 1px solid var(--navy-line);
  border-radius: 3px;
  padding: 8px 11px;
  min-width: 170px;
  outline: none;
}
.field--wide input, .field--wide textarea, .field--wide select { width: 100%; min-width: 0; }
.field select:focus, .field input:focus, .field textarea:focus { border-color: var(--dept-accent); }
.field--check { justify-content: flex-end; }
.field--check label {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 14.5px; letter-spacing: 0;
  text-transform: none; color: #cddbe8; cursor: pointer;
}
.field--check input { accent-color: var(--dept-accent); width: 16px; height: 16px; }
.field__hint { font-size: 12px; color: #66809a; }

.tab {
  padding: 8px 18px;
  font-family: var(--cond);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8fa4ba;
  background: var(--navy-900);
  border: 1px solid var(--navy-line);
  border-radius: 3px;
  cursor: pointer;
}
.tab:hover { color: #fff; border-color: var(--dept-accent-dim); }
.tab.is-active {
  color: #0b1c32;
  background: var(--dept-accent);
  border-color: var(--dept-accent);
}

/* Kennzahlen */
.stats { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-bottom: 20px; }
.stat {
  font-family: var(--cond);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #66809a;
}
.stat b {
  display: inline-block;
  min-width: 1.4em;
  font-size: 17px;
  color: var(--dept-accent-light);
}

/* Karteikarte */
.flash {
  position: relative;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 34px 26px 44px;
  text-align: center;
  background: linear-gradient(165deg, var(--navy-700) 0%, var(--navy-900) 100%);
  border: 1px solid var(--navy-line);
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
}
.flash:hover { border-color: var(--dept-accent-dim); }
.flash__group {
  position: absolute; top: 12px; left: 16px;
  font-family: var(--cond); font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; color: #5b7089;
}
.flash__front { font-size: 23px; line-height: 1.35; color: #fff; max-width: 46ch; }
.flash__front.is-code, .flash__back.is-code {
  font-family: var(--mono);
  font-size: 38px;
  letter-spacing: .02em;
  color: var(--dept-accent-light);
}
.flash__back {
  font-size: 19px;
  line-height: 1.45;
  color: var(--dept-accent-light);
  max-width: 50ch;
  padding-top: 14px;
  border-top: 1px solid var(--navy-line);
}
.flash__hint {
  position: absolute; bottom: 14px; left: 0; right: 0;
  font-family: var(--cond); font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: #4f6478;
}

.btnrow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.btnrow .btn { cursor: pointer; }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn--ghost { background: transparent; }
.btn kbd {
  font-family: var(--mono);
  font-size: 10px;
  margin-left: 7px;
  padding: 1px 5px;
  border: 1px solid currentColor;
  border-radius: 2px;
  opacity: .6;
}
button.btn { font-family: var(--cond); }

.done {
  padding: 26px;
  text-align: center;
  background: var(--navy-700);
  border: 1px solid var(--dept-accent-dim);
  border-radius: 3px;
}
.done__title {
  font-family: var(--cond);
  font-size: 22px;
  font-weight: 700;
  color: var(--dept-accent-light);
  margin-bottom: 8px;
}
.done p { color: #93a8be; margin: 0 0 18px; }

/* Datentabelle in Apps */
.datatable { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.datatable thead th {
  position: sticky; top: var(--topbar-h);
  background: var(--navy-700);
  color: var(--dept-accent-light);
  font-family: var(--cond);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: left;
  padding: 9px 13px;
  white-space: nowrap;
}
.datatable tbody td {
  padding: 8px 13px;
  border-bottom: 1px solid var(--navy-line);
  color: #cddbe8;
  vertical-align: top;
}
.datatable tbody tr:nth-child(even) { background: rgba(255,255,255,.02); }
.datatable tbody tr:hover { background: var(--navy-700); }
.app .table-wrap {
  max-height: 62vh;
  overflow: auto;
  border: 1px solid var(--navy-line);
  border-radius: 2px;
  background: var(--navy-900);
}
.mono { font-family: var(--mono); color: var(--dept-accent-light) !important; white-space: nowrap; }
.muted { color: #66809a !important; font-size: 13px; }
.pill {
  display: inline-block;
  font-family: var(--cond);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 1px 6px;
  margin-left: 6px;
  color: var(--dept-accent);
  border: 1px solid var(--dept-accent-dim);
  border-radius: 2px;
  vertical-align: middle;
}

/* Tool-Übersicht */
.toolgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 16px;
  margin-bottom: 40px;
}
.tool {
  display: block;
  padding: 22px;
  background: linear-gradient(165deg, var(--navy-700) 0%, var(--navy-800) 100%);
  border: 1px solid var(--navy-line);
  border-top: 3px solid var(--dept-accent);
  border-radius: 2px;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(0,0,0,.3);
}
.tool:hover { border-color: var(--dept-accent-dim); transform: translateY(-2px); }
.tool { transition: transform .13s ease, border-color .13s ease; }
.tool__kicker {
  font-family: var(--cond);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dept-accent);
}
.tool__name {
  font-family: var(--cond);
  font-size: 21px;
  font-weight: 700;
  color: #fff;
  margin: 3px 0 8px;
}
.tool__desc { margin: 0 0 14px; font-size: 14.5px; line-height: 1.55; color: #93a8be; }
.tool__go {
  font-family: var(--cond);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dept-accent);
}

@media (max-width: 620px) {
  .app { padding: 18px 16px 22px; }
  .flash__front.is-code, .flash__back.is-code { font-size: 28px; }
  .flash__front { font-size: 19px; }
}

/* Prüfungs- und Szenariokarten, Ausgabefelder */
.qcard, .scen {
  padding: 24px 26px;
  background: linear-gradient(165deg, var(--navy-700) 0%, var(--navy-900) 100%);
  border: 1px solid var(--navy-line);
  border-radius: 3px;
}
.qcard__meta, .scen__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  font-family: var(--cond); font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase; color: #5b7089;
  margin-bottom: 14px;
}
.qcard__q, .scen__lage { font-size: 19px; line-height: 1.5; color: #fff; }
.qcard__a {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--navy-line);
  font-size: 16px; line-height: 1.62; color: var(--dept-accent-light);
}
.qcard__ref { margin: 14px 0 0; font-size: 12.5px; color: #66809a; }
.qcard__ref a { color: #8fa4ba; }

.scen__block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--navy-line); }
.scen__label {
  font-family: var(--cond); font-size: 10.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--dept-accent); margin-bottom: 7px;
}
.scen__block p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #cddbe8; }
.scen__block--fail .scen__label { color: var(--red-500); }
.scen__block--fail p { color: #e7b3ae; }

.done__title.is-pass { color: #7fd396; }
.done__title.is-fail { color: #e08a82; }
.missed { text-align: left; margin: 4px 0 20px; }
.missed__label {
  font-family: var(--cond); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--dept-accent); margin-bottom: 8px;
}
.missed ul { margin: 0; padding-left: 20px; color: #b6c5d4; font-size: 14.5px; }
.missed li { margin: 5px 0; }
.missed a { color: var(--dept-accent-light); }

.out {
  margin-top: 22px; padding: 20px 22px;
  background: var(--navy-900);
  border: 1px solid var(--navy-line);
  border-left: 3px solid var(--dept-accent);
  border-radius: 2px;
}
.out__label {
  font-family: var(--cond); font-size: 10.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--dept-accent); margin-bottom: 8px;
}
.out__big { font-size: 34px; letter-spacing: .03em; }
.out__say { margin-top: 8px; font-size: 15px; color: #cddbe8; }
.out__note { margin-top: 12px; font-size: 14px; line-height: 1.55; color: #8fa4ba; }
.out p { margin: 0 0 8px; font-size: 15px; line-height: 1.6; color: #cddbe8; }
.out p:last-child { margin-bottom: 0; }
.out b { color: #fff; }

.app__aside { margin-bottom: 40px; }
.app__aside details {
  background: var(--navy-800);
  border: 1px solid var(--navy-line);
  border-radius: 2px;
  margin-bottom: 10px;
}
.app__aside summary {
  padding: 13px 18px;
  font-family: var(--cond); font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--dept-accent-light); cursor: pointer;
}
.app__aside summary:hover { color: #fff; }
.app__aside > details > *:not(summary) { margin: 0 18px 16px; }

/* Druckbarer Prüfungsbogen */
.qsheet { background: var(--paper); color: var(--ink); padding: 26px 30px; border-radius: 2px; }
.qsheet__head {
  font-family: var(--cond); font-size: 15px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--navy-700);
  padding-bottom: 12px; margin-bottom: 18px; border-bottom: 2px solid var(--gold-500);
}
.qsheet__fields { margin-top: 10px; font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }
.qsheet__list { margin: 0; padding-left: 26px; }
.qsheet__item { margin-bottom: 18px; }
.qsheet__q { display: block; font-size: 15.5px; line-height: 1.5; }
.qsheet__part {
  display: block; margin-top: 3px;
  font-family: var(--cond); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
}
.qsheet__lines {
  display: block; height: 44px; margin-top: 8px;
  border-bottom: 1px solid var(--paper-line);
  box-shadow: 0 -22px 0 -21px var(--paper-line);
}
.qsheet .pill { color: var(--gold-dim); border-color: var(--gold-dim); }
.qsheet__keys { margin-top: 34px; padding-top: 20px; border-top: 2px solid var(--gold-500); }
.qsheet__keys ol { padding-left: 26px; }
.qsheet__keys li { margin-bottom: 10px; font-size: 14.5px; line-height: 1.55; }

@media print {
  body.print-sheet .app { background: #fff; border: 0; padding: 0; box-shadow: none; }
  body.print-sheet .ctrl, body.print-sheet .btnrow, body.print-sheet .phead,
  body.print-sheet .app__refs, body.print-sheet .muted, body.print-sheet .app__back,
  body.print-sheet #pg-quiz { display: none !important; }
  .qsheet { padding: 0; }
  .qsheet__keys { page-break-before: always; }
  .qsheet__item { page-break-inside: avoid; }
}

/* ==========================================================================
   Konfigurator
   ========================================================================== */

.konf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 26px;
  align-items: start;
  margin-bottom: 26px;
}
.konf__form { min-width: 0; }
.konf__sticky { position: sticky; top: calc(var(--topbar-h) + 22px); }
.konf__side .out { margin-top: 0; margin-bottom: 14px; }
.btnrow--stack { flex-direction: column; }
.btnrow--stack .btn { width: 100%; text-align: center; }

.ksec {
  background: var(--navy-800);
  border: 1px solid var(--navy-line);
  border-left: 3px solid var(--dept-accent-dim);
  border-radius: 2px;
  padding: 20px 22px 22px;
  margin-bottom: 14px;
}
.ksec__head { display: flex; align-items: center; gap: 12px; }
.ksec__n {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  font-family: var(--cond); font-size: 13px; font-weight: 700;
  color: #0b1c32; background: var(--dept-accent);
  border-radius: 50%;
}
.ksec h2 {
  font-family: var(--cond); font-size: 19px; font-weight: 700;
  letter-spacing: .04em; color: #fff; margin: 0;
  border: 0; padding: 0;
}
.ksec__hint { margin: 10px 0 0; font-size: 14px; color: #8fa4ba; }
.kgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 16px 22px;
  margin-top: 18px;
}
.kfield { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.kfield > label {
  font-family: var(--cond); font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: #7e93aa;
}
.kfield input[type="text"], .kfield input[type="number"], .kfield select {
  font-family: var(--sans); font-size: 14.5px; color: #e8eef4;
  background: var(--navy-900); border: 1px solid var(--navy-line);
  border-radius: 3px; padding: 8px 11px; outline: none; width: 100%;
}
.kfield input:focus, .kfield select:focus { border-color: var(--dept-accent); }
.kfield--check > label {
  display: flex; align-items: flex-start; gap: 9px;
  font-family: var(--sans); font-size: 14.5px; letter-spacing: 0;
  text-transform: none; color: #cddbe8; cursor: pointer; line-height: 1.45;
}
.kfield--check input { accent-color: var(--dept-accent); width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; }
.kfield .field__hint { font-size: 12.5px; line-height: 1.45; color: #66809a; }
.kmultibox { display: flex; flex-direction: column; gap: 6px; }
.kmulti {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: #cddbe8; cursor: pointer;
}
.kmulti input { accent-color: var(--dept-accent); width: 15px; height: 15px; }

.konf__preview { margin-bottom: 40px; }
.preview {
  max-height: 70vh;
  overflow: auto;
  margin: 14px 0 0;
  padding: 22px 24px;
  background: var(--navy-900);
  border: 1px solid var(--navy-line);
  border-left: 3px solid var(--dept-accent);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 12.6px;
  line-height: 1.6;
  color: #cddbe8;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 1000px) {
  .konf { grid-template-columns: minmax(0, 1fr); }
  .konf__sticky { position: static; }
  .konf__side .out { margin-bottom: 14px; }
}

/* ==========================================================================
   Vorlagen
   ========================================================================== */

.vgroup { margin-bottom: 34px; }
.vgroup__label {
  font-family: var(--cond);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dept-accent);
  padding-bottom: 9px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--navy-line);
}
.vgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 16px;
}
.vcard {
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
  background: var(--navy-800);
  border: 1px solid var(--navy-line);
  border-left: 3px solid var(--dept-accent-dim);
  border-radius: 2px;
}
.vcard:hover { border-left-color: var(--dept-accent); }
.vcard__who {
  font-family: var(--cond);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dept-accent);
}
.vcard__name {
  font-family: var(--cond);
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  margin: 3px 0 8px;
  line-height: 1.2;
}
.vcard__desc {
  flex: 1 1 auto;
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.55;
  color: #93a8be;
}
.vcard__row { display: flex; flex-wrap: wrap; gap: 8px; }
.vcard__row .btn { padding: 8px 15px; font-size: 12.5px; }

/* ==========================================================================
   Seitenweiter Fußbereich — hier steht, was diese Seite ist
   ========================================================================== */

.pagefoot {
  margin-top: 50px;
  border-top: 1px solid var(--navy-line);
  background: var(--navy-900);
}
.pagefoot__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 26px 26px 44px;
}
.pagefoot__brand {
  font-family: var(--cond);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #5b7089;
  margin-bottom: 10px;
}
.pagefoot__legal {
  max-width: 78ch;
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #4f6478;
}
.pagefoot__links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.pagefoot__links a {
  font-family: var(--cond);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6b8099;
  text-decoration: none;
}
.pagefoot__links a:hover { color: var(--dept-accent-light); }

/* ==========================================================================
   Betrieb und Regelwerk
   ========================================================================== */

/* Dokumente außerhalb der Spielwelt: kein Aktenpapier, sondern nüchtern */
.doc--ooc { border-top-color: var(--dept-accent-dim); }
.doc--ooc .doc__header { background: var(--paper-alt); }

.hinw { margin-bottom: 40px; }
.hinw > h2 {
  font-family: var(--cond);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dept-accent-light);
  margin: 0 0 4px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--dept-accent-dim);
}
.hgroup > h3 {
  font-family: var(--cond);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #93a8be;
  margin: 26px 0 10px;
  scroll-margin-top: calc(var(--topbar-h) + 80px);
}
/* color: inherit reicht hier nicht — ohne eigene Farbe nimmt der Anker das
   Browser-Blau, das auf Navy bei 2.07:1 liegt. */
.hgroup > h3 a { color: #93a8be; text-decoration: none; }
.hgroup > h3 a:hover { color: var(--dept-accent-light); }

.note {
  padding: 16px 20px;
  margin-bottom: 12px;
  background: var(--navy-800);
  border: 1px solid var(--navy-line);
  border-left: 3px solid var(--dept-accent-dim);
  border-radius: 2px;
  font-size: 14.5px;
  line-height: 1.62;
  color: #b6c5d4;
}
.note__head {
  font-family: var(--cond);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dept-accent);
  margin-bottom: 8px;
}
.note > *:first-child { margin-top: 0; }
.note > *:last-child { margin-bottom: 0; }
.note p { margin: 0 0 10px; }
.note strong { color: #e4ecf4; }
.note code {
  font-family: var(--mono); font-size: .88em;
  background: var(--navy-900); color: var(--dept-accent-light);
  padding: 1px 5px; border-radius: 2px;
}
.note table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 8px 0 12px; }
.note th {
  text-align: left; padding: 6px 10px;
  font-family: var(--cond); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--dept-accent); border-bottom: 1px solid var(--dept-accent-dim);
}
.note td { padding: 6px 10px; border-bottom: 1px solid var(--navy-line); vertical-align: top; }
.note ul, .note ol { margin: 0 0 10px; padding-left: 20px; }
.note a { color: var(--dept-accent-light); }
.note blockquote {
  margin: 10px 0; padding-left: 14px;
  border-left: 2px solid var(--dept-accent-dim); color: #93a8be;
}

@media print { .pagefoot { display: none !important; } }

/* ==========================================================================
   Startseite, Neufassung: Hauptkarte, Säulenkarten, Streifen
   ========================================================================== */

.hero--tight { padding: 44px 0 30px; text-align: left; }
.hero--tight .hero__title {
  font-size: clamp(32px, 5.2vw, 54px);
  text-transform: none;
  letter-spacing: -.01em;
}
.hero--tight .hero__sub { margin-left: 0; margin-right: 0; max-width: 54ch; }
.hero--tight .hero__meta { justify-content: flex-start; }

.picon { display: block; }

/* Hauptkarte: Wissensdatenbank */
.feat {
  padding: 26px 28px 24px;
  margin-bottom: 18px;
  background: linear-gradient(150deg, var(--navy-700) 0%, var(--navy-800) 70%);
  border: 1px solid var(--navy-line);
  border-top: 3px solid var(--dept-accent);
  border-radius: 3px;
  box-shadow: 0 12px 30px rgba(0,0,0,.38);
}
.feat__head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.feat__icon {
  display: grid; place-items: center;
  width: 50px; height: 50px; flex: 0 0 auto;
  color: var(--dept-accent);
  background: var(--navy-900);
  border: 1px solid var(--dept-accent-dim);
  border-radius: 3px;
}
.feat__kicker {
  font-family: var(--cond); font-size: 10.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--dept-accent);
}
.feat__name {
  font-family: var(--cond); font-size: 27px; font-weight: 700;
  color: #fff; margin: 2px 0 0; border: 0; padding: 0;
}
.feat__cta { margin-left: auto; }
.feat__desc {
  max-width: 74ch; margin: 14px 0 20px;
  font-size: 15.5px; line-height: 1.6; color: #93a8be;
}

.hchips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 12px; }
.hchip {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: var(--navy-900);
  border: 1px solid var(--navy-line);
  border-left: 3px solid var(--dept-accent);
  border-radius: 2px;
  text-decoration: none;
}
.hchip:hover { background: var(--navy-700); border-color: var(--dept-accent-dim); }
.hchip__badge { flex: 0 0 auto; }
.hchip__badge svg { height: 48px; width: auto; display: block; }
.hchip__text { display: block; min-width: 0; }
.hchip__name {
  display: block; font-family: var(--cond); font-size: 18px; font-weight: 700;
  letter-spacing: .08em; color: #fff;
}
.hchip__tag {
  display: block; font-family: var(--cond); font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dept-accent);
}
.hchip__meta { display: block; margin-top: 4px; font-size: 12.5px; color: #6b8099; }

/* Drei Säulenkarten */
.pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.pcard {
  display: flex; flex-direction: column;
  padding: 22px 22px 20px;
  background: var(--navy-800);
  border: 1px solid var(--navy-line);
  border-top: 3px solid var(--dept-accent);
  border-radius: 3px;
  text-decoration: none;
  transition: transform .13s ease, border-color .13s ease;
}
.pcard:hover { transform: translateY(-2px); border-color: var(--dept-accent-dim); }
.pcard__icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; margin-bottom: 14px;
  color: var(--dept-accent);
  background: var(--navy-900);
  border: 1px solid var(--dept-accent-dim);
  border-radius: 3px;
}
.pcard__kicker {
  font-family: var(--cond); font-size: 10.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--dept-accent);
}
.pcard__name {
  display: block;
  font-family: var(--cond); font-size: 21px; font-weight: 700;
  color: #fff; margin: 2px 0 8px; line-height: 1.15;
  text-decoration: none;
}
.pcard__name:hover { color: var(--dept-accent-light); }
.pcard:hover .pcard__name { color: var(--dept-accent-light); }
.pcard__desc { font-size: 14.5px; line-height: 1.55; color: #93a8be; }
.pcard__list {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 14px 0 0; padding-top: 13px;
  border-top: 1px solid var(--navy-line);
}
.minilink {
  font-family: var(--cond); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
  color: #8fa4ba; padding: 3px 9px;
  background: var(--navy-900);
  border: 1px solid var(--navy-line);
  border-radius: 2px;
}
.pcard:hover .minilink { border-color: var(--dept-accent-dim); color: var(--dept-accent-light); }
.pcard__go {
  display: block;
  margin-top: auto; padding-top: 16px;
  font-family: var(--cond); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--dept-accent); text-decoration: none;
}
.pcard__go:hover { color: var(--dept-accent-light); }
.minilink { text-decoration: none; }
.minilink:hover { border-color: var(--dept-accent); color: var(--dept-accent-light); }

/* Schmaler Streifen */
.strip--link {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 22px; margin-bottom: 34px;
  text-decoration: none;
  border-left-width: 3px;
}
.strip--link:hover { border-left-color: var(--dept-accent); background: var(--navy-700); }
.strip__icon { flex: 0 0 auto; color: var(--dept-accent); }
.strip__text { flex: 1 1 auto; font-size: 14.5px; line-height: 1.55; color: #93a8be; }
.strip__text b { color: #e4ecf4; }
.strip__go { flex: 0 0 auto; color: var(--dept-accent); font-size: 20px; }

/* "Kommt noch" als Zeile statt als Kacheln */
.soonrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px;
  padding: 16px 0 44px; margin-top: 8px;
  border-top: 1px solid var(--navy-line);
}
.soonrow__label {
  font-family: var(--cond); font-size: 10.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: #5b7089;
}
.soonitem {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: #5b7089;
}
.soonitem b { color: #7e93aa; font-weight: 600; }
.soonitem .picon { color: #4f6478; }

@media (max-width: 700px) {
  .feat__cta { margin-left: 0; width: 100%; text-align: center; }
  .hero--tight { padding: 30px 0 22px; }
}

/* Erklärung je Feld, ausklappbar */
.kwhy { margin-top: 2px; }
.kwhy summary {
  font-family: var(--cond);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dept-accent-dim);
  cursor: pointer;
  list-style: none;
}
.kwhy summary::-webkit-details-marker { display: none; }
.kwhy summary::before { content: "▸ "; }
.kwhy[open] summary::before { content: "▾ "; }
.kwhy summary:hover { color: var(--dept-accent); }
.kwhy p {
  margin: 7px 0 0;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.58;
  color: #93a8be;
  background: var(--navy-900);
  border-left: 2px solid var(--dept-accent-dim);
  border-radius: 0 2px 2px 0;
}

/* Gesperrte Leseansicht */
.lockbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  margin-bottom: 22px;
  background: var(--navy-700);
  border: 1px solid var(--dept-accent-dim);
  border-left: 3px solid var(--dept-accent);
  border-radius: 2px;
}
.lockbar__icon { font-size: 22px; flex: 0 0 auto; }
.lockbar__text {
  flex: 1 1 auto;
  font-size: 14.5px;
  line-height: 1.6;
  color: #b6c5d4;
}
.lockbar__text b { color: #fff; }
.lockbar .btn { flex: 0 0 auto; }
body.is-locked .konf { grid-template-columns: minmax(0, 1fr); }
body.is-locked .konf__sticky { position: static; }

@media (max-width: 760px) {
  .lockbar { flex-direction: column; align-items: flex-start; }
  .lockbar .btn { width: 100%; text-align: center; }
}

/* ==========================================================================
   Prüfung: Prüfer-Durchsicht, Prüflings-Ansicht, Auswertung
   ========================================================================== */

.linkbox {
  padding: 11px 14px;
  background: var(--navy-800);
  border: 1px solid var(--navy-line);
  border-radius: 2px;
  margin-bottom: 12px;
  overflow-x: auto;
}
.linkbox code {
  font-family: var(--mono); font-size: 12px;
  color: var(--dept-accent-light); white-space: nowrap;
}

/* Durchsicht beim Prüfer */
.rev { margin: 0; padding-left: 0; list-style: none; counter-reset: rev; }
.rev__item {
  counter-increment: rev;
  padding: 20px 22px 18px 56px;
  margin-bottom: 12px;
  position: relative;
  background: var(--navy-800);
  border: 1px solid var(--navy-line);
  border-radius: 2px;
}
.rev__item::before {
  content: counter(rev);
  position: absolute; left: 20px; top: 20px;
  font-family: var(--mono); font-size: 14px; color: var(--dept-accent-dim);
}
.rev__meta {
  font-family: var(--cond); font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: #5b7089;
  margin-bottom: 8px;
}
.rev__q { font-size: 16.5px; line-height: 1.5; color: #fff; margin-bottom: 12px; }
.rev__opts { margin: 0 0 12px; padding: 0; list-style: none; }
.rev__opt {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 6px 10px; margin-bottom: 4px;
  font-size: 14.5px; line-height: 1.5; color: #93a8be;
  border-left: 2px solid var(--navy-line);
}
.rev__opt.is-correct {
  color: #cfe8d6;
  background: rgba(90,164,105,.1);
  border-left-color: #5aa469;
}
.rev__letter {
  flex: 0 0 auto; font-family: var(--mono); font-size: 12px;
  color: #5b7089; min-width: 1em;
}
.rev__opt.is-correct .rev__letter { color: #7fd396; }
.rev__a {
  padding: 10px 12px;
  font-size: 14px; line-height: 1.55; color: #b6c5d4;
  background: var(--navy-900);
  border-left: 2px solid var(--dept-accent-dim);
}
.rev__a b { color: var(--dept-accent-light); }
.rev__ref { margin-top: 8px; font-size: 12.5px; }
.rev__ref a { color: #8fa4ba; }

/* Auswertung */
.verdict {
  padding: 22px 24px;
  margin-bottom: 20px;
  border: 1px solid var(--navy-line);
  border-left: 4px solid var(--navy-line);
  border-radius: 2px;
  background: var(--navy-800);
}
.verdict.is-pass { border-left-color: #5aa469; }
.verdict.is-fail { border-left-color: var(--red-500); }
.verdict__head {
  font-family: var(--cond); font-size: 26px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.verdict.is-pass .verdict__head { color: #7fd396; }
.verdict.is-fail .verdict__head { color: #e08a82; }
.verdict__who { font-size: 16px; color: #fff; margin: 2px 0 14px; }
.verdict__nums {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  font-family: var(--cond); font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase; color: #7e93aa;
}
.verdict__nums b { font-size: 17px; color: var(--dept-accent-light); }
.verdict__nums .is-bad, .verdict__nums .is-bad b { color: #e08a82; }
.verdict__note { margin: 14px 0 0; font-size: 14px; color: #b6c5d4; }

.wrongwrap { margin-bottom: 34px; }
.wrongwrap__label {
  font-family: var(--cond); font-size: 10.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--dept-accent);
  padding-bottom: 9px; margin-bottom: 14px; border-bottom: 1px solid var(--navy-line);
}
.wrong { margin: 0; padding-left: 24px; }
.wrong li { margin-bottom: 16px; }
.wrong__q { font-size: 15.5px; color: #fff; margin: 4px 0 8px; }
.wrong__pick, .wrong__right { font-size: 14px; line-height: 1.5; padding: 3px 0; }
.wrong__pick { color: #e08a82; }
.wrong__right { color: #7fd396; }

/* Prüflings-Ansicht */
.exhead { margin-bottom: 20px; }
.exhead__kicker {
  font-family: var(--cond); font-size: 10.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--dept-accent);
}
.exhead__title {
  font-family: var(--cond); font-size: 26px; font-weight: 700;
  color: #fff; margin: 2px 0 10px;
}
.exhead__meta {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  font-family: var(--cond); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: #66809a;
}
.exhead__meta b { color: var(--dept-accent-light); }

.exbar {
  height: 4px; margin-bottom: 18px;
  background: var(--navy-900); border-radius: 2px; overflow: hidden;
}
.exbar__fill {
  height: 100%; width: 0;
  background: var(--dept-accent);
  transition: width .2s ease;
}

.choices { margin-top: 20px; display: flex; flex-direction: column; gap: 9px; }
.choice {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 13px 16px;
  background: var(--navy-900);
  border: 1px solid var(--navy-line);
  border-radius: 2px;
  cursor: pointer;
  font-size: 15.5px; line-height: 1.5; color: #cddbe8;
}
.choice:hover { border-color: var(--dept-accent-dim); background: var(--navy-800); }
.choice input { accent-color: var(--dept-accent); width: 17px; height: 17px; margin-top: 2px; flex: 0 0 auto; }
.choice.is-picked { border-color: var(--dept-accent); background: var(--navy-700); color: #fff; }
.choice__letter {
  flex: 0 0 auto; font-family: var(--mono); font-size: 13px;
  color: var(--dept-accent-dim); min-width: 1em;
}
.choice.is-picked .choice__letter { color: var(--dept-accent-light); }
.choice__text { flex: 1 1 auto; }

.overgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 8px; margin: 16px 0 22px;
}
.ocell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 4px;
  background: var(--navy-800);
  border: 1px solid var(--navy-line);
  border-radius: 2px; cursor: pointer;
}
.ocell:hover { border-color: var(--dept-accent); }
.ocell.is-open { border-color: var(--red-500); }
.ocell__n { font-family: var(--mono); font-size: 11px; color: #5b7089; }
.ocell__a {
  font-family: var(--cond); font-size: 17px; font-weight: 700;
  color: var(--dept-accent-light);
}
.ocell.is-open .ocell__a { color: var(--red-500); }

.codebox {
  margin: 16px auto 18px; max-width: 640px;
  padding: 14px 16px;
  background: var(--navy-900);
  border: 1px solid var(--dept-accent-dim);
  border-radius: 2px;
}
.codebox code {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
  color: var(--dept-accent-light);
  word-break: break-all; white-space: normal;
}

/* Antwortmöglichkeiten auf dem Ausdruck */
.qsheet__opts { margin: 8px 0 0; padding-left: 0; list-style: none; }
.qsheet__opts li {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 3px 0; font-size: 14px; line-height: 1.45;
}
.qsheet__box {
  flex: 0 0 auto; display: inline-grid; place-items: center;
  width: 17px; height: 17px;
  font-family: var(--mono); font-size: 10px;
  border: 1px solid var(--ink-faint); border-radius: 2px;
}

/* Während einer laufenden Prüfung: Navigation und Suche aus dem Weg */
body.is-exam .deptsw,
body.is-exam .search,
body.is-exam .app__back,
body.is-exam .pagefoot__links { display: none !important; }
body.is-exam .topbar__brand { pointer-events: none; }

/* Vorschau des Konfigurators als lesbares Dokument */
.tabgap { flex: 1 1 auto; }
.tab--sm { padding: 6px 13px; font-size: 11.5px; }

.docview {
  margin-top: 14px;
  padding-bottom: 34px;
  box-shadow: 0 10px 26px rgba(0,0,0,.34);
}
.docview .doc__body { padding-top: 22px; }
.docview .doc__body > *:first-child { margin-top: 0; }
/* Der Generator setzt die oberste Ebene als h2; im Dokument ist das die
   Abschnittsebene. */
.docview .doc__body h2 { font-size: 21px; margin-top: 34px; }
.docview .doc__body h3 { font-size: 16px; }
.docview .doc__body h4 { font-size: 14.5px; }
.docview .doc__body blockquote {
  margin: 18px 0;
  padding: 14px 18px;
  background: var(--paper-alt);
  border-left: 4px solid var(--gold-500);
  border-radius: 0 2px 2px 0;
}
.docview .doc__body blockquote > *:first-child { margin-top: 0; }
.docview .doc__body blockquote > *:last-child { margin-bottom: 0; }
.docview .doc__body pre {
  background: var(--navy-900);
  border-left: 4px solid var(--gold-500);
}
.docview .doc__body pre code { color: var(--gold-300); font-size: 12px; }

@media print {
  body[data-pillar="konfigurator"] .ctrl,
  body[data-pillar="konfigurator"] .konf,
  body[data-pillar="konfigurator"] .phead,
  body[data-pillar="konfigurator"] .app__refs,
  body[data-pillar="konfigurator"] .app__back,
  body[data-pillar="konfigurator"] #kf-out { display: none !important; }
  .docview { box-shadow: none; border: 0; }
}

/* Die Dokumentvorschau liegt innerhalb von .app — dort gilt aber ein dunkler
   Tabellenrahmen für die Werkzeugtabellen. Im Dokument muss er Aktenpapier
   sein, sonst scheint das Navy durch die Zeilen ohne eigene Füllung. */
.docview .table-wrap {
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
  background: #fff;
  border: 1px solid var(--paper-line);
}
.docview .doc__body tbody tr { background: #fff; }
.docview .doc__body tbody tr:nth-child(even) { background: var(--paper-alt); }
.docview .doc__body tbody tr:hover { background: #f0ead9; }
.docview .doc__body tbody td { color: var(--ink); }
.docview .doc__body thead th {
  position: static;
  background: var(--navy-700);
  color: var(--gold-300);
}
.docview .doc__body code {
  background: #ece6d9;
  color: #6b3d12;
}

/* ==========================================================================
   Barrierefreiheit: Kontraste nachgezogen
   Alle Werte hier sind gemessen, nicht geschätzt — siehe /tmp/audit2.js.
   ========================================================================== */

/* Kleine gedämpfte Texte auf Navy lagen bei 3.0–3.8:1 */
.pagefoot__legal { color: var(--dim-1); }
.pagefoot__brand,
.pagefoot__links a { color: var(--dim-2); }
.flash__hint { color: var(--dim-1); }
.flash__group,
.deptpick__label,
.soonrow__label,
.planned__label,
.qcard__meta,
.scen__meta,
.exhead__meta,
.rev__meta { color: var(--dim-2); }
.soonitem { color: var(--dim-1); }
.soonitem b { color: #b6c5d4; }
.field__hint,
.stat,
.hero__meta,
.phead__meta,
.tile__meta,
.hchip__meta,
.muted { color: var(--dim-1) !important; }
.qcard__ref { color: var(--dim-1); }
.qcard__ref a { color: #b6c5d4; }
.ocell__n { color: var(--dim-2); }

/* Akzentfarbe als Text auf dunklem Grund: der kräftige Ton reicht bei Rot und
   Violett nicht, deshalb durchgehend die helle Variante. */
.tile__tag,
.hchip__tag,
.tool__kicker,
.vcard__who,
.pcard__kicker,
.feat__kicker,
.phead__kicker,
.acard__go,
.tool__go,
.pcard__go,
.audience__label,
.vgroup__label,
.strip__go,
.nav__dept-tag { color: var(--dept-accent-light); }
.nav__dept-tag { opacity: .85; }

/* Ausklappbare Begründung im Konfigurator: 3.17:1 */
.kwhy summary { color: var(--dept-accent-light); opacity: .8; }
.kwhy summary:hover { opacity: 1; }
.kwhy p { color: #a8bdd2; }

/* Aktenkopf auf Papier */
.doc__stamp { color: var(--ink-faint); }
.doc__stamp b { color: var(--gold-dim); }

/* Anker ohne eigene Farbe erben sonst das Browser-Blau, sobald sie direkten
   Text enthalten. */
a.topbar__brand, a.acard, a.tile, a.hchip, a.tool, a.vcard,
a.strip--link { color: inherit; }

/* ==========================================================================
   Betriebshinweise: die Kästen kommen aus den Handbüchern und bringen ihr
   Aktenpapier-Layout mit — heller Text auf hellem Grund, 1.05:1. Innerhalb
   der Hinweise werden sie auf dunkel umgestellt.
   ========================================================================== */

.note .callout {
  background: var(--navy-900);
  color: #b6c5d4;
  border-left-color: var(--dept-accent-dim);
}
.note .callout--server { border-left-color: var(--gold-500); }
.note .callout--game   { border-left-color: #5aa469; }
.note .callout--warn   { border-left-color: var(--red-500); }
.note .callout--rule   { background: var(--navy-700); }
.note .callout--speech,
.note .callout--radio  { background: var(--navy-900); color: var(--dept-accent-light); }
.note .callout__label  { color: var(--dept-accent-light); }
.note .callout strong  { color: #fff; }
.note .callout em      { color: #93a8be; }
.note .callout a       { color: var(--dept-accent-light); }
.note .callout code    { background: rgba(255,255,255,.08); color: var(--dept-accent-light); }
.note .callout--speech::before { color: var(--dept-accent-dim); }

/* Tabellen innerhalb der Hinweise ebenfalls dunkel */
.note .table-wrap { background: var(--navy-900); border-color: var(--navy-line); }
.note thead th { background: var(--navy-700); color: var(--dept-accent-light); }
.note tbody td { color: #b6c5d4; border-bottom-color: var(--navy-line); }
.note tbody tr:nth-child(even) { background: rgba(255,255,255,.03); }

/* Akzentfarbe als kleiner Text auf Aktenpapier braucht einen dunkleren Ton als
   auf Navy — der Gold-dim-Wert lag bei 4.47:1. */
.doc__stamp b,
.doc__kicker,
.doc__meta b,
.vorl__kicker { color: var(--dept-accent-ink); }

/* ==========================================================================
   Touch-Bedienung
   Auf Zeigegeräten bleibt das Layout kompakt; auf Touchscreens werden alle
   Schaltflächen auf 44 px gebracht. Gemessen wurde bei 390 px Breite: Burger
   34, Bereichswechsel 30, Suchfeld 36, Fußzeile 18 px.
   ========================================================================== */

@media (pointer: coarse) {
  .burger { min-width: 44px; min-height: 44px; }
  .topbar__brand { min-height: 44px; }
  .deptsw__item, .deptsw__home {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .search #q, #q { min-height: 44px; }
  .nav__link { min-height: 44px; display: flex; align-items: center; }
  .deptpick__item { min-height: 44px; display: inline-flex; align-items: center; }
  .pagefoot__links a, .minilink, .pager > a, .doc__footer a {
    min-height: 44px; display: inline-flex; align-items: center;
    padding-inline: .25rem;   /* kurze Wörter wie „Hub“ blieben unter 24 px */
  }
  /* Textfelder, Auswahllisten und Reiter im Konfigurator und in den Tools */
  .konf input[type="text"], .konf input[type="number"], .konf select,
  .field input[type="text"], .field input[type="number"], .field select,
  .ctrl input, .ctrl select, input[data-k], select[data-k] {
    min-height: 44px;
  }
  .tab { min-height: 44px; display: inline-flex; align-items: center; }
  .kmulti, .kmultibox label {
    min-height: 44px; display: flex; align-items: center; gap: .6rem;
  }
  .kwhy summary { min-height: 44px; display: flex; align-items: center; }
  .pcard__name, .pcard__go, .tool__go, .acard__go, .strip__go {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .toc a { min-height: 36px; display: flex; align-items: center; }
  /* Der Anker neben Überschriften ist mit dem Finger nicht zu treffen und auf
     Touch auch nicht nötig — dort wird die Adresse geteilt, nicht kopiert. */
  .anchor { display: none; }
  .konf input[type="checkbox"], .konf input[type="radio"],
  .field input[type="checkbox"], .field input[type="radio"] {
    width: 24px; height: 24px;   /* WCAG 2.5.8 verlangt 24 x 24 */
  }
  .konf label.kcheck, .field label.kcheck {
    min-height: 44px; display: flex; align-items: center; gap: .6rem;
  }
}

/* ==========================================================================
   „Dazu im Hub“ — Verweis vom Kapitel auf das passende Werkzeug
   Ein Kapitel endete bisher bei „Weiter“; wer die Funkcodes gelesen hatte,
   musste den Trainer selbst finden. Die Zuordnung stammt aus den Metadaten
   der Werkzeuge, siehe hub.backlinks().
   ========================================================================== */

.nextup {
  margin: 2.6rem 0 0;
  padding: 1.3rem 1.5rem 1.5rem;
  border-top: 2px solid var(--paper-line);
  background: linear-gradient(180deg, rgba(0,0,0,.022), transparent 60%);
}
.nextup__title {
  margin: 0 0 .9rem;
  font: 600 .78rem/1 var(--cond);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dept-accent-ink);
  border: 0;
  padding: 0;
}
.nextup__grid {
  display: grid;
  gap: .7rem;
  /* auto-fill statt auto-fit und eine Obergrenze: sonst zieht sich eine
     einzelne Karte über die ganze Spaltenbreite. */
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 320px));
}
.nextup__card {
  display: grid;
  gap: .18rem;
  padding: .8rem .9rem .7rem;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--paper-line);
  border-left: 3px solid var(--dept-accent);
  border-radius: 3px;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.nextup__card:hover {
  border-color: var(--dept-accent);
  box-shadow: 0 3px 14px rgba(20, 30, 45, .1);
  transform: translateY(-1px);
}
.nextup__kind {
  font: 600 .64rem/1 var(--cond);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dept-accent-ink);
}
.nextup__name { font: 600 1rem/1.25 var(--cond); color: var(--ink); }
.nextup__sub { font-size: .82rem; color: var(--ink-soft); }
.nextup__go {
  margin-top: .3rem;
  font: 600 .72rem/1 var(--cond);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dept-accent-ink);
}

@media (pointer: coarse) { .nextup__card { min-height: 44px; } }

@media print {
  .nextup { display: none; }
}

/* ==========================================================================
   Konfigurator: Sprungleiste
   51 Einstellungen in sieben Abschnitten waren eine durchgehende Wand. Die
   Leiste bleibt beim Scrollen stehen, hebt den aktuellen Abschnitt hervor und
   zählt je Abschnitt, was vom Standard abweicht.
   ========================================================================== */

.krail {
  position: sticky;
  top: var(--topbar-h);
  z-index: 6;
  margin: 0 0 18px;
  padding: 10px 12px 11px;
  background: rgba(8, 20, 38, .94);
  backdrop-filter: blur(6px);
  border: 1px solid var(--navy-line);
  border-radius: 4px;
}
.krail__head {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-bottom: 9px;
  font: 600 .7rem/1 var(--cond);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.krail__head b { color: var(--dept-accent-light); }
.krail__head span { color: var(--dim-2); font-weight: 400; }
.krail__changed { margin-left: auto; }
.krail__changed.is-on { color: var(--dept-accent-light); }
.krail__items { display: flex; flex-wrap: wrap; gap: 6px; }
.krail__item {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: 5px 10px 5px 6px;
  text-decoration: none;
  color: var(--dim-1);
  background: var(--navy-900);
  border: 1px solid var(--navy-line);
  border-radius: 3px;
  font: 600 .8rem/1.1 var(--cond);
  transition: color .12s, border-color .12s, background .12s;
}
.krail__item:hover { color: #fff; border-color: var(--dept-accent-dim); }
.krail__item.is-active {
  color: #fff;
  border-color: var(--dept-accent);
  background: rgba(255, 255, 255, .05);
}
.krail__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 2px;
  background: var(--navy-700);
  color: var(--dim-2);
  font-size: .7rem;
}
.krail__item.is-active .krail__n { background: var(--dept-accent); color: #0b1524; }
.krail__badge:empty { display: none; }
.krail__badge {
  min-width: 17px;
  padding: 1px 4px;
  border-radius: 9px;
  background: var(--dept-accent);
  color: #0b1524;
  font-size: .66rem;
  text-align: center;
}
.krail__item.is-touched { color: #e8eef5; }

/* Der Abschnitt darf nicht unter der Leiste verschwinden, wenn man ihn
   anspringt. */
.ksec { scroll-margin-top: calc(var(--topbar-h) + 110px); }

@media (max-width: 640px) {
  .krail__name { display: none; }
  .krail__item { padding: 5px 8px; }
}
@media (pointer: coarse) { .krail__item { min-height: 44px; } }

/* ==========================================================================
   Betriebshinweise: Filterleiste
   71 Hinweise in einer Liste waren nicht zu überblicken. Wer den Funkumfang
   festlegen will, sucht drei davon, nicht alle.
   ========================================================================== */

.hfilter {
  position: sticky;
  top: var(--topbar-h);
  z-index: 6;
  margin: 0 0 20px;
  padding: 11px 13px;
  background: rgba(8, 20, 38, .95);
  backdrop-filter: blur(6px);
  border: 1px solid var(--navy-line);
  border-radius: 4px;
}
.hfilter__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hfilter .tab span {
  margin-left: .35rem;
  padding: 1px 5px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  font-size: .7rem;
  color: var(--dim-1);
}
.hfilter .tab.is-active span { background: rgba(0, 0, 0, .25); color: inherit; }
.hfilter__q {
  flex: 1 1 260px;
  min-width: 0;
  padding: 8px 11px;
  background: var(--navy-900);
  border: 1px solid var(--navy-line);
  border-radius: 3px;
  color: #e8eef5;
  font: 400 .92rem/1.3 var(--sans);
}
.hfilter__q:focus {
  outline: 0;
  border-color: var(--dept-accent);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .06);
}
.hfilter__q::placeholder { color: var(--dim-2); }
.hfilter__count {
  flex: 0 0 auto;
  font: 600 .72rem/1 var(--cond);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim-1);
}
.hfilter__empty {
  padding: 1.4rem;
  text-align: center;
  color: var(--dim-1);
  background: var(--navy-900);
  border: 1px dashed var(--navy-line);
  border-radius: 4px;
}
.hgroup { margin-bottom: 1.6rem; }

@media (pointer: coarse) {
  .hfilter__q { min-height: 44px; }
}

/* ==========================================================================
   Sammelseite: ein Handbuch auf einer Seite
   Kapitelweise ist zum Nachschlagen richtig, zum Durcharbeiten und zum
   Ausdrucken für eine Ausbildungsrunde nicht.
   ========================================================================== */

.gbar {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 1.4rem;
  padding: .9rem 1.1rem;
  background: #f3efe6;
  border: 1px solid var(--paper-line);
  border-left: 3px solid var(--dept-accent);
  border-radius: 3px;
}
.gbar__text { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.gbar .btn { flex: 0 0 auto; }

.gtoc {
  margin: 0 0 2rem;
  padding: 1.1rem 1.3rem 1.3rem;
  background: #fff;
  border: 1px solid var(--paper-line);
  border-radius: 3px;
}
.gtoc__label {
  margin-bottom: .7rem;
  font: 600 .72rem/1 var(--cond);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dept-accent-ink);
}
.gtoc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 2.2rem;
}
.gtoc li { break-inside: avoid; margin: 0 0 .28rem; }
.gtoc__part {
  margin: .9rem 0 .45rem;
  font: 600 .7rem/1 var(--cond);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.gtoc__part:first-child { margin-top: 0; }
.gtoc li a {
  display: flex;
  gap: .6rem;
  padding: .18rem 0;
  color: var(--ink);
  text-decoration: none;
  font-size: .93rem;
}
.gtoc li a:hover { color: var(--dept-accent-ink); }
.gtoc__n {
  flex: 0 0 1.7rem;
  font: 600 .8rem/1.4 var(--cond);
  color: var(--ink-faint);
}

.gsec { padding-top: 2.2rem; border-top: 1px solid var(--paper-line); }
.gsec:first-child { padding-top: 0; border-top: 0; }
.gsec__head {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  margin-bottom: .2rem;
}
.gsec__n {
  font: 600 .72rem/1 var(--cond);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dept-accent-ink);
}
.gsec__single {
  margin-left: auto;
  font: 400 .76rem/1 var(--sans);
  color: var(--ink-faint);
  text-decoration: none;
  border-bottom: 1px dotted var(--paper-line);
}
.gsec__single:hover { color: var(--dept-accent-ink); }
.gsec__title {
  margin: 0 0 1.1rem;
  font: 700 1.72rem/1.15 var(--cond);
  color: var(--ink);
  scroll-margin-top: calc(var(--topbar-h) + 20px);
}

.nav__gesamt {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: 10px;
  padding: 9px 14px;
  border-top: 1px solid var(--navy-line);
  color: var(--dept-accent-light);
  text-decoration: none;
  font: 600 .86rem/1.2 var(--cond);
}
.nav__gesamt:hover { background: rgba(255, 255, 255, .04); }
.nav__gesamt .nav__num { color: var(--dim-2); }

@media (max-width: 700px) { .gtoc ol { columns: 1; } }
@media (pointer: coarse) { .nav__gesamt { min-height: 44px; } }

/* Beim Drucken bleibt nur das Dokument; jedes Kapitel beginnt auf einer
   neuen Seite. */
@media print {
  .gbar, .gsec__single { display: none; }
  .gsec { page-break-before: always; border-top: 0; padding-top: 0; }
  .gsec:first-child { page-break-before: avoid; }
  .gtoc { page-break-after: always; border: 0; }
  .gtoc ol { columns: 2; }
}

/* ==========================================================================
   Mobil
   Gemessen bei 320, 390 und 768 px. Der Ausgangszustand: die Säulenleiste
   war 480 px breit und hatte überhaupt keine Mobilregel — sie schob die
   Suche vollständig aus dem Bild (x = 656…786 bei 390 px Viewport). Damit
   war unterwegs weder die Navigation noch die Suche erreichbar. Die
   Kopfzeile bekommt deshalb zwei Reihen: Burger, Marke und Suche oben, die
   Säulen darunter als wischbarer Streifen.
   ========================================================================== */

@media (max-width: 900px) {
  :root { --topbar-h: 100px; }

  /* Zwei Reihen als Raster, nicht als Flex-Umbruch. Flexbox bricht Zeilen
     anhand der ungeschrumpften Größen um: der Markenblock war mit 318 px zu
     breit, wanderte samt Suche und Säulenstreifen auf je eigene Zeilen, und
     bei fester Höhe schob align-content den Burger über den oberen Bildrand.
     Im Raster steht jedes Teil dort, wo es stehen soll. */
  .topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 168px;
    grid-template-rows: 44px auto;
    align-items: center;
    align-content: center;
    column-gap: 12px;
    row-gap: 7px;
    height: var(--topbar-h);
    padding: 0 14px;
  }
  .burger        { grid-area: 1 / 1; }
  .topbar__brand { grid-area: 1 / 2; }
  /* Ohne Burger beginnt die Marke in der ersten Spalte — sonst bleibt dort
     eine leere Spalte samt 12 px Abstand stehen und die Marke steht nicht
     mehr am Satzspiegel. */
  body:not(.has-nav) .topbar__brand { grid-column: 1 / 3; }
  .search        { grid-area: 1 / 3; }
  .deptsw        { grid-area: 2 / 1 / 3 / 4; }
  .topbar__spacer { display: none; }
  .topbar__brand { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .topbar__dept {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Die Suche wächst in den Rest der ersten Reihe. Die feste Breite von
     130 px aus der alten Regel war unbenutzbar schmal. */
  .search {
    order: 2;
    flex: 1 1 130px;
    width: auto;
    max-width: 320px;
    margin-left: auto;
  }
  .search__results {
    position: fixed;
    top: var(--topbar-h);
    left: 8px;
    right: 8px;
    width: auto;
    max-height: calc(100vh - var(--topbar-h) - 20px);
  }

  /* Säulen als wischbarer Streifen über die ganze Breite. Kein Umbruch und
     keine Scrollleiste — am Rand bleibt ein angeschnittener Eintrag stehen,
     der zeigt, dass es weitergeht. */
  .deptsw {
    order: 3;
    flex: 1 0 100%;
    margin-left: 0;
    padding: 0 14px 1px;
    margin-inline: -14px;
    border-left: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .deptsw::-webkit-scrollbar { display: none; }
  .deptsw__home, .deptsw__item { flex: 0 0 auto; scroll-snap-align: start; }
}

@media (max-width: 620px) {
  /* Die alte Regel setzte hier 130 px fest und hob damit die flexible
     Breite von oben wieder auf. */
  .search { width: auto; }
}

@media (max-width: 420px) {
  /* Auf 320 px blieben der Marke nur 56 px. Das „LS“-Kästchen ist neben dem
     ausgeschriebenen Namen Zierde — es weicht, damit der Name lesbar bleibt. */
  .topbar { grid-template-columns: auto minmax(0, 1fr) 132px; }
  .topbar__mark { display: none; }
}

/* Auf Touchgeräten gibt es keine Tastenkürzel — das „/“ im Suchfeld ist dort
   nur ein Hindernis und nimmt Platz weg. */
@media (pointer: coarse) {
  .search__key { display: none; }
  .search input { padding-right: 12px; }

  /* Unter 16 px zoomt iOS Safari beim Antippen in das Feld hinein und die
     Seite bleibt danach verschoben. */
  input, select, textarea { font-size: 16px; }
  .search input { font-size: 16px; }
}

/* Lange Wörter und Adressen müssen brechen. Deutsche Komposita und die
   ausgeschriebenen lossantos.app-Adressen in den erzeugten Dokumenten
   sprengten bei 320 px den Viewport (ein Link allein war 247 px breit). */
.doc__body, .note, .docview, .gtoc, .callout { overflow-wrap: break-word; }
.doc__body a, .note a, .docview a,
.doc__body code, .note code, .docview code { overflow-wrap: anywhere; }

/* Kleinteilige Beschriftungen lagen mobil zwischen 10 und 11,5 px. Alles,
   was Information trägt, kommt auf mindestens 12 px; die Maus-Ansicht
   bleibt unberührt. Abzeichen-SVGs sind ausgenommen, die sind Grafik. */
@media (max-width: 900px) {
  .deptsw__item, .deptsw__home,
  .app__back,
  .nav__part, .nav__num, .nav__dept-tag,
  .deptpick__label,
  .callout__label,
  .phead__kicker, .feat__kicker, .tool__kicker, .pcard__kicker, .exhead__kicker,
  .app__refs-label, .out__label,
  .vcard__who, .vgroup__label, .audience__label,
  .tile__tag, .hchip__tag,
  .stat, .tool__go, .pcard__go, .acard__go, .strip__go,
  .pagefoot__brand, .pagefoot__legal,
  .flash__group, .flash__hint,
  .krail__changed, .krail__n, .krail__head,
  .doc__stamp, .doc__kicker,
  .qcard__meta, .scen__meta, .rev__meta,
  .gtoc__label, .gtoc__part, .gsec__n,
  .nextup__kind, .nextup__go,
  .hfilter__count,
  .konf label, .field label, .kfield label {
    font-size: 12.5px;
  }
  /* .datatable thead th ist spezifischer als .datatable th und hat die
     erste Fassung dieser Regel überstimmt. */
  .doc__body th, .note th, .datatable thead th, .app thead th
    { font-size: 12.5px; }

  /* Zweiter Durchgang, nach Messung benannt: das sind die Bauteile, die
     nach der ersten Runde noch unter 12 px lagen. .note__head war mit 71
     Vorkommen der häufigste. */
  .note__head,
  .pagefoot__links a,
  .kwhy summary,
  .phead__meta, .phead__meta b,
  .minilink,
  .tile__meta, .tile__meta b,
  .doc__footer, .doc__footer a, .doc__footer span,
  .hero__meta, .hero__meta b,
  .hfilter .tab span,
  .pager__dir,
  .tab, .tab--sm,
  .soonrow__label, .planned__label,
  .btn kbd, kbd {
    font-size: 12.5px;
  }
  .doc__body td code, .note td code, .doc__body th code { font-size: 12.5px; }
}

/* Bewusst ausgenommen: die ASCII-Organigramme in .is-card. Dort bestimmt die
   Zeichenbreite, ob das Diagramm zusammenbleibt — größere Schrift macht es
   nicht lesbarer, sondern schiebt es weiter aus dem Bild. Sie stehen in
   einem Scroll-Rahmen und lassen sich aufziehen. */

/* ==========================================================================
   Tabellen: Hinweis auf die Wischbarkeit
   Der Rahmen scrollte schon, aber bei 390 px sah man nur eine mitten im
   Wort abgeschnittene Spalte. Kante und Hinweis erscheinen nur, solange es
   etwas zu schieben gibt, und verschwinden am rechten Ende.
   ========================================================================== */

.tscroll { position: relative; margin: 0 0 20px; }
.tscroll > .table-wrap { margin: 0; }
.tscroll::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 34px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  background: linear-gradient(to right, transparent, rgba(9, 20, 36, .3));
}
.tscroll.has-scroll:not(.at-end)::after { opacity: 1; }
.tscroll__hint { display: none; }
.tscroll.has-scroll .tscroll__hint {
  display: block;
  margin-top: 5px;
  font: 600 12px/1.3 var(--cond);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* Auf dunklem Grund wirkt derselbe Schleier als hellere Kante. */
.app .tscroll:not(.docview .tscroll)::after {
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, .14));
}
.note .tscroll::after {
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, .14));
}
.app .tscroll .tscroll__hint, .note .tscroll .tscroll__hint { color: var(--dim-2); }
.docview .tscroll .tscroll__hint { color: var(--ink-faint); }

@media print { .tscroll::after, .tscroll__hint { display: none; } }

/* ==========================================================================
   Restarbeiten aus der Mobil-Messung
   ========================================================================== */

/* Anker in Merkkästen hatten keine eigene Farbe und nahmen das Browser-Blau
   — der einzige verbliebene Fall, auf 6 Seiten. */
.callout a {
  color: var(--dept-accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.callout--rule a, .callout--radio a, .callout--speech a,
.note .callout a { color: var(--dept-accent-light); }

@media (max-width: 900px) {
  /* Ohne Namen fehlte unterwegs jeder Hinweis, in welchem Handbuch man
     liest — die Marke bekommt die mittlere Spalte und kürzt mit Auslassung. */
  .topbar__brand { min-width: 0; overflow: hidden; }
  .search { width: auto; max-width: none; }

  /* Der Aktenkopf-Stempel lief über drei Zeilen. Die Zeile „Nur für den
     Dienstgebrauch“ ist auf dem Telefon Zierde, nicht Information. */
  .doc__stamp { gap: 4px 14px; line-height: 1.35; }
  .doc__stamp span:last-child { display: none; }
}

@media (max-width: 640px) {
  /* Die Leiste zeigte nur noch nackte Ziffern 1–7 in zwei Reihen — damit war
     nicht zu erkennen, was Abschnitt 5 ist. Stattdessen ein wischbarer
     Streifen mit Namen, wie die Säulenleiste oben. */
  .krail__name { display: inline; }
  .krail__items {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    margin-inline: -12px;
    padding-inline: 12px;
  }
  .krail__items::-webkit-scrollbar { display: none; }
  .krail__item { flex: 0 0 auto; scroll-snap-align: start; }
  .krail__head { flex-wrap: wrap; gap: 3px 12px; line-height: 1.35; }
  .krail__changed { margin-left: 0; }
}