/*
 * Grundtheme der Kundenwebsites (Frontend-Baukasten, plaene/frontend.md G2/G7).
 *
 * GANZ FRISCHER Start (IW 06.07.2026): Diese Datei enthält NUR das Fundament — Design-Tokens
 * und deren Bootstrap-Verdrahtung. Keinerlei vordefinierte Komponenten-/Chrome-Optik; das
 * Design der neuen Generation entsteht von hier aus bewusst Schritt für Schritt neu.
 *
 * Farb-System: ALLE Bootstrap-Theme-Farben + Standard-Textfarbe sind Tokens (Defaults hier =
 * Bootstrap-Originalfarben); sämtliche kompilierten Ableitungen macht das generierte Artefakt
 * bootstrap-themecolors.css laufzeit-variabel. Websitespezifische Belegungen kommen aus
 * `website_globals` (cat='theme') als Inline-<style> über den head_html-Slot.
 * Dark-Mode ist technisch vollständig verdrahtet ([data-bs-theme=dark]); ob eine Website ihn
 * anbietet, wird später eine eigene Option — die Hülle rendert bis dahin fix light.
 * Bootstrap 5.3.3 (vendored, assets/shared) bleibt unangetastet. Kein Sass/Build.
 *
 * Schrift: Inter (vendored assets/shared/vendor/inter, Family „Inter Var") — dieselbe wie im CMS.
 *
 * 📋 Diese Datei ist die DEFINITIONS-/Default-Quelle aller `--cl-*`-Tokens. Der gruppierte
 *    Nutzungs-Katalog (alle Tokens + Zweck + Pflege-Ebene, [CMS]-Marker = Maskenoption) steht im
 *    Kopf von apps/website/overrides.php.
 * ⚠️ PFLICHT (§9a konventionen-code-hygiene.md): Token hier anlegen/ändern/entfernen ⇒ in
 *    DERSELBEN Session den Katalog nachziehen; CMS-Beförderung ⇒ zusätzlich Mapper +
 *    Endpoint-Whitelist + Maske synchron (Details in §9a). Sonst driftet der Überblick
 *    „was kann das CMS / was ginge via Override" — und DB-Werte laufen ins Leere.
 */

:root {
    /* ── Farb-Rollen (Defaults = Bootstrap-Originalfarben; je Website überschreibbar) ── */
    --cl-primary:       #0d6efd;  --cl-primary-rgb:   13, 110, 253;
    --cl-secondary:     #6c757d;  --cl-secondary-rgb: 108, 117, 125;
    /* Akzent-/CTA-Zusatzrolle (Farbrollen-Konzept): ohne eigenen Wert FOLGT sie der TEXTFARBE
       (IW 22.09.2026 — vorher der Primärfarbe [07.08.2026], davor fester Default #cc1a33). So bleibt Akzent
       zurückhaltend, solange die Website sie nicht bewusst setzt, und folgt im Dunkelmodus der dort
       aufgehellten Textfarbe; das RGB-Triple erbt mit. Zentrale Stelle — Registry, Maske und Doku zeigen
       denselben Default (theme_registry.php, website_theme.php, feature-frontend-website.md). */
    --cl-accent:        var(--cl-text);  --cl-accent-rgb: var(--cl-text-rgb);
    --cl-success:       #198754;  --cl-success-rgb:   25, 135, 84;
    --cl-info:          #0dcaf0;  --cl-info-rgb:      13, 202, 240;
    --cl-warning:       #ffc107;  --cl-warning-rgb:   255, 193, 7;
    --cl-danger:        #dc3545;  --cl-danger-rgb:    220, 53, 69;
    --cl-light:         #f8f9fa;  --cl-light-rgb:     248, 249, 250;
    --cl-dark:          #212529;  --cl-dark-rgb:      33, 37, 41;

    /* ── Standard-Textfarbe (eigenes Token — BS koppelt Schrift NICHT an dark) ────── */
    --cl-text:          #212529;  --cl-text-rgb:      33, 37, 41;
    /* Dark-Mode-Textfarbe: per Aufhellung abgeleitet (Farbton bleibt erhalten);
       überschreibbar als Sicherheitsventil. Beim BS-Standardgrau ≈ Bootstraps #dee2e6. */
    --cl-text-light:     color-mix(in srgb, var(--cl-text) 18%, #fff);

    /* ── Rundheit: EIN Grundcharakter-Token + Kapsel + Button-Kette ────────────────── */
    --cl-radius:        0.375rem;   /* 0 = alles eckig · Stufen entstehen per calc-Skala */
    --cl-radius-pill:   50rem;      /* Kapsel (selbstbegrenzend); z.B. 1.5rem = „begrenzt rund" */
    --cl-radius-btn:    var(--bs-border-radius);   /* Interaktions-Radius: Buttons + Felder (s. Verdrahtung unten); 'pill' = var(--bs-border-radius-pill) */

    /* ── Font-Indirektion (Websites: --cl-font: 'Hausschrift', var(--cl-font-default)) ── */
    --cl-font-default:  'Inter Var', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --cl-font:          var(--cl-font-default);
    /* Basis-Schriftgewicht des Fließtexts. Verdrahtet auf --bs-body-font-weight (s.u.);
       Überschriften bleiben Bootstrap-gesteuert.
       400 STATT 300 (IW 07.08.2026): 400 ist der einzige Schnitt, den JEDE Schriftfamilie
       garantiert mitbringt (CSS: `normal`) — 300 ist optional. Hausschriften wie SeatBcn haben
       keinen 300er, dort rendert der Browser ohnehin 400: Der alte Default versprach also etwas,
       das nur mit Variable Fonts wie Inter eingelöst wurde, und ließ CMS-Vorschau und echte
       Kundenwebsite auseinanderlaufen. Dünner Fließtext verliert zudem auf hellem Grund an
       Kontrastwirkung. Wer bewusst leichter will, überschreibt den Token je Website. */
    --cl-font-weight:   400;
    /* Bootstraps eigene Gewichts-Entscheidungen (IW 08.08.2026) — bisher standen sie fest im
       Vendor-CSS und waren damit unerreichbar:
         h1–h6            → 500 (Hervorhebung: Überschrift hebt sich vom Fließtext ab)
         .lead/.display-* → 300 (Zurücknahme: großer Text wirkt leichter)
       Als Token sind sie steuerbar — und der Schriftarten-Katalog setzt sie je Website auf ein
       Gewicht, das die gewählte Schrift WIRKLICH hat. Sonst rundet der Browser stur nach seiner
       Regel: 500 ginge auf 400 nach unten, Überschriften sähen aus wie Fließtext. */
    --cl-font-weight-heading: 500;
    --cl-font-weight-lead:    300;
    /* Bedienelemente: Bootstrap setzt sie EXPLIZIT auf 400, nicht per Vererbung — ein leichterer
       Fliesstext wirkt dort also nicht. Als eigene Rollen steuerbar (IW 08.08.2026). */
    --cl-font-weight-form:    400;
    --cl-font-weight-btn:     400;

    /* ── Icon-Gewicht des Website-Stils (thin=100 · light=300 · regular=400; Injektion) ── */
    --cl-icon-weight:  300;

    /* ── Komponenten-Farb-Tokens (Default-Kette auf Rollen; je Website separat belegbar —
          Einstellungswert darf eine ROLLE referenzieren, z.B. stars='accent') ────────── */
    --cl-stars-color:      var(--cl-warning);
    --cl-topbar-icon-color: var(--cl-accent);
    /* Hauptnav-Links: Body-Textfarbe statt BS-Default (=Linkfarbe/primary). Über --bs-body-color
       statt direkt --cl-text (IW 26.08.2026): im Light identisch (Zeile ~120 setzt body-color =
       --cl-text), im Dark flippt der Wert mit — wie beim Caret darunter. */
    --cl-nav-color:         var(--bs-body-color);   /* auch Text der Einträge im Hauptmenü-Dropdown (IW 26.09.2026) */
    --cl-nav-caret-color:   var(--bs-body-color);   /* folgt Light/Dark; je Website überschreibbar */
    --cl-nav-caret-glyph:   "\f107";   /* fa-angle-down (einzelner Chevron); Bellendorf: "\f103" fa-angles-down (doppel) */
    --cl-nav-font-weight: 700;    /* Hauptnav-Links: Standard normal (Bellendorf z.B. 700) */
    --cl-nav-transform:      none;   /* Hauptnav-Links: text-transform (Bellendorf z.B. uppercase) */
    /* Hauptmenü im Stil „Animiert" (IW 26.09.2026): EIN Flächen- und EIN Rahmenton für Hover-Fläche der Punkte,
       offenen Punkt, die gebogene Spitze darunter und die Hover-Fläche der Dropdown-Einträge. */
    --cl-main-nav-hover-bg:     var(--bs-secondary-bg);
    --cl-main-nav-hover-border: transparent;   /* 1px-Rahmen der Hover-Flächen (Innenkante, kein Layout-Versatz) */
    /* Aktiv = Menüpunkt mit OFFENEM Dropdown (IW 26.09.2026): eigene Fläche (+ gebogene Spitze) und eigener Rahmen.
       Standard EIGENSTÄNDIG = Stand vor den Tokens (IW: nicht an die Hover-Werte gekoppelt). Die Schrift darauf
       regelt die Kontrast-Automatik (Nav-Block). */
    --cl-main-nav-active-bg:     var(--bs-secondary-bg);
    --cl-main-nav-active-border: transparent;

    /* ── Layout-Komponenten-Tokens (je Website justierbar) ─────────────────────────── */
    --cl-logo-height:    5.5rem;   /* max-height des Hauptheader-Logos (Breite fluid) */
    --cl-logo-max-width: 250px;    /* Breiten-Kappung des Hauptheader-Logos (breite Wortmarken) */
    --cl-brand-logo-height: 2.5rem;   /* max-height der Markenlogos in der Marken-Leiste */
    --cl-brand-logo-width: 200px;     /* max-width der Markenlogos in der Marken-Leiste (IW 25.09.2026) */
    --cl-nav-logo-height:   1.5rem;   /* Logo-Feld-Höhe der Markenlogos im Hauptnav-Dropdown (Markenliste „Logos anzeigen") */
    --cl-karte-marker-farbe: #ea4335; /* Standort-Marker auf den Leaflet-Karten (Default Google-Rot; je Website overridebar) */
    /* Höchstbreite des Rasters einer STAPEL-Slider-Folie (ab lg). Größer als der normale
       Container: Text und Bild wachsen zu den Seiten heraus, wie im Altsystem, wo die Slide-Zeile
       als container-fluid bis zum Fensterrand lief. 100% = voller Alt-Effekt, 1320px = wie der
       normale Container (IW 04.09.2026). */
    --cl-slide-stapel-breite: 1600px;
    /* Format einer Stapel-Folie (ab lg). 32/9 ergibt bei voller Rasterbreite die 450px Höhe des
       Altsystems; kleinere zweite Zahl = flacher (IW 04.09.2026). */
    --cl-slide-stapel-format: 32 / 9;
    /* Zierlinie unter dem Hauptheader — als box-shadow (HÖHENNEUTRAL: zählt nicht zur
       Header-Höhe, anders als border-bottom). Default 0 = aus; je Website einschaltbar. */
    --cl-header-line:       0px;
    --cl-header-line-color: var(--cl-primary);
    /* Topbar-Trennlinie unten (voller border-Shorthand; je Website überschreibbar, 'none' = aus). */
    --cl-topbar-border-bottom:       1px solid color-mix(in srgb, var(--bs-border-color) 50%, transparent);
    /* Dropdown-Menüs (alle): Rand + Schatten als Token (voller Shorthand; je Website überschreibbar).
       Die FARBE separat als eigenes Token — Trennlinien IM Menü (hr-Divider, optgroup-Unterkanten
       des customSelect) nutzen exakt dieselbe Farbe wie der Menü-Rahmen. */
    --cl-dropdown-border-farbe: color-mix(in srgb, var(--bs-border-color) 50%, transparent);
    --cl-dropdown-border:    1px solid var(--cl-dropdown-border-farbe);
    --cl-dropdown-shadow:    none;
    /* Schatten unter dem sticky-Kopf (Hauptheader alle Breakpoints, Sticky-Band ≥lg); 'none' = aus. */
    --cl-chrome-shadow:      0 6px 6px -6px rgba(0, 0, 0, .1);
    --cl-footer-bg:          var(--cl-dark);   /* Footer-Hintergrund (Default dunkelgrau; je Website z.B. #000) */
    /* Zierlinie ÜBER dem Footer — Gegenstück zur Header-Zierlinie (IW 07.08.2026):
       Dicke 0px = aus; Farbe getrennt einstellbar (Default folgt Primär). */
    --cl-footer-line:        0px;
    --cl-footer-line-color:  var(--cl-primary);

    /* ── Bootstrap-Verdrahtung (Mechanik, keine Optik) ─────────────────────────────── */
    --bs-font-sans-serif: var(--cl-font);   /* --bs-body-font-family folgt in BS automatisch */
    --bs-body-font-weight: var(--cl-font-weight);   /* Basis-Gewicht 300 (s. --cl-font-weight) */
    --bs-body-color: var(--cl-text);
    --bs-body-color-rgb: var(--cl-text-rgb);
    --bs-emphasis-color: color-mix(in srgb, var(--cl-text) 40%, #000);
    --bs-secondary-color: color-mix(in srgb, var(--cl-text) 75%, transparent);
    --bs-tertiary-color: color-mix(in srgb, var(--cl-text) 50%, transparent);
    /* Content-Links (reine <a>): Fallback = Textfarbe statt BS-Blau; die BS-Reboot-Unterstreichung
       bleibt als Affordanz. Elemente mit Klasse (.btn/.nav-link) färben sich selbst → unberührt.
       BS-Reboot färbt <a> über die -rgb-Triple, daher beide setzen (hover = gleich). */
    --bs-link-color:            var(--cl-text);
    --bs-link-color-rgb:        var(--cl-text-rgb);
    --bs-link-hover-color:      var(--cl-text);
    --bs-link-hover-color-rgb:  var(--cl-text-rgb);
    --bs-border-radius: var(--cl-radius);
    --bs-border-radius-sm:  calc(var(--cl-radius) * 0.667);
    --bs-border-radius-lg:  calc(var(--cl-radius) * 1.333);
    --bs-border-radius-xl:  calc(var(--cl-radius) * 2.667);
    --bs-border-radius-xxl: calc(var(--cl-radius) * 5.333);
    --bs-border-radius-pill: var(--cl-radius-pill);
    /* Farb-Rollen-Verdrahtung (--bs-primary usw.): komplett im Artefakt bootstrap-themecolors.css. */
}

/* Sprungmarken (IW/ai 22.10.2026): `href="#…"` springt nativ und weich (Bootstrap: scroll-behavior smooth, außer bei
   „Bewegung reduzieren"). Abstand oben = alles, was klebt (theme.js → --cl-anker-offset: Header, Marken-Band/Modell-Leiste,
   Standort-Subnav) + 1rem Luft. EINE Stelle für alle Anker — keine scroll-margin-top-Schätzwerte an einzelnen Zielen
   (die addierten sich zu diesem Wert). */
html { scroll-padding-top: calc(var(--cl-anker-offset, 0px) + 1rem); }

/* Responsive Token-Overrides (Breakpoint-abhängige Defaults; ein Website-Override desselben Tokens
   hebelt sie aus → dann beide Breakpoints setzen). */
@media (max-width: 991.98px) {
    :root {
        --cl-logo-height: 3.75rem;      /* unter lg kompakteres Hauptheader-Logo */
        --cl-logo-max-width: 50vw;      /* unter lg: Breiten-Cap relativ statt fix 250px */
    }
}

/* Dark-Mode-Grundverdrahtung (technisch ab Tag 1; Aktivierung je Website = spätere Option).
   Farb-Rollen-Zweige liefert das Artefakt; hier nur Text/Flächen auf Basis der Tokens. */
[data-bs-theme=dark] {
    --bs-body-color: var(--cl-text-light);
    --bs-body-bg: var(--cl-dark);
    --bs-body-bg-rgb: var(--cl-dark-rgb);
    --bs-emphasis-color: color-mix(in srgb, var(--cl-text-light) 40%, #fff);
    --bs-secondary-color: color-mix(in srgb, var(--cl-text-light) 75%, transparent);
    --bs-tertiary-color: color-mix(in srgb, var(--cl-text-light) 50%, transparent);
}

body.cl-web {
    display: flex;
    flex-direction: column;
    min-height: 100vh;   /* Footer bündig unten, auch bei wenig Inhalt (mt-auto am Footer) */
    /* Kantenglättung wie im Altsystem (IW 08.08.2026, global.css am body): Der Browser-Standard auf
       macOS ist Subpixel-Glättung, die Buchstaben etwas dicker und satter zeichnet. `antialiased`
       macht sie feiner — daran lag der Eindruck, unser Text sei kräftiger als auf der Live-Seite,
       obwohl beide dieselbe Schriftdatei im selben Gewicht nutzen. Wirkt nur auf macOS/WebKit
       (und Firefox/macOS über die -moz-Variante); unter Windows folgenlos. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Interaktions-Rundung (IW 07.08.2026): --cl-radius-btn gilt für ALLE Interaktions-Elemente —
   Buttons, Inputs, Textareas, Selects (inkl. customSelect-Trigger, der button.form-select trägt).
   Erfahrungswert: Wer runde Buttons will, will Eingabefelder in derselben Rundung — ein Regler
   statt Drift. Die Größenvarianten (form-*-sm/lg) verlieren dabei bewusst ihre eigene
   BS-Radius-Stufe (ein Regler heißt EIN Radius). Cards/Badges etc. bleiben bei der Grundrundung. */
.btn { --bs-btn-border-radius: var(--cl-radius-btn); }
.form-control, .form-select { border-radius: var(--cl-radius-btn); }
/* Aufgeklapptes customSelect-Menü folgt mit — GEDECKELT via min(): beim Pill-Charakter (50rem)
   wäre ein kapselrundes Menü absurd, 1rem ist dort die passende „sehr runde" Entsprechung. */
.custom-select-wrapper .dropdown-menu { border-radius: min(var(--cl-radius-btn), 1rem); }

/* Icon-Buttons (.btn.btn-icon — Name wie im CMS/Tabler): „cleaner" Button nur ums Icon.
   Kein Padding/Rahmen, kein Focus-Ring/Active-Schatten — das Icon füllt den Button vollständig;
   die Größe kommt vom Icon selbst (fa-lg, fa-2x, …). Alles über Bootstraps Button-Tokens,
   damit Varianten (btn-light etc.) kombinierbar bleiben. */
.btn-icon {
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --bs-btn-border-width: 0;
    --bs-btn-line-height: 1;
    --bs-btn-focus-box-shadow: none;
    --bs-btn-active-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Fett absolut statt Bootstraps relativem `bolder` (das ergäbe bei Body-Gewicht 300 nur ~400). */
/* <b>/<strong>: bewusst OHNE eigene Regel (IW 08.08.2026) — es gilt Bootstraps `bolder`.
   Wir hatten hier ein absolutes 700 gesetzt, weil `bolder` relativ rechnet (von 300 nur auf 400).
   Zurueck zum Standard: eine Regel weniger, die vom Framework abweicht.
   ⚠️ Folge: Wer den Fliesstext auf 300 stellt, bekommt kaum sichtbare Fettung — dann dort 400
   belassen oder die Rolle wieder einfuehren. */
/* Bootstraps feste Gewichte an die Tokens hängen (s.o.). theme.css lädt NACH bootstrap.min.css,
   gleiche Spezifität → diese Regeln gewinnen. Die `.h1`–`.h6`-Klassen zählen mit: Bootstrap gibt
   ihnen dieselbe Optik wie den Elementen. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { font-weight: var(--cl-font-weight-heading); }
.lead,
.display-1, .display-2, .display-3,
.display-4, .display-5, .display-6 { font-weight: var(--cl-font-weight-lead); }
/* SONDERFALL Ueberschrift MIT Display-Klasse (IW 08.08.2026): `<h1 class="display-3">` ist der
   uebliche Weg zu einer besonders grossen Ueberschrift — die Groesse soll von `.display-*` kommen,
   die FETTUNG aber von der Ueberschriften-Rolle. Ohne diese Regel gewinnt `.display-*`: Beide
   Selektoren wiegen eine Klasse, und die spaetere Regel sticht.
   `:is()` uebernimmt die Spezifitaet seines staerksten Arguments — zwei verkettete `:is()` mit je
   einer Klasse ergeben also zwei Klassen und schlagen `.display-3` sauber, ohne !important und ohne
   72 einzeln ausgeschriebene Kombinationen. Auf einem NICHT-Heading (z.B. <div class="display-3">)
   greift sie nicht: Dort bleibt es beim Display-Gewicht. */
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):is(.display-1, .display-2, .display-3, .display-4, .display-5, .display-6) {
    font-weight: var(--cl-font-weight-heading);
}

/* Formularfelder: Bootstrap schreibt dort ein festes font-weight:400 — deshalb eine eigene Regel. */
.form-control, .form-select, .input-group-text { font-weight: var(--cl-font-weight-form); }
/* Buttons: Bootstrap hat dafuer bereits eine eigene Variable — die fuettern wir, statt font-weight
   zu ueberschreiben. So bleiben Button-Varianten und -Groessen unangetastet. */
.btn { --bs-btn-font-weight: var(--cl-font-weight-btn); }

/* Zweite Fettungsstufe für Redaktions-Content (IW 06.08.2026): Der Extrafett-Knopf des
   Richtext-Editors setzt `<span class="cl-fw-black">`. Bewusst ABSOLUT 900 statt Bootstraps
   relativem `fw-bolder` — relativ hängt das Ergebnis vom Elterngewicht ab und fiele in normalem
   Fließtext (400) nur auf 700, also aufs gleiche wie fett. Voraussetzung ist eine Schrift mit
   Black-Schnitt bzw. eine Variable Font; sonst rendert der Browser die nächstbeste Stufe.
   !important wie bei Bootstraps Utilities (IW/ai 26.09.2026) — sonst verliert die Klasse gegen
   ein `fw-bold` am selben oder einem Eltern-Element (`.fw-bold{font-weight:700!important}`). */
.cl-fw-black { font-weight: 900 !important; }

/* Icon-Sicherheitsnetz für Freitext-Content: harte Gewichtsklassen (fa-thin/-light/-regular)
   werden auf den WEBSITE-Stil normalisiert — Content bricht nie, wenn die Icon-Einstellung
   wechselt (nur der geladene Stil hat seine @font-face; diese Regel gibt allen dreien Familie +
   Website-Gewicht). fa-solid/fa-brands bleiben unberührt (immer geladen, immer echt).
   Der fa-duotone-Fallback bei AUSgeschaltetem Duotone kommt dynamisch aus der Injektion.
   ⚠️ :not(.fa-duotone) ist Pflicht: web_icon(duo:true) rendert `fa-duotone fa-light` — die harte
   font-family würde sonst (theme.css lädt NACH duotone-*.css) die Duotone-Familie überschreiben
   und das Icon fiele still auf mono zurück.
   ⚠️ :not(.cl-icon-fest): fester Design-Override web_icon(stil:'light') — soll IMMER light
   rendern (light.min.css lädt immer), nicht aufs Website-Gewicht normalisiert werden. */
.fa-thin:not(.fa-duotone):not(.cl-icon-fest),
.fa-light:not(.fa-duotone):not(.cl-icon-fest),
.fa-regular:not(.fa-duotone):not(.cl-icon-fest) {
    font-family: "Font Awesome 7 Pro";
    font-weight: var(--cl-icon-weight);
}

/* ── Rechts-Systemseiten (/impressum, /datenschutz — apps/website/seiten.php) ─────────────────
   Die <h2> kommen aus dem Baustein-CONTENT (DB) und können dort keine Klassen tragen — deshalb
   die ganze Typo zentral über die Hüllen-Klasse (EIN Ort, gilt auch für Kunden-Overrides):
   h1 = Bootstrap-.h3 + fw-bold · h2 = exakt der .h5-Default (Headings teilen Gewicht/line-height/
   Abstände; nur die font-size unterscheidet — .h5 ist fix 1.25rem, keine RFS-Stufe). */
.cl-system-page h1 { font-size: calc(1.3rem + .6vw); font-weight: 700; }
.cl-system-page h2 { font-size: 1.25rem; margin-top: 2rem; }
@media (min-width: 1200px) {
    .cl-system-page h1 { font-size: 1.75rem; }
}

/* ── Cookie-Banner (F6 C1, render/web/consent_banner.php + consent.js) ────────────────────────
   BLOCKIERENDES Modal: Vollflächen-Backdrop (fängt alle Klicks, kein Outside-Schließen), Box
   unten zentriert; Scroll-Lock via html.cl-consent-lock (setzt consent.js, solange das Modal
   steht). Auf /impressum, /datenschutz, /cookies erscheint es nicht (Layout-Ausnahme). */
.cl-consent-banner {
    position: fixed;
    inset: 0;
    z-index: 1080;
    padding: .75rem;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background: rgba(0, 0, 0, .5);
}
html.cl-consent-lock,
html.cl-consent-lock body { overflow: hidden; }
.cl-consent-box {
    width: 100%;
    max-width: 44rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--cl-radius);
    box-shadow: 0 .75rem 2.5rem rgba(0, 0, 0, .35);
    padding: 1rem 1.25rem;
    max-height: 85vh;
    overflow-y: auto;
    margin-bottom: .75rem;
}
.cl-consent-cat + .cl-consent-cat { margin-top: .5rem; }
.cl-consent-cat-info { margin-left: 2.5rem; }
/* „Zugehörige Cookies ein-/ausblenden" (/cookies): Linktext wechselt rein per CSS mit dem
   aria-expanded-Zustand des Bootstrap-Collapse-Toggles. */
[data-cl-ck-toggle] .cl-ck-aus { display: none; }
[data-cl-ck-toggle][aria-expanded="true"] .cl-ck-aus { display: inline; }
[data-cl-ck-toggle][aria-expanded="true"] .cl-ck-ein { display: none; }

/* ── Affordances eingeloggter Nutzer (feature-frontend-preview-affordances.md) ────
   Erscheinen NUR, wenn der Server sie rendert (carlution-Domain + gültiges Login-Flag-Cookie) —
   dieses CSS ist ohne das Markup wirkungslos. */
/* Sektionen: Anker für den absolut positionierten Editier-Stift (harmlos, immer gesetzt).
   TIEFSTER ABSTANDS-DEFAULT (IW 07.08.2026): Jede Sektion bringt von Haus aus die Stufe „Normal"
   als Innenabstand mit — eine Sektion ohne Abstands-Klasse ist damit nie nackt. Vorgeschichte:
   Beim Aufsplitten oben/unten (`py` → `pt`/`pb`) wurde `cl-section-py-2` an vier fest verdrahteten
   Stellen zur TOTEN Klasse; ohne Basiswert fiel die Polsterung dort ersatzlos auf 0.
   Überschreibbar ist der Basiswert von allen Seiten: `.cl-section-pt-*`/`-pb-*` stehen weiter unten
   (gleiche Spezifität, spätere Quellzeile gewinnt) — inklusive der echten 0-Stufe —, Bootstrap-
   Utilities (`py-5`) ohnehin per !important.
   NUR padding, kein margin: Die margin-Klassen lassen Stufe 0 bewusst weg (s.u.), ein Basis-Margin
   ließe sich also nie wieder auf „Ohne" stellen. */
.cl-content-section {
    position: relative;
    padding-block: var(--cl-section-space-2);
}
/* Bootstrap-Placeholder (u.a. Wireframe der Seiten ohne Sektionen) pauschal mit dem Theme-Radius. */
.placeholder { border-radius: var(--cl-radius); }

/* ── Accordion-Variante „FAQ-Stil" (IW 13.08.2026) ─────────────────────────────────────────────
   Opt-in-Klasse am `.accordion` — ohne sie bleibt alles Bootstrap-nativ. Statt des gedrehten
   Chevrons ein runder Knopf: Plus (zu) ⇄ Minus (offen), Kreis in der Akzentfarbe der WEBSITE.

   Der Kreis kommt aus `background-color` und nimmt damit die Token-Kette mit (jede Website ihre
   Farbe); das Zeichen liegt als weisses SVG darueber — weiss ist konstant und darf deshalb in der
   data-URI stehen. Offen wechselt nur die Kreisfarbe auf den Textton, damit der aktive Eintrag
   ruhiger wirkt als die geschlossenen.

   Die Bootstrap-Rotation entfaellt bewusst: Ein Plus, das sich zum Minus dreht, waere Bewegung
   ohne Aussage. */
.cl-faq-style {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M8 3.5v9M3.5 8h9'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M3.5 8h9'/%3e%3c/svg%3e");
    --bs-accordion-btn-icon-transform: none;
    --bs-accordion-btn-icon-width: 1.75rem;
}
.cl-faq-style .accordion-button::after {
    border-radius: 50%;
    background-color: var(--cl-accent);
    background-size: 0.8rem;          /* Zeichen kleiner als der Kreis */
    background-position: center;
    transition: background-color .15s ease-in-out;
}
.cl-faq-style .accordion-button:not(.collapsed)::after { background-color: var(--cl-text); }

/* Fragen-Groesse an der KLASSE, nicht per Utility im Markup (IW 13.08.2026): so haengt der FAQ-Look
   an einer Stelle und jedes kuenftige Accordion mit dieser Klasse sieht gleich aus.

   Warum ueberhaupt eine eigene Regel: `.accordion-button` setzt `font-size: 1rem`, und eine Klasse
   am umgebenden <h3> (`.h2`, `.h4`) kommt dagegen nicht an — gleiche Spezifitaet, aber die
   Komponente steht in bootstrap.min.css NACH der Typografie. Hier gewinnt der Selektor, weil er
   zwei Klassen tief ist.

   `inherit` statt eines festen Werts: Damit gilt die Groesse des umgebenden <h3> — also die
   normale h3-Stufe, und die skaliert ueber Bootstraps RFS mit der Fensterbreite. Wer eine andere
   Stufe will, haengt `.h2`/`.h4`/`.fs-*` an die Ueberschrift; das wirkt dann wie erwartet, weil der
   Button nichts Eigenes mehr setzt. Eine kopierte fs-Stufe waere hier die schlechtere Wahl gewesen:
   Sie friert eine Groesse ein und dupliziert einen Bootstrap-Wert, den niemand pflegt. */
.cl-faq-style .accordion-button { font-size: inherit; }

/* Offener Zustand: KEINE Flaeche, sondern Gewicht (IW 13.08.2026). Bootstrap legt dort eine
   `active-bg` unter die Zeile — ein Farbblock, der in einer randlosen Liste wie ein Fremdkoerper
   wirkt. Der offene Eintrag hebt sich stattdessen durch fw 700 ab; den Zustand sagt ohnehin schon
   der Minus-Knopf. Der `inset`-Schatten muss mit weg: Bootstrap zeichnet damit die Trennlinie
   unter dem offenen Button, die hier doppelt zur Item-Linie laege. */
.cl-faq-style {
    --bs-accordion-active-bg: transparent;
    /* Kein Ring beim KLICKEN: Bootstrap haengt den Fokusschatten an `:focus`, der auch per Maus
       feuert — nach jedem Auf-/Zuklappen stand ein Rahmen um den Eintrag. */
    --bs-accordion-btn-focus-box-shadow: none;
}
.cl-faq-style .accordion-button:not(.collapsed) {
    font-weight: 700;
    box-shadow: none;
}
/* Tastatur-Fokus bleibt sichtbar (a11y) — `:focus-visible` feuert bei Mausklicks nicht. */
.cl-faq-style .accordion-button:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(var(--cl-accent-rgb), .25);
}

/* ── Sektions-Überschrift (web_sektion_titel_html) ─────────────────────────────────────────────
   Gemeinsamer Auftritt für Überschriften ÜBER einer Sektion: zentriert, kräftig, im Textton der
   Website. Größe über clamp() statt fester Stufe — auf dem Handy soll die Zeile nicht umbrechen,
   auf dem Desktop darf sie Gewicht haben. Die Hausschrift kommt über die Token-Kette. */
.cl-sektion-titel {
    font-family: var(--cl-font);
    font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--cl-text);
}

/* ── customSelect (Engine shared/js/cl_customselect.js, Init web_select.js) ─────────────────────
   Web-Theming bewusst minimal: der Toggle trägt die form-select-Klassen des nativen Selects —
   Look/Caret/Radius kommen von Bootstrap + Token-Kette. Hier nur Struktur (CMS-Pendant: Tabler-
   Theming in assets/cms/css/cl_customselect.css). */
/* FOUC bis Init — aber NUR wenn Scripting aktiv ist: ohne JS muss das native Select sichtbar
   bleiben (Progressive Enhancement; anders als im CMS, das JS voraussetzt). Alte Browser ohne
   scripting-Media-Query zeigen schlimmstenfalls einen kurzen Roh-Select-Blitz. */
@media (scripting: enabled) {
    select[data-cl-select]:not(.custom-select-native) { display: none !important; }
}
.custom-select-native {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 100%;
}
.custom-select-wrapper { position: relative; }
/* d-flex der Engine überstimmt form-select-Blockfluss. CARET = Font-Awesome angle-down wie an den
   Schnellfilter-Chips (.cl-caret-icon, IW 07.09.2026: EIN Caret-Look auf der Website) statt Bootstraps
   SVG-Hintergrund; dreht bei offenem Menü (aria-expanded setzt Bootstrap). Der Engine-Button ist
   justify-content-between, das ::after steht also von selbst rechts. */
.custom-select-wrapper .dropdown > button.form-select {
    display: flex;
    align-items: center;
    background-image: none;
    /* form-select reserviert rechts 2.25rem für sein Hintergrund-Caret — ohne das rutscht unser ::after
       sonst nach innen. Rechts dasselbe Polster wie links, dann sitzt das Caret am Rand wie bei den Chips. */
    padding-right: .75rem;
}
.custom-select-wrapper .dropdown > button.form-select::after {
    content: "\f107";
    font-family: "Font Awesome 7 Pro";
    font-weight: var(--cl-icon-weight, 300);
    font-size: .875em;
    transition: transform .15s ease;
}
.custom-select-wrapper .dropdown > button.form-select[aria-expanded="true"]::after { transform: rotate(180deg); }
/* Platzhalter (keine Auswahl) gedämpft — „Marke wählen ..."-Muster der Alt-Schnellsuche. */
.custom-select-wrapper .dropdown > button.form-select:not(.has-selection) { color: var(--bs-secondary-color); }
/* FESTGESETZTES Select (IW 07.09.2026, Leasing-Konfigurator mit nur EINER Option): sieht EXAKT aus wie ein
   aktives Select (auch die Schrift), nur kein Klick (pe-none), hinten das Font-Awesome-Schloss (fa-lock, wie
   im CMS an gesperrten Feldern) statt des Carets und Cursor „nicht erlaubt" — bewusst nicht `disabled`
   (Bootstrap graut Fläche + Opazität). Die Klasse sitzt am nativen Select und wandert per web_select.js auf
   den Toggle. Der Cursor muss auf den Wrapper, weil der Toggle selbst pointer-events:none hat. */
.custom-select-wrapper .dropdown > button.form-select.cl-select-locked::after {
    content: "\f023";
    color: var(--bs-secondary-color);
    transform: none;
}
.custom-select-wrapper:has(.cl-select-locked) { cursor: not-allowed; }

/* Angebote-Button der Suchleiste: feste Mindestbreite (dreistellige Zahl), damit die Zähluhr-
   Animation die Buttonbreite nicht flackern lässt. Mobil irrelevant (dort w-100 über col-12). */
[data-cl-suchleiste-button] { min-width: 9rem; }

/* Quadrat-Utility (z.B. runde Icon-Buttons wie der Merk-Stern der Fahrzeugkarten): erzwingt 1:1 —
   wiederverwendbar (Markup-Konvention frontend.md §6). */
.cl-aspect-1 { aspect-ratio: 1 / 1; }

/* FZ-Karten-Fläche als Komponenten-Token mit Default-Kette (keine bg-Utilities im Markup):
   Karte = --cl-fz-karte-bg (Default light-subtle); dark-aware. Der Footer (Standort + CTA-Zeile)
   liegt seit IW 07.09.2026 OHNE eigene Fläche direkt auf der Karte (transparent, kein m-2/p-2 —
   das frühere Token --cl-fz-karte-footer-bg ist entfallen). */
.cl-fz-karte {
    background-color: var(--cl-fz-karte-bg, var(--bs-light-bg-subtle));
    /* Kartenpolster NUR für die Fahrzeugkarten (IW 07.09.2026): Bootstraps Card-Variablen lokal
       überschrieben — .card selbst bleibt global unangetastet. */
    --bs-card-spacer-y: .5rem;
    --bs-card-spacer-x: 1.25rem;
}
/* Karten in einer Sektion MIT Fläche (Marker .cl-section-bg aus sektion_bg_klasse(): Hell/Primär/
   Dunkel/Akzent/Eigenfarbe/Bild, IW 07.09.2026): Karte wechselt auf die Grundfläche der Seite
   (body-bg = #fff im Hellmodus), damit sie sich von der Tönung abhebt. Ohne Sektions-Hintergrund
   bleibt es bei der Default-Kette.
   Bewusst über die Komponenten-Tokens gelöst — eine Website-Anpassung der Tokens gewinnt weiterhin. */
.cl-section-bg .cl-fz-karte { --cl-fz-karte-bg: var(--bs-body-bg); }
.cl-fz-karte .card-footer { background-color: transparent; }
/* Preiskachel der Karte (IW 07.09.2026): Polster außerhalb des Bootstrap-Spacer-Rasters. Fläche
   spiegelbildlich zur Karte: auf der gedämpften Karte (ohne Sektions-Hintergrund) = Grundfläche/weiß,
   auf der weißen Karte in getönten Sektionen (.cl-section-bg) = gedämpft (tertiary). */
.cl-fz-karte .cl-fz-preis { padding: .7rem .9rem; background-color: var(--cl-fz-preis-bg, var(--bs-body-bg)); }
.cl-section-bg .cl-fz-karte { --cl-fz-preis-bg: var(--bs-tertiary-bg); }
/* AutoUncle-Preisampel in der Markenzeile der Kachel (IW/ai 21.10.2026): kleine Form (Bewertung über den Punkten) — die Hülle hat
   nur ihre Inhaltsbreite, AutoUncle zeigt die Plakette erst ab 140px. Der Schriftzug „autouncle" (samt Link) entfällt; die
   Großbuchstaben/Fettung der Markenzeile gelten nicht für die Ampel. Klassen aus AutoUncles Rendering. */
.cl-fz-au-ampel { text-transform: none; font-weight: 400; }
.cl-fz-au-ampel .au-logo__wrapper { display: none !important; }
/* Detailseite (Hauspreis-Box unten links): Hülle erst zeigen, wenn AutoUncle eine Ampel gerendert hat. Das Skript findet den
   Behälter auch versteckt. */
.cl-fzd-au-ampel:not(:has(.au-price-rating-widget__wrapper)) { display: none; }
/* Detailseite: Schriftzug „autouncle" klein unter der Ampel zeigen (IW 21.10.2026), aber ohne Link — wie disableSeoLink im Konto */
.cl-fzd-au-ampel .au-logo__wrapper { display: block !important; pointer-events: none; cursor: default; }
/* Konditionen-Popover der Karten (ab lg, fahrzeuge_karten.js): breiter als Bootstraps 276px, damit
   die dl-Zeilen „Label … Wert" nicht umbrechen; Body ohne Extra-Polster (der Inhalt bringt p-3 mit). */
.cl-fz-kond-popover { --bs-popover-max-width: 22rem; --bs-popover-body-padding-x: 0; --bs-popover-body-padding-y: 0; }
.cl-fz-kond-popover .popover-body > div { margin-top: 0 !important; }

/* Bestands-Listing (F7.3): Filterspalte links — bis XL anteilig (col-lg-3), ab XXL feste Breite
   (col-xxl-auto: Breite bestimmt der Inhalt → hier fixiert, damit das Listing die Restbreite füllt). */
@media (min-width: 1400px) {
    .cl-fz-filterspalte { width: 17rem; }
}
/* Hover-Affordance der FZ-Karten: neutrale Outline aus der Textfarbe (seit IW 06.09.2026 —
   Button-Rollen-Regel: die Marke erscheint im Listing nur an der Hauptaktion, nicht an jeder
   Karte, die man streift; bis dahin Primärfarbe). Outline statt border → kein Layout-Shift,
   folgt dem Karten-Radius. Dazu dezenter Zoom des Fahrzeugfotos (der Bild-Container hat
   overflow-hidden, der Zoom bleibt also in der Kachel). Nur auf echten Hover-Geräten — auf
   Touch würde der Effekt am ersten Tipper kleben. */
@media (hover: hover) {
    .cl-fz-karte { outline: 2px solid transparent; transition: outline-color .15s ease; }
    .cl-fz-karte:hover { outline-color: color-mix(in srgb, var(--bs-body-color) 30%, transparent); }
    .cl-fz-karte .ratio img { transition: transform .3s ease; }
    .cl-fz-karte:hover .ratio img { transform: scale(1.05); }
    /* „Frage stellen" wird beim Karten-Hover zum Primär-Button (Werte wie .btn-primary in
       bootstrap-themecolors.css, IW 26.09.2026). */
    .cl-fz-karte:hover .cl-fz-frage {
        --bs-btn-color: #fff;
        --bs-btn-bg: var(--cl-primary);
        --bs-btn-border-color: var(--cl-primary);
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: color-mix(in srgb, var(--cl-primary) 85%, #000);
        --bs-btn-hover-border-color: color-mix(in srgb, var(--cl-primary) 80%, #000);
    }
    /* WhatsApp-Knopf derselben Karte: auf der Primärfläche erbt das Icon das Weiß (siehe .cl-icon-whatsapp). */
    .cl-fz-karte:hover .cl-fz-frage .cl-icon-whatsapp { color: inherit; }
}
/* WhatsApp-Icon in Markengrün (pmo/ai 09.11.2026) — Kopfzeile (top_header.php), Fahrzeugkarte (fahrzeuge.php),
   Detail-Kaufbox + Sticky-Bar (fahrzeug_detail.php); Klasse setzt web_icon(klassen:). Standortboxen/Footer bleiben
   bewusst neutral. Auf gefüllter Button-Fläche (Outline-Hover/-Active, Karten-Hover oben) erbt das Icon die
   Buttonfarbe — Grün auf der Primärfarbe wäre kaum lesbar. */
.cl-icon-whatsapp,
.cl-top-header .nav-link > .cl-icon-whatsapp { color: #25d366; }   /* 2. Selektor schlägt die Topbar-Akzentfarbe (.cl-top-header .nav-link > i) */
.btn:hover .cl-icon-whatsapp,
.btn:active .cl-icon-whatsapp { color: inherit; }
/* „Frage stellen" auf der Fahrzeugkarte: dezent (Fläche wie bg-body-secondary) — als Button-Variablen statt
   Utility, damit der Karten-Hover oben die Variante wechseln kann (Utilities tragen !important). */
.cl-fz-frage {
    --bs-btn-bg: var(--bs-secondary-bg);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: color-mix(in srgb, var(--cl-primary) 80%, #000);
    --bs-btn-active-color: #fff;
}
/* Stage-Vorschau blockierter Fahrzeuge (Nicht-Live-Hosts; ADR-036-Ergänzung IW 29.08.2026 — dezenter
   als die Alt-Schraffur „would-be-blocked"): gestrichelter Rahmen in Gefahrfarbe (auch bei Hover),
   Foto entsättigt, Badge „Öffentlich blockiert" oben links (Markup fahrzeuge.php). Karte bleibt
   voll bedienbar — es ist eine Kontrollansicht, keine Sperre. */
.cl-fz-karte.cl-fz-blockiert,
.cl-fz-karte.cl-fz-blockiert:hover { outline: 2px dashed var(--bs-danger); outline-offset: -2px; }
.cl-fz-karte.cl-fz-blockiert .ratio img { filter: grayscale(.6) opacity(.8); }

/* Bildslider-Pfeile auf den FZ-Karten: deutlich kleiner als btn-sm (~0.7×) — echte Größe über
   Bootstraps Button-Tokens statt transform:scale (scale ließe die Layout-Box/Klickfläche
   unverändert und rendert unscharf). */
[data-cl-fz-nav] .btn {
    --bs-btn-padding-y: .25rem;
    --bs-btn-padding-x: .25rem;
    --bs-btn-font-size: .75rem;
    line-height: 1;
}

.custom-select-wrapper .dropdown-item { white-space: normal; cursor: pointer; }
.custom-select-wrapper .dropdown-item-row.cl-select-placeholder { display: none; }
/* Gruppen-Label (optgroup, z.B. Modelle nach Marke) gedämpft. */
.custom-select-wrapper .dropdown-item-group-label { color: var(--bs-secondary-color); }
/* Gruppen-Items untereinander: die Engine rendert die Gruppe als d-flex + flex-wrap — ohne
   Spaltenrichtung stünden kurze Items nebeneinander (flex-3-col bleibt bewusst mehrspaltig). */
.custom-select-wrapper .dropdown-item-group-inner:not(.flex-3-col) { flex-direction: column; }
/* Trennlinien im Menü in der Dropdown-Rahmenfarbe (hr-Divider + Gruppen-border-bottom, Token
   --cl-dropdown-border-farbe); nach der LETZTEN Gruppe keine Linie (!important schlägt die
   border-bottom-Utility der Engine). */
.custom-select-wrapper .dropdown-menu { --bs-dropdown-divider-bg: var(--cl-dropdown-border-farbe); }
.custom-select-wrapper .dropdown-item-group { border-bottom-color: var(--cl-dropdown-border-farbe) !important; }
.custom-select-wrapper .dropdown-item-group:last-child { border-bottom: 0 !important; }
.custom-select-wrapper .dropdown-menu-inner { scrollbar-width: thin; }
.custom-select-wrapper.isopen .dropdown .dropdown-menu { z-index: 1022 !important; }
/* .text-justify: BS5 hat die Utility entfernt — für den ContentBuilder-Textausrichter (justify) wieder
   bereitstellen (CB vergibt die Klasse; s. cms_contentbuilder.js cssClasses.textAlign). */
.text-justify { text-align: justify !important; }
/* Editier-Stift oben rechts in der Sektion → CMS-Deep-Link (neuer Tab). */
.cl-section-edit {
    position: absolute;
    top: .5rem;
    right: .75rem;
    z-index: 5;
    display: none;   /* nur Desktop-Werkzeug — mobil ausgeblendet (ab lg wieder inline-flex) */
    align-items: center;
    justify-content: center;
    border-radius: var(--bs-border-radius-pill);
    background-color: var(--cl-primary);
    color: #fff;
    font-size: .8rem;
    opacity: .55;
    transition: opacity .15s ease;
    padding: 0.4rem;
    aspect-ratio: 1;   /* Kreis wächst ums Icon (statt fixer 2rem) */
}
.cl-section-edit:hover { color: #fff; opacity: 1; }
/* Stifte sind standardmäßig AUS (Basis display:none oben). Sichtbar NUR, wenn der Stift-Umschalter
   sie einschaltet (Body-Klasse cl-edits-shown, theme.js/localStorage) UND am Desktop (ab lg). */
@media (min-width: 992px) { body.cl-edits-shown .cl-section-edit { display: inline-flex; } }
/* Sektions-Hover im Stift-Modus (IW 21.09.2026): solange die Stifte eingeschaltet sind, legt sich beim Überfahren
   eine ganz leichte Schicht in der Danger-Farbe über die GANZE Sektion (IW: danger statt primary) — man sieht, welche Sektion der Stift oben rechts
   meint. Als ::after ohne Pointer-Events, damit Inhalt und Stift bedienbar bleiben; nur Desktop (wie die Stifte). */
@media (min-width: 992px) {
    body.cl-edits-shown .cl-content-section:has(> .cl-section-edit, > .cl-section-tools) { position: relative; }
    body.cl-edits-shown .cl-content-section:has(> .cl-section-edit, > .cl-section-tools)::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(var(--bs-danger-rgb), 0);
        pointer-events: none;
        z-index: 4;   /* unter dem Stift (5), über dem Inhalt */
        transition: background-color .2s ease;
    }
    body.cl-edits-shown .cl-content-section:has(> .cl-section-edit, > .cl-section-tools):hover::after {
        background: rgba(var(--bs-danger-rgb), .07);
    }
}
/* Zwei-Stift-Gruppe leerer Sektionen (Lane A + Lane B): oben rechts, folgt demselben Umschalter.
   Die Einzel-Stifte darin sind static (per Flex nebeneinander) statt absolut. */
.cl-section-tools { position: absolute; top: .5rem; right: .75rem; z-index: 5; display: none; gap: .35rem; }
@media (min-width: 992px) { body.cl-edits-shown .cl-section-tools { display: inline-flex; } }
.cl-section-tools .cl-section-edit { position: static; display: inline-flex; }
/* Affordance-Werkzeuge (schwebend, oben links): runde Buttons in einer Reihe — Stift-Umschalter +
   Vorschau-Umschalter. z-index über sticky-Kopf (1020)/Dropdowns. */
.cl-affordance-tools {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1040;
    display: flex;
    gap: .5rem;
    transform: scale(0.7);
    transform-origin: 0 0;   /* verkleinert, oben-links verankert */
}
.cl-affordance-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem;
    aspect-ratio: 1;   /* Kreis wächst ums Icon (statt fixer Breite/Höhe) */
    border: 0;
    border-radius: 50%;
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .25);
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease;
}
.cl-affordance-btn:hover { color: #fff; transform: scale(1.08); }
/* Stift-Umschalter: primärfarben = an; is-off (aus) gedämpft. Nur Desktop sichtbar via BS-Utilities
   im Markup (d-none d-lg-inline-flex) — die Editier-Stifte selbst sind ≥lg-only. */
.cl-edits-toggle { background-color: var(--cl-primary); }
.cl-edits-toggle.is-off { background-color: #6c757d; }
/* Vorschau-Umschalter: Live = grün · Entwurf = orange (akzentfarben, unübersehbar). */
.cl-preview-toggle { background-color: var(--cl-success); }
.cl-preview-toggle.is-entwurf { background-color: var(--bs-orange, #fd7e14); }

/* Editier-Overlay (Variante B): CMS-Editor als Fullscreen-iframe über der Frontendseite (theme.js baut
   es zur Laufzeit). Keine eigene Kopfleiste — der ContentBuilder bringt seine Toolbar selbst mit.
   z-index über allem (Toggle 1040, sticky-Kopf 1020). Body-Scroll wird gesperrt. */
.cl-edit-overlay-open { overflow: hidden; }

/* (a) Blur-Backdrop: blurrt die echte Seite, während der Editor lädt. Liegt UNTER dem Overlay (1999<2000);
   solange das Overlay opacity:0 hat, scheint der Blur durch. Wird nach dem Einblenden entfernt. */
.cl-edit-blur {
    position: fixed;
    inset: 0;
    z-index: 1999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 24, 39, .35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.cl-edit-blur__spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: .25rem solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cl-edit-spin .8s linear infinite;
}
@keyframes cl-edit-spin { to { transform: rotate(360deg); } }

/* (b) Overlay: startet opacity:0 (durchsichtig → Blur sichtbar), wird bei „ready" auf 1 geblendet. */
.cl-edit-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: #101827;
    opacity: 0;
    transition: opacity .25s ease;
}
.cl-edit-overlay.is-ready { opacity: 1; }
.cl-edit-overlay__frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

/* ── Ab hier entsteht das neue Design. ─────────────────────────────────────────── */

/* Dropdown-Menüs (alle): randlos + dezenter Schatten. Ersetzt die früheren Inline-Utilities
   (border-0 shadow-sm) am Hauptnav-Dropdown → gilt jetzt einheitlich für jedes .dropdown-menu.
   Nach Bootstrap geladen → gleiche Spezifität, gewinnt gegen den BS-Default-Rand. */
.dropdown-menu {
    border: var(--cl-dropdown-border);
    box-shadow: var(--cl-dropdown-shadow);
}

/* Bewertungssterne (top_header u.a.): Komponenten-Token — Default Gold (warning-Rolle),
   je Website über theme-Einstellung 'stars' umfärbbar (Rolle wie 'accent' oder Hex),
   OHNE die warning-Semantik (Alerts etc.) anzufassen. */
.cl-stars {
    display: inline-flex;
    gap: .1rem;
    color: var(--cl-stars-color);
}

/* Sterne-WAHL des Bewertungsformulars (IW 27.08.2026): Radios 5→1 im DOM, row-reverse dreht die
   Anzeige — `:checked ~ label` (und Hover) trifft so alle Sterne LINKS der Wahl. Je Label liegen
   ZWEI Icons (leer/voll), getogglet per display — robust gegen die FA-7-Interna (font-weight-
   Umschalten greift dort nicht zuverlässig). Kein JS nötig; Farbe erbt .cl-stars. */
.cl-sterne-wahl {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: .25rem;
    font-size: 1.75rem;
}
/* Anzeigestil „breit" des Bewertungsformulars (IW 04.09.2026): Der Sterne-Block steht linksbuendig
   statt mittig — das Formular liest sich dann wie ein normales Inline-Formular. Die Ausrichtung
   sitzt hier und nicht als Utility im Markup, weil `.cl-sterne-wahl` selbst ein inline-flex mit
   `justify-content: center` ist; eine text-Utility am Elternteil erreicht das nicht. */
.cl-stars-start { justify-content: flex-start; }
.cl-sterne-wahl input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.cl-sterne-wahl label {
    cursor: pointer;
    line-height: 1;
    padding: .1rem;
}
.cl-sterne-wahl .cl-stern-voll { display: none; }
.cl-sterne-wahl input:checked ~ label .cl-stern-voll,
.cl-sterne-wahl label:hover .cl-stern-voll,
.cl-sterne-wahl label:hover ~ label .cl-stern-voll {
    display: inline-block;
}
.cl-sterne-wahl input:checked ~ label .cl-stern-leer,
.cl-sterne-wahl label:hover .cl-stern-leer,
.cl-sterne-wahl label:hover ~ label .cl-stern-leer {
    display: none;
}
/* Tastatur-Fokus sichtbar halten (Inputs sind unsichtbar): Ring am zugehörigen Label. */
.cl-sterne-wahl input:focus-visible + label {
    outline: 2px solid var(--cl-primary);
    outline-offset: 2px;
    border-radius: .25rem;
}

/* MASONRY-Raster der Inhalte-Listen (Look-Meta raster:masonry, z.B. News-Karten — IW 27.08.2026):
   CSS-columns statt Bootstrap-row — unterschiedlich hohe Karten stapeln versetzt, keine
   zeilengleiche Streckung. Spaltenzahl = die Breakpoints des Karten-Grids (1/2/3); Abstand
   1.5rem wie g-4. break-inside verhindert zerteilte Karten am Spaltenumbruch. */
.cl-masonry {
    columns: 1;
    column-gap: 1.5rem;
}
@media (min-width: 768px)  { .cl-masonry { columns: 2; } }
@media (min-width: 1200px) { .cl-masonry { columns: 3; } }
/* Kundenstimmen als LISTE (Anzeigestil 'liste', IW 04.09.2026): Zeilen untereinander, nur durch
   eine Trennlinie geschieden. Die letzte Zeile bekommt keine — sonst haengt ein Strich unter dem
   Block, der nichts mehr trennt. */
.cl-reviews-list > .cl-bewertung:last-child { border-bottom: 0 !important; }
/* Unter md stapeln die beiden Spalten der Zeile. Die Sterne stehen dann NEBEN dem Namen statt
   darunter — sonst waere der Kopf drei Zeilen hoch, bevor der Text beginnt. Umgesetzt ueber die
   Absender-Spalte als Flex-Zeile; ab md greift wieder der normale Fluss (Sterne unter dem Namen). */
@media (max-width: 767.98px) {
    .cl-review-row .row > div:first-child {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }
    .cl-review-row .cl-review-stars { flex: 0 0 auto; }
}

/* Modifier: bei ZWEI Spalten bleiben (IW 04.09.2026, Bewertungsliste) — dort tragen die Karten
   viel Fliesstext, in drei Spalten wird jede Zeile zu schmal. Zwei Klassen im Selektor, damit die
   Regel unabhaengig von der Reihenfolge gegen die Basis gewinnt. */
@media (min-width: 1200px) { .cl-masonry.cl-masonry--2col { columns: 2; } }
.cl-masonry-item {
    break-inside: avoid;
    margin-bottom: 1.5rem;
}

/* NACHLADEN der Inhalte-Listen (IW 27.08.2026, z.B. News): der SERVER setzt cl-mehr-verborgen
   ab Position N („Zeige je"-Option), der Button blendet schrittweise ein. Bewusst getrennt vom
   d-none des Marken-Filters — beide Mechanismen dürfen sich nicht überschreiben; ein
   <noscript>-Override im Sektions-Markup zeigt ohne JS alles. */
.cl-mehr-verborgen {
    display: none !important;
}

/* STANDORTKARTE (Sektion `standortkarte`, IW 28.08.2026 — Leaflet + basemap.de-Raster):
   Leaflet braucht eine feste Container-Höhe; responsiv gedeckelt statt fixer rem-Wert.
   isolation: der Blend der Farb-Überlagerung bleibt in der Karte (nie mit der Seite dahinter). */
.cl-standortkarte-canvas {
    height: clamp(18rem, 55vh, 30rem);
    isolation: isolate;
}

/* Sticky-Subnav der Standort-Detailseite (IW 28.08.2026): Aktiv-Markierung ALLEIN über die
   Fettung (aktiv semibold, inaktiv normal) — Unterstreichung, Akzentleiste, Größen-Skalierung
   und bg-accent-Block wurden alle probiert und verworfen. */
#cl-standort-subnav .nav-link { font-weight: 400; }
#cl-standort-subnav .nav-link.active { font-weight: 600; }

/* Öffnungszeiten-Kategorien (Standort-Detailseite, IW 28.08.2026): 4px-Akzentlinie VOR JEDER
   Kategorie. Auf dem INNEREN Wrapper statt der .col — die Spalten-Außenkante liegt wegen der
   Gutter 0,75rem VOR der Inhaltsflucht, die Linie stünde sonst nicht bündig über/unter dem
   übrigen Content (IW-Fund). */
.cl-standort-zeiten .cl-zeiten-kat {
    border-inline-start: 4px solid var(--bs-accent);
    padding-inline-start: 1rem;
}

/* --fit (Kontakt & Anfahrt der Standort-Detailseite, IW 28.08.2026): Karte folgt der Höhe der
   Inhalts-Spalte daneben (Bootstrap-Row streckt die Spalten gleich hoch) statt der festen
   clamp-Höhe; min-height trägt den gestapelten Mobil-Fall, in dem die Spalte sonst kollabierte. */
.cl-standortkarte-canvas--fit {
    height: 100%;
    min-height: 18rem;
}

/* Farb-ÜBERLAGERUNG (Stil „ueberlagerung"): die Tönung lebt als eigene Leaflet-Pane mit
   mix-blend-mode soft-light IM Karten-DOM (standortkarte.js — ein Geschwister-Div käme wegen
   map-pane z-index 400 + transform-Stacking nie zwischen Kacheln und Marker). */

/* Anker-Ziele der Standort-Detailseite (Sticky-Subnav-Sprünge): Header + Subnav deckt seit 22.10.2026 die globale
   Sprungmarken-Regel ab (html { scroll-padding-top }, --cl-anker-offset misst die Subnav mit) — hier keine eigene Regel mehr. */

/* Karten-MARKER als FA-Icon (IW 28.08.2026, statt der Leaflet-PNG-Pins; seit 29.08.2026
   fa-location-dot): Farbe = Token --cl-karte-marker-farbe (Default Google-Rot — die Primärfarbe
   ging auf den Basemap-Kacheln unter) + Drop-Shadow für Kontrast; Größe = die 36px-Box des divIcon. */
.cl-karte-marker i {
    font-size: 2.25rem;
    line-height: 1;
    color: var(--cl-karte-marker-farbe);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}

/* Beide Header sind sticky-top → deckender Hintergrund, sonst scheint der Body-Content durch.
   var(--bs-body-bg) = automatisch dark-mode-tauglich; bei Bedarf später je Website tokenisierbar. */
.cl-top-header,
.cl-main-header {
    background-color: var(--bs-body-bg);
}

/* Topbar-Trennlinie: 1px unten als dezenter Abschluss (Default). Voller Border-Shorthand als
   Token → je Website überschreibbar (Farbe/Stärke ändern oder 'none' = aus). */
.cl-top-header { border-bottom: var(--cl-topbar-border-bottom); }

/* Topbar-Dropdowns (Anrufen/Standorte) ÜBER dem Hauptheader: beide Header sind sticky-top
   (z-index 1020), der Hauptheader steht später im DOM und gewinnt bei Gleichstand — das Dropdown
   (gefangen im Stacking-Context der Topbar) verschwand dahinter. Anheben NUR solange ein Dropdown
   offen ist (:has) — dauerhaft höher ginge nicht: mobil schiebt sich der Hauptheader beim Scrollen
   bewusst ÜBER die Topbar (s. Sticky-Kommentar unten). */
.cl-top-header:has(.dropdown-menu.show) { z-index: 1021; }

/* Innenleben der Topbar-Dropdowns: die Angaben je Standort untereinander (Name / Straße /
   PLZ Ort / heutige Öffnungszeit), Standortname als fette Kopfzeile. Die Zeiten-Zeile bringt
   ihre Optik selbst mit (Uhr-Icon grün/rot, wie die Standortliste-Sektion). Etwas breiter als
   der BS-Default (10rem), damit Name und Zeiten nicht umbrechen. */
.cl-top-header .dropdown-menu { --bs-dropdown-min-width: 16rem; }
.cl-top-header .dropdown-menu .cl-store-name,
.cl-top-header .dropdown-menu .cl-store-street,
.cl-top-header .dropdown-menu .cl-store-city,
.cl-top-header .dropdown-menu .cl-store-phone,
.cl-top-header .dropdown-menu .cl-store-today { display: block; }
.cl-top-header .dropdown-menu .cl-store-name  { font-weight: 600; }

/* Desktop (≥lg): beide Header kleben GESTAPELT — Topbar bei top:0, Hauptheader direkt darunter
   (top = Topbar-Höhe, JS in layout.php → --cl-topheader-height). Beide bleiben dauerhaft stehen,
   der Body scrollt darunter durch. Mobil greift die Regel NICHT → dort behält der Hauptheader
   top:0 und rutscht beim Scrollen über den Topbar (gewünschtes Verhalten). */
@media (min-width: 992px) {
    /* Standard: Hauptheader klebt UNTER dem Topbar (nicht bei top:0, sonst überdeckt er ihn).
       top = Topbar-Höhe, JS → --cl-topheader-height (0, falls Topbar nicht sticky → dann top:0). */
    .cl-main-header.sticky-top { top: var(--cl-topheader-height, 0px); }
}

/* Chrome-Schatten des Marken-Bands — auf ALLEN Breakpoints (das Band verdeckt die Schattenkante des
   Hauptheaders und wirft den sichtbaren Schatten). NUR Layout „full" (das volle, gefüllte Band) — bei
   „boxed" (schwebende Pille) ist ein bandbreiter Schatten unerwünscht. Seit IW 31.08.2026 unabhängig
   von sticky: auch die MITLAUFENDE Leiste trägt die Schattenkante (sie schließt den Kopfbereich ab). */
.cl-brands-header--full { box-shadow: var(--cl-chrome-shadow); }

/* Dezenter Schatten unter dem sticky Hauptheader → trennt ihn vom durchscrollenden Inhalt. IMMER (alle
   Breakpoints, mit/ohne folgendes Marken-Band). ≥lg mit Full-Band ist er hinter dem lückenlos
   anschließenden Band verdeckt (harmlos) — dort übernimmt der Band-Schatten oben. Token → 'none' = aus. */
.cl-main-header.sticky-top { box-shadow: var(--cl-chrome-shadow); }

/* Toggler-Icon spiegelt den Offcanvas-Zustand: geschlossen = align-left, offen = X. Die Klasse
   is-open setzt JS (layout.php) auf show/hide.bs.offcanvas — greift für alle Schließwege (2. Klick,
   ESC). Beide Icons liegen im Button; hier wird nur ein-/ausgeblendet. */
.cl-nav-toggler .cl-toggler-closed { display: none; }
.cl-nav-toggler.is-open .cl-toggler-open { display: none; }
.cl-nav-toggler.is-open .cl-toggler-closed { display: inline-block; }

/* Umschalter Privat/Gewerbe (pmo/ai 02.11.2026, CLM-Trello #39) — Optik wie der Alt-Toggle (frontend, Template 31
   global.css .customer-toggle-*): senkrechte Pille, Kreis oben = Privatkunden, unten = Gewerbekunden (.is-business);
   das GEGENÜBER-Label in Sekundärfarbe (= wohin der Klick führt), das eigene in Textfarbe. Bewusst ohne eigene
   Tokens — Farbe folgt der Rolle secondary. Markup: render/web/sections/main_header/main_header.php. */
.cl-audience-toggle { font-size: 0.875em; font-weight: 700; line-height: 1.25; color: var(--bs-body-color); text-decoration: none; }
.cl-audience-switch {
    position: relative; flex-shrink: 0;
    height: 1.75rem; aspect-ratio: 1 / 2; border-radius: 1rem;
    outline: 1px solid var(--cl-secondary); outline-offset: 1px; background: var(--bs-body-bg);
}
.cl-audience-knob {
    position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1;
    border-radius: 50%; background-color: var(--cl-secondary); transition: transform 0.3s;
}
.cl-audience-toggle.is-business .cl-audience-knob { transform: translateY(calc(1.75rem / 2)); }
.cl-audience-labels > span { color: var(--cl-secondary); transition: color 0.3s; }
.cl-audience-labels > span.is-active { color: inherit; }
.cl-audience-toggle:hover .cl-audience-labels > span:not(.is-active),
.cl-audience-toggle:focus-visible .cl-audience-labels > span:not(.is-active) { text-decoration: underline; }

/* Topbar-Icons (direkte Icon-Kinder der nav-links) — NICHT die Sterne (im .cl-stars-Span). */
.cl-top-header .nav-link > i { color: var(--cl-topbar-icon-color); }

/* Topbar-Link-TEXTE in Body-Farbe (IW 26.08.2026, dark-aware wie Hauptnav/Caret): der BS-Default
   (--bs-link-color) kommt aus der Website-Linkfarbe und flippt im Dunkelmodus nicht mit. */
.cl-top-header .nav-link {
    --bs-nav-link-color: var(--bs-body-color);
    --bs-nav-link-hover-color: var(--bs-body-color);
}

.cl-top-header .nav-item:first-child .nav-link { padding-left: 0; }   /* erste Topbar-Icon-Leiste bündig links */
.cl-top-header .nav-item:last-child .nav-link { padding-right: 0; }   /* letzte Topbar-Icon-Leiste bündig rechts */

/* Hauptheader-Logo: Höhe steuert den Rhythmus (Token, je Website justierbar), Breite fluid;
   max-* = kein Hochskalieren kleiner Logos, Breiten-Kappung gegen zu breite Wortmarken. */
/* Leiste unter dem Header (Zierlinie — künftig ggf. Mini-Content/Werbung): echtes Element, zählt
   zur Header-Höhe (von der JS-Messung automatisch erfasst). --cl-header-line = MINDESThöhe
   (0px=aus); vorhandener Content darf die Leiste höher machen (daher min-height, nicht height). */
.cl-header-line { min-height: var(--cl-header-line); background-color: var(--cl-header-line-color); }

/* Dropdown-Indikator „caret unten" (nav_indikator=caret_unten): fa-caret-down als ::after,
   ABSOLUT mittig unter dem Wort (kein Fluss → drückt den Text nicht hoch), folgt dem
   Website-Icon-Gewicht; Hover: rutscht leicht nach unten. */
/* Hauptnav-Typografie (je Website übersteuerbar; Default = BS-normal). */
.cl-main-header .nav-link {
    --bs-nav-link-color: var(--cl-nav-color);        /* statt BS-Default var(--bs-link-color) */
    --bs-nav-link-hover-color: var(--cl-nav-color);  /* kein Farbwechsel beim Hover — gleich wie normal */
    --bs-navbar-active-color: var(--cl-nav-color);   /* aktiver Link / offenes Dropdown (.show) — sonst BS-Default (~Schwarz) */
    font-weight: var(--cl-nav-font-weight);
    text-transform: var(--cl-nav-transform);
}

/* Seitliche Luft an den Hauptnav-Links (IW 04.09.2026): 1.25rem statt der Bootstrap-0.5rem.
   Speist GENAU die Vendor-Regel `@media (min-width:992px){ .navbar-expand-lg .navbar-nav
   .nav-link { padding-right/left: var(--bs-navbar-nav-link-padding-x) } }` — die Variable füllt
   dort beide Seiten. Wirkt deshalb nur ab lg; im Offcanvas darunter setzt `.navbar-nav` sein
   eigenes `--bs-nav-link-padding-x: 0` und die Liste bleibt links bündig (so gewollt).
   Über die Variable statt Utility-Klassen im Markup: unsere Links tragen bewusst nur `nav-link`.

   ⚠️ Der Selektor MUSS die `.navbar` treffen, nicht den Header: Bootstrap definiert
   `--bs-navbar-nav-link-padding-x: 0.5rem` im `.navbar`-Block, also auf dem `<nav>`-Element
   selbst. `.cl-main-header` sitzt eine Ebene höher (`<header>`) — ein dort gesetzter Wert wird
   vererbt und auf der `.navbar` prompt wieder überschrieben. Erster Versuch lief genau in diese
   Falle (IW: „greift nicht, zeigt immer noch 0.5rem"). */
.cl-main-header.cl-nav-animated .navbar { --bs-navbar-nav-link-padding-x: 1.25rem; }
/* Optischer Randausgleich (IW 04.09.2026): Das seitliche Polster der Links gehört zur Hover-
   Fläche, nicht zum Text — der letzte Menüpunkt stand dadurch um genau dieses Polster INNERHALB
   der Container-Kante und wirkte nicht mehr bündig. Ein negativer Außenabstand in derselben Größe
   zieht die Leiste zurück auf die Kante: Der TEXT steht wieder bündig, die Fläche darf beim
   Überfahren über die Kante hinausreichen. Rechnet mit der Variable, ändert sich also mit ihr.
   Nur rechts — links sitzt das Logo, die Leiste ist ohnehin rechtsbündig. */
@media (min-width: 992px) {
    .cl-main-header.cl-nav-animated .navbar-nav { margin-right: calc(var(--bs-navbar-nav-link-padding-x) * -1); }
}
/* Vertikal 0.75rem — AUF DERSELBEN STUFE (ab lg), damit das mobile Menü unberührt bleibt.
   Anderer Selektor als oben, aus demselben Grund in der nächsten Etage: Den y-Wert führt
   Bootstrap nicht als `--bs-navbar-*`-Variable, sondern als `--bs-nav-link-padding-y`, gesetzt
   im `.navbar-nav`-Block (0.5rem). Auf der `.navbar` gesetzt würde er dort überschrieben. */
@media (min-width: 992px) {
    .cl-main-header.cl-nav-animated .navbar-nav { --bs-nav-link-padding-y: 0.75rem; }
    /* Hover-Fläche auf dem ganzen Menüpunkt (IW 04.09.2026): das `li` trägt sie, nicht der Link —
       so füllt sie das komplette Feld inklusive des Paddings von oben. Farbe = dieselbe Quelle
       wie die Utility `.bg-body-secondary`, also dark-aware (hell #e9ecef / dunkel #343a40).
       Ebenfalls erst ab lg: im Offcanvas gibt es keine Leiste, in der eine Fläche Sinn ergäbe. */
    /* Rundung DAUERHAFT am Punkt (IW 04.09.2026), nicht erst im Hover — sichtbar wird sie zwar
       nur mit Fläche, aber so gibt es keinen Formsprung beim Überfahren und spätere Zustände
       (aktiv, offenes Dropdown) erben sie automatisch. `rounded-3` entspricht
       --bs-border-radius-lg, also der Grundrundung der Website × 1,333. */
    /* `position: relative` ist der Bezugsrahmen der einfahrenden Fläche (::before, s.u.). */
    .cl-main-header.cl-nav-animated .navbar-nav .nav-item { border-radius: var(--bs-border-radius-lg); position: relative; }
    /* Die Fläche FÄHRT EIN, statt zu erscheinen (IW 04.09.2026). Eine Farbe kennt keine Richtung,
       deshalb trägt sie ein Pseudo-Element hinter dem Text.
       Sie fährt als BLOCK (translateX), nicht wachsend (scaleX): So federn BEIDE Kanten — beim
       Überschwingen steht die Fläche kurz ~10% ihrer Breite zu weit rechts, links blitzt eine
       Lücke auf, rechts ragt sie über den Punkt. Genau das ist das „als Fläche ankommen und
       einrasten", das eine reine Breiten-Animation nicht kann (dort steht die linke Kante fest).
       Die Anfahrt beginnt 1.5rem links und ist zunächst unsichtbar (opacity), damit die Fläche
       auf dem Weg nicht über den Nachbarpunkt läuft — nach 0.15s ist sie fast am Ziel.
       ⚠️ Damit läuft sie beim Verlassen denselben Weg ZURÜCK statt nach rechts hinaus: Ein
       Zustandspaar kennt nur eine Richtung, und `transform` ist hier von beiden Bewegungen
       belegt. Der Wechsel des `transform-origin` (bisheriger Trick) funktioniert nur beim
       Skalieren. `overflow:hidden` als Alternative scheidet aus — es würde den Caret abschneiden,
       der als ::after unterhalb des Punktes hängt.
       Fläche bleibt, solange das zugehörige Dropdown offen ist: `:has()` prüft den eigenen
       Toggle (direktes Kind), nicht irgendein offenes Menü der Leiste; Punkte ohne Untermenü
       haben kein `aria-expanded` und bleiben beim reinen Hover-Verhalten. */
    .cl-main-header.cl-nav-animated .navbar-nav .nav-item::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;   /* folgt der Rundung des Punktes (eine Quelle) */
        background-color: var(--cl-main-nav-hover-bg);
        box-shadow: inset 0 0 0 1px var(--cl-main-nav-hover-border);   /* Rahmen fährt mit der Fläche */
        /* Startseite der Fahrt: theme.js setzt --cl-nav-flug je nach Zeiger-Richtung auf -1.5rem
           (von/nach links) oder 1.5rem (von/nach rechts). Nur die WAAGERECHTE Achse — die Punkte
           liegen nebeneinander. Ohne JS bleibt es beim Default. */
        transform: translateX(var(--cl-nav-flug, -1.5rem));
        opacity: 0;
        transition: transform .2s ease-out, opacity .15s ease-out;
        pointer-events: none;
    }
    .cl-main-header.cl-nav-animated .navbar-nav .nav-item:hover::before,
    .cl-main-header.cl-nav-animated .navbar-nav .nav-item:has(> [aria-expanded="true"])::before {
        transform: translateX(0);
        opacity: 1;
        transition: transform .38s cubic-bezier(.34, 1.56, .64, 1), opacity .15s ease-out;
    }
    /* Text über die Fläche heben — ohne das läge das Pseudo-Element darüber (positioniert schlägt
       den normalen Fluss). Der Caret hängt als ::after am Link und kommt damit mit nach vorn. */
    .cl-main-header.cl-nav-animated .navbar-nav .nav-link { position: relative; z-index: 1; }
    /* Schrift auf der Fläche (IW 26.09.2026). Kontrast-Automatik: der Theme-Mapper setzt --cl-main-nav-hover-auto /
       --cl-main-nav-active-auto NUR, wenn die jeweilige Fläche dunkel ist (dann #fff; theme_css.php) — abgeleitet,
       deshalb ohne :root-Default und ohne Registry-Eintrag. Ohne Wert greifen Textfarbe bzw. Chevron-Farbe.
       Hover zuerst, AKTIV (offenes Dropdown) danach — gleiche Spezifität, die spätere Regel gewinnt. */
    .cl-main-header.cl-nav-animated .navbar-nav .nav-item:hover > .cl-nav-caret::after {
        color: var(--cl-main-nav-hover-auto, var(--cl-nav-caret-color));
    }
    .cl-main-header.cl-nav-animated .navbar-nav .nav-item:hover > .nav-link {
        color: var(--cl-main-nav-hover-auto, var(--cl-nav-color));
    }
    .cl-main-header.cl-nav-animated .navbar-nav .nav-item:has(> [aria-expanded="true"]) > .cl-nav-caret::after {
        color: var(--cl-main-nav-active-auto, var(--cl-nav-caret-color));
    }
    .cl-main-header.cl-nav-animated .navbar-nav .nav-item:has(> [aria-expanded="true"]) > .nav-link {
        color: var(--cl-main-nav-active-auto, var(--cl-nav-color));
    }
    /* Fläche + Rahmen des offenen Punkts: eigene Aktiv-Werte. */
    .cl-main-header.cl-nav-animated .navbar-nav .nav-item:has(> [aria-expanded="true"])::before {
        background-color: var(--cl-main-nav-active-bg);
        box-shadow: inset 0 0 0 1px var(--cl-main-nav-active-border);
    }
    /* Bewegungsreduktion: Fläche ohne Fahrt, nur da oder nicht da. */
    @media (prefers-reduced-motion: reduce) {
        .cl-main-header.cl-nav-animated .navbar-nav .nav-item::before,
        .cl-main-header.cl-nav-animated .navbar-nav .nav-item:hover::before,
        .cl-main-header.cl-nav-animated .navbar-nav .nav-item:has(> [aria-expanded="true"])::before { transition: none; }
    }
}

/* Hauptnav-Dropdowns zentriert unter dem Wort — PER CSS, NICHT über .dropdown-center/Popper:
   Bootstrap schaltet Popper in einer .navbar bewusst ab (_detectNavbar → applyStyles off, Menü
   bekommt data-bs-popper="static"), daher sind dort dropdown-center UND data-bs-offset wirkungslos.
   In der Navbar ist das Menü CSS-positioniert (ab lg position:absolute) → wir zentrieren selbst
   (kein Popper-transform, das mit unserem kollidieren könnte). Vertikal: Menü öffnet 1rem UNTER der
   Header-Unterkante — --cl-nav-dropdown-gap (JS, layout.php) = Distanz Trigger-Reihe→Header-
   Unterkante, das feste 1rem kommt hier dazu. */
@media (min-width: 992px) {
    /* GEMEINSAM für beide Nav-Stile: Zentrierung unter dem Wort + der ursprüngliche Abstand
       zur Header-Unterkante (--cl-nav-dropdown-gap aus der JS-Messung plus feste 1rem). Der
       animierte Stil überschreibt den Abstand weiter unten. */
    .cl-main-header .navbar-nav .dropdown-menu {
        left: 50%;
        margin-top: calc(var(--cl-nav-dropdown-gap, 0px) + 1rem);
        transform: translateX(-50%);
    }

    /* ── Nur Stil „Animiert", nur die POSITION (IW 07.09.2026): Polster, Rand, Schatten und Eintragshöhe
       hängen generisch an `.cl-dd-animated` (Block „Einfahrende Hover-Fläche" weiter unten) — hier bleibt
       allein der Abstand zum Menüpunkt. DICHT am Menüpunkt: Bootstrap setzt das Menü auf `top:100%` des
       Trigger-`li`, es hinge also von sich aus direkt darunter. Der klassische Stil schiebt es mit der
       JS-Messung (gemeinsame Regel oben) bis unter die HEADER-Unterkante; hier bleibt nur ein kleiner
       fester Abstand, das Menü öffnet unmittelbar unter der Hover-Fläche des Punktes. */
    .cl-main-header.cl-nav-animated .navbar-nav .dropdown-menu {
        margin-top: 0.775rem;   /* 0.5 → 0.775rem (IW 21.09.2026): Platz für die geschwungene Spitze des Punkts */
        /* Hauptnav-Einträge höher als die customSelect-Listen (0.5rem generisch): 0.75rem. */
        --bs-dropdown-item-padding-y: 0.75rem;
    }
    /* ── SPITZE zum offenen Dropdown (IW 21.09.2026, Prinzip wie die Spitze der CMS-Leisten): ein ::before am
       Toggle (das ::after gehört dem Caret-Anzeiger „caret_unten" — beide bestehen nebeneinander). Form
       (IW-Skizze): kein Dreieck, sondern ein WEICHER SCHWUNG in der Farbe der Hover-Fläche — zwei Kurven, die
       aus der Unterkante der Fläche kommen und in eine gerundete Spitze laufen (passend zur Rundung des
       Punkts). Gezeichnet als SVG-Pfad in einer mask-image, die Fläche selbst ist background-color (so bleibt
       die Farbe ein Token; ein SVG-background könnte keine CSS-Variable füllen). Die Maske ist 40×14 Einheiten:
       Oberkante volle Breite (überlappt die Fläche um 0.125rem → keine Naht), Tiefpunkt mittig mit
       waagerechter Tangente = runde Spitze; Kontrollpunkte nah am Tiefpunkt → seitlich stark eingedrückt; der zweite Kontrollpunkt liegt 3 Einheiten VOR dem Tiefpunkt → breit gerundete Spitze (IW-Feinschliff); sie endet auf der Menü-Oberkante (Spalt 0.775rem).
       Sie WANDERT nicht — jeder Punkt hat seine eigene; sie fährt beim Öffnen von oben ein und ist sonst
       unsichtbar. Nur im animierten Stil (der klassische schiebt das Menü per JS-Messung unter die
       Header-Unterkante — feste Geometrie stimmt dort nicht) und nur ab lg (kein Offcanvas). */
    .cl-main-header.cl-nav-animated .navbar-nav .nav-item.dropdown > .nav-link::before {
        content: "";
        position: absolute;
        left: 50%;
        top: calc(100% - 0.125rem);
        width: 2.925rem;   /* Endmaß IW 21.09.2026: 3.25rem × 0.9 — Form (Pfad) bleibt, nur skaliert */
        height: 0.9rem;    /* 1rem × 0.9 = Spalt 0.775rem + 0.125rem Überlappung in die Fläche */
        /* Gehört zum OFFENEN Punkt → Aktiv-Fläche, GESTAPELT über der Header-Fläche (IW 26.09.2026): Bei transparenter
           Aktiv-Fläche bleibt so eine Spitze in Header-Farbe stehen, die die Unterkante des Aktiv-Rahmens unterbricht —
           ihr Umriss kommt vom li::after unten (Sprechblasen-Form). Bei deckender Fläche sieht man nur die Aktiv-Fläche. */
        background: linear-gradient(var(--cl-main-nav-active-bg), var(--cl-main-nav-active-bg)), var(--bs-body-bg);
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46.8 14.4' preserveAspectRatio='none'%3E%3Cpath d='M0 0L0 1.5C20.475 1.5 19.89 12.86 23.4 12.86S26.325 1.5 46.8 1.5L46.8 0Z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46.8 14.4' preserveAspectRatio='none'%3E%3Cpath d='M0 0L0 1.5C20.475 1.5 19.89 12.86 23.4 12.86S26.325 1.5 46.8 1.5L46.8 0Z'/%3E%3C/svg%3E");
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        /* Sitzt fest AUF der Unterkante und WÄCHST nach unten (IW 26.09.2026) — statt von oben einzufliegen,
           was kurz über der Fläche sichtbar war. */
        /* „Wächst" nach unten durch AUFDECKEN statt Stauchen (IW-Feinschliff 26.09.2026): Die Form bleibt immer
           unverzerrt, clip-path gibt sie von oben nach unten frei — die Linienenden liegen so vom ersten Moment an
           exakt auf der Rahmenlinie (scaleY drückte sie während der Fahrt nach oben und machte sie dünner). */
        transform: translateX(-50%);
        clip-path: inset(0 0 100% 0);
        opacity: 0;
        /* Schließen: erst ganz zurückziehen, DANN ausblenden (opacity springt nach .25s) — sonst verschwand die
           Fläche vor dem Umriss und die Rahmenlinie des Punkts tauchte zu früh unter der Spitze auf. */
        transition: clip-path .25s ease-out, opacity 0s linear .25s;
        pointer-events: none;
        z-index: -1;   /* hinter den Text des Links (der Link ist der Stacking-Kontext), vor der Hover-Fläche des li */
    }
    .cl-main-header.cl-nav-animated .navbar-nav .nav-item.dropdown > .nav-link[aria-expanded="true"]::before {
        clip-path: inset(0 0 0 0);
        transition: clip-path .25s ease-out, opacity 0s;   /* Öffnen: sofort sichtbar, wird nach unten aufgedeckt */
        opacity: 1;
    }
    /* UMRISS der Spitze in der Aktiv-Rahmenfarbe (IW 26.09.2026): eigene Ebene am li (::before des li ist die
       Hover-Fläche, ::before des Links die Spitzen-Fläche, ::after des Links der Caret) — gleiche Geometrie wie die
       Spitze, Maske = nur die beiden Kurven als 1px-Linie (ohne Oberkante).
       Geometrie PIXELTREU (IW-Feinschliff 26.09.2026): viewBox 46.8x14.4 = Elementgröße in px (2.925rem x 0.9rem bei
       16px) → keine Verzerrung, Strich = echte 1px. Die Kurve startet bei y=1.5 = Mitte der 1px-Rahmenlinie des
       Punkts (Spitze überlappt die Fläche um 0.125rem = 2px, Rahmen liegt bei 1–2px). Die FLÄCHE der Spitze nutzt
       dieselbe Kurve und reicht oben bis y=0 — sie tilgt den Rahmen über die ganze Spitzenbreite gleichmäßig,
       der Umriss setzt nahtlos an (vorher liefen Fläche und Linie auseinander → keilförmige Artefakte). z-index 2: über dem Link (z 1) und damit über der Spitzen-Fläche. Standard-Rahmen = transparent
       → unsichtbar, sieht also ohne Aktiv-Rahmen aus wie bisher. */
    .cl-main-header.cl-nav-animated .navbar-nav .nav-item.dropdown::after {
        content: "";
        position: absolute;
        left: 50%;
        top: calc(100% - 0.125rem);
        width: 2.925rem;
        height: 0.9rem;
        background-color: var(--cl-main-nav-active-border);
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46.8 14.4' preserveAspectRatio='none'%3E%3Cpath d='M0 1.5C20.475 1.5 19.89 12.86 23.4 12.86S26.325 1.5 46.8 1.5' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46.8 14.4' preserveAspectRatio='none'%3E%3Cpath d='M0 1.5C20.475 1.5 19.89 12.86 23.4 12.86S26.325 1.5 46.8 1.5' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        /* Sitzt fest AUF der Unterkante und WÄCHST nach unten (IW 26.09.2026) — statt von oben einzufliegen,
           was kurz über der Fläche sichtbar war. */
        /* „Wächst" nach unten durch AUFDECKEN statt Stauchen (IW-Feinschliff 26.09.2026): Die Form bleibt immer
           unverzerrt, clip-path gibt sie von oben nach unten frei — die Linienenden liegen so vom ersten Moment an
           exakt auf der Rahmenlinie (scaleY drückte sie während der Fahrt nach oben und machte sie dünner). */
        transform: translateX(-50%);
        clip-path: inset(0 0 100% 0);
        opacity: 0;
        /* Schließen: erst ganz zurückziehen, DANN ausblenden (opacity springt nach .25s) — sonst verschwand die
           Fläche vor dem Umriss und die Rahmenlinie des Punkts tauchte zu früh unter der Spitze auf. */
        transition: clip-path .25s ease-out, opacity 0s linear .25s;
        pointer-events: none;
        z-index: 2;
    }
    .cl-main-header.cl-nav-animated .navbar-nav .nav-item.dropdown:has(> .nav-link[aria-expanded="true"])::after {
        clip-path: inset(0 0 0 0);
        transition: clip-path .25s ease-out, opacity 0s;   /* Öffnen: sofort sichtbar, wird nach unten aufgedeckt */
        opacity: 1;
    }
    @media (prefers-reduced-motion: reduce) {
        .cl-main-header.cl-nav-animated .navbar-nav .nav-item.dropdown > .nav-link::before,
        .cl-main-header.cl-nav-animated .navbar-nav .nav-item.dropdown::after { transition: none; }
    }
}
/* ── Einfahrende Hover-Fläche für Dropdown-EINTRÄGE — GENERISCH (IW 04.09.2026 für die Hauptnav,
   07.09.2026 verallgemeinert): Klasse `.cl-dd-animated` am `.dropdown-menu`. Trägt sie die Hauptnav
   (main_header.php, Stil „Animiert") und die customSelect-Menüs (web_select.js, nur bei animierter
   Nav) — ein Dropdown ist ein Dropdown. Die Richtung (von oben/unten) setzt theme.js delegiert über
   `--cl-dd-flug` an jedem Eintrag. Bootstraps Hover-Farbe ist abgeschaltet (sie würde die Fahrt
   überdecken); der AKTIVE Eintrag behält eine statische Fläche, dessen Textfarbe muss mit (Bootstrap
   setzt dort #fff für seinen Primary-Hintergrund). Die Regel sitzt am `.dropdown-item`, nicht am
   `li`/`.dropdown-item-row` — Bootstrap legt die Fläche auf den LINK. */
.dropdown-menu.cl-dd-animated {
    /* Innenpolster des Menüs (IW 04.09.2026): Bootstrap gibt 0.5rem vertikal und 0 horizontal, die
       Einträge liegen also an der Kante. 0.75rem ringsum setzt sie ins Feld — passend zur Rundung.
       Über die Variablen, weil `.dropdown-menu` sie selbst im eigenen Block definiert; unser
       Selektor ist spezifischer und gewinnt. */
    --bs-dropdown-padding-x: 0.75rem;
    --bs-dropdown-padding-y: 0.75rem;
    /* Randlos mit kleinem Schatten — die beiden Tokens stehen plattformweit auf Rand an und
       Schatten aus (`.dropdown-menu`-Regel weiter oben); im animierten Look umgedreht. */
    --cl-dropdown-border: 0;
    --cl-dropdown-shadow: var(--bs-box-shadow-sm);
    /* Höhe der Einträge: 0.5rem statt Bootstraps 0.25rem — mit eigener Fläche und Rundung
       braucht jeder Eintrag Körper, sonst kleben die Flächen aneinander. Die Hauptnav legt
       auf 0.75rem nach (Regel im Nav-Block, IW 07.09.2026). */
    --bs-dropdown-item-padding-y: 0.5rem;
    /* Kleiner fester Abstand zum Auslöser bei Popper-positionierten Menüs (customSelect, Chips):
       dasselbe 0.5rem, das die Hauptnav über margin-top bekommt (dort keine Popper-Position). */
    --bs-dropdown-spacer: 0.5rem;
    /* Hover-Farbe AUS: Die Fläche kommt als einfahrendes ::before, ein sofortiger Hintergrundwechsel
       würde sie überdecken. Der AKTIVE Eintrag behält seine Fläche — dessen TEXTFARBE muss mit. */
    --bs-dropdown-link-hover-bg: transparent;
    --bs-dropdown-link-active-bg: var(--bs-secondary-bg);
    --bs-dropdown-link-active-color: var(--bs-body-color);
}
/* customSelect-Menüs: die Engine gibt ihrem scrollenden Innenteil ein py-1 (Luft an der Scrollkante,
   cl_customselect.js). Im animierten Look trägt das Menü selbst 0.75rem — das py-1 käme obendrauf und
   die Listen wären höher gepolstert als die Hauptnav-Dropdowns. Hier neutralisiert (IW 07.09.2026);
   !important, weil py-1 eine Bootstrap-Utility mit !important ist. */
.cl-dd-animated .dropdown-menu-inner {
    padding-block: 0 !important;
    /* Einträge als Flex-Spalte mit Lücke (IW 07.09.2026): die abgerundeten Hover-Flächen trennen sich
       voneinander — dasselbe, was die Hauptnav über ihr Flex-Column-Markup schon hat. Nur hier, nicht
       in der geteilten Engine (CMS-Listen bleiben unverändert). Ausgefilterte Zeilen (display:none)
       erzeugen keine Lücke. */
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
/* Suchfeld im Chip-Menü (fahrzeuge_topchips/-modell.php, .cl-list-search): sein px-3 war für das kantenbündige
   Bootstrap-Menü gedacht — im animierten Look trägt das Menü selbst 0.75rem Polster, das Feld soll dann so
   breit sein wie die Hover-Flächen der Einträge (IW 07.09.2026). !important gegen die px-3-Utility. */
.cl-dd-animated .cl-list-search { padding-inline: 0 !important; }
.cl-dd-animated .dropdown-item {
    border-radius: var(--bs-border-radius);
    /* Eigener Stapelkontext: Die Fläche liegt mit z-index -1 hinter dem TEXT, aber vor dem
       Menü-Hintergrund. Ohne `isolation` fiele sie hinter das Dropdown und wäre weg. */
    position: relative;
    isolation: isolate;
}
.cl-dd-animated .dropdown-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--bs-secondary-bg);
    transform: translateY(var(--cl-dd-flug, -1.5rem));
    opacity: 0;
    transition: transform .2s ease-out, opacity .15s ease-out;
    pointer-events: none;
}
.cl-dd-animated .dropdown-item:hover::before,
.cl-dd-animated .dropdown-item:focus::before {
    transform: translateY(0);
    opacity: 1;
    transition: transform .38s cubic-bezier(.34, 1.56, .64, 1), opacity .15s ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .cl-dd-animated .dropdown-item::before,
    .cl-dd-animated .dropdown-item:hover::before,
    .cl-dd-animated .dropdown-item:focus::before { transition: none; }
}
/* Hauptmenü-Dropdown (IW 26.09.2026): Einträge in den Hauptmenü-Tokens — Text wie die Menüpunkte (--cl-nav-color,
   beide Stile), Hover-/Aktiv-Fläche + Rahmen wie der Hover der Menüpunkte (nur „Animiert", dort gibt es die ::before-Fläche).
   customSelects bleiben beim generischen Look oben. */
.cl-main-header .navbar-nav .dropdown-menu {
    --bs-dropdown-link-color: var(--cl-nav-color);
    --bs-dropdown-link-hover-color: var(--cl-nav-color);
}
.cl-main-header .navbar-nav .dropdown-menu.cl-dd-animated {
    --bs-dropdown-link-active-bg: var(--cl-main-nav-hover-bg);
    /* Schrift auf der Hover-/Aktiv-Fläche: Kontrast-Automatik wie bei den Menüpunkten (s. Nav-Block). */
    --bs-dropdown-link-hover-color: var(--cl-main-nav-hover-auto, var(--cl-nav-color));
    --bs-dropdown-link-active-color: var(--cl-main-nav-hover-auto, var(--cl-nav-color));
}
.cl-main-header .navbar-nav .cl-dd-animated .dropdown-item::before {
    background-color: var(--cl-main-nav-hover-bg);
    box-shadow: inset 0 0 0 1px var(--cl-main-nav-hover-border);
}
/* Hauptnav: größere Rundung der Einträge („rounded-3", gleiche Stufe wie die Menüpunkte der Leiste,
   --bs-border-radius-lg = Grundrundung × 1,333) — nur ab lg, im Offcanvas ist das Dropdown eine Liste. */
@media (min-width: 992px) {
    .cl-main-header.cl-nav-animated .navbar-nav .dropdown-item { border-radius: var(--bs-border-radius-lg); }
}
/* Geöffnetes Hauptnav-Dropdown als Flex-Container (statt BS-Default display:block) — vertikal,
   damit die Item-Liste erhalten bleibt und gap/Ausrichtung nutzbar sind. */
.cl-main-header .navbar-nav .dropdown-menu.show { display: flex; flex-direction: column; }
/* Markenlogos in Dropdown-Einträgen (Automatische Markenliste, Schalter „Logos anzeigen" — IW
   29.08.2026, Alt-Optik): Logo-Feld links mit fester Höhe (eigenes Token --cl-nav-logo-height),
   Breite folgt dem Logo (IW: keine feste Breite), Name daneben. */
.cl-main-header .dropdown-item .cl-nav-logo {
    display: inline-flex; align-items: center;
    flex: 0 0 auto; height: var(--cl-nav-logo-height);
}
.cl-main-header .dropdown-item .cl-nav-logo img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
@media (max-width: 991.98px) {
    /* Im Offcanvas ist das Dropdown KEIN schwebendes Menü, sondern eine eingerückte Liste im
       Fluss — Rahmen, Rundung und Schatten zeichnen dort eine Box, die es gar nicht gibt
       (IW 04.09.2026). Gilt für BEIDE Nav-Stile, es ist keine Stilfrage, sondern eine Folge der
       anderen Darreichungsform. `!important` beim Radius, weil `rounded-4` als Utility selbst
       eines trägt; beim Schatten aus demselben Grund wie zuvor (Popper/Collapse-Fluss). */
    .cl-main-header .navbar-nav .dropdown-menu,
    .cl-main-header .navbar-nav .dropdown-menu.show {
        border: 0;
        border-radius: 0 !important;
        box-shadow: none !important;
        /* Polster/Eintragshöhe der schwebenden Menüs (.cl-dd-animated) gelten in der Offcanvas-Liste
           nicht — zurück auf Bootstraps Werte, wie vor der Verallgemeinerung (IW 07.09.2026). */
        --bs-dropdown-padding-x: 0;
        --bs-dropdown-padding-y: 0.5rem;
        --bs-dropdown-item-padding-y: 0.25rem;
    }
  .cl-main-header .cl-nav-caret {
    display: flex;
    justify-content: space-between;
  }
}

.cl-main-header .cl-nav-caret::after {
      content: var(--cl-nav-caret-glyph);
      font-family: "Font Awesome 7 Pro";
      font-weight: var(--cl-icon-weight);
      color: var(--cl-nav-caret-color);
  }
@media (min-width: 992px) {
  .cl-main-header .cl-nav-caret { position: relative; }
  .cl-main-header .cl-nav-caret::after {
      position: absolute;
      left: 50%;
      bottom: -1.2rem;
      opacity: .75;
      transform: translateX(-50%);
      transition: transform .2s ease, opacity .2s ease;
      pointer-events: none;
  }
  /* Hover: der Indikator fährt nach unten und wird dabei kräftiger — er bleibt SICHTBAR. */
  .cl-main-header .cl-nav-caret:hover::after {
      opacity: 1;
      transform: translateX(-50%) translateY(.4rem);
  }
  /* Erst wenn das Dropdown wirklich AUFGEHT, blendet er aus (IW 04.09.2026): Dann übernimmt das
     Menü selbst die Anzeige, und zwei Blickfänge übereinander wären einer zu viel.
     `aria-expanded` statt `.show`, weil Bootstrap das Attribut am Toggle in jedem Fall führt —
     unabhängig davon, ob per Klick oder später per Hover geöffnet wird. Gleiche Spezifität wie
     die Hover-Regel darüber, gewinnt also durch die spätere Position; der translateY von dort
     bleibt erhalten, der Indikator fährt weiter und verschwindet am Ende der Bewegung. */
  .cl-main-header.cl-nav-animated .cl-nav-caret[aria-expanded="true"]::after {
      opacity: 0;
  }
}



/* Breiten-Cap gehört auf die navbar-brand (das FLEX-ITEM), NICHT nur aufs <img>: ein Flex-Item
   bemisst seine Hauptachse an der max-content-Breite des Inhalts — beim Bild = dessen INTRINSISCHE
   Breite. Ein max-width am <img> schrumpft nur das sichtbare Bild, nicht den Item-Kasten → das Item
   reserviert die volle Logo-Naturbreite (Leerraum rechts) und drückt den Toggler per
   justify-content:space-between + flex-wrap in die nächste Zeile. Cap am Item behebt das. */
.cl-main-header .navbar-brand {
    max-width: min(var(--cl-logo-max-width), 100%);
    min-width: 0;
}
.cl-main-header .cl-logo {
    width: auto;
    height: auto;
    max-height: var(--cl-logo-height);
    max-width: 100%;   /* füllt die (gedeckelte) navbar-brand */
}

/* Markenlogo-Leiste (Header neben Logo + Section main-brands-box): Logo-Höhe als Token. */
.cl-brands-list .cl-brand-logo { width: auto; max-height: var(--cl-brand-logo-height); max-width: var(--cl-brand-logo-width); }
.cl-brands-list .cl-brand { display: inline-flex; align-items: center; }

/* Marken-Band als eigener Kopf-Baustein (Chrome-Baustein main-brands-box) direkt unter dem
   Hauptheader. Hintergrund als Utility im Markup (bg-body-tertiary = deckend fürs Sticky + dark-aware). */
.cl-brands-header {
    padding: .75rem 0;
    --cl-brand-logo-height: 60px;   /* Logo-Höhe im Band; scoped → überschreibt den globalen Token nur hier */
}
/* Layout „full" (Default): farbiges Band über die volle Breite. --bs-tertiary-bg = bg-body-tertiary,
   dark-aware (BS flippt es unter [data-bs-theme=dark]); zugleich deckend fürs Sticky. */
.cl-brands-header--full { background-color: var(--bs-tertiary-bg); }
/* Layout „boxed": Band = Body-Hintergrund (deckt beim Sticky den durchscrollenden Inhalt ab), der
   innere .container ist die gefüllte Box; ab sm zur Pille abgerundet. */
.cl-brands-header--boxed { background-color: var(--bs-body-bg); }
.cl-brands-header--boxed > .container {
    background-color: var(--bs-tertiary-bg);
    padding-top: .5rem;
    padding-bottom: .5rem;
}
/* Hintergrund „Automatisch" (Seitenoption, IW 31.08.2026): dieselbe Fläche wie der Hauptheader
   (.cl-main-header = var(--bs-body-bg)) — die Leiste wirkt nahtlos als Teil des Kopfbereichs.
   Gilt für beide Layouts; die Farbrollen laufen dagegen über text-bg-* im Markup. */
.cl-brands-header--full.cl-brands-header--auto { background-color: var(--bs-body-bg); }
.cl-brands-header--boxed.cl-brands-header--auto > .container { background-color: var(--bs-body-bg); }
@media (min-width: 576px) {
    .cl-brands-header--boxed > .container { border-radius: 50rem; }
}
/* Desktop-Sticky (Option sticky=true → Klasse cl-brands-header-sticky): klebt unter dem Menü, top =
   geklebte Hauptheader-Unterkante (theme.js → --cl-header-height). z-index UNTER dem Hauptheader
   (sticky-top=1020), damit dessen Dropdowns über dem Band bleiben. MOBIL (< lg) greift die Regel
   NICHT → dort scrollt das Band immer weg (wie der Topbar). */
@media (min-width: 992px) {
    .cl-brands-header.cl-brands-header-sticky {
        position: sticky;
        top: var(--cl-header-height, 0px);
        z-index: 1019;
    }
}
/* Modell-Leiste (Modellkopf der Modell-Detailseiten, IW 09.09.2026): nutzt den Band-Container des Marken-
   Logo-Menüs (.cl-brands-header, --auto = Fläche des Hauptheaders, Sticky-Klasse je Option „Position") —
   eigen sind nur das kleinere Logo, Links in Textfarbe (Scrollspy-aktiv fett) und position:relative für
   den Editier-Stift der Vorschau-Affordances (die Sticky-Regel oben gewinnt ab lg per Spezifität). */
.cl-modell-leiste { position: relative; --cl-brand-logo-height: 4rem; }   /* Logo-Deckel ca. 65px (IW 09.09.2026) */
/* Logo-Höhe hier EIGENS deckeln: die Regel oben (.cl-brands-list .cl-brand-logo) greift nur im Listen-
   Wrapper des Marken-Bands, den die Leiste nicht hat — ohne diese Zeile kam das Logo in Originalgröße. */
.cl-modell-leiste .cl-brand-logo { width: auto; max-height: var(--cl-brand-logo-height); }
.cl-modell-leiste .cl-brand { display: inline-flex; align-items: center; }
.cl-modell-leiste .nav-link { color: var(--bs-body-color); }
.cl-modell-leiste .nav-link.active { font-weight: 700; }

/* Mobiles Offcanvas-Menü nicht am Viewport-Rand kleben, sondern bündig unter dem Header starten
   (Header-Unterkante misst JS in layout.php → --cl-header-height). Nur < lg — ab lg ist das
   Offcanvas ohnehin zur Inline-Navbar aufgelöst, die Regel greift dort nicht. */
@media (max-width: 991.98px) {
    .cl-main-header .offcanvas {
        /* Panel bündig unter dem Header. Die Leiste (.cl-header-line) ist ein echtes Header-Kind und
           daher in der JS-Messung bereits enthalten — kein separates Addieren.
           ⚠️ `--cl-header-bottom` (tatsächliche Unterkante im Viewport), NICHT `--cl-header-height`
           (reine Höhe): Ungescrollt steht der Hauptheader unter dem Topbar, seine Unterkante liegt
           also um dessen Höhe tiefer. Mit der Höhe öffnete das Panel zu hoch und überlagerte Logo
           und Toggler; es passte nur im geklebten Zustand (IW-Fund 04.09.2026). Fallback auf die
           Höhe, falls das Skript nicht gelaufen ist. */
        top: var(--cl-header-bottom, var(--cl-header-height, 0px));
        /* Bootstrap gibt dem Panel `height:100%` — zusammen mit einem `top` > 0 ragt es unten aus
           dem Viewport heraus, und die letzten Menüpunkte werden unerreichbar. Mit `bottom:0` und
           `height:auto` endet es exakt am unteren Rand. Fällt stärker auf, seit das Panel weiter
           unten ansetzt (s.o.). */
        height: auto;
        bottom: 0;
    }
}

/* ── Footer (Chrome) ───────────────────────────────────────────────────────────────────────
   Zentriert, dunkel. Hintergrund als Token (--cl-footer-bg, Default --cl-dark; je Website z.B. #000).
   data-bs-theme="dark" am <footer> schaltet Text/Links über die Dark-Verdrahtung auf hell. */
/* Zierlinie über dem Footer (Markup: erstes Kind von <footer>, s. sections/footer/footer.php).
   Wie beim Header eine MINDESThöhe — künftiger Mini-Content dürfte höher werden. */
.cl-footer-line { min-height: var(--cl-footer-line); background-color: var(--cl-footer-line-color); }
.cl-footer {
    background-color: var(--cl-footer-bg);
    /* color am Theme-Wurzelelement mitsetzen (wie BS am <body>): data-bs-theme="dark" ändert nur
       die Variablen — ohne diese Zeile erben p/div (Titel, Copyright) die DUNKLE Body-Farbe. */
    color: var(--bs-body-color);
    padding: 3.5rem 0 3rem;
}
.cl-footer-social-icons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    font-size: 1.5rem;
}
.cl-footer-social-icons a { color: var(--bs-body-color); }
.cl-footer-social-icons a:hover { opacity: .7; }
/* Footer-Menü-Spalten (IW 21.09.2026, Menütyp footer_menu): Überschrift fett, Links darunter
   schlicht (kein Unterstrich, gedämpft; Hover voll) — die Rechtslinks darunter bleiben die
   „laute" Zeile. Spaltenbreite aus dem Inhalt, Mindestbreite gegen Ein-Wort-Spalten. */
.cl-footer-nav { margin-bottom: 2.5rem; text-align: center; }
.cl-footer-nav-col { min-width: 10rem; }
.cl-footer-nav-title { font-weight: 700; margin-bottom: .5rem; }
.cl-footer-nav-title a { color: var(--bs-body-color); text-decoration: none; }
.cl-footer-nav ul a { color: var(--bs-body-color); text-decoration: none; opacity: .8; }
.cl-footer-nav ul a:hover, .cl-footer-nav-title a:hover { opacity: 1; text-decoration: underline; }
.cl-footer-nav ul li + li { margin-top: .25rem; }
@media (min-width: 768px) { .cl-footer-nav { text-align: start; } }
.cl-footer-links { margin-bottom: .75rem; }
.cl-footer-links a { color: var(--bs-body-color); font-weight: 700; text-decoration: underline; }
/* „|"-Trenner zwischen den Rechtslinks (inline-block → nicht mit unterstrichen). */
.cl-footer-links a + a::before {
    content: "|";
    display: inline-block;
    margin: 0 .75rem;
    font-weight: 400;
    text-decoration: none;
    opacity: .5;
}
.cl-footer-copyright { opacity: .85; margin-bottom: 2.5rem; }
/* Carlution-Marken-Logo: gedämpft (Weiß bei ~45% Deckkraft → auf jedem dunklen BG lesbar). */
/* Marken-Block als Link (Logo + Subline) → carlution.de; zentriert, ohne Link-Look. */
.cl-footer-brand { display: inline-block; text-decoration: none; color: var(--bs-body-color); }
.cl-footer-brand-logo { height: 2.75rem; width: auto; filter: brightness(0) invert(1); opacity: .45; }
/* Subline unter dem Logo: ganz klein, gesperrt, gedämpft — wie das Logo. */
.cl-footer-brand-sub {
    margin-top: .2rem;
    font-size: .5rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .45;
}


/* ── Budget-Filter — Chip + schwebendes Panel (render/web/fahrzeuge_budget.php) ───────────── */
/* Dropdown-Toggle mit FA-Icon statt BS-Dreieck (Icon kommt als Markup via web_icon(),
   Wrapper-Span .cl-caret); bei offenem Dropdown (aria-expanded, setzt Bootstrap) dreht es auf. */
.dropdown-toggle.cl-caret-icon::after { display: none; }
.cl-caret-icon .cl-caret {
    display: inline-block;
    transition: transform .15s ease;
}
.cl-caret-icon[aria-expanded="true"] .cl-caret { transform: rotate(180deg); }
/* Wechsel-Beschriftung am Toggle (z.B. „… einblenden"/„… ausblenden" der Konditions-Karten):
   sichtbar ist immer genau die zum Collapse-Zustand passende Variante (aria-expanded setzt BS). */
.cl-caret-icon .cl-when-open { display: none; }
.cl-caret-icon[aria-expanded="true"] .cl-when-open { display: inline; }
.cl-caret-icon[aria-expanded="true"] .cl-when-closed { display: none; }
/* ── Button-Rollen im Listing (IW 06.09.2026, feature-fahrzeug-listing.md „Button-Rollen") ──
   Die Marke (primary) erscheint im Listing NUR an der einen Hauptaktion je Sichtbereich (im Grid:
   die Werbekarte); Filter-Werkzeug und Fahrzeugkarten sind MARKENFREI und bleiben bei Bootstraps
   NORMALEN Klassen (IW-Ansage: so oft wie möglich keine eigenen Varianten): Aktionen btn-secondary,
   Chips btn-outline-secondary mit Bootstraps `active` als Auswahl (gefüllt, nativ), Badges
   text-bg-secondary. Eigenes CSS hier nur für das, was Bootstrap nicht trennt (s.u.).

   Schnellfilter-Chips: Zustandslogik IW 17.07.2026 — Hover: nichts; offenes Dropdown/Klick
   (.show/:active): auch nichts; NUR eine echte Auswahl (.active) färbt. Hover wird über die
   Variablen auf die Ruhewerte gespiegelt. Für „offen"/„gedrückt" geht das NICHT über Variablen,
   weil Bootstrap .show, :active und .active aus DENSELBEN --bs-btn-active-*-Werten baut —
   deshalb direkt: offen/gedrückt ohne .active sieht aus wie Ruhe, .active bleibt Bootstrap. */
[data-cl-fz-schnellfilter] .btn {
    --bs-btn-hover-color: var(--bs-btn-color);
    --bs-btn-hover-bg: var(--bs-btn-bg);
    --bs-btn-hover-border-color: var(--bs-btn-border-color);
}
[data-cl-fz-schnellfilter] .btn.show:not(.active),
[data-cl-fz-schnellfilter] .btn:active:not(.active) {
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

/* Filter-Badges (aktive Filter über der Trefferliste, fahrzeuge.php): links etwas mehr Luft
   als Bootstraps Standard — rechts steht das ✕, das optisch leichter wiegt als der Text
   und dessen Innenabstand dadurch größer wirkt (IW 20.07.2026). */
[data-cl-fz-badges] .badge { padding-left: .6rem; }

/* Offenes Schnellfilter-Panel: die Trefferliste tritt unscharf ZURÜCK, statt dass das Panel
   sich per Schatten nach vorn drängt (IW 20.07.2026 — die Schatten sind dafür an allen
   Chip-Dropdowns entfallen). NUR ab md: mobil liegt die Filterung im Sheet, das ohnehin
   die ganze Fläche übernimmt. Blur ist teuer — deshalb an EINEM Element (der Liste) statt
   an jeder Karte, und mit Übergang, damit es nicht springt. */
@media (min-width: 768px) {
    .cl-fz-grid { transition: filter .2s ease; }
    [data-cl-fz-live].is-panel-open .cl-fz-grid { filter: blur(6px); }
}

/* ── Fahrzeug-DETAILSEITE (F7.7, Etappe 1) ────────────────────────────────────────────
   Bewusst OHNE Kachel-/Card-Flächen — nur der Preisbereich trägt einen schlichten Rahmen
   (Bootstrap border/rounded, direkt im Markup).
   Kopfzeile klebt beim Scrollen unterm Website-Header (T31-Muster „Zurück zur Übersicht"). */
.cl-fzd-kopf {
    position: sticky;
    top: var(--cl-header-height, 0px);   /* unter dem geklebten Website-Header (JS-gemessen) */
    z-index: 10;
    background-color: var(--bs-body-bg);
}
/* Galerie (F7.7): Hauptbild zoombar; Thumb-Leiste scrollt horizontal, der aktive Thumb
   hebt sich per Outline ab, inaktive sind gedämpft. Lightbox = schlankes eigenes Overlay
   (fahrzeug_detail.js), Bild größtmöglich mit object-fit: contain. */
.cl-fzd-zoom { cursor: zoom-in; }
/* CO₂-Klassen-LABEL der Verbrauchsangaben (Portierung frontend/assets/css/co2label.css):
   links die farbige A-G-Pfeilskala mit Buchstaben-Kästchen, daneben schwarze Fahrzeug-
   Pfeile — Spalte „kombiniert" und (nur PHEV) „bei entladener Batterie". is-a…is-g am
   Spalten-Container blendet den Pfeil der jeweiligen Zeile ein. */
.cl-co2label-container {
    display: flex;
    line-height: normal;
    font-size: 12px;
    color: #fff;
    font-weight: bold;
}
.cl-co2label-container > div > div {
    display: flex;
    align-items: center;
    padding: 0 .75rem;
    position: relative;
    height: 1.2rem;
    margin: .25rem 0 .25rem 10px;
}
.cl-co2label-container > div > div:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: transparent;
}
.cl-co2label-left { width: 150px; margin-right: 2rem; }
.cl-co2label-left > div { margin-left: 0 !important; }
.cl-co2label-left > div:after { right: -20px; }
.cl-co2label-left > div > span { background: #fff; color: #000; padding: 0 2px; }
.cl-co2label-left > div:nth-child(1) { background: #00ff00; width: calc(40% - 20px); }
.cl-co2label-left > div:nth-child(2) { background: #4dff00; width: calc(50% - 20px); }
.cl-co2label-left > div:nth-child(3) { background: #b3ff00; width: calc(60% - 20px); }
.cl-co2label-left > div:nth-child(4) { background: #ffff00; width: calc(70% - 20px); }
.cl-co2label-left > div:nth-child(5) { background: #ffb300; width: calc(80% - 20px); }
.cl-co2label-left > div:nth-child(6) { background: #ff4d00; width: calc(90% - 20px); }
.cl-co2label-left > div:nth-child(7) { background: #ff0000; width: calc(100% - 20px); }
.cl-co2label-left > div:nth-child(1):after { border-left-color: #00ff00; }
.cl-co2label-left > div:nth-child(2):after { border-left-color: #4dff00; }
.cl-co2label-left > div:nth-child(3):after { border-left-color: #b3ff00; }
.cl-co2label-left > div:nth-child(4):after { border-left-color: #ffff00; }
.cl-co2label-left > div:nth-child(5):after { border-left-color: #ffb300; }
.cl-co2label-left > div:nth-child(6):after { border-left-color: #ff4d00; }
.cl-co2label-left > div:nth-child(7):after { border-left-color: #ff0000; }
.cl-co2label-middle { width: 80px; }
.cl-co2label-middle > div {
    visibility: hidden;
    background-color: #000;
    width: calc(100% - 40px);
    justify-content: end;
}
.cl-co2label-middle > div:after { left: -20px; border-right-color: #000 !important; }
.cl-co2label-middle.is-a > div:nth-child(1),
.cl-co2label-middle.is-b > div:nth-child(2),
.cl-co2label-middle.is-c > div:nth-child(3),
.cl-co2label-middle.is-d > div:nth-child(4),
.cl-co2label-middle.is-e > div:nth-child(5),
.cl-co2label-middle.is-f > div:nth-child(6),
.cl-co2label-middle.is-g > div:nth-child(7) { visibility: visible; }
.cl-co2label-right {
    width: 115px;
    border-left: 1px solid #000;
    padding-left: 25px;
}
.cl-co2label-right > div {
    visibility: hidden;
    background: #000;
    width: calc(100% - 50px);
    justify-content: end;
}
.cl-co2label-right > div:after { left: -20px; border-right-color: #000 !important; }
.cl-co2label-right.is-a > div:nth-child(1),
.cl-co2label-right.is-b > div:nth-child(2),
.cl-co2label-right.is-c > div:nth-child(3),
.cl-co2label-right.is-d > div:nth-child(4),
.cl-co2label-right.is-e > div:nth-child(5),
.cl-co2label-right.is-f > div:nth-child(6),
.cl-co2label-right.is-g > div:nth-child(7) { visibility: visible; }
/* Beschreibungszeile über den Spalten (nur PHEV): normale Schrift, kein Rahmen. */
.cl-co2label-container.is-desc { color: inherit; font-weight: normal; margin-bottom: .5rem; }
.cl-co2label-container.is-desc .cl-co2label-right { border-left: 1px solid transparent; }
.cl-co2label-weitere-liste { gap: .25rem; }

/* CO₂-Klassen-Label (EnVKV-Zeile unter den Fahrzeugdetails): amtliche Farbskala A-G. */
.cl-envkv-klasse {
    display: inline-block;
    padding: 0 .35rem;
    border-radius: .375rem;
    font-weight: 700;
    font-size: .875em;
    text-align: center;
    color: #fff;
}
.cl-envkv-klasse-a { background-color: #009036; }
.cl-envkv-klasse-b { background-color: #55ab26; }
.cl-envkv-klasse-c { background-color: #c8d200; color: #212529; }
.cl-envkv-klasse-d { background-color: #ffed00; color: #212529; }
.cl-envkv-klasse-e { background-color: #fbba00; color: #212529; }
.cl-envkv-klasse-f { background-color: #eb6909; }
.cl-envkv-klasse-g { background-color: #e2001a; }

/* Foto-Overlay (EIN Overlay, zwei Modi): Raster (Grid aller Fotos, ~420-450px-Kacheln,
   Spaltenzahl responsive) ↔ Einzelansicht (.is-einzel). Der Kopf bleibt in beiden Modi
   exakt gleich stehen. */
.cl-fzd-raster {
    position: fixed;
    inset: 0;
    z-index: 1990;
    display: none;
    overflow-y: auto;
    background-color: var(--bs-dark);
}
.cl-fzd-raster.is-offen { display: block; }
.cl-fzd-raster.is-einzel { overflow: hidden; }
/* Weiche Übergänge (IW 05.10.2026, wie die Galerie-Vergrößerung): Keyframes statt Transitions, weil die Modi über
   `display` schalten — eine Animation startet bei JEDEM Sichtbarwerden neu (Öffnen, Raster ↔ Einzelansicht). */
@keyframes cl-lb-blende { from { opacity: 0; } }
@keyframes cl-lb-heran  { from { opacity: 0; transform: scale(.92); } }
.cl-fzd-raster.is-offen { animation: cl-lb-blende .35s ease; }
.cl-fzd-raster-grid { animation: cl-lb-blende .3s ease; }
.cl-fzd-einzel img { animation: cl-lb-heran .45s cubic-bezier(.2, .7, .3, 1); transition: opacity .3s ease; }
.cl-fzd-raster.is-laedt .cl-fzd-einzel img { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .cl-fzd-raster.is-offen, .cl-fzd-raster-grid, .cl-fzd-einzel img { animation: none; transition: none; }
}
.cl-fzd-raster.is-einzel .cl-fzd-raster-grid { display: none; }
.cl-fzd-einzel { display: none; }
.cl-fzd-raster.is-einzel .cl-fzd-einzel {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: calc(100dvh - 3.25rem);   /* Viewport minus Kopfzeile */
}
.cl-fzd-einzel img {
    max-width: calc(100vw - 7rem);
    max-height: calc(100% - 1.5rem);
    object-fit: contain;
    border-radius: var(--bs-border-radius);   /* Theme-Radius auch im Zoom */
}
@media (max-width: 575.98px) {
    .cl-fzd-einzel img { max-width: 100vw; }
}
.cl-fzd-raster-kopf {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem 1rem;
    background-color: var(--bs-dark);   /* wie das Overlay — Kopf hebt sich nicht ab */
}
.cl-fzd-raster-kopf { color: #fff; }
.cl-fzd-raster-schliessen {
    background: none;
    border: 0;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0 .25rem;
    opacity: .75;
}
.cl-fzd-raster-schliessen:hover { opacity: 1; }
.cl-fzd-raster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
    gap: .75rem;
    max-width: 1900px;
    margin: 0 auto;
    padding: 1rem;
}
.cl-fzd-raster-grid img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--bs-border-radius);
    cursor: zoom-in;
}

/* ── Galerie (IW/ai 05.10.2026) — ContentBuilder-Baustein „Galerie" (contentbuilder-module/cl_galerie.html),
   später auch die Sektion „Galerie". Raster = reines Bootstrap (row-cols + ratio); hier nur, was Bootstrap nicht
   kann: das MOSAIK (CSS-Spalten, Originalformate) und die Vergrößerung (Overlay aus galerie.js, Optik wie das
   Foto-Overlay der Fahrzeug-Detailseite). Lädt auch im CB-Canvas (blank.html bindet theme.css ein). */
.cl-galerie-mosaik { column-count: 2; column-gap: .5rem; }
/* Abstand nach unten als PADDING: das Markup trägt `mb-0` (Bootstrap, !important) — margin-bottom käme nie an. */
.cl-galerie-mosaik .cl-galerie-bild { break-inside: avoid; padding-bottom: .5rem; }
.cl-galerie-mosaik.cl-galerie-abstand-0 { column-gap: 0; }   /* „kein" Abstand (IW/ai 21.10.2026) */
.cl-galerie-mosaik.cl-galerie-abstand-0 .cl-galerie-bild { padding-bottom: 0; }
.cl-galerie-mosaik.cl-galerie-abstand-1 { column-gap: .25rem; }
.cl-galerie-mosaik.cl-galerie-abstand-1 .cl-galerie-bild { padding-bottom: .25rem; }
.cl-galerie-mosaik.cl-galerie-abstand-3 { column-gap: 1rem; }
.cl-galerie-mosaik.cl-galerie-abstand-3 .cl-galerie-bild { padding-bottom: 1rem; }
/* Galerie in einer RANDLOSEN Sektion (Breite „Voll", IW/ai 08.11.2026): `.cl-section-randlos .row` setzt den
   Spaltenabstand jeder Reihe auf 0 (gegen den Scrollbalken, s. unten) — das verschluckte den eingestellten Galerie-
   Abstand, die Bilder stießen aneinander und an die Fensterkante. Hier bekommt die Galerie ihren Abstand zurück:
   zwischen den Bildern (Gutter der eigenen Reihen) UND als Rand ringsum (Padding). Das Padding ist mindestens so
   groß wie der halbe Gutter, fängt also die negativen Reihen-Margins ab — kein Überstand, kein Scrollbalken.
   Mosaik: Spalten-/Zeilenabstand kommen aus column-gap/padding-bottom (oben), hier nur der Rand (unten ohne
   Padding — die letzte Kachel bringt ihr padding-bottom schon mit). */
.cl-galerie-abstand-0 { --cl-galerie-abstand: 0; }
.cl-galerie-abstand-1 { --cl-galerie-abstand: .25rem; }
.cl-galerie-abstand-2 { --cl-galerie-abstand: .5rem; }
.cl-galerie-abstand-3 { --cl-galerie-abstand: 1rem; }
.cl-section-randlos .cl-galerie { padding: var(--cl-galerie-abstand, 0); }
.cl-section-randlos .cl-galerie .row { --bs-gutter-x: var(--cl-galerie-abstand, 0); }
.cl-section-randlos .cl-galerie-mosaik { padding-bottom: 0; }
/* Abstand „kein" = ein Block mit gerundeten Außenecken (modell_galerie.php) — in der randlosen Sektion eckig, der Block
   läuft dort bis an die Fensterkante (IW 08.11.2026). !important, weil Bootstraps .rounded* ebenfalls !important trägt. */
.cl-section-randlos .cl-galerie-block-rund { border-radius: 0 !important; }
@media (max-width: 575.98px) {
    .cl-galerie-mosaik.cl-galerie-spalten-2 { column-count: 1; }
}
@media (min-width: 768px) {
    .cl-galerie-mosaik.cl-galerie-spalten-3 { column-count: 3; }
    .cl-galerie-mosaik.cl-galerie-spalten-4 { column-count: 4; }
}
.cl-galerie-link { cursor: zoom-in; position: relative; }
.cl-galerie-link img { transition: transform .4s ease, filter .4s ease; }
/* Hover/Fokus (IW/ai 21.10.2026, wie im Alt-Frontend): Bild weich unscharf + abgedunkelt, mittig ein Vergrößern-Symbol.
   Das Symbol ist ein SVG als Maske (Farbe = background-color) — unabhängig von Icon-Schrift und Website-Icon-Stil. */
.cl-galerie-link:hover img, .cl-galerie-link:focus-visible img { transform: scale(1.06); filter: blur(4px) brightness(.6); }
.cl-galerie-link::after {
    content: ""; position: absolute; top: 50%; left: 50%; z-index: 1;
    width: 2.25rem; height: 2.25rem; margin: -1.125rem 0 0 -1.125rem;
    background-color: #fff; opacity: 0; transition: opacity .3s ease; pointer-events: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 3.5h6v6M20.5 3.5l-6.5 6.5M9.5 20.5h-6v-6M3.5 20.5l6.5-6.5M3.5 9.5v-6h6M3.5 3.5l6.5 6.5M20.5 14.5v6h-6M20.5 20.5l-6.5-6.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 3.5h6v6M20.5 3.5l-6.5 6.5M9.5 20.5h-6v-6M3.5 20.5l6.5-6.5M3.5 9.5v-6h6M3.5 3.5l6.5 6.5M20.5 14.5v6h-6M20.5 20.5l-6.5-6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cl-galerie-link:hover::after, .cl-galerie-link:focus-visible::after { opacity: .9; }
@media (prefers-reduced-motion: reduce) {
    .cl-galerie-link img, .cl-galerie-link::after { transition: none; }
}

/* Öffnen/Schließen WEICH (IW 05.10.2026): Overlay blendet über opacity ein (visibility schaltet erst NACH dem
   Ausblenden ab — sonst wäre das Schließen abrupt), das Bild wächst dabei leicht auf volle Größe. Beim Blättern
   blendet galerie.js das neue Bild erst nach dem Laden ein (.is-laedt). */
.cl-galerie-lb {
    position: fixed;
    inset: 0;
    z-index: 1990;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-dark);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility 0s linear .35s;
}
.cl-galerie-lb.is-offen {
    opacity: 1;
    visibility: visible;
    transition: opacity .35s ease;
}
.cl-galerie-lb figure {
    margin: 0; display: flex; flex-direction: column; align-items: center; max-width: calc(100vw - 7rem);
    transform: scale(.92);
    transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.cl-galerie-lb.is-offen figure { transform: none; }
.cl-galerie-lb img {
    max-width: 100%;
    max-height: calc(100dvh - 7rem);
    object-fit: contain;
    border-radius: var(--bs-border-radius);
    transition: opacity .4s ease;
}
.cl-galerie-lb.is-laedt img { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .cl-galerie-lb, .cl-galerie-lb.is-offen, .cl-galerie-lb figure, .cl-galerie-lb img { transition: none; }
}
.cl-galerie-lb figcaption { color: #fff; opacity: .85; margin-top: .6rem; text-align: center; font-size: .9rem; }
@media (max-width: 575.98px) {
    .cl-galerie-lb figure { max-width: 100vw; }
}
/* Kopf der Vergrößerung = Kopf des Fahrzeug-Foto-Overlays (IW 05.10.2026, globale Gleichheit): Zahl oben links fett
   in Grundschrift („3 / 16"), xmark oben rechts — beide in einer 2,5rem hohen Kopfzeile mit 1rem Rand, genau wie
   .cl-fzd-raster-kopf / .cl-fzd-raster-schliessen. Die Pfeile teilen sich die Regel mit .cl-fzd-lb-btn (weiter unten). */
.cl-galerie-lb-schliessen {
    position: absolute;
    top: .5rem;
    right: 1rem;
    background: none;
    border: 0;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0 .25rem;
    opacity: .75;
}
.cl-galerie-lb-schliessen:hover { opacity: 1; }
.cl-galerie-lb-prev { left: .5rem; }
.cl-galerie-lb-next { right: .5rem; }
.cl-galerie-lb-zaehler {
    position: absolute;
    top: 0;
    left: 0;
    height: 2.5rem;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    color: #fff;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.cl-galerie-lb.is-einzeln .cl-galerie-lb-btn,
.cl-galerie-lb.is-einzeln .cl-galerie-lb-zaehler { display: none; }

/* ── YouTube (IW/ai 05.10.2026) — ContentBuilder-Baustein „YouTube" (contentbuilder-module/cl_youtube.html).
   PLATZHALTER statt Player: neutraler Grund, optional Vorschaubild, Abspiel-Knopf im YouTube-Stil, Titel oben.
   youtube.js tauscht ihn beim Klick gegen das iframe (bzw. zeigt erst den Einwilligungs-Hinweis). Bootstrap kennt
   kein 9:16 → eigene ratio-Variante (Shorts), schmal und mittig, damit sie in voller Spalte nicht riesig wird. */
.cl-ratio-9x16 { --bs-aspect-ratio: calc(16 / 9 * 100%); }
.cl-youtube.cl-ratio-9x16 { max-width: 22rem; margin-inline: auto; }
.cl-youtube { background: linear-gradient(135deg, #1e293b, #0f172a); }
.cl-youtube-link { display: block; color: #fff; text-decoration: none; cursor: pointer; }
.cl-youtube-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cl-youtube-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 68px;
    height: 48px;
    transform: translate(-50%, -50%);
    background-color: rgba(33, 33, 33, .8);
    border-radius: 14px;
    transition: background-color .2s ease, transform .2s ease;
}
.cl-youtube-play::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-38%, -50%);
    border-style: solid;
    border-width: 11px 0 11px 19px;
    border-color: transparent transparent transparent #fff;
}
.cl-youtube-link:hover .cl-youtube-play,
.cl-youtube-link:focus-visible .cl-youtube-play { background-color: #f00; transform: translate(-50%, -50%) scale(1.06); }
.cl-youtube-titel {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    padding: .75rem 1rem 2.5rem;
    background: linear-gradient(rgba(0, 0, 0, .65), transparent);
    font-weight: 600;
    line-height: 1.3;
}
.cl-youtube-hinweis {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 1rem;
    text-align: center;
    font-size: .9rem;
    color: #fff;
    background-color: rgba(15, 23, 42, .9);
    animation: cl-lb-blende .3s ease;
}
.cl-youtube-hinweis a { color: #fff; opacity: .8; }
.cl-youtube iframe { border: 0; }

/* Bild-Zähler oben rechts im Hauptbild: helles halbtransparentes Pill. */
.cl-fzd-zaehler {
    /* bs-light halbtransparent — gleicher Ton wie die btn-light-Kreise. */
    background-color: rgba(248, 249, 250, .75);
    color: var(--bs-body-color);
    border-radius: .5rem;
    padding: .25rem .6rem;
    line-height: 1.4;
}

/* Galerie-Overlay-Buttons (links „x Bilder" + Lupe, rechts Chevrons): EINE feste Höhe für
   alle vier — Icon- und Text-Buttons rechnen ihre Höhe sonst minimal unterschiedlich. */
[data-cl-fzd-lb-tools] .btn,
[data-cl-fzd-galerie] [data-cl-fz-nav] .btn {
    width: 2rem;    /* feste Breite statt aspect-ratio — Button-Padding drückte sie sonst oval */
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Native Scrollbar der Thumb-Leiste verstecken — ersetzt durch den eigenen 3px-Indikator
   (.cl-fzd-thumbbar, Daumen exakt eine Thumb-Breite; Position rechnet fahrzeug_detail.js). */
[data-cl-fzd-thumbs] { scrollbar-width: none; }
[data-cl-fzd-thumbs]::-webkit-scrollbar { display: none; }
.cl-fzd-thumbbar {
    height: 3px;
    margin-top: .5rem;
    border-radius: 2px;
    background-color: var(--bs-tertiary-bg);
    cursor: pointer;
}
.cl-fzd-thumbbar-daumen {
    height: 100%;
    border-radius: 2px;
    background-color: var(--bs-primary);
    transition: transform .15s ease-out;
    cursor: grab;
    touch-action: none;   /* Ziehen bewegt NUR die Thumb-Leiste — nie die Seite */
    /* Greifbare Fläche größer als die sichtbaren 3px (Touch!) — unsichtbar überstehend. */
    position: relative;
}
.cl-fzd-thumbbar-daumen::before {
    content: "";
    position: absolute;
    inset: -8px 0;
}
.cl-fzd-thumbbar.is-dragging .cl-fzd-thumbbar-daumen {
    transition: none;
    cursor: grabbing;
}
.cl-fzd-thumb {
    flex: 0 0 auto;
    width: 5.5rem;
    aspect-ratio: 4 / 3;
    background-color: var(--bs-tertiary-bg);
    opacity: .55;
    transition: opacity .15s ease;
}
.cl-fzd-thumb:hover { opacity: .85; }
.cl-fzd-thumb.is-active { opacity: 1; }
/* Pfeile der Einzelansicht (IW 05.10.2026, gleich der Galerie-Vergrößerung): freistehend weiß auf dem dunklen Grund
   wie das xmark — keine hellen Kreise mehr; große Klickfläche. Der Zähler steht im Kopf („3 / 16"). */
.cl-fzd-lb-btn,
.cl-galerie-lb-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 6rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    color: #fff;
    font-size: 1.75rem;
    opacity: .7;
    transition: opacity .15s ease;
}
.cl-fzd-lb-btn:hover, .cl-fzd-lb-btn:focus-visible,
.cl-galerie-lb-btn:hover, .cl-galerie-lb-btn:focus-visible { opacity: 1; }
.cl-fzd-lb-prev { left: .5rem; }
.cl-fzd-lb-next { right: .5rem; }
/* Kaufbox (rechte Spalte) klebt ab lg beim Scrollen unter der Kopfzeile (T31-Muster);
   3rem ≈ Höhe der Zurück-Zeile (py-2 + small). Mobil normaler Flow + Sticky-CTA-Bar. */
@media (min-width: 992px) {
    /* Zweispalter als CSS-Grid (Trello CLM #75, pmo/ai 30.10.2026): Galerie und Datenbereiche sind
       getrennte Zellen, damit die Kaufbox mobil direkt nach Galerie + Titel kommt (Bootstrap-order).
       Ab lg: Titel volle Breite, links Galerie über Daten, rechts die Kaufspalte über BEIDE Zeilen —
       sie ist damit so hoch wie die linke Spalte, die Kaufbox klebt wie zuvor. 7fr 1fr 4fr =
       col-lg-7 / offset-lg-1 / col-lg-4; die Gutter bleiben über das Padding der .col-12-Zellen. */
    .cl-fzd-spalten {
        display: grid;
        /* minmax(0, …): sonst wächst die Spalte auf die min-content-Breite (Thumbnail-Leiste) */
        grid-template-columns: minmax(0, 7fr) minmax(0, 1fr) minmax(0, 4fr);
        grid-template-rows: auto auto 1fr;
    }
    .cl-fzd-spalten > .cl-fzd-titel      { grid-column: 1 / -1; grid-row: 1; }
    .cl-fzd-spalten > .cl-fzd-medien     { grid-column: 1; grid-row: 2; }
    .cl-fzd-spalten > .cl-fzd-daten      { grid-column: 1; grid-row: 3; }
    .cl-fzd-spalten > .cl-fzd-kaufspalte { grid-column: 3; grid-row: 2 / span 2; }
    .cl-fzd-kaufbox {
        position: sticky;
        /* 3rem Zurück-Zeile + ~5.5rem klebender Titel-Block — die Kaufbox stoppt UNTER dem
           Titel, statt mit ihrem Kopf hinter dessen Fläche zu verschwinden. */
        top: calc(var(--cl-header-height, 0px) + 8.5rem);
    }
    /* TEST (IW 21.07.2026): Titel-Block klebt auf Desktop ebenfalls unter der Zurück-Zeile;
       eigene Fläche + z-index unter der Kopfzeile (10), damit der Content darunter durchläuft. */
    .cl-fzd-titel {
        position: sticky;
        /* 1rem nach OBEN unter die Kopfzeile gezogen (top 2rem + padding 1rem = Inhalt bei
           3rem): die eigene Fläche schließt lückenlos an die Zurück-Zeile an (deren z-index 10
           liegt drüber), egal wie hoch diese exakt ausfällt. */
        top: calc(var(--cl-header-height, 0px) + 2rem);
        padding-top: 1rem;
        padding-bottom: .75rem;   /* Luft unter der Modell-Subline */
        /* Ersetzt die Gutter-Margin des Grids: kompensiert das padding-top im Ruhezustand —
           netto .5rem Abstand zur Zurück-Zeile statt Gutter + Padding. */
        margin-top: -.5rem;
        z-index: 9;
        background-color: var(--bs-body-bg);
    }
}
/* Mobile Sticky-CTA-Bar (<lg): Anrufen + Anfragen — fix am unteren Rand, safe-area für den
   iOS-Home-Indikator. Die Section bekommt mobil Platz nach unten, damit nichts verdeckt wird. */
.cl-fzd-ctabar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom, 0px));
    background-color: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
}
@media (max-width: 991.98px) {
    .cl-fzd { padding-bottom: 5.5rem !important; }
}

/* Fahrzeug-Karte (F7.7): der Titel trägt einen stretched-link → der ganze TEXTBEREICH der
   Karte führt zur Detailseite. Alle interaktiven Elemente darin (Anfragen/Anrufen/Merken)
   müssen ÜBER dem Overlay liegen, sonst frisst der Karten-Link ihre Klicks. */
.cl-fz-listing .card-body .btn,
.cl-fz-listing .card-body a:not(.stretched-link) {
    position: relative;
    z-index: 2;
}

/* F7.4 LIVE (fahrzeuge_live.js): während nachgeladen wird, bleibt ALLES stehen — nur ein
   leichter Schleier zeigt „arbeitet". Die Verzögerung ist Absicht: schnelle Antworten sollen
   gar nichts aufblitzen lassen, sichtbar wird der Zustand erst, wenn es wirklich dauert.
   BEWUSST kein pointer-events:none — ein offenes Mehrfach-Menü muss weiter klickbar bleiben
   (schnelles Weiterklicken bricht die vorige Anfrage sauber ab). */
[data-cl-fz-live] { transition: opacity .15s ease; }
[data-cl-fz-live][aria-busy="true"] { opacity: .65; transition-delay: .2s; }

/* ── Aktiver Chip (Marke/Modell/Antrieb/Typ/Zustand/Mehr-Filter/Budget) = Bootstraps `.active`
   auf btn-outline-secondary — gefüllt, nativ, kein eigenes CSS (Button-Rollen IW 06.09.2026;
   bis dahin eigene Klasse cl-fz-chip-active mit Primär-Subtle-Fläche). Einzige Nacharbeit: die
   gedämpfte Trefferzahl (<small class="text-body-secondary">) wäre auf der grauen Fläche
   unsichtbar — sie erbt die Button-Schrift und wird nur per opacity zurückgenommen. */
[data-cl-fz-schnellfilter] .btn.active .text-body-secondary {
    color: inherit !important;
    opacity: .75;
}
/* Zählwert am Chip (Desktop-Direktchips + Sheet-Chips): etwas kleiner als Bootstraps
   `small`, damit die Zahl den Namen begleitet statt mit ihm zu konkurrieren (IW 20.07.2026).
   Grundlinien-Ausrichtung + gap-2 kommen als Utilities am Chip selbst. */
[data-cl-fz-schnellfilter] .btn > small,
[data-cl-fz-sheet] .btn > small { font-size: .7rem; }

/* Aktiver Chip im SHEET (btn-check + btn-outline-secondary): Bootstraps eigener :checked-Zustand
   (gefüllt grau) — keine Sonderregel mehr (IW 06.09.2026; 20.07.–06.09. gedämpfte Primär-Fläche).
   Häkchen/Radios in den Menüs bleiben ebenfalls Bootstrap-Standard (primary = „form active state"). */

/* 0-Treffer-Werte: sichtbar, aber TOT (IW-Entscheid 17.07.2026 — nichts verschwinden lassen).
   Gilt für Direkt-Chips, Menüzeilen und die Sheet-Chips (btn-check + disabled). */
[data-cl-fz-schnellfilter] .btn.disabled,
.dropdown-item.disabled,
.btn-check:disabled + .btn {
    opacity: .45;
    pointer-events: none;
}
/* DEAKTIVIERTER Dropdown-Chip (klassischer Modus: Modell ohne Marken-Auswahl) — sieht aus wie
   jeder andere Chip, NUR Schrift und Caret sind ausgegraut (IW 20.07.2026). Die opacity der
   0-Treffer-Regel darüber wird zurückgenommen (sonst blasst der Rahmen aus) und die Schrift
   stattdessen direkt gedämpft; der Rahmen bleibt Bootstraps disabled-Rahmen von
   btn-outline-secondary (= Ruhe-Rahmen, deshalb keine eigene Korrektur).
   `pointer-events: none` erbt bewusst von der 0-Treffer-Regel — hier nicht wiederholt.
   Trifft NUR Dropdown-Trigger, Direkt-Chips bleiben bei der 0-Treffer-Optik. */
[data-cl-fz-schnellfilter] .dropdown-toggle.disabled {
    opacity: 1;
    /* Schrift/Caret exakt so schwach wie zuvor über opacity: .45 — der Chip trägt im
       Ruhezustand die Secondary-Schrift, also dieselbe Farbe zu 45%. */
    color: color-mix(in srgb, var(--bs-secondary) 45%, transparent);
}
.cl-fz-marke-menu {
    min-width: 15rem;
    max-height: 20rem;
    overflow-y: auto;
}

/* ── Mobile BOTTOM-BAR = FILTER-SHEET in EINEM Element (IW 17.07.2026): die Bar wächst per
   Klick/Geste zum Sheet (Zustände/Detents setzt theme.js über .is-open + Inline-Höhe).
   Hell mit Primär-Button (Farbumkehr am 17.07.2026 verworfen); safe-area-Polster unten. */
.cl-fz-bottombar {
    position: fixed;
    /* FLOATING Pill (Apple-Maps-Anmutung, IW 17.07.2026): schwebt zugeklappt mit GROSSZÜGIGEM
       Abstand links/rechts/unten; beim Aufklappen fährt sie bündig auf volle Breite. */
    left: 1.25rem;
    right: 1.25rem;
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    z-index: 1030;                                 /* wie Bootstraps fixed-bottom */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    /* NUR vertikales Padding (IW 17.07.2026) — das horizontale Innenpolster tragen die
       Trigger-Zeile und die Scroll-Area selbst, damit die Scrollbar ganz am Außenrand sitzt
       (nicht 1rem eingerückt). Der Dragger liegt absolut IM oberen Padding (s.u.). */
    padding: 1rem 0;
    /* Frosted Glass (IW 17.07.2026, Apple-Maps-Anmutung): Light-Ton mit 30% Deckung + Blur. */
    background-color: color-mix(in srgb, var(--bs-light) 30%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 0;
    /* Fester Pill-Radius statt --cl-radius-pill (50rem): der riesige Zahlenwert ließ die
       Radius-TRANSITION beim Öffnen wie einen wachsenden Ballon aussehen (IW 17.07.2026);
       2rem ist bei der Barhöhe optisch dieselbe Pille, animiert aber unauffällig. */
    border-radius: 2rem;
    box-shadow: var(--bs-box-shadow);
    transition: height .25s ease, left .25s ease, right .25s ease, bottom .25s ease;
}
/* Offen (60%-Detent): Glossy-Look bleibt — Außenabstand halbiert, Glas-Deckung 75%
   (Lesbarkeit; Apple-Maps-Vorbild, IW 17.07.2026). */
.cl-fz-bottombar.is-open {
    left: .625rem;
    right: .625rem;
    bottom: calc(.625rem + env(safe-area-inset-bottom, 0px));
    background-color: color-mix(in srgb, var(--bs-light) 65%, transparent);
    transition: height .25s ease, left .25s ease, right .25s ease, bottom .25s ease,
                background-color .25s ease, border-radius .25s ease;
}
/* 90%-Detent (.is-expanded): VOLLFLÄCHIG — deckend weiß, bündig ohne Außenabstand; die
   OBERE Rundung bleibt erhalten (IW 17.07.2026), nur unten läuft die Box randlos aus. */
.cl-fz-bottombar.is-open.is-expanded {
    left: 0;
    right: 0;
    bottom: 0;
    background-color: color-mix(in srgb, var(--bs-light) 85%, transparent);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
/* Geschlossen: Grabber-Strich knapp am oberen Rand, ABSOLUT im Padding (kein Flow-Raum);
   das Formular ist zu. */
.cl-fz-bottombar > form { display: none; }
/* Runder Sortier-Button EXAKT in Standard-Button-Höhe als FESTES Quadrat (IW 17.07.2026 —
   Flex-Stretch + aspect-ratio quetschte den Kreis oval; min/max erzwingen 1:1 gegen alle
   Flex-Einflüsse). 2.375rem = Bootstrap-btn-Höhe. */
[data-cl-fz-sheet-trigger-zeile] .rounded-circle {
    width: 2.375rem;
    min-width: 2.375rem;
    max-width: 2.375rem;
    height: 2.375rem;
    min-height: 2.375rem;
    max-height: 2.375rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* Grabber-Strich IMMER absolut knapp am oberen Rand (kein Flow-Raum) — die Box behält
   offen wie zu DIESELBE Geometrie (Außenabstände, Padding, Glas, Radius; IW 17.07.2026:
   „es wird einfach nur nach oben mehr Bereich geschaffen"). */
.cl-fz-bottombar > .cl-sheet-grip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: .3125rem 0 .25rem;
}
.cl-fz-bottombar.is-open > form {
    display: flex;
    margin-top: .75rem;   /* Luft zwischen Trigger-Zeile und Inhalt */
}
/* DER TRICK (IW 17.07.2026): die Trigger-Zeile bleibt offen SICHTBAR und tauscht ihre
   Rollen — die zu/offen-Spans in den Buttons schalten mit dem Zustand. */
.cl-fz-bottombar [data-cl-fz-sheet-offen] { display: none; }
.cl-fz-bottombar.is-open [data-cl-fz-sheet-zu] { display: none; }
.cl-fz-bottombar.is-open [data-cl-fz-sheet-offen] { display: inline; }
/* Scroll-Area geht bis GANZ AUSSEN (Scrollbar am Sheet-Rand), der Inhalt trägt sein eigenes
   horizontales Polster (IW 17.07.2026). */
.cl-fz-sheet-body {
    overflow-y: auto;
    padding-inline: 1rem;
}
/* Trigger-Zeile (Buttons) behält ihr horizontales Polster, seit das Box-Padding nur noch
   vertikal ist. */
[data-cl-fz-sheet-trigger-zeile] {
    padding-inline: 1rem;
}
/* iPhone-Style im Sheet (IW 17.07.2026): PILL für Buttons/Chips und die Segmented Control —
   bewusst vom Theme-Radius LOSGELÖST (native Sheet-Anmutung gewinnt). Eingabefelder
   (von/bis) behalten den Theme-Radius. */
.cl-fz-bottombar .btn,
.cl-fz-bottombar .cl-segmented,
.cl-fz-bottombar .cl-segmented .btn {
    border-radius: 50rem;
}
/* Leicht TRANSLUZENT statt hart weiß (IW 17.07.2026): Segmented-Control-Fläche, aktives
   Segment und die von/bis-Eingaben bekommen Glas-Anmutung passend zum Sheet. */
.cl-fz-bottombar .cl-segmented {
    background-color: color-mix(in srgb, var(--bs-body-color) 8%, transparent);
}
.cl-fz-bottombar .cl-segmented .btn {
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-body-bg) 55%, transparent);
    --bs-btn-active-color: var(--bs-body-color);
}
.cl-fz-bottombar .form-control {
    background-color: color-mix(in srgb, var(--bs-body-bg) 55%, transparent);
}
/* Slider-Daumen bleiben DECKEND (IW 17.07.2026): transluzent ließ die farbige Slider-Bar
   durch die Griffe durchscheinen. Nur die Radio-/Checkbox-Kreise sind transluzent. */
.cl-fz-bottombar .form-check-input:not(:checked) {
    background-color: color-mix(in srgb, var(--bs-body-bg) 55%, transparent);
}
/* Eigener Backdrop (Scrim) hinter dem offenen Sheet — Klick schließt (theme.js). */
.cl-fz-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1029;
    background-color: rgba(0, 0, 0, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.cl-fz-sheet-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}
@media (max-width: 767.98px) {
    .cl-fz-listing { padding-bottom: 4rem; }       /* Platz für die Bar überm Seitenende */
}
/* Griff-Zeile = Drag-Fläche in VOLLER Breite (IW 17.07.2026); die Pille darin ist nur Optik.
   Auch ZUGEKLAPPT sichtbar — knapp über dem Filterung-Button (Apple-Maps-Anmutung). */
.cl-sheet-grip {
    flex-shrink: 0;
    padding: .625rem 0 .5rem;
    cursor: grab;
}
.cl-sheet-grabber {
    width: 3rem;      /* etwas breiter (IW 17.07.2026) */
    height: .25rem;   /* doch wieder 4px (IW 17.07.2026) */
    margin: 0 auto;
    border-radius: 50rem;
    /* Deutlich sichtbarer als secondary-bg (IW 17.07.2026): 35% Textfarbe, themesicher. */
    background-color: color-mix(in srgb, var(--bs-body-color) 35%, transparent);
}
/* Schwebendes Dropdown-Panel: feste Wunschbreite, auf schmalen Viewports begrenzt. */
.cl-fz-budget-panel {
    width: 22rem;
    max-width: calc(100vw - 2rem);
}
/* Segmented Control (Achsen-Umschalter im Panel): flache Container-Fläche, Segmente randlos
   und gedämpft; das AKTIVE Segment (BS .active → Active-Variablen) füllt sich und hebt sich
   per kleinem Schatten ab. Hover bewusst neutral — Zustand wechselt nur per Klick. */
.cl-segmented {
    background-color: var(--bs-tertiary-bg);
    /* Der Theme-Rundung folgend: eine Stufe größer als die Segmente (Kette --cl-radius). */
    border-radius: var(--bs-border-radius-lg);
    padding: .25rem;
    gap: .25rem;
}
.cl-segmented .btn {
    --bs-btn-color: var(--bs-secondary-color);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--bs-body-bg);
    --bs-btn-active-border-color: transparent;
}
.cl-segmented .btn.active { box-shadow: var(--bs-box-shadow-sm); }
/* Segmented als COLLAPSE-Umschalter (Detailseite F7.7, Zahlart-Toggle): Bootstrap toggelt dort
   `collapsed` statt `active` — der nicht-eingeklappte Button trägt die Aktiv-Optik. Rein
   deklarativ (data-bs-parent-Accordion), kein eigenes JS. */
.cl-segmented .btn[data-bs-toggle="collapse"]:not(.collapsed) {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: var(--bs-box-shadow-sm);
}

/* Histogramm: SSR-Balken (Facetten-Bins); außerhalb der Slider-Griffe gedämpft (JS: is-outside). */
.cl-fz-budget-hist {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 56px;
    /* GLEICHER Einzug wie der Slider (IW 17.07.2026) — sonst sitzen Balken und Griff nicht
       deckungsgleich und der Griff zeigt auf den falschen Balken. */
    margin-inline: .875rem;
}
.cl-fz-budget-hist span {
    flex: 1 1 0;
    min-height: 2px;
    /* Oben Theme-Rundung, unten bündig (IW 17.07.2026) — Balken stehen auf der Grundlinie. */
    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
    /* Secondary statt Primär (Button-Rollen IW 06.09.2026): das Werkzeug bleibt in der Grau-Familie
       der Chips; „außerhalb" darunter noch schwächer. */
    background: var(--bs-secondary);
}
/* Wert-Label unter dem Slider-Griff (Option FZ_SLIDER_EINGABEFELDER=false, IW 17.07.2026):
   ersetzt die von/bis-Eingabefelder — das JS positioniert es per left in %. */
/* Slider-Feld OHNE Eingabemöglichkeit (Option FZ_SLIDER_EINGABEFELDER=false, IW 17.07.2026):
   bleibt ein echtes readonly-Input (Übertragungsweg des Formulars), sieht aber wie normaler
   Text aus. !important, weil die Sheet-Regeln .form-control später überschreiben. */
.form-control.cl-fz-slider-nurtext {
    border-color: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding-inline: 0;
    cursor: default;
}
/* Außerhalb der Griffe gedämpft, aber IMMER sichtbar (IW 17.07.2026): translucentes Grau aus
   der Textfarbe — secondary-bg verschwand bei höherer Sheet-Deckung (90%). */
.cl-fz-budget-hist span.is-outside { background: color-mix(in srgb, var(--bs-body-color) 22%, transparent); }
/* Doppel-Slider: zwei überlagerte native range-Inputs; nur die Daumen fangen Zeigerereignisse.
   Daumen im iOS-Stil (IW 17.07.2026): große weiße Kreise (28px) mit weichem Schatten —
   deutlich greifbarer als die kleinen Rand-Punkte davor. */
/* Seitlich eingerückt (IW 17.07.2026): sonst kleben die Endgriffe am Rand und sind nicht
   greifbar — die Einrückung schafft Griff-Raum an min/max. */
.cl-fz-budget-slider { position: relative; height: 2rem; margin-inline: .875rem; }
/* DESKTOP (≥md, IW 17.07.2026): dort steuert die Maus präzise — der Slider braucht keinen
   Griff-Raum am Rand, das Histogramm bekommt nur einen Hauch Einzug. Mobil (Sheet/Touch)
   bleibt es bei .875rem für beide. ⚠️ MUSS nach beiden Basis-Regeln stehen: Media Queries
   erhöhen die Spezifität nicht — eine spätere Basis-Regel würde sonst gewinnen. */
@media (min-width: 768px) {
    .cl-fz-budget-hist   { margin-inline: .275rem; }
    .cl-fz-budget-slider { margin-inline: 0; }
}
.cl-fz-budget-slider .cl-fz-budget-track {
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 4px;
    transform: translateY(-50%);
    background: var(--bs-secondary-bg);
    border-radius: 2px;
}
.cl-fz-budget-slider .cl-fz-budget-track-fill {
    position: absolute;
    top: 0;
    height: 100%;
    background: var(--bs-secondary);   /* Grau-Familie der Chips, Button-Rollen IW 06.09.2026 (vorher Primär) */
    border-radius: 2px;
}
.cl-fz-budget-slider input[type="range"] {
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 100%; height: 2rem;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
}
.cl-fz-budget-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 1.375rem; height: 1.375rem;
    border-radius: 50%;
    background: #fff;
    border: 0;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .16);
    cursor: grab;
}
.cl-fz-budget-slider input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 1.375rem; height: 1.375rem;
    border-radius: 50%;
    background: #fff;
    border: 0;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .16);
    cursor: grab;
}

/* ── Dark/Light-Umschalter (layout.php, vorläufige Test-Affordance IW 22.07.2026) ─────────
   Fixed unten links — bewusst OHNE Button-Chrome (kein Kreis/Rahmen/Fläche), nur das nackte
   Duotone-Icon in Textfarbe. Sichtbar ist immer das Icon des erreichbaren Ziels:
   Mond im Light-, Sonne im Dark-Modus. */
.cl-theme-toggle {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 1080;   /* über Sticky-Bars (1030er-Bereich) */
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--bs-body-color);
    font-size: 1.5rem;
    line-height: 1;
}
.cl-theme-toggle .fa-sun { display: none; }
[data-bs-theme=dark] .cl-theme-toggle .fa-sun { display: inline-block; }
[data-bs-theme=dark] .cl-theme-toggle .fa-moon { display: none; }

/* Merklisten-Tooltip der Detailseite (fahrzeuge_merkliste.js): schwebt zentriert unterm
   „Gemerkt"-Button; die Spitze nach oben ist ein gedrehtes Quadrat mit denselben theme-aware
   Flächen/Rahmen wie die Karte selbst. */
[data-cl-fz-merkliste-tipp]::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    width: 10px;
    height: 10px;
    transform: translateX(-50%) rotate(45deg);
    background-color: var(--bs-body-bg);
    border-left: var(--bs-border-width) solid var(--bs-border-color);
    border-top: var(--bs-border-width) solid var(--bs-border-color);
}

/* ── DRUCK: Fahrzeug-Detailseite als „Papier-Exposé" (Drucken-Button in der Kopfzeile). ──
   Interaktives (CTAs, Galerie-Bedienung, Kopfzeile, Sticky-Bar, e-Förder-Rechner) trägt
   d-print-none direkt im Markup (fahrzeug_detail.php) — hier steht nur, was sich mit
   Utilities nicht abbilden lässt: Reihenfolge, Aufklapper, Umbrüche, Farbtreue. iwe 22.07.26 */
@media print {
    /* Exposé-Reihenfolge: Titel → Preisspalte → Foto → Datenbereiche. Im Druck-Viewport
       (< lg) gälte sonst die Mobil-Reihenfolge mit dem Titel NACH der Galerie. Seit CLM #75
       tragen die Zellen eigene Klassen (vorher :has()-Selektoren, pmo/ai 30.10.2026). */
    .cl-fzd .cl-fzd-titel      { order: 0 !important; }
    .cl-fzd .cl-fzd-kaufspalte { order: 1 !important; }
    .cl-fzd .cl-fzd-medien     { order: 2 !important; }
    .cl-fzd .cl-fzd-daten      { order: 3 !important; }

    /* Zugeklappte Bereiche (Details/Ausstattung/Verbrauch/Konditionen) drucken IMMER offen —
       der Leser einer Papierfassung kann nichts aufklappen. Caret dazu ausblenden. */
    .cl-fzd .collapse { display: block !important; height: auto !important; }
    .cl-fzd .cl-caret { display: none; }

    /* Umbruch-Hygiene: Überschriften kleben an ihrem Inhalt; einzelne dl-Zeilen und das
       CO₂-Label bleiben je auf EINER Seite. (Bewusst NICHT auf Panels/Spalten als Ganzes —
       die Preis-Panels tragen seit 22.07.26 die aufgeklappten Konditions-Karten und dürfen
       über Seiten laufen.) */
    .cl-fzd h1, .cl-fzd h2 { break-after: avoid; }
    .cl-fzd dl .col,
    .cl-fzd dl > div,
    .cl-co2label-container { break-inside: avoid; }

    /* Farbtreue: CO₂-Skala und Klassen-Badges sind Pflichtangaben — ihre Farben (und die
       dezenten Preis-Panel-Flächen) auch drucken, wenn der Browser Hintergründe sonst kippt. */
    .cl-co2label-container, .cl-co2label-container *,
    .cl-envkv-klasse,
    .cl-fzd .bg-body-secondary, .cl-fzd .bg-body-tertiary, .cl-fzd .bg-light, .cl-fzd .bg-light-subtle {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ── Modal-Backdrop mit Hintergrund-Blur (IW 23.07.2026): zusätzlich zur Abdunklung wird die
      Seite dahinter weichgezeichnet. WICHTIG: Opazität < 1 deaktiviert backdrop-filter — deshalb
      bleibt die Element-Opazität KONSTANT 1 und ein-/ausgeblendet werden stattdessen
      Hintergrundfarbe + Blur selbst (weiches Fade in beide Richtungen, kein Flash beim
      Schließen). Ältere Browser ignorieren den Filter folgenlos und faden nur die Farbe. ── */
.modal-backdrop {
    --bs-backdrop-opacity: 1;
    background-color: rgba(0, 0, 0, 0);
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
}
.modal-backdrop.fade {
    opacity: 1;
    transition: background-color .15s linear, -webkit-backdrop-filter .15s linear, backdrop-filter .15s linear;
}
.modal-backdrop.show {
    background-color: rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* ── Anfrage-Modal: Erfolgsansicht blendet weich ein (Höhe animiert das JS, fahrzeuge_anfrage.js). ── */
@keyframes cl-fza-einblenden {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.cl-fza-erfolg:not(.d-none) { animation: cl-fza-einblenden .35s ease .15s both; }

/* ── <cluc> — eigener DOM-Knoten um USER-AUTORIERTES HTML (IW 05.08.2026): type="rte" = HugeRTE
   (Lane A), type="cb" = ContentBuilder (Lane B). Unbekannte Elemente sind per Default inline —
   die eine Zeile macht ihn zum neutralen Block-Container (sonst bewusst KEINE Optik). ── */
cluc { display: block; }

/* Direkte (nicht verschachtelte) Listen im RTE-Content: mehr Luft nach oben (IW 05.08.2026). */
cluc[type="rte"] > ul { margin-top: 1rem; }

/* Aufzählungen im RTE-Content: FA-Häkchen statt Standard-Punkte (IW 05.08.2026) — Gewicht folgt
   dem Website-Icon-Stil (--cl-icon-weight), Farbe dem Akzent (Fallback Primary). */
cluc[type="rte"] ul {
    list-style: none;
    padding-left: 0;
}
cluc[type="rte"] ul > li {
    position: relative;
    padding-left: 1.75em;
}
cluc[type="rte"] ul > li::before {
    content: "\f00c";
    font-family: "Font Awesome 7 Pro";
    font-weight: var(--cl-icon-weight, 300);
    position: absolute;
    left: 0;
    color: var(--cl-accent, var(--bs-primary));
}

/* ── Zielgruppen-Umschalter (.cl-segwahl, Apple-Segmented-Control) + Marken-Logo-Filter ──────
   EINE Quelle für Objekt-Liste (content_sektionen.php) und Objekt-Detailseite (objekt_looks.php),
   beide shrink-wrap (inline-grid). Vorher zweimal inline im Look — nach theme.css konsolidiert
   (IW 05.08.2026). */
.cl-segwahl {
    position: relative;
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: var(--bs-tertiary-bg);
    border-radius: var(--bs-border-radius-lg, .5rem);
    padding: .25rem;
}
.cl-segwahl-btn {
    position: relative;
    z-index: 1;
    border: 0;
    background: transparent;
    padding: var(--bs-btn-padding-y, .375rem) var(--bs-btn-padding-x, .75rem);
    font-size: var(--bs-btn-font-size, 1rem);
    line-height: var(--bs-btn-line-height, 1.5);
    border-radius: calc(var(--bs-border-radius-lg, .5rem) - .25rem);
    color: var(--bs-secondary-color);
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    transition: color .2s ease;
}
.cl-segwahl-btn.active { color: #fff; }
.cl-segwahl-thumb {
    position: absolute;
    top: .25rem;
    bottom: .25rem;
    left: .25rem;
    width: calc(50% - .25rem);
    background: var(--cl-accent, var(--bs-primary));
    border-radius: calc(var(--bs-border-radius-lg, .5rem) - .25rem);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    transition: transform .25s ease;
}
.cl-segwahl[data-seg="commercial"] .cl-segwahl-thumb { transform: translateX(100%); }
.cl-markenwahl-btn {
    border: 0;
    background: transparent;
    padding: 0;
    /* 400 statt 500 (IW 07.08.2026): Der Button trägt fast immer ein Logo-Bild — die Gewichtung
       wirkt nur im Textfall (Marke ohne Logo). Dafür einen 500er-Schnitt von jeder Hausschrift zu
       verlangen, wäre unverhältnismäßig; 400 ist Pflichtschnitt und hebt sich vom 300er Fließtext
       ausreichend ab. Schnitt-Politik: 300/400/700 Pflicht, 900 für .cl-fw-black. */
    font-weight: 400;
    transition: opacity .2s ease;
}
.cl-markenwahl-btn img { height: 4rem; width: auto; display: block; }
.cl-markenwahl[data-marke] .cl-markenwahl-btn { opacity: .35; }
.cl-markenwahl[data-marke] .cl-markenwahl-btn.active { opacity: 1; }

/* ── Generischer Scroll-Slider (.cl-scroller, IW 05.08.2026 — Bordmittel statt Slider-Lib):
   horizontaler Scroll-Container mit Snap; mobil nativ wischbar, ab md Pfeil-Buttons
   (theme.js, [data-cl-scroller-wrap]). „safe center": zentriert, solange nichts überläuft.
   Erste Nutzung: Ansprechpartner der Angebots-Detailseite. ── */
.cl-scroller {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    justify-content: safe center;
    scrollbar-width: none;
}
.cl-scroller::-webkit-scrollbar { display: none; }
.cl-scroller > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
}
/* Seitenweises Blättern (Alt-Muster „immer zwei Ansprechpartner"): Slides füllen die Ansicht —
   mobil einer, ab md zwei je Seite (flex-basis = halbe Breite minus halber gap). */
.cl-scroller-2 > * { flex-basis: 100%; }
@media (min-width: 768px) {
    .cl-scroller-2 > * { flex-basis: calc(50% - .75rem); }
}
.cl-scroller-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
    display: none;
}
@media (min-width: 768px) {
    .cl-scroller-btn { display: inline-flex; align-items: center; justify-content: center; }
    .cl-scroller-btn.d-none { display: none; }
}
.cl-scroller-btn:disabled { opacity: .35; }
.cl-scroller-btn[data-cl-scroller-prev] { left: -1.25rem; }
.cl-scroller-btn[data-cl-scroller-next] { right: -1.25rem; }

/* Blätter-Striche des Scroll-Sliders ([data-cl-scroller-dots], theme.js baut die Buttons):
   aktive Seite = breiter Akzent-Strich (Alt-Muster der Ansprechpartner-Sektion). */
.cl-scroller-dots {
    display: flex;
    gap: .5rem;
    justify-content: center;
    align-items: center;
}
.cl-scroller-dot {
    width: 2rem;
    height: .3rem;
    border: 0;
    padding: 0;
    border-radius: .3rem;
    background: var(--bs-secondary-bg);
    transition: width .2s ease, background-color .2s ease;
}
.cl-scroller-dot.active {
    width: 3.5rem;
    background: var(--cl-accent, var(--bs-primary));
}

/* ── Fahrzeugsuchleiste im Primary-Box-Look (Alt-Muster, IW 05.08.2026): der Suchen-Button
   hebt sich per Akzentfarbe von der Primary-Box ab (Fallback: Primary — dann trägt ihn der
   Rahmenkontrast der weißen Felder). ── */
/* Der Suchleisten-Button trägt seit IW 04.09.2026 die echte Variante `btn-accent` (Markup) statt
   `btn-primary` plus Farb-Override an dieser Stelle. Der Override setzte nur Fläche und Rand —
   Hover, Aktiv und Fokusring blieben beim Primary-Blau bzw. sprangen gar nicht an. Die Klasse
   bringt die ganze Zustandsfamilie mit; die Regel hier ist damit entfallen. */

/* ── Slider-Sektion (IW 05.08.2026): Vollbreiten-Variante des generischen Scrollers — jede
   Slide füllt die Ansicht (Scroll-Snap blättert exakt eine Slide weiter).
   Standard-Look „Hero" (Alt-System-Muster, IW 06.08.2026): geteilte Folie — Bild 2/3, Textfläche
   1/3 in Primärfarbe. Der Inhalt liegt in einem NORMALEN Bootstrap-Grid (.row g-0 › .col-*),
   die Klassen hier setzen nur die Proportionen. Unter lg stapeln die Spalten. ── */
.cl-scroller-voll > * { flex-basis: 100%; }

/* ── Scroller mit Pfeilen AUSSEN (IW 21.09.2026, News-Looks „Blättern", Alt-Muster „Aktuelles"): die Pfeile stehen
   ohne Kreis, Rand und Schatten in einer Randspur links/rechts neben den Karten — die Spur ist Innenabstand der
   Hülle, damit nichts über den Container hinausragt (kein horizontaler Seiten-Scroll). Unter md gibt es keine
   Pfeile (nativ wischbar), dort auch keine Spur. ── */
@media (min-width: 768px) {
    .cl-scroller-aussen { padding-left: 3rem; padding-right: 3rem; }
    /* Volle Höhe der Hülle als Klickfläche (IW 21.09.2026): top/transform des Basis-Buttons aufgehoben. */
    .cl-scroller-aussen .cl-scroller-btn {
        top: 0;
        bottom: 0;
        height: 100%;
        transform: none;
        width: 3rem;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: var(--bs-body-color);
    }
    .cl-scroller-aussen .cl-scroller-btn[data-cl-scroller-prev] { left: 0; }
    .cl-scroller-aussen .cl-scroller-btn[data-cl-scroller-next] { right: 0; }
    /* Hover (IW 21.09.2026, Alt-Muster): keine Farbe, der Pfeil rückt animiert in seine Richtung. */
    .cl-scroller-aussen .cl-scroller-btn > i { transition: transform .25s ease; }
    .cl-scroller-aussen .cl-scroller-btn[data-cl-scroller-prev]:hover > i { transform: translateX(-.4rem); }
    .cl-scroller-aussen .cl-scroller-btn[data-cl-scroller-next]:hover > i { transform: translateX(.4rem); }
    @media (prefers-reduced-motion: reduce) {
        .cl-scroller-aussen .cl-scroller-btn > i { transition: none; }
    }
}

/* Punkte statt Striche (IW 21.09.2026, Alt-Muster „Aktuelles"): inaktiv runde Punkte, aktiv ein Balken mit
   sechsfacher Breite — nur bei den Blättern-Looks (.cl-scroller-aussen), Slider/Ansprechpartner behalten die Striche. */
.cl-scroller-aussen .cl-scroller-dot {
    width: .5rem;
    height: .5rem;
    border-radius: .25rem;
}
.cl-scroller-aussen .cl-scroller-dot.active { width: 3rem; }   /* 6× (IW) */


/* ── Fester Bildrahmen 16:9 (IW 21.09.2026, News-Raster „Standard"): das <img> darin füllt den Rahmen per object-fit:
   cover — Karten einer Zeile bleiben bündig, egal welches Format angeliefert wurde. Bewusst KEIN Bootstrap .ratio:
   dessen `> *`-Regel würde auch das KI-Badge (Geschwister des Bilds) auf volle Fläche ziehen. ── */
.cl-bild-16x9 {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.cl-bild-16x9 > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;   /* schlägt h-auto der Bildklasse */
    object-fit: cover;
}

/* ── News-Look „Blättern" (IW 21.09.2026, Alt-Muster „Aktuelles"): quadratische Bildkacheln, drei je Ansicht
   ab lg (zwei ab md, eine mobil) im generischen Scroll-Slider; Titel/Untertitel im Primärfarb-Verlauf am
   unteren Rand, Pfeil-Kreis oben rechts. Markup: _web_objekt_news_kachel_html (objekt_looks.php). ── */
.cl-scroller-3 > * { flex-basis: 100%; }
@media (min-width: 768px) {
    .cl-scroller-3 > * { flex-basis: calc(50% - .75rem); }
}
@media (min-width: 992px) {
    .cl-scroller-3 > * { flex-basis: calc(33.3333% - 1rem); }
}
.cl-news-kachel-link {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--bs-secondary-bg);
}
.cl-news-kachel-bild {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.cl-news-kachel-link:hover .cl-news-kachel-bild { transform: scale(1.04); }
.cl-news-kachel-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3rem 1.25rem 1.25rem;
    background: linear-gradient(to top, rgba(var(--bs-primary-rgb), .95) 0%, rgba(var(--bs-primary-rgb), .75) 55%, rgba(var(--bs-primary-rgb), 0) 100%);
}
/* Pfeil-Icon in der Ecke (Alt-Muster: nur das Icon, kein Hover — IW 21.09.2026). */
.cl-news-kachel-pfeil { position: absolute; top: 1rem; right: 1rem; }
.cl-slide {
    position: relative;
    overflow: hidden;
}
/* Mobil (gestapelt): das BILD trägt das Seitenverhältnis, die Folie wächst mit ihrem Inhalt —
   alle Folien werden über den Flex-Container ohnehin gleich hoch. */
.cl-slide-bild { aspect-ratio: 4 / 2; position: relative; }
/* Fußnoten-Badge (pmo/ai 15.10.2026, CLM-Trello #24): Slide ohne Titel/Text → die seitenweit vergebene
   Fußnotennummer liegt als kleine Marke in der Bildecke (Text-Slides tragen den Verweis im Text). */
.cl-slide-fn {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    z-index: 2;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 .45rem;
    border-radius: 50rem;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: .8rem;
    line-height: 1.75rem;
    text-align: center;
}
.cl-slide-fn sup { top: 0; font-size: inherit; }
.cl-slide-bild img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (min-width: 992px) {
    /* Ab lg liegen Bild und Text nebeneinander → die FOLIE gibt das Format vor, das Bild füllt. */
    .cl-slide { aspect-ratio: 16 / 5; }
    .cl-slide-bild { aspect-ratio: auto; height: 100%; }
    /* Abwechselnde Leserichtung (IW 06.08.2026): jede ZWEITE Folie spiegelt die Aufteilung —
       Textfläche links, Bild rechts. Rein über die Position im Slider, ohne Feld je Slide; das
       Markup bleibt identisch (row-reverse dreht nur die Anzeigereihenfolge, nicht die DOM- bzw.
       Vorlesereihenfolge). Overlay-Folien haben keine .row und bleiben unberührt.
       Mobil bewusst NICHT gespiegelt: gestapelt gehört das Bild immer nach oben. */
    .cl-slide:nth-child(even) > .row { flex-direction: row-reverse; }
}
/* Slider-Stil „Stapeln" (Sektionsfeld `look`, IW 31.08.2026 — Alt-Startseiten-Muster): die Folien
   untereinander, jede ZWANGSWEISE über die volle Seitenbreite. Das Slide-Bild liegt als stark
   verwischter Zeilen-Hintergrund (.cl-slide-ambi + Lesbarkeitsschicht via .cl-slide-ambilight::after)
   über die ganze Breite, Text- und Bildbox stehen im .container-Raster darüber; die Textfläche ist
   transparent, so wirkt die Folie seitenbreit. Das Format trägt hier der CONTAINER (nicht die
   Folie), damit die Höhe der Rasterbreite folgt wie im Altsystem. Zickzack aus der nth-child-Regel
   darüber; Blätter-Striche und Autoplay gibt es hier nicht. */
.cl-slider-stapel {
    display: flex;
    flex-direction: column;
}
.cl-slide-stapel { width: 100%; }
.cl-slide-stapel > .container {
    position: relative;
    z-index: 2;   /* über der dunklen ::after-Schicht des Ambilights */
}
.cl-slide-stapel .cl-slide-text { background: transparent; }
/* MOBIL randlos (IW 04.09.2026): Unter lg stehen Bild und Text untereinander — dort soll das Bild
   die volle Gerätebreite nutzen statt in der Rasterspalte zu schweben (im Screenshot blieb links
   und rechts ein sichtbarer Streifen stehen). Drei Polster liegen zwischen Bild und Geräterand:
   die max-width + das Padding des Containers, der negative Zeilen-Margin und das Spalten-Padding.
   Container-Padding und Zeilen-Margin heben sich normalerweise auf, deshalb werden hier BEIDE auf
   0 gesetzt — sonst zöge der negative Margin die Zeile über den Rand hinaus. Der TEXT behält sein
   `p-4`: randloser Fließtext wäre unlesbar. Ab lg gilt wieder das normale Raster (Block unten). */
@media (max-width: 991.98px) {
    .cl-slide-stapel > .container { max-width: none; padding-inline: 0; }
    .cl-slide-stapel > .container > .row { margin-inline: 0; }
    .cl-slide-stapel .cl-slide-bild { padding-inline: 0; }
}
@media (min-width: 992px) {
    .cl-slide-stapel { aspect-ratio: auto; }
    /* BREITE der Stapel-Folie (IW 04.09.2026): Das Raster darf über die normale Container-Breite
       hinauswachsen — im Altsystem lief die Slide-Zeile als `.container-fluid` bis an den
       Fensterrand, wodurch Text und Bild „großzügiger" wirkten als bei uns. Statt den Container
       ganz aufzugeben (dann verlöre der Text seine Lesekante) bekommt er eine EIGENE, größere
       Höchstbreite: Bis dahin füllt er das Fenster, darüber steht er ruhig in der Mitte.
       Der Wert ist ein Token — je Website nachjustierbar, z.B. 100% für den vollen Alt-Effekt
       oder 1320px für „wie der normale Container". `!important`, weil Bootstraps `.container`
       seine Breakpoint-max-width mit gleicher Spezifität setzt und je nach Ladereihenfolge gewinnt. */
    .cl-slide-stapel > .container { max-width: var(--cl-slide-stapel-breite) !important; }
    /* FORMAT der Folie (IW 04.09.2026): Bei voller Breite (1600px) ergibt 32/9 genau die 450px
       Höhe, die das Altsystem seiner Bildbox als FESTE Höhe gab — dort wuchs die Folie also nie
       mit dem Monitor, bei uns folgt sie der Rasterbreite. Vorher 16/5 = 500px, was die Fotos
       merklich weniger flach wirken ließ. Ebenfalls ein Token, damit beide Regler (Breite und
       Format) gegeneinander justierbar sind. */
    .cl-slide-stapel > .container { aspect-ratio: var(--cl-slide-stapel-format); }
    /* Spiegelung jeder zweiten Folie — beim Stapeln liegt die .row im .container, die allgemeine
       `.cl-slide:nth-child(even) > .row`-Regel darüber trifft hier deshalb nicht. */
    .cl-slide-stapel:nth-child(even) > .container > .row { flex-direction: row-reverse; }
    /* Raster-Bündigkeit (IW 31.08.2026): die Textbox hat auf ihrer AUSSENSEITE kein Polster, der
       Text steht bündig mit der Container-Kante (ungerade Folie: Text links, gerade: rechts —
       nth-child wie die Spiegelung darüber). !important, weil p-4/p-xl-5 selbst !important sind. */
    .cl-slide-stapel:nth-child(odd)  .cl-slide-text { padding-left: 0 !important; }
    .cl-slide-stapel:nth-child(even) .cl-slide-text { padding-right: 0 !important; }
    /* Der „Versatz" gegenüber einer mittigen Aufteilung entsteht allein aus Text 4/12 bündig außen
       + Bild 8/12 bis zur Container-Kante — ein zusätzlicher Bild-Rand (Überstand oder freie
       Rasterspalte) wurde probiert und verworfen (IW 31.08.2026: „ohne sieht es richtig aus"). */
}
/* ── Hintergrund „Ambilight" (Slide-Feld `split_bg`, IW 06.08.2026): die Textfläche trägt statt
   einer Farbrolle eine unscharf hochskalierte Kopie des Slide-Bildes, die dunkle Schicht darüber
   sichert den Kontrast. Bewusst OHNE Farbberechnung — keine Palette-Extraktion, kein Client-
   Rechenaufwand, kein Farbsprung nach dem Bildladen. ── */
.cl-slide-ambilight { position: relative; overflow: hidden; }
.cl-slide-ambi {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.cl-slide-ambi img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(2.5rem) saturate(1.6);
    transform: scale(1.35);   /* zieht die weichgezeichneten Ränder aus dem Bild heraus */
}
.cl-slide-ambilight::after {   /* Lesbarkeitsschicht zwischen Unschärfe und Text */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, .45);
}
.cl-slide-text-inhalt { position: relative; z-index: 2; }

/* ── PKW-EnVKV-Streifen unter der Slide (Slide-Feld `envkv`, pmo/ai 29.10.2026, CLM-Trello #68): schmales Band
   direkt unter dem Banner, hinterlegt mit dem Ambilight des Slide-Bildes (statt der früheren weißen Fläche).
   Blättern: Hat EINE Slide EnVKV-Angaben, tragen ALLE Folien den Streifen — die Folie wird zur Spalte aus
   .cl-slide-koerper (bisheriger Inhalt) und Streifen. Mobil (gestapelt) füllt der KÖRPER die über den Scroller
   angeglichene Folienhöhe — wie zuvor die Folie selbst (h-100 an Zeile/Bild) — und der Streifen bleibt schmal; ab lg
   trägt der Körper das feste Folien-Format und der STREIFEN nimmt die Resthöhe, damit Folien mit kürzerem oder ohne
   Text bündig abschließen (Code-Review pmo/ai 29.10.2026). Stapeln: Text-Container unter dem Raster. ── */
.cl-slide-mit-envkv { display: flex; flex-direction: column; }
.cl-slide-koerper {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.cl-slide-koerper > .row,
.cl-slide-koerper > .cl-slide-bild { flex: 1 1 auto; }
.cl-slide-envkv {
    flex: 0 0 auto;
    padding: .5rem 1rem;
    font-size: .8rem;
    line-height: 1.5;
    text-align: center;
}
.cl-slide-stapel > .container.cl-slide-envkv { aspect-ratio: auto; padding-block: 0 1rem; }
@media (max-width: 991.98px) {
    .cl-slide-stapel > .container.cl-slide-envkv { padding-inline: 1rem; }
}
@media (min-width: 992px) {
    /* Das Format wandert von der Folie auf den Körper — sonst schnitte der Streifen ins Bild. overflow: hidden wie
       zuvor an der Folie: hebt die inhaltsbasierte Mindesthöhe von aspect-ratio auf, viel Text sprengt das Format nicht. */
    .cl-slide.cl-slide-mit-envkv { aspect-ratio: auto; }
    .cl-slide-koerper { flex: 0 0 auto; aspect-ratio: 16 / 5; overflow: hidden; }
    .cl-slide-envkv { flex: 1 0 auto; }
    .cl-slide:nth-child(even) > .cl-slide-koerper > .row { flex-direction: row-reverse; }
}

/* Stil „Overlay" (Slide-Feld `stil`): Text auf dem Bild statt daneben — Verlauf von unten, damit
   heller Bildinhalt die Schrift nicht schluckt. Der .container ist Flex-Item; ohne die zwei Zeilen
   richtete er sich nach seinem Inhalt statt nach der Folienbreite und das Grid darin liefe ins
   Leere (IW 06.08.2026). */
.cl-slide-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    padding: 3rem;
    background: linear-gradient(to top, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, .25) 45%, transparent 70%);
}
.cl-slide-overlay > .container {
    flex: 1 1 auto;
    min-width: 0;
}

/* Sektions-Hintergrundbild (Rahmen-Option „Hintergrund" = Bild, IW 06.08.2026): das Bild selbst
   kommt als Inline-Style (dynamischer Wert), die statischen Regeln stehen hier. Die dunkle
   Schicht sichert die Lesbarkeit — ohne sie steht weißer Text auf beliebigen Motiven. */
.cl-section-bild {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.cl-section-bild::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
}
.cl-section-bild > * { position: relative; }

/* ── Vertikale Sektions-Abstände (Rahmen-Optionen „Innen-/Außenabstand oben/unten") ──────────
   FLUID statt fixer Stufen: jede Stufe wächst per clamp() mit der Fensterbreite zwischen einem
   Minimum (Handy) und einem Maximum (großer Schirm) — deshalb braucht es weder Breakpoint-Klassen
   noch Media-Queries. Bewusst eigene Skala statt Bootstraps py-*: die ist fix und endet bei py-5,
   und Sektionen sind das Layout-Gerüst der Seite. Der Mittelwert (5vw usw.) bestimmt, ab welcher
   Fensterbreite das Maximum erreicht ist.

   OBEN UND UNTEN GETRENNT (IW 06.08.2026): vier Achsen — pt/pb (innen, padding) und mt/mb (außen,
   margin). Die Stufenwerte stehen EINMAL als Tokens, die Klassen greifen nur darauf zu; sonst
   stünde dieselbe clamp()-Leiter viermal da und liefe beim nächsten Feinschliff auseinander. ── */
:root {
    --cl-section-space-1: clamp(1rem,   3vw,  1.5rem);   /* Klein        */
    --cl-section-space-2: clamp(1.5rem, 5vw,  3rem);     /* Normal       */
    --cl-section-space-3: clamp(2.5rem, 8vw,  6rem);     /* Groß         */
    --cl-section-space-4: clamp(3.5rem, 11vw, 9rem);     /* Sehr groß    */
    --cl-section-space-5: clamp(4.5rem, 14vw, 12rem);    /* Extrem groß  */
}

/* INNEN (padding) — liegt INNERHALB einer Farbfläche/eines Bildes. Stufe 0 ist eine echte Klasse:
   die Hüllen hatten früher ein festes py-4, das hier sicher überschrieben werden muss. */
.cl-section-pt-0 { padding-block-start: 0; }
.cl-section-pb-0 { padding-block-end:   0; }
.cl-section-pt-1 { padding-block-start: var(--cl-section-space-1); }
.cl-section-pb-1 { padding-block-end:   var(--cl-section-space-1); }
.cl-section-pt-2 { padding-block-start: var(--cl-section-space-2); }
.cl-section-pb-2 { padding-block-end:   var(--cl-section-space-2); }
.cl-section-pt-3 { padding-block-start: var(--cl-section-space-3); }
.cl-section-pb-3 { padding-block-end:   var(--cl-section-space-3); }
.cl-section-pt-4 { padding-block-start: var(--cl-section-space-4); }
.cl-section-pb-4 { padding-block-end:   var(--cl-section-space-4); }
.cl-section-pt-5 { padding-block-start: var(--cl-section-space-5); }
.cl-section-pb-5 { padding-block-end:   var(--cl-section-space-5); }
/* SEITLICH (IW 09.09.2026, Rahmen-Feld `abstand_seiten`): liegt am CONTAINER der Sektion, nicht an der
   Section — bei Breite „Voll" das Polster des sonst randlosen Bands (Stufe „ohne" = px-0 cl-section-randlos,
   s. sektion_container_klasse), bei „Spalte" ersetzt es den halben Bootstrap-Gutter. Gleiche fluide Skala. */
.cl-section-px-1 { padding-inline: var(--cl-section-space-1); }
.cl-section-px-2 { padding-inline: var(--cl-section-space-2); }
.cl-section-px-3 { padding-inline: var(--cl-section-space-3); }
.cl-section-px-4 { padding-inline: var(--cl-section-space-4); }
.cl-section-px-5 { padding-inline: var(--cl-section-space-5); }

/* Sektionsbreite „Full-Width" = RANDLOS (Rahmen-Option, IW 06.08.2026): Der Inhalt läuft bis an die
   Fensterkante. `px-0` am Container reicht dafür NICHT — die `.row` bringt ihren Grid-Gutter mit
   (negative Seiten-Margins + Spalten-Padding) und ragt sonst über den Viewport hinaus: ein
   horizontaler Scrollbalken, und alles wirkt zu breit.
   Der Gutter wird deshalb an JEDER Reihe der Sektion auf 0 gesetzt (Nachfahren-Selektor) —
   unabhängig davon, wie viele Wrapper dazwischenliegen: Lane B schiebt `cluc` UND
   `div.cl-builder-content` ein, ein Kind-Selektor griff daran vorbei. Am Container allein genügt
   es NICHT: Bootstrap definiert `--bs-gutter-x` auf der `.row` selbst, die eigene Definition
   schlägt jeden geerbten Wert.
   Das gilt AUCH für verschachtelte Reihen: Bekämen die ihren Gutter zurück, ragten ihre negativen
   Margins heraus — die umgebende Spalte hat ja kein Polster mehr, und der Balken wäre wieder da.
   Wer innerhalb einer randlosen Sektion Spaltenabstände braucht, setzt sie im Inhalt per Utility
   (`g-3` an der inneren Reihe). */
.cl-section-randlos .row { --bs-gutter-x: 0; }

/* AUSSEN (margin) — liegt AUSSERHALB einer Farbfläche und trennt zwei Sektionen sichtbar.
   Stufe 0 bekommt hier bewusst KEINE Klasse: 0 ist der Default, und eine `margin-block-start: 0`
   würde ein bewusst gesetztes `margin-block-end` der Nachbarsektion nicht kollabieren lassen.
   Benachbarte Margins kollabieren (CSS-Normalverhalten): zwischen zwei Sektionen gilt der GRÖSSERE
   der beiden Werte, nicht deren Summe. */
.cl-section-mt-1 { margin-block-start: var(--cl-section-space-1); }
.cl-section-mb-1 { margin-block-end:   var(--cl-section-space-1); }
.cl-section-mt-2 { margin-block-start: var(--cl-section-space-2); }
.cl-section-mb-2 { margin-block-end:   var(--cl-section-space-2); }
.cl-section-mt-3 { margin-block-start: var(--cl-section-space-3); }
.cl-section-mb-3 { margin-block-end:   var(--cl-section-space-3); }
.cl-section-mt-4 { margin-block-start: var(--cl-section-space-4); }
.cl-section-mb-4 { margin-block-end:   var(--cl-section-space-4); }
.cl-section-mt-5 { margin-block-start: var(--cl-section-space-5); }
.cl-section-mb-5 { margin-block-end:   var(--cl-section-space-5); }

/* ── Theme-Probe (Redaktions-Experiment, theme_probe.js — IW 07.08.2026): fixes Panel links mit
   den Reglern der CMS-Themeeinstellungen; setzt Tokens NUR live im Browser, speichert nichts.
   z-index über dem sticky Chrome; schmal + eigenständig scrollbar. ── */
.cl-theme-probe {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 14rem;
    z-index: 1100;
    display: none;
    flex-direction: column;
    overflow-y: auto;
    /* Frosted Glass (IW 07.08.2026, aus dem Browser übernommen): halbtransparent + Blur —
       so bleibt die Website hinter dem Panel sichtbar, was beim Farbe-Testen genau der Punkt ist. */
    background: #ffffff38;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    box-shadow: var(--bs-box-shadow);
    padding: 1rem;
    font-size: .85rem;
}
.cl-theme-probe.is-open { display: flex; }
.cl-theme-probe-kopf {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
}
.cl-theme-probe-kopf .btn-close { margin-left: auto; }
.cl-theme-probe-titel {
    font-weight: 700;
    margin: .75rem 0 .25rem;
    padding-top: .5rem;
}
.cl-theme-probe-zeile {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .2rem 0;
    cursor: pointer;
}
.cl-theme-probe-label { flex: 1 1 auto; }
.cl-theme-probe-zeile input[type="color"] {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: .25rem;
    background: none;
    flex: 0 0 auto;
}
.cl-theme-probe-zeile-slider { flex-wrap: wrap; }
.cl-theme-probe-slider {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 100%;
}
.cl-theme-probe-slider output {
    min-width: 3.5rem;
    text-align: right;
    font-family: var(--bs-font-monospace);
    font-size: .75rem;
    color: var(--bs-secondary-color);
}
.cl-theme-probe-fuss { margin-top: 1rem; }
/* Auslöser-Button: violett = Design-Werkzeug (jede Affordance-Variante bringt ihre eigene
   Farbe mit — ohne wäre der Button weiß auf hell und unsichtbar). is-active = heller Ring. */
.cl-theme-probe-toggle { background-color: var(--bs-purple, #6f42c1); }
.cl-theme-probe-toggle.is-active { box-shadow: 0 0 0 3px rgba(255, 255, 255, .6), 0 .25rem .75rem rgba(0, 0, 0, .25); }

/* ── Bewertungsbox: eingebettetes CLVS-Siegel deckeln (IW 26.08.2026) — das Widget-JS setzt
   maxWidth/maxHeight (600×814) als INLINE-Style aufs <clvs>-Element, deshalb !important.
   max-width folgt dem Seitenverhältnis des Widgets (600/814), damit aspect-ratio nicht gegen
   eine zu große Breite verliert. ── */
.cl-bewertungsbox clvs {
    display: block;
    margin: auto;   /* zentriert in der Siegel-Spalte (margin wirkt erst mit display:block) */
    /* FESTE Breite statt nur max-width (IW 26.08.2026): die Siegel-Spalte ist col-md-auto und
       misst die intrinsische Breite — ohne feste Breite kollabiert sie, bevor das Widget-JS
       seine Maße setzt. 221px = 300px Höhe im Widget-Seitenverhältnis (600/814). */
    width: calc(300px * 600 / 814) !important;
    max-width: 100% !important;
    max-height: 300px !important;
}

/* ── Bewertungsliste: Initialen-Avatar der Zitat-Karten (IW 26.08.2026) — Farbe/Kontrast über
   Bootstraps text-bg-primary (folgt dem Website-Theme), hier nur Form und Größe. ── */
.cl-bewertung-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-weight: 700;
    font-size: .875rem;
    flex: 0 0 auto;
}

/* ── KI-Transparenz-Badge (IW 31.08.2026 — Neusystem-Fassung der Alt-`.ai-disclosure`-Badges,
   Grafiken 1:1 aus templates_php/31/assets/css/global.css): hängt am MEDIUM (clm_medien.
   ki_kennzeichnung, Registry MEDIEN_KI_KENNZEICHNUNG) und wird von web_ki_badge_html() als leeres
   Geschwister-Element HINTER dem <img> ausgegeben (objekt_looks.php _objekt_bild_html). Den
   Bezugsrahmen bekommt der Bild-Container automatisch per :has() — so bleiben die 16 Aufrufer
   unangetastet; sitzt das <img> schmaler als sein Container (mx-auto), klebt das Badge an der
   Container-Ecke (bewusst hingenommen). Größen: klein = Karten/Listen (Alt „-sm"), groß im Slider. ── */
/* Absolut positionierte Deko-Container (Ambilight-/Zeilen-Hintergrund) bleiben außen vor — ein
   `position: relative` würde sie in den Fluss holen (IW-Fund 31.08.2026: Slide-Hintergrund schob
   die Folie nach unten). Die Renderer geben dort ohnehin kein Badge aus ($mitBadge=false). */
:has(> .cl-ki-badge):not(.position-absolute):not(.position-fixed):not(.cl-slide-ambi) { position: relative; }
.cl-ki-badge {
    position: absolute;
    bottom: .5rem;
    right: .5rem;
    display: block;
    width: 1.25rem;               /* Symbol: Kreis, Breite = Höhe */
    aspect-ratio: 1 / 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 566.93 566.93%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M272.03,100.72c100.92,0,182.74,81.82,182.74,182.75s-81.82,182.74-182.74,182.74-182.75-81.82-182.75-182.74,81.82-182.75,182.75-182.75%22/%3E%3Cg%3E%3Cpath fill=%22%23fff%22 d=%22M170.79,353.74c-1.08,0-2.05-.43-2.92-1.31-.88-.87-1.31-1.84-1.31-2.92,0-.67.07-1.27.2-1.81l47.34-129.32c.4-1.48,1.24-2.79,2.52-3.93,1.27-1.14,3.05-1.71,5.34-1.71h29.81c2.28,0,4.06.57,5.34,1.71,1.27,1.14,2.11,2.45,2.52,3.93l47.14,129.32c.27.54.4,1.14.4,1.81,0,1.08-.44,2.05-1.31,2.92s-1.91,1.31-3.12,1.31h-24.78c-2.01,0-3.52-.5-4.53-1.51-1.01-1.01-1.65-1.91-1.91-2.72l-7.86-20.55h-53.78l-7.65,20.55c-.27.81-.88,1.71-1.81,2.72-.94,1.01-2.55,1.51-4.83,1.51h-24.78ZM218.13,299.96h37.47l-18.93-53.18-18.53,53.18Z%22/%3E%3Cpath fill=%22%23fff%22 d=%22M328.11,353.74c-1.48,0-2.69-.47-3.63-1.41-.94-.94-1.41-2.15-1.41-3.63v-130.93c0-1.48.47-2.68,1.41-3.63s2.15-1.41,3.63-1.41h26.99c1.48,0,2.68.47,3.63,1.41.94.94,1.41,2.15,1.41,3.63v130.93c0,1.48-.47,2.69-1.41,3.63-.94.94-2.15,1.41-3.63,1.41h-26.99Z%22/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
}
.cl-ki-badge-generiert {
    width: 5rem;
    aspect-ratio: 1789.84 / 566.93;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1789.84 566.93%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M352.84,410.77h1093.16c85.55,0,145.54-59.94,145.54-133.2h0c0-73.27-59.99-133.21-145.54-133.21H352.84c-85.55,0-145.54,59.94-145.54,133.2h0c0,73.26,64.99,133.2,150.54,133.2%22/%3E%3Cg%3E%3Cpath fill=%22%23fff%22 d=%22M326.09,341c-.98,0-1.87-.4-2.66-1.19-.8-.8-1.19-1.68-1.19-2.66,0-.61.06-1.16.18-1.65l43.18-117.96c.37-1.35,1.13-2.54,2.3-3.58,1.16-1.04,2.79-1.56,4.87-1.56h27.19c2.08,0,3.7.52,4.87,1.56,1.16,1.04,1.93,2.24,2.3,3.58l42.99,117.96c.24.49.37,1.04.37,1.65,0,.98-.4,1.87-1.19,2.66-.8.8-1.75,1.19-2.85,1.19h-22.6c-1.84,0-3.22-.46-4.13-1.38-.92-.92-1.5-1.75-1.75-2.48l-7.17-18.74h-49.06l-6.98,18.74c-.25.73-.8,1.56-1.65,2.48-.86.92-2.33,1.38-4.41,1.38h-22.6ZM369.27,291.94h34.18l-17.27-48.51-16.9,48.51Z%22/%3E%3Cpath fill=%22%23fff%22 d=%22M469.58,341c-1.35,0-2.45-.43-3.31-1.29-.86-.86-1.29-1.96-1.29-3.31v-119.43c0-1.35.43-2.45,1.29-3.31s1.96-1.29,3.31-1.29h24.62c1.35,0,2.45.43,3.31,1.29.86.86,1.29,1.96,1.29,3.31v119.43c0,1.35-.43,2.45-1.29,3.31s-1.96,1.29-3.31,1.29h-24.62Z%22/%3E%3C/g%3E%3Cg%3E%3Cpath fill=%22%23fff%22 d=%22M639.25,325.87c-8.43,0-15.63-1.41-21.59-4.24-5.97-2.83-10.58-6.95-13.86-12.38-3.27-5.43-5.04-11.99-5.31-19.71-.09-3.85-.13-7.98-.13-12.38s.04-8.56.13-12.51c.27-7.53,2.04-13.94,5.31-19.24,3.27-5.29,7.94-9.35,13.99-12.17,6.05-2.83,13.2-4.24,21.46-4.24,6.64,0,12.46.85,17.49,2.56,5.02,1.7,9.24,3.92,12.65,6.66,3.41,2.74,6.01,5.72,7.8,8.95,1.79,3.23,2.74,6.32,2.83,9.28,0,.81-.27,1.5-.81,2.08-.54.58-1.26.87-2.15.87h-16.68c-.9,0-1.59-.18-2.08-.54-.49-.36-.92-.9-1.28-1.61-.63-1.61-1.64-3.25-3.03-4.91-1.39-1.66-3.25-3.07-5.58-4.24-2.33-1.16-5.38-1.75-9.15-1.75-5.65,0-10.11,1.48-13.39,4.44-3.27,2.96-5.04,7.8-5.31,14.53-.27,7.71-.27,15.56,0,23.54.27,7,2.08,12.02,5.45,15.07,3.36,3.05,7.87,4.57,13.52,4.57,3.68,0,6.97-.65,9.89-1.95,2.91-1.3,5.22-3.34,6.93-6.12,1.7-2.78,2.56-6.32,2.56-10.63v-3.36h-14.66c-.9,0-1.66-.34-2.29-1.01-.63-.67-.94-1.46-.94-2.35v-8.61c0-.99.31-1.79.94-2.42.63-.63,1.39-.94,2.29-.94h32.96c.99,0,1.79.31,2.42.94.63.63.94,1.44.94,2.42v14.66c0,7.71-1.68,14.31-5.04,19.77-3.36,5.47-8.16,9.66-14.39,12.58-6.23,2.92-13.52,4.37-21.86,4.37Z%22/%3E%3Cpath fill=%22%23fff%22 d=%22M710.73,324.52c-.99,0-1.79-.31-2.42-.94-.63-.63-.94-1.43-.94-2.42v-87.44c0-.99.31-1.79.94-2.42.63-.63,1.43-.94,2.42-.94h60.94c.99,0,1.79.31,2.42.94.63.63.94,1.44.94,2.42v10.76c0,.9-.32,1.66-.94,2.29-.63.63-1.44.94-2.42.94h-43.59v21.12h40.63c.99,0,1.79.32,2.42.94.63.63.94,1.44.94,2.42v9.95c0,.9-.32,1.66-.94,2.29s-1.44.94-2.42.94h-40.63v21.79h44.66c.99,0,1.79.32,2.42.94.63.63.94,1.44.94,2.42v10.63c0,.99-.32,1.8-.94,2.42s-1.44.94-2.42.94h-62.02Z%22/%3E%3Cpath fill=%22%23fff%22 d=%22M805.88,324.52c-.99,0-1.79-.31-2.42-.94-.63-.63-.94-1.43-.94-2.42v-87.44c0-.99.31-1.79.94-2.42.63-.63,1.43-.94,2.42-.94h12.24c1.34,0,2.33.31,2.96.94.63.63,1.03,1.12,1.21,1.48l35.92,56.1v-55.15c0-.99.31-1.79.94-2.42.63-.63,1.39-.94,2.29-.94h13.72c.99,0,1.79.31,2.42.94.63.63.94,1.44.94,2.42v87.44c0,.9-.32,1.68-.94,2.35-.63.67-1.44,1.01-2.42,1.01h-12.38c-1.35,0-2.31-.34-2.89-1.01-.58-.67-1.01-1.14-1.28-1.41l-35.78-54.35v53.41c0,.99-.32,1.8-.94,2.42s-1.44.94-2.42.94h-13.59Z%22/%3E%3Cpath fill=%22%23fff%22 d=%22M912.19,324.52c-.99,0-1.79-.31-2.42-.94-.63-.63-.94-1.43-.94-2.42v-87.44c0-.99.31-1.79.94-2.42.63-.63,1.43-.94,2.42-.94h60.94c.99,0,1.79.31,2.42.94.63.63.94,1.44.94,2.42v10.76c0,.9-.32,1.66-.94,2.29-.63.63-1.44.94-2.42.94h-43.59v21.12h40.63c.99,0,1.79.32,2.42.94.63.63.94,1.44.94,2.42v9.95c0,.9-.32,1.66-.94,2.29s-1.44.94-2.42.94h-40.63v21.79h44.66c.99,0,1.79.32,2.42.94.63.63.94,1.44.94,2.42v10.63c0,.99-.32,1.8-.94,2.42s-1.44.94-2.42.94h-62.02Z%22/%3E%3Cpath fill=%22%23fff%22 d=%22M1007.35,324.52c-.99,0-1.79-.31-2.42-.94-.63-.63-.94-1.43-.94-2.42v-87.44c0-.99.31-1.79.94-2.42.63-.63,1.43-.94,2.42-.94h35.65c11.21,0,20.04,2.58,26.5,7.73,6.46,5.16,9.69,12.58,9.69,22.26,0,6.55-1.57,12.02-4.71,16.41-3.14,4.4-7.35,7.67-12.65,9.82l18.97,33.63c.27.54.4,1.03.4,1.48,0,.72-.27,1.37-.81,1.95-.54.58-1.21.87-2.02.87h-14.93c-1.61,0-2.82-.42-3.63-1.28-.81-.85-1.39-1.64-1.75-2.35l-16.41-30.81h-16.28v31.07c0,.99-.32,1.8-.94,2.42s-1.44.94-2.42.94h-14.66ZM1025.38,273h17.22c4.93,0,8.59-1.12,10.96-3.36,2.38-2.24,3.56-5.38,3.56-9.42s-1.17-7.22-3.5-9.55c-2.33-2.33-6.01-3.5-11.03-3.5h-17.22v25.83Z%22/%3E%3Cpath fill=%22%23fff%22 d=%22M1100.62,324.52c-.81,0-1.48-.29-2.02-.87-.54-.58-.81-1.23-.81-1.95,0-.45.04-.85.13-1.21l32.02-86.5c.27-.99.81-1.84,1.61-2.56.81-.72,1.93-1.08,3.36-1.08h17.22c1.43,0,2.56.36,3.36,1.08.81.72,1.35,1.57,1.61,2.56l32.02,86.5c.09.36.13.76.13,1.21,0,.72-.27,1.37-.81,1.95-.54.58-1.21.87-2.02.87h-13.99c-1.35,0-2.33-.31-2.96-.94-.63-.63-1.03-1.21-1.21-1.75l-5.78-15.07h-37.94l-5.78,15.07c-.18.54-.58,1.12-1.21,1.75-.63.63-1.61.94-2.96.94h-13.99ZM1129.54,289.41h27.85l-13.86-38.74-13.99,38.74Z%22/%3E%3Cpath fill=%22%23fff%22 d=%22M1225.64,324.52c-.99,0-1.79-.31-2.42-.94-.63-.63-.94-1.43-.94-2.42v-72.1h-24.48c-.9,0-1.66-.31-2.29-.94-.63-.63-.94-1.39-.94-2.29v-12.11c0-.99.31-1.79.94-2.42.63-.63,1.39-.94,2.29-.94h70.49c.99,0,1.79.31,2.42.94.63.63.94,1.44.94,2.42v12.11c0,.9-.32,1.66-.94,2.29-.63.63-1.44.94-2.42.94h-24.35v72.1c0,.99-.32,1.8-.94,2.42s-1.44.94-2.42.94h-14.93Z%22/%3E%3Cpath fill=%22%23fff%22 d=%22M1298.32,324.52c-.99,0-1.79-.31-2.42-.94-.63-.63-.94-1.43-.94-2.42v-87.44c0-.99.31-1.79.94-2.42.63-.63,1.43-.94,2.42-.94h60.94c.99,0,1.79.31,2.42.94.63.63.94,1.44.94,2.42v10.76c0,.9-.32,1.66-.94,2.29-.63.63-1.44.94-2.42.94h-43.59v21.12h40.63c.99,0,1.79.32,2.42.94.63.63.94,1.44.94,2.42v9.95c0,.9-.32,1.66-.94,2.29s-1.44.94-2.42.94h-40.63v21.79h44.66c.99,0,1.79.32,2.42.94.63.63.94,1.44.94,2.42v10.63c0,.99-.32,1.8-.94,2.42s-1.44.94-2.42.94h-62.02Z%22/%3E%3Cpath fill=%22%23fff%22 d=%22M1393.48,324.52c-.99,0-1.79-.31-2.42-.94-.63-.63-.94-1.43-.94-2.42v-87.44c0-.99.31-1.79.94-2.42.63-.63,1.43-.94,2.42-.94h33.77c8.97,0,16.46,1.41,22.46,4.24,6.01,2.83,10.6,6.95,13.79,12.38,3.18,5.43,4.86,12.13,5.04,20.11.09,3.95.13,7.4.13,10.36s-.05,6.37-.13,10.22c-.27,8.34-1.93,15.25-4.98,20.72-3.05,5.47-7.53,9.53-13.45,12.17-5.92,2.65-13.32,3.97-22.2,3.97h-34.44ZM1411.51,307.17h15.74c4.48,0,8.16-.67,11.03-2.02,2.87-1.35,5-3.47,6.39-6.39,1.39-2.91,2.13-6.7,2.22-11.37.09-2.6.16-4.93.2-7,.04-2.06.04-4.12,0-6.19-.05-2.06-.11-4.35-.2-6.86-.18-6.73-1.91-11.68-5.18-14.86-3.27-3.18-8.32-4.78-15.13-4.78h-15.07v59.46Z%22/%3E%3C/g%3E%3C/svg%3E");
}
.cl-ki-badge-modifiziert {
    width: 5rem;
    aspect-ratio: 1700.79 / 566.93;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1700.79 566.93%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M376.65,410.77h939.48c85.55,0,145.54-59.94,145.54-133.2h0c0-73.27-59.99-133.21-145.54-133.21H381.65c-85.55,0-150.54,59.94-150.54,133.2h0c0,73.26,64.99,133.2,150.54,133.2%22/%3E%3Cg%3E%3Cpath fill=%22%23fff%22 d=%22M626.46,325.63c-.92,0-1.72-.32-2.4-.96-.69-.64-1.03-1.46-1.03-2.47v-89.25c0-1.01.34-1.83,1.03-2.47.69-.64,1.49-.96,2.4-.96h12.77c1.37,0,2.4.37,3.09,1.1.69.73,1.17,1.28,1.44,1.65l25.27,46.55,25.54-46.55c.18-.36.62-.91,1.3-1.65.69-.73,1.72-1.1,3.09-1.1h12.77c1.01,0,1.83.32,2.47.96.64.64.96,1.47.96,2.47v89.25c0,1.01-.32,1.83-.96,2.47s-1.47.96-2.47.96h-14.01c-.92,0-1.69-.32-2.33-.96-.64-.64-.96-1.46-.96-2.47v-55.48l-17.44,32.68c-.46.82-1.05,1.56-1.79,2.2-.73.64-1.69.96-2.88.96h-6.45c-1.19,0-2.15-.32-2.88-.96-.73-.64-1.33-1.37-1.79-2.2l-17.44-32.68v55.48c0,1.01-.32,1.83-.96,2.47-.64.64-1.42.96-2.33.96h-14.01Z%22/%3E%3Cpath fill=%22%23fff%22 d=%22M784.28,327c-8.33,0-15.52-1.37-21.56-4.12-6.04-2.75-10.76-6.89-14.14-12.43-3.39-5.54-5.22-12.52-5.49-20.94-.09-3.94-.14-7.85-.14-11.74s.04-7.85.14-11.88c.27-8.24,2.13-15.17,5.56-20.8,3.43-5.63,8.19-9.86,14.28-12.7,6.09-2.84,13.2-4.26,21.35-4.26s15.13,1.42,21.21,4.26c6.09,2.84,10.87,7.07,14.35,12.7,3.48,5.63,5.31,12.56,5.49,20.8.18,4.03.28,7.99.28,11.88s-.09,7.81-.28,11.74c-.27,8.42-2.11,15.4-5.49,20.94-3.39,5.54-8.1,9.68-14.14,12.43-6.04,2.75-13.18,4.12-21.42,4.12ZM784.28,309.29c5.31,0,9.68-1.62,13.11-4.88,3.43-3.25,5.24-8.44,5.42-15.58.18-4.03.27-7.8.27-11.33s-.09-7.25-.27-11.19c-.09-4.76-.96-8.65-2.61-11.67-1.65-3.02-3.82-5.24-6.52-6.66-2.7-1.42-5.84-2.13-9.41-2.13s-6.73.71-9.47,2.13c-2.75,1.42-4.92,3.64-6.52,6.66-1.6,3.02-2.5,6.91-2.68,11.67-.09,3.94-.14,7.67-.14,11.19s.04,7.3.14,11.33c.27,7.14,2.1,12.34,5.49,15.58,3.39,3.25,7.78,4.88,13.18,4.88Z%22/%3E%3Cpath fill=%22%23fff%22 d=%22M856.69,325.63c-1.01,0-1.83-.32-2.47-.96-.64-.64-.96-1.46-.96-2.47v-89.25c0-1.01.32-1.83.96-2.47.64-.64,1.46-.96,2.47-.96h34.47c9.15,0,16.8,1.44,22.93,4.33,6.13,2.88,10.82,7.1,14.07,12.63,3.25,5.54,4.96,12.38,5.15,20.53.09,4.03.14,7.55.14,10.57s-.05,6.5-.14,10.44c-.27,8.51-1.97,15.56-5.08,21.15-3.11,5.58-7.69,9.73-13.73,12.43-6.04,2.7-13.59,4.05-22.66,4.05h-35.15ZM875.09,307.92h16.07c4.58,0,8.33-.69,11.26-2.06,2.93-1.37,5.1-3.55,6.52-6.52,1.42-2.97,2.17-6.84,2.27-11.6.09-2.65.16-5.03.21-7.14.04-2.1.04-4.21,0-6.32-.05-2.1-.12-4.44-.21-7-.18-6.87-1.95-11.92-5.29-15.17-3.34-3.25-8.49-4.87-15.45-4.87h-15.38v60.69Z%22/%3E%3Cpath fill=%22%23fff%22 d=%22M964.67,325.63c-1.01,0-1.83-.32-2.47-.96-.64-.64-.96-1.46-.96-2.47v-89.25c0-1.01.32-1.83.96-2.47.64-.64,1.46-.96,2.47-.96h15.52c1.01,0,1.83.32,2.47.96.64.64.96,1.47.96,2.47v89.25c0,1.01-.32,1.83-.96,2.47-.64.64-1.46.96-2.47.96h-15.52Z%22/%3E%3Cpath fill=%22%23fff%22 d=%22M1018,325.63c-1.01,0-1.83-.32-2.47-.96-.64-.64-.96-1.46-.96-2.47v-89.25c0-1.01.32-1.83.96-2.47.64-.64,1.46-.96,2.47-.96h61.24c1.01,0,1.83.32,2.47.96.64.64.96,1.47.96,2.47v11.67c0,1.01-.32,1.83-.96,2.47-.64.64-1.47.96-2.47.96h-43.25v23.21h40.51c1.01,0,1.83.32,2.47.96.64.64.96,1.47.96,2.47v11.67c0,.92-.32,1.69-.96,2.33-.64.64-1.46.96-2.47.96h-40.51v32.54c0,1.01-.32,1.83-.96,2.47-.64.64-1.46.96-2.47.96h-14.56Z%22/%3E%3Cpath fill=%22%23fff%22 d=%22M1112.25,325.63c-1.01,0-1.83-.32-2.47-.96-.64-.64-.96-1.46-.96-2.47v-89.25c0-1.01.32-1.83.96-2.47.64-.64,1.46-.96,2.47-.96h15.52c1.01,0,1.83.32,2.47.96.64.64.96,1.47.96,2.47v89.25c0,1.01-.32,1.83-.96,2.47-.64.64-1.46.96-2.47.96h-15.52Z%22/%3E%3Cpath fill=%22%23fff%22 d=%22M1165.57,325.63c-1.01,0-1.83-.32-2.47-.96-.64-.64-.96-1.46-.96-2.47v-89.25c0-1.01.32-1.83.96-2.47.64-.64,1.46-.96,2.47-.96h62.2c1.01,0,1.83.32,2.47.96.64.64.96,1.47.96,2.47v10.99c0,.92-.32,1.69-.96,2.33-.64.64-1.47.96-2.47.96h-44.49v21.56h41.47c1.01,0,1.83.32,2.47.96.64.64.96,1.47.96,2.47v10.16c0,.92-.32,1.7-.96,2.33-.64.64-1.47.96-2.47.96h-41.47v22.25h45.59c1.01,0,1.83.32,2.47.96.64.64.96,1.47.96,2.47v10.85c0,1.01-.32,1.83-.96,2.47-.64.64-1.47.96-2.47.96h-63.3Z%22/%3E%3Cpath fill=%22%23fff%22 d=%22M1262.7,325.63c-1.01,0-1.83-.32-2.47-.96-.64-.64-.96-1.46-.96-2.47v-89.25c0-1.01.32-1.83.96-2.47.64-.64,1.46-.96,2.47-.96h34.47c9.15,0,16.8,1.44,22.93,4.33,6.13,2.88,10.82,7.1,14.07,12.63,3.25,5.54,4.96,12.38,5.15,20.53.09,4.03.14,7.55.14,10.57s-.05,6.5-.14,10.44c-.27,8.51-1.97,15.56-5.08,21.15-3.11,5.58-7.69,9.73-13.73,12.43-6.04,2.7-13.59,4.05-22.66,4.05h-35.15ZM1281.1,307.92h16.07c4.58,0,8.33-.69,11.26-2.06,2.93-1.37,5.1-3.55,6.52-6.52,1.42-2.97,2.17-6.84,2.27-11.6.09-2.65.16-5.03.21-7.14.04-2.1.04-4.21,0-6.32-.05-2.1-.12-4.44-.21-7-.18-6.87-1.95-11.92-5.29-15.17-3.34-3.25-8.49-4.87-15.45-4.87h-15.38v60.69Z%22/%3E%3C/g%3E%3Cg%3E%3Cpath fill=%22%23fff%22 d=%22M349.9,341c-.98,0-1.87-.4-2.66-1.19-.8-.8-1.19-1.68-1.19-2.66,0-.61.06-1.16.18-1.65l43.18-117.96c.37-1.35,1.13-2.54,2.3-3.58,1.16-1.04,2.78-1.56,4.87-1.56h27.19c2.08,0,3.7.52,4.87,1.56,1.16,1.04,1.93,2.24,2.3,3.58l42.99,117.96c.24.49.37,1.04.37,1.65,0,.98-.4,1.87-1.19,2.66-.8.8-1.75,1.19-2.85,1.19h-22.6c-1.84,0-3.22-.46-4.13-1.38s-1.5-1.75-1.75-2.48l-7.17-18.74h-49.06l-6.98,18.74c-.25.73-.8,1.56-1.65,2.48-.86.92-2.33,1.38-4.41,1.38h-22.6ZM393.08,291.94h34.18l-17.27-48.51-16.9,48.51Z%22/%3E%3Cpath fill=%22%23fff%22 d=%22M493.39,341c-1.35,0-2.45-.43-3.31-1.29-.86-.86-1.29-1.96-1.29-3.31v-119.43c0-1.35.43-2.45,1.29-3.31s1.96-1.29,3.31-1.29h24.62c1.35,0,2.45.43,3.31,1.29.86.86,1.29,1.96,1.29,3.31v119.43c0,1.35-.43,2.45-1.29,3.31s-1.96,1.29-3.31,1.29h-24.62Z%22/%3E%3C/g%3E%3C/svg%3E");
}
/* Slider-Folien (Blättern + Stapeln): große Variante wie das Alt-Hauptslider-Badge; die Bildspalte ist
   explizit der Bezugsrahmen (nicht nur über :has). */
.cl-slide-bild { position: relative; }
.cl-slide-bild > .cl-ki-badge { bottom: 0; right: 0; width: 3rem; }
.cl-slide-bild > .cl-ki-badge-generiert,
.cl-slide-bild > .cl-ki-badge-modifiziert { width: 8.5rem; }

/* ── ALT-INHALT-CONTAINER (IW 31.08.2026, core/Content/altinhalt.php): Quarantänezone für 1:1
   übernommene Alt-Seiteninhalte. Das eigentliche Bootstrap 4 liegt GESCOPT in
   assets/shared/vendor/altinhalt/bootstrap4-scoped.css (nur auf solchen Seiten geladen); hier nur
   der Rahmen. Bewusst KEINE Content-Typografie (kein <cluc>) — fremdes Layout bleibt fremd. ── */
.cl-altinhalt { display: block; position: relative; }
.cl-altinhalt img { max-width: 100%; height: auto; }

/* ── PLATZHALTER-Hauptnav (IW 02.09.2026): Website ohne live veröffentlichte Neusystem-Seite —
   statt des Alt-Menü-Fallbacks deuten 4 Punkte mit Dropdown die Nav nur AN (graue Balken,
   Skeleton-Optik wie die leere Sektionsfläche). Quelle: _nav_laden (apps/website/seiten.php),
   Markup: main_header.php (.cl-nav-platzhalter); Breiten variieren per nth-child. ── */
.cl-nav-ph {
    display: inline-block;
    width: 6rem;
    height: .85em;
    border-radius: .25rem;
    background: var(--bs-secondary-bg);
    vertical-align: middle;
}
.cl-nav-platzhalter:nth-child(1) > a .cl-nav-ph { width: 7rem; }
.cl-nav-platzhalter:nth-child(2) > a .cl-nav-ph { width: 5rem; }
.cl-nav-platzhalter:nth-child(4) > a .cl-nav-ph { width: 8rem; }
.cl-nav-platzhalter .dropdown-menu .cl-nav-ph { width: 8rem; }
.cl-nav-platzhalter .dropdown-menu li:nth-child(2) .cl-nav-ph { width: 6rem; }
.cl-nav-platzhalter .dropdown-menu li:nth-child(3) .cl-nav-ph { width: 7rem; }
.cl-nav-platzhalter .dropdown-item.disabled { pointer-events: none; }

/* ── „AI"-Erkennungs-Badge (IW 07.09.2026): lila Kreis mit animiertem „AI"-Funkeln neben Überschriften,
   deren Inhalt KI-generiert ist (Fahrzeugbeschreibung/Ausstattungsliste der Detailseite). NUR für
   eingeloggte CMS-Betrachter gerendert (web_ai_badge_html(), Gate wie die Preview-Affordances:
   carlution-Domain + gültiges Login-Flag) — Besucher sehen es nie. SVG = shared/img/ai-badge.svg,
   Keyframes wie CMS custom.css (.ai-badge); prefers-reduced-motion respektiert. ── */
.cl-ai-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 1.5rem;
    height: 1.5rem;
    margin-left: .5rem;
    border-radius: 50rem;
    background: #e300ff;
    color: #fff;
    flex: none;
    padding-bottom: 3px;   /* optischer Ausgleich: die Sterne sitzen im SVG oben rechts (IW) */
}
.cl-ai-badge .ai-badge { width: 1.1rem; height: auto; display: block; }
.cl-ai-badge .ai-tw { animation-name: ai-tw; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
@keyframes ai-tw { 0%, 100% { transform: scale(1); opacity: 1; } 45% { transform: scale(.78); opacity: .55; } 70% { transform: scale(1.12); opacity: 1; } }
.cl-ai-badge .ai-sp { stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; opacity: 0; animation-name: ai-sp; animation-timing-function: ease-out; animation-iteration-count: infinite; }
@keyframes ai-sp { 0%, 55%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 68% { opacity: .9; transform: scale(1) rotate(45deg); } 82% { opacity: 0; transform: scale(1.4) rotate(90deg); } }
@media (prefers-reduced-motion: reduce) { .cl-ai-badge .ai-tw, .cl-ai-badge .ai-sp { animation: none; } .cl-ai-badge .ai-sp { opacity: 0; } }

/* ── Ausstattungsliste der Detailseite (IW 07.09.2026, Optik wie Alt .fz-equipment-list): je Kategorie
   ein Rahmen mit eingeschnittenem Titel (Markup in fahrzeug_detail.php), die Merkmale fließen in
   CSS-Spalten VERTIKAL (nicht zeilenweise wie ein Grid) — 1 / 2 (sm) / 3 (lg) Spalten, ein Merkmal
   bricht nie über die Spaltengrenze, lange Begriffe werden silbengetrennt (lang="de"). ── */
.cl-fz-ausstattung-liste {
    column-count: 1;
    column-gap: 1rem;
    font-size: .9rem;
    padding: 2rem 1rem 1rem 1rem;
    hyphens: auto;
    -webkit-hyphens: auto;
}
@media (min-width: 576px) { .cl-fz-ausstattung-liste { column-count: 2; } }
@media (min-width: 992px) { .cl-fz-ausstattung-liste { column-count: 3; } }
.cl-fz-ausstattung-liste > div {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 1rem;
}

/* ── KI-Fahrzeugsuche (Hero-Bar, plaene/ki-fahrzeugsuche.md K2, IW 07.09.2026) ─────────────────────────── */
/* Honeypot: für Menschen unsichtbar und nicht erreichbar (kein display:none — das überspringen manche Bots). */
.cl-ki-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Geister-Chip (IW 08.09.2026): Fläche/Rahmen aus currentColor gemischt → passt sich der Textfarbe der umgebenden Fläche an
   (text-bg-* der Sektions-Hülle, Eigenfarbe-Kontrastklasse, Bild). Bootstrap-Button-Variablen, daher Hover/Active inklusive. */
.cl-chip-ghost {
    --bs-btn-color: inherit;
    --bs-btn-bg: color-mix(in srgb, currentColor 10%, transparent);
    --bs-btn-border-color: color-mix(in srgb, currentColor 25%, transparent);
    --bs-btn-hover-color: inherit;
    --bs-btn-hover-bg: color-mix(in srgb, currentColor 18%, transparent);
    --bs-btn-hover-border-color: color-mix(in srgb, currentColor 40%, transparent);
    --bs-btn-active-color: inherit;
    --bs-btn-active-bg: color-mix(in srgb, currentColor 24%, transparent);
    --bs-btn-active-border-color: color-mix(in srgb, currentColor 45%, transparent);
    --bs-btn-focus-shadow-rgb: 128, 128, 128;
    color: inherit;
}
/* Ladezustand im Feld (IW 07.09.2026): bei aria-busy weicht das FA-Sparkles-Icon einem Inline-SVG mit denselben drei
   Sternen, die versetzt pulsieren („animated AI stars"); der Button zeigt Spinner + „Suche …" (Text tauscht das JS). */
.cl-ki-icon { min-width: 3rem; justify-content: center; }
.cl-ki-icon .cl-ki-stars { display: none; width: 1.25em; height: 1.25em; }
form[aria-busy="true"] .cl-ki-icon > i { display: none; }
form[aria-busy="true"] .cl-ki-icon .cl-ki-stars { display: block; --animate-duration: 1.6s; }   /* Gesamt-Puls: animate.css (animate__pulse animate__infinite, IW) */
.cl-ki-stars .cl-ki-star { transform-box: fill-box; transform-origin: center; animation: cl-ki-star 1.6s ease-in-out infinite; }
.cl-ki-stars .cl-ki-star:nth-child(2) { animation-delay: .4s; }
.cl-ki-stars .cl-ki-star:nth-child(3) { animation-delay: .8s; }
@keyframes cl-ki-star { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.55); opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .cl-ki-stars .cl-ki-star { animation: none; } }   /* animate.css schaltet sich bei reduced-motion selbst ab */
/* Suchfeld-Karte (IW 08.09.2026): Textarea einzeilig ohne Griff, wächst per JS; mobil kleinere Schrift/Abstände (input-group-lg erst ab sm). */
.cl-ki-card textarea.form-control { resize: none; overflow: hidden; min-height: 0; line-height: 1.5; }
.cl-ki-card textarea.form-control::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* Platzhalter bricht nicht um (Feld bleibt einzeilig) */
@media (max-width: 575.98px) {
    .cl-ki-card.input-group-lg > .form-control { font-size: 1.05rem; padding: .55rem .75rem; min-height: 0; }
    .cl-ki-card.input-group-lg > .btn { font-size: 1.05rem; padding-top: .55rem; padding-bottom: .55rem; }
    /* Mobil ohne Akzentfarbe (IW 08.09.): die Lupe steht schlicht in der Karte — Bootstrap-Button-Variablen auf transparent,
       Textfarbe der Karte; Hover/Aktiv nur ein Hauch Fläche. */
    .cl-ki-card.input-group-lg > .btn.btn-accent {
        --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-color: inherit;
        --bs-btn-hover-bg: rgba(0, 0, 0, .06); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: inherit;
        --bs-btn-active-bg: rgba(0, 0, 0, .1); --bs-btn-active-border-color: transparent; --bs-btn-active-color: inherit;
        --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: transparent; --bs-btn-disabled-color: inherit;
        box-shadow: none;
    }
}
.cl-ki-spinner { display: none; }
form[aria-busy="true"] .cl-ki-spinner { display: inline-block; }
form[aria-busy="true"] .cl-ki-search-icon { display: none; }   /* Lupe im Ruhezustand, Spinner beim Suchen (IW) */

/* Zähler-Button mit FESTER Breite (IW 25.09.2026, Fahrzeugsuchleiste): Platzhalter (.cl-count-reserve, z.B. „000 Angebote")
   und echte Zahl liegen im selben Grid-Feld — der Button ist immer so breit wie für 3 Ziffern, egal welche Zahl gerade
   steht oder animiert (die „0" gehört zu den breitesten Ziffern). Sonst zuckten die Selects daneben bei jeder Zählung. */
.cl-count-button { display: inline-grid; justify-items: center; }   /* ohne tabular-nums (IW 25.09.2026: sah unschön aus) */
.cl-count-button > span { grid-area: 1 / 1; }
.cl-count-reserve { visibility: hidden; }

/* „Dropdown überlagernd" (Sektions-Option der Fahrzeugsuchleiste, IW 25.09.2026): das Menü des customSelects öffnet
   EXAKT auf dem Feld (Oberkante = Oberkante des Buttons) statt mit Abstand darunter. Bootstrap positioniert die statischen
   Menüs über [data-bs-popper] mit top:100% + margin-top:--bs-dropdown-spacer — beides hier aufgehoben. */
.cl-select-overlay .custom-select-wrapper .dropdown-menu,
.cl-select-overlay .custom-select-wrapper .dropdown-menu[data-bs-popper] {
    top: 0 !important;
    margin-top: 0 !important;
}

/* ── Popup einer Seite (Objekttyp popup, IW/ai 30.09.2026 — render/web/popup.php + js/popup.js) ────────────────
   Reines Bootstrap-Modal; hier nur, was Bootstrap nicht mitbringt:
   1. Animations-Varianten (Stil › Animation) als Startzustand des .modal-dialog — „oben" ist Bootstraps .fade selbst.
      :not(.show), damit Bootstraps Zielzustand (.modal.show .modal-dialog { transform: none }) greift.
   2. Smartphone-Block (.cl-popup-block, ein .collapse oben in der Seite): die --bs-modal-*-Variablen hängen sonst am
      .modal — außerhalb davon hier nachgesetzt. */
/* Kein eigener Scrollbalken am Modal-Container (IW 30.09.2026): „von unten"/„Aufzoomen" ragen während der Animation
   kurz über den Rand → Bootstraps overflow-y:auto blendete einen Balken ein/aus, der Inhalt zuckte. Der Dialog ist
   modal-dialog-scrollable — gescrollt wird im .modal-body. */
.cl-popup { overflow: hidden; }
.cl-popup .modal-dialog { transition: transform .3s ease-out; }
.cl-popup.cl-popup-anim--zoom:not(.show) .modal-dialog { transform: scale(.85); }
.cl-popup.cl-popup-anim--zoom .modal-dialog { transition: transform .3s cubic-bezier(.2, .9, .3, 1.2); }
.cl-popup.cl-popup-anim--unten:not(.show) .modal-dialog { transform: translateY(60px); }
.cl-popup.cl-popup-anim--unten .modal-dialog { transition: transform .45s cubic-bezier(.2, .9, .3, 1.15); }
.cl-popup.cl-popup-anim--blende:not(.show) .modal-dialog { transform: none; }
.cl-popup-block {
    --bs-modal-padding: 1rem; --bs-modal-header-padding: 1rem 1rem; --bs-modal-footer-gap: .5rem;
    --bs-modal-bg: var(--bs-body-bg); --bs-modal-border-color: var(--bs-border-color); --bs-modal-border-width: 0;
    --bs-modal-inner-border-radius: 0; --bs-modal-header-border-width: 0; --bs-modal-footer-border-width: 0;
}
.cl-popup-block .modal-content { border-radius: 0; border-bottom: 1px solid var(--bs-border-color); }
/* Fußnoten-Block am Seitenende (pmo/ai 15.10.2026, CLM-Trello #24 — render/web/fussnoten.php): nummerierte
   Liste der beim Rendern angemeldeten Fußnoten; Absätze im Richtext ohne Schlussabstand (Sprungziel-Abstand: globale Sprungmarken-Regel oben). */
/* Abstand NACH OBEN (IW 08.11.2026): endet die letzte Sektion ohne eigenen Unterabstand (z. B. eine Galerie), klebte ihr
   Inhalt sonst direkt an der Trennlinie. Stufe „Klein" der Sektions-Skala — mit eigenem Unterabstand nur ein Hauch mehr. */
.cl-fussnoten { border-top: 1px solid var(--bs-border-color-translucent); margin-top: var(--cl-section-space-1); }
.cl-fussnoten .cl-fn-nr { top: .1em; min-width: 1.25rem; }
.cl-fussnoten cluc[type="rte"] p:last-child { margin-bottom: 0; }
.cl-fn-verweis a:hover { text-decoration: underline !important; }

/* Schritt-Formular (IW/ai 21.10.2026, plaene/lead-management.md §17.1 — render/web/content_sektionen.php,
   schrittformular.js): ohne JS alle Schritte untereinander; mit JS (.is-enhanced) nur der aktive. Auswahl-Knöpfe sind
   Radios als Bootstrap-Buttons (btn-check, Stil je Button; gewählt = :checked-Zustand der Variante). Radien folgen den Theme-Tokens. */
/* NUR margin-bottom (IW/ai 21.10.2026): die Kurzschreibweise `margin` überschrieb Bootstraps `.carousel-item { margin-right: -100% }`
   — beim Übergang „Schieben" standen beide Schritte dann kurz untereinander statt übereinander. Rest setzt Bootstraps Reboot. */
.cl-step { border: 0; padding: 0; margin-bottom: 2.5rem; min-width: 0; }
.cl-step:focus { outline: none; }
.cl-stepform-form.is-enhanced .cl-step { margin-bottom: 0; }
.cl-stepform-form.is-enhanced:not(.is-bs-uebergang) .cl-step:not(.is-active) { display: none; }   /* Übergänge: Bootstrap blendet */
.cl-step-text > :last-child { margin-bottom: 0; }
.cl-step-btn-fill { flex: 0 0 100%; }
.cl-step-choices .btn-check:checked + .btn { font-weight: 700; }   /* gewählte Antwort fett (IW 21.10.2026) */   /* „Ausfüllen" (IW 21.10.2026): volle Breite, jeder Button in einer eigenen Zeile */
/* Fortschritt NEUTRAL (IW 21.10.2026): Bootstraps Balken ist fest blau (#0d6efd, nicht theme-variabel) und passte auf keiner
   Website — Spur und Balken als Anteil der Textfarbe (Spur 12 %, Balken doppelt so grau: 24 %; NICHT --bs-secondary, das ist
   die Sekundär-Markenfarbe); transparent gemischt → gleiches Verhältnis auf hellen wie dunklen Hintergründen. Bildet den
   oberen Rand der Box: volle Breite, ohne eigene Rundung (die Karte beschneidet ihn an den Ecken). */
.cl-step-progress .progress {
    height: .3rem; border-radius: 0;
    --bs-progress-bg: color-mix(in srgb, var(--bs-body-color) 12%, transparent);
}
.cl-step-progress .progress-bar { transition: width .25s ease; --bs-progress-bar-bg: color-mix(in srgb, var(--bs-body-color) 24%, transparent); }
@media (prefers-reduced-motion: reduce) {
    .cl-step-progress .progress-bar { transition: none; }
}