/* === HINTERGRUNDFLÄCHEN DER BEREICHE ===
   Wird vom Intro, vom Kontaktbereich und von den freien Bereichen genutzt.
   Die Fläche steckt in --section-background; bei einer frei gewählten Farbe
   kommt der Wert als Inline-Variable vom Server.

   --section-on-background ist die Schriftfarbe, die zur Fläche gehört. Sie
   wird nur dort gesetzt, wo die normale Textfarbe nicht mehr trägt: auf der
   Akzentfläche und auf frei gewählten Farben. */

.mta-bg {
    background-color: var(--section-background);
}

.mta-bg--alternativ {
    /* --background-01 ist die einzige Abstufung mit sichtbarem Abstand zur
       Seitenfläche; 02 bis 05 liegen alle auf derselben Helligkeit. */
    --section-background: var(--background-01);
}

.mta-bg--akzent {
    --section-background: var(--color-accent);
    --section-on-background: var(--accent-contrast);
}

/* Frei gewählte Farben: die Schriftfarbe folgt der Helligkeit der Fläche,
   die serverseitig ermittelt wird. */
.mta-bg--dark {
    --section-on-background: var(--background-05);
}

.mta-bg--light {
    --section-on-background: var(--foreground-01);
}

/* Die Schriftlogik greift ueberall ausser im Intro: dort haben Ueberschrift,
   Subline und Buttons eigene Farboptionen, die Vorrang behalten. Im Intro wird
   deshalb nur die Flaeche gesetzt. */
:is(.mta-bg--akzent, .mta-bg--dark, .mta-bg--light):not(.header-img-wrap) {
    color: var(--section-on-background);
}

:is(.mta-bg--akzent, .mta-bg--dark, .mta-bg--light):not(.header-img-wrap)
:is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption, address, .section-subline) {
    color: var(--section-on-background);
}

/* Spezifität muss .content-container .content .section-subline überbieten */
:is(.mta-bg--akzent, .mta-bg--dark, .mta-bg--light):not(.header-img-wrap)
.content-container .content .section-subline {
    color: var(--section-on-background);
    opacity: 0.8;
}

/* Links erben sonst --color-foreground und werden auf farbigen Flächen
   schlecht lesbar. */
:is(.mta-bg--akzent, .mta-bg--dark, .mta-bg--light):not(.header-img-wrap) a:not(.btn) {
    color: var(--section-on-background);
    text-decoration-color: color-mix(in srgb, var(--section-on-background) 50%, transparent);
}

:is(.mta-bg--akzent, .mta-bg--dark, .mta-bg--light):not(.header-img-wrap) a:not(.btn):hover {
    text-decoration-color: var(--section-on-background);
}

/* Der Standard-Button ist Akzentfläche auf Akzentfarbe – auf einer farbigen
   Fläche also kaum zu erkennen. Deshalb invertiert. */
:is(.mta-bg--akzent, .mta-bg--dark, .mta-bg--light):not(.header-img-wrap) .btn {
    background-color: var(--section-on-background);
    color: var(--section-background);
}

/* Auf der Akzentflaeche gelten dieselben Hover-Werte wie in
   extra-sections.css – sonst wuerden sich bestehende Bereiche mit dem Update
   optisch veraendern. */
.mta-bg--akzent:not(.header-img-wrap) .btn:hover {
    background-color: var(--foreground-01);
    color: var(--accent-contrast);
}

/* Bei frei gewaehlten Farben entsteht die Hover-Flaeche aus der Flaeche
   selbst: --foreground-01 kann der Schriftfarbe zu nah kommen und den Text
   verschwinden lassen. */
:is(.mta-bg--dark, .mta-bg--light):not(.header-img-wrap) .btn:hover {
    background-color: color-mix(in srgb, var(--section-on-background) 85%, var(--section-background));
    color: var(--section-background);
}

/* Icons der sozialen Netzwerke im Kontaktbereich */
:is(.mta-bg--akzent, .mta-bg--dark, .mta-bg--light):not(.header-img-wrap) .social-media-links a {
    color: var(--section-on-background);
}

/* === INTRO ===
   Beim Intro liegt die Fläche hinter dem Bild. Ohne Bild – etwa im
   Designtyp 2 – ist sie die sichtbare Fläche des Bereichs. */
.header-img-wrap.mta-bg {
    background-color: var(--section-background);
}