/* ===========================================================================
   Stage 29.IL: Lesbarkeit von Diagrammen im Handbuch.

   Befund: Bei der Standardbreite (Grid 61rem) ist die Textspalte nur ~750px
   breit. Ein Mermaid-Diagramm fuellt diese Spalte, wird aber nie groesser als
   seine Naturgroesse — ist es breiter, schrumpft alles mit: Das Lifecycle-
   Diagramm (1595px) landete bei 47%, die Beschriftungen bei ~7px. Ohne Lupe
   nicht lesbar.

   Wichtig zu wissen: Material rendert Mermaid in einen GESCHLOSSENEN
   Shadow-Root. An das SVG selbst kommt man weder per CSS-Selektor noch per
   Skript heran — die einzige Stellschraube von aussen ist die Breite des
   Kastens, in dem es steckt. Deshalb hier nur das Raster; die zweite Haelfte
   der Loesung sind Diagramme, die in diese Breite passen (Quelltext der
   betroffenen Seiten, siehe Stage 29.IL).
   =========================================================================== */

/* Mehr Platz fuer Diagramme, breite Tabellen und Screenshots: 72rem statt
   61rem ergibt eine Textspalte von ~1000px. Damit rendern alle Diagramme des
   Handbuchs in Naturgroesse (Beschriftung 16px). */
.md-grid {
  max-width: 72rem;
}

/* Sicherheitsnetz fuer schmale Fenster: lieber waagerecht scrollen als ein
   Diagramm unleserlich klein rechnen. */
.md-typeset .mermaid {
  overflow-x: auto;
  overflow-y: hidden;
}

/* Screenshots duerfen die volle Spaltenbreite nutzen, aber nie ueberlaufen. */
.md-typeset img {
  max-width: 100%;
  height: auto;
}

/* Grosse Aufnahmen (Gesamtansichten) sind breiter als die Spalte und werden
   deshalb verkleinert dargestellt. Sie sind verlinkt — ein Klick zeigt sie in
   Originalgroesse; der Mauszeiger kuendigt das an. */
.md-typeset a > img {
  cursor: zoom-in;
}

/* Stage 29.PQ: Marken fuer interne Abschnitte - erscheinen nur in der
   internen Fassung (hooks/zielgruppe.py), die Kundenfassung entfernt den
   ganzen Abschnitt samt Marke. */
.md-typeset .kc-intern-mark {
  margin: 1.2em 0 0.4em;
  padding: 0.15em 0.6em;
  border-left: 0.25rem solid #c62828;
  background: rgba(198, 40, 40, 0.08);
  color: #c62828;
  font-size: 0.75rem;
  font-weight: 600;
}
.md-typeset .kc-intern-mark--ende {
  margin: 0.4em 0 1.2em;
}