/*
 * RealLeaf — Footer (S1-06, v1 konservativ)
 *
 * Zweck: Tokenbasierte Portierung des Prototyp-Footer-Looks
 * (design/prototype/assets/styles.css:265-275 + chrome.js:130-148 als
 * Markup-Spezifikation) auf die LIVE-Selektoren des Elementor-Footer-
 * Templates 26712. Das Elementor-Template bleibt strukturell bestehen,
 * es wird ausschliesslich gestylt (DB/Elementor tabu, kein Markup-Umbau).
 *
 * Mapping Prototyp-Regel -> Live-Selektor + Spezifitaeten:
 *   plans/s1-design/evidenz/s1-06-id-mapping.md
 * Live-Markup verifiziert am 2026-06-10 (curl mit Browser-UA: realleaf.de/,
 * /shop/, /en/ - identisches Footer-Markup auf allen drei Seiten;
 * uploads/elementor/css/post-26712.css: KEIN !important, max. (0,4,0),
 * laedt NACH den Child-Theme-Styles -> alle Overrides hier gewinnen
 * per Spezifitaet >= (0,5,0), footer.css braucht NULL !important).
 *
 * Live-Struktur (Template 26712, lokaler Export = Live-HTML):
 *   footer.elementor-location-footer
 *   |- HAUPTBLOCK  .e-con-full.e-flex.e-con.e-parent   (7de3e69)
 *   |  |- BRAND    .e-con.e-child > .elementor-widget-image   (Leaf-Icon)
 *   |  |- SPALTEN  .e-con.e-child (Wrapper)
 *   |     |- 3x SPALTE .e-con.e-child:
 *   |        1. Heading-Widget = Spaltentitel (Product/Explore/Company)
 *   |        2..n Heading-Widgets header_size "p" mit <a> = Linkzeilen
 *   |- BOTTOM      .e-con-boxed.e-flex.e-con.e-parent  (4b6ccbc)
 *      |- .e-con-inner (NUR im Bottom-Block -> eindeutiger Anker)
 *         |- LINKS  .e-con.e-child mit Heading-Widgets
 *         |         (Copyright, Privacy Policy, Terms of Service)
 *         |- RECHTS .e-con.e-child mit 3 Icon-Widgets (Inline-SVG)
 *
 * Stabile Selektor-Anker statt generierter Elementor-IDs (NULL
 * elementor-element-*-Selektoren):
 *   - HAUPTBLOCK:  .e-flex.e-con.e-parent:has(.elementor-widget-image)
 *                  (einziger e-parent im Footer mit Image-Widget)
 *   - BOTTOM:      .e-flex.e-con.e-parent:has(.elementor-widget-icon)
 *                  (einziger e-parent im Footer mit Icon-Widgets)
 *   - SPALTE:      .e-con.e-child > .e-con.e-child (die doppelt
 *                  verschachtelte e-child-Kette existiert nur im
 *                  Spalten-Wrapper; Bottom-Kinder haengen an .e-con-inner)
 *   - Spaltentitel: > .elementor-widget-heading:first-child
 *                  (Subjekt ist das WIDGET, nicht der h6/h2/p-Tag!)
 *
 * WICHTIG tag-agnostisch: functions.php:307-368 (#realleaf-a11y-fixes)
 * ersetzt auf der STARTSEITE alle Footer-h6 per MutationObserver durch h2.
 * Deshalb ankert KEINE Regel auf h2/h6/p - immer .elementor-heading-title
 * bzw. Widget-/Container-Klassen (Startseite und Shop sehen identisch aus).
 *
 * Theme-Faehigkeit: beide Themes laufen komplett ueber Tokens
 * (tokens.css: --footer-bg #112819 / dark #0b1c11, --footer-text #faf9f6,
 * --accent-bright). Gedaempfte Texte/Border als color-mix-Alpha-Abstufung
 * von --footer-text (Prototyp-Vorlage rgb(250 249 246 / .7) usw.) -
 * keine neuen Hex-Werte. KEIN [data-theme=dark]-Block noetig: die
 * Footer-Flaeche ist in BEIDEN Themes dunkel, Logo-PNG und die weissen
 * Inline-SVG-Icons (fill="white" fill-opacity=".65") bleiben ohne
 * filter-Korrektur lesbar (Mapping-Dokument, Abschnitt Logo/Icons).
 *
 * Degradation (dokumentiert): Browser ohne :has()/color-mix() (Baseline
 * 2023) behalten Elementors eigenes Layout/#2F381D-Flaeche - Footer
 * bleibt vollstaendig benutzbar, nur ohne neuen Look.
 *
 * Scope: ALLE Regeln beginnen mit .elementor-location-footer -
 * kein Leaken in Seiteninhalt (Shop-Seitenende-Template 27729 ist
 * Seiteninhalt und wird nicht beruehrt).
 */

/* ============================================================
   1. GRUNDFLAECHE + BASISTYPO
   Prototyp .footer (styles.css:265): background var(--footer-bg),
   gedaempfter heller Text. Gegner: post-26712.css setzt
   background-color #2F381D auf beide e-parents mit (0,4,0) und laedt
   NACH footer.css -> diese Regeln haben (0,5,0) via :has()-Anker.
   ============================================================ */

.elementor-location-footer {
    font-family: var(--body);
    color: color-mix(in srgb, var(--footer-text) 70%, transparent);
}

.elementor-location-footer .e-flex.e-con.e-parent:has(.elementor-widget-image),
.elementor-location-footer .e-flex.e-con.e-parent:has(.elementor-widget-icon) {
    background-color: var(--footer-bg);
}

/* ============================================================
   2. HAUPTBLOCK-LAYOUT (>=768px)
   Prototyp .footer__grid (styles.css:266): 1.6fr/1fr/1fr/1fr, gap 36.
   Sinngemaess auf die Live-Verschachtelung uebertragen:
   Hauptblock = Grid [Brand | Spalten-Wrapper], Spalten-Wrapper = Grid
   mit den 3 Linkspalten. 4-/2-/1-spaltig: >=1200 Brand+3 Spalten,
   768-1199 Brand schmal + 2 Spalten (dritte bricht um, Prototyp
   styles.css:516), <=767 einspaltig (styles.css:530, Sektion 6).
   Zentrierte 1200px-Flaeche via padding-inline, damit der Hauptblock
   buendig ueber der Bottom-Zeile liegt (deren .e-con-inner ist live
   auf --content-width:1200px geboxt).
   Gegner nur Elementor-Core .e-con{display:var(--display)} (0,1,0)
   bzw. --width/--padding-Custom-Props (max (0,3,0)).
   ============================================================ */

@media (min-width: 768px) {

    .elementor-location-footer .e-flex.e-con.e-parent:has(.elementor-widget-image) {
        box-sizing: border-box;
        display: grid;
        grid-template-columns: minmax(96px, 1fr) minmax(0, 3fr);
        column-gap: 36px;
        row-gap: 36px;
        align-items: start;
        width: 100%;
        max-width: 100%;
        /* Content-Breiten-System (Baustein 4, 2026-07-07): Hauptblock auf
           dieselbe Content-Breite/Kante wie Header + Body boxen (statt fest
           1200px). Ergibt (100% - --maxw)/2 + --rl-gutter Seitenabstand,
           min --rl-gutter -> deckungsgleich mit .rl-wrap-Contentkante. */
        padding: var(--sp-8) max(var(--rl-gutter), calc((100% - var(--maxw)) / 2 + var(--rl-gutter))) var(--sp-7);
    }

    /* Bottom-Zeile (Copyright | Social) deckungsgleich mit der Hauptblock-
       Contentkante. FIX Task #20 fuer den bekannten ~30px-Kanten-Versatz
       (journal 2026-07-07-content-breiten-system-kategorie-banner.md,
       "BEKANNTER RESTPUNKT"): Elementor boxt die .e-con-inner live auf
       --content-width und ZENTRIERT sie OHNE Gutter-Anteil, waehrend der
       Hauptblock seinen Content per padding-inline um genau einen --rl-gutter
       nach innen rueckt. Ergebnis vorher: Copyright/Icons sassen ~1 Gutter
       (30px) weiter aussen als Logo/Spalten.
       Loesung: die geboxte .e-con-inner voll aufziehen (max-width:100%) und
       ihr EXAKT dieselbe Content-Formel wie dem Hauptblock (Zeile ~115)
       geben. Damit ist die linke/rechte Kante der Bottom-Zeile auf jeder
       Breite identisch mit Hauptblock + Header + Body. Rein CSS, reversibel.
       Anker: einziger e-parent im Footer mit Icon-Widgets (siehe Kopf);
       :has()-Klasse + e-con-inner ergeben (0,5,0) > Elementor-boxed (0,2,0). */
    .elementor-location-footer .e-flex.e-con.e-parent:has(.elementor-widget-icon) > .e-con-inner {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        padding-inline: max(var(--rl-gutter), calc((100% - var(--maxw)) / 2 + var(--rl-gutter)));
    }

    /* Brand- und Spalten-Wrapper: Elementor-Breiten (33.33%/100%)
       neutralisieren - im Grid zaehlen die Tracks */
    .elementor-location-footer .e-flex.e-con.e-parent:has(.elementor-widget-image) > .e-con.e-child {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* Spalten-Wrapper (Anker: enthaelt Heading-Widgets; der Brand-Container
       enthaelt nur das Image-Widget): Elementor-padding-left 80px raus,
       2 Spalten im Zwischenbereich 768-1199 */
    .elementor-location-footer .e-flex.e-con.e-parent:has(.elementor-widget-image) > .e-con.e-child:has(.elementor-widget-heading) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 36px;
        padding: 0;
    }

    /* Volle Desktop-Breite: 4-Spalten-Look des Prototyps */
    @media (min-width: 1200px) {

        .elementor-location-footer .e-flex.e-con.e-parent:has(.elementor-widget-image) {
            grid-template-columns: minmax(0, 1.6fr) minmax(0, 3.4fr);
        }

        .elementor-location-footer .e-flex.e-con.e-parent:has(.elementor-widget-image) > .e-con.e-child:has(.elementor-widget-heading) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }
}

/* ============================================================
   3. LINKSPALTEN
   Prototyp: .footer h5 (styles.css:268, uppercase Archivo 14px) und
   .footer ul/ul a (styles.css:269-271, Linkliste 14px, hover
   --accent-bright). Live sind die "Listen" einzelne Heading-Widgets
   (header_size p) - KEINE ul/li (Mapping-Dokument, Abschnitt
   "Bewusst nicht uebernommen"). Anker tag-agnostisch (a11y-Script
   tauscht h6->h2 auf der Startseite): Spaltentitel = ERSTES
   Heading-Widget der Spalte, Linkzeilen = alle weiteren.
   Gegner: post-26712.css Widget-Typo (Inter 14/300 #FFFFFFA6 bzw.
   Inter 19/400 #FFFFFF) mit (0,4,0) - Regeln hier liegen bei
   (0,6,0)-(0,8,0).
   ============================================================ */

/* Spalte: vertikale Liste, gap 10 wie Prototyp ul (styles.css:269) */
.elementor-location-footer .e-con.e-child > .e-con.e-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Spaltentitel-Widget: +6px Abstand (gap 10 + 6 = 16px wie Prototyp
   h5 margin 0 0 16px) */
.elementor-location-footer .e-con.e-child > .e-con.e-child > .elementor-widget-heading:first-child {
    margin: 0 0 6px;
}

/* Spaltentitel (Product/Explore/Company): Prototyp .footer h5 */
.elementor-location-footer .e-con.e-child > .e-con.e-child > .elementor-widget-heading:first-child .elementor-heading-title {
    margin: 0;
    font-family: var(--display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--footer-text);
}

/* Linkzeilen: Prototyp .footer ul a (14px, gedaempft) */
.elementor-location-footer .e-con.e-child > .e-con.e-child > .elementor-widget-heading:not(:first-child) .elementor-heading-title {
    margin: 0;
    font-family: var(--body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.5;
    color: color-mix(in srgb, var(--footer-text) 70%, transparent);
}

/* Links (Spalten + Bottom-Zeile gemeinsam): erben die gedaempfte
   Farbe, Hover/Focus -> --accent-bright (Prototyp styles.css:271) */
.elementor-location-footer .elementor-widget-heading .elementor-heading-title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
}

.elementor-location-footer .elementor-widget-heading .elementor-heading-title a:hover,
.elementor-location-footer .elementor-widget-heading .elementor-heading-title a:focus-visible {
    color: var(--accent-bright);
}

/* ============================================================
   4. BRAND / LOGO
   Live: einziges Image-Widget im Footer (Leaf-Icon I-CON.png 79x72).
   Prototyp-Brand sitzt links oben (chrome.js:137) - live erzwingt
   post-26712.css text-align:end (0,3,0); hier (0,5,0) -> start.
   PNG bleibt ohne filter: Flaeche ist in beiden Themes dunkel
   (--footer-bg), Icon ist hell/farbig genug (Mapping-Dokument).
   ============================================================ */

.elementor-location-footer .e-con.e-child .elementor-widget-image.elementor-widget {
    text-align: start;
}

/* ============================================================
   5. BOTTOM-ZEILE (Copyright | Privacy | Terms + Social-Icons)
   Prototyp .footer__bottom (styles.css:275): border-top in heller
   12%-Abstufung, 12.5px, 50-55% gedaempft. Anker .e-con-inner ist
   eindeutig (nur der Bottom-Block ist e-con-boxed). Border-Gegner:
   post-26712.css border 1px #FFFFFFA6 (0,4,0) -> hier (0,5,0);
   faellt color-mix aus, bleibt die Live-Border stehen (Degradation).
   Rechtslinks werden NUR gestylt - Linkziele/-vollstaendigkeit sind
   DB-Inhalt (Befund-Zelle, Mapping-Dokument Abschnitt Rechtslinks).
   ============================================================ */

.elementor-location-footer .e-flex.e-con.e-parent:has(.elementor-widget-icon) {
    border-top: 1px solid color-mix(in srgb, var(--footer-text) 12%, transparent);
}

/* Linke Gruppe: Copyright + Rechtslinks als umbruchfaehige Zeile
   (live steht der Desktop-gap auf 0 -> Texte klebten aneinander) */
.elementor-location-footer .e-con-inner > .e-con.e-child:has(.elementor-widget-heading) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    min-width: 0;
}

/* Icon-Gruppe: nur vertikal zentrieren, Elementor-gap 10px bleibt */
.elementor-location-footer .e-con-inner > .e-con.e-child:has(.elementor-widget-icon) {
    align-items: center;
}

/* Bottom-Texte: Prototyp .footer__bottom Typo */
.elementor-location-footer .e-con-inner > .e-con.e-child .elementor-widget-heading .elementor-heading-title {
    margin: 0;
    font-family: var(--body);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.4;
    color: color-mix(in srgb, var(--footer-text) 55%, transparent);
}

/* ============================================================
   6. MOBILE <=767px
   Prototyp styles.css:530 (.footer__grid einspaltig). Live setzt
   mobil Brand 24% / Wrapper 74% nebeneinander (post-26712.css,
   max (0,3,0)) - hier wird gestapelt: Brand oben, Spalten darunter,
   kein horizontaler Overflow (alle Tracks minmax(0,1fr)).
   Bottom-Zeile behaelt Elementors column-reverse (Icons oben,
   Copyright darunter) - nur zentriert + umbruchfaehig.
   ============================================================ */

@media (max-width: 767px) {

    .elementor-location-footer .e-flex.e-con.e-parent:has(.elementor-widget-image) {
        box-sizing: border-box;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        row-gap: 28px;
        width: 100%;
        max-width: 100vw;
        padding: 40px 20px 32px;
    }

    .elementor-location-footer .e-flex.e-con.e-parent:has(.elementor-widget-image) > .e-con.e-child {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .elementor-location-footer .e-flex.e-con.e-parent:has(.elementor-widget-image) > .e-con.e-child:has(.elementor-widget-heading) {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 0;
    }

    .elementor-location-footer .e-con-inner > .e-con.e-child:has(.elementor-widget-heading) {
        justify-content: center;
        text-align: center;
        gap: 8px 14px;
    }
}

/* ============================================================
   7. PREMIUM-POLISH (Task #20, CSS-only "geiler")
   Rein optische Aufwertung OHNE Markup-/DB-Eingriff: mehr Tiefe auf der
   Flaeche, Akzent-Hairline als Abschluss zum Content, strukturgebende
   Spaltentitel-Marker, taktiler Link-Underline-Reveal und ein
   Chip-/Hover-Zustand fuer die Social-Icons. Alles token-basiert
   (--accent-bright / --footer-text / --footer-bg), degradiert sauber
   (color-mix/:has()/Pseudo-Elemente = Baseline 2023; ohne sie bleibt
   der flache v1-Footer bestehen). Strukturelle Ergaenzungen (echte
   Spalten/Links/Zahlarten/USP/Newsletter) sind NICHT hier, sondern im
   Umsetzungsplan plans/s1-design/s1-20-footer-redesign.md.
   ============================================================ */

/* 7.1 Flaechen-Tiefe: dezenter Akzent-Schimmer oben links + minimaler
   Vertikal-Verlauf. Gleiche Spezifitaet wie die Basis-bg-Regel (0,5,0),
   aber spaeter im File -> gewinnt. Fallback background-color bleibt. */
.elementor-location-footer .e-flex.e-con.e-parent:has(.elementor-widget-image) {
    position: relative;
    background-color: var(--footer-bg);
    background-image:
        radial-gradient(115% 90% at 12% -10%,
            color-mix(in srgb, var(--accent-bright) 12%, transparent) 0%,
            transparent 55%),
        linear-gradient(180deg,
            color-mix(in srgb, #ffffff 4%, var(--footer-bg)) 0%,
            var(--footer-bg) 42%);
}

/* Akzent-Hairline als oberer Abschluss des Footers (Trennung vom Content) */
.elementor-location-footer .e-flex.e-con.e-parent:has(.elementor-widget-image)::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--accent-bright) 65%, transparent) 22%,
        color-mix(in srgb, var(--accent-bright) 65%, transparent) 78%,
        transparent 100%);
    pointer-events: none;
}

/* 7.2 Spaltentitel: kurzer Akzent-Marker unter dem Titel (Struktur/Rhythmus) */
.elementor-location-footer .e-con.e-child > .e-con.e-child > .elementor-widget-heading:first-child .elementor-heading-title::after {
    content: "";
    display: block;
    width: 26px;
    height: 2px;
    margin-top: 8px;
    border-radius: 2px;
    background: var(--accent-bright);
    opacity: 0.9;
}

/* 7.3 Link-Underline-Reveal (Spalten UND Bottom-Links): waechst von links
   ein, kombiniert mit dem bestehenden Hover-Farbwechsel auf --accent-bright
   (Sektion 3). background-size-Trick statt border -> kein Layout-Shift. */
.elementor-location-footer .elementor-widget-heading .elementor-heading-title a {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    padding-bottom: 1px;
    transition:
        color var(--dur-fast) var(--ease),
        background-size var(--dur-fast) var(--ease);
}

.elementor-location-footer .elementor-widget-heading .elementor-heading-title a:hover,
.elementor-location-footer .elementor-widget-heading .elementor-heading-title a:focus-visible {
    background-size: 100% 1px;
}

/* 7.4 Social-Icons: dezenter runder Chip + Hover-Lift + Aufhellung.
   HINWEIS: Die Icons tragen live KEIN <a> (rein dekorativ, Evidenz S1-06).
   Der Umsetzungsplan MUSS sie mit echten Profil-URLs hinterlegen ODER
   entfernen - sonst ist der Chip-Affordance ohne Ziel (Doku im Plan). */
.elementor-location-footer .elementor-widget-icon .elementor-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--footer-text) 18%, transparent);
    transition:
        border-color var(--dur-fast) var(--ease),
        background-color var(--dur-fast) var(--ease),
        transform var(--dur-fast) var(--ease);
}

.elementor-location-footer .elementor-widget-icon svg path {
    transition: fill-opacity var(--dur-fast) var(--ease);
}

.elementor-location-footer .elementor-widget-icon:hover .elementor-icon,
.elementor-location-footer .elementor-widget-icon:focus-within .elementor-icon {
    border-color: color-mix(in srgb, var(--accent-bright) 80%, transparent);
    background-color: color-mix(in srgb, var(--accent-bright) 14%, transparent);
    transform: translateY(-2px);
}

.elementor-location-footer .elementor-widget-icon:hover svg path,
.elementor-location-footer .elementor-widget-icon:focus-within svg path {
    fill-opacity: 1;
}

/* ============================================================
   8. NATIVER FOOTER (.rl-footer) - Option B, Task #20
   Loest die .elementor-location-footer-Sektionen ab, sobald footer.php live
   ist (Child-Override, Rollback = footer.php loeschen). Dieselben Tokens +
   dieselbe Polish-Sprache wie Sektion 7. .rl-wrap = Content-Breiten-System
   (tokens.css) -> Kanten automatisch buendig mit Header/Body.
   ============================================================ */
.rl-footer {
    position: relative;
    font-family: var(--body);
    color: color-mix(in srgb, var(--footer-text) 70%, transparent);
    background-color: var(--footer-bg);
    background-image:
        radial-gradient(115% 90% at 12% -10%, color-mix(in srgb, var(--accent-bright) 12%, transparent) 0%, transparent 55%),
        linear-gradient(180deg, color-mix(in srgb, #fff 4%, var(--footer-bg)) 0%, var(--footer-bg) 42%);
}
.rl-footer::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent-bright) 65%, transparent) 22%, color-mix(in srgb, var(--accent-bright) 65%, transparent) 78%, transparent 100%);
}
.rl-footer__top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px 48px;
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-7);
    align-items: start;
}
.rl-footer__brand { display: flex; flex-direction: column; gap: 14px; max-width: 340px; }
.rl-footer__logo { display: inline-block; }
.rl-footer__tagline { margin: 0; font-family: var(--display); font-size: 18px; color: var(--footer-text); }
.rl-footer__claim { margin: 0; font-size: 14px; line-height: 1.5; }
.rl-footer__usp { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rl-footer__usp li {
    font-size: 12.5px; padding: 5px 11px; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--footer-text) 18%, transparent);
    color: color-mix(in srgb, var(--footer-text) 85%, transparent);
}
.rl-footer__title {
    margin: 0 0 14px; font-family: var(--display); font-size: 14px; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--footer-text);
}
.rl-footer__title::after { content: ""; display: block; width: 26px; height: 2px; margin-top: 8px; border-radius: 2px; background: var(--accent-bright); opacity: .9; }
.rl-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rl-footer__col a {
    font-size: 14px; text-decoration: none; color: color-mix(in srgb, var(--footer-text) 70%, transparent);
    background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
    background-position: 0 100%; background-size: 0% 1px; padding-bottom: 1px;
    transition: color var(--dur-fast) var(--ease), background-size var(--dur-fast) var(--ease);
}
.rl-footer__col a:hover, .rl-footer__col a:focus-visible { color: var(--accent-bright); background-size: 100% 1px; }
.rl-footer__bottom { border-top: 1px solid color-mix(in srgb, var(--footer-text) 12%, transparent); }
.rl-footer__bottom-inner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 6px 18px; padding-top: 18px; padding-bottom: 18px;
}
.rl-footer__bottom-inner p { margin: 0; font-size: 12.5px; color: color-mix(in srgb, var(--footer-text) 55%, transparent); }
.rl-footer__bottom-inner a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rl-footer__bottom-inner a:hover { color: var(--accent-bright); }
@media (max-width: 1023px) { .rl-footer__top { grid-template-columns: 1fr 1fr; } .rl-footer__brand { grid-column: 1 / -1; max-width: none; } }
@media (max-width: 600px)  { .rl-footer__top { grid-template-columns: 1fr; } .rl-footer__bottom-inner { justify-content: center; text-align: center; } }

/* ---- NEWSLETTER (rl_newsletter_section(), global) ----
   2026-07-20 aus home.css hierher verschoben: Das Theme-Newsletter-Modul
   ersetzt das Elementor-Template 27729 (EN-Strings + Stockfoto) auch auf
   Shop-/Kategorie-Archiven; footer.css laedt ueberall, damit EINE Quelle.
   Button-Basis (.rl-btn) liegt seit demselben Datum in tokens.css. */
.rl-news { position: relative; overflow: hidden; background: var(--dark-bg); }
.rl-news__img { position: absolute; inset: 0; z-index: 0; }
.rl-news__img img { width: 100%; height: 100%; object-fit: cover; }
.rl-news__shade { position: absolute; inset: 0; z-index: 1; background: color-mix(in srgb, var(--rl-green-deep) 82%, transparent); }
.rl-news__inner { position: relative; z-index: 2; padding: 76px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; color: var(--rl-white); }
.rl-news h2 { color: var(--rl-white); font-size: clamp(30px, 4vw, 50px); font-weight: 900; letter-spacing: -.03em; }
.rl-news p { color: color-mix(in srgb, var(--rl-white) 74%, transparent); font-size: 16px; max-width: 38ch; }
.rl-news .rl-eyebrow { color: var(--accent-bright); margin-bottom: 12px; display: block; }
.rl-news__form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.rl-news__form input { flex: 1; min-width: 220px; padding: 16px 20px; border-radius: var(--r-pill); border: 1.5px solid var(--rl-black); background: var(--rl-white); color: var(--rl-black); font-family: var(--body); font-size: 16px; font-weight: 500; }
.rl-news__small { font-size: 12.5px; color: color-mix(in srgb, var(--rl-white) 50%, transparent); margin-top: 14px; }
/* Elementor-Global-Guard analog .rl-home (home.css): Formular-Button-Styles
   faerbten den Leaf-Button sonst um (Pink/gruen-auf-gruen). */
.rl-news .rl-btn.rl-btn--leaf, .rl-news button.rl-btn--leaf { background: var(--accent) !important; color: var(--rl-white) !important; border-color: var(--accent) !important; }
.rl-news .rl-btn.rl-btn--leaf:hover, .rl-news button.rl-btn--leaf:hover { background: var(--accent-hover) !important; color: var(--rl-white) !important; border-color: var(--accent-hover) !important; }
.rl-news button.rl-btn.rl-btn--leaf { border-radius: var(--r-pill) !important; padding: 15px 26px !important; font-family: var(--display) !important; font-size: 16px !important; font-weight: 700 !important; }
@media (max-width: 1023px) { .rl-news__inner { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 600px) { .rl-news__inner { padding: 60px 18px; } }