/* ============================================================
   BREITE UND POSITION DER BEREICHE
   ============================================================

   Gilt für jeden Bereichstyp mit Textcontainer. Aus wenigen Typen
   entstehen dadurch sehr unterschiedlich aussehende Seiten: derselbe
   Bereich einmal schmal am linken Rand, einmal breit und mittig.

   Die Klassen setzt mta_section_wrapper_attributes() – und zwar nur
   für die Werte schmal/mittel/breit beziehungsweise
   links/mitte/rechts. Fehlt der Wert, entsteht keine Klasse und es
   bleibt bei den Vorgaben aus section.css. Genau so rendern
   Bestandsseiten, deren Bereiche vor diesen Feldern gespeichert
   wurden.

   Zur Spezifität: section.css setzt .content-container .content
   (0,2,0) auf max-width 800px. Die Regeln hier hängen an zwei Klassen
   am <section> plus Kindselektor (0,3,0) und gewinnen unabhängig von
   der Ladereihenfolge.
   ============================================================ */


/* === BREITE === */

/* Lesebreite: ab etwa 75 Zeichen pro Zeile findet das Auge den
   Zeilenanfang schlechter wieder – bei langen Texten der häufigste
   Grund, warum eine Seite anstrengend wirkt. */
.extra-section.section--width-schmal .content-container > .content {
    max-width: 65ch;
}

/* Entspricht exakt der bisherigen Vorgabe. Bereiche, die beim
   Speichern den Default bekommen, sehen dadurch unverändert aus –
   deshalb hier 800px und nicht 50rem: die Wurzel-Schriftgröße ist
   über die Theme-Optionen kundenabhängig. */
.extra-section.section--width-mittel .content-container > .content {
    max-width: 800px;
}

/* So breit, wie der Inhaltsbereich der Website es zulässt – nicht ein
   fester Wert. Die Containerbreite ist pro Kunde über die Theme-Optionen
   einstellbar (--inner-content-width, Vorgabe 1120px); eine feste Zahl
   hier würde bei einem breiteren Container Platz ungenutzt lassen. */
.extra-section.section--width-breit .content-container > .content {
    max-width: var(--inner-content-width, 70rem);
}


/* === POSITION ===

   Verschoben wird der Bereich, nicht der Satz: text-align bleibt
   unangetastet, damit der Text auch im rechten Block linksbündig
   läuft. Rechtsbündiger Fließtext hat keinen festen Zeilenanfang und
   ist deutlich schwerer zu lesen.

   Eine Ausnahme weiter unten: bei den reinen Textbereichen zentriert
   die mittige Position auch den Satz.

   .content ist ein Flex-Item in .content-container – auto-Ränder
   schieben es innerhalb der Fläche. */

.extra-section.section--align-links .content-container > .content {
    margin-inline: 0 auto;
}

.extra-section.section--align-mitte .content-container > .content {
    margin-inline: auto;
}

.extra-section.section--align-rechts .content-container > .content {
    margin-inline: auto 0;
}


/* === ZENTRIERTE TEXTBEREICHE ===

   Beim Textblock und beim Textbereich heißt die mittige Position
   "Zentriert" und meint beides: der Block sitzt in der Mitte der
   Fläche und der Satz steht mittig darin. Bei einem Block, der nur
   aus Überschrift, Text und Button besteht, wirkt ein linksbündiger
   Satz in einer mittigen Spalte wie ein Versehen.

   Die anderen Typen bleiben außen vor: Etappen, Spalten, Kacheln und
   Team bringen eigene Bausteine mit, deren Ausrichtung nicht an der
   Position des Bereichs hängt.

   align-items, weil .content eine Flex-Spalte ist: text-align allein
   rückt zwar den Satz, ließe aber den Button am linken Rand stehen. */

.extra-section--textblock.section--align-mitte .content-container > .content,
.extra-section--text.section--align-mitte .content-container > .content {
    text-align: center;
    align-items: center;
}

/* Aufzählungen: der Punkt steht sonst am linken Rand der Liste, während
   der Satz in der Mitte sitzt – beide hätten dann nichts mehr
   miteinander zu tun. "inside" holt den Punkt in die Zeile, damit wandert
   er mit; das Einrücken der Liste wird dadurch überflüssig. */
.extra-section--textblock.section--align-mitte .content-container > .content :is(ul, ol),
.extra-section--text.section--align-mitte .content-container > .content :is(ul, ol) {
    list-style-position: inside;
    padding-left: 0;
}


/* === MEHRSPALTIGE BEREICHE ===

   Galerie, Team und Kacheln legen ihr Raster in einem eigenen
   Container unterhalb von .content ab. Damit die Breite auch dort
   greift, bekommt der Bereichscontainer dieselbe Begrenzung. */

.extra-section.section--width-schmal .content-container,
.extra-section.section--width-mittel .content-container,
.extra-section.section--width-breit .content-container {
    flex-wrap: wrap;
}


/* === KLEINE BILDSCHIRME ===
   Unterhalb dieser Breite bleibt für ein Versetzen kein Platz: der
   Bereich füllt die Fläche, egal welche Position gewählt ist. */

@media (max-width: 767px) {
    .extra-section[class*="section--align-"] .content-container > .content {
        margin-inline: 0;
    }

    .extra-section[class*="section--width-"] .content-container > .content {
        max-width: 100%;
    }
}