/* ============================================================
   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.

   .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;
}


/* === 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%;
    }
}