/* Nur die Anleitung. Das Werkzeug selbst bringt app.css mit; hier steht, was
   eine LESBARE Seite braucht und eine Bedienoberflaeche nicht: eine Spalte in
   Lesebreite, ein Inhaltsverzeichnis, das mitlaeuft, und Platz zwischen den
   Absaetzen. */

body.anleitung { padding-bottom: 80px }

.anleitung-raster {
  display: grid; grid-template-columns: 220px minmax(0, 68ch);
  gap: clamp(24px, 5vw, 64px); padding-top: 28px; align-items: start;
}

/* Das Inhaltsverzeichnis laeuft mit — bei neunzehn Abschnitten sucht man
   sonst staendig nach oben. */
.toc {
  position: sticky; top: 20px; max-height: calc(100vh - 48px);
  overflow-y: auto; font-size: 13.5px; line-height: 1.45;
}
.toc-titel {
  font-family: 'AWN Montserrat Bold', sans-serif; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--be); margin: 0 0 10px;
}
.toc ul { list-style: none; margin: 0; padding: 0 }
.toc li { margin-bottom: 7px }
.toc a { color: var(--gy); text-decoration: none; border-left: 2px solid var(--bd); padding-left: 10px; display: block }
.toc a:hover, .toc a:focus-visible { color: var(--be); border-left-color: var(--mg) }

.anleitung-text { font-size: 16px; line-height: 1.65 }
.anleitung-text section { margin-bottom: 40px; scroll-margin-top: 20px }
.anleitung-text h2 {
  font-family: 'AWN Montserrat Bold', sans-serif; font-size: 21px; line-height: 1.25;
  margin: 0 0 12px; letter-spacing: -.01em;
}
.anleitung-text p { margin: 0 0 14px }
.anleitung-text ul { margin: 0 0 14px; padding-left: 22px }
.anleitung-text li { margin-bottom: 7px }
.anleitung-text code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em;
  background: var(--lt); padding: 1px 5px; border-radius: 5px;
}
.anriss { font-size: 17px; color: var(--gy); margin-bottom: 18px }

/* Der Fallstrick ist der wertvollste Teil jedes Abschnitts — er soll sich
   vom Fliesstext abheben, ohne wie eine Warnung zu schreien. */
.fallstrick {
  background: var(--lt); border-left: 3px solid var(--mg);
  padding: 11px 14px; border-radius: 0 9px 9px 0; font-size: 15px;
}
.fallstrick strong { color: var(--be) }

.tabelle { overflow-x: auto; margin: 0 0 16px }
.anleitung-text table { border-collapse: collapse; width: 100%; font-size: 14.5px }
.anleitung-text th, .anleitung-text td {
  text-align: left; vertical-align: top; padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--bd);
}
.anleitung-text th { font-family: 'AWN Inter SemiBold', sans-serif; color: var(--be) }
.anleitung-text td:first-child { white-space: nowrap }

/* Am Handy klappt das Inhaltsverzeichnis nach oben und wird zur Liste. */
@media (max-width: 860px) {
  .anleitung-raster { grid-template-columns: 1fr }
  .toc { position: static; max-height: none; border-bottom: 1px solid var(--bd); padding-bottom: 16px }
  .toc ul { columns: 2; column-gap: 20px }
  .toc li { break-inside: avoid }
  .anleitung-text td:first-child { white-space: normal }
}

/* Gedruckt: das Inhaltsverzeichnis weg, eine Spalte, Abschnitte nicht
   auseinanderreissen. */
@media print {
  .toc, .leicht-schalter, .fuss { display: none !important }
  .anleitung-raster { display: block }
  .anleitung-text section { break-inside: auto; margin-bottom: 26px }
  .anleitung-text h2 { break-after: avoid }
  .fallstrick, tr { break-inside: avoid }
  a { color: inherit; text-decoration: underline }
}