/* Projekt-CSS prolahn.de — site-eigene Ergaenzungen.
 * Einbinden NACH sws-overrides.css, damit diese Regeln gewinnen.
 *
 * HERKUNFT. Diese Regeln standen bis zum 17.09.2026 direkt in der ERZEUGTEN
 * assets/css/sws-overrides.css, deren Kopf das ausdruecklich untersagt. Sie
 * waren damit bei jedem sws_starter-Rollout in Gefahr und hielten die Site auf
 * dem Foundation-Stand 0.24.1 fest.
 *
 * WIE SIE GEFUNDEN WURDEN: `bin/css_eigenanteil.py` haelt die gebaute Datei
 * gegen die Foundation-Fassung, aus der sie einmal entstand (0.24.1). Was dort
 * nicht vorkommt, ist site-eigen — 95 Selektoren, hier in der urspruenglichen
 * Reihenfolge und mit ihren At-Regel-Kontexten.
 *
 * WARUM DAS TRAGFAEHIG IST — der Beleg kommt von BCL, nicht aus einer Annahme:
 * prolahn ist ein BCL-Klon. Von den 95 Selektoren sind 92 auch in BCLs
 * Projekt-CSS, davon 89 WERTGLEICH; die drei Abweichungen sind Farb-
 * Rueckfallwerte der jeweiligen Marke. Die 22 `m-abt-*`-Selektoren der
 * Split-Sektion sind auf beiden Seiten DIESELBEN, ohne Zusatzblock.
 *
 * BCL laeuft seit dem 14.09.2026 live mit genau dieser Paarung: Foundation-CSS
 * 0.66.0 — inklusive `.m-abt-content { position: relative }` und dem
 * 50:50-Grid, an dem BCL am 08.09. einmal zusammengebrochen war — plus diesen
 * Regeln in der Projekt-CSS. Was auf prolahn entsteht, ist strukturgleich mit
 * einer Konfiguration, die in Betrieb ist.
 *
 * NICHT ENTHALTEN: die 61 Selektoren, die nur BCL hat. Diese Datei traegt
 * prolahns Bestand, nicht BCLs Design.
 */

/* ==========================================================================
   WIEDERHERGESTELLT — site-eigene Modulregeln von prolahn.de

   Diese Regeln standen in der site-eigenen sws-overrides.css und gingen beim
   Foundation-Rollout am 2026-08-26 verloren: `deploy_foundation.php` hat die Datei
   durch die erzeugte Foundation-Fassung ersetzt (prolahn.de, 03:40 bzw. 04:37).
   Betroffen sind die Modulfamilien, die es in der Foundation gar nicht gibt — ihre
   Klassen kommen in der neuen Datei an keiner Stelle vor, das Markup rendert also
   voellig unformatiert.

   Uebernommen wurde NUR, was verwaist ist. Regeln, die die Foundation ueberarbeitet
   hat, bleiben unangetastet; aus Selektorlisten wurde jeweils nur der verwaiste Teil
   herausgeloest, damit hier nichts Aktuelles ueberstimmt wird.

   Quelle: Backups/deploy-2026-08-26-*/assets_css_sws-overrides.css
   ========================================================================== */

/* Figtree Extra Bold */

/* Body 2-spaltig als echtes Grid (statt CSS columns), damit der Button direkt unter
   der letzten Zeile der rechten Spalte sitzt — unabhängig davon, wie hoch die linke
   Spalte ist. */
.m-tis-body-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;                                   /* 36px Spaltenabstand */
    font-weight: 300;                            /* Figtree Light */
    font-size: 1rem;                             /* 18px @ XL */
    line-height: 1.55;
}

/* === Modul 04 · Bootsführerscheine (Termin-Kacheln) === */
/*
   Hintergrund bg-primary (Ultramarineblau 100). Oberer Rand läuft von links
   (12 px über „normalem" Rand) schräg nach rechts (auf 0) — dezenter Kipp-Effekt.
   Mittig oben ein 140-px-Kreis (dunkelblau) mit 120-px-Steuerrad (gelb) darin,
   Mitte liegt 25 px unter dem normalen oberen Rand.
   Unten rechts Boot-Dekoration (gelb). */
/* REGEL: BG-Klasse kommt aus der Section-Config — hier KEIN background-color. */
.m-bfs-section {
    color: #ffffff;
    position: relative;
    padding-top: 6.389rem;                        /* 115 px ab normalem Rand bis Content */
    /* padding-bottom dynamisch via Foundation-Regel
       `section:has(+ [data-section-top-decor]…)` (Zeile ~969):
       - mit Welle-Folge → clamp(60, 9.583vw, 184) px Puffer (greift mit !important)
       - ohne Welle-Folge → Standard-Section-Bottom unten (5 rem ≈ 80 px) */
    padding-bottom: 5rem;
}

/* 140-px-Kreis + 120-px-Steuerrad: konzentrisch mittig, Mitte 25 px unter dem normalen Rand.
   Kreis-Farbe folgt der Section-BG (via --m-bfs-decor). */
.m-bfs-wheel {
    position: absolute;
    top: -2.5rem;                                 /* -45 px — 140/2 − 25 = 45 px über dem Rand */
    left: 50%;
    transform: translateX(-50%);
    width: 7.778rem;                              /* 140 px */
    height: 7.778rem;
    background: var(--m-bfs-decor, transparent);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    z-index: 3;
}

.m-bfs-wheel-svg {
    width: 6.667rem;                              /* 120 px */
    height: 6.667rem;
    display: block;
}

.m-bfs-wrap { position: relative; z-index: 2; }

.m-bfs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;               /* 50 : 50 */
    gap: 3.333rem;
}

/* Linke Spalte — Intro. Farben kommen aus der Section-Config (var(--section-*)). */
.m-bfs-title {
    font-size: 1.889rem;                          /* 34 px */
    color: var(--section-heading, #ffffff);
    line-height: 1.15;
    margin: 0 0 1rem 0;
}

.m-bfs-title-line1 { display: block; font-weight: 300; color: var(--section-muted, rgba(255,255,255,.7)); }

/* Figtree Light, gedämpft */
.m-bfs-title-line2 { display: block; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }

/* ExtraBold, erbt section-fg */

.m-bfs-body {
    font-weight: 300;
    font-size: 1rem;                              /* 18 px */
    line-height: 1.55;
    color: var(--section-fg, #ffffff);
}

.m-bfs-body > :first-child { margin-top: 0; }

.m-bfs-body p { margin: 0 0 0.833rem 0; }

.m-bfs-body p:last-child { margin-bottom: 0; }

.m-bfs-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background-color: var(--section-link-bg, #0090d4);
    color: var(--section-link-fg, #ffffff);
    font-weight: 400;
    font-size: 1rem;
    padding: 0.389rem 0.889rem;
    border-radius: 0.222rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-top: 1.55rem;
    transition: filter 0.2s;
}

.m-bfs-btn:hover { filter: brightness(0.95); }

.m-bfs-btn-icon { width: 1.111rem; height: 1.111rem; color: var(--color-accent); flex-shrink: 0; }

/* Rechte Spalte — Termine
   Termine-Haupttitel unten bündig mit Line2 der linken Spalte:
   padding-top = Line1-Höhe (Line1 = 34 × 1.15 = 39.1 px) plus (Line2 − Termine-Titel)
               = 34 × 1.15 + (34 − 22) × 1.15 = 2.94 rem (= 52.9 px @ XL 18)  */
.m-bfs-termine { padding-top: 2.94rem; }

.m-bfs-termine-title {
    color: var(--section-fg, #ffffff);
    font-weight: 800;                             /* Figtree ExtraBold */
    font-size: 1.222rem;                          /* 22 px */
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 1rem 0;                           /* unten bündig mit Line2, Abstand wie linke Spalte */
}

/* Kategorien: 2 Spalten nebeneinander (max 2), dritte wenn nötig in 2. Zeile */
.m-bfs-kat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    row-gap: 1.667rem;
}

.m-bfs-kat { display: flex; flex-direction: column; }

.m-bfs-kat-title {
    color: var(--section-fg, #ffffff);
    font-weight: 400;                             /* Figtree Regular — 18 px, nicht bold */
    font-size: 1rem;                              /* 18 px */
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 0.556rem 0;                       /* 10 px zur ersten Kachel */
}

/* Kacheln vertikal gestapelt, max 2 pro Kategorie */
.m-bfs-kachel-stack {
    display: flex;
    flex-direction: column;
    gap: 0.556rem;                                /* 10 px zwischen den Kacheln */
}

.m-bfs-kachel {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.667rem;
    background-color: var(--card-bg, #0090d4);
    color: var(--card-fg, #ffffff);
    padding: 0.889rem 1.111rem;                   /* 16/20 px */
    border-radius: 0.222rem;
    text-decoration: none;
    transition: filter 0.2s;
}

/* Top und Bottom haben jetzt eigenständige Box-Klassen (eigene --card-* via Inline-Style).
   Kein brightness-Filter — der Redakteur wählt die Farben explizit. */
.m-bfs-kachel:hover { filter: brightness(0.95); }

.m-bfs-kachel-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.556rem;                         /* 10 px */
    row-gap: 0.167rem;                            /* 3 px */
    font-size: 1rem;                              /* 18 px */
    line-height: 1.35;
}

.m-bfs-kachel-label { font-weight: 400; }

/* Figtree Regular */
.m-bfs-kachel-value { font-weight: 700; }

/* Datum Bold */
.m-bfs-kachel-arrow { flex-shrink: 0; }

.m-bfs-kachel-arrow-svg { width: 1.111rem; height: 1.111rem; color: var(--color-accent); }

/* bfs-Section: zusätzliche 1.5rem Atemraum zwischen Inhalt-Unterkante (Termine-
   Box) und Welle/Boot, sonst klebt das Boot direkt an der Termine-Box (sichtbar
   bei Viewports >= 1920 px, wo das Foundation-Padding exakt der Welle-Höhe = 184 px). */
section.m-bfs-section:has(+ [data-section-top-decor]:not([data-section-top-decor=""]):not([data-section-top-decor="none"])),
section.m-bfs-section:has(+ style + [data-section-top-decor]:not([data-section-top-decor=""]):not([data-section-top-decor="none"])) {
    padding-bottom: calc(clamp(60px, 9.583vw, 184px) + 1.5rem) !important;
}

/* === Modul 06 · Über BCL (Split-Sektion) === */
/*
   Links vollbleed Bild bis Viewport-Mitte. Rechts innerhalb 1485-Inhaltsbox sitzt der Wrap
   ab Viewport-Mitte bis zum 1485-rechten-Rand. Im Wrap: Titel spannt über die komplette
   Wrap-Breite (Text + Vignette), darunter der Text, rechts-mittig das Steuerrad.
   REGEL: BG + Schriftfarben kommen aus der Section-Config. */
.m-abt-section {
    color: var(--section-fg, #ffffff);
    position: relative;
    overflow: hidden;                             /* Steuerrad/Bild clippen am Viewport */
    min-height: 26.667rem;                        /* 480 px */
}

/* Bild: linke Hälfte einer zentrierten 1920-Box, analog .m-tis-wrap (Skipperfreunde).
   Unter 1920 Viewport: `left:0`, `width:50%` → klassische Viewport-Mitte (wie bisher).
   Ab 1920 Viewport: `left` rueckt mittig ein, `width` cappt bei 960 — der Sektions-
   Hintergrund wird links und rechts sichtbar. Mathematisch: image-right = viewport/2
   in beiden Regimen, sodass der Wrap (`margin-left: 50%`) nahtlos anschliesst. */
.m-abt-img {
    position: absolute;
    top: 0; bottom: 0;
    left: max(0px, calc((100% - 1920px) / 2));
    width: min(50%, 960px);
    overflow: hidden;
}

.m-abt-img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

.m-abt-wrap {
    margin-left: 50%;                             /* startet an Viewport-Mitte */
    /* Symmetrisch zur Bild-Cap-Logik (`.m-abt-img`): unter 1920 Viewport
       fuellt der Wrap die rechte Haelfte (margin-right=0). Ab 1920 cappt er
       am 1920-rechten Rand; rechts davon wird der Section-BG sichtbar — wie
       links neben dem Bild. So bleibt der Content bei jeder Aufloesung
       konstant 960 px breit, egal wie breit der Viewport ist. */
    margin-right: max(0px, calc((100% - 1920px) / 2));
    position: relative;
    min-height: 26.667rem;
    padding: 3.889rem 17rem 3.889rem 2.222rem;    /* 70 / 306 / 70 / 40 — rechts Freiraum fuer 260-px-Wheel + ~46 px Gap */
}

/* Wheel ist absolute am rechten Viewport-Rand — Content nimmt die volle Wrap-Breite. */
.m-abt-content {
    display: block;
}

.m-abt-title {
    color: var(--section-heading, var(--section-fg, #ffffff));
    font-size: 1.889rem;                          /* 34 px */
    line-height: 1.15;
    margin: 0 0 1.778rem 0;                       /* 32 px Abstand zum Body */
    position: relative;
    z-index: 2;                                   /* über dem Wheel, wenn sie sich visuell berühren */
}

.m-abt-title-line1 { display: block; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }

/* ExtraBold */
.m-abt-title-line2 { display: block; font-weight: 300; }

/* Light */
.m-abt-body {
    font-size: 0.944rem;                          /* 17 px */
    font-weight: 400;
    line-height: 1.5;
    color: var(--section-fg, #ffffff);
}

.m-abt-body--1col { columns: 1; }

.m-abt-body--2col { columns: 2; column-gap: 2.222rem; }

.m-abt-body p { margin: 0 0 1rem 0; break-inside: avoid; }

.m-abt-body p:last-child { margin-bottom: 0; }

.m-abt-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    align-self: flex-start;
    margin-top: 1.778rem;                         /* 32 px */
    background-color: var(--section-link-bg, var(--color-primary));
    color: var(--section-link-fg, #ffffff);
    font-weight: 400;
    font-size: 1rem;                              /* 18 px */
    padding: 0.389rem 0.889rem;
    border-radius: 0.222rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: filter 0.2s;
}

.m-abt-btn:hover { filter: brightness(0.95); }

/* Vignette: absolute am rechten Viewport-Rand, vertikal mittig in der Wrap-Box.
   Containing Block ist .m-abt-wrap (position:relative); right:0 = Wrap-Rechtsrand
   = Viewport-Rechtsrand (margin-right:0). */
.m-abt-wheel {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14.444rem;                             /* 260 px Durchmesser */
    height: 14.444rem;
    z-index: 2;
}

.m-abt-wheel-svg { width: 100%; height: 100%; display: block; }

/* === Modul 12 · Kurs-Termine === */
/*
 * Kachelgrid mit Header + Empty-State.
 * Header oben (H1/H2 + Body mit eigener Ausrichtung), darunter die Kacheln
 * mit den nächsten Terminen einer Terminart. Farben kommen aus der Section-
 * Config (--section-*); Karten-Farben aus rex_sws_css_options (box_class).
 * Modul rendert nur Inhalt — Section/Wrapper/Decor liefert die CType-Config.
 */
.m-kurs-termine { color: var(--section-fg, inherit); }

/* Header: H1 (light, gedaempft) + H2 (extrabold, prominent), je per data-align
 * gesteuert; Body separat per data-align. Spiegelt die News-View-More-Optik. */
.m-kurs-termine-header {
    margin-bottom: 2.222rem;                                  /* 40 px Abstand zum Grid */
    text-align: center;
}

.m-kurs-termine-header[data-align="left"]   { text-align: left;   }

.m-kurs-termine-header[data-align="center"] { text-align: center; }

.m-kurs-termine-header[data-align="right"]  { text-align: right;  }

.m-kurs-termine-title {
    font-size: 1.889rem;                                      /* 34 px @ XL */
    line-height: 1.15;
    margin: 0 0 1rem 0;
    color: var(--section-heading, var(--section-fg, inherit));
}

.m-kurs-termine-h1 {
    display: block;
    font-weight: 300;
    color: var(--section-muted, var(--section-fg, inherit));
}

.m-kurs-termine-h2 {
    display: block;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.m-kurs-termine-body { color: var(--section-fg, inherit); }

.m-kurs-termine-body[data-align="left"]   { text-align: left;   }

.m-kurs-termine-body[data-align="center"] { text-align: center; }

.m-kurs-termine-body[data-align="right"]  { text-align: right;  }

.m-kurs-termine-body p { margin: 0 0 1rem 0; }

.m-kurs-termine-body p:last-child { margin-bottom: 0; }

/* Grid: 2 Spalten ab lg, 3 Spalten ab xl, 1 Spalte mobil. Karten gleich hoch
 * (align-items:stretch ist Grid-Default), Inhalt verteilt sich vertikal. */
.m-kurs-termine-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.333rem;                                            /* 24 px */
}

/* Termin-Kachel — Box-Variablen kommen aus rex_sws_css_options (box_class)
 * und werden vom Modul-Output als Inline-Style auf das <article> gesetzt. */
.m-kurs-termine-kachel {
    background-color: var(--card-bg, rgba(255,255,255,0.08));
    color: var(--card-fg, var(--section-fg, inherit));
    padding: 1.667rem 1.778rem;                               /* 30 / 32 px */
    border-radius: 0.444rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;                                                /* 18 px */
}

.m-kurs-termine-kachel-title {
    font-size: 1.222rem;                                      /* 22 px */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--card-heading, var(--card-fg, inherit));
    margin: 0;
    line-height: 1.2;
}

/* Meta als <dl> mit zwei Spalten: Label rechtsbündig (compact), Value links.
 * Kein Float — Grid 2-Col mit „auto 1fr" haelt das Label auf min-content. */
.m-kurs-termine-kachel-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.444rem 0.889rem;                                   /* 8 / 16 px */
    margin: 0;
    font-size: 1rem;                                          /* 18 px @ XL */
    line-height: 1.4;
}

.m-kurs-termine-kachel-meta dt {
    font-weight: 400;
    color: var(--card-muted, var(--card-fg, inherit));
    margin: 0;
}

.m-kurs-termine-kachel-meta dd {
    font-weight: 700;
    margin: 0;
    color: var(--card-fg, inherit);
}

.m-kurs-termine-kachel-date { display: inline-block; }

.m-kurs-termine-kachel-time {
    display: inline-block;
    margin-left: 0.444rem;                                    /* 8 px */
    font-weight: 400;
    color: var(--card-muted, var(--card-fg, inherit));
}

/* Anmelde-Button — uppercase Pill, Karten-Link-Farben (link_bg/link_fg).
 * margin-top:auto schiebt den Button bei flex-column-Kacheln nach unten,
 * damit Karten unterschiedlicher Hoehe unten buendig sind. Icon links mit
 * gelber Akzentfarbe (analog .m-news-detail-back-icon). */
.m-kurs-termine-kachel-cta {
    align-self: flex-start;
    margin-top: auto;
    display: inline-flex; align-items: center;
    gap: 0.5rem;                                              /* 9 px Abstand Icon ↔ Text */
    padding: 0.444rem 1rem;                                   /* 8 / 18 px */
    background-color: var(--card-link-bg, var(--color-primary, #15365F));
    color: var(--card-link-fg, #ffffff);
    font-size: 1rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-decoration: none;
    border-radius: 0.222rem;
    transition: filter 0.2s;
}

.m-kurs-termine-kachel-cta:hover { filter: brightness(0.92); }

.m-kurs-termine-kachel-cta .m-kurs-termine-kachel-cta-icon {
    color: var(--color-accent, #b3cd35);
    width: 1.111em;
    height: 1.111em;
    flex: 0 0 auto;
    display: inline-block;
}

.m-kurs-termine-kachel-cta .m-kurs-termine-kachel-cta-icon svg {
    width: 100%; height: 100%; display: block;
}

/* Empty-State (kein aktiver, zukuenftiger Termin) — gleiche Optik wie Body. */
.m-kurs-termine-empty {
    color: var(--section-fg, inherit);
    text-align: center;
    padding: 1.5rem 0;
}

.m-kurs-termine-empty p { margin: 0 0 1rem 0; }

.m-kurs-termine-empty p:last-child { margin-bottom: 0; }

/* m-bfs-wrap nutzt im Modul-Output die Klassen `m-max-w m-px-edge` → 42.67 px
 * Inner-Padding bei vw < 1565. Box-element-Sektionen auf derselben Seite
 * nutzen aber die 1.5-rem-Gutter-Formel (24 px bei vw < 1565). Damit der
 * BFS-Section-Inhalt auf der gleichen x-Linie sitzt wie box-element-
 * Sektionen, wird das Padding auf die identische Formel umgestellt. */
.m-bfs-section > .m-bfs-wrap {
    max-width: none;
    padding-left:  max(1.5rem, calc((min(100vw, 1920px) - 1485px) / 2));
    padding-right: max(1.5rem, calc((min(100vw, 1920px) - 1485px) / 2));
}

/* ============================================================================
 * ProLahn-Override: Footer-Logo breit + flach (2026-05-26)
 * ----------------------------------------------------------------------------
 * sws_site::{{FooterLogo}} rendert entweder <img> oder <svg> mit class
 * 'm-footer-logo'. Default-Rendering (sws_icon) macht SVG quadratisch + klein.
 * Hier: volle Spalten-Breite (max-width ~280px = ~Spaltenbreite bei c11111),
 * Höhe automatisch nach Aspect-Ratio des SVGs (Logo 300x54 → ~50px hoch),
 * mit max-height-Safety damit andere Icons nicht überstrecken.
 * ============================================================================ */
.m-footer-logo,
svg.m-footer-logo,
img.m-footer-logo {
    width: 100%;
    max-width: 280px;
    height: auto;
    max-height: 5rem;
    display: block;
}

@media (max-width: 1023px) {
    .m-tis-body-grid { grid-template-columns: 1fr; gap: 0; }
    .m-bfs-section { padding-top: 4.5rem; padding-bottom: 3rem; }
    /* Termine-Titel braucht keinen baseline-Offset mehr, wenn untereinander */
          .m-bfs-termine { padding-top: 0; }
    .m-abt-section { min-height: 0; }
    .m-abt-img { position: static; width: 100%; aspect-ratio: 960 / 480; }
    .m-abt-wrap { margin-left: 0; margin-right: 0; width: 100%; min-height: 0; padding: 2rem 1.5rem; }
    .m-abt-body--2col { columns: 1; }
    .m-abt-wheel { display: none; }
}

@media (max-width: 1279px) {
    .m-bfs-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .m-bfs-kachel-row { grid-template-columns: 1fr; }
}

@media (max-width: 639px) {
    .m-bfs-kat-grid { grid-template-columns: 1fr; }
    .m-bfs-section { padding-bottom: 5.5rem; }
}

@media (min-width: 64em) {
    /* 1024 */
          .m-kurs-termine-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 90em) {
    /* 1440 */
          .m-kurs-termine-grid { grid-template-columns: 1fr 1fr 1fr; gap: 1.778rem; }
}

/* ============================================================================
 * ProLahn-Override v2: Logo im normalen Flex-Flow (2026-05-22)
 * ----------------------------------------------------------------------------
 * BCL-Logo sitzt position:absolute mit großem rundem bg-background-Halo
 * (m-logo-circle rounded-full). ProLahn-Logo (300x54, flach) wurde dadurch
 * gestaucht (v1) bzw. überlappte die Nav-Links (v1 mit transparent halo).
 *
 * v2: Logo in normalen Flex-Flow (.m-header-h > .m-max-w > flex):
 *   - position: relative (statt absolute) → Flex-Container reserviert Platz
 *   - transparent + radius:0 → keine Halo-Optik
 *   - aspect-ratio 300/54 + height-only → ignoriert die im Template hardcoded
 *     width="186" height="186" HTML-Attribute, die sonst 1:1 erzwingen
 *   - margin-right:1.5rem → Atemraum zum ersten Nav-Link
 *
 * WIEDERHERGESTELLT am 2026-09-17. Der Block stand bis zum 29.05.2026 in der
 * ERZEUGTEN sws-overrides.css und ging am 26.08.2026 verloren, als ein Rollout
 * sie durch die Foundation-Fassung ersetzte. Die Wiederherstellung am 27.08.
 * holte den Footer-Logo-Block zurück, diesen nicht — der weiße Kreis hinter
 * dem Logo war die Folge. Er gehört deshalb hierher und nicht zurück in die
 * erzeugte Datei (.claude/rules/foundation-vertrag.md: Klasse 5 ist nicht
 * deklarierbar). Quelle des Wortlauts: sws-overrides.css.bak-hero-font-20260529.
 * ============================================================================ */
#header .m-logo-circle {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin-right: 1.5rem !important;
    flex-shrink: 0 !important;
}
#header .m-logo-steering {
    aspect-ratio: 300 / 54 !important;
    height: 3rem !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
}
@media (min-width: 1024px) {
    #header .m-logo-steering { height: 3.5rem !important; }
}
@media (max-width: 1023px) {
    #header .m-logo-steering { height: 2.5rem !important; }
}
#header.is-compact .m-logo-circle { padding: 0 !important; }
#header.is-compact .m-logo-steering { height: 2.5rem !important; }