/* Gestaltung des aus Markdown erzeugten Markups.
   Nutzt ausschliesslich die Custom Properties des uebernommenen
   Stylesheets: keine neuen Farben, keine neuen Schriften. */

/* ==========================================================================
   Sprunglink — bis zum Fokus aus dem Sichtfeld
   ========================================================================== */

.sprunglink {
    position: absolute;
    left: -100vw;
    top: 0;
    z-index: 100;
    padding: var(--space-sm) var(--space-lg);
    /* Weiss auf #bb939c trug nur 2.70; dieser Ton 4.50. */
    background: var(--color-primary-deep);
    color: var(--color-white);
    border-radius: 0 0 var(--radius-md) 0;
    text-decoration: none;
}

.sprunglink:focus {
    left: 0;
}

/* ==========================================================================
   Lesebereich — begrenzte Zeilenlaenge
   ========================================================================== */

/* Der Lesebereich selbst nimmt die volle Containerbreite ein; begrenzt
   wird die Zeilenlaenge dort, wo sie zaehlt: am Fliesstext. So bleibt
   Raum fuer breite Abschnitte, Bilder und Kaesten, ohne dass ein Absatz
   ueber die ganze Breite laeuft. */
.lesebereich {
    margin: 0 auto;
    padding: var(--space-2xl) 0;
}

.seiteninhalt > p,
.seiteninhalt > ul,
.seiteninhalt > ol,
.seiteninhalt > blockquote,
.abschnitt-text > p,
.abschnitt-text > ul,
.abschnitt-text > ol,
.abschnitt-text > blockquote {
    max-width: var(--container-narrow);
}

/* Der Textblock steht mittig im Satzspiegel; seine Zeilen beginnen links. */
.abschnitt:not(:has(img)) .abschnitt-text > p,
.abschnitt:not(:has(img)) .abschnitt-text > ul,
.abschnitt:not(:has(img)) .abschnitt-text > ol {
    margin-inline: auto;
    text-align: left;
}

/* Der Kopf der Startseite: zwei Zeilen in einer Ueberschrift, die erste
   kleiner. Die Groessen stehen hier und nicht in der Marke, damit der
   Inhalt frei von Gestaltung bleibt. */
.zeile-klein {
    display: block;
    font-size: 0.69em;
}

.zeile-gross {
    display: block;
    font-size: 1em;
}

/* Vorspann: alles vor dem ersten Abschnitt bildet den Seitenkopf und
   steht mittig. Gezielt auf den Inhaltsbereich, weil seit dem Editor eine
   Huelle dazwischenliegt und der direkte Nachfahre nicht mehr greift. Das
   nimmt die Vorlage auf, in der jeder Abschnitt mit einer mittigen
   Ueberschrift beginnt. Traegt die Seite ein Titelbild, steht die h1 darin
   und ist kein Kind mehr; dann gilt dasselbe ab dem Bild. */
.seiteninhalt > h1,
.seiteninhalt > h1 ~ p,
.seiteninhalt > .titelbild ~ p {
    max-width: var(--container-narrow);
    margin-inline: auto;
}

/* Mittig steht allein die Überschrift; jeder Vorspannabsatz steht links.
   pgdoc://lisa-public/rules/58-handlungsaufruf sagt: ab zwei Zeilen ist ein
   zentrierter Absatz schlecht lesbar, weil der Zeilenanfang wandert. Erst
   war die Regel "ein Absatz darf mittig bleiben"; der Augenschein auf
   390px hat sie widerlegt, weil schon der erste Absatz zweizeilig bricht
   und die zweite Zeile als Waise stehen bleibt. Trägt die Seite ein
   Titelbild, liegt die h1 ohnehin links darin. */
.seiteninhalt > h1 {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.seiteninhalt > h1 ~ p:not(:has(img)),
.seiteninhalt > .titelbild ~ p:not(:has(img)) {
    font-size: var(--font-size-lg);
}

.lesebereich h2 {
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-md);
}

.lesebereich h3 {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-sm);
}

.lesebereich p {
    margin-bottom: var(--space-md);
}

.lesebereich ul,
.lesebereich ol {
    margin: 0 0 var(--space-lg) var(--space-lg);
    padding: 0;
}

.lesebereich li {
    margin-bottom: var(--space-xs);
}

/* ==========================================================================
   Bilder — runde Ecken, flaechig bei voller Breite
   ========================================================================== */

.lesebereich img,
.rezension img {
    border-radius: var(--radius-lg);
    display: block;
}

/* Ein flaechiges Bild ist von diesen Regeln ausgenommen: es bricht aus
   dem Container aus und darf keinen seitlichen Rand bekommen. */
.lesebereich figure:not(.flaechig) {
    margin: var(--space-2xl) 0;
}

.lesebereich figure:not(.flaechig) img {
    width: 100%;
    height: auto;
    max-height: 32rem;
    object-fit: cover;
}

.lesebereich figcaption {
    margin-top: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    text-align: center;
}

/* Bilder im Fliesstext: volle Breite ihres Bereichs, runde Ecken. */
.lesebereich p > img {
    display: block;
    width: 100%;
    height: auto;
    margin: var(--space-md) 0;
}

/* Ein Bild ohne Alternativtext ist Schmuck und bleibt klein. Die SVG
   dieser Sammlung bringen nur ein viewBox mit und keine feste Groesse;
   ohne Grenze fuellen sie den ganzen Raum. Die Marke nennt 150 Pixel,
   daran haelt sich die Grenze. */
.lesebereich img[alt=""] {
    display: block;
    width: 9.4rem;
    max-width: 100%;
    height: auto;
    margin: var(--space-lg) auto;
}

/* Zeichen und Überschrift stehen auf jeder Bildschirmgröße auf einer
   gemeinsamen Mittelachse. Mehrzeiliger Text bleibt neben dem Zeichen.
   Größenrollen: pgdoc://lisa-public/rules/47-symbole. */
.lesebereich h2:has(> img[alt=""]),
.lesebereich h3:has(> img[alt=""]) {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.lesebereich h2 img[alt=""],
.lesebereich h3 img[alt=""] {
    flex-shrink: 0;
    width: 3.8rem;
    margin: 0;
}

@media (min-width: 40rem) {
    .lesebereich h2 img[alt=""],
    .lesebereich h3 img[alt=""] {
        width: 4.2rem;
    }
}

@media (min-width: 64rem) {
    .lesebereich h2 img[alt=""],
    .lesebereich h3 img[alt=""] {
        width: 5rem;
    }
}

/* Der Absatz unmittelbar vor einer Symbolreihe führt in sie ein und steht
   deshalb mittig - anders als der übrige Vorspann, der links ausgerichtet
   ist. Linksbündig neben einer mittigen Reihe sieht er verrutscht aus.
   Gezielt am Vorkommen und nicht an einer Klasse im Inhalt: das hält den
   Inhalt frei von Gestaltung. */
.seiteninhalt > p:has(+ .karten.symbole) {
    text-align: center;
}

/* ==========================================================================
   Blockzitat als Infokasten
   ========================================================================== */

.lesebereich blockquote {
    margin: var(--space-2xl) 0;
    padding: var(--space-lg) var(--space-xl);
    background: var(--color-bg-alt);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-lg);
}

.lesebereich blockquote p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Trennlinie
   ========================================================================== */

.lesebereich hr {
    margin: var(--space-3xl) 0;
    border: 0;
    border-top: 1px solid var(--color-primary-light);
}

/* ==========================================================================
   Fussnavigation
   ========================================================================== */

.site-footer nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md) var(--space-xl);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer nav a {
    text-decoration: none;
}

.site-footer nav a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Seitenaufbau nach dem Vorbild von regeneration (Phase 14)
   Ruhige Abschnitte, kurze Trennlinie unter den Ueberschriften,
   Bilder ab Desktop im Wechsel neben dem Text.
   Nur vorhandene Custom Properties, keine neuen Farben.
   ========================================================================== */

/* Kurze Trennlinie unter jeder Abschnittsueberschrift. */
.lesebereich h2::after {
    content: "";
    display: block;
    width: 6rem;
    height: 1px;
    margin-top: var(--space-md);
    background: var(--color-secondary);
}

/* Luft zwischen den Abschnitten, wie in der Vorlage. */
.abschnitt {
    margin-top: var(--space-3xl);
}

.seiteninhalt > h1 + p {
    font-size: var(--font-size-lg);
    line-height: 1.6;
}

/* Ein Abschnitt ohne Bild steht mittig in schmalerem Satz — das ist der
   Ruhepunkt zwischen den bildtragenden Abschnitten. Mittig steht dabei
   der Block, nicht der Satz: die Ueberschrift wird zentriert, der
   Fliesstext bleibt linksbuendig. Zentrierte Absaetze sind bei mehr als
   zwei Zeilen schlecht lesbar, weil der Zeilenanfang wandert. */
/* Karten und Stimmen ordnen sich selbst und brauchen die ganze Breite;
   die Begrenzung gilt dem Fliesstext. Ein Bild in einem Rohblock zaehlt
   nicht als Inhaltsbild: die Symbole eines Reglers und die Zertifikate
   stehen in einem eigenen Block und nie neben dem Text.

   Ein Zeichen in einer Ueberschrift zaehlt aus demselben Grund nicht: es
   ist Zierat und macht aus einem Textabschnitt keinen Bildabschnitt. Ohne
   die Ausnahme verloren alle acht Abschnitte auf /leistungen ihre mittige
   Stellung, sobald die Ueberschriften ein Zeichen bekamen. */
.abschnitt:not(:has(img:not(.stufen img, .zertifikate img, .bildreihe img, .karten img, h2 img, h3 img))):not(:has(.karten)):not(:has(.stimmen)) {
    max-width: 44rem;
    margin-inline: auto;
}

.abschnitt:not(:has(img:not(.stufen img, .zertifikate img, .bildreihe img, .karten img, h2 img, h3 img))) > .abschnitt-text > h2,
.abschnitt:not(:has(img:not(.stufen img, .zertifikate img, .bildreihe img, .karten img, h2 img, h3 img))) > .abschnitt-text > h3 {
    text-align: center;
}

/* Zeichen und Text beginnen gemeinsam links im zentrierten Abschnitt. */
.lesebereich .abschnitt > .abschnitt-text > h2:has(img[alt=""]),
.lesebereich .abschnitt > .abschnitt-text > h3:has(img[alt=""]) {
    text-align: left;
}

.abschnitt:not(:has(img:not(.stufen img, .zertifikate img, .bildreihe img, .karten img, h2 img, h3 img))) h2::after {
    margin-inline: auto;
}

/* Keine Zierlinie, wo die Überschrift schon ein Zeichen trägt: Zeichen und
   Linie sind beides Schmuck, und zwei davon an einer Überschrift sind einer
   zu viel. Vorher stand hier margin-inline 0, damit die Linie der linken
   Überschrift folgte statt frei in der Zeile zu hängen; mit der Rücknahme
   ist das gegenstandslos. Trifft auf (0,4,2), weil :has die Spezifität
   seines Arguments img[alt=""] beisteuert, und gewinnt damit gegen die
   Grundregel auf (0,1,2). */
.lesebereich .abschnitt > .abschnitt-text > h2:has(img[alt=""])::after {
    content: none;
}

/* Handlungsaufrufe stehen auch nach einem Porträt mittig; die Gleitkante
   endet davor. pgdoc://lisa-public/rules/52-gestaltung */
.abschnitt-text > p:has(> .knopf:only-child) {
    text-align: center;
    margin-inline: auto;
    clear: both;
}

/* Bilder im Inhalt stehen in bilder.css: flaechige Bilder, Bildreihen
   und das Bild, das der Text umfliesst. */

/* Der Textbereich schließt die Gleitkante ein, sonst ragt ein gleitendes
   Bild in den nächsten Abschnitt. Steht hier und nicht in bilder.css,
   weil die Regel jeden Textbereich trifft, bilder.css aber nur noch dort
   geladen wird, wo ein Bild steht. */
@media (min-width: 56rem) {
    .abschnitt-text {
        display: flow-root;
    }
}

/* Der Abstand nach oben gilt nur im Fliesstext: dort schliesst der Knopf
   einen Absatz ab. Die Gestaltung selbst steht in komponenten.css. */
.lesebereich .knopf {
    margin-top: var(--space-lg);
}

/* Der Stand eines Rechtstextes steht kleiner und ruhiger als der Text
   selbst: er ist eine Angabe ueber den Text, nicht Teil davon. */
.lesebereich .stand {
    margin-top: var(--space-xl);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}