/**
 * KW Blocks — Unified Component Styles (v1.3.0)
 *
 * SINGLE SOURCE OF TRUTH fuer alle ACF-Block-Styles.
 * Theme (style.css) kuemmert sich um: Globals, Reset, Header, Footer, Navigation, CPT-Templates.
 * Dieses File kuemmert sich um: Alle KW Gutenberg Blocks.
 *
 * Farben kommen aus :root Variablen in style.css.
 * Fallback-Werte in var() stellen sicher, dass Blocks auch standalone funktionieren.
 *
 * Breakpoints: 480px (Mobile) | 768px (Tablet) | 1024px (Desktop)
 */
/* CACHE-TEST-1237-R3-06caac2e (Testlauf 3/3, #1237, 2026-08-22, rein zu Nachweiszwecken -- wieder entfernbar) */


/* ==========================================================================
   LAYOUT & SECTION-VARIANTEN
   Jeder KW-Block sitzt in einer .kw-block-section mit Farb-Modifier.
   WARUM Gradients statt Solid: Gradients wirken hochwertiger und vermeiden
   flache, billig wirkende Farbflaechen.
   ========================================================================== */

/* Issue #1346 (Runde 3): Marker fuer render.php-Inline-Extraktion. Der
   Sektions-Wrapper .kw-block-section wird von JEDEM Block gerendert, der eine
   Farb-Sektion braucht (intro, card-grid, compare-table, landwirt-testimonial,
   ...) - hier nur fuer blocks/intro/render.php ausgelesen (Foreman-Auftrag
   dieser Runde war explizit nur intro). Andere Nutzer dieses Wrappers koennen
   denselben Rest-CLS haben, sind aber NICHT Teil dieses Tickets - siehe
   reports/issue-1346/2026-08-16-hero-cls-diagnose.md fuer den Hinweis. */
/* KW-INTRO-CRITICAL-SECTION-START */
.kw-block-section {
    padding: var(--kw-space-section, 100px) var(--kw-space-lg, 40px);
    box-sizing: border-box;
}
/* KW-INTRO-CRITICAL-SECTION-END */
.kw-block-section--cream  { background: var(--kw-cream, #F5F0EB); color: var(--kw-body-text, #1A1A1A); }
.kw-block-section--white  { background: var(--kw-white, #fff); color: var(--kw-body-text, #1A1A1A); }
/* --army Name bleibt aus Legacy-Gruenden (alle Render-Files nutzen diesen Modifier),
   Farbe ist aber auf Bordeaux-Gradient umgestellt. */
.kw-block-section--army   { background: var(--kw-gradient-dark, linear-gradient(135deg, #7A1C33, #5A1426)); color: #fff; }
.kw-block-section--bordeaux { background: var(--kw-bordeaux, #97233F); color: #fff; }

/* Leere <p> (z.B. nur Block-Kommentar) kollabieren — sonst entsteht zwischen
   zwei aufeinanderfolgenden kw-block-section ein 17px-Streifen durch das
   Default-Margin des leeren Paragraphs. */
p:empty { margin: 0 !important; display: none; }

/* Landwirt-Award-Variante (feedback_farben.md Ausnahme: externes Award-Asset).
   Nur fuer kw-banner-dark mit className "is-style-landwirt" zugelassen.
   Landwirt-Brand-Gruen #008A4C -> #005B23. Gradient verschoben Richtung dunklerem Ende
   ("Gruen zu hell" Feedback Issue #409). Kompakt (Award-Strip), max-height 400px.
   Wichtig: gewinnt gegen .kw-block-section--army (gleiche Specificity, spaeter in Cascade). */
/* Issue #1444 Runde 2 (Freigabe): kw-blocks-css laedt async, gleiche
   Ursache wie #alle-modelle/.kw-swf. Marker unten (kw_blocks_critical_css(),
   blocks/banner-dark/render.php) inlinen die Layout-Regeln des Award-Banners
   synchron -- 1:1, keine Optik-Aenderung, insbesondere die frisch
   abgenommene #1442-Einrichtung (Zeile ~1035ff) bleibt wertgleich. */
/* KW-BD-CRITICAL-BASE-START */
.kw-block-section.is-style-landwirt {
    background: linear-gradient(135deg, #00502A 0%, #003918 100%);
    color: #fff;
    padding: 32px 40px;
    /* Issue #593: max-height angehoben von 280px → 360px wegen größerer Body-Schrift
       (17px statt 15px). Sichert dass Text + CTA nicht durch overflow:hidden gekappt wird. */
    max-height: 360px;
    overflow: hidden;
}
.kw-block-section.is-style-landwirt .kw-banner-dark-grid {
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    /* Issue #543: Inner-Wrapper an Standard-Container (.kw-container 1200px) angeglichen.
       Vorher 1040px (Issue #439) wirkte im Seitenfluss eingerückt gegenueber den
       Nachbar-Sektionen, die mit .kw-container auf 1200px sitzen. Full-bleed BG bleibt. */
    max-width: 1200px;
    margin-inline: auto;
}
.kw-block-section.is-style-landwirt img {
    max-height: 200px;
    object-fit: cover;
    width: 100%;
    border-radius: 6px;
}
/* KW-BD-CRITICAL-BASE-END */
/* Lesbarkeit + Dezenz (Gregor 2026-05-18): Heading von render.php inline-style
   clamp(1.5rem,3vw,2.25rem) auf kompakteren Wert reduziert.
   Issue #593 (2026-05-23): Body-Schrift von 15px auf --kw-text-base (17px) angehoben,
   damit Landwirt-Streifen visuell konsistent mit Nachbar-Sektionen ist (z.B. „Finde
   deine Forstseilwinde"-Subline). Heading-Skala leicht angehoben für gleiche Hierarchie. */
/* KW-BD-CRITICAL-TYPO-START */
.kw-block-section.is-style-landwirt .kw-banner-dark-grid h2 {
    font-size: clamp(1.35rem, 2.2vw, 1.625rem) !important;
    margin-bottom: 10px !important;
}
.kw-block-section.is-style-landwirt .kw-banner-dark-grid p {
    font-size: var(--kw-text-base, 17px);
}
.kw-block-section.is-style-landwirt .kw-placeholder-img--landwirt {
    max-height: 200px;
}
/* KW-BD-CRITICAL-TYPO-END */
.kw-block-section.is-style-landwirt .kw-banner-dark-grid p {
    color: rgba(255, 255, 255, 0.88);
}
.kw-block-section.is-style-landwirt .kw-banner-dark-grid p.kw-landwirt-text-2 {
    color: #fff;
    font-weight: 700;
}
@media (max-width: 768px) {
    /* KW-BD-CRITICAL-MOBILE-START */
    .kw-block-section.is-style-landwirt {
        max-height: none;
        padding: 28px 20px;
    }
    /* Foto-Spalte (rechts) auf Mobile ausblenden — Text + Link reichen. */
    .kw-block-section.is-style-landwirt .kw-banner-dark-grid > div:nth-child(2) {
        display: none;
    }
    /* KW-BD-CRITICAL-MOBILE-END */
}

/* ==========================================================================
   ISSUE #1384 — Kategorieseite Desktop: Filterknopf above the fold
   WARUM: Bei 1280x800 lag die Filter-Sidebar (.kw-swf) mit ihrem Kopf
   ("Winde filtern") komplett unter der Falz — Award-Zeile (~273px) +
   Section-Heading #alle-modelle (~331px) nahmen zu viel Hoehe vor dem
   Filter. Fix: Award-Zeile ohne Bildspalte, Section-Heading kompakter +
   Einleitungstext auf Lesebreite (Vorlage reports/issue-1382/designer-
   lieferung-2-uebergabe/kategorieseite-desktop.html, Design-Notiz "64ch").
   SCOPE bis #1443: NUR /forstseilwinde/ + seine 5 Sprachfassungen (WPML-
   Page-IDs 87 DE / 2997 EN / 2998 FR / 2999 IT / 3000 CS / 3001 PL — per
   apply_filters('wpml_get_element_translations', ...) auf dem Server
   ermittelt, 19.08.2026), NUR Desktop (>=1024px). Mobil unveraendert
   (kein Selektor unter 1024px).
   ROLLOUT #1443 (22./23.08., Gregors Bestellung nach Forst-Abnahme): der
   #alle-modelle-Teil unten (Zeile ~202ff, Section-Heading kompakt/64ch)
   gilt jetzt auf allen 4 Kategorie-Hubs (24 Page-IDs), ueber Page-ID statt
   ueber die Hub-weit geteilte #alle-modelle-ID gescopt, weil der Award-
   Zeilen-Teil oben (.kw-block-section.is-style-landwirt, Zeile ~126ff)
   davon UNBERUEHRT bleibt -- der Testsieg-Balken/die Award-Zeile ist
   ausdruecklich #1442, nicht Teil von #1443, deshalb dort weiterhin NUR
   die 6 Forstseilwinde-IDs.
   ========================================================================== */
@media (min-width: 1024px) {
    /* KW-BD-CRITICAL-1384-START */
    body.page-id-87 .kw-block-section.is-style-landwirt,
    body.page-id-2997 .kw-block-section.is-style-landwirt,
    body.page-id-2998 .kw-block-section.is-style-landwirt,
    body.page-id-2999 .kw-block-section.is-style-landwirt,
    body.page-id-3000 .kw-block-section.is-style-landwirt,
    body.page-id-3001 .kw-block-section.is-style-landwirt {
        padding: 14px 40px;
        max-height: none;
    }
    /* KW-BD-CRITICAL-1384-END */
    /* Bildspalte weg — Testsieg-Gruen (#008A4C-Gradient) bleibt unveraendert,
       das ist die bestehende CI-Ausnahme fuer den Vergleichstest-Kontext
       (feedback_farben.md), nicht Teil dieses Tickets. */
    /* Punkt 1 (Nachtrag 20.08., Container-Breite + Radius) sitzt NICHT hier,
       sondern bei .kw-archiv-award / .kw-archiv-award__row weiter unten in
       dieser Datei — die Kompakt-Zeile fuer die Archiv-Hubs rendert eigene
       Klassen (render.php $is_archiv_hub), nicht .kw-banner-dark-grid. Ein
       erster Versuch hier (body.page-id-* + #primary, width/margin
       !important auf .kw-block-section.is-style-landwirt) traf zwar das
       richtige Element, ergab aber bei 1440px eine andere Kante als Filter/
       Grid (main-Padding 24px ohne 1240er-Deckel skaliert nicht im selben
       Tempo) -- siehe Bau-Report Messwerte v1 vs. v2. Ersetzt durch den
       full-bleed-Aussen/.kw-container-Innen-Mechanismus, der exakt die vom
       Filter benutzten Werte (1240/32) wiederverwendet. */
    body.page-id-87 .kw-block-section.is-style-landwirt .kw-banner-dark-grid,
    body.page-id-2997 .kw-block-section.is-style-landwirt .kw-banner-dark-grid,
    body.page-id-2998 .kw-block-section.is-style-landwirt .kw-banner-dark-grid,
    body.page-id-2999 .kw-block-section.is-style-landwirt .kw-banner-dark-grid,
    body.page-id-3000 .kw-block-section.is-style-landwirt .kw-banner-dark-grid,
    body.page-id-3001 .kw-block-section.is-style-landwirt .kw-banner-dark-grid {
        grid-template-columns: 1fr;
    }
    body.page-id-87 .kw-block-section.is-style-landwirt .kw-banner-dark-grid > div:nth-child(2),
    body.page-id-2997 .kw-block-section.is-style-landwirt .kw-banner-dark-grid > div:nth-child(2),
    body.page-id-2998 .kw-block-section.is-style-landwirt .kw-banner-dark-grid > div:nth-child(2),
    body.page-id-2999 .kw-block-section.is-style-landwirt .kw-banner-dark-grid > div:nth-child(2),
    body.page-id-3000 .kw-block-section.is-style-landwirt .kw-banner-dark-grid > div:nth-child(2),
    body.page-id-3001 .kw-block-section.is-style-landwirt .kw-banner-dark-grid > div:nth-child(2) {
        display: none;
    }
    body.page-id-87 .kw-block-section.is-style-landwirt .kw-landwirt-text-1,
    body.page-id-2997 .kw-block-section.is-style-landwirt .kw-landwirt-text-1,
    body.page-id-2998 .kw-block-section.is-style-landwirt .kw-landwirt-text-1,
    body.page-id-2999 .kw-block-section.is-style-landwirt .kw-landwirt-text-1,
    body.page-id-3000 .kw-block-section.is-style-landwirt .kw-landwirt-text-1,
    body.page-id-3001 .kw-block-section.is-style-landwirt .kw-landwirt-text-1 {
        margin-bottom: 4px !important;
    }
    body.page-id-87 .kw-block-section.is-style-landwirt .kw-landwirt-text-2,
    body.page-id-2997 .kw-block-section.is-style-landwirt .kw-landwirt-text-2,
    body.page-id-2998 .kw-block-section.is-style-landwirt .kw-landwirt-text-2,
    body.page-id-2999 .kw-block-section.is-style-landwirt .kw-landwirt-text-2,
    body.page-id-3000 .kw-block-section.is-style-landwirt .kw-landwirt-text-2,
    body.page-id-3001 .kw-block-section.is-style-landwirt .kw-landwirt-text-2 {
        margin-bottom: 0 !important;
    }

    /* Section-Heading #alle-modelle: kompakter, Einleitungstext (Subline)
       auf 64ch Lesebreite begrenzt (Ticket-Punkt 2 "Text schmaler"). */
    /* Nachtrag 20.08. (Punkt 2, Fluchtlinien + Luft): components.css kappt
       JEDEN direkten .kw-main-Kind ohne alignwide/alignfull global auf
       860px Lesebreite (#primary.kw-main > *:not(.alignwide):not(.alignfull),
       Zeile ~1335) UND schliesst .kw-sh-wrapper zusaetzlich explizit vom
       automatischen full-bleed-Ausbruch aus, den andere kw-Bloecke wie
       .kw-swf serienmaessig bekommen (#1074) — dadurch sass die Zeile in
       main's festem 24px-Rand statt im selben full-bleed/.kw-container-
       Mechanismus wie Filter/Grid darunter. Fix erzwingt hier genau
       denselben Mechanismus manuell: der Wrapper wird per --kw-main-pad
       (24px, components.css) selbst zum full-bleed-Aussenelement, die
       schon vorhandene .kw-sh-archiv-row wird zum .kw-container-Aequivalent
       (1240/32, dieselben Werte wie .kw-swf .kw-container -- kein neuer
       Wert). !important noetig, weil components.css' Ausschluss-Regel
       selbst keins setzt, aber wir hier width/margin explizit umkehren.
       Messwerte im Bau-Report bestaetigen 0px Differenz zur Sidebar-/
       Sortierzeilen-Kante bei 1280 UND 1440px. Vertikal: Gregor wollte
       mindestens 50px Luft ueber/unter dem Text — 56px oben+unten
       gewaehlt, bleibt auf dem Wrapper (unabhaengig vom full-bleed-Trick). */
    /* Issue #1444 -- kw-blocks-css laedt async (media="print"+onload, #1346-
       Architektur). Vor dem Nachladen fehlt dieser Full-Bleed-Override: der
       Wrapper rendert in main's normaler 860px-Lesebreite zentriert (Basis-
       Kappung components.css), bis die externe Datei nachlaedt und in einem
       Schlag auf volle Breite (calc(100% + 2*pad)) umschnappt -- der groesste
       gemessene Einzel-Shift (~0,62-0,65 der 0,44-1,02 Gesamt-CLS, Issue-Diagnose).
       Marker unten (kw_blocks_critical_css(), section-heading/render.php)
       inlinen dieselben 24 Selektoren + Werte synchron im ersten Paint. */
    /* KW-SH-CRITICAL-DESKTOP-START */
    body.page-id-87 .kw-sh-wrapper#alle-modelle,
    body.page-id-2997 .kw-sh-wrapper#alle-modelle,
    body.page-id-2998 .kw-sh-wrapper#alle-modelle,
    body.page-id-2999 .kw-sh-wrapper#alle-modelle,
    body.page-id-3000 .kw-sh-wrapper#alle-modelle,
    body.page-id-3001 .kw-sh-wrapper#alle-modelle,
    body.page-id-396 .kw-sh-wrapper#alle-modelle,
    body.page-id-2967 .kw-sh-wrapper#alle-modelle,
    body.page-id-2968 .kw-sh-wrapper#alle-modelle,
    body.page-id-2969 .kw-sh-wrapper#alle-modelle,
    body.page-id-2970 .kw-sh-wrapper#alle-modelle,
    body.page-id-2971 .kw-sh-wrapper#alle-modelle,
    body.page-id-397 .kw-sh-wrapper#alle-modelle,
    body.page-id-2972 .kw-sh-wrapper#alle-modelle,
    body.page-id-2973 .kw-sh-wrapper#alle-modelle,
    body.page-id-2974 .kw-sh-wrapper#alle-modelle,
    body.page-id-2975 .kw-sh-wrapper#alle-modelle,
    body.page-id-2976 .kw-sh-wrapper#alle-modelle,
    body.page-id-724 .kw-sh-wrapper#alle-modelle,
    body.page-id-3029 .kw-sh-wrapper#alle-modelle,
    body.page-id-3030 .kw-sh-wrapper#alle-modelle,
    body.page-id-3031 .kw-sh-wrapper#alle-modelle,
    body.page-id-3032 .kw-sh-wrapper#alle-modelle,
    body.page-id-3033 .kw-sh-wrapper#alle-modelle {
        width: calc(100% + 2 * var(--kw-main-pad, 1.5rem)) !important;
        max-width: none !important;
        margin-left: calc(-1 * var(--kw-main-pad, 1.5rem)) !important;
        margin-right: calc(-1 * var(--kw-main-pad, 1.5rem)) !important;
        padding: 56px 0;
    }
    body.page-id-87 .kw-sh-wrapper#alle-modelle .kw-sh-archiv-row,
    body.page-id-2997 .kw-sh-wrapper#alle-modelle .kw-sh-archiv-row,
    body.page-id-2998 .kw-sh-wrapper#alle-modelle .kw-sh-archiv-row,
    body.page-id-2999 .kw-sh-wrapper#alle-modelle .kw-sh-archiv-row,
    body.page-id-3000 .kw-sh-wrapper#alle-modelle .kw-sh-archiv-row,
    body.page-id-3001 .kw-sh-wrapper#alle-modelle .kw-sh-archiv-row,
    body.page-id-396 .kw-sh-wrapper#alle-modelle .kw-sh-archiv-row,
    body.page-id-2967 .kw-sh-wrapper#alle-modelle .kw-sh-archiv-row,
    body.page-id-2968 .kw-sh-wrapper#alle-modelle .kw-sh-archiv-row,
    body.page-id-2969 .kw-sh-wrapper#alle-modelle .kw-sh-archiv-row,
    body.page-id-2970 .kw-sh-wrapper#alle-modelle .kw-sh-archiv-row,
    body.page-id-2971 .kw-sh-wrapper#alle-modelle .kw-sh-archiv-row,
    body.page-id-397 .kw-sh-wrapper#alle-modelle .kw-sh-archiv-row,
    body.page-id-2972 .kw-sh-wrapper#alle-modelle .kw-sh-archiv-row,
    body.page-id-2973 .kw-sh-wrapper#alle-modelle .kw-sh-archiv-row,
    body.page-id-2974 .kw-sh-wrapper#alle-modelle .kw-sh-archiv-row,
    body.page-id-2975 .kw-sh-wrapper#alle-modelle .kw-sh-archiv-row,
    body.page-id-2976 .kw-sh-wrapper#alle-modelle .kw-sh-archiv-row,
    body.page-id-724 .kw-sh-wrapper#alle-modelle .kw-sh-archiv-row,
    body.page-id-3029 .kw-sh-wrapper#alle-modelle .kw-sh-archiv-row,
    body.page-id-3030 .kw-sh-wrapper#alle-modelle .kw-sh-archiv-row,
    body.page-id-3031 .kw-sh-wrapper#alle-modelle .kw-sh-archiv-row,
    body.page-id-3032 .kw-sh-wrapper#alle-modelle .kw-sh-archiv-row,
    body.page-id-3033 .kw-sh-wrapper#alle-modelle .kw-sh-archiv-row {
        /* .kw-swf .kw-container rechnet in content-box: 1240 max-width +
           2x32 Padding = 1304 Soll-Breite; passt der verfuegbare Platz
           nicht (<=~1304px), clampen die auto-Margins auf 0 und die Zeile
           beginnt am Aussenrand + 32px Padding = 32px Fluchtlinie (Fall
           1280px); passt er (>=~1304px), zentrieren die Margins normal
           (Fall 1440px: 68px je Seite + 32 Padding = 100px). min(1304px,
           100%) mit box-sizing:border-box reproduziert exakt dieselbe
           Zahlenreihe OHNE echten Overflow (wichtig fuer Punkt 1 direkt
           darunter, wo dieselbe Formel eine sichtbare, gerundete Box
           traegt -- ein echter Content-Box-Overflow wuerde deren rechte
           Rundung am Viewport-Rand abschneiden). Messwerte im Bau-Report
           bestaetigen 0px Differenz zur Sidebar-/Sortierzeilen-Kante bei
           1280 UND 1440px. */
        box-sizing: border-box;
        max-width: min(1304px, 100%);
        margin-left: auto;
        margin-right: auto;
        padding-left: 32px;
        padding-right: 32px;
    }
    body.page-id-87 .kw-sh-wrapper#alle-modelle .kw-sh-heading,
    body.page-id-2997 .kw-sh-wrapper#alle-modelle .kw-sh-heading,
    body.page-id-2998 .kw-sh-wrapper#alle-modelle .kw-sh-heading,
    body.page-id-2999 .kw-sh-wrapper#alle-modelle .kw-sh-heading,
    body.page-id-3000 .kw-sh-wrapper#alle-modelle .kw-sh-heading,
    body.page-id-3001 .kw-sh-wrapper#alle-modelle .kw-sh-heading,
    body.page-id-396 .kw-sh-wrapper#alle-modelle .kw-sh-heading,
    body.page-id-2967 .kw-sh-wrapper#alle-modelle .kw-sh-heading,
    body.page-id-2968 .kw-sh-wrapper#alle-modelle .kw-sh-heading,
    body.page-id-2969 .kw-sh-wrapper#alle-modelle .kw-sh-heading,
    body.page-id-2970 .kw-sh-wrapper#alle-modelle .kw-sh-heading,
    body.page-id-2971 .kw-sh-wrapper#alle-modelle .kw-sh-heading,
    body.page-id-397 .kw-sh-wrapper#alle-modelle .kw-sh-heading,
    body.page-id-2972 .kw-sh-wrapper#alle-modelle .kw-sh-heading,
    body.page-id-2973 .kw-sh-wrapper#alle-modelle .kw-sh-heading,
    body.page-id-2974 .kw-sh-wrapper#alle-modelle .kw-sh-heading,
    body.page-id-2975 .kw-sh-wrapper#alle-modelle .kw-sh-heading,
    body.page-id-2976 .kw-sh-wrapper#alle-modelle .kw-sh-heading,
    body.page-id-724 .kw-sh-wrapper#alle-modelle .kw-sh-heading,
    body.page-id-3029 .kw-sh-wrapper#alle-modelle .kw-sh-heading,
    body.page-id-3030 .kw-sh-wrapper#alle-modelle .kw-sh-heading,
    body.page-id-3031 .kw-sh-wrapper#alle-modelle .kw-sh-heading,
    body.page-id-3032 .kw-sh-wrapper#alle-modelle .kw-sh-heading,
    body.page-id-3033 .kw-sh-wrapper#alle-modelle .kw-sh-heading {
        font-size: 32px;
        padding-bottom: 10px;
        margin-bottom: 8px;
    }
    body.page-id-87 .kw-sh-wrapper#alle-modelle .kw-sh-heading::after,
    body.page-id-2997 .kw-sh-wrapper#alle-modelle .kw-sh-heading::after,
    body.page-id-2998 .kw-sh-wrapper#alle-modelle .kw-sh-heading::after,
    body.page-id-2999 .kw-sh-wrapper#alle-modelle .kw-sh-heading::after,
    body.page-id-3000 .kw-sh-wrapper#alle-modelle .kw-sh-heading::after,
    body.page-id-3001 .kw-sh-wrapper#alle-modelle .kw-sh-heading::after,
    body.page-id-396 .kw-sh-wrapper#alle-modelle .kw-sh-heading::after,
    body.page-id-2967 .kw-sh-wrapper#alle-modelle .kw-sh-heading::after,
    body.page-id-2968 .kw-sh-wrapper#alle-modelle .kw-sh-heading::after,
    body.page-id-2969 .kw-sh-wrapper#alle-modelle .kw-sh-heading::after,
    body.page-id-2970 .kw-sh-wrapper#alle-modelle .kw-sh-heading::after,
    body.page-id-2971 .kw-sh-wrapper#alle-modelle .kw-sh-heading::after,
    body.page-id-397 .kw-sh-wrapper#alle-modelle .kw-sh-heading::after,
    body.page-id-2972 .kw-sh-wrapper#alle-modelle .kw-sh-heading::after,
    body.page-id-2973 .kw-sh-wrapper#alle-modelle .kw-sh-heading::after,
    body.page-id-2974 .kw-sh-wrapper#alle-modelle .kw-sh-heading::after,
    body.page-id-2975 .kw-sh-wrapper#alle-modelle .kw-sh-heading::after,
    body.page-id-2976 .kw-sh-wrapper#alle-modelle .kw-sh-heading::after,
    body.page-id-724 .kw-sh-wrapper#alle-modelle .kw-sh-heading::after,
    body.page-id-3029 .kw-sh-wrapper#alle-modelle .kw-sh-heading::after,
    body.page-id-3030 .kw-sh-wrapper#alle-modelle .kw-sh-heading::after,
    body.page-id-3031 .kw-sh-wrapper#alle-modelle .kw-sh-heading::after,
    body.page-id-3032 .kw-sh-wrapper#alle-modelle .kw-sh-heading::after,
    body.page-id-3033 .kw-sh-wrapper#alle-modelle .kw-sh-heading::after {
        width: 50px;
        height: 3px;
    }
    body.page-id-87 .kw-sh-wrapper#alle-modelle .kw-sh-subline,
    body.page-id-2997 .kw-sh-wrapper#alle-modelle .kw-sh-subline,
    body.page-id-2998 .kw-sh-wrapper#alle-modelle .kw-sh-subline,
    body.page-id-2999 .kw-sh-wrapper#alle-modelle .kw-sh-subline,
    body.page-id-3000 .kw-sh-wrapper#alle-modelle .kw-sh-subline,
    body.page-id-3001 .kw-sh-wrapper#alle-modelle .kw-sh-subline,
    body.page-id-396 .kw-sh-wrapper#alle-modelle .kw-sh-subline,
    body.page-id-2967 .kw-sh-wrapper#alle-modelle .kw-sh-subline,
    body.page-id-2968 .kw-sh-wrapper#alle-modelle .kw-sh-subline,
    body.page-id-2969 .kw-sh-wrapper#alle-modelle .kw-sh-subline,
    body.page-id-2970 .kw-sh-wrapper#alle-modelle .kw-sh-subline,
    body.page-id-2971 .kw-sh-wrapper#alle-modelle .kw-sh-subline,
    body.page-id-397 .kw-sh-wrapper#alle-modelle .kw-sh-subline,
    body.page-id-2972 .kw-sh-wrapper#alle-modelle .kw-sh-subline,
    body.page-id-2973 .kw-sh-wrapper#alle-modelle .kw-sh-subline,
    body.page-id-2974 .kw-sh-wrapper#alle-modelle .kw-sh-subline,
    body.page-id-2975 .kw-sh-wrapper#alle-modelle .kw-sh-subline,
    body.page-id-2976 .kw-sh-wrapper#alle-modelle .kw-sh-subline,
    body.page-id-724 .kw-sh-wrapper#alle-modelle .kw-sh-subline,
    body.page-id-3029 .kw-sh-wrapper#alle-modelle .kw-sh-subline,
    body.page-id-3030 .kw-sh-wrapper#alle-modelle .kw-sh-subline,
    body.page-id-3031 .kw-sh-wrapper#alle-modelle .kw-sh-subline,
    body.page-id-3032 .kw-sh-wrapper#alle-modelle .kw-sh-subline,
    body.page-id-3033 .kw-sh-wrapper#alle-modelle .kw-sh-subline {
        font-size: 16px;
        max-width: 64ch;
    }
    /* KW-SH-CRITICAL-DESKTOP-END */
}

/* Landwirt-Variante: schlanker Text-Link statt Button (Gregor 2026-06-02).
   Award-Streifen soll Trust-Signal sein, kein Konkurrent zum Haupt-CTA. */
/* Runde 5 (#1444, Mobil-Rest): diese Regel war in keiner kritischen Kopie --
   banner-dark/render.php haengt $inline_link_html direkt an .kw-landwirt-
   text-1 (Vollgrid-Variante der 3 Sibling-Hubs, NICHT der Archiv-Award-
   Kompaktvariante von forstseilwinde -- die nutzt .kw-archiv-award__cta,
   ein anderes Element). Ohne diese Regel ist der Link vor dem CSS-Nachladen
   ein Default-Inline-Element bei geerbter 17px-Absatzschrift (display:
   inline, kein eigenes Box-Verhalten) statt display:inline-block bei 15px --
   der dadurch abweichende Zeilenumbruch innerhalb des Absatzes verursachte
   den Rest-CLS auf mechanische-seilwinde/funkwinde/quertrommelwinde
   (Diagnose: Layout-Shift-Quellen P.kw-landwirt-text-2/A.kw-landwirt-link,
   forstseilwinde selbst bereits sauber). Hover/Focus bewusst ausgelassen
   (nicht CLS-relevant, gilt erst nach Nutzerinteraktion). 1:1 kopiert, kein
   neuer Wert. */
/* KW-BD-CRITICAL-LINK-START */
.kw-landwirt-link {
    display: inline-block;
    color: rgba(255, 255, 255, 0.92);
    font-family: 'PT Serif', serif;
    font-size: 15px;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.5);
    text-underline-offset: 4px;
    padding: 0;
    background: none;
    border: none;
}
/* KW-BD-CRITICAL-LINK-END */
.kw-landwirt-link:hover,
.kw-landwirt-link:focus {
    color: #fff;
    text-decoration-color: #fff;
}

.kw-container         { max-width: 1200px; margin: 0 auto; }
.kw-container--narrow { max-width: 800px; margin: 0 auto; }
.kw-container--medium { max-width: 1000px; margin: 0 auto; }
.kw-text-center       { text-align: center; }


/* ==========================================================================
   TYPOGRAPHY
   Josefin Sans = Headlines, Labels, Buttons (sans-serif, uppercase, Gewicht)
   PT Serif = Fliesstext, Zitate (serif, lesbar, vertrauenswuerdig)
   ========================================================================== */

/* Issue #1346: Marker fuer render.php-Inline-Extraktion (kw_blocks_critical_css()),
   siehe ausfuehrlichen Kommentar beim Hero-Marker-Block weiter unten (Suche nach
   "HERO BLOCK"). Deckt .kw-overline/.kw-text-body ab, die blocks/intro/render.php
   fuer Typografie-Groesse braucht (mitsamt allen anderen Nutzern dieser geteilten
   Klassen). WICHTIG (Pruefrunde 2, #1346): kein Prosa-Kommentar in dieser Datei
   darf den vollen Delimiter-Wortlaut eines anderen Markers als Fliesstext
   zitieren (nicht einmal als Negativbeispiel) - kw_blocks_critical_css() prueft
   zwar seit dieser Pruefrunde den kompletten Kommentar-Token statt eines nackten
   Substrings, ein zitierter Marker-Name bliebe aber trotzdem eine Stolperfalle
   fuer die naechste Aenderung an dieser Stelle. */
/* KW-INTRO-CRITICAL-TYPO-START */
.kw-overline {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--kw-bordeaux, #97233F);
    margin-bottom: 12px;
    display: block;
}
.kw-overline--light { color: var(--kw-sand, #A79E70); }
.kw-overline--white { color: rgba(255,255,255,0.7); }

.kw-heading-section {
    font-family: 'Josefin Sans', sans-serif;
    font-size: var(--kw-text-xl, 28px);
    font-weight: 700;
    color: var(--kw-body-text, #1A1A1A);
    margin-bottom: var(--kw-space-sm, 16px);
    line-height: 1.2;
}
.kw-heading-block {
    font-family: 'Josefin Sans', sans-serif;
    font-size: var(--kw-text-lg, 20px);
    font-weight: 700;
    color: var(--kw-body-text, #1A1A1A);
    margin-bottom: 12px;
    line-height: 1.3;
}
.kw-text-body {
    font-family: 'PT Serif', serif;
    font-size: var(--kw-text-base, 17px);
    line-height: 1.8;
    /* Dunkel genug fuer gute Lesbarkeit auf weiss/cream (WCAG AA) */
    color: var(--kw-body-text, #3D3824);
}
/* KW-INTRO-CRITICAL-TYPO-END */
.kw-text-lead {
    font-family: 'PT Serif', serif;
    font-size: 19px;
    line-height: 1.7;
    opacity: 0.85;
    max-width: 600px;
    margin: 0 auto 36px;
}
.kw-text-small {
    font-size: 14px;
    color: var(--kw-body-text, #1A1A1A);
}
.kw-text-meta {
    font-size: 13px;
    color: var(--kw-sand, #A79E70);
}


/* ==========================================================================
   BUTTON SYSTEM
   WARUM: Konsistente Buttons ueber alle Blocks.
   Primary = Bordeaux (Haupt-CTA), Outline = fuer dunkle Hintergruende,
   White = auf farbigen Sections, Outline-Dark = auf hellen Sections.
   ========================================================================== */

.kw-btn-group {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}
.kw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid transparent;
}
.kw-btn-primary {
    background: var(--kw-bordeaux, #97233F);
    color: #fff;
    border-color: var(--kw-bordeaux, #97233F);
}
.kw-btn-primary:hover {
    background: var(--kw-bordeaux-dark, #7A1C33);
    border-color: var(--kw-bordeaux-dark, #7A1C33);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(151,35,63,0.3);
}
.kw-btn-outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,0.5);
}
.kw-btn-outline:hover {
    background: rgba(255,255,255,0.1);
    border-color: #fff;
    color: #fff;
}
.kw-btn-outline-dark {
    background: transparent;
    color: var(--kw-body-text, #1A1A1A);
    border-color: var(--kw-body-text, #1A1A1A);
}
.kw-btn-outline-dark:hover {
    background: var(--kw-bordeaux, #97233F);
    border-color: var(--kw-bordeaux, #97233F);
    color: #fff;
}
.kw-btn-white {
    background: #fff;
    color: var(--kw-bordeaux, #97233F);
    border-color: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.kw-btn-white:hover {
    background: var(--kw-cream, #F5F0EB);
    color: var(--kw-bordeaux, #97233F);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}


/* ==========================================================================
   PLACEHOLDER IMAGE
   WARUM: Sauberer Platzhalter wenn Gregor noch kein Bild hochgeladen hat.
   ========================================================================== */

.kw-placeholder-img {
    background: var(--kw-cream, #F5F0EB);
    border: 2px dashed var(--kw-sand-light, #C4BD9E);
    border-radius: var(--kw-radius, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--kw-text-muted, #7A7460);
    font-family: 'Josefin Sans', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    aspect-ratio: 4/3;
    min-height: 200px;
}


/* ==========================================================================
   HERO BLOCK
   WARUM: Grosses Bild = Emotion. Erster Eindruck entscheidet in 3 Sekunden
   ob ein B2B-Besucher bleibt oder geht.
   ========================================================================== */

/* Issue #1346: Marker fuer render.php-Inline-Extraktion (kw_blocks_critical_css()
   in kw-blocks.php). WARUM: kw-blocks-css laedt async (media="print"+onload) -
   blocks/hero/render.php und blocks/hero-combined/render.php lesen den Abschnitt
   zwischen START/END per file_get_contents() aus und drucken ihn synchron als
   <style> ins <head>, damit Container/Bild ab dem ersten Paint korrekt stehen
   (siehe Issue #1346). Single Source of Truth bleibt diese Datei - render.php
   dupliziert nichts von Hand. Die START/END-Marker muessen JEWEILS ALLEIN in
   ihrer Zeile stehen (keine weitere Kommentar-Prosa danach), sonst landet
   Kommentartext ungefiltert im ausgelesenen CSS-Block. */
/* KW-HERO-CRITICAL-START */
.kw-hero {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    overflow: hidden;
}
/* Hintergrundbild als <img> statt CSS background-image — ermoeglicht srcset + LCP-Optimierung */
.kw-hero__bg-img,
.kw-hero-slider__bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    display: block;
}
.kw-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* overlay_opacity ACF-Feld (0-100%) setzt --kw-hero-overlay-strength auf dem Parent */
    background: linear-gradient(
        to top,
        rgba(0,0,0,var(--kw-hero-overlay-strength, 0.65)) 0%,
        rgba(0,0,0,calc(var(--kw-hero-overlay-strength, 0.65) * 0.5)) 50%,
        rgba(0,0,0,calc(var(--kw-hero-overlay-strength, 0.65) * 0.2)) 100%
    );
}
@media (max-width: 480px) {
    .kw-hero__overlay {
        background: linear-gradient(
            to top,
            rgba(0,0,0,var(--kw-hero-overlay-strength-mobile, 0.75)) 0%,
            rgba(0,0,0,calc(var(--kw-hero-overlay-strength-mobile, 0.75) * 0.5)) 50%,
            rgba(0,0,0,calc(var(--kw-hero-overlay-strength-mobile, 0.75) * 0.2)) 100%
        );
    }
}
.kw-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 3rem 2rem;
    max-width: 900px;
    width: 100%;
}
.kw-hero__eyebrow {
    display: inline-block;
    margin: 0 0 12px;
    padding: 4px 12px;
    background: var(--kw-bordeaux, #800020);
    color: #fff;
    font-family: var(--kw-font-display, 'Josefin Sans', sans-serif);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 4px;
}
.kw-hero__title {
    font-family: 'Josefin Sans', sans-serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    /* Sentence-Case nach Handoff-Mockup 2026-05-04 (vorher uppercase per Memory) */
    text-transform: none;
    letter-spacing: 0;
    color: #fff;
    margin: 0 0 0.75rem;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.kw-hero__subtitle {
    font-family: 'PT Serif', serif;
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255,255,255,0.9);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    margin: 0 0 2rem;
}
/* KW-HERO-CRITICAL-END */


/* ==========================================================================
   HERO SLIDER BLOCK
   WARUM: Mehrere Key-Messages rotieren. Autoplay haelt die Seite lebendig.
   ========================================================================== */

.kw-hero-slider {
    position: relative;
    min-height: 600px;
    overflow: hidden;
}
.kw-hero-slider__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 0;
    z-index: 1;
    transition: opacity 0.8s ease;
    pointer-events: none;
}
/* WARUM nicht mehr "position: relative" beim active Slide:
   Slide dann intrinsische Hoehe = Content-Hoehe ~ 350-400px, aber Slider-
   Container hat min-height: 600px → unten ~200px leerer Raum sichtbar
   (= weisser Balken). Loesung: alle Slides absolute, sichtbarer hat nur
   hoeheren z-index + opacity 1 + pointer-events an. Container-Hoehe
   bestimmt sich allein ueber min-height, unabhaengig vom aktiven Slide. */
.kw-hero-slider__slide.active {
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
}
.kw-hero-slider__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.32) 50%, rgba(0,0,0,0.13) 100%);
}
.kw-hero-slider__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 3rem 2rem;
    max-width: 900px;
    width: 100%;
}
.kw-hero-slider__title {
    font-family: 'Josefin Sans', sans-serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    margin: 0 0 1.25rem;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.kw-hero-slider__subtitle {
    font-family: 'PT Serif', serif;
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.4;
    color: rgba(255,255,255,0.9);
    margin: 0 0 2rem;
}
/* Navigation Dots */
.kw-hero-slider__dots {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 12px;
}
.kw-hero-slider__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    border: 2px solid rgba(255,255,255,0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}
.kw-hero-slider__dot.active,
.kw-hero-slider__dot:hover {
    background: #fff;
    border-color: #fff;
    transform: scale(1.2);
}
/* Navigation Arrows */
.kw-hero-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0,0,0,0.3);
    color: #fff;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kw-hero-slider__arrow:hover { background: rgba(0,0,0,0.6); }
.kw-hero-slider__arrow--prev { left: 2rem; }
.kw-hero-slider__arrow--next { right: 2rem; }


/* ==========================================================================
   SECTION HEADING BLOCK
   WARUM: Klare visuelle Trennung zwischen Sektionen.
   Bordeaux-Akzent-Linie unter der Headline = CI-Wiedererkennungswert.
   ========================================================================== */

.kw-sh-wrapper {
    text-align: center;
    padding: 20px 40px 48px;
    max-width: 900px;
    margin: 0 auto;
}
.kw-sh-heading {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 40px;
    color: var(--kw-body-text, #3D3824);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 24px;
    margin: 0 0 16px;
    line-height: 1.2;
    /* #1274 (A4): lange/zusammengesetzte Woerter (DE-Komposita, FR-Langwoerter)
       hatten urspruenglich keine Umbruch-Regel und wurden am Viewport-Rand
       hart abgeschnitten statt umzubrechen.
       #1278/#1283 Fix-Runde 2 (Loch nach der Nachbesserung f9584b31): hyphens
       stand hier auf auto und traf JEDE .kw-sh-heading-Instanz siteweit
       (Standard + --archiv + #alle-modelle), auch ausserhalb von
       .kw-manual-group -- z.B. /danke-angebot-seilwinde/, wo hyphens:auto auf
       dem uppercase-Text sichtbar falsch trennte ("AN-FRAGE" statt "ANFRAGE").
       Die Nachbesserung in blocks/manual-group/style.css deckte nur die
       .kw-manual-group-Instanzen ab, nicht diese globale Basis-Regel. Jetzt
       hier direkt auf manual gesetzt -- gilt automatisch fuer ALLE
       .kw-sh-heading sitewide, die Manual-Group-Override bleibt als
       redundante, aber harmlose Bestaetigung stehen.
       #1278/#1283 Fix-Runde 3 (Regression aus 1.8.33, blinder Pruef-FAIL):
       overflow-wrap:anywhere von #1274 blieb hier stehen und griff jetzt
       zusammen mit hyphens:manual -- das Ergebnis war ein strichloser
       Wortriss mitten im Wort ("FORSTSEILWIN/DEN" auf /forstseilwinde/ bei
       375px), obwohl #1278 P4 genau das verbietet (kein Trennstrich UND kein
       striktloser Riss). Der eigentliche Overflow-Schutz kommt jetzt aus der
       responsiven Schriftgroesse (siehe .kw-sh-wrapper#alle-modelle
       .kw-sh-heading im mobilen Media-Query weiter unten, clamp() statt
       fixer 36px) -- lange Einzelwoerter muessen bei 375px durch kleinere
       Schrift passen, nicht durch Wort-Zerreissen. overflow-wrap:normal
       laesst Woerter daher notfalls allein auf einer Zeile stehen, statt sie
       an beliebiger Stelle zu brechen. */
    overflow-wrap: normal;
    hyphens: manual;
}
/* WARUM ::after: Bordeaux-Akzentlinie gibt dem Heading visuelles Gewicht
   und verknuepft es mit der Markenfarbe */
.kw-sh-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--kw-bordeaux, #97233F);
    border-radius: 2px;
}
/* Runde 5 (#1444, Mobil-Rest): diese generische Basisregel war in keiner
   kritischen Kopie -- section-heading/render.php inlinet bisher nur die
   #alle-modelle-spezifischen Deltas (font-size/max-width, KW-SH-CRITICAL-
   BASE) und den --archiv-Override (margin-left/right:0, KW-SH-CRITICAL-
   ARCHIV), nie diese Basis selbst. Ohne sie fehlt vor dem CSS-Nachladen
   "margin: 0 auto" -- der Browser greift auf sein UA-Default fuer <p>
   zurueck (margin-block ~1em, bei 17px Schrift ~17px), Subline bekommt
   einen zusaetzlichen Boden-Rand, der nach dem Nachladen verschwindet
   (Diagnose, Playwright, async-CSS blockiert, 375px: marginBottom 17px vor
   vs. 0px nach dem Nachladen, alle 4 Hubs). Fix: 1:1 kopiert, kein neuer
   Wert. */
/* KW-SH-CRITICAL-SUBLINEBASE-START */
.kw-sh-subline {
    font-family: 'PT Serif', serif;
    font-size: 18px;
    /* Besserer Kontrast auf weiss/cream */
    color: var(--kw-body-text, #3D3824);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.7;
}
/* KW-SH-CRITICAL-SUBLINEBASE-END */

/* Hub-Filter-Heading-Variante (#alle-modelle): wirkt als Mini-Hero über dem
   Seilwinden-Filter — größere Schrift, mehr Höhe, Hero-Ersatz auf den Bauart-Hubs.
   Gregor 2026-06-02. */
/* KW-SH-CRITICAL-BASE-START */
.kw-sh-wrapper#alle-modelle {
    padding: 88px 40px 56px;
    max-width: 1000px;
}
.kw-sh-wrapper#alle-modelle .kw-sh-heading {
    font-size: 56px;
    padding-bottom: 28px;
    margin-bottom: 24px;
}
.kw-sh-wrapper#alle-modelle .kw-sh-heading::after {
    width: 80px;
    height: 4px;
}
.kw-sh-wrapper#alle-modelle .kw-sh-subline {
    font-size: 20px;
    max-width: 720px;
}
/* KW-SH-CRITICAL-BASE-END */
@media (max-width: 768px) {
    /* KW-SH-CRITICAL-MOBILE-START */
    .kw-sh-wrapper#alle-modelle {
        padding: 56px 20px 36px;
    }
    /* #1278/#1283 Fix-Runde 3: die feste 36px !important passte lange
       Einzelwoerter (18-19 Zeichen, z.B. QUERTROMMELWINDEN/FORSTSEILWINDEN)
       nicht mehr in die 303px Innenbreite des H1 bei 375px, seit
       overflow-wrap oben auf normal steht (Wort darf nicht mehr strichlos
       brechen) -- vorher kaschierte overflow-wrap:anywhere das Passform-
       Problem durch Wort-Zerreissen. Jetzt clamp() fluessig zwischen 375px
       (22px, gemessen: QUERTROMMELWINDEN 287px / ELEKTROHYDRAULISCHE 294px
       passen in die 303px Innenbreite) und 768px (36px, unveraendert), damit
       auch das laengste bekannte Vergleichswort (ELEKTROHYDRAULISCHE,
       19 Zeichen) bei 375px einzeilig passt, ohne zu klein zu werden.
       Formel: 8.64px + 3.56vw (linear 375px->22px / 768px->36px). */
    .kw-sh-wrapper#alle-modelle .kw-sh-heading {
        font-size: clamp(22px, 8.64px + 3.56vw, 36px) !important;
    }
    .kw-sh-wrapper#alle-modelle .kw-sh-subline {
        font-size: 17px;
    }
    /* KW-SH-CRITICAL-MOBILE-END */
}

/* ==========================================================================
   ISSUE #1384 Vollausbau — Kategorieseite /forstseilwinde/ nach Designer-
   Vorlage (reports/issue-1382/designer-lieferung-2-uebergabe/
   kategorieseite-desktop.html). Alle Klassen hier (.kw-archiv-*) werden nur
   gerendert, wenn render.php die aktuelle Seite als einen der 6 WPML-IDs
   (87/2997/2998/2999/3000/3001) erkennt (banner-dark, section-heading) —
   das PHP-Gate IST die Scope-Grenze, kein zusaetzliches body.page-id-*-CSS
   noetig wie im urspruenglichen #1384-Fix oben. Baut additiv auf diesem
   ersten Fix auf, ersetzt ihn nicht (alte Regeln bleiben unschaedlich liegen,
   da ihre Selektoren fuer die neue Archiv-Variante nicht mehr greifen).
   Mobile-first: Basis stapelt Kennzahlen unauffaellig unter H1, ab 1024px
   wird's die Zeile rechts neben H1/Untertitel (Ticket-Punkt 1).
   ========================================================================== */
/* KW-SH-CRITICAL-ARCHIV-START */
.kw-sh-wrapper--archiv { text-align: left; margin: 0; max-width: none; }
.kw-sh-archiv-row { display: flex; flex-direction: column; gap: 16px; }
/* KW-SH-CRITICAL-ARCHIV-END */
/* Nachtrag #1444 Runde 2 (Eigen-Smoke, Sibling-Hubs): max-width:58ch fehlte
   in der kritischen Kopie -- ohne sie wrapt die Subline vor dem CSS-Nachladen
   auf voller Containerbreite (weniger Zeilen, niedriger), nach dem Nachladen
   auf 58ch (mehr Zeilen, hoeher) -- gemessener Rest-Shift auf mechanische-
   seilwinde/quertrommelwinde (~0,26-0,27 CLS). */
/* KW-SH-CRITICAL-ARCHIVTEXT-START */
.kw-sh-wrapper--archiv .kw-sh-archiv-text { max-width: 58ch; }
/* KW-SH-CRITICAL-ARCHIVTEXT-END */
.kw-sh-wrapper--archiv .kw-sh-heading,
.kw-sh-wrapper--archiv .kw-sh-subline { text-align: left; margin-left: 0; margin-right: 0; }
.kw-sh-wrapper--archiv .kw-sh-heading::after { left: 0; transform: none; }
/* Nachtrag #1444 (Regressions-Nachmessung, Eigen-Smoke): die Kennzahlen-Zeile
   (kw-sh-archiv-kennzahlen/kw-sh-kz) ist Teil desselben #alle-modelle-Wrappers,
   den section-heading/render.php ausgibt -- ohne eigene kritische Regel bleibt
   sie unstyled (default Block-Stapelung, ~87px hoch), waehrend Heading/Subline
   direkt oben schon per KW-SH-CRITICAL-BASE final gross sind. Dieser Bruch
   erzeugte einen NEUEN, groesseren Sprung (0,39 CLS, Mobil-Nachmessung), als es
   den ohne jede kritische Regel je gab -- unvollstaendige kritische CSS kann
   mehr Sprung erzeugen als gar keine. Fix: Kennzahlen-Zeile in dieselbe
   BASE-Markierung aufgenommen, damit Heading+Subline+Kennzahlen synchron als
   Einheit ankommen. */
/* KW-SH-CRITICAL-BASE2-START */
.kw-sh-archiv-kennzahlen { display: flex; gap: 24px; flex-wrap: wrap; }
.kw-sh-kz { display: flex; flex-direction: column; }
/* KW-SH-CRITICAL-BASE2-END */
/* KW-SH-CRITICAL-BASE3-START */
.kw-sh-kz__val { font-size: 22px; line-height: 1; }
.kw-sh-kz__label { font-size: 10px; margin-top: 5px; }
/* KW-SH-CRITICAL-BASE3-END */
.kw-sh-kz__val { font-family: 'Josefin Sans', sans-serif; font-weight: 700; color: var(--kw-bordeaux, #97233F); }
.kw-sh-kz__label { font-family: 'Josefin Sans', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--kw-text-muted, #5C5C5C); }
@media (min-width: 1024px) {
    /* KW-SH-CRITICAL-DESKTOP2-START */
    .kw-sh-archiv-row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; }
    .kw-sh-archiv-kennzahlen { gap: 32px; flex-shrink: 0; padding-bottom: 4px; }
    .kw-sh-kz__val { font-size: 26px; }
    /* KW-SH-CRITICAL-DESKTOP2-END */
}

/* Award-Zeile kompakt (Punkt 2): Badge + zweizeiliger Text + CTA rechts,
   ersetzt die Vollgrid-Darstellung nur auf den 6 Archiv-Hub-Seiten.
   Mobile-first: hier bleibt die urspruengliche volle Breite unveraendert
   (Gregor: Mobil war ok, nicht verschlimmbessern) -- Punkt 1 (Container-
   Breite + Radius) sitzt in einem eigenen min-width:1024px-Block weiter
   unten, nicht hier in der Basis-Regel. */
/* KW-BD-CRITICAL-AWARDBASE-START */
.kw-archiv-award { background: linear-gradient(135deg, #00502A 0%, #003918 100%); padding: 18px 0; }
.kw-archiv-award__row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.kw-archiv-award__badge {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.7); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Josefin Sans', sans-serif; font-size: 14px; font-weight: 700;
}
.kw-archiv-award__text { flex: 1 1 260px; min-width: 0; }
.kw-archiv-award__line { margin: 0 0 4px; font-family: 'PT Serif', serif; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.9); }
.kw-archiv-award__line:last-child { margin-bottom: 0; }
.kw-archiv-award__cta {
    flex-shrink: 0; display: inline-block; padding: 10px 0;
    font-family: 'Josefin Sans', sans-serif; font-size: 13px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; color: #fff;
    border-bottom: 2px solid rgba(255,255,255,0.6);
    text-decoration: none; white-space: nowrap;
}
/* KW-BD-CRITICAL-AWARDBASE-END */
.kw-archiv-award__line.kw-landwirt-text-2 { color: #fff; font-weight: 700; }
.kw-archiv-award__cta:hover { border-bottom-color: #fff; }

/* Punkt 1, Runde 2 (#1384, 21.08., Gregor wortwoertlich: "wieso ist es so
   schwer, den links und rechts abzuschneiden, dass er gleich breit ist wie
   der Rest der Seite?"). NUR Desktop >=1024px -- Mobil bleibt bewusst
   unveraendert, Gregor: "Mobil war ok, nicht verschlimmbessern". .kw-archiv-
   award ist per PHP-Gate (render.php, $is_archiv_hub, $kw_archiv_hub_ids =
   [87,2997,2998,2999,3000,3001]) schon exklusiv auf den 6 Forstseilwinde-
   Sprachfassungen, kein zusaetzliches body.page-id-Scoping noetig -- und
   KEIN Rollout-Risiko auf die anderen Bauart-Hubs (mechanische-/funk-/
   quertrommelwinden), die denselben Block-Typ nutzen, aber nicht in dieser
   ID-Liste stehen.
   EHRLICHE DIAGNOSE (was der alte Kompromiss war und warum er nicht griff):
   Der vorherige Fix setzte eine FIXE Zahl (max-width:1216px, border-box)
   statt der Formel des Nachbarn (.kw-swf .kw-container: max-width:1240px
   + padding 0 32px, CONTENT-BOX, macht 1304px Gesamtbreite). 1216px wurde
   offenbar bei 1280px Viewport abgemessen und dort per Zufallstreffer exakt
   passend -- bei genau 1280px zwingt der verfuegbare Platz den Container
   naemlich SELBST auf 1216px Inhalt zusammen (1240+64=1304 > 1280
   verfuegbar, also schrumpft der Inhalt auf 1280-64=1216). Bei jedem
   Viewport ab ~1304px greift dagegen Container max-width:1240 ungebremst
   UND FEST -- der Balken blieb bei 1216 statt mitzuwachsen. Nachgemessen
   (Playwright, Vorher-Zustand, gegen die tatsaechliche Content-Kante von
   Sidebar/Grid -- NICHT gegen die eigene Padding-Kante des Containers,
   das war ein erster Rechenfehler in dieser Diagnose): 1280px 0px
   Differenz (Zufall), 1440px UND 1920px je 12px Differenz je Seite,
   konstant (= (1240-1216)/2, waechst mit der Breite nicht weiter, weil
   beide Boxen ab 1304px fest sind). Der alte Kommentar hier hatte diese
   12px schon richtig benannt UND als "bewusste Abweichung" akzeptiert --
   das eigentliche Problem war also nicht ein falscher Messwert, sondern
   dass ein Mensch diese 12px vorher als vertretbar durchgehen liess.
   Gregors Ansage in Runde 2 ist ausdruecklich 0px auf JEDER Breite, keine
   Kompromiss-Toleranz mehr -- deshalb jetzt die Formel statt der Zahl.
   FIX: keine eigene Zahl mehr, sondern dieselbe FORMEL wie der Container
   (1240px Inhalt + 32px Gutter je Seite), nur im border-box-Rechenweg
   ausgedrueckt: max-width: min(1240px, calc(100% - 64px)). Das reproduziert
   bitgenau dieselbe Breite wie .kw-swf .kw-container bei JEDEM Viewport
   >=1024px (nicht nur zufaellig bei einem) -- exakt derselbe Mechanismus,
   den .kw-sh-archiv-row (Punkt 2, weiter oben in dieser Datei) schon
   benutzt (dort min(1304px,100%) inkl. der eigenen 32px-Padding im
   max-width, hier aequivalent als "Content-1240 + 64 Gutter" ausgedrueckt,
   weil hier zusaetzlich ein sichtbarer Hintergrund mit Radius dranhaengt --
   WICHTIG: der braucht einen ECHTEN Rand-Abstand (margin:auto), nicht nur
   Padding auf einer randlosen Box, sonst laege die Rundung direkt auf dem
   Viewport-Rand, unsichtbar; das war der erste, verworfene Versuch mit
   min(1304px,100%) OHNE den -64px-Abzug, siehe Bau-Report Runde 1).
   375px/768px: bereits Δ0 ohne Aenderung (bestehende .is-style-landwirt
   Mobile-Regel + .kw-swf .kw-container nutzen beide hart 20px, nachgemessen
   Runde 2 -- deshalb hier NICHT angefasst). Messwerte vorher/nachher siehe
   Bau-Report dieser Runde. */
@media (min-width: 1024px) {
    /* !important noetig: body.page-id-87 .kw-block-section.is-style-landwirt
       { padding: 14px 40px } (weiter oben, erster #1384-Bau) hat durch
       body+2-Klassen mehr Spezifitaet als dieses einzelne .kw-archiv-award
       und gewann sonst trotz spaeterer Position -- die 40px Seiten-Padding
       frassen sich in die verfuegbare Breite fuer .kw-archiv-award__row
       und verschoben dessen max-width-Rechnung (Bau-Report: erste Messung
       zeigte deshalb 1200px statt 1216px).
       ISSUE #1442: Spezifitaets-Lehre -- die reine Klasse .kw-archiv-award
       (0,1,0) verlor den Wettstreit ums "background" gegen
       .kw-block-section.is-style-landwirt (0,2,0, Zeile ~52, KEINE
       Media-Query -- Specificity zaehlt unabhaengig davon), obwohl sie hier
       spaeter im Quelltext steht: Specificity schlaegt Quellreihenfolge
       immer. Der Aussen-Wrapper behielt dadurch den vollbreiten gruenen
       Verlauf, die gekuerzte Innen-Zeile .kw-archiv-award__row lag
       unsichtbar gruen-auf-gruen darin. Fix: alle 3 realen Klassen des
       Wrappers (render.php Zeile 83) im Selektor, macht (0,3,0) -- schlaegt
       is-style-landwirt UND --army, kein !important auf background noetig. */
    /* KW-BD-CRITICAL-1442R1-START */
    .kw-block-section.is-style-landwirt.kw-archiv-award { background: none; padding: 0 !important; }
    .kw-archiv-award__row {
        background: linear-gradient(135deg, #00502A 0%, #003918 100%);
        max-width: min(1240px, calc(100% - 64px));
        box-sizing: border-box;
        margin-left: auto;
        margin-right: auto;
        padding: 18px 32px;
        border-radius: var(--kw-radius, 12px);
    }
    /* KW-BD-CRITICAL-1442R1-END */
}

/* ISSUE #1442 Runde 2 (22.08.): zweite Testsieg-Variante. Auf allen
   is-style-landwirt-Seiten AUSSER den 6 Forstseilwinde-Archiv-Hubs (die
   nehmen render.php $is_archiv_hub -> return und rendern nie
   .kw-banner-dark-grid, siehe oben) faellt der Block auf die Vollgrid-
   Darstellung zurueck: .kw-block-section.kw-block-section--army.is-style-
   landwirt mit .kw-banner-dark-grid darin, OHNE .kw-archiv-award. Bei 1440px
   rendert die Section randlos gruen ueber die volle Bildschirmbreite
   (Container-Referenz 1304px, Radius 0) -- exakt derselbe Fehler wie
   Runde 1, nur ohne die Archiv-Kompakt-Markup-Klassen. Betroffene Seiten
   (Schau, DB-Abfrage post_content LIKE '%is-style-landwirt%' minus die 6
   Archiv-Hub-IDs, 22.08.): /mechanische-seilwinde/ (ID 396 + 5 WPML:
   2967-2971), /funkwinde/ (ID 397 + 5 WPML: 2972-2976), /quertrommelwinde/
   (ID 724 + 5 WPML: 3029-3033), Startseite/Home (ID 119 + 5 WPML:
   3024-3028) -- 24 Seiten insgesamt.
   FIX (gleiches Muster wie Runde 1, kein neues Wrapper-Element in render.php
   noetig): .kw-banner-dark-grid ist bereits der natuerliche Innen-Container
   (Analogon zu .kw-archiv-award__row) und traegt schon max-width:1200px
   OHNE Media-Query (Zeile ~61-69, Spezifitaet 0,3,0). Aussen-Wrapper
   verliert sein Hintergrund + horizontales Padding, das bisherige
   32px-40px-Padding wandert komplett auf den Innen-Container, der jetzt
   selbst den Farbverlauf + die 1240er-Formel + Radius traegt -- Summe
   der Innenabstaende bleibt gleich (kein Sprung), nur die gruene Flaeche
   selbst wird schmaler + rund. :not(.kw-archiv-award) hebt die
   Spezifitaet auf 0,3,0 (Aussen) bzw. 0,4,0 (Innen) -- schlaegt sicher
   sowohl die unscoped .kw-block-section.is-style-landwirt-Basisregel
   (0,2,0, Zeile ~52) als auch --army (0,2,0), Lehre aus Runde 1.
   <1024px: kein Selektor hier, Mobil unveraendert (Gregor: "Mobil war ok"). */
@media (min-width: 1024px) {
    /* KW-BD-CRITICAL-1442R2-START */
    .kw-block-section.is-style-landwirt:not(.kw-archiv-award) {
        background: none;
        padding: 0;
    }
    .kw-block-section.is-style-landwirt:not(.kw-archiv-award) .kw-banner-dark-grid {
        background: linear-gradient(135deg, #00502A 0%, #003918 100%);
        max-width: min(1240px, calc(100% - 64px));
        box-sizing: border-box;
        margin-left: auto;
        margin-right: auto;
        padding: 32px 40px;
        border-radius: var(--kw-radius, 12px);
    }
    /* KW-BD-CRITICAL-1442R2-END */
}

/* ISSUE #1442 Runde 3 (22.08.): Startseite-Ausnahme. Runde 2s Formel oben
   (max-width:min(1240px,calc(100% - 64px))) repliziert den Filter-Container
   (.kw-swf .kw-container: 1240px + 32px Gutter) -- passt bitgenau auf die
   4 Bauart-Hubs (mechanische-seilwinde/funkwinde/quertrommelwinde + EN,
   Δ0 nachgemessen), weil die dort denselben Filter-Container als
   Fluchtlinien-Referenz haben. Die Startseite hat KEINEN Filter -- ihr
   Content-Rahmen ist .kw-intro-grid (Zeile ~2375: max-width:1200px;
   padding:0 clamp(1rem,3vw,2rem); KEIN box-sizing:border-box, also
   Default content-box), das selbst in .kw-block-section (padding:100px
   var(--kw-space-lg)) sitzt -- --kw-space-lg ist in tokens.css GLOBAL
   48px (nicht die 40px-Fallback-Zahl im var()-Aufruf hier, die greift nie,
   weil die Custom Property existiert). Gemessen (Playwright, echte
   getBoundingClientRect() von .kw-intro-grid, Chrome-UA): 1184px @1280
   (ungecappt, faellt mit dem verfuegbaren Platz), 1264px @1440 (gecappt:
   1200 Inhalt + 2×32 Padding, clamp(1rem,3vw,2rem) ist ab ~1067px fix
   32px). Beides reproduziert exakt durch max-width:min(1264px,calc(100%
   - 96px)) -- 96 = 2× --kw-space-lg (48), weil der Fuell-Fall (VP<~1198)
   dem verfuegbaren Innenraum von .kw-intro-grid entspricht (Section-
   Padding 48 je Seite abgezogen) und der Cap-Fall (VP>=~1198) exakt
   .kw-intro-grid's eigenem max-width+Padding-Deckel entspricht (1200+64).
   ANDERS ALS beim .kw-intro-grid-Original: box-sizing bleibt hier
   border-box (von der Runde-2-Regel oben geerbt, hier nicht neu gesetzt,
   Cascade ist pro Eigenschaft) -- die neue max-width wirkt dadurch direkt
   auf die GESAMT-Aussenkante (Content+Padding), das bestehende 32px/40px-
   Innenpadding aus Runde 2 bleibt unveraendert (nur die Aussenkante muss
   zur Seite passen, nicht der interne Gutter). Erster Versuch (content-
   box + Padding-Werte 1:1 von .kw-intro-grid kopiert) ergab bei 1280 eine
   NOCH groessere Abweichung (Balken 1264px vs. Rahmen 1184px, weil der
   Balken-Wrapper 0px Section-Padding hat -- Runde 2 -- und .kw-intro-grid
   40/48px Section-Padding; im Fuell-Fall bricht das Werte-Kopieren, im
   Cap-Fall nicht) -- durch eigene Messung vor dem Deploy gefunden und
   korrigiert, siehe .foreman-scratch/measure-1442-r3.mjs.
   Scope: NUR die 6 WPML-Fassungen der Startseite (page-id-119 DE + 3024
   EN/3025 FR/3026 IT/3027 CS/3028 PL -- ueber apply_filters
   ('wpml_get_element_translations', null, 119, 'post_page') auf dem
   Server verifiziert, 22.08.). Selektor-Muster (body.page-id-*
   .kw-block-section...) aus #1384 uebernommen, Spezifitaet (0,4,0)
   schlaegt die unscoped Runde-2-Regel (0,3,0, direkt oberhalb) UND die
   Basisregel (0,2,0, Zeile ~52). Die 4 Bauart-Hubs (+ EN) sind hier NICHT
   gelistet -- Runde-2-Formel bleibt dort exakt wie vorher wirksam, kein
   Rollout-Risiko.
   <1024px: kein Selektor hier, Mobil unveraendert (Gregor: "Mobil war ok"). */
@media (min-width: 1024px) {
    /* KW-BD-CRITICAL-1442R3-START */
    body.page-id-119 .kw-block-section.is-style-landwirt:not(.kw-archiv-award) .kw-banner-dark-grid,
    body.page-id-3024 .kw-block-section.is-style-landwirt:not(.kw-archiv-award) .kw-banner-dark-grid,
    body.page-id-3025 .kw-block-section.is-style-landwirt:not(.kw-archiv-award) .kw-banner-dark-grid,
    body.page-id-3026 .kw-block-section.is-style-landwirt:not(.kw-archiv-award) .kw-banner-dark-grid,
    body.page-id-3027 .kw-block-section.is-style-landwirt:not(.kw-archiv-award) .kw-banner-dark-grid,
    body.page-id-3028 .kw-block-section.is-style-landwirt:not(.kw-archiv-award) .kw-banner-dark-grid {
        max-width: min(1264px, calc(100% - 96px));
    }
    /* KW-BD-CRITICAL-1442R3-END */
}


/* ==========================================================================
   USPs GRID
   WARUM: Kennzahlen auf Army-Hintergrund = sofortiges Vertrauenssignal.
   Sand-farbene Zahlen auf dunkel = hoher Kontrast, faellt sofort ins Auge.
   ========================================================================== */

.kw-usps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    max-width: 1200px;
    margin: 0 auto;
}
.kw-usps-grid__item {
    text-align: center;
    padding: 2rem 1.5rem;
    border-right: 1px solid rgba(255,255,255,0.1);
}
.kw-usps-grid__item:last-child { border-right: none; }
.kw-usps-grid__number {
    font-family: 'Josefin Sans', sans-serif;
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 700;
    color: var(--kw-sand, #A79E70);
    line-height: 1;
    margin-bottom: 0.5rem;
}
.kw-usps-grid__label {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.8);
}


/* ==========================================================================
   CARD BLOCK
   WARUM: Jede Karte = ein Einstiegspunkt (Produktkategorie, Service).
   Hover-Lift + Image-Zoom signalisieren Interaktivitaet.
   ========================================================================== */

.kw-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: var(--kw-radius, 12px);
    overflow: hidden;
    box-shadow: var(--kw-shadow-sm, 0 2px 8px rgba(76,71,38,0.06));
    transition: transform var(--kw-transition, 0.35s ease), box-shadow var(--kw-transition, 0.35s ease);
}
.kw-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--kw-shadow-md, 0 8px 24px rgba(76,71,38,0.08));
    color: inherit;
}
/* WARUM Issue #398: 4/5 statt 3/2 — Konsistenz mit Archive-Cards
   (.kw-archive .kw-card__image, siehe Theme style.css, Issue #317/#345/#369).
   Card-grid Block wird auf den Bauart-Hubs (/forstseilwinde/,
   /mechanische-seilwinde/, /zubehoer/) in wp-block-columns gerendert und
   muss visuell zur Seilwinden-Archive (4/5 Freisteller) passen.
   `.kw-card__image-wrap` wird ausschliesslich vom card-grid Block verwendet
   (verifiziert per grep), daher Global-Update unbedenklich. */
.kw-card__image-wrap {
    overflow: hidden;
    aspect-ratio: 4/5;
}
/* WARUM Issue #369: Selektor scoped auf .kw-card__image-wrap, weil Archive-
   Templates (archive-seilwinde.php, archive-forstgeraet.php) `.kw-card__image`
   als Wrapper-DIV verwenden, NICHT als img. Vorher war diese Regel global
   (width/height 100% object-fit cover) — das hat den Archive-Wrapper kollabiert
   und einen `!important`-Stack im Theme erzwungen. */
/* WARUM Rueckbau auf object-fit:cover (#970-Foreman, Regression-Fix): der
   vorherige Bau hatte hier pauschal auf contain umgestellt, um freigestellte
   Produktfotos nicht anzuschneiden -- das hat aber JEDE Karte getroffen,
   auch die Querformat-Einsatzfotos (z.B. /praxis/, kgd-60-lc-action.jpg
   1800x1200 im 4:5-Hochformat-Rahmen): 47% Seitenverhaeltnis-Abweichung,
   breite weisse Balken oben/unten auf über 30 Seiten. Cover ist wieder die
   Grundregel (Einsatzfotos formatfuellend zugeschnitten); die freigestellten
   Produktfotos bekommen stattdessen gezielt .kw-card--produktfoto (unten). */
.kw-card__image-wrap .kw-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.kw-card:hover .kw-card__image-wrap .kw-card__image {
    transform: scale(1.05);
}
/* WARUM (#970-Foreman): gezielte Ausnahme fuer freigestellte Produktfotos
   (Hochformat, weisser Hintergrund, z.B. Holzgreifer/Verladezange/
   Buendelgeraet-Modellkarten) statt der vorherigen Pauschal-Umstellung.
   Klasse kommt vom Gutenberg className-Feld (render.php reicht sie durch),
   wird also gezielt pro Karte gesetzt, nicht global. Contain zeigt das
   Geraet vollstaendig, der weisse Hintergrund fuellt den Rand.

   WARUM zusaetzlich 4/3 statt des globalen 4/5: die freigestellten
   Produktfotos der Anbaugeraete sind Querformat (gemessen 2048x1536).
   Im 4:5-Rahmen liesse contain oben und unten je rund 74px leer, das Geraet
   schrumpft ohne Not. Mit 4/3 fuellt das Foto den Rahmen fast genau aus:
   nichts angeschnitten, kein Weissraum-Graben. Alle Produktkarten teilen
   dasselbe Verhaeltnis, die Karten in einer Reihe bleiben also gleich hoch. */
.kw-card--produktfoto .kw-card__image-wrap {
    aspect-ratio: 4/3;
}
.kw-card--produktfoto .kw-card__image-wrap .kw-card__image {
    object-fit: contain;
    background: #fff;
}
.kw-card__body {
    padding: 1.5rem;
}
.kw-card__title {
    font-family: 'Josefin Sans', sans-serif;
    font-size: var(--kw-text-lg, 20px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--kw-body-text, #1A1A1A);
    margin: 0 0 0.5rem;
}
.kw-card__text {
    font-family: 'PT Serif', serif;
    font-size: 15px;
    /* Besserer Kontrast als olive (#65551C) auf weissem Card-Hintergrund */
    color: var(--kw-body-text, #3D3824);
    line-height: 1.7;
    margin: 0 0 1rem;
}
.kw-card__cta {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    color: var(--kw-bordeaux, #97233F);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Issue #377 — Hub-Variante: Card ohne Bild (icon-only).
   ACF-Toggle card_hide_image setzt die Klasse. Kein PHP-Hardcode. */
.kw-card--no-image .kw-card__image-wrap { display: none; }

/* Issue #377 — Cards in core/columns: gleiche Hoehe.
   wp-block-column ist flex (Gutenberg), Card streckt sich auf volle Spaltenhoehe.
   Cards ohne Bild + Cards mit Bild stehen so auf gleicher Baseline.
   Issue #467: Selector :has(> .kw-card) eingeschränkt, sonst werden ALLE
   core/columns-Spalten zu Flex-Row und brechen Text-Layouts (Kontakt-Seite!). */
.wp-block-columns > .wp-block-column:has(> .kw-card) { display: flex; flex-direction: column; }
.wp-block-columns > .wp-block-column > .kw-card { flex: 1 1 auto; display: flex; flex-direction: column; }
.wp-block-columns > .wp-block-column > .kw-card > .kw-card__body { flex: 1 1 auto; }

/* Issue #417 — Homepage „Welche Bauart passt zu dir?" — 4-Card-Grid
   WAS: Override wp-block-columns Flex-Verhalten mit echtem CSS-Grid.
   WARUM: Gutenberg-Default rendert 4 Spalten ab 782px gleichmaessig — auf
   Tablet/Desktop-Engstellen quetscht das die Cards auf <240px, Headlines
   wie „QUERTROMMEL" brechen wortweise.
   MOBILE (<640px): 1-Spalte gestapelt.
   TABLET (640–1023px): 2x2.
   DESKTOP (>=1024px): 4-in-Reihe, Card-Mindestbreite 260px.
   Scoped per Klasse .kw-bauart-grid (in Page-Markup gesetzt), greift nicht
   global in andere wp-block-columns ein. */
.kw-bauart-grid.wp-block-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
/* Specificity-Override gegen Theme-Regel `#primary.kw-main > [class*="kw-"]` (1,2,0 mit !important).
   Hier (1,3,0) gewinnt — nur max-width, damit Media-Queries für grid-template-columns intact bleiben.
   Issue #592 (2026-05-23): Die Theme-Regel setzt zusätzlich `margin-left:-1.5rem; margin-right:-1.5rem`
   mit !important — das schob die Bauart-Karten am Desktop linksbündig (right empty ~500px bei 1710vw).
   Margin-inline:auto hier überschreiben, damit das Grid bei viewport > 1200px zentriert bleibt. */
#primary.kw-main > .kw-bauart-grid.wp-block-columns {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.kw-bauart-grid.wp-block-columns > .wp-block-column {
    flex: none;
    width: 100%;
    margin: 0;
}
@media (min-width: 640px) {
    .kw-bauart-grid.wp-block-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .kw-bauart-grid.wp-block-columns {
        grid-template-columns: repeat(4, minmax(260px, 1fr));
    }
}
/* Cards in der Bauart-Grid auf volle Spaltenhoehe strecken (gleiche Baseline). */
.kw-bauart-grid > .wp-block-column { display: flex; }
.kw-bauart-grid > .wp-block-column > .kw-card,
.kw-bauart-grid > .wp-block-column > a.kw-card {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Issue #451 — Bauart-Kacheln gleich gross + kompakter
   WAS: image-wrap aspect 16/10 (statt 4/5), kompakter Body, Card max-height.
   WARUM: Mit 4/5 wurden die Kacheln auf Desktop ~746px hoch — zu dominant
   im Verhaeltnis zur Text-Hierarchie. Ziel: <=520px Desktop, einheitliches
   Aspect-Ratio, Platzhalter im neutralen Stil (kein dashed Foto-folgt-Look).
   Scoped auf .kw-bauart-grid — andere card-grid-Einsaetze (4/5) bleiben unberuehrt. */
.kw-bauart-grid .kw-card__image-wrap {
    aspect-ratio: 16 / 10;
    max-height: 240px;
}
.kw-bauart-grid .kw-card__image-wrap .kw-placeholder-img {
    /* Konsistenter, neutraler Platzhalter — wie placeholder-* (auto-grayscale-Pattern).
       Keine dashed Border, kein „Foto folgt"-Schreienden Look. */
    aspect-ratio: 16 / 10;
    min-height: 0;
    height: 100%;
    width: 100%;
    border: none;
    border-radius: 0;
    background: linear-gradient(135deg, var(--kw-cream, #F5F0EB) 0%, var(--kw-sand-light, #C4BD9E) 100%);
    color: transparent;
    filter: grayscale(1);
    opacity: 0.85;
}
.kw-bauart-grid .kw-card__body {
    padding: 1.25rem 1.25rem 1.5rem;
}
.kw-bauart-grid .kw-card {
    max-height: 520px;
}
@media (max-width: 639px) {
    .kw-bauart-grid .kw-card {
        max-height: none;
    }
}


/* ==========================================================================
   TESTIMONIAL CARD
   WARUM: Kundenstimmen = Social Proof. B2B-Kaeufer vertrauen Peer-Meinungen
   mehr als Marketing-Texten. Bordeaux-Top-Border = Markenakzent.
   ========================================================================== */

.kw-testimonial-card {
    background: #fff;
    border-radius: var(--kw-radius, 12px);
    padding: 2rem;
    box-shadow: var(--kw-shadow-sm, 0 2px 8px rgba(76,71,38,0.06));
    border-top: 3px solid var(--kw-bordeaux, #97233F);
    transition: transform var(--kw-transition, 0.35s ease), box-shadow var(--kw-transition, 0.35s ease);
    position: relative;
}
.kw-testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--kw-shadow-md, 0 8px 24px rgba(76,71,38,0.08));
}
.kw-testimonial-card__quote-mark {
    font-family: 'PT Serif', serif;
    font-size: 4rem;
    line-height: 1;
    color: var(--kw-sand-light, #C4BD9E);
    margin-bottom: -1rem;
    display: block;
}
.kw-testimonial-card__text {
    font-family: 'PT Serif', serif;
    font-size: var(--kw-text-base, 17px);
    font-style: italic;
    color: var(--kw-body-text, #3D3824);
    line-height: 1.7;
    margin: 0 0 1.25rem;
}
.kw-testimonial-card__author {
    font-family: 'Josefin Sans', sans-serif;
    font-size: var(--kw-text-sm, 14px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--kw-body-text, #1A1A1A);
    margin: 0;
}


/* ==========================================================================
   CTA BLOCK
   WARUM: Klare Handlungsaufforderung am Ende jeder Seite.
   Bordeaux-Gradient = auffaellig, warm, einladend.
   Dekorativer ::before Kreis = visuelles Interesse ohne Ablenkung.
   ========================================================================== */

.kw-cta-block__overline {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 12px;
    display: block;
    color: var(--kw-sand, #A79E70);
}


/* ==========================================================================
   TRUST ITEM
   WARUM: Einzelne Trust-Punkte (Garantie, Qualitaet) in einer Bar.
   ========================================================================== */

.kw-trust-item {
    padding: 1.5rem;
}
.kw-trust-item__headline {
    font-family: 'Josefin Sans', sans-serif;
    font-size: var(--kw-text-lg, 20px);
    font-weight: 700;
    color: var(--kw-body-text, #1A1A1A);
    margin: 0 0 0.5rem;
}
.kw-trust-item__text {
    font-family: 'PT Serif', serif;
    font-size: 15px;
    color: var(--kw-body-text, #3D3824);
    line-height: 1.7;
    margin: 0;
}


/* ==========================================================================
   BANNER DARK
   WARUM: Army-Gradient = professionell, ernsthaft.
   2-Spalten Layout = Text + Bild/Content nebeneinander.
   ========================================================================== */

/* Nachtrag #1444 Runde 2 (Eigen-Smoke deckte Regression auf): diese
   GENERISCHE Basis-Regel (display:grid + Spalten) wurde in der ersten
   kritischen Kopie uebersehen -- die .is-style-landwirt-scoped Regel weiter
   oben (KW-BD-CRITICAL-BASE) setzt zwar max-width/gap/align-items neu, aber
   NIE display:grid/grid-template-columns selbst (die kommen ausschliesslich
   von hier). Ohne sie blieb die Bildspalte bis zum echten CSS-Nachladen ein
   normaler Block in voller Breite (Bild object-fit:cover reagiert auf die
   Breite -> andere Rendered-Hoehe), erzeugte einen NEUEN, groesseren
   Sprung (~0,38-0,45 CLS Desktop) als der isolierte #alle-modelle-Rest je
   hatte. Marker KW-BD-CRITICAL-GRID, gleiches Prinzip wie Nachtrag Runde 1
   (unvollstaendige kritische CSS kann mehr Sprung erzeugen als gar keine). */
/* KW-BD-CRITICAL-GRID-START */
.kw-banner-dark-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}
/* KW-BD-CRITICAL-GRID-END */


/* ==========================================================================
   INQUIRY FORM BLOCK
   WARUM: Kontaktformular = primaerer Conversion-Punkt.
   Dekorativer Kreis im Hintergrund = visuelles Premium-Feeling.
   ========================================================================== */

.kw-inquiry {
    padding: var(--kw-space-section, 100px) var(--kw-space-lg, 40px);
    position: relative;
    overflow: hidden;
}
/* Dekorativer Hintergrund-Kreis */
.kw-inquiry::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
    pointer-events: none;
}
.kw-inquiry__inner {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.kw-inquiry__header {
    text-align: center;
    margin-bottom: 40px;
}
.kw-inquiry__title {
    font-family: 'Josefin Sans', sans-serif;
    font-size: var(--kw-text-2xl, 36px);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    color: inherit;
}
.kw-inquiry__subline {
    font-family: 'PT Serif', serif;
    font-size: 18px;
    line-height: 1.7;
    margin: 0;
    opacity: 0.85;
}
.kw-inquiry__success {
    text-align: center;
    padding: 40px 0;
}
.kw-inquiry__success-icon {
    font-size: 48px;
    margin-bottom: 16px;
}
.kw-inquiry__success h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-size: var(--kw-text-xl, 28px);
    margin-bottom: 12px;
}
.kw-inquiry__success p {
    font-size: 18px;
    opacity: 0.85;
}
.kw-inquiry__error {
    background: rgba(196,36,59,0.12);
    border: 1px solid rgba(196,36,59,0.3);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 24px;
    text-align: center;
}
.kw-inquiry__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.kw-inquiry__field {
    margin-bottom: 16px;
}
.kw-inquiry__field--full {
    margin-bottom: 24px;
}
.kw-inquiry__label {
    display: block;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}
.kw-inquiry__input,
.kw-inquiry__textarea {
    width: 100%;
    padding: 14px 16px;
    border-radius: 6px;
    font-family: 'PT Serif', serif;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.kw-inquiry__input:focus,
.kw-inquiry__textarea:focus {
    outline: none;
    border-color: var(--kw-sand, #A79E70) !important;
    box-shadow: 0 0 0 2px rgba(167,158,112,0.3);
}
.kw-inquiry__textarea { resize: vertical; }
.kw-inquiry__submit-wrap { text-align: center; }
.kw-inquiry__submit {
    border: none;
    padding: 16px 48px;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.kw-inquiry__submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.kw-inquiry__phone-hint {
    text-align: center;
    margin-top: 20px;
}
.kw-inquiry__phone-hint p {
    font-size: 14px;
    margin: 0;
}
.kw-inquiry__phone-hint a {
    font-weight: 600;
    text-decoration: none;
}
.kw-honeypot {
    position: absolute;
    left: -9999px;
}

/* Inquiry Farbvarianten — Gradients fuer Premium-Feeling */
.kw-inquiry--bordeaux { background: var(--kw-gradient-cta, linear-gradient(135deg, #97233F, #7A1C33)); color: #fff; }
.kw-inquiry--bordeaux .kw-inquiry__subline { color: var(--kw-cream, #F5F0EB); }
.kw-inquiry--bordeaux .kw-inquiry__label { color: rgba(255,255,255,0.8); }
.kw-inquiry--bordeaux .kw-inquiry__input,
.kw-inquiry--bordeaux .kw-inquiry__textarea { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.2); }
.kw-inquiry--bordeaux .kw-inquiry__submit { background: #fff; color: var(--kw-bordeaux, #97233F); }
.kw-inquiry--bordeaux .kw-inquiry__phone-hint p { color: rgba(255,255,255,0.8); }
.kw-inquiry--bordeaux .kw-inquiry__phone-hint a { color: var(--kw-sand, #A79E70); }

.kw-inquiry--cream { background: var(--kw-cream, #F5F0EB); color: var(--kw-body-text, #1A1A1A); }
.kw-inquiry--cream .kw-inquiry__subline { color: var(--kw-body-text, #1A1A1A); }
.kw-inquiry--cream .kw-inquiry__label { color: var(--kw-body-text, #1A1A1A); }
.kw-inquiry--cream .kw-inquiry__input,
.kw-inquiry--cream .kw-inquiry__textarea { background: #fff; color: var(--kw-body-text, #1A1A1A); border: 1px solid var(--kw-border, #DDD5C8); }
.kw-inquiry--cream .kw-inquiry__submit { background: var(--kw-bordeaux, #97233F); color: #fff; }
.kw-inquiry--cream .kw-inquiry__phone-hint a { color: var(--kw-bordeaux, #97233F); }

.kw-inquiry--white { background: #fff; color: var(--kw-body-text, #1A1A1A); }
.kw-inquiry--white .kw-inquiry__subline { color: var(--kw-body-text, #1A1A1A); }
.kw-inquiry--white .kw-inquiry__label { color: var(--kw-body-text, #1A1A1A); }
.kw-inquiry--white .kw-inquiry__input,
.kw-inquiry--white .kw-inquiry__textarea { background: #fff; color: var(--kw-body-text, #1A1A1A); border: 1px solid var(--kw-border, #DDD5C8); }
.kw-inquiry--white .kw-inquiry__submit { background: var(--kw-bordeaux, #97233F); color: #fff; }
.kw-inquiry--white .kw-inquiry__phone-hint a { color: var(--kw-bordeaux, #97233F); }

.kw-inquiry--army { background: var(--kw-gradient-dark, linear-gradient(135deg, #4C4726, #3A3520)); color: #fff; }
.kw-inquiry--army .kw-inquiry__subline { color: var(--kw-cream, #F5F0EB); }
.kw-inquiry--army .kw-inquiry__label { color: rgba(255,255,255,0.8); }
.kw-inquiry--army .kw-inquiry__input,
.kw-inquiry--army .kw-inquiry__textarea { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.2); }
.kw-inquiry--army .kw-inquiry__submit { background: #fff; color: var(--kw-bordeaux, #97233F); }
.kw-inquiry--army .kw-inquiry__phone-hint a { color: var(--kw-sand, #A79E70); }

/* Inquiry Platzhalter (wenn noch kein echtes Formular) */
.kw-inquiry__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

/*
 * Formular-Platzhalter-Banner
 * WAS:  Dezenter Hinweis, dass das echte Fluent-Forms-Formular noch kommt.
 * WARUM: Besucher sehen: hier gehoert ein Formular hin. E-Mail bleibt Fallback.
 * TODO: Entfernen sobald Fluent Forms eingebunden ist.
 */
.kw-form-placeholder {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 24px;
    border: 1px dashed rgba(255,255,255,0.35);
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-family: 'Josefin Sans', sans-serif;
    max-width: 520px;
}
.kw-form-placeholder strong {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #fff;
}
.kw-form-placeholder span {
    font-size: 14px;
    font-family: 'PT Serif', serif;
    font-style: italic;
    opacity: 0.85;
    line-height: 1.5;
}
.kw-inquiry__placeholder-btn {
    display: inline-block;
    padding: 16px 36px;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    border-radius: 6px;
    background: #fff;
    color: var(--kw-bordeaux, #97233F);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    transition: all var(--kw-transition, 0.35s ease);
}
.kw-inquiry__placeholder-btn:hover {
    background: var(--kw-cream, #F5F0EB);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    color: var(--kw-bordeaux, #97233F);
}
.kw-inquiry__placeholder-hint {
    font-size: 13px;
    opacity: 0.6;
    margin: 0;
}


/* ==========================================================================
   STEP GUIDE BLOCK
   WARUM: Nummerierte Schritte = Klarheit. Besucher sehen sofort den Prozess.
   Bordeaux-Kreise mit Shadow = visuell prominent.
   ========================================================================== */

.kw-step-guide {
    padding: 80px 40px;
    background: #fff;
}
.kw-step-guide__inner {
    max-width: 900px;
    margin: 0 auto;
}
.kw-step-guide__header {
    text-align: center;
    margin-bottom: 48px;
}
.kw-step-guide__item {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 24px;
    margin-bottom: 40px;
    position: relative;
}
.kw-step-guide__item--with-image {
    grid-template-columns: 60px 1fr 200px;
}
.kw-step-guide__indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.kw-step-guide__number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--kw-bordeaux, #97233F);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(151,35,63,0.3);
}
.kw-step-guide__line {
    width: 2px;
    flex: 1;
    background: var(--kw-border, #DDD5C8);
    margin-top: 8px;
}
.kw-step-guide__title {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 20px;
    color: var(--kw-body-text, #3D3824);
    margin: 8px 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.kw-step-guide__text {
    font-family: 'PT Serif', serif;
    font-size: 16px;
    color: var(--kw-body-text, #1A1A1A);
    line-height: 1.7;
    margin: 0;
}
.kw-step-guide__image {
    border-radius: var(--kw-radius-sm, 8px);
    overflow: hidden;
}
.kw-step-guide__image img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: var(--kw-shadow-sm, 0 2px 8px rgba(76,71,38,0.06));
}


/* ==========================================================================
   TEAM BLOCK
   WARUM: Menschen zeigen = Vertrauen aufbauen. B2B-Kunden kaufen von Menschen.
   ========================================================================== */

.kw-team {
    padding: 80px 40px;
    background: var(--kw-cream, #F5F0EB);
}
.kw-team__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.kw-team__group {
    margin-bottom: 48px;
}
.kw-team__group-name {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--kw-bordeaux, #97233F);
    margin-bottom: 24px;
    text-align: center;
}
.kw-team__grid {
    display: grid;
    gap: 32px;
}
.kw-team__grid--2 { grid-template-columns: repeat(2, 1fr); }
.kw-team__grid--3 { grid-template-columns: repeat(3, 1fr); }
.kw-team__grid--4 { grid-template-columns: repeat(4, 1fr); }
.kw-team__member {
    text-align: center;
    padding: 32px 24px;
    background: #fff;
    border-radius: var(--kw-radius, 12px);
    box-shadow: var(--kw-shadow-sm, 0 2px 8px rgba(76,71,38,0.06));
    transition: all var(--kw-transition, 0.35s ease);
}
.kw-team__member:hover {
    box-shadow: var(--kw-shadow-md, 0 8px 24px rgba(76,71,38,0.08));
    transform: translateY(-4px);
}
.kw-team__photo-wrap {
    border-radius: var(--kw-radius, 12px);
    overflow: hidden;
    margin-bottom: 16px;
}
.kw-team__photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto;
    display: block;
    border: 3px solid var(--kw-cream, #F5F0EB);
}
.kw-team__name {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--kw-body-text, #3D3824);
    margin: 0 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.kw-team__role {
    font-family: 'PT Serif', serif;
    font-size: 14px;
    color: var(--kw-body-text, #1A1A1A);
    margin: 0 0 8px;
}
.kw-team__email {
    font-size: 13px;
    color: var(--kw-bordeaux, #97233F);
    text-decoration: none;
}
.kw-team__email:hover { text-decoration: underline; }


/* ==========================================================================
   FAQ BLOCK
   WARUM: Haeufige Fragen beantwortet = weniger Support-Anfragen.
   Gruppierung nach Themen = leichter zu navigieren.
   ========================================================================== */

.kw-faq-block {
    /* Abstand nach oben via padding: das Theme nullt margin-top auf allen
       direkten Kindern von #primary.kw-main (#primary.kw-main > *), padding aber nicht.
       Daher padding-top statt margin-top, damit der FAQ-Block nicht am
       Vorgänger-Block klebt (#899). */
    padding: 104px 0 0;
}
@media (max-width: 782px) {
    .kw-faq-block {
        padding-top: 72px;
    }
}
.kw-faq-block__inner {
    max-width: 800px;
    margin: 0 auto;
}
/* #1274-Nachpunkt (Rundgang 10, Punkt D, Gregor woertlich: "zehn Pixel links
   und zehn Pixel rechts wuerde guttun"): .kw-faq-block traegt die Klasse
   kw-faq-block (matcht [class*='kw-']) und wird daher von der Full-Bleed-
   Regel in components.css (#primary.kw-main > [class*='kw-']:not(.kw-sh-
   wrapper)) randlos auf Viewport-Breite gezogen. .kw-faq-block__inner hat
   selbst kein horizontales Padding, nur max-width:800px -- unter 800px
   Viewport (also durchgehend mobil) wird die Box dadurch randlos, Fragen-
   Text UND die "Haeufige Fragen"-Ueberschrift kleben am Bildschirmrand.
   Fix eng gescoped: 10px Innenabstand nur unter 768px (Site-Breakpoint,
   selber Wert wie --kw-main-pad-Umschaltung), betrifft ausschliesslich
   diesen Block sitewide (acf/kw-faq laeuft auf allen Produkt-/Hub-Seiten
   mit FAQ-Bereich, ueberall gleich betroffen -- keine Seiten-Ausnahme noetig). */
@media (max-width: 768px) {
    .kw-faq-block__inner {
        padding: 0 10px;
    }
}
.kw-faq-block__group {
    margin-bottom: 40px;
}
.kw-faq-block__group-title {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--kw-border, #DDD5C8);
}
.kw-faq-block__group-title.kw-color-bordeaux {
    color: var(--kw-bordeaux, #97233F);
    border-bottom-color: var(--kw-bordeaux, #97233F);
}
.kw-faq-block__group-title.kw-color-olive {
    color: var(--kw-body-text, #1A1A1A);
    border-bottom-color: var(--kw-body-text, #1A1A1A);
}
.kw-faq-answer {
    padding: 0 24px 20px;
    color: var(--kw-body-text, #1A1A1A);
    font-size: 15px;
    line-height: 1.8;
}
.kw-faq-block__cta {
    margin-top: 24px;
    text-align: center;
}


/* ==========================================================================
   DEALER LIST BLOCK
   WARUM: Haendler nach Land sortiert = leicht zu finden.
   Bordeaux border-left = visueller Akzent und CI-Wiedererkennungswert.
   ========================================================================== */

.kw-dealer-list {
    padding: 80px 40px;
    background: #fff;
}
.kw-dealer-list__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.kw-dealer-list__country {
    margin-bottom: 40px;
}
.kw-dealer-list__country-name {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 24px;
    color: var(--kw-body-text, #3D3824);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--kw-border, #DDD5C8);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.kw-dealer-list__grid,
.kw-dealer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.kw-dealer-card {
    background: #fff;
    border-radius: var(--kw-radius-sm, 8px);
    padding: 24px;
    box-shadow: var(--kw-shadow-sm, 0 2px 8px rgba(76,71,38,0.06));
    border-left: 4px solid var(--kw-bordeaux, #97233F);
    transition: all var(--kw-transition, 0.35s ease);
}
.kw-dealer-card:hover {
    box-shadow: var(--kw-shadow-md, 0 8px 24px rgba(76,71,38,0.08));
    transform: translateY(-2px);
}
.kw-dealer-card__name {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--kw-body-text, #3D3824);
    margin: 0 0 4px;
}
.kw-dealer-card__address {
    font-family: 'PT Serif', serif;
    font-size: 14px;
    color: var(--kw-body-text, #1A1A1A);
    line-height: 1.6;
    margin: 0 0 12px;
}
.kw-dealer-card__links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.kw-dealer-card__link {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--kw-bordeaux, #97233F);
    text-decoration: none;
}
.kw-dealer-card__link:hover {
    text-decoration: underline;
}


/* ==========================================================================
   DOWNLOAD LIST BLOCK
   WARUM: Downloads brauchen klare Dateiinfo + Typ-Icon.
   Hover mit Bordeaux-Border = Feedback + Markenakzent.
   ========================================================================== */

.kw-download-list {
    padding: 60px 40px;
    background: var(--kw-cream, #F5F0EB);
}
.kw-download-list__inner {
    max-width: 800px;
    margin: 0 auto;
}
.kw-download-list__header {
    text-align: center;
    margin-bottom: 32px;
}
.kw-download-list__grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.kw-download-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #fff;
    border-radius: var(--kw-radius-sm, 8px);
    box-shadow: var(--kw-shadow-sm, 0 2px 8px rgba(76,71,38,0.06));
    text-decoration: none;
    color: var(--kw-body-text, #3D3824);
    transition: all var(--kw-transition, 0.35s ease);
    border: 1px solid transparent;
}
.kw-download-row:hover {
    border-color: var(--kw-bordeaux, #97233F);
    box-shadow: var(--kw-shadow-md, 0 8px 24px rgba(76,71,38,0.08));
    transform: translateX(4px);
    color: var(--kw-body-text, #3D3824);
}
.kw-download-row__icon {
    font-size: 24px;
    flex-shrink: 0;
}
.kw-download-row__info { flex: 1; }
.kw-download-row__name {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--kw-body-text, #1A1A1A);
}
.kw-download-row__size {
    font-size: 12px;
    color: var(--kw-text-muted, #7A7460);
}
.kw-download-row__label {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--kw-bordeaux, #97233F);
    font-weight: 600;
    flex-shrink: 0;
}


/* ==========================================================================
   COMPARE TABLE BLOCK
   WARUM: Vergleichstabelle = schnelle Orientierung fuer technische Einkaufer.
   Bordeaux Highlight-Spalte = Empfehlung visuell hervorheben.
   MOBIL (#970-Foreman, Ablösung von #1270 Variante B): die fruehere
   Flex-Zeilen-Tabelle brach bei mehr als zwei Modellspalten -- Werte
   rutschten in eigene Zeilen, die Hervorhebung verlor die Spaltenzuordnung
   (bestaetigt bei 4 Spalten auf /holzgreifer/, 375px). Neue Loesung: eine
   ZWEITE Markup-Struktur (kw-compare-table__cards, aus render.php, eine
   Karte je Modell) ersetzt die Tabelle unter 768px komplett. Die <table>
   bleibt fuer SEO/Screenreader im DOM, wird mobil nur per CSS versteckt.
   Ab 768px (min-width-Block weiter unten) unveraendert wie vor #970.
   ========================================================================== */

.kw-compare-table {
    padding: 40px 20px;
    background: var(--kw-cream, #F5F0EB);
}
.kw-compare-table__inner {
    max-width: 1000px;
    margin: 0 auto;
}
.kw-compare-table__header {
    text-align: center;
    margin-bottom: 32px;
}
/* Fussnote (#1362, ct_footnote): gedaempfter Hinweistext unter Tabelle/Karten,
   z.B. Stand/Bedingungen. Optional, rendert nur wenn gefuellt. */
.kw-compare-table__footnote {
    margin: 16px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--kw-text-muted, #666);
    text-align: center;
}
/* Tabelle mobil ausblenden -- die Karten (unten) uebernehmen die Anzeige. */
.kw-compare-table__scroll {
    display: none;
}
.kw-compare-table table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 8px;
    background: #fff;
}
.kw-highlight-col-header {
    background: var(--kw-bordeaux, #97233F) !important;
    color: #fff;
}
.kw-highlight-col {
    background: rgba(151,35,63,0.04) !important;
    font-weight: 600;
}

/* Angebot-Zeile (#970-Foreman): letzte Tabellenzeile, ein Link je Spalte,
   nur vorhanden wenn ct_cta_serie gefuellt ist. Bordeaux + fett hebt den CTA
   vom Fliesstext ab. */
.kw-compare-table__cta {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    padding: 0 12px;
    color: var(--kw-bordeaux, #97233F);
    font-weight: 700;
    text-decoration: none;
}
/* KEINE Weiss-Regel fuer .kw-highlight-col: die hervorgehobene SPALTE hat auf
   dem Schreibtisch nur rgba(151,35,63,0.04), also einen Hauch Bordeaux auf
   Weiss (siehe Regel weiter oben) -- nur der Spaltenkopf und die Mobil-Karte
   sind voll Bordeaux. Weisse Schrift waere hier unsichtbar. Bordeaux bleibt. */

/* Karten-Layout (<768px) -- eine Karte je Modell, Merkmale als
   Beschriftung/Wert-Paare untereinander. Funktioniert unabhaengig von der
   Spaltenzahl (1 Spalte auf /hilfsseilwinde/, 2 auf /polterschild/ und den
   KoenigShield-Seiten, 4 auf /holzgreifer/). */
.kw-compare-table__cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.kw-compare-table__card {
    background: #fff;
    border-radius: 12px; /* #1382 3.1 Optik-Veredelung: 8px -> 12px (Vorlagen-Wert), Mechanik unveraendert */
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12); /* #1382 3.1: Karten-Look der Vorlage (block-vergleichstabelle.html) */
}
/* Hervorhebung wandert von der Spalte (Desktop) auf die ganze Karte (Mobil). */
.kw-compare-table__card--highlight {
    background: var(--kw-bordeaux, #97233F);
    color: #fff;
}
/* Karte = natives <details> (#1364 Foreman): Titel ist die <summary>, Marker
   in beiden Browsern unterdrueckt (Muster 1:1 aus .kw-faq-block .kw-faq__q),
   eigenes Plus/Minus-Icon uebernimmt die Aufklapp-Anzeige. */
.kw-compare-table__card-title {
    margin: 0;
    min-height: 64px; /* #1382 3.1: Vorlagen-Wert (Tap-Ziel-Komfort), Mechanik unveraendert */
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    list-style: none;
}
.kw-compare-table__card-title::-webkit-details-marker { display: none; }
.kw-compare-table__card-title-text { flex: 1; text-align: left; }
.kw-compare-table__card-plus {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 400;
    font-size: 19px;
    color: var(--kw-bordeaux, #97233F);
    flex-shrink: 0;
    /* #1382 3.1 Optik-Veredelung: drehender Pfeil statt Plus/Minus-Textwechsel
       (Vorlagen-Wert block-vergleichstabelle.html __pfeil), reines CSS,
       Aufklapp-Mechanik (details/summary, [open]-Selektor) unveraendert. */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.kw-compare-table__card-plus::before { content: '\25BE'; } /* ▾ */
.kw-compare-table__card[open] .kw-compare-table__card-plus { transform: rotate(180deg); }
.kw-compare-table__card-body {
    padding: 0 20px 16px;
}
/* Ueberschrift auf der Bordeaux-Karte war dunkel: eine globale h1-h6-Regel
   (Theme) setzt eine eigene Textfarbe auf das <h3> und schlaegt damit die
   vererbte weisse Farbe von .kw-compare-table__card--highlight. Explizit
   Weiss setzen, damit der Modellname auf Bordeaux lesbar bleibt (Label und
   Wert darunter sind Spans ohne eigene Farbregel und erben bereits weiss). */
.kw-compare-table__card--highlight .kw-compare-table__card-title {
    color: #fff;
}
.kw-compare-table__card--highlight .kw-compare-table__card-plus {
    color: #fff;
}
.kw-compare-table__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 8px 0;
    border-bottom: 1px solid var(--kw-cream, #F5F0EB);
}
.kw-compare-table__row:last-child {
    border-bottom: none;
}
/* Auf der Bordeaux-Karte muss die Trennlinie hell bleiben, sonst verschwindet sie. */
.kw-compare-table__card--highlight .kw-compare-table__row {
    border-bottom-color: rgba(255, 255, 255, 0.25);
}
.kw-compare-table__row-label {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    font-size: 13px;
}
.kw-compare-table__row-value {
    font-size: 15px;
    text-align: right;
}
/* Angebot-Knopf am Kartenende (#970-Foreman), nur wenn ct_cta_serie gefuellt
   ist. Zentriert, ueber die volle Kartenbreite, Bordeaux + fett wie der
   Desktop-CTA (kw-compare-table__cta). */
.kw-compare-table__card-cta {
    display: block;
    width: 100%;
    margin-top: 12px;
    min-height: 44px;
    line-height: 44px;
    text-align: center;
    color: var(--kw-bordeaux, #97233F);
    font-weight: 700;
    text-decoration: none;
}
/* Auf der Bordeaux-Karte ist Bordeaux-Text unlesbar. Weiss waere lesbar, aber
   die ganze Karte ist bereits weiss beschriftet -- der CTA saehe aus wie
   Fliesstext. Gregors Ansage war ausdruecklich "in einer anderen Farbe ... weil
   das ist ja der CTA". Darum das Marken-Hellbeige: klar unterscheidbar vom
   weissen Kartentext, Kontrast 5,4:1 auf Bordeaux (AA). Spezifisch genug
   gesetzt, weil globale Regeln ausserhalb dieser Datei Links einfaerben --
   gleiches Muster wie bei .kw-compare-table__card-title. */
.kw-compare-table__card--highlight .kw-compare-table__card-cta {
    color: var(--kw-sand-light, #E2D2BB);
}

/* Ab Tablet/Desktop: klassische Tabelle wie vor #970, unveraendert. */
@media (min-width: 768px) {
    .kw-compare-table {
        padding: 60px 40px;
    }
    /* Umschalten: Tabelle zeigen, Karten verstecken. */
    .kw-compare-table__cards {
        display: none;
    }
    .kw-compare-table__scroll {
        display: block;
        overflow-x: auto; /* Mechanik unveraendert -- Pflicht fuer breite Tabellen (7 Spalten /forstseilwinde/) */
        -webkit-overflow-scrolling: touch;
        /* #1382 3.1 Optik-Veredelung: Karten-Rahmen um die Tabelle (Vorlagen-Wert
           block-vergleichstabelle.html __tabelle), reine Optik, overflow-x bleibt
           fuer breite Tabellen erhalten. */
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        background: #fff;
    }
    .kw-compare-table table {
        display: table;
        overflow: hidden;
    }
    .kw-compare-table thead {
        display: table-header-group;
    }
    .kw-compare-table thead tr {
        display: table-row;
    }
    .kw-compare-table thead th:first-child {
        display: table-cell;
    }
    .kw-compare-table th {
        display: table-cell;
        flex: none;
        min-height: 0;
        font-size: 13px;
        letter-spacing: 1px;
        text-align: left;
        padding: 16px;
        box-shadow: none;
        background: var(--kw-cream, #F5F0EB); /* #1382 3.1: Vorlagen-Wert, .kw-highlight-col-header (!important) gewinnt weiterhin */
    }
    .kw-compare-table tbody {
        display: table-row-group;
    }
    .kw-compare-table tbody tr {
        display: table-row;
        flex-wrap: nowrap;
        padding: 0;
        border-bottom: none;
    }
    /* #1382 3.1: Zeilen-Hover (Vorlagen-Wert), betrifft nur die Optik beim Ueberfahren */
    .kw-compare-table tbody tr:hover td:not(.kw-highlight-col) {
        background: var(--kw-cream-dark, #EDE5DC);
    }
    .kw-compare-table__label {
        flex: none;
        order: 0;
        padding: 14px 16px;
        font-size: 14px;
        text-align: left;
    }
    .kw-compare-table td {
        display: table-cell;
        flex: none;
        min-height: 0;
        padding: 14px 16px;
        text-align: left;
        border-bottom: 1px solid var(--kw-cream, #F5F0EB);
    }
    .kw-compare-table tr:last-child td { border-bottom: none; }
}


/* ==========================================================================
   JOB LISTING BLOCK
   WARUM: Stellenanzeigen mit Bordeaux-Akzent und Typ-Badge.
   Border-left = schnelle visuelle Zuordnung.
   ========================================================================== */

.kw-job {
    background: #fff;
    border-radius: var(--kw-radius, 12px);
    padding: 28px 32px;
    margin-bottom: 16px;
    box-shadow: var(--kw-shadow-sm, 0 2px 8px rgba(76,71,38,0.06));
    border-left: 4px solid var(--kw-bordeaux, #97233F);
    transition: all var(--kw-transition, 0.35s ease);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.kw-job:hover {
    box-shadow: var(--kw-shadow-md, 0 8px 24px rgba(76,71,38,0.08));
    transform: translateY(-2px);
}
.kw-job__header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.kw-job__title {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--kw-body-text, #3D3824);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.kw-job__badge {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 12px;
    border-radius: 20px;
    color: #fff;
    display: inline-block;
}
.kw-job__badge--vollzeit   { background: var(--kw-success, #2D6A4F); }
.kw-job__badge--teilzeit   { background: var(--kw-sand, #A79E70); }
.kw-job__badge--praktikum  { background: var(--kw-bordeaux-light, #B02A4A); }
.kw-job__badge--lehre      { background: var(--kw-bordeaux, #97233F); }
.kw-job__location {
    font-family: 'PT Serif', serif;
    font-size: 14px;
    color: var(--kw-body-text, #1A1A1A);
    margin: 0;
}
.kw-job__description {
    font-family: 'PT Serif', serif;
    font-size: 15px;
    color: var(--kw-body-text, #1A1A1A);
    line-height: 1.7;
    margin: 0;
}


/* ==========================================================================
   ANCHOR NAV BLOCK
   WARUM: Sticky Navigation fuer lange Seiten (Service, Produkte).
   Weisser Hintergrund mit Pill-Buttons = sauber, nicht aufdringlich.
   ========================================================================== */

.kw-anchor-nav {
    position: sticky;
    top: 80px;
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid var(--kw-border, #DDD5C8);
    box-shadow: var(--kw-shadow-sm, 0 2px 8px rgba(76,71,38,0.06));
}
.kw-anchor-nav__inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    gap: 4px;
    padding: 12px 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.kw-anchor-nav__link {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--kw-body-text, #1A1A1A);
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 20px;
    white-space: nowrap;
    transition: all var(--kw-transition, 0.35s ease);
}
.kw-anchor-nav__link:hover,
.kw-anchor-nav__link.active {
    background: var(--kw-bordeaux, #97233F);
    color: #fff;
}


/* ==========================================================================
   CONTENT SECTION BLOCK
   WARUM: Bild + Text nebeneinander = visuell abwechslungsreich.
   Wechselnde Seiten (reversed) halten den Lesefluss spannend.
   ========================================================================== */

.kw-content-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
}
.kw-content-section--reversed {
    direction: rtl;
}
.kw-content-section--reversed > * {
    direction: ltr;
}
.kw-content-section__image {
    border-radius: var(--kw-radius, 12px);
    overflow: hidden;
    box-shadow: var(--kw-shadow-md, 0 8px 24px rgba(76,71,38,0.08));
}
.kw-content-section__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
}
/* Issue #962: Hilfsseilwinden-Einsatzfoto — Bildausschnitt hoeher ziehen, damit der
   Helm nicht mehr angeschnitten wird (ca. 10% Kopffreiheit ueber dem Helm).
   Scope per Dateiname auf genau dieses eine Bild, alle anderen content-section-Bilder
   bleiben unveraendert (Default object-position: center). */
.kw-content-section__image img[src*="einsatz-illustration"] {
    object-position: center 15%;
}
/* Issue #466: bewusst ohne Bild — Sektion einspaltig, max-width fuer Lesbarkeit */
.kw-content-section.kw-content-section--no-image {
    grid-template-columns: 1fr;
    max-width: 820px;
}
.kw-content-section--no-image .kw-content-section__text {
    text-align: left;
}
.kw-content-section__text .kw-overline {
    text-align: left;
}
.kw-content-section__text h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: var(--kw-body-text, #1A1A1A);
    margin: 0 0 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.kw-content-section__text .kw-text-body {
    margin-bottom: 1.5rem;
}


/* ==========================================================================
   HOMEPAGE-BLOCKS (v1.2.0)
   ========================================================================== */

/* ===== KW INTRO (2-Spalten) =====
   WARUM: Firmen-Intro baut emotionale Verbindung auf.
   Besucher sollen spueren: Hier arbeiten echte Menschen mit Leidenschaft. */

/* KW-INTRO-CRITICAL-START */
.kw-intro-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
}
.kw-intro-grid--reversed {
    grid-template-columns: 1fr 1.2fr;
}
.kw-intro-grid--reversed .kw-intro-grid__image { order: -1; }
.kw-intro-grid__text h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: var(--kw-body-text, #1A1A1A);
    margin: 0 0 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.kw-intro-grid__text .kw-overline {
    text-align: left;
}
.kw-intro-grid__text .kw-text-body {
    margin-bottom: 1.5rem;
}
.kw-intro-grid__image {
    border-radius: var(--kw-radius, 12px);
    overflow: hidden;
    box-shadow: var(--kw-shadow-md, 0 8px 24px rgba(76,71,38,0.08));
}
.kw-intro-grid__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    object-position: center top;
    display: block;
}
/* Issue #466: bewusst ohne Bild — Intro einspaltig */
.kw-intro-grid.kw-intro-grid--no-image {
    grid-template-columns: 1fr;
    max-width: 820px;
}
/* KW-INTRO-CRITICAL-END */

/* ===== KW LANDWIRT-TESTIMONIAL (1. Platz Vergleichstest) =====
   Der Block (blocks/landwirt-testimonial/render.php) hatte KEINE style.css und stand
   nicht in kw_blocks_style_map() → rendert unstyled (Grid war display:block, Bild
   flush-links, rechts leer). Layout an .kw-intro-grid angeglichen: Copy links, Award-
   Foto rechts, zentrierter 1200er-Container, responsiv 1-spaltig. (2026-07-01) */
.kw-landwirt-testimonial {
    padding: clamp(3rem, 6vw, 5rem) 0;
}
.kw-landwirt-testimonial__grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
}
.kw-landwirt-testimonial__headline {
    font-family: 'Josefin Sans', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: var(--kw-body-text, #1A1A1A);
    margin: 0 0 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.15;
}
.kw-landwirt-testimonial__text {
    margin: 0 0 1.5rem;
    font-family: 'PT Serif', Georgia, serif;
    line-height: 1.6;
    color: var(--kw-body-text, #1A1A1A);
}
.kw-landwirt-testimonial__figure {
    margin: 0;
    border-radius: var(--kw-radius, 12px);
    overflow: hidden;
    box-shadow: var(--kw-shadow-md, 0 8px 24px rgba(76,71,38,0.08));
}
.kw-landwirt-testimonial__img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    object-position: center;
    display: block;
}
@media (max-width: 860px) {
    .kw-landwirt-testimonial__grid { grid-template-columns: 1fr; gap: 2rem; }
    .kw-landwirt-testimonial__copy { text-align: center; }
    .kw-landwirt-testimonial__headline,
    .kw-landwirt-testimonial__text { text-align: center; }
}


/* ===== KW TRUST COUNTER =====
   WARUM: Grosse Zahlen = sofortige Glaubwuerdigkeit.
   Sand-Farbe auf dunklem Grund = maximaler Kontrast. */

.kw-trust-counter {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    max-width: 1200px;
    margin: 0 auto;
}
.kw-trust-counter__item {
    text-align: center;
    padding: 2.5rem 1.5rem;
    border-right: 1px solid rgba(255,255,255,0.1);
}
.kw-trust-counter__item:last-child { border-right: none; }
.kw-trust-counter__number {
    font-family: 'Josefin Sans', sans-serif;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 700;
    color: var(--kw-sand, #A79E70);
    line-height: 1;
    margin-bottom: 0.5rem;
}
.kw-trust-counter__label {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.8);
}


/* ===== KW SPOTLIGHT =====
   WARUM: Konkretes Produkt zeigen statt abstrakte Kategorien.
   Bestseller = sicherster Conversion-Einstieg fuer unentschlossene Besucher. */

.kw-spotlight {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
}
.kw-spotlight__image {
    border-radius: var(--kw-radius, 12px);
    overflow: hidden;
    box-shadow: var(--kw-shadow-lg, 0 16px 48px rgba(76,71,38,0.12));
}
.kw-spotlight__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
}
.kw-spotlight__overline {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--kw-bordeaux, #97233F);
    margin-bottom: 0.75rem;
    display: block;
}
.kw-spotlight__title {
    font-family: 'Josefin Sans', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--kw-body-text, #1A1A1A);
    margin: 0 0 1rem;
}
.kw-spotlight__specs {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.kw-spotlight__spec {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--kw-cream-dark, #EDE5DC);
    font-family: 'PT Serif', serif;
}
.kw-spotlight__spec-label { color: var(--kw-body-text, #1A1A1A); }
.kw-spotlight__spec-value { font-weight: 700; color: var(--kw-body-text, #1A1A1A); }


/* ===== KW PARTNERS =====
   WARUM: Zertifizierungs-Logos (OENORM, CE) sind im B2B Pflicht.
   Grayscale + Hover-Color = elegant, nicht ueberladen. */

.kw-partners {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 1.5rem auto 0;
    padding: 0 clamp(1rem, 3vw, 2rem);
}
.kw-partners__logo {
    height: 50px;
    width: auto;
    filter: grayscale(1) opacity(0.5);
    transition: filter 0.35s ease;
}
.kw-partners__logo:hover {
    filter: grayscale(0) opacity(1);
}


/* ==========================================================================
   PRODUCT FILTER (Taxonomy Archive)
   ========================================================================== */

.kw-filter-bar {
    background: var(--kw-cream, #F5F0EB);
    border-radius: var(--kw-radius, 12px);
    padding: 24px;
    margin-bottom: 32px;
}
.kw-filter-row {
    display: flex;
    gap: 24px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.kw-filter-group {
    flex: 1;
    min-width: 160px;
}
.kw-filter-label {
    display: block;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--kw-body-text, #1A1A1A);
    margin-bottom: 8px;
    font-weight: 600;
}
.kw-filter-range {
    display: flex;
    align-items: center;
    gap: 12px;
}
.kw-filter-range input[type="range"] {
    flex: 1;
    accent-color: var(--kw-bordeaux, #97233F);
    height: 6px;
}
.kw-filter-value {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--kw-body-text, #1A1A1A);
    white-space: nowrap;
    min-width: 80px;
}
.kw-filter-checks {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.kw-filter-check {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 13px;
    color: var(--kw-body-text, #1A1A1A);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}
.kw-filter-check input[type="checkbox"] {
    accent-color: var(--kw-bordeaux, #97233F);
    width: 16px;
    height: 16px;
}
.kw-filter-actions {
    flex: 0;
    min-width: auto;
}
.kw-filter-reset {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--kw-bordeaux, #97233F);
    background: none;
    border: 1px solid var(--kw-bordeaux, #97233F);
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.kw-filter-reset:hover {
    background: var(--kw-bordeaux, #97233F);
    color: #fff;
}
.kw-filter-status {
    margin-top: 12px;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 13px;
    color: var(--kw-body-text, #1A1A1A);
}
.kw-filter-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 24px;
    background: #fff;
    border-radius: var(--kw-radius, 12px);
}
.kw-product-badges {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 8px 0 16px;
    flex-wrap: wrap;
}
.kw-product-badge {
    background: var(--kw-cream, #F5F0EB);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--kw-body-text, #1A1A1A);
    font-weight: 600;
    font-family: 'Josefin Sans', sans-serif;
}

/* Mobile filter toggle */
#kw-filter-toggle {
    display: none;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 24px;
    min-height: 44px;
    background: var(--kw-cream, #F5F0EB);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 16px;
    width: 100%;
    color: var(--kw-body-text, #1A1A1A);
    font-weight: 600;
}


/* ==========================================================================
   ARCHIVE / BREADCRUMB (Taxonomy Template)
   ========================================================================== */

.kw-breadcrumb-bar {
    background: #fff;
    padding: 16px 40px 0;
}
.kw-archive-series-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.kw-series-card {
    background: var(--kw-cream, #F5F0EB);
    border-radius: var(--kw-radius, 12px);
    padding: 32px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
    display: block;
}
.kw-series-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}
.kw-series-card__link {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--kw-bordeaux, #97233F);
    margin-top: 12px;
    display: inline-block;
}
.kw-archive-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}


/* ==========================================================================
   RESPONSIVE — Einheitliche Breakpoints
   480px = Mobile | 768px = Tablet | 1024px = Desktop
   ========================================================================== */

@media (max-width: 768px) {
    /* Layout */
    .kw-block-section { padding: 60px 24px; }

    /* Section Heading */
    .kw-sh-wrapper { padding: 16px 20px 36px; }
    .kw-sh-heading { font-size: 28px !important; }
    .kw-sh-subline { font-size: 16px; }

    /* Hero (Issue #1346, siehe Marker-Kommentar beim Hero-Block weiter oben) */
    /* KW-HERO-CRITICAL-MOBILE-START */
    .kw-hero { min-height: 400px !important; }
    .kw-hero__title { font-size: clamp(1.5rem, 5vw, 2rem); }
    /* KW-HERO-CRITICAL-MOBILE-END */
    .kw-hero-slider { min-height: 400px; }
    .kw-hero-slider__arrow { display: none; }

    /* USPs */
    .kw-usps-grid { grid-template-columns: repeat(2, 1fr); }
    .kw-usps-grid__item { padding: 1.5rem 1rem; }
    .kw-usps-grid__item:nth-child(2) { border-right: none; }

    /* Intro */
    /* KW-INTRO-CRITICAL-MOBILE-START */
    .kw-intro-grid,
    .kw-intro-grid--reversed { grid-template-columns: 1fr; gap: 2rem; }
    .kw-intro-grid--reversed .kw-intro-grid__image { order: 0; }
    .kw-intro-grid__text h2 { text-align: center; }
    .kw-intro-grid__text .kw-overline { text-align: center; }
    /* KW-INTRO-CRITICAL-MOBILE-END */

    /* Content Section */
    .kw-content-section,
    .kw-content-section--reversed { grid-template-columns: 1fr; gap: 2rem; direction: ltr; }

    /* Trust Counter */
    .kw-trust-counter { grid-template-columns: repeat(2, 1fr); }
    .kw-trust-counter__item { padding: 1.5rem 1rem; }
    .kw-trust-counter__item:nth-child(2) { border-right: none; }

    /* Spotlight */
    .kw-spotlight { grid-template-columns: 1fr; gap: 2rem; }

    /* Banner Dark */
    /* KW-BD-CRITICAL-GRIDMOBILE-START */
    .kw-banner-dark-grid { grid-template-columns: 1fr; }
    /* KW-BD-CRITICAL-GRIDMOBILE-END */

    /* Buttons */
    .kw-btn-group { flex-direction: column; align-items: stretch; }
    .kw-btn { text-align: center; }

    /* Step Guide */
    .kw-step-guide { padding: 48px 20px; }
    .kw-step-guide__item { grid-template-columns: 48px 1fr; gap: 16px; }
    .kw-step-guide__item--with-image { grid-template-columns: 48px 1fr; }
    .kw-step-guide__image { grid-column: 1 / -1; }
    .kw-step-guide__number { width: 40px; height: 40px; font-size: 16px; }

    /* Team */
    .kw-team { padding: 48px 20px; }
    .kw-team__grid--3, .kw-team__grid--4 { grid-template-columns: repeat(2, 1fr); }

    /* Dealer */
    .kw-dealer-list { padding: 48px 20px; }
    .kw-dealer-list__grid, .kw-dealer-grid { grid-template-columns: 1fr !important; }

    /* Downloads */
    .kw-download-list { padding: 40px 20px; }
    .kw-download-row { padding: 12px 16px; }

    /* Anchor Nav — tap-target ≥44px (Issue #74) */
    .kw-anchor-nav__inner { padding: 10px 16px; gap: 4px; }
    .kw-anchor-nav__link { font-size: 13px; padding: 10px 16px; min-height: 44px; }

    /* Inquiry */
    .kw-inquiry { padding: 60px 24px; }
    .kw-inquiry__title { font-size: 28px; }
    .kw-inquiry__subline { font-size: 16px; }
    .kw-inquiry__grid { grid-template-columns: 1fr; }

    /* Job */
    .kw-job { padding: 20px 24px; }
    .kw-job__title { font-size: 18px; }
    /* Job badge tap-target ≥44px (Issue #74) */
    .kw-job__badge { padding: 10px 16px; font-size: 13px; min-height: 44px; }

    /* Compare Table: eigene min-width-Regeln in der COMPARE TABLE BLOCK-Sektion
       weiter oben (#1270, Variante B) -- hier keine Overrides mehr noetig. */

    /* Filter */
    #kw-filter-toggle { display: block; }
    .kw-filter-bar { display: none; }
    .kw-filter-bar.kw-filter-open { display: block; }
    .kw-filter-row { flex-direction: column; gap: 16px; }
    .kw-filter-group { min-width: 100%; }

    /* Archive */
    .kw-archive-series-grid { grid-template-columns: 1fr; }
    .kw-breadcrumb-bar { padding: 12px 20px 0; }
}

@media (max-width: 480px) {
    .kw-trust-counter { grid-template-columns: repeat(2, 1fr); }
    .kw-usps-grid { grid-template-columns: repeat(2, 1fr); }
    .kw-team__grid--2, .kw-team__grid--3, .kw-team__grid--4 { grid-template-columns: 1fr; }
    .kw-sh-heading { font-size: 24px !important; }
    .kw-step-guide__title { font-size: 17px; }
}


/* ============================
   KW HÄNDLER — Suche, Karte, Archive
   -----------------------------
   WAS:    Styles fuer den Haendler-Finder (/haendler/), die Regional-Archive-Seiten
           und die wiederverwendbare Haendler-Karte.
   WARUM:  Karte = zentrales Trust-Element (Logo prominent oben, klare Hierarchie,
           einziger CTA "Rueckruf anfordern"). Archive = Premium-B2B-Optik auf Niveau
           der Seilwinden-Seite: Bordeaux-Hero, Cream/White-Wechsel, Count-Badges.
           Alphabetische Flachlistenn sind verboten (principles.md Prinzip 8).
   ============================ */

/* ─── HAENDLER-HERO (Bordeaux-Gradient, alle Archive-Seiten) ─── */
.kw-haendler-hero {
    background: linear-gradient(135deg, #7A1C33 0%, #97233F 60%, #5A1426 100%);
    padding: 64px 24px 56px;
    color: #fff;
}
.kw-haendler-hero__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.kw-haendler-hero__breadcrumb {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.65);
    margin-bottom: 20px;
}
.kw-haendler-hero__breadcrumb a {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    transition: color 0.15s;
}
.kw-haendler-hero__breadcrumb a:hover { color: #fff; }
.kw-haendler-hero__breadcrumb span { color: rgba(255,255,255,0.9); }
.kw-haendler-hero__title {
    font-family: 'Josefin Sans', sans-serif;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.05;
    margin: 0 0 12px;
    color: #fff;
}
.kw-haendler-hero__sub {
    font-family: 'PT Serif', serif;
    font-size: 18px;
    color: rgba(255,255,255,0.82);
    margin: 0;
    line-height: 1.4;
}

/* ─── BUNDESLAND-GRID AUF LAND-EBENE (Cream BG) ─── */
.kw-haendler-region-grid-section {
    background: var(--cream, #F5F0EB);
    padding: 64px 24px;
}
.kw-haendler-region-grid-section__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.kw-haendler-region-grid-section__label {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin: 0 0 24px;
}
.kw-haendler-region-tiles {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.kw-haendler-region-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 18px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 6px;
    text-decoration: none;
    color: #1a1a1a;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s;
}
.kw-haendler-region-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(151,35,63,0.12);
    border-color: var(--bordeaux, #97233F);
}
.kw-haendler-region-tile--empty {
    opacity: 0.55;
    pointer-events: none;
}
.kw-haendler-region-tile__name {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.2;
}
.kw-haendler-region-tile__count {
    font-family: 'PT Serif', serif;
    font-size: 13px;
    color: var(--bordeaux, #97233F);
    font-weight: 400;
}
.kw-haendler-region-tile--empty .kw-haendler-region-tile__count { color: #aaa; }

/* ─── HÄNDLER-GRUPPE (nach Bundesland, White BG) ─── */
.kw-haendler-group {
    background: #fff;
    padding: 64px 24px;
}
.kw-haendler-group + .kw-haendler-group {
    padding-top: 0;
}
.kw-haendler-group__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.kw-haendler-group__heading {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.2;
    color: #1a1a1a;
    margin: 0 0 32px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--cream, #F5F0EB);
}
.kw-haendler-group__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    background: var(--bordeaux, #97233F);
    color: #fff;
    border-radius: 20px;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
}

/* ─── REGION-EBENE: Intro + Cards ─── */
.kw-haendler-intro-section {
    background: var(--cream, #F5F0EB);
    padding: 48px 24px;
}
.kw-haendler-intro-section__inner {
    max-width: 800px;
    margin: 0 auto;
    font-family: 'PT Serif', serif;
    font-size: 17px;
    line-height: 1.7;
    color: #444;
}
.kw-haendler-cards-section {
    background: #fff;
    padding: 72px 24px 80px;
}
.kw-haendler-cards-section__inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* ─── CTA-STRIP (Cream BG, am Ende jedes Archives) ─── */
.kw-haendler-cta-strip {
    background: var(--cream, #F5F0EB);
    padding: 72px 24px;
    text-align: center;
}
.kw-haendler-cta-strip__inner {
    max-width: 600px;
    margin: 0 auto;
}
.kw-haendler-cta-strip__headline {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 26px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.15;
    color: #1a1a1a;
    margin: 0 0 10px;
}
.kw-haendler-cta-strip__sub {
    font-family: 'PT Serif', serif;
    font-size: 17px;
    color: #555;
    margin: 0 0 28px;
    line-height: 1.5;
}

/* ─── HÄNDLER-KARTE (neue vertikale Anatomie) ─── */
.kw-haendler-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
}
.kw-haendler-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-top: 3px solid transparent;
}
.kw-haendler-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(151,35,63,0.13);
    border-top-color: var(--bordeaux, #97233F);
}

/* Logo-Wrap: visueller Anker, Cream-BG, zentriert */
.kw-haendler-card__logo-wrap {
    background: var(--cream, #F5F0EB);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    padding: 24px 20px;
    flex-shrink: 0;
}
.kw-haendler-card__logo-img {
    max-height: 80px;
    max-width: 180px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.kw-haendler-card__logo-fallback {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #97233F 0%, #7A1C33 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 1px;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* Body */
.kw-haendler-card__body {
    flex: 1;
    padding: 22px 22px 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.kw-haendler-card__name {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.2;
    color: #1a1a1a;
    margin: 0 0 10px;
}

/* Produktlinie als Bordeaux-Pills */
.kw-haendler-card__pills {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.kw-haendler-card__pill {
    display: inline-block;
    padding: 3px 10px;
    background: var(--bordeaux, #97233F);
    color: #fff;
    border-radius: 3px;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    line-height: 1.6;
}
/* Fix #1278 Punkt 5: #4a7c2e war weder Landwirt-Testsieg-Gruen noch
   holzquelle-Forest, also Off-Palette -- Farbregel "Gruen nur im
   Vergleichstest-Kontext" gilt hier nicht (Haendler-Chip). Ersetzt durch
   --kw-olive, laut Styleguide ausdruecklich fuer "Badge-Akzent" freigegeben,
   und optisch von der Bordeaux-Basispille + der --importeur-Pille daneben
   unterscheidbar. */
.kw-haendler-card__pill--lager {
    background: var(--kw-olive, #65551C);
}
/* #956 — Generalimporteur-Pille. Dunkles Bordeaux, damit sie sich vom
   Werkstatt-Pill (helleres Bordeaux) daneben abhebt, ohne eine neue Farbe
   einzufuehren. Kein Gruen (Farbregel). */
.kw-haendler-card__pill--importeur {
    background: var(--kw-bordeaux-dark, #7A1C33);
}

/* #1480: Hover-Hinweise antippbar statt nur title-Attribut.
   .kw-haendler-card__pill-item ersetzt das reine <li>-Pillen-Markup 1:1 (gleiche
   Groesse/Abstaende in der Flex-Reihe -- kein Layout-Shift), die Pille selbst ist
   jetzt ein <button>. */
.kw-haendler-card__pill-item {
    position: relative;
    display: inline-flex;
}
/* Button-Reset: sieht exakt wie die bisherige <li>-Pille aus (Farben/Radius/Typo
   oben unveraendert), nur Browser-Chrome (Rand/Hintergrund-Default/Cursor) entfernt. */
.kw-haendler-card__pill {
    position: relative;
    border: 0;
    margin: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.kw-haendler-card__pill:focus-visible {
    outline: 2px solid var(--kw-bordeaux-dark, #7A1C33);
    outline-offset: 2px;
}
/* Unsichtbare Tap-Flaeche >=44px, ueberlagert nur (position:absolute, kein
   Einfluss auf Flex-Fluss/Abstand der Nachbar-Pillen -- kein Layout-Shift). */
.kw-haendler-card__pill::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(44px, 100%);
    height: 44px;
    transform: translate(-50%, -50%);
}

/* Tipp-Blase: standardmaessig unsichtbar per opacity/pointer-events (NICHT
   display:none/visibility:hidden), damit der Text ueber aria-describedby fuer
   Screenreader erhalten bleibt, auch wenn die Blase optisch zu ist. */
.kw-haendler-card__pill-tip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease;
    z-index: 30;
    width: max-content;
    max-width: min(240px, calc(100vw - 32px));
    background: var(--kw-bordeaux-dark, #7A1C33);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
    font-family: 'PT Serif', serif;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.4;
    white-space: normal;
}
/* Schau-Nachtrag #1480 (Verify-Befund 1, 2026-09-01): Chromium haelt :hover nach
   einem Re-Tap auf dem Element aktiv (synthetisches Hover), darum ueberstimmte
   diese Regel den per JS entfernten .is-open-Zustand -- der zweite Tipp auf
   DIESELBE Pille schloss die Blase nicht. Nur die :hover-Anzeige gehoert in
   die Maus-Klammer; :focus-visible (Tastatur) und .is-open (JS/Touch) bleiben
   ausserhalb, sonst faellt der Tastatur-Weg auf Geraeten ohne echten Hover weg. */
@media (hover: hover) and (pointer: fine) {
    .kw-haendler-card__pill:hover + .kw-haendler-card__pill-tip {
        opacity: 1;
        pointer-events: auto;
    }
}
/* Tastatur-Fokus (alle Geraete) + JS-Zustand (Tipp/Escape/Tipp-daneben,
   js/kw-haendler-pill-tip.js) -- bewusst ausserhalb der hover-Klammer. */
.kw-haendler-card__pill:focus-visible + .kw-haendler-card__pill-tip,
.kw-haendler-card__pill-tip.is-open {
    opacity: 1;
    pointer-events: auto;
}
/* JS portalt die offene Blase nach <body> (position:fixed, per JS berechnete
   Koordinaten) -- entkommt damit .kw-haendler-card { overflow:hidden } weiter
   unten, egal wo die Pille auf der Karte sitzt. In diesem Zustand setzt das JS
   selbst transform:none inline, die Regel hier bleibt der Default fuer den
   eingebetteten (CSS-only) Zustand. */

.kw-haendler-card__beschreibung {
    font-family: 'PT Serif', serif;
    font-size: 14px;
    line-height: 1.55;
    color: #555;
    margin: 0 0 14px;
}

/* Ort prominent, Adresse sekundär */
.kw-haendler-card__ort {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 2px;
}
.kw-haendler-card__adresse {
    font-family: 'PT Serif', serif;
    font-size: 13px;
    color: #888;
    margin: 0 0 14px;
    line-height: 1.4;
}

/* Kontakt-Info-Zeilen */
.kw-haendler-card__info {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.kw-haendler-card__info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'PT Serif', serif;
    font-size: 13px;
    color: #555;
    line-height: 1.4;
}
.kw-haendler-card__info-icon {
    font-size: 13px;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    opacity: 0.7;
}
.kw-haendler-card__info-item a {
    color: #444;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.15);
    transition: color 0.15s, border-color 0.15s;
}
.kw-haendler-card__info-item a:hover {
    color: var(--bordeaux, #97233F);
    border-color: var(--bordeaux, #97233F);
}

/* Footer: CTA volle Breite */
.kw-haendler-card__footer {
    padding: 16px 22px 22px;
}
.kw-haendler-card__cta-btn {
    width: 100%;
    text-align: center;
}

/* ── Details-Ausklapper (Issue #665) ──
   Native <details>/<summary> — accessible, CSS-only Toggle.
   Mobile-First: Touch-Target ≥ 44px. Buttons stapeln auf <600px. */
.kw-haendler-card__details {
    border-top: 1px solid rgba(0,0,0,0.08);
    margin: 16px -22px -22px;
}
.kw-haendler-card__details[open] {
    background: rgba(0,0,0,0.02);
}
.kw-haendler-card__details-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 22px;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #1a1a1a;
    transition: background-color 0.15s;
}
.kw-haendler-card__details-toggle::-webkit-details-marker {
    display: none;
}
.kw-haendler-card__details-toggle:hover {
    background: rgba(0,0,0,0.04);
}
.kw-haendler-card__details-chevron {
    display: inline-flex;
    align-items: center;
    transition: transform 0.2s ease;
    color: var(--bordeaux, #97233F);
}
.kw-haendler-card__details[open] .kw-haendler-card__details-chevron {
    transform: rotate(180deg);
}
.kw-haendler-card__details-body {
    padding: 4px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.kw-haendler-card__details-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.kw-haendler-card__details-row-label {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #777;
}
.kw-haendler-card__details-row-value {
    font-family: 'PT Serif', serif;
    font-size: 15px;
    line-height: 1.45;
    color: #333;
}
.kw-haendler-card__details-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.kw-haendler-card__details-action {
    flex: 1 1 auto;
    min-height: 44px;
    text-align: center;
    font-size: 14px;
    padding: 10px 14px;
}
@media (max-width: 600px) {
    .kw-haendler-card__details-action {
        flex: 1 1 100%;
    }
}

/* ─── HAENDLERSUCHE-BLOCK (/haendler/) ─── */
.kw-haendlersuche {
    background: var(--cream, #F5F0EB);
    padding: 80px 24px;
}
.kw-haendlersuche__inner {
    max-width: 1080px;
    margin: 0 auto;
}
.kw-haendlersuche__header {
    text-align: center;
    margin-bottom: 40px;
}
.kw-haendlersuche__headline {
    font-family: 'Josefin Sans', sans-serif;
    font-size: clamp(26px, 3.5vw, 40px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.1;
    margin: 0 0 14px;
    color: #1a1a1a;
}
.kw-haendlersuche__intro {
    font-family: 'PT Serif', serif;
    font-size: 18px;
    color: #555;
    margin: 0;
    line-height: 1.5;
}

/* Land-Kacheln: prominente erste Entscheidung (ersetzen schmale Tabs).
   Schmale Bildschirme: 2-spaltig, 6 Laender → 2x3. Ab 900px steht die Reihe
   einzeilig, siehe unten. */
.kw-haendlersuche__land-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 0 auto 40px;
    max-width: 460px;
}

/* Desktop (#1323, 16.08./17.08. Korrektur): FESTE Mindestbreite je Kachel statt
   "alle in einer Zeile erzwingen". Die alte Regel (flex:1 1 0, ein Land teilt sich
   die volle Breite mit allen anderen) hatte zwei Bugs, gemessen an neun Laendern
   auf /haendler/ (1080px Blockbreite -> 111px je Kachel): (1) der vw-basierte
   clamp() reagiert nur auf die FENSTERbreite, nie auf die Anzahl der Kacheln —
   bei 1280px Fenster blieb die Schrift bei 16px, egal ob 3 oder 9 Laender in der
   Reihe stehen; (2) .kw-haendlersuche__land-label sitzt in einer Spalte mit
   align-items:center, schrumpft also auf reine Content-Breite statt auf die
   Kachelbreite — "Deutschland" (131px Text) lief bei 111px Kachelbreite seitlich
   HERAUS statt umzubrechen ("abgeschnitten" wirkend, Rundgang-Fund #1323).
   Fix: jede Kachel bekommt eine FESTE Breite (150px, kein Wachsen/Schrumpfen —
   flex:0 0 statt 1 1, sonst wuerden die 3 Kacheln einer duennen letzten Zeile
   ungleichmaessig in die Breite gezogen), die Reihe bricht bei Bedarf um
   (flex-wrap:wrap) und zentriert sich (justify-content:center) statt die Schrift
   zu verkleinern. .kw-haendlersuche__land-label bekommt width:100%, damit lange
   Namen INNERHALB der Kachel zweizeilig umbrechen statt herauszulaufen — bei
   150px Kachelbreite passt „Österreich" (110px) weiterhin einzeilig, laengere
   Namen wie „Deutschland"/„Niederlande" duerfen jetzt zweizeilig stehen, alle
   Kacheln bleiben dank Flex-Stretch (Standardverhalten der Zeile) gleich hoch.
   NUR dieser Media-Query-Block geaendert — Mobil (Grid, Basis-Regeln) unberuehrt.
   WARUM erst ab 961px: siehe Ursprungskommentar #1105, unveraendert gueltig.

   NACHTRAG #1323 (Gregor, Rundgang-2, Diktat 18.08.): bei "Deutschland"/
   "Niederlande" haengte nach obigem Fix noch je ein einzelner Buchstabe allein
   in der zweiten Zeile -- Ursache: overflow-wrap:break-word bricht ein zu langes
   Wort so SPAET wie moeglich, bei 150px Kachelbreite blieb dabei oft nur der
   letzte Buchstabe fuer Zeile 2 uebrig. Programmatischer Sprachen-Sweep (echte
   imagettfbbox()-Messung mit der Produktiv-Schriftdatei josefin-sans-700.ttf,
   16px/700/uppercase/letter-spacing 0.5px, alle 9 Laender x 6 Sprachen, Beweis
   reports/issue-1323/a2-sprachsweep.txt) ergab: das laengste EINZELWORT ohne
   natuerliche Umbruchstelle ist "DEUTSCHLAND" (223px) bzw. "NETHERLANDS" (222px)
   bzw. CS "NIZOZEMSKO" (206,5px) -- alle drei breiter als jede Kachelbreite, die
   noch "maximal 5 pro Zeile" (Gregors zweite Ansage) im 1080px-Container zulaesst
   (208px bei 10px Gap). Wortbreite UND 5er-Deckel sind also nicht gleichzeitig
   ueber reine Kachelbreite loesbar -- Fix kombiniert beides: (1) Kachelbreite neu
   ueber calc() auf exakt 1/5 der Zeile gedeckelt (vorher fixe 150px, jetzt
   responsiv, aber IMMER <= 5 Kacheln pro Zeile, unabhaengig von Laenderanzahl
   oder Bildschirmbreite -- 6.+ Land bricht um). (2) hyphens:auto (+Praefixe) auf
   .kw-haendlersuche__land-label statt nur overflow-wrap:break-word -- der
   Browser haengt sich an den lang-Attribut des <html>-Tags (pro WPML-Sprache
   gesetzt, z.B. lang="de-DE"/"cs-CZ") und bricht am Silbenrand ("DEUTSCH-LAND"),
   overflow-wrap:break-word bleibt als Fallback fuer Sprachen ohne Hyphenation-
   Woerterbuch im Browser. Ergebnis (Sweep-Datei): kein Einzelbuchstabe mehr in
   einer eigenen Zeile bei irgendeiner der 54 gemessenen Kombinationen. */
@media (min-width: 961px) {
    .kw-haendlersuche__land-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        max-width: 100%;
    }
    .kw-haendlersuche__land-grid > .kw-haendlersuche__land-card {
        /* calc() haelt die Zeile bei GENAU 5 Kacheln, egal wie breit der Container
           ist (5 x dieser Wert + 4 Gaps = 100% der Zeile) -- ein 6. Land passt
           nie mehr hinein und bricht um; bei weniger als 5 Laendern zentriert
           justify-content:center die kuerzere Zeile (gleiche Loesung wie #1358). */
        flex: 0 0 calc((100% - 4 * 10px) / 5);
        width: calc((100% - 4 * 10px) / 5);
        padding: 20px 14px;
    }
    .kw-haendlersuche__land-label {
        width: 100%;
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
    }
}

/* #956 — Generalimporteur ganz oben im Land-Panel, ueber die volle Breite (Gregor 08.08.).
   Die Karte selbst bleibt die normale Haendler-Karte; nur der Rahmen aendert sich:
   volle Breite statt Gitterspalte, dauerhaft farbige Oberkante (die hat die normale
   Karte erst beim Hover) und ab Tablet zweispaltig, damit der Kontakt-Knopf nicht unter
   einer sehr langen Zeile verschwindet. Kein Gruen, Akzent ist Bordeaux wie im Bestand. */
.kw-haendlersuche__importeur {
    margin: 0 0 32px;
}
.kw-haendlersuche__importeur .kw-haendler-card {
    width: 100%;
    border-top-color: var(--kw-bordeaux, #97233F);
}
@media (min-width: 768px) {
    .kw-haendlersuche__importeur .kw-haendler-card__body {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name    pills"
            "beschr  beschr"
            "ort     knopf";
        align-items: center;
        column-gap: 24px;
    }
    .kw-haendlersuche__importeur .kw-haendler-card__name         { grid-area: name; }
    .kw-haendlersuche__importeur .kw-haendler-card__pills        { grid-area: pills; margin-bottom: 0; justify-content: flex-end; }
    .kw-haendlersuche__importeur .kw-haendler-card__beschreibung { grid-area: beschr; }
    .kw-haendlersuche__importeur .kw-haendler-card__ort          { grid-area: ort; }
    .kw-haendlersuche__importeur .kw-haendler-card__details-toggle { grid-area: knopf; justify-self: end; }
}

/* PLZ-Suche / Bundesland-Direct-Render: drei Spalten ab ~960px Container
   (minmax 280/1fr laesst Karten breit werden), JS-Layout zentriert bei 1-2 Karten. */
.kw-haendlersuche__panel .kw-haendler-list {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    justify-content: center;
}
.kw-haendlersuche__land-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 16px;
    background: #fff;
    border: 2px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
    text-align: center;
}
.kw-haendlersuche__land-card:hover {
    border-color: var(--bordeaux, #97233F);
    box-shadow: 0 4px 14px rgba(151,35,63,0.10);
}
.kw-haendlersuche__land-card.is-active {
    border-color: var(--bordeaux, #97233F);
    background: var(--bordeaux, #97233F);
    box-shadow: 0 4px 16px rgba(151,35,63,0.22);
}
.kw-haendlersuche__land-card.is-future {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}
.kw-haendlersuche__land-label {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a1a1a;
    line-height: 1.2;
    transition: color 0.15s;
    /* Einzeilige Reihe (#1105): eine sehr lange Landesbezeichnung soll umbrechen
       und nicht aus der Kachel laufen. */
    overflow-wrap: break-word;
    min-width: 0;
}
.kw-haendlersuche__land-card.is-active .kw-haendlersuche__land-label { color: #fff; }
.kw-haendlersuche__land-count {
    font-family: 'PT Serif', serif;
    font-size: 13px;
    color: var(--bordeaux, #97233F);
    transition: color 0.15s;
}
.kw-haendlersuche__land-card.is-active .kw-haendlersuche__land-count { color: rgba(255,255,255,0.82); }
.kw-haendlersuche__land-card.is-future .kw-haendlersuche__land-count { color: #bbb; }

.kw-haendlersuche__panel { display: none; }
.kw-haendlersuche__panel.is-active { display: block; }

/* Mobiler Auswahl-Knopf (#1105).
   WANN sichtbar: nur wenn kw-haendlersuche.js kein Land zuordnen konnte (dann setzt
   es `is-land-collapsible` auf die Section) UND der Bildschirm schmal ist. Auf
   Desktop und ohne Skript bleibt er unsichtbar und die Kachelreihe steht wie bisher.
   Die Laenderliste klappt DARUNTER auf — Section bekommt `is-land-open`. */
.kw-haendlersuche__land-toggle { display: none; }
@media (max-width: 767px) {
    .kw-haendlersuche.is-land-collapsible .kw-haendlersuche__land-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        max-width: 460px;
        min-height: 52px;
        margin: 0 auto 12px;
        padding: 14px 18px;
        background: #fff;
        border: 2px solid var(--bordeaux, #97233F);
        border-radius: 8px;
        cursor: pointer;
        font-family: 'Josefin Sans', sans-serif;
        font-size: 15px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        line-height: 1.2;
        color: var(--bordeaux, #97233F);
        text-align: left;
    }
    .kw-haendlersuche__land-toggle-icon {
        flex: 0 0 auto;
        width: 9px;
        height: 9px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg) translate(-2px, -2px);
        transition: transform 0.18s;
    }
    .kw-haendlersuche.is-land-open .kw-haendlersuche__land-toggle-icon {
        transform: rotate(-135deg) translate(-2px, -2px);
    }
    .kw-haendlersuche.is-land-collapsible .kw-haendlersuche__land-grid { display: none; }
    .kw-haendlersuche.is-land-collapsible.is-land-open .kw-haendlersuche__land-grid { display: grid; }
    /* Solange nichts gewaehlt ist, ist die Landfrage die einzige Frage: PLZ-Suche und
       Bundesland-Gitter erscheinen erst mit der Wahl. */
    .kw-haendlersuche.is-land-collapsible:not(.is-land-chosen) .kw-haendlersuche__panel { display: none; }
    /* ... und dann darf auch keine Kachel schon gewaehlt aussehen. Die Vorbelegung aus
       PHP (erstes Land mit Partnern) bleibt technisch stehen, sie wird hier nur nicht
       gemalt — sonst widerspricht die bordeauxrote Kachel dem Knopf darueber. */
    .kw-haendlersuche.is-land-collapsible:not(.is-land-chosen) .kw-haendlersuche__land-card.is-active {
        background: #fff;
        border-color: rgba(0,0,0,0.08);
        box-shadow: none;
    }
    .kw-haendlersuche.is-land-collapsible:not(.is-land-chosen) .kw-haendlersuche__land-card.is-active .kw-haendlersuche__land-label { color: #1a1a1a; }
    .kw-haendlersuche.is-land-collapsible:not(.is-land-chosen) .kw-haendlersuche__land-card.is-active .kw-haendlersuche__land-count { color: var(--bordeaux, #97233F); }
}

.kw-haendlersuche__coming-soon {
    text-align: center;
    font-family: 'PT Serif', serif;
    font-size: 15px;
    color: #888;
    padding: 24px 0;
    font-style: italic;
}

/* PLZ-Form */
.kw-haendlersuche__form { margin-bottom: 32px; }
.kw-haendlersuche__label {
    display: block;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666;
    margin-bottom: 10px;
    text-align: center;
}
.kw-haendlersuche__input-row {
    display: flex;
    gap: 12px;
    max-width: 520px;
    margin: 0 auto;
}
.kw-haendlersuche__input {
    flex: 1;
    padding: 15px 20px;
    font-family: 'PT Serif', serif;
    font-size: 18px;
    border: 2px solid rgba(0,0,0,0.12);
    border-radius: 4px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.kw-haendlersuche__input:focus {
    outline: 0;
    border-color: var(--bordeaux, #97233F);
    box-shadow: 0 0 0 3px rgba(151,35,63,0.1);
}
.kw-haendlersuche__submit { flex-shrink: 0; white-space: nowrap; }

/* Bundesland-Kacheln im Suche-Block */
.kw-haendlersuche__regions {
    margin: 40px 0 0;
    text-align: center;
}
.kw-haendlersuche__regions-label {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin-bottom: 20px;
}
.kw-haendlersuche__region-grid {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 860px;
}
.kw-haendlersuche__region-link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 14px;
    min-width: 150px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 6px;
    text-decoration: none;
    color: #1a1a1a;
    text-align: center;
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.kw-haendlersuche__region-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 16px rgba(151,35,63,0.10);
    border-color: var(--bordeaux, #97233F);
}
.kw-haendlersuche__region-link--empty {
    opacity: 0.5;
    pointer-events: none;
}
.kw-haendlersuche__region-name {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.2;
}
.kw-haendlersuche__region-count {
    font-family: 'PT Serif', serif;
    font-size: 12px;
    color: var(--bordeaux, #97233F);
}

/* Ergebnisse */
.kw-haendlersuche__results { margin-top: 40px; }
.kw-haendlersuche__results-summary {
    font-family: 'PT Serif', serif;
    font-size: 16px;
    color: #555;
    margin: 0 0 20px;
    text-align: center;
}
.kw-haendler-loading,
.kw-haendler-error,
.kw-haendler-empty {
    text-align: center;
    padding: 32px;
    font-family: 'PT Serif', serif;
    color: #666;
}
.kw-haendler-error { color: var(--bordeaux, #97233F); }

/* 0-Match-Fallback */
.kw-haendler-fallback {
    background: #fff;
    border-radius: 8px;
    border-left: 4px solid var(--bordeaux, #97233F);
    padding: 36px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.kw-haendler-fallback__title {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.15;
    margin: 0 0 12px;
    color: #1a1a1a;
}
.kw-haendler-fallback p {
    font-family: 'PT Serif', serif;
    color: #555;
    margin: 0 0 24px;
    font-size: 16px;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 960px) {
    .kw-haendler-list {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
    .kw-haendler-region-tiles {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}
@media (max-width: 720px) {
    .kw-haendler-hero { padding: 44px 16px 36px; }
    .kw-haendler-hero__sub { font-size: 16px; }
    .kw-haendler-region-grid-section { padding: 44px 16px; }
    .kw-haendler-region-tiles { grid-template-columns: repeat(2, 1fr); }
    .kw-haendler-group { padding: 44px 16px; }
    .kw-haendler-list { grid-template-columns: 1fr; }
    .kw-haendler-cta-strip { padding: 52px 16px; }
    .kw-haendler-cta-strip__headline { font-size: 22px; }
    .kw-haendlersuche { padding: 52px 16px; }
    .kw-haendlersuche__input-row { flex-direction: column; }
    .kw-haendlersuche__submit { width: 100%; }
    .kw-haendlersuche__region-grid { grid-template-columns: repeat(2, 1fr); }
    .kw-haendler-intro-section { padding: 36px 16px; }
    .kw-haendler-cards-section { padding: 44px 16px 56px; }
}


/* ============================================================
 * Fluent Forms — CI-Styling
 *
 * WAS:  Überschreibt Fluent Forms Default-Styles um CI-konformes
 *       Aussehen zu gewährleisten: Bordeaux-Buttons, PT-Serif-Inputs,
 *       Josefin-Labels, Focus-Ring in Bordeaux.
 * WARUM: Fluent Forms liefert eigene Styles die mit dem KGD-Design
 *        kollidieren. Reset nötig, dann KGD-Werte drüber.
 * SCOPE: Nur innerhalb .kw-inquiry__form-wrap und .kw-product__inquiry
 *        um Scope-Konflikte mit anderen Plugins zu vermeiden.
 * ============================================================ */

/* ── Form-Wrap Layout + 2-Spalten-Grid ─────────────────────── */
.kw-inquiry__form-wrap {
    width: 100%;
}
.kw-inquiry__form-wrap .ff-el-group {
    margin-bottom: 14px;
}
/* Name + E-Mail nebeneinander */
.kw-inquiry__form-wrap .ff-t-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 0;
}
.kw-inquiry__form-wrap .ff-t-cell {
    min-width: 0;
}

/* ── Labels ─────────────────────────────────────────────────── */
.kw-inquiry__form-wrap .ff-el-form-control-label,
.kw-product__inquiry .ff-el-form-control-label {
    display: block;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    margin-bottom: 5px;
    /* Auf Bordeaux: reines Weiß leicht gedimmt statt inherit (das pinklich wirkt) */
    color: rgba(255, 255, 255, 0.75);
}
.kw-inquiry--cream .ff-el-form-control-label {
    color: var(--kw-body-text, #1A1A1A);
}

/* ── Input + Textarea + Select ──────────────────────────────── */
/* Dunkles Overlay statt transparentes Weiß — besser lesbar auf Bordeaux */
.kw-inquiry__form-wrap .ff-el-form-control,
.kw-product__inquiry .ff-el-form-control {
    width: 100%;
    padding: 11px 14px;
    font-family: 'PT Serif', serif;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    transition: border-color 0.2s ease, background 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}
.kw-inquiry__form-wrap .ff-el-form-control::placeholder,
.kw-product__inquiry .ff-el-form-control::placeholder {
    color: rgba(255, 255, 255, 0.35);
}
.kw-inquiry__form-wrap .ff-el-form-control:focus,
.kw-product__inquiry .ff-el-form-control:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(0, 0, 0, 0.35);
}

/* Cream-Variante */
.kw-inquiry--cream .ff-el-form-control {
    background: #fff;
    border-color: var(--kw-border, #DDD5C8);
    color: var(--kw-body-text, #1A1A1A);
}
.kw-inquiry--cream .ff-el-form-control::placeholder { color: #aaa; }
.kw-inquiry--cream .ff-el-form-control:focus {
    border-color: var(--kw-bordeaux, #97233F);
    background: #fff;
}

/* ── Dropdown / Select ──────────────────────────────────────── */
/* color-scheme: dark damit Browser-native Option-Liste auch dunkel rendert */
.kw-inquiry__form-wrap select.ff-el-form-control,
.kw-product__inquiry select.ff-el-form-control {
    color-scheme: dark;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(255,255,255,0.7)' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}
.kw-inquiry--cream select.ff-el-form-control {
    color-scheme: light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2397233F' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── Checkbox (DSGVO) ────────────────────────────────────────── */
.kw-inquiry__form-wrap .ff-el-form-check,
.kw-product__inquiry .ff-el-form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.kw-inquiry__form-wrap .ff-el-form-check-input,
.kw-product__inquiry .ff-el-form-check-input {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    accent-color: #fff;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 3px;
}
.kw-inquiry__form-wrap .ff-el-form-check-label,
.kw-product__inquiry .ff-el-form-check-label {
    font-family: 'PT Serif', serif;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.55;
    cursor: pointer;
}
.kw-inquiry__form-wrap .ff-el-form-check-label a,
.kw-product__inquiry .ff-el-form-check-label a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
}
.kw-inquiry--cream .ff-el-form-check-input { accent-color: var(--kw-bordeaux, #97233F); }
.kw-inquiry--cream .ff-el-form-check-label { color: var(--kw-body-text, #1A1A1A); }

/* ── Submit-Button ───────────────────────────────────────────── */
.kw-inquiry__form-wrap .ff-btn-submit,
.kw-product__inquiry .ff-btn-submit {
    display: block;
    width: 100%;
    padding: 15px 32px;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: #fff;
    color: var(--kw-bordeaux, #97233F);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: all 0.25s ease;
    margin-top: 6px;
}
.kw-inquiry__form-wrap .ff-btn-submit:hover,
.kw-product__inquiry .ff-btn-submit:hover {
    background: var(--kw-cream, #F5F0EB);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.kw-inquiry--cream .ff-btn-submit { background: var(--kw-bordeaux, #97233F); color: #fff; }
.kw-inquiry--cream .ff-btn-submit:hover { background: #7A1C33; }

/* Fix #1278 Punkt 7+8: Kontakt-Formular (fluentform id=3, /kontakt/ DE+PL)
   sitzt als nacktes [fluentform]-Shortcode ohne die .kw-inquiry__form-wrap-
   Huelle -- der Submit-Button fiel auf den grauen Plugin-Default zurueck
   UND war mit 42px unter dem 44px-Tap-Gate (gleiche Ursache/Loesung wie
   #1263 in der Haendlerzone: Formular-Wrapper-Klasse fehlt). Scoping ueber
   die von FluentForm selbst vergebene .fluent_form_3-Klasse statt einer
   Content-Aenderung -- Kontakt-Seite ist nicht im Schau-DB-Write-Set dieser
   Runde. */
.fluent_form_3 .ff-btn-submit {
    background: var(--kw-bordeaux, #97233F);
    color: #fff;
    padding: 15px 32px;
    min-height: 44px;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
}
.fluent_form_3 .ff-btn-submit:hover { background: #7A1C33; }

/* ── "anfrage_typ" auf Produktseiten ausblenden ──────────────── */
/* JS setzt den Wert auf "Angebot einholen" und fügt die Klasse hinzu */
.kw-hide-anfrage-typ [data-name="anfrage_typ"],
.kw-hide-anfrage-typ .ff-el-group:has([name="anfrage_typ"]) {
    display: none !important;
}

/* ── Validation-Fehler ───────────────────────────────────────── */
.kw-inquiry__form-wrap .error,
.kw-product__inquiry .error {
    font-family: 'PT Serif', serif;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 3px;
}
.kw-inquiry--cream .error { color: var(--kw-bordeaux, #97233F); }

/* ── Success-Meldung ─────────────────────────────────────────── */
.kw-inquiry__form-wrap .ff-message-success,
.kw-product__inquiry .ff-message-success {
    padding: 20px 24px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-family: 'PT Serif', serif;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 1.6;
}
.kw-inquiry--cream .ff-message-success {
    background: rgba(151, 35, 63, 0.07);
    border-color: var(--kw-bordeaux, #97233F);
    color: var(--kw-body-text, #1A1A1A);
}

/* ── Fluent Forms Reset ──────────────────────────────────────── */
.kw-inquiry__form-wrap .ff-el-input--label { margin-bottom: 0; }
.kw-inquiry__form-wrap .ff-el-progress-bar { display: none; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
    .kw-inquiry__form-wrap .ff-t-container { grid-template-columns: 1fr; }
    .kw-inquiry__form-wrap .ff-btn-submit { padding: 14px 20px; font-size: 12px; }
}
/* ── Mobile 375px (Issue #280) ── Felder gestapelt, CTA volle Breite ── */
@media (max-width: 480px) {
    .kw-inquiry { padding: 56px 20px; }
    .kw-inquiry__inner { max-width: 100%; }
    .kw-inquiry__header { margin-bottom: 28px; }
    .kw-inquiry__title { font-size: 26px; letter-spacing: 0.5px; }
    .kw-inquiry__subline { font-size: 16px; line-height: 1.55; }
    .kw-inquiry__form-wrap .ff-el-group { margin-bottom: 14px; }
    .kw-inquiry__form-wrap .ff-t-cell { grid-column: 1 / -1 !important; }
    .kw-inquiry__form-wrap .ff-btn-submit {
        width: 100%;
        display: block;
        padding: 16px 20px;
        font-size: 14px;
    }
}
/* ── Legacy-Anker `#anfrage` (Backcompat — Spec-Anker ist `#angebot`) ── */
.kw-inquiry__legacy-anchor {
    display: block;
    position: relative;
    top: -80px; /* Sticky-Header-Offset */
    height: 0;
    visibility: hidden;
}
/* ── Callback-Variante (?callback=1): leichter visueller Hinweis ── */
.kw-inquiry--callback .kw-inquiry__title::before {
    content: '☎  ';
    font-size: 0.8em;
    opacity: 0.7;
}
/* === KW Seilwinden-Filter Block === */
/* === KW Seilwinden-Filter Block === */
.kw-seilwindenfilter { padding: 64px 0; background: #fff; }
.kw-seilwindenfilter .kw-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

.kw-swf-bar {
    background: #F5F0EB;
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 40px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.kw-swf-row { display: flex; flex-wrap: wrap; gap: 32px 48px; margin-bottom: 16px; }
.kw-swf-row:last-child { margin-bottom: 0; }
.kw-swf-group { border: 0; padding: 0; margin: 0; min-width: 200px; }
.kw-swf-group legend { font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: #4C4726; margin-bottom: 8px; padding: 0; }
.kw-swf-group label { display: inline-flex; align-items: center; gap: 8px; margin-right: 14px; margin-bottom: 6px; cursor: pointer; font-size: 14px; color: #2B2B2B; user-select: none; }
.kw-swf-group label:hover { color: #6B0F1A; }
.kw-swf-group input[type=checkbox]:disabled + * { opacity: 0.4; }
.kw-swf-group label:has(input:disabled),
.kw-swf-group label.kw-swf-disabled { opacity: 0.4; cursor: not-allowed; }
.kw-swf-group label.kw-swf-disabled:hover { color: #2B2B2B; }
.kw-swf-hint { font-weight: 400; font-size: 11px; text-transform: none; color: #888; margin-left: 6px; }

/* Custom Checkbox */
.kw-swf-bar input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border: 1.5px solid #B8A98F;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: border-color .15s, background .15s;
    margin: 0;
}
.kw-swf-bar input[type=checkbox]:hover { border-color: #6B0F1A; }
.kw-swf-bar input[type=checkbox]:checked {
    background: #6B0F1A;
    border-color: #6B0F1A;
}
.kw-swf-bar input[type=checkbox]:checked::after {
    content: "";
    position: absolute;
    left: 5px; top: 1px;
    width: 5px; height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.kw-swf-bar input[type=checkbox]:focus-visible {
    outline: 2px solid #6B0F1A;
    outline-offset: 2px;
}

/* Range Slider — Dual-Thumb */
.kw-swf-range { min-width: 320px; flex: 1; }
.kw-swf-range legend { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.kw-swf-range-vals { font-size: 13px; color: #6B0F1A; font-weight: 700; text-transform: none; letter-spacing: 0; }

/* Dual-Range nach „height:0"-Pattern — Track als <div>, Inputs unsichtbar, nur Thumb-Pseudoelement fängt Events */
.kw-swf-dual {
    position: relative;
    height: 32px;
    margin-top: 12px;
    padding: 0 9px;
}
.kw-swf-dual-track {
    position: absolute;
    left: 9px; right: 9px; top: 50%;
    height: 4px;
    transform: translateY(-50%);
    background: #E0D8CD;
    border-radius: 2px;
}
.kw-swf-dual-fill {
    position: absolute;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    background: #6B0F1A;
    border-radius: 2px;
}
.kw-swf-dual input[type=range] {
    position: absolute;
    top: 50%;
    left: 0; width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    z-index: 3;
    outline: none;
}
.kw-swf-dual input[type=range]::-webkit-slider-runnable-track {
    height: 0; background: transparent; border: none;
}
.kw-swf-dual input[type=range]::-moz-range-track {
    height: 0; background: transparent; border: none;
}
.kw-swf-dual input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #6B0F1A;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    cursor: grab;
    margin-top: -10px;
    transition: transform .12s;
    position: relative;
    z-index: 4;
}
.kw-swf-dual input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.12); }
.kw-swf-dual input[type=range]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.18); }
.kw-swf-dual input[type=range]::-moz-range-thumb {
    pointer-events: auto;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #6B0F1A;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    cursor: grab;
}

.kw-swf-ps-hint { margin: 12px 0 0; font-size: 13px; color: #6B6357; }
.kw-swf-ps-hint strong { color: #4C4726; font-weight: 700; }

/* Funk-Single ohne Heading */
.kw-swf-funk { align-self: flex-end; padding-bottom: 6px; }
.kw-swf-funk-label { margin-bottom: 0 !important; font-weight: 500; }

.kw-swf-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #E0D8CD; }
.kw-swf-counter { font-size: 14px; color: #4C4726; font-weight: 600; }
.kw-swf-reset {
    background: transparent;
    border: 1.5px solid #B8A98F;
    color: #4C4726;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all .15s;
}
.kw-swf-reset:hover { border-color: #6B0F1A; color: #6B0F1A; background: #fff; }

.kw-swf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.kw-swf-card { background: #fff; border: 1px solid #E0D8CD; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.kw-swf-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.kw-swf-card__thumb { display: block; aspect-ratio: 4/3; overflow: hidden; background: #F5F0EB; }
.kw-swf-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.kw-swf-card__body { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.kw-swf-card__title { margin: 0; font-size: 18px; font-weight: 700; }
.kw-swf-card__title a { color: #2B2B2B; text-decoration: none; }
.kw-swf-card__title a:hover { color: #6B0F1A; }
.kw-swf-card__tag { margin: 0; color: #6B6357; font-size: 13px; }
.kw-swf-card__specs { list-style: none; padding: 0; margin: 8px 0 0; font-size: 13px; color: #4C4726; }
.kw-swf-card__specs li { padding: 2px 0; }
.kw-swf-card__btn { margin-top: auto; align-self: flex-start; }

.kw-swf-empty { text-align: center; padding: 48px 16px; color: #6B6357; font-size: 16px; }

@media (max-width: 720px) {
    .kw-swf-row { gap: 20px; }
    .kw-swf-group { min-width: 100%; }
}

/* ============================================================
   KW Stop-Motion — Frame-by-Frame-Animation (Produkt-Drehung)
   ============================================================ */
.kw-stop-motion {
    position: relative;
    width: 100%;
    max-width: var(--kw-sm-max-w, 100%);
    aspect-ratio: var(--kw-sm-aspect, 1 / 1);
    margin-inline: auto;
    overflow: hidden;
    background: inherit;
}
.kw-stop-motion__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    opacity: 0;
    pointer-events: none;
}
/* Imagify wrapt <img class="kw-stop-motion__frame"> in <picture class="kw-stop-motion__frame">.
   Klasse + inline opacity wandern aufs picture, das innere img bleibt klasselos und unscaled.
   Daher: picture (mit Klasse) bekommt die Frame-Box, das innere img skaliert sich darin. */
.kw-stop-motion picture {
    display: block;
}
.kw-stop-motion picture > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
}
.kw-stop-motion__frame.is-active {
    opacity: 1;
}

/* ============================================================
   KW Stop-Motion-Card — Stop-Motion-Animation + Titel + Text als Card.
   Mehrere via core/columns nebeneinander. Mobile-First: stack default,
   Hover-Lift erst ab 768px (kein Hover auf Touch).
   ============================================================ */
.kw-stop-motion-card {
    background: #fff;
    border-radius: var(--kw-radius, 12px);
    overflow: hidden;
    box-shadow: var(--kw-shadow-sm, 0 2px 8px rgba(76,71,38,0.06));
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform var(--kw-transition, 0.35s ease),
                box-shadow var(--kw-transition, 0.35s ease);
}
.kw-stop-motion-card__image {
    overflow: hidden;
    /* Background, falls Bild kleiner als Container (object-fit: contain). */
    background: var(--kw-cream, #f5f1ea);
}
.kw-stop-motion-card__image .kw-stop-motion {
    max-width: none;
    margin: 0;
    border-radius: 0;
    aspect-ratio: var(--kw-sm-aspect, 4/3);
}
/* Bild-Verhalten lebt in blocks/stop-motion-card/style.css (cover als globaler
   Block-Standard, 1 Block = 1 Look — Gregor 2026-06-02). */
.kw-stop-motion-card__body {
    padding: 1.25rem 1.5rem 1.5rem;
}
.kw-stop-motion-card__title {
    font-family: 'Josefin Sans', sans-serif;
    font-size: var(--kw-text-lg, 20px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--kw-body-text, #1A1A1A);
    margin: 0 0 0.5rem;
}
.kw-stop-motion-card__text {
    font-family: 'PT Serif', serif;
    font-size: 15px;
    color: var(--kw-body-text, #3D3824);
    line-height: 1.7;
    margin: 0;
}
@media (min-width: 768px) {
    .kw-stop-motion-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--kw-shadow-md, 0 8px 24px rgba(76,71,38,0.08));
    }
}

/* Mobile-Layout: KEIN horizontal-Override mehr. Block bleibt überall vertical
   (Bild groß oben, Text drunter) — 1 Block = 1 Look. Gregor 2026-06-02:
   alter row-Layout mit 40%-Bild war für „kompakte" Mobile gedacht, wirkte
   aber gestaucht und brach den Stop-Motion-Frame-Aspect. */

/* Issue #639 — Accessibility: prefers-reduced-motion respektieren.
   Global: alle Animationen/Transitions auf praktisch 0 reduzieren.
   Block-spezifisch: Stop-Motion auf erstes Frame frieren, Hero-Slider Autoplay aus. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .kw-stop-motion__frame { opacity: 0; animation: none !important; }
    .kw-stop-motion__frame:first-child,
    .kw-stop-motion__frame.is-active { opacity: 1; }
    .kw-hero-slider .kw-hero-slider__slide { animation: none !important; }
}

/* ============================================================
   CONTACT CARD — .kw-contact-card
   Reusable auf Service-Seiten. Als wp:group.kw-contact-card
   mit wp:image + wp:group (heading + paragraphs) bauen.
   ============================================================ */
.kw-contact-card {
    background: #f5f2ee;
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
    margin: 1.75rem 0;
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.kw-contact-card img,
.kw-contact-card .wp-block-image img {
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.kw-contact-card .wp-block-group {
    min-width: 0;
    flex: 1;
}

.kw-contact-card h6,
.kw-contact-card .wp-block-heading {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #1a1a1a;
    margin: 0 0 0.5rem;
}

.kw-contact-card p,
.kw-contact-card .wp-block-paragraph {
    font-family: 'PT Serif', Georgia, serif;
    font-size: 0.9rem;
    color: #1a1a1a;
    margin: 0 0 0.2rem;
}

.kw-contact-card a {
    color: #1a1a1a;
    text-decoration: none;
}

.kw-contact-card a[href^="mailto"] {
    color: var(--kw-bordeaux, #97233f);
}

/* ============================================================
   FLUENT FORMS — .kw-ff-form
   Wrapper-Klasse für alle KGD-Serviceformulare.
   Als wp:column className="kw-ff-form" oder
   wp:group className="kw-ff-form" um wp:shortcode setzen.
   Kein Inline-<style>-Block mehr auf den Seiten!
   ============================================================ */
.kw-ff-form .fluentform_wrapper,
.kw-ff-form [class*="fluentform_wrapper"] {
    background: #ffffff;
    border-radius: 10px;
    padding: 2rem 2.5rem 2.5rem;
    box-shadow: 0 2px 20px rgba(26,26,26,0.09);
}

.kw-ff-form .ff-el-input--label label {
    font-family: "Josefin Sans", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1a1a1a;
}

.kw-ff-form input:not([type=checkbox]):not([type=radio]):not([type=file]),
.kw-ff-form select,
.kw-ff-form textarea {
    font-family: "PT Serif", Georgia, serif;
    font-size: 1rem;
    color: #1a1a1a;
    border: 1.5px solid #d8d5d1 !important;
    border-radius: 7px !important;
    background: #fdfbf9 !important;
}

.kw-ff-form input:focus,
.kw-ff-form select:focus,
.kw-ff-form textarea:focus {
    border-color: var(--kw-bordeaux, #97233f) !important;
    box-shadow: 0 0 0 3px rgba(151,35,63,0.12) !important;
    outline: none !important;
}

.kw-ff-form .ff-el-is-required .ff-el-input--label:after,
.kw-ff-form .asterisk {
    color: var(--kw-bordeaux, #97233f);
}

.kw-ff-form .ff-el-form-check-label {
    font-family: "PT Serif", Georgia, serif;
    font-size: 0.9rem;
    color: #1a1a1a;
}

.kw-ff-form .ff-el-form-check-label a {
    color: var(--kw-bordeaux, #97233f);
}

.kw-ff-form .ff-el-progress {
    background: #ede9e5;
    border-radius: 4px;
    overflow: hidden;
}

.kw-ff-form .ff-el-progress-bar {
    background-color: var(--kw-bordeaux, #97233f) !important;
}

.kw-ff-form .ff_step_header,
.kw-ff-form [class*="step-title"] {
    font-family: "Josefin Sans", sans-serif;
    color: #1a1a1a;
}

.kw-ff-form .ff-btn-next,
.kw-ff-form .ff-btn-prev {
    font-family: "Josefin Sans", sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    border-radius: 6px !important;
    padding: 16px 32px !important;
    line-height: 1 !important;
    height: auto !important;
}

.kw-ff-form .ff-btn-next {
    background: var(--kw-bordeaux, #97233f) !important;
    border-color: var(--kw-bordeaux, #97233f) !important;
    color: #fff !important;
}

.kw-ff-form .ff-btn-prev {
    background: transparent !important;
    border-color: #d8d5d1 !important;
    color: #1a1a1a !important;
}

.kw-ff-form button[type=submit] {
    font-family: "Josefin Sans", sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    border-radius: 6px !important;
    padding: 16px 32px !important;
    line-height: 1 !important;
    height: auto !important;
    background: var(--kw-bordeaux, #97233f) !important;
    border: 2px solid var(--kw-bordeaux, #97233f) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(151,35,63,0.3) !important;
    cursor: pointer !important;
    transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s !important;
}

.kw-ff-form button[type=submit]:hover {
    background: var(--kw-bordeaux-dark, #7a1c33) !important;
    border-color: var(--kw-bordeaux-dark, #7a1c33) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(151,35,63,0.4) !important;
}

/* ============================================================
 * WINDENFINDER — Page-Layout + Multi-Step Form (Fluent Form ID 10)
 * SCOPE: .kw-finder-page (Heading/Intro/FAQ) + .kw-finder (Form-Card)
 * ============================================================ */

.kw-finder-page,
.wp-block-group.kw-finder-page {
    max-width: 880px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 56px 24px 80px;
}
.kw-finder-h1 {
    font-family: 'Josefin Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(2rem, 4vw + 1rem, 3.2rem) !important;
    line-height: 1.1 !important;
    color: var(--kw-bordeaux, #97233F) !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 880px !important;
    letter-spacing: -0.5px;
    text-align: center !important;
    width: 100%;
}
.kw-finder-intro {
    font-family: 'PT Serif', serif !important;
    font-size: 18px !important;
    line-height: 1.55 !important;
    color: var(--kw-body-text, #1A1A1A) !important;
    max-width: 620px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 36px !important;
    text-align: center !important;
}
.kw-finder-faq {
    max-width: 720px;
    margin: 48px auto 0;
}
.kw-finder-faq h2 {
    font-family: 'Josefin Sans', sans-serif !important;
    font-size: 24px !important;
    margin-bottom: 24px !important;
    color: var(--kw-bordeaux, #97233F) !important;
}
.kw-finder-faq h3 {
    font-family: 'Josefin Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 24px 0 6px !important;
    color: var(--kw-body-text, #1A1A1A) !important;
}
.kw-finder-faq p {
    font-family: 'PT Serif', serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 0 0 8px !important;
}

@media (max-width: 599px) {
    .kw-finder-page { padding: 32px 16px 48px; }
    .kw-finder-intro { font-size: 16px !important; }
}

.kw-finder {
    --kw-bordeaux: #97233F;
    --kw-bordeaux-dark: #7A1C33;
    --kw-cream: #F5F0EB;
    --kw-border: #DDD5C8;
    --kw-body-text: #1A1A1A;
    max-width: 720px;
    margin: 0 auto 48px;
    padding: 32px 28px;
    background: #fff;
    border: 1px solid var(--kw-border);
    border-radius: 6px;
    box-shadow: 0 4px 24px rgba(26, 26, 26, 0.06);
}

/* ── Progress-Bar ──────────────────────────────────────────── */
.kw-finder .ff-el-progress {
    background: var(--kw-cream) !important;
    border-radius: 999px !important;
    height: 8px !important;
    overflow: hidden;
    margin: 0 0 8px;
    border: none !important;
}
.kw-finder .ff-el-progress-bar {
    background: var(--kw-bordeaux) !important;
    background-image: none !important;
    height: 8px !important;
    border-radius: 999px !important;
    transition: width 0.3s ease;
    box-shadow: none !important;
}
.kw-finder .ff-el-progress-status,
.kw-finder .ff-el-progress-title {
    color: var(--kw-body-text) !important;
    font-family: 'Josefin Sans', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.kw-finder .ff-el-progress-status { display: none; } /* "33%" hide */
/* Issue #542: FluentForms rendert %-Text in `.ff-el-progress-bar > span` (z.B. „77%"). Balken-Fill kommt aus dem Parent (width + bordeaux background), Span trägt nur Text → Span verstecken, Bar unverändert. */
.kw-finder .ff-el-progress-bar > span { display: none !important; }
.kw-finder .ff-step-header {
    margin-bottom: 28px;
}

/* ── Radio-Pills: jedes Option-Item als Karte ──────────────── */
.kw-finder .ff-el-form-control-label {
    font-family: 'Josefin Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--kw-body-text) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 0 14px !important;
    line-height: 1.4;
}
.kw-finder .ff-el-group { margin-bottom: 28px !important; }

.kw-finder .ff-el-form-check,
.kw-finder .ff_list_buttons li,
.kw-finder .ff-el-input--content > div { /* radio-Wrapper variants */
    display: block;
    margin: 0 0 10px;
}
.kw-finder .ff-el-form-check input[type="radio"],
.kw-finder .ff-el-form-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.kw-finder .ff-el-form-check label {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 16px;
    background: #fff;
    border: 1.5px solid var(--kw-border);
    border-radius: 4px;
    font-family: 'PT Serif', serif;
    font-size: 15px;
    color: var(--kw-body-text);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
    margin: 0;
    user-select: none;
}
.kw-finder .ff-el-form-check label::before {
    content: '';
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-right: 12px;
    border: 2px solid var(--kw-border);
    border-radius: 50%;
    background: #fff;
    transition: border-color 0.15s, background 0.15s;
}
.kw-finder .ff-el-form-check label:hover {
    border-color: var(--kw-bordeaux);
    background: rgba(151, 35, 63, 0.03);
}
.kw-finder .ff-el-form-check label:has(input[type="radio"]:checked),
.kw-finder .ff-el-form-check label:has(input[type="checkbox"]:checked) {
    border-color: var(--kw-bordeaux);
    background: rgba(151, 35, 63, 0.06);
}
.kw-finder .ff-el-form-check label:has(input[type="radio"]:checked)::before,
.kw-finder .ff-el-form-check label:has(input[type="checkbox"]:checked)::before {
    border-color: var(--kw-bordeaux);
    background: radial-gradient(circle, var(--kw-bordeaux) 45%, #fff 50%);
}
.kw-finder .ff-el-form-check label:has(input[type="radio"]:focus-visible),
.kw-finder .ff-el-form-check label:has(input[type="checkbox"]:focus-visible) {
    outline: 2px solid var(--kw-bordeaux);
    outline-offset: 2px;
}

/* ── Step 3 Text-Inputs (eigene Regeln statt .kw-inquiry--cream Vererbung) ─ */
.kw-finder .ff-el-form-control {
    width: 100%;
    padding: 12px 14px;
    font-family: 'PT Serif', serif;
    font-size: 15px;
    line-height: 1.5;
    border: 1.5px solid var(--kw-border);
    border-radius: 4px;
    background: #fff;
    color: var(--kw-body-text);
    transition: border-color 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    min-height: 48px;
}
.kw-finder .ff-el-form-control::placeholder { color: #999; }
.kw-finder .ff-el-form-control:focus {
    outline: none;
    border-color: var(--kw-bordeaux);
}
.kw-finder textarea.ff-el-form-control { min-height: 100px; }

/* Vorname/Nachname Zwei-Spalter auf Desktop */
.kw-finder .ff-t-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 0;
}
.kw-finder .ff-t-cell { min-width: 0; }

/* ── Next / Prev Buttons ────────────────────────────────────── */
.kw-finder .ff-btn-next,
.kw-finder .ff-btn-prev,
.kw-finder .ff-btn-submit {
    font-family: 'Josefin Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.8px !important;
    padding: 14px 28px !important;
    border-radius: 4px !important;
    min-height: 48px;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: 1.5px solid var(--kw-bordeaux) !important;
}
.kw-finder .ff-btn-next,
.kw-finder .ff-btn-submit {
    background: var(--kw-bordeaux) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(151, 35, 63, 0.2) !important;
}
.kw-finder .ff-btn-next:hover,
.kw-finder .ff-btn-submit:hover {
    background: var(--kw-bordeaux-dark) !important;
    border-color: var(--kw-bordeaux-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(151, 35, 63, 0.28) !important;
}
.kw-finder .ff-btn-prev {
    background: #fff !important;
    color: var(--kw-bordeaux) !important;
    box-shadow: none !important;
}
.kw-finder .ff-btn-prev:hover {
    background: rgba(151, 35, 63, 0.06) !important;
}
.kw-finder .ff-btn-submit {
    width: 100%;
    margin-top: 16px;
}

/* Step-Body Padding */
.kw-finder .ff-step-body { padding-top: 8px; }
.kw-finder .ff_step_actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--kw-border);
}

/* ── Range-Slider (FF Pro nutzt rangeslider.js Polyfill) ────── */
.kw-finder .rangeslider {
    background: var(--kw-cream) !important;
    height: 10px !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    margin: 16px 0 8px !important;
}
.kw-finder .rangeslider__fill {
    background: var(--kw-bordeaux) !important;
    box-shadow: none !important;
    border-radius: 999px !important;
}
.kw-finder .rangeslider__handle {
    width: 28px !important;
    height: 28px !important;
    background: var(--kw-bordeaux) !important;
    background-image: none !important;
    border: 3px solid #fff !important;
    box-shadow: 0 2px 10px rgba(151, 35, 63, 0.4) !important;
    border-radius: 50% !important;
    top: -10px !important;
    transition: transform 0.15s ease;
}
.kw-finder .rangeslider__handle::after {
    display: none !important;
}
.kw-finder .rangeslider__handle:active,
.kw-finder .rangeslider--active .rangeslider__handle {
    transform: scale(1.1);
}

/* Value-Anzeige (FF rendert <i> Element mit Wert nach Slider) */
.kw-finder .ff-el-range,
.kw-finder .ff_range_value,
.kw-finder .ff-el-input--content > i {
    display: block;
    text-align: center;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    font-style: normal;
    color: var(--kw-bordeaux);
    margin-top: 8px;
    letter-spacing: 0.5px;
}

/* Help-Tooltip-Icon (ⓘ) ausblenden — Wert ist schon sichtbar */
.kw-finder .ff-el-help-icon,
.kw-finder .ff-help-message-icon,
.kw-finder .ff-el-tooltip {
    display: none !important;
}

/* Slider-Wrap: extra Spacing */
.kw-finder .kw-finder-slider-wrap { margin-bottom: 32px !important; }

/* Validation */
.kw-finder .error {
    font-family: 'PT Serif', serif !important;
    font-size: 12px !important;
    color: var(--kw-bordeaux) !important;
    margin-top: 6px !important;
}

/* Success */
.kw-finder .ff-message-success {
    padding: 24px;
    border-radius: 4px;
    background: rgba(151, 35, 63, 0.06);
    border: 1px solid var(--kw-bordeaux);
    color: var(--kw-body-text);
    text-align: center;
    font-family: 'PT Serif', serif;
    font-size: 16px;
}

/* Mobile (≤599px) */
@media (max-width: 599px) {
    .kw-finder {
        padding: 20px 16px;
        margin: 0 -8px 32px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    .kw-finder .ff-t-container {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .kw-finder .ff-btn-next,
    .kw-finder .ff-btn-prev,
    .kw-finder .ff-btn-submit {
        padding: 14px 18px !important;
        font-size: 12px !important;
        letter-spacing: 1.4px !important;
    }
    .kw-finder .ff-el-form-check label { font-size: 14px; padding: 12px 14px; }
}

/* ============================================================
 * Zubehör-Grid (Shortcode [kw_zubehoer_grid])
 * WAS:   Filterbares Produkt-Grid für Zubehör- und Forstgeräte-CPT.
 * WARUM: Spiegelt das Winden-Hub-Card-Pattern, damit Hub-Pages
 *        konsistent wirken (Conversion-Architektur, principles.md §8).
 * ============================================================ */
.kw-zubehoer-wrap {
    max-width: var(--kw-content-width, 1280px);
    margin: 0 auto;
    padding: 24px 32px 64px;
}

/* Filter-Bar */
.kw-zubehoer-wrap .kw-filter-toggle-btn {
    display: none;
    font-family: var(--kw-font-display, 'Josefin Sans'), sans-serif;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.2px;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid var(--kw-border, rgba(0,0,0,0.12));
    border-radius: 6px;
    color: var(--kw-bordeaux, #97233F);
    cursor: pointer;
    margin-bottom: 12px;
}
.kw-zubehoer-wrap .kw-filter-bar {
    background: #fff;
    border: 1px solid var(--kw-border, rgba(0,0,0,0.10));
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 32px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.kw-zubehoer-wrap .kw-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
}
.kw-zubehoer-wrap .kw-filter-group { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.kw-zubehoer-wrap .kw-filter-cats { flex: 1; min-width: 280px; }
.kw-zubehoer-wrap .kw-filter-label {
    font-family: var(--kw-font-display, 'Josefin Sans'), sans-serif;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px;
    color: var(--kw-text-muted, #6B6B6B);
    white-space: nowrap;
}
.kw-zubehoer-wrap .kw-filter-checks {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.kw-zubehoer-wrap .kw-filter-checks label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--kw-cream, #F5F0EB);
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--kw-font-display, 'Josefin Sans'), sans-serif;
    font-size: 13px; font-weight: 600;
    color: var(--kw-body-text, #1A1A1A);
    cursor: pointer;
    transition: all 0.2s;
}
.kw-zubehoer-wrap .kw-filter-checks label:hover { border-color: var(--kw-bordeaux, #97233F); }
.kw-zubehoer-wrap .kw-filter-checks input[type="checkbox"] {
    accent-color: var(--kw-bordeaux, #97233F);
    width: 14px; height: 14px; margin: 0;
}
.kw-zubehoer-wrap .kw-filter-checks label:has(input:checked) {
    background: var(--kw-bordeaux, #97233F);
    color: #fff;
}
.kw-zubehoer-wrap .kw-filter-status {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--kw-border, rgba(0,0,0,0.08));
    font-family: var(--kw-font-body, 'PT Serif'), serif;
    font-size: 13px;
    color: var(--kw-text-muted, #6B6B6B);
}
.kw-zubehoer-wrap .kw-filter-status [data-count] {
    font-family: var(--kw-font-display, 'Josefin Sans'), sans-serif;
    font-weight: 700;
    color: var(--kw-body-text, #1A1A1A);
}

/* Reset-Knopf (#1183-Nachbesserung 24.08., Audio-Rundgang: "schaut ein bisschen
   traurig aus") — war ein randloser, unauffaelliger Text-Link (Regel in
   themes/koenigswieser-2026/css/components.css, laedt nach diesem File, gewann
   bei gleicher Spezifitaet). Scoped auf .kw-zubehoer-wrap, damit die hoehere
   Spezifitaet gewinnt, ohne die generische .kw-filter-reset-Regel anzutasten.
   Bordeaux-Pill im Stil der Kompatibel-mit-Chips (radius 999px) daneben,
   Tap-Flaeche via min-height 44px. */
.kw-zubehoer-wrap .kw-filter-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 20px;
    background: transparent;
    border: 1.5px solid var(--kw-bordeaux, #97233F);
    border-radius: 999px;
    font-family: var(--kw-font-display, 'Josefin Sans'), sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--kw-bordeaux, #97233F);
    cursor: pointer;
    transition: all 0.2s;
}
.kw-zubehoer-wrap .kw-filter-reset:hover {
    background: var(--kw-bordeaux, #97233F);
    color: #fff;
}

/* Grid */
.kw-zubehoer-wrap .kw-zub-grid {
    display: grid;
    grid-template-columns: repeat(var(--kw-zub-cols, 4), 1fr);
    gap: 24px;
}

/* Cards: Image-Wrapper + Placeholder */
.kw-zubehoer-wrap .kw-card { background: #fff; }
.kw-zubehoer-wrap .kw-card > a:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fff;
    padding: 24px;
    overflow: hidden;
    text-decoration: none;
    box-sizing: border-box;
}
.kw-zubehoer-wrap .kw-card > a:first-child img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain; object-position: center;
    display: block;
    transition: transform 0.4s ease;
}
.kw-zubehoer-wrap .kw-card:hover > a:first-child img { transform: scale(1.06); }

/* Kategorie-Pill ueber Titel (Funksteuerung / Sicherheit / Hydraulik / Anschlagmittel / Ausruestung) */
.kw-zubehoer-wrap .kw-tag {
    display: inline-block;
    align-self: flex-start;
    background: var(--kw-cream, #F5F0EB);
    color: var(--kw-bordeaux, #97233F);
    font-family: var(--kw-font-display, 'Josefin Sans'), sans-serif;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.4px;
    padding: 5px 12px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.kw-card-placeholder {
    width: 100%; height: 100%;
    min-height: 140px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--kw-cream, #F5F0EB), var(--kw-cream-dark, #EAE3D8));
    color: var(--kw-text-muted, #6B6B6B);
    font-family: var(--kw-font-display, 'Josefin Sans'), sans-serif;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px;
    text-decoration: none;
}

/* Mobile — 2-spaltig bleibt auch unter 600px (Card-Look wie altes Hardcode-Grid) */
@media (max-width: 900px) {
    .kw-zubehoer-wrap .kw-zub-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 600px) {
    .kw-zubehoer-wrap { padding: 16px 16px 48px; }
    .kw-zubehoer-wrap .kw-zub-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .kw-zubehoer-wrap .kw-card > a:first-child { padding: 14px; }
    .kw-zubehoer-wrap .kw-card-body { padding: 14px 14px 18px; }
    .kw-zubehoer-wrap .kw-card-body h3 { font-size: 16px; }
    .kw-zubehoer-wrap .kw-tag { font-size: 9px; padding: 4px 9px; margin-bottom: 8px; }
    .kw-zubehoer-wrap .kw-filter-toggle-btn { display: inline-flex; }
    .kw-zubehoer-wrap .kw-filter-bar { display: none; padding: 16px; }
    .kw-zubehoer-wrap .kw-filter-bar.is-open { display: block; }
    .kw-zubehoer-wrap .kw-filter-row { flex-direction: column; align-items: stretch; gap: 12px; }
    .kw-zubehoer-wrap .kw-filter-cats { min-width: 0; }
}
/* Sehr schmale Phones: trotzdem nicht unter 2-Spalten kollabieren, nur Abstaende reduzieren */
@media (max-width: 380px) {
    .kw-zubehoer-wrap .kw-zub-grid { gap: 10px; }
    .kw-zubehoer-wrap .kw-card-body { padding: 12px 12px 16px; }
    .kw-zubehoer-wrap .kw-card-body h3 { font-size: 15px; }
}

/* =============================================================
   holzquelle Brand-Marker — Recovery 2026-05-22
   Verloren beim 12:15 Auto-Deploy von PR #582. Memory-Spec:
   feedback/feedback_holzquelle_brand_markup.md
   Jede „Holzquelle"-Marke wird als <span class="kw-holzquelle">
   holzquelle</span> ausgezeichnet — lowercase, Poppins 500.
   Poppins-Webfont wird in themes/koenigswieser-2026/inc/enqueue.php
   geladen.
   ============================================================= */
.kw-holzquelle {
    font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: 0;
    /* Farbe erbt vom Eltern-Element — wirkt wie ein Inline-Logo */
}

/* =============================================================
   kw-intro auf bordeaux-Hintergrund (Holzquelle-LP /holzquelle/)
   WARUM: Default-Schrift ist dunkel (#1A1A1A) — auf Bordeaux unleserlich.
   Auftrag Gregor 2026-05-22: "Schrift einfach weiss oder creme, rest passt."
   ============================================================= */
.kw-block-section--bordeaux .kw-intro-grid__text h2 { color: #fff; }
.kw-block-section--bordeaux .kw-intro-grid__text .kw-overline { color: #f3d9c0; }
.kw-block-section--bordeaux .kw-intro-grid__text .kw-text-body { color: rgba(255,255,255,0.92); }
/* WAS: Absätze im Bordeaux-Fließtext holen sich die helle Sektionsfarbe zurück.
   WARUM (#1140): tokens.css setzt global `p { color: var(--kw-body-text) }` (#1A1A1A).
   Diese Element-Regel schlägt die Vererbung von .kw-text-body, also wird der Absatz
   samt em/strong darin fast schwarz auf Bordeaux (Kontrast 2,18). `inherit` gibt die
   helle Farbe zurück, ohne einen zweiten Farbwert zu erfinden. */
.kw-block-section--bordeaux .kw-intro-grid__text .kw-text-body p { color: inherit; }
.kw-block-section--bordeaux .kw-intro-grid__text .kw-text-body ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}
.kw-block-section--bordeaux .kw-intro-grid__text .kw-text-body li {
    position: relative;
    padding-left: 34px;
    margin-bottom: 16px;
    font-size: 1.15rem;
    line-height: 1.5;
}
.kw-block-section--bordeaux .kw-intro-grid__text .kw-text-body li::before {
    content: "\2192";
    position: absolute;
    left: 0;
    top: 0;
    color: #f3d9c0;
    font-weight: 700;
    font-size: 1.35rem;
}
.kw-block-section--bordeaux .kw-intro-grid__text .kw-btn-outline-dark {
    background: #fff;
    color: var(--kw-bordeaux, #97233F);
    border-color: #fff;
}
.kw-block-section--bordeaux .kw-intro-grid__text .kw-btn-outline-dark:hover {
    background: transparent;
    color: #fff;
}


/* ===== KW SBS-STRIP =====
   WARUM: Stop-Motion-SBS-Sektion war zu hoch (4/5 aspect Frames + Auto-Play).
   Neuer schlanker Streifen: Text-Spalte links, Start- und End-Frame nebeneinander
   rechts. Erklaert die Bewegung statisch in halber Hoehe. */
.kw-sbs-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
    max-width: var(--kw-section-max, 1200px);
    margin: 0 auto;
}
.kw-sbs-strip__copy { display: flex; flex-direction: column; gap: 0.9rem; }
.kw-sbs-strip__title {
    /* Fix #1278 Punkt 6: Variable hiess --font-display statt --kw-font-display,
       existierte nirgends -> Fallback Poppins griff IMMER statt Josefin Sans. */
    font-family: var(--kw-font-display, "Josefin Sans", sans-serif);
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    line-height: 1.15;
    margin: 0;
    color: var(--color-ink, #1A1A1A);
}
.kw-sbs-strip__body {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--color-ink, #1A1A1A);
}
.kw-sbs-strip__frames {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.kw-sbs-strip__frame {
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 6px;
    background: var(--color-surface, #F5F0EB);
}
.kw-sbs-strip__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.kw-sbs-strip__placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-surface, #F5F0EB);
    color: #999;
    font-size: 0.85rem;
}
.kw-sbs-strip__caption {
    margin: 1.25rem auto 0;
    max-width: var(--kw-section-max, 1200px);
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-ink-muted, #666);
    letter-spacing: 0.02em;
}
@media (max-width: 768px) {
    .kw-sbs-strip {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .kw-sbs-strip__frames {
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
    }
    /* Hochformat bleibt auch auf Mobile — nebeneinander, nicht stacked */
}

/* 2026-05-29 — Polterschild-Partner-Pill: Holzquelle-Co-Brand-Marker (Gregor-Request)
   Fill: --kw-holzquelle-light #589B65 · Border: --kw-holzquelle-dark #245C3D
   SSOT: data/ssot/design/farben.md Z.75–83 (Co-Brand holzquelle).
   Pill rendert seit dieser Version IMMER auf jeder Haendler-Karte. */
.kw-haendler-card__pill--polter {
    background: #245C3D;
    border: 1px solid #245C3D;
}

/* 2026-05-29 — Haendler-Kontaktdetails-Modal (Lightbox, Gregor-Request).
   Trigger = <button class='kw-haendler-card__details-toggle'>, ersetzt frueheres <summary>.
   Modal = native <dialog class='kw-haendler-modal'>.
   Mobile = Bottom-Sheet · Desktop = zentriertes Modal. */

button.kw-haendler-card__details-toggle {
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 4px;
    font: inherit;
    cursor: pointer;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: border-color .15s, background .15s;
}
button.kw-haendler-card__details-toggle:hover {
    border-color: #97233F;
    background: #fafafa;
}
button.kw-haendler-card__details-toggle:focus-visible {
    outline: 2px solid #97233F;
    outline-offset: 2px;
}

.kw-haendler-modal {
    border: none;
    border-radius: 10px;
    padding: 0;
    max-width: 480px;
    width: calc(100% - 32px);
    background: #fff;
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
    color: #1a1a1a;
}
.kw-haendler-modal::backdrop {
    background: rgba(0, 0, 0, .55);
}

.kw-haendler-modal__close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: transparent;
    border: none;
    font-size: 30px;
    line-height: 1;
    color: #777;
    cursor: pointer;
    padding: 6px 12px;
    z-index: 1;
}
.kw-haendler-modal__close:hover { color: #000; }
.kw-haendler-modal__close:focus-visible {
    outline: 2px solid #97233F;
    outline-offset: 2px;
}

.kw-haendler-modal__body { padding: 32px 24px 24px; }
.kw-haendler-modal__title {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 6px;
    padding-right: 36px;
    line-height: 1.2;
}
.kw-haendler-modal__ort {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 2px;
}
.kw-haendler-modal__adresse {
    font-family: 'PT Serif', serif;
    font-size: 13px;
    color: #888;
    margin: 0 0 14px;
    line-height: 1.4;
}
.kw-haendler-modal__info {
    margin-top: 14px !important;
    padding-top: 0 !important;
    border-top: none !important;
}

/* Mobile: Bottom-Sheet */
@media (max-width: 600px) {
    .kw-haendler-modal {
        max-width: 100%;
        width: 100%;
        margin: 0;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 14px 14px 0 0;
        max-height: 85vh;
        overflow-y: auto;
    }
    .kw-haendler-modal__body { padding: 28px 20px 24px; }
}

/* 2026-05-29 — Kontakt-Button + Modal-Feintuning (Gregor-Request):
   freundlicher Look (kein UPPERCASE), Pill-Radius, dunklere Adresse, Pills im Modal. */
button.kw-haendler-card__details-toggle {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
    font-size: 13px;
    border-radius: 999px;
    padding: 8px 18px;
    min-height: 36px;
    width: auto;
    align-self: flex-start;
    margin-top: 16px;
    color: #1a1a1a;
}
.kw-haendler-modal__adresse {
    color: #444;
}
.kw-haendler-modal__pills {
    margin: 6px 0 14px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* 2026-05-29 — Kontakt-Button als CTA: Bordeaux-Fill + weiss, zentriert (Gregor-Request). */
button.kw-haendler-card__details-toggle {
    background: var(--bordeaux, #97233F);
    color: #fff;
    border: none;
    font-weight: 600;
    padding: 10px 24px;
    /* Fix #1278 Punkt 7 (Nachtrag Pruefrunde #1327): gemessen 40,4px, Gate verlangt >=44px. */
    min-height: 44px;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
}
button.kw-haendler-card__details-toggle:hover {
    background: #7a1c33;
    border: none;
    color: #fff;
}
button.kw-haendler-card__details-toggle:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

/* 2026-05-29 — Kontakt-Button: Sans-Serif Block-Look wie die CTAs (Gregor-Request).
   PT-Serif war geerbt (font: inherit) und sah wie Schreibschrift aus. */
button.kw-haendler-card__details-toggle,
button.kw-haendler-card__details-toggle .kw-haendler-card__details-label {
    font-family: 'Josefin Sans', sans-serif;
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
}

/* 2026-05-29 — Kontakt-Button: doch UPPERCASE (Gregor-Request, revidiert). */
button.kw-haendler-card__details-toggle,
button.kw-haendler-card__details-toggle .kw-haendler-card__details-label {
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* ============================================================
   FAQ-Block: kanonischer Akkordeon-Stil (#961)
   Vereinheitlicht den kw-faq-Block auf den kgd-65-sa-Stil.
   1:1 aus themes/.../css/single-seilwinde.css (.kw-product-page .kw-faq*),
   re-gescoped auf .kw-faq-block + seilwinde-only-Vars auf globale Tokens
   gemappt (--kw-text -> --kw-body-text, --kw-text-soft -> --kw-text-muted).
   ============================================================ */
.kw-faq-block .kw-faq {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--kw-border);
}
.kw-faq-block .kw-faq__item { border-bottom: 1px solid var(--kw-border); }
.kw-faq-block .kw-faq__q {
    /* #1274 Nachpruefung 22.08.: <summary> erbt UA-Default box-sizing:content-box.
       width:100% + padding:18px 4px addierte das Padding ON TOP der 100%-Breite
       (355px Elternrahmen -> 355+4+4=363px), dadurch 8px Ueberstand rechts (10px
       links / 2px rechts statt symmetrisch). border-box zieht das Padding in die
       100%-Breite hinein, kein Layout-/Optik-Unterschied sonst. */
    box-sizing: border-box;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 18px 4px;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    text-align: left;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--kw-body-text);
    cursor: pointer;
    transition: color .25s;
    list-style: none;
}
.kw-faq-block .kw-faq__q::-webkit-details-marker { display: none; }
.kw-faq-block .kw-faq__q:hover,
.kw-faq-block details[open] .kw-faq__q { color: var(--kw-bordeaux); }
.kw-faq-block .kw-faq__plus {
    width: 28px; height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 400;
    font-size: 22px;
    color: var(--kw-bordeaux);
    flex-shrink: 0;
}
.kw-faq-block details[open] .kw-faq__plus::before { content: '\2013'; }
.kw-faq-block details:not([open]) .kw-faq__plus::before { content: '+'; }
.kw-faq-block .kw-faq__a { padding: 0 4px 22px; max-width: 70ch; }
.kw-faq-block .kw-faq__a p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--kw-text-muted);
}

/* #1512: Block-Stil "Hervorgehoben" (register_block_style('core/group', 'kw-karte-
   hervorgehoben'), kw-blocks.php) -- ersetzt das bisherige ACF-Bool-Feld "highlight"
   fuer Karten in ad-model-grid/benefits/ads-faq/trust-cards. Wirkung 1:1 aus der
   bisherigen .kw-ad-model-grid__card--highlight-Regel (Bordeaux-Rand, weisser
   Hintergrund, Schatten). Generisch auf core/group, damit die Kern-Block-Karte
   in jedem der vier Bloecke wie zuvor als "highlight" erkennbar bleibt, egal
   welche Block-eigene Kartenklasse (kw-ad-model-grid__card / kw-benefits-v2__karte /
   kw-trust-card) daneben noch sitzt. */
.wp-block-group.is-style-kw-karte-hervorgehoben {
    border: 2px solid var(--kw-bordeaux, #97233F);
    background: #fff;
    box-shadow: 0 8px 28px rgba(151, 35, 63, 0.12);
    border-radius: 12px;
}

/* ==========================================================================
   #1520: LP-SEITENSCHLUSS "Foto-Schlussmoment"
   WARUM: Design-Entscheid Gregor nach Drei-Perspektiven-Panel -- ersetzt auf
   den Ads-LPs (5150/5155/5162/5185/5187) alles zwischen FAQ und Footer
   (acf/kw-step-cta + die zwei Cream-Streifen, einer davon ungueltig
   gespeicherter Altbestand) durch EINE Abschluss-Sektion. Bauweise ECHTES
   GUTENBERG: core/cover (echtes Werkstatt-Foto Vorchdorf, Attachment 1692)
   mit Kern-Bloecken darin -- kein neuer ACF-Block, Pattern kw/lp-schluss
   in inc/patterns.php liefert das Markup. Overlay bewusst OHNE eigene
   Farbregel: core/cover's Default-Dim (has-background-dim-*, kein
   overlayColor gesetzt) ist bereits neutral-schwarz (#000, siehe
   wp-includes/blocks/cover/style.min.css) -- Styleguide verbietet CI-Farbe
   als Bild-Overlay, darum hier keine eigene Overlay-Farbe definieren.
   Sticky-Leiste (acf/kw-sticky-cta) bleibt unangetastet und ist <768px die
   einzige Handlung: der Inline-Knopf dieser Sektion wird dort ausgeblendet
   (Panel-Entscheid). Mobil linksbuendig statt zentriert (Panel-Befund:
   zentrierte Mehrzeiler sind am Handy schwer lesbar).

   NACHARBEIT (Ticket-Fund): Klassennamen/Struktur an das editor-validierte
   Kanon-Markup angeglichen (reports/issue-1520/schluss-markup-kanonisch.html,
   0 Fehlerboxen/Warnungen im echten Gutenberg-Editor -- die erste Fassung
   hier war noch auf die selbst gebaute PHP/serialize_blocks()-Struktur
   gemuenzt und ist damit obsolet). Kein "align":"full" mehr im Markup, darum
   kein .alignfull-Selektor. Schritte sind jetzt ein <ol class="kw-lp-
   schluss__schritte"><li>-Kern-Listenblock statt eigener Gruppen-Divs je
   Schritt -- die gefuellten Bordeaux-Kreise kommen aus list-style:none +
   CSS counter() auf ::before (kein <li>::marker-Hintergrund, das ist
   browseruebergreifend nicht zuverlaessig stylebar). Klassen: __titel (h2),
   __leitsatz (Tragende Zeile), __hinweis (Zweitzeile), __schritte (ol),
   __aktion (.wp-block-buttons), __knopf (.wp-block-button). */
.kw-lp-schluss {
    padding: 100px 40px;
}
.kw-lp-schluss .wp-block-cover__inner-container {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.kw-lp-schluss__titel {
    font-family: 'Josefin Sans', sans-serif;
    font-size: var(--kw-text-xl, 28px);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
    color: #fff;
    margin: 0 0 24px;
}
.kw-lp-schluss__leitsatz {
    font-family: 'PT Serif', serif;
    font-size: 20px;
    line-height: 1.6;
    color: #fff;
    margin: 0 0 12px;
}
.kw-lp-schluss__hinweis {
    font-family: 'PT Serif', serif;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 40px;
}
.kw-lp-schluss__schritte {
    list-style: none;
    counter-reset: kw-lp-schluss-schritt;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 32px;
    margin: 0 0 40px;
    padding: 0;
}
.kw-lp-schluss__schritte li {
    counter-increment: kw-lp-schluss-schritt;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    max-width: 260px;
    font-family: 'PT Serif', serif;
    font-size: 15.5px;
    line-height: 1.4;
    color: #fff;
}
.kw-lp-schluss__schritte li::before {
    /* Gefuellter Bordeaux-Kreis mit Zahl -- CSS counter() statt ::marker
       (::marker laesst sich nicht zuverlaessig als gefuellter Kreis stylen). */
    content: counter(kw-lp-schluss-schritt);
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--kw-bordeaux, #97233F);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
}
.kw-lp-schluss__aktion {
    margin: 0;
}
.kw-lp-schluss__knopf .wp-block-button__link {
    /* Aufsetzend auf die .kw-btn-primary-Optik (Button-System weiter oben) --
       eigener Selektor, weil core/button eine eigene Klassenstruktur ausgibt
       (.wp-block-button__link statt .kw-btn), Werte 1:1 uebernommen. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 40px;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    border-radius: 6px;
    background: var(--kw-bordeaux, #97233F);
    color: #fff;
    border: 2px solid var(--kw-bordeaux, #97233F);
    transition: all 0.3s ease;
}
.kw-lp-schluss__knopf .wp-block-button__link:hover {
    background: var(--kw-bordeaux-dark, #7A1C33);
    border-color: var(--kw-bordeaux-dark, #7A1C33);
}

@media (max-width: 768px) {
    .kw-lp-schluss {
        padding: 64px 24px;
    }
    .kw-lp-schluss__leitsatz,
    .kw-lp-schluss__hinweis {
        /* Panel-Befund: zentrierte Mehrzeiler sind am Handy schwer lesbar. */
        text-align: left;
    }
    .kw-lp-schluss__schritte {
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: nowrap;
        gap: 12px;
    }
    .kw-lp-schluss__schritte li {
        max-width: none;
    }
    .kw-lp-schluss .kw-lp-schluss__aktion,
    .kw-lp-schluss .kw-lp-schluss__knopf {
        /* Panel-Entscheid: Sticky-Leiste ist am Handy die einzige Handlung,
           der Inline-Knopf dieser Sektion wird darum ausgeblendet.
           #1520/#1521: Spezifitaet auf 0-2-0 angehoben (Elternklasse ergaenzt),
           WordPress' generiertes .wp-block-buttons-is-layout-flex{display:flex}
           steht auf derselben Spezifitaet 0-1-0 und stand spaeter im
           Kaskade-Fluss -> gewann bisher gegen diese Regel (LEAD-Browser-
           Diagnose: computed display:flex bei 375px trotz dieser Regel). */
        display: none;
    }
}