/* 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);
    background: var(--color-primary);
    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.
   steht mittig. Das nimmt die Vorlage auf, in der jeder Abschnitt mit
   einer mittigen Ueberschrift beginnt. */
.seiteninhalt > h1,
.seiteninhalt > h1 ~ p {
    text-align: center;
    max-width: var(--container-narrow);
    margin-inline: auto;
}

.seiteninhalt > h1 {
    margin-bottom: var(--space-lg);
}

.seiteninhalt > h1 ~ 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,
.startbereich 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),
.startbereich figure:not(.flaechig) {
    margin: var(--space-2xl) 0;
}

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

/* Ein Verweis, der allein in seinem Absatz steht, ist ein
   Handlungsaufruf und steht mittig. */
.lesebereich p > .btn:only-child,
.startbereich p > .btn:only-child {
    display: inline-block;
    margin: var(--space-md) 0;
}

.lesebereich figcaption,
.startbereich 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,
.startbereich p > img {
    display: block;
    width: 100%;
    height: auto;
    margin: var(--space-md) 0;
}

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

.lesebereich blockquote,
.startbereich 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,
.startbereich blockquote p:last-child {
    margin-bottom: 0;
}

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

.lesebereich hr,
.startbereich 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,
.startbereich 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. */
.abschnitt:not(:has(img)):not(:has(.karten)):not(:has(.stimmen)) {
    max-width: 44rem;
    margin-inline: auto;
}

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

.abschnitt:not(:has(img)) h2::after {
    margin-inline: auto;
}

/* Ein Handlungsaufruf steht mittig unter dem Text, den er abschliesst. */
.abschnitt:not(:has(img)) p:has(> .knopf:only-child),
.abschnitt:not(:has(img)) p:has(> .btn:only-child) {
    text-align: center;
}

/* Ab Desktop steht das Bild eines Abschnitts neben dem Text, im Wechsel
   rechts und links. Auf Mobil bleibt alles einspaltig untereinander. */
@media (min-width: 56rem) {
    .abschnitt:has(.abschnitt-bilder) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--space-3xl);
        align-items: center;
    }

    .abschnitt:nth-of-type(even) .abschnitt-text {
        order: 2;
    }
}

.abschnitt-bilder > p {
    margin-block: var(--space-md);
}

/* ==========================================================================
   Flaechige Bilder ueber die volle Fensterbreite
   ========================================================================== */

/* Bricht aus jedem Container aus und nimmt die ganze Fensterbreite ein.
   50% ist die Mitte des Containers, 50vw die halbe Fensterbreite; die
   Differenz ist genau der Abstand zum Fensterrand. */
.kopfbild,
.flaechig {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    margin-block: 0 var(--space-2xl);
}

.kopfbild img,
.kopfbild picture,
.flaechig img,
.flaechig picture {
    display: block;
    width: 100%;
    height: auto;
}

/* Ein Stimmungsbild traegt keine runden Ecken: es soll die Flaeche
   halten, nicht als Kachel wirken. */
.kopfbild img,
.flaechig img {
    border-radius: 0;
    height: clamp(16rem, 52vh, 40rem);
    object-fit: cover;
}

/* Der Inhalt folgt dicht auf ein flaechiges Bild. */
.kopfbild + .lesebereich,
.kopfbild + .startbereich {
    padding-top: 0;
}


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