/* =========================================================
   layout.css: Bogen, Kopf und Fuß

   Eine Textspalte, nichts daneben. Nummer und Bereichsname eines
   Abschnitts stehen als kleine Zeile über der Überschrift, damit
   die Seite zitierbar bleibt, ohne eine zweite Spalte zu brauchen.
   ========================================================= */

.sheet {
  width: 100%;
  max-width: var(--sheet);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- Abschnitt ---
   Keine Inline-Styles: die CSP erlaubt nur Stylesheets aus eigener Quelle. */
.block {
  padding-block: var(--pad-y);
  border-top: 1px solid var(--rule);
}
.block--plain { border-top: 0; }

/* Abstandshalter zwischen zwei Bausteinen im selben Abschnitt */
.spaced { margin-top: clamp(2.25rem, 4vw, 3.25rem); }

.block__marker {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .5rem;
  font-size: .85rem;
  color: var(--ink-3);
}
.marker__num { font-variant-numeric: tabular-nums; }
.marker__num::after { content: '·'; margin-left: .5rem; }

.block__body > .lead { margin-top: .9rem; }
.block__body > h2 + *:not(.lead),
.block__body > .lead + * { margin-top: clamp(2rem, 4vw, 2.75rem); }

/* --- Kopfzeile ---
   Sie bleibt stehen: Die Seite ist über 20.000 Pixel lang, und ohne
   mitlaufenden Kopf ist der Notfallabschnitt aus der Mitte heraus nicht
   erreichbar. */
.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.site-head__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1rem;
  padding-block: .35rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 600;
  text-decoration: none;
}

.site-head__nav {
  display: flex;
  align-items: center;
  gap: .25rem 1rem;
  font-size: .9rem;
}

/* Hilfe steht dauerhaft im Kopf. Bei diesem Thema gehört der Notruf
   von jeder Stelle der Seite aus in einen Klick. */
.site-head__help {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--alarm);
  font-weight: 600;
  text-decoration-color: currentColor;
}

/* Der einzige gefüllte Baustein der Seite: Wer nicht allein am Gerät ist,
   muss den Fluchtweg ohne Suchen finden. */
.quick-exit {
  display: inline-flex;
  align-items: center;
  /* Flex entfernt Leerzeichen zwischen „Seite“ und „verlassen“. */
  gap: 1ch;
  min-height: 2.75rem;
  padding: .35rem .8rem;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.quick-exit:hover { background: var(--ink-2); }

@media (max-width: 24rem) {
  .quick-exit__long {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* --- Aktenkopf --- */
.dossier { padding-block: clamp(2.75rem, 7vw, 5rem) var(--pad-y); }
.dossier__stamp {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  margin-bottom: 1.25rem;
}
.dossier__answer-word {
  margin-top: .6rem;
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  line-height: 1.2;
  font-weight: 600;
}
.dossier__thesis { margin-top: 1.5rem; color: var(--ink-2); }
.dossier__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  margin-top: 1.5rem;
}
.dossier__note { margin-top: 1rem; }

/* --- Leitsatz --- */
.creed { padding-block: var(--pad-y); border-top: 1px solid var(--rule); }
.creed__text { font-size: clamp(1.35rem, 2.4vw, 1.6rem); line-height: 1.3; }
.creed__note { margin-top: .75rem; color: var(--ink-2); }

/* --- Fußzeile ---
   Nur Hilfe und Rechtstexte. Vorlagen und Unterseiten stehen im Menü. */
.site-foot {
  padding-block: 2rem 3rem;
  border-top: 1px solid var(--rule);
}
/* Platz für den Zurück-nach-oben-Verweis, der am Seitenende über der
   Fußzeile steht und sonst die Rechtstexte verdeckt. */
.js .site-foot { padding-bottom: 6rem; }
.site-foot__inner { display: grid; gap: 1.25rem; }
.site-foot__claim { color: var(--ink-2); }
.site-foot__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .25rem 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
.site-foot__help {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--alarm);
  font-weight: 600;
}
.site-foot__nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; font-size: .9rem; }
.site-foot__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--ink-3);
}
.site-foot__nav a:hover { color: var(--ink); }
.site-foot__nav a[aria-current] { color: var(--ink); text-decoration: none; }

/* --- Menü ---
   Ohne JavaScript bleibt die Schaltfläche unsichtbar; das
   Inhaltsverzeichnis im Dokument leistet dann dasselbe. */
.nav-toggle { display: none; }
.js .nav-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule-mid);
  text-underline-offset: .18em;
}
.nav-toggle:hover,
.nav-toggle[aria-expanded="true"] { text-decoration-color: currentColor; }

.nav-panel {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: 19;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-mid);
}
.nav-panel[hidden] { display: none; }
.nav-panel__inner {
  max-height: calc(100dvh - 5rem);
  overflow-y: auto;
  padding-block: 1.5rem;
}
.nav-panel__title { margin-bottom: .75rem; }

/* --- Inhaltsverzeichnis ---
   Steht als eigener Abschnitt im Dokument und zugleich im Menü. Damit
   funktioniert die Navigation auch ohne JavaScript. Die Regeln liegen
   hier und nicht in story.css, weil die Rechtstexte story.css nicht
   laden, das Menü aber auf jeder Seite steht. */
.toc { display: grid; }
.toc__link {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: .5rem;
  align-items: baseline;
  padding-block: .3rem;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.45;
}
.toc__link:hover span:last-child { text-decoration: underline; text-underline-offset: .18em; }
.toc__num {
  font-size: .85rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
/* Der aktuelle Abschnitt wird im Menü mitgeführt. */
.toc__link[aria-current="true"] { font-weight: 600; }

/* Der Notfallabschnitt ist auch im Verzeichnis als solcher erkennbar. */
.toc__link--alarm,
.toc__link--alarm .toc__num { color: var(--alarm); font-weight: 600; }

.toc__group {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  align-items: baseline;
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 1px solid var(--rule);
  font-size: .9rem;
}
.toc__group a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink-2); }
.toc__group a[aria-current="page"] { color: var(--ink); text-decoration: none; }

/* --- Zurück nach oben ---
   Ohne JavaScript erscheint der Verweis nicht, weil er dann nicht ein- und
   ausgeblendet würde. Wann er erscheint, entscheidet nav.js. */
.to-top { display: none; }
.js .to-top {
  position: fixed;
  left: var(--gutter);
  bottom: 1.5rem;
  z-index: 18;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .5rem .9rem;
  border: 1px solid var(--rule-mid);
  background: var(--paper);
  color: var(--ink-2);
  font-size: .9rem;
  text-decoration: none;
  /* Unsichtbar heißt hier auch: nicht anklickbar und nicht in der Tabfolge. */
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s var(--ease), visibility 0s linear .2s;
}
.js .to-top.is-visible {
  visibility: visible;
  opacity: 1;
  transition: opacity .2s var(--ease), visibility 0s;
}
.to-top:hover { color: var(--ink); border-color: var(--ink); }
.to-top__arrow { font-size: .9em; }
@media print { .js .to-top { display: none; } }