/* docs.notemia.com — NUR das, was die Hilfe zusätzlich braucht.
   Farben, Schriften, Kopf, Fuß und Buttons kommen aus landing/style.css —
   dieselbe Datei, die notemia.com benutzt. Hier steht deshalb kein einziger
   Farbwert und keine Schriftart: Was dort geändert wird, gilt hier sofort mit.
   (Projektregel: öffentliche Seiten spiegeln Kopf und Fuß der Startseite 1:1.) */

/* Zwei Spalten unter dem Landing-Kopf. `.wrap` kommt von der Landing und setzt
   Breite und Seitenabstand. */
/* EINE linke Kante fuer die ganze Seite.
   `.wrap` kommt von der Landing und setzt Breite und Seitenabstand — Kopf, Fuss
   und Inhalt teilen sie sich. Beim ersten Anlauf habe ich den Inhalt daraus
   ausbrechen lassen (max-width:none), damit die Kapitelspalte weiter links
   steht. Ergebnis bei 1920px: VIER verschiedene Kanten — Marke im Kopf bei 284,
   Kapitelspalte bei 48, Text bei 410, Marke im Fuss bei 420. Sah aus, als waere
   die Seite verrutscht.
   Jetzt bleibt `.wrap` unangetastet: Die Kapitelspalte beginnt genau dort, wo
   im Kopf die Marke steht. Gegen das Gequetschte helfen Spaltenbreite, Abstand
   und Textbreite — nicht das Ausbrechen. */
.huelle {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: clamp(36px, 4vw, 72px);
  padding-top: 110px;
  padding-bottom: 72px;
}
@media (max-width: 1000px) {
  .huelle {
    grid-template-columns: 1fr;
    gap: 22px;
    /* Der Kopf ist auf dem Handy flacher. */
    padding-top: 86px;
  }
}

/* Kapitel-Navigation. Eigener Klassenname (`nav-kapitel`), weil `.nav` in der
   Landing die Kopfleiste IST — gleiche Namen hätten sich gegenseitig
   überschrieben. */
.nav-kapitel ul { list-style: none; margin: 0; padding: 0; }
.nav-kapitel > ul > li + li { margin-top: 20px; }
.nav-kapitel .k-titel {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 7px;
}
.nav-kapitel li ul li { margin: 2px 0; }
.nav-kapitel a {
  display: block;
  padding: 6px 11px;
  border-radius: 9px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--fg);
  text-decoration: none;
}
.nav-kapitel a:hover { background: color-mix(in srgb, var(--teal) 14%, transparent); }
.nav-kapitel a[aria-current='page'] {
  color: var(--teal-bright);
  font-weight: 600;
  background: color-mix(in srgb, var(--teal) 16%, transparent);
}

/* Artikel. Zeilenbreite begrenzt, sonst springt das Auge beim Zeilenwechsel.
   78 Zeichen ist die obere Kante des Bequemen — bei 68 wirkte die Spalte neben
   dem vielen freien Platz zu schmal. */
.inhalt { max-width: 78ch; }
.prose h1 { font-size: clamp(1.7rem, 3.4vw, 2.1rem); line-height: 1.18; margin: 0 0 0.55em; text-wrap: balance; }
.prose h2 { font-size: 1.28rem; margin: 1.9em 0 0.5em; text-wrap: balance; }
.prose h3 { font-size: 1.06rem; margin: 1.5em 0 0.4em; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.05em; }
.prose li { margin: 5px 0; }
.prose a { color: var(--teal-bright); }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: color-mix(in srgb, var(--fg) 9%, transparent);
  padding: 1px 6px;
  border-radius: 6px;
}
.prose blockquote {
  margin: 1.3em 0;
  padding: 12px 18px;
  border-left: 3px solid var(--teal);
  background: color-mix(in srgb, var(--teal) 9%, transparent);
  border-radius: 0 10px 10px 0;
}
.prose kbd {
  font: inherit;
  font-size: 0.85em;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 1px 6px;
  background: var(--bg-soft);
}
.prose table { border-collapse: collapse; width: 100%; margin: 1.1em 0; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 11px; text-align: left; }
/* Breite Inhalte scrollen in sich, nie die ganze Seite. */
.prose table, .prose pre { display: block; overflow-x: auto; }