/*
Theme Name: Farbenkranz
Theme URI: https://farbenkranz.de
Description: Child-Theme für den Farbenkranz-Shop auf Basis von GeneratePress. Single Source of Truth für Code & CSS.
Author: Pixel Goblins
Template: generatepress
Version: 0.2.92
Text Domain: farbenkranz
*/

/* ==== Design-Tokens (Farbenkranz Design System, native CSS-Vars) ====
   Nur die reinen Variablen-Layer — kein visueller Effekt bis zur Nutzung.
   base.css (Element-Styles) und fonts.css (Webfonts) folgen in Phase 3.
   Token-Dateien werden NICHT mehr per @import geladen (Browser-Cache
   invalidiert nie), sondern in functions.php mit filemtime-Version
   enqueued, damit Updates zuverlässig cache-gebustet werden. */
/* Webfonts (Phase 3 / M1): Cormorant Garamond (display) + Karla (sans).
   DSGVO: lokal gehostet aus /fonts/ (variable woff2, latin+latin-ext) und in
   functions.php enqueued (farbenkranz-fonts) — KEIN @import von Google mehr
   (das übermittelte die Besucher-IP an fonts.googleapis.com). */

/* ==========================================================================
   Migriert aus Customizer/Site-CSS (ehem. DB custom_css Post 140)
   ========================================================================== */

/* GeneratePress Site CSS */
.wp-block-button.wc-block-grid__product-add-to-cart a,
.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link {
    border-radius: 0px;
    font-size: 17px;
}

.wc-block-grid__product-title {
    font: inherit;
    font-weight: 400;
    font-size: 19px;
}

h1.product_title.entry-title {
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .wc-block-grid__products {
        margin-left: 0;
        max-width: 100%;
    }
}
/* End GeneratePress Site CSS */

/* Zentrierte Logo-Navigation (Desktop) */
@media (min-width: 769px) {
    .inside-header > .site-branding,
    .inside-header > .navigation-branding,
    .inside-header > .site-logo,
    .site-branding-container,
    :is(#site-navigation, #sticky-navigation) .navigation-branding .site-logo,
    #sticky-navigation .navigation-branding {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
    }

    /* GP Premium tauscht beim Anheften die ID: fixierte Nav =
       #sticky-navigation (Original wird #sticky-placeholder) -> Layout-
       Regeln muessen beide IDs abdecken. */
    :is(#site-navigation, #sticky-navigation) {
        margin-left: unset !important;
        display: flex;
    }

    .site-header .main-navigation:not(#sticky-navigation) .inside-navigation {
        margin: unset;
    }

    :is(#site-navigation, #sticky-navigation),
    #primary-menu,
    .main-navigation .inside-navigation {
        flex: 1;
    }

    /* nth-child(3): erstes rechtsbündiges Menü-Item */
    .main-navigation ul li:nth-child(3) {
        margin-left: auto;
    }
}

/* ===== Phase 3 — M1: Fundament + einheitliche Buttons ===== */

/* ---- 1. Base typography (conservative, tokens-driven) ----
   Only typography/color from tokens; no layout changes. Scoped to
   GeneratePress-friendly selectors so we don't fight existing structure. */
body {
    font-family: var(--font-body);
    font-weight: var(--fw-light);
    line-height: var(--lh-body);
    color: var(--text-body);
}

h1, h2, h3, h4,
.entry-title {
    font-family: var(--font-display);
    color: var(--text-heading);
}

body a {
    color: var(--text-link);
    transition: color var(--dur-fast) var(--ease-soft);
}
body a:hover {
    color: var(--fk-terracotta-deep);
}

/* ---- 2. UNIFIED BUTTONS — one pill/uppercase/tracked treatment for
   every button source (Gutenberg, WooCommerce, GeneratePress/GenerateBlocks,
   native form controls), so buttons look identical regardless of origin.
   Selectors are scoped/compounded (body …, .woocommerce …) to win over
   GeneratePress/Woo core CSS and the still-active CodeKit snippet 25
   without resorting to !important where possible. ---- */
body .wp-block-button__link,
body .wp-element-button,
body .gb-button,
body .wp-block-generateblocks-button,
body button:not(.menu-toggle):not(.plus):not(.minus):not(.fk-blume-btn):not(.fk-modal-close):not(.fk-minicart__close),
body input[type="submit"],
body input[type="button"],
body .wp-block-search__button,
body.woocommerce a.button,
body.woocommerce button.button:not(.plus):not(.minus),
body.woocommerce input.button:not(.qty),
body .single_add_to_cart_button,
body .added_to_cart,
body .wc-block-components-button,
body .wp-block-button.wc-block-grid__product-add-to-cart a,
body.woocommerce a.button.add_to_cart_button,
body.woocommerce .products a.button,
body a.add_to_cart_button,
body .wc-block-grid__product-add-to-cart a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: var(--transition-base);
    line-height: 1;
    text-decoration: none;
}

/* PRIMARY vs SECONDARY are deliberately re-declared below with
   !important on the DECISIVE visual properties only (background, color,
   border, border-color, border-radius, text-transform, padding,
   letter-spacing). This is an intentional design-system button layer:
   GeneratePress/GenerateBlocks ship their own button background/radius
   rules (some via inline CSS on the generate-style handle, effectively
   very high in cascade order) that otherwise win over our plain
   declarations above even with compounded/high-specificity selectors —
   confirmed by computed-style evidence where our border/radius applied
   but background silently fell back to GP's fir green. !important is
   scoped strictly to these button selectors and only to the properties
   that define the unified look; it must not spread to other rules. */

/* Primary / "buy" CTAs: Gutenberg default buttons + all add-to-cart
   sources (single product, archive/shop loop, cart blocks). Terracotta
   fill, white text, warm lift shadow — matches base.css
   .gbp-button--primary / .fk-button--primary. */
body .wp-block-button__link,
body .wp-element-button,
body .single_add_to_cart_button,
body .added_to_cart,
body .wc-block-components-button,
body .wp-block-button.wc-block-grid__product-add-to-cart a,
body.woocommerce a.button.add_to_cart_button,
body.woocommerce .products a.button,
body a.add_to_cart_button,
body .wc-block-grid__product-add-to-cart a {
    background: var(--fk-buy) !important;
    color: var(--text-on-accent) !important;
    border: 1.5px solid var(--fk-buy) !important;
    border-color: var(--fk-buy) !important;
    border-radius: var(--radius-pill) !important;
    text-transform: uppercase !important;
    padding: 12px 28px !important;
    font-size: var(--fs-small) !important;
    letter-spacing: var(--ls-button) !important;
    box-shadow: 0 8px 20px var(--fk-buy-glow);
}
body .wp-block-button__link:hover,
body .wp-element-button:hover,
body .single_add_to_cart_button:hover,
body .added_to_cart:hover,
body .wc-block-components-button:hover,
body .wp-block-button.wc-block-grid__product-add-to-cart a:hover,
body.woocommerce a.button.add_to_cart_button:hover,
body.woocommerce .products a.button:hover,
body a.add_to_cart_button:hover,
body .wc-block-grid__product-add-to-cart a:hover {
    background: var(--fk-buy-deep) !important;
    border-color: var(--fk-buy-deep) !important;
    color: var(--text-on-accent) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px var(--fk-buy-glow);
}

/* Secondary / neutral buttons: outline style with brand fir border, no
   fill — used for anything not tagged as a buy CTA (e.g. generic
   .woocommerce buttons, .gb-button, GeneratePress/GenerateBlocks controls,
   native <button>/submit inputs outside the buy path). Note:
   .woocommerce a.button here is deliberately generic/non-add-to-cart
   only in effect, because the primary block above is later in source
   order for the add-to-cart-specific selectors and wins on the shared
   properties for elements matching both rule sets. */
body.woocommerce a.button,
body.woocommerce button.button:not(.plus):not(.minus):not(.single_add_to_cart_button),
body.woocommerce input.button:not(.qty),
body .gb-button,
body .wp-block-generateblocks-button,
body button:not(.menu-toggle):not(.plus):not(.minus):not(.single_add_to_cart_button):not(.fk-blume-btn):not(.fk-modal-close):not(.fk-minicart__close):not(.wc-block-components-checkout-place-order-button):not(.wc-block-components-quantity-selector__button):not(.wc-block-cart-item__remove-link),
body input[type="submit"],
body input[type="button"],
body .wp-block-search__button {
    background: var(--fk-sage-soft) !important;
    color: var(--fk-fir) !important;
    border: 1.5px solid var(--fk-sage) !important;
    border-color: var(--fk-sage) !important;
    border-radius: var(--radius-pill) !important;
    text-transform: uppercase !important;
    padding: 12px 28px !important;
    font-size: var(--fs-small) !important;
    letter-spacing: var(--ls-button) !important;
}
body.woocommerce a.button:hover,
body.woocommerce button.button:not(.plus):not(.minus):not(.single_add_to_cart_button):hover,
body.woocommerce input.button:not(.qty):hover,
body .gb-button:hover,
body .wp-block-generateblocks-button:hover,
body button:not(.menu-toggle):not(.plus):not(.minus):not(.single_add_to_cart_button):not(.fk-blume-btn):not(.fk-modal-close):not(.fk-minicart__close):not(.wc-block-components-checkout-place-order-button):not(.wc-block-components-quantity-selector__button):not(.wc-block-cart-item__remove-link):hover,
body input[type="submit"]:hover,
body input[type="button"]:hover,
body .wp-block-search__button:hover {
    background: var(--fk-sage) !important;
    border-color: var(--fk-sage) !important;
    color: var(--fk-fir) !important;
    transform: translateY(-2px);
}

/* Gutenberg is-style-outline → Sekundär-Look (Sage), sonst rendert die Primary-
   Regel oben den zweiten Hero-CTA als vollflächigen Buy-Button. */
body .wp-block-button.is-style-outline .wp-block-button__link,
body .wp-block-button.is-style-outline .wp-element-button {
    background: var(--fk-sage-soft) !important;
    color: var(--fk-fir) !important;
    border: 1.5px solid var(--fk-sage) !important;
    border-color: var(--fk-sage) !important;
    box-shadow: none !important;
}
body .wp-block-button.is-style-outline .wp-block-button__link:hover,
body .wp-block-button.is-style-outline .wp-element-button:hover {
    background: var(--fk-sage) !important;
    border-color: var(--fk-sage) !important;
    color: var(--fk-fir) !important;
    transform: translateY(-2px);
}

/* Deliberately EXCLUDED from the unified pill treatment (would break
   function/UX) — these are never matched by the selectors above:
   - button.menu-toggle (GP nav burger — icon-only control; forcing pill/
     padding/uppercase breaks its square tap target & icon centering)
   - .quantity .plus / .quantity .minus / input.qty (WooCommerce qty
     steppers — tiny numeric controls, pill/padding makes them unusable)
   - .fk-blume-btn (Blumen-Chips auf der Produktseite — kleine Brand-Chips
     in .fk-home-chip-Größe, eigene Regeln in Sektion M4/4)
   - .fk-modal-close (runder Ghost-Close-Button des Blumen-Modals,
     eigene Regeln in Sektion M4/4)
   .added_to_cart IS included above as a primary CTA per spec — it is
   normally a small text link WooCommerce injects after AJAX add-to-cart;
   double-check visually it doesn't look oversized in that context. */

/* ===== Phase 3 — M2: Formulare, Badges, Status, Chips, Cards ===== */

/* ---- 1. UNIFIED FORM CONTROLS — one look for every text-like input
   regardless of source (native WP search/comments, WooCommerce blocks,
   Fluent Forms, GenerateBlocks form fields). Excludes checkboxes/radios
   (styled by the browser/theme as toggle controls, not text fields) and
   explicitly excludes input.qty (WooCommerce quantity stepper — left
   untouched since M1). !important is used only on the decisive box/paint
   properties (background, border, radius, padding, font, color) because
   WooCommerce/GeneratePress ship their own input borders/padding that
   otherwise win via source order or plugin-loaded inline styles. ---- */
body input[type="text"],
body input[type="email"],
body input[type="search"],
body input[type="tel"],
body input[type="number"]:not(.qty),
body input[type="password"],
body input[type="url"],
body textarea,
body select,
body .wc-block-components-text-input input,
body .frm-fluent-form input:not([type="checkbox"]):not([type="radio"]),
body .frm-fluent-form textarea,
body .frm-fluent-form select,
body .fluentform input:not([type="checkbox"]):not([type="radio"]),
body .fluentform textarea,
body .fluentform select,
body .search-field,
body #respond input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
    background: var(--surface-card) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-sm) !important;
    padding: 12px 16px !important;
    font-family: var(--font-sans);
    font-size: var(--fs-normal);
    color: var(--text-body);
    transition: var(--transition-base);
}
body input[type="text"]:focus,
body input[type="email"]:focus,
body input[type="search"]:focus,
body input[type="tel"]:focus,
body input[type="number"]:not(.qty):focus,
body input[type="password"]:focus,
body input[type="url"]:focus,
body textarea:focus,
body select:focus,
body .wc-block-components-text-input input:focus,
body .frm-fluent-form input:not([type="checkbox"]):not([type="radio"]):focus,
body .frm-fluent-form textarea:focus,
body .frm-fluent-form select:focus,
body .fluentform input:not([type="checkbox"]):not([type="radio"]):focus,
body .fluentform textarea:focus,
body .fluentform select:focus,
body .search-field:focus,
body #respond input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus {
    border-color: var(--fk-terracotta) !important;
    outline: none;
    box-shadow: 0 0 0 3px var(--fk-terracotta-soft);
}

/* Klassische Checkboxen/Radios (klassische Woo-Forms, Kommentare,
   Fluent Forms …): native Zeichnung bleibt, nur die Akzentfarbe wird
   fir — kollateralschadenfrei. Block-Checkout-Checkboxen bekommen in
   M5-B eine eigene, kräftigere Optik; FiboFilters setzt accent-color
   bereits selbst (identisch fir). */
body input[type="checkbox"],
body input[type="radio"] {
    accent-color: var(--fk-fir);
}

/* ---- 2. SALE BADGE — "Angebot!" flash on-sale marker, unified across
   the classic shop loop, single product page, and WooCommerce blocks
   grid. Matches base.css .fk-sale/.onsale (pill, uppercase, tracked,
   sale-badge rose fill). !important needed: WooCommerce ships its own
   .onsale absolute-position/background rule with matching specificity
   that otherwise wins by source order. ---- */
body.woocommerce span.onsale,
body .wc-block-grid__product-onsale {
    background: var(--sale-badge) !important;
    color: var(--fk-fir) !important;
    font-family: var(--font-sans);
    font-size: 11px !important;
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-chip) !important;
    text-transform: uppercase !important;
    border-radius: var(--radius-pill) !important;
    padding: 5px 12px !important;
    line-height: 1;
}

/* ---- 3. STOCK STATUS — "X vorrätig / Auf Lager" text uses the shared
   in-stock green; the green dot (if present via ::before in the child
   theme's existing markup/CSS) inherits the same color so text and dot
   stay visually consistent. ---- */
body .stock.in-stock,
body .wc-block-components-product-stock {
    color: var(--in-stock);
}
body .stock.in-stock::before {
    background-color: var(--in-stock);
}

/* ---- 4. CHIPS / TAGS — product category & tag links in the product
   meta read as small pill tags, so we give them the .text-chips
   treatment. Scoped tightly to .product_meta / .tag-links so we do NOT
   pill ordinary inline prose links elsewhere on the site. ---- */
body.woocommerce .product_meta .posted_in a,
body.woocommerce .product_meta .tagged_as a,
body .tag-links a {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-chip);
    text-transform: uppercase;
    color: var(--fk-terracotta);
    background: var(--fk-cream-deep);
    border-radius: var(--radius-pill);
    padding: 5px 14px;
}

/* ===== Phase 3 — M3/M5: Shop-Grid / Produktkarten =====
   Der Woo-Loop rendert seit dem Template-Override
   woocommerce/content-product.php die Design-ProductCard
   (.fk-product-card, gemeinsamer Renderer inc/product-card.php) in
   jeder li.product-Zelle. Die alten Loop-Karten-Regeln (Karte auf
   li.product, .woocommerce-loop-product__title, Loop-Preis, Loop-gzd,
   Loop-Button-Rhythmus) stylten Markup, das es nicht mehr gibt — sie
   wurden entfernt. li.product ist jetzt eine transparente Grid-Zelle. */

/* ---- 1. GRID — Woo core + GP-Premium layouten ul.products mit Floats
   und columns-N-Breiten (geladen NACH diesem Stylesheet), daher
   !important auf den entscheidenden Layout-Properties. Gilt für Shop,
   Kategorie-/Tag-Archive, Related Products und Cross-Sells (alle
   columns-3/columns-4-Varianten — die Breiten-/Float-Regeln der
   columns-Klassen werden über li.product neutralisiert). */
body.woocommerce ul.products {
    display: grid !important;
    /* minmax(0,1fr) statt 1fr: 1fr = minmax(auto,1fr) — die min-content-
       Breite der Karten (nowrap-Button, lange Produktwörter) drückt sonst
       einzelne Spalten breiter, sobald der Platz eng wird (asymmetrisches
       Grid ~<1360px mit Sidebar). */
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(24px, 3vw, 40px) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}
/* Woo-Clearfix ::before/::after würde im Grid leere Zellen belegen. */
body.woocommerce ul.products::before,
body.woocommerce ul.products::after {
    content: none !important;
    display: none !important;
}
/* Zelle: transparent, keine eigene Karten-Optik (die Karte ist
   .fk-product-card im Innern), Floats/Breiten der columns-Klassen weg. */
body.woocommerce ul.products li.product {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    float: none !important;
    text-align: left;
}
/* Gleiche Kartenhöhen: Karte füllt die Grid-Zelle; Button klebt via
   margin-top:auto (Karte ist flex column) am unteren Rand. */
body.woocommerce ul.products li.product .fk-product-card {
    height: 100%;
}
/* Shop-Seite hat eine Sidebar — Content-Spalte ist schmaler, daher
   schon unterhalb 1100px auf 2 Spalten, unterhalb 782px einspaltig. */
@media (max-width: 1100px) {
    body.woocommerce ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 781px) {
    body.woocommerce ul.products {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* ---- 2. ERGEBNIS-/SORTIER-ZEILE — dezent: Count sans/13px/muted,
   Ordering-Select als Pill mit border-soft. */
body.woocommerce .woocommerce-result-count {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 var(--space-24);
}
.woocommerce-ordering {
    margin: 0 0 var(--space-24);
}
.woocommerce-ordering select {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--fk-fir);
    background-color: #fff;
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-pill);
    padding: 10px 16px;
    cursor: pointer;
}
.woocommerce-ordering select:focus {
    border-color: var(--fk-terracotta);
    outline: none;
}

/* ---- 3. PAGINATION — Zahlen als runde Pills: aktiv Fir-gefüllt,
   Hover sage-soft. Woo core zieht Border/Hintergrund auf ul/li —
   neutralisieren und die Optik auf die Links/Spans legen. */
body.woocommerce nav.woocommerce-pagination {
    margin-top: var(--space-32);
}
body.woocommerce nav.woocommerce-pagination ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    border: none;
    margin: 0;
    padding: 0;
}
body.woocommerce nav.woocommerce-pagination ul li {
    border: none;
    float: none;
    margin: 0;
    padding: 0;
    overflow: visible;
}
body.woocommerce nav.woocommerce-pagination ul li a,
body.woocommerce nav.woocommerce-pagination ul li span {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: var(--fw-semibold);
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--border-soft);
    background: #fff;
    color: var(--fk-fir);
    text-decoration: none;
    transition: var(--transition-base);
}
body.woocommerce nav.woocommerce-pagination ul li a:hover {
    background: var(--fk-sage-soft);
    border-color: var(--fk-sage-soft);
    color: var(--fk-fir);
}
body.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--fk-fir);
    border-color: var(--fk-fir);
    color: var(--text-on-accent);
}

/* ---- 4. STAR RATING — filled stars in brand peach (v3-Palette: Peach
   = Sterne/kleine warme Signale), empty stars a quiet neutral.
   WooCommerce's star-rating glyphs are unstyled ::before content with
   no explicit color of their own (they'd otherwise inherit plain body
   text color), so a plain color rule is enough — no !important needed
   since nothing else targets the color of these ::before elements
   directly. Scope-loser Zusatz-Selektor, weil die Home-Seite kein
   body.woocommerce traegt und die Sterne dort sonst Body-Textfarbe
   erben. */
body.woocommerce .star-rating span::before,
.woocommerce .star-rating span::before,
.star-rating span::before {
    /* !important: GPs Dynamic-Inline-CSS setzt .woocommerce .star-rating
       span::before{color:var(--main)} (0,2,1) und gewinnt sonst — der
       [products]-Shortcode wrappt auch auf der Home in div.woocommerce. */
    color: var(--fk-peach) !important;
}
body.woocommerce .star-rating::before,
.woocommerce .star-rating::before,
.star-rating::before {
    color: var(--border-soft) !important;
}

/* ===== Phase 3 — M4: Produkt-Einzelseite ===== */

/* ---- 1. PRODUCT TITLE — display serif, generous rhythm. M1 already
   sets font-family/color via the global "h1,h2,h3,h4,.entry-title"
   rule and the migrated "h1.product_title.entry-title{margin-bottom:
   30px}" rule already gives bottom space; here we add the missing
   italic/size/tracking to match the H1 recipe in base.css (serif,
   italic, wide tracking) and refine the margin to the token scale.
   Scoped to .single-product so we never touch other h1s (blog, pages),
   and compounded enough to out-specify GeneratePress's own
   ".entry-title{font-size:2.2em}" without !important. */
.single-product .product_title.entry-title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-h1);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-display);
    line-height: var(--lh-heading);
    color: var(--text-heading);
    margin: 0 0 var(--space-24);
}

/* ---- 2. PRICE — prominent, Karla, clear hierarchy. GeneratePress's
   typography module frequently ships per-element font-size/weight as
   inline <style> in <head> (confirmed pattern from M1's button lesson),
   so the decisive paint properties get !important here too; layout
   (display/margin structure) is left alone. Sale "ins" coral (Design
   PriceTag), "del" muted/struck — same recipe as M3's shop-grid price,
   just larger for the single-product context. */
.single-product .product .price,
.single-product .product .price .woocommerce-Price-amount {
    font-family: var(--font-sans) !important;
}
.single-product .product .price {
    font-size: var(--fs-large) !important;
    margin: 0 0 var(--space-16);
}
.single-product .product .price .woocommerce-Price-amount {
    color: var(--text-heading) !important;
    font-weight: var(--fw-semibold) !important;
}
/* Sale-Preis (ins) coral (Design PriceTag), del bleibt muted. */
.single-product .product .price ins .woocommerce-Price-amount {
    color: var(--fk-coral) !important;
    font-weight: var(--fw-semibold) !important;
}
.single-product .product .price del .woocommerce-Price-amount {
    color: var(--text-muted) !important;
    font-weight: var(--fw-regular) !important;
}
.single-product .product .price del {
    text-decoration: line-through;
    opacity: 1;
}
.single-product .product .price ins {
    text-decoration: none;
}

/* ---- 3. FEATURE / ICON LIST — the small USP row in the summary
   (Außendurchmesser / Tiefe / Handgefertigte Unikate / Sichere
   Verpackung / Schneller Versand), built from GenerateBlocks
   ".gb-headline.small-icon" rows per-instance (hash class differs per
   product/block, so we key on the stable utility classes documented in
   the element inventory, never the hash). Scoped to
   ".single-product .summary" only, so the homepage USP band (same
   ".small-icon" utility) is untouched. Icons use "color: currentColor"
   internally, so setting color on ".gb-icon" recolors the SVG glyph
   without touching unrelated icons elsewhere on the page. */
.single-product .summary .gb-headline.small-icon {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin: 0 0 var(--space-8);
}
.single-product .summary .gb-headline.small-icon .gb-headline-text {
    font-family: var(--font-sans);
    font-size: var(--fs-normal);
    color: var(--text-body);
}
.single-product .summary .gb-headline.small-icon .gb-icon,
.single-product .summary .gb-headline.small-icon .gb-icon svg {
    color: var(--fk-terracotta);
}

/* ---- 4. "VERWENDETE BLUMEN" — eyebrow label + brand chip buttons +
   modal card. The chip buttons and the modal close button are real
   <button> elements; both are excluded by name from M1's unified
   secondary-button rule (body button:not(…):not(.fk-blume-btn)
   :not(.fk-modal-close)), so plain declarations here apply without
   !important. Chip size/typography mirrors .fk-home-chip (design "Tag"),
   colors follow the secondary scheme (sage-soft fill, fir text, sage
   border). */
.fk-bestandteile > strong {
    display: block;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: var(--fw-semibold);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--fk-coral);
    margin: 0 0 var(--space-8);
}
.fk-blumen-liste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Prefix-Selektor noetig: GPs Inline-Regel button:not(.menu-toggle){font-size:.8em}
   (0,1,1) schlaegt sonst die blanke Klasse (0,1,0). */
.fk-bestandteile .fk-blume-btn,
.fk-blume-btn {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-chip);
    text-transform: uppercase;
    line-height: 1;
    color: var(--fk-fir);
    background: var(--fk-sage-soft);
    border: 1px solid var(--fk-sage);
    border-radius: var(--radius-pill);
    padding: 5px 14px;
    cursor: pointer;
    box-shadow: none;
    transition: var(--transition-base);
}
.fk-blume-btn:hover {
    background: var(--fk-sage);
    border-color: var(--fk-sage);
    color: var(--fk-fir);
}

/* Modal — centered card over a blurred cream backdrop (same treatment
   as the GP search modal). The legacy CodeKit snippet (25) that used to
   ship the overlay mechanics no longer loads on Kranz, so this block now
   owns the FULL mechanics (display:none default, fixed overlay,
   backdrop layering, centering) plus the visual surface. The JS
   (assets/js/produkt-blumen-modal.js) only toggles
   modal.style.display block/none on .fk-modal — untouched; the fade-in
   is pure CSS via animation, which restarts on each display:none →
   display:block toggle. */
.fk-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
}
.fk-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(246, 242, 233, 0.75);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: fkFadeIn 200ms var(--ease-soft);
}
.fk-modal-inner {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
    padding: clamp(24px, 4vw, 36px);
    animation: fkFadeIn 200ms var(--ease-soft);
}
@keyframes fkFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.fk-modal-image {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-md);
    background-size: cover;
    background-position: center;
    margin-bottom: 18px;
}
.fk-modal-content #fkModalTitle {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 24px;
    color: var(--fk-fir);
    margin: 0 0 var(--space-8);
}
.fk-modal-content #fkModalExcerpt {
    font-family: var(--font-sans);
    font-weight: var(--fw-light);
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-body);
    max-height: 40vh;
    overflow: auto;
    margin: 0 0 var(--space-8);
}
/* Der "Weiterlesen"-Link trägt die Klasse gbp-button--secondary — die
   ID im Selektor überstimmt deren Pill-Optik; hier Text-CTA in coral
   mit "›" (Optik von .fk-link-cta). */
.fk-modal-content #fkModalLink {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    color: var(--fk-coral);
    background: none;
    border: none;
    padding: 0;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: none;
    box-shadow: none;
    transition: var(--transition-base);
}
.fk-modal-content #fkModalLink::after {
    content: "\203A";
    font-size: 1.15em;
    line-height: 1;
}
.fk-modal-content #fkModalLink:hover {
    color: var(--fk-coral-deep);
    background: none;
    transform: none;
}
.fk-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--fk-fir);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    transition: var(--transition-base);
}
.fk-modal-close:hover {
    background: var(--fk-cream-deep);
    color: var(--fk-coral);
    transform: none;
}

/* ---- 4b. MENGENWÄHLER + WARENKORB-ZEILE (Design ProductScreen.jsx):
   Pill-Container mit 1.5px fir Border, innen "− | Zahl | +". Die
   Plus/Minus-Stepper werden von GP Premium per JS als <a class="minus">/
   <a class="plus"> injiziert (do-quantity-buttons); das Markup aus dem
   Server-HTML enthält nur input.qty. Die globalen Button-/Formular-
   Regeln schließen .plus/.minus/.qty bereits aus. ---- */
.single-product form.cart {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.single-product form.cart .quantity {
    display: inline-flex;
    align-items: center;
    margin: 0;
    border: 1.5px solid var(--fk-fir);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.single-product form.cart .quantity .minus,
.single-product form.cart .quantity .plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--fk-fir);
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-soft);
}
.single-product form.cart .quantity .minus:hover,
.single-product form.cart .quantity .plus:hover {
    color: var(--fk-coral);
}
.single-product form.cart .quantity input.qty {
    width: 40px;
    height: 44px;
    padding: 0;
    text-align: center;
    background: transparent;
    border: none;
    border-radius: 0;
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    color: var(--fk-fir);
    -moz-appearance: textfield;
    appearance: textfield;
}
.single-product form.cart .quantity input.qty::-webkit-inner-spin-button,
.single-product form.cart .quantity input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.single-product form.cart .single_add_to_cart_button {
    flex: 1 1 auto;
    min-width: 220px;
}
/* Einzelstücke (sold individually via inc/single-stock.php): Woo rendert
   die Menge als input[type=hidden] im weiterhin vorhandenen div.quantity —
   die leere Pill (Border) würde als 2×2px-Punkt neben dem Button stehen.
   Wrapper ohne sichtbares Qty-Input komplett ausblenden; der Button füllt
   die Zeile dann allein (flex: 1 1 auto s. o.). */
.single-product form.cart .quantity:not(:has(input.qty:not([type="hidden"]))) {
    display: none;
}

/* ---- 5. TABS — "Beschreibung" (and the Germanized "Produktsicherheit"
   tab, when present) get brand-consistent, functional styling: active
   tab reads in terracotta with a bottom accent, inactive tabs muted;
   panel content typography follows the body/heading tokens. Woo core
   sets tab-link colors/borders directly on "ul.tabs li a" (matching
   specificity to ours), so the compound ".single-product .woocommerce-
   tabs" prefix out-specifies it without !important. */
.single-product .woocommerce-tabs ul.tabs li a {
    font-family: var(--font-sans);
    font-size: var(--fs-normal);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
}
.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--fk-coral);
}
.single-product .woocommerce-tabs ul.tabs li.active a {
    border-bottom: 2px solid var(--fk-coral);
}
.single-product .woocommerce-tabs ul.tabs li.active {
    border-bottom-color: var(--fk-coral);
}
.single-product .woocommerce-tabs .wc-tab {
    font-family: var(--font-sans);
    font-size: var(--fs-normal);
    color: var(--text-body);
    line-height: 1.8;
}
.single-product .woocommerce-tabs .wc-tab h1,
.single-product .woocommerce-tabs .wc-tab h2,
.single-product .woocommerce-tabs .wc-tab h3,
.single-product .woocommerce-tabs .wc-tab h4 {
    font-family: var(--font-display);
    color: var(--text-heading);
}
/* Tabs auf Mobile: als EINE horizontale, scrollbare Zeile statt gestapelt.
   Woo/GP setzt die Liste dort auf Spalten-/Blockstapelung -> hier zur Reihe
   zwingen (flex row, nowrap) und bei Überbreite horizontal scrollen. */
@media (max-width: 768px) {
  .single-product .woocommerce-tabs ul.tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox: Scrollleiste verstecken */
    margin: 0 0 20px;
    padding: 0 0 2px;
  }
  .single-product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
    display: none; /* WebKit: Scrollleiste verstecken */
  }
  .single-product .woocommerce-tabs ul.tabs li {
    display: block;
    flex: 0 0 auto; /* nicht schrumpfen, nebeneinander bleiben */
    width: auto;
    margin: 0;
    white-space: nowrap;
  }
  .single-product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 8px 4px;
  }
}

/* ---- 6. TAX/SHIPPING NOTICE — Germanized's per-product legal block on
   the single-product page (different wrapper/context from the M3
   shop-grid rule, which is scoped to "ul.products li.product" and does
   not match here). Same low-specificity ".wc-gzd-additional-info" as
   M3, so no !important needed; "Versandkosten" already inherits
   terracotta from the sitewide "body a" rule (M1). */
.single-product .wc-gzd-additional-info,
.single-product .legal-price-info {
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    color: var(--text-muted);
    line-height: var(--lh-snug);
    margin: var(--space-8) 0;
}

/* ---- 7. RELATED PRODUCTS — inherits M3's shop-grid card/title/price
   styling automatically (same ".woocommerce ul.products li.product"
   selectors); only the section heading needs the display-serif
   treatment, since "section.related h2" isn't covered by those rules.
   Design: kleiner Eyebrow "Vielleicht auch schön" (Karla, uppercase,
   coral) über einem Cormorant-Italic-Titel ("Ähnliche Kränze", per
   Filter gesetzt). Der Eyebrow kommt per ::before, damit kein Markup
   in Woo-Templates nötig ist. */
.related.products > h2,
.up-sells.products > h2 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: var(--fw-regular);
    color: var(--text-heading);
    letter-spacing: var(--ls-display);
}
.related.products > h2::before,
.up-sells.products > h2::before {
    content: 'Vielleicht auch schön';
    display: block;
    font-family: var(--font-sans);
    font-style: normal;
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-chip);
    text-transform: uppercase;
    color: var(--fk-coral);
    margin: 0 0 var(--space-8);
}

/* ---- 8. GALERIE — Design-Abweichung: Thumbnails QUADRATISCH statt rund
   (die runde border-radius:50% stammt aus der Legacy-CodeKit-Datei
   custom_codes/25-scss-output.css, Selektor "ol.flex-control-thumbs li
   img"; wir überschreiben sie mit höherer Spezifität + !important, da
   die Legacy-Datei nach unserem Theme geladen wird und abgebaut wird).
   Aktiver/gehoverter Thumb bekommt einen 2px-Terracotta-Rahmen. */
.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
    border-radius: var(--radius-sm) !important;
    border: 2px solid transparent;
    box-sizing: border-box;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.single-product .woocommerce-product-gallery .flex-control-thumbs li img:hover {
    border-color: var(--fk-terracotta);
    opacity: 1;
}

/* Hauptbild: weiche Ecken + Schatten. Der Schatten sitzt auf dem
   Bild-Wrapper (nicht auf dem <img>), weil (a) Woo-Core mit höherer
   Spezifität "div.images img{box-shadow:none}" setzt und (b) der Wrapper
   overflow:hidden hat, was einen Schatten am <img> abschneiden würde —
   der Eigen-Schatten des Wrappers wird davon nicht geclippt.
   Aspect-ratio 1/1 mit object-fit cover ist unbedenklich, da die
   Produktfotos bereits quadratisch (600x600) vorliegen — kein Beschnitt. */
.single-product .woocommerce-product-gallery__image {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.single-product .woocommerce-product-gallery__image img {
    border-radius: var(--radius-lg);
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* ---- 9. KATEGORIE-CHIP über dem Titel (fk_product_category_chip,
   Prio 4). Nutzt die bestehende .fk-home-chip-Optik; hier nur als
   eigener Block mit Abstand zum Titel positioniert. */
.single-product .summary .fk-product-cat-chip {
    align-self: flex-start;
    margin: 0 0 var(--space-8);
    text-decoration: none;
}

/* ===== Phase 3 — M5: Warenkorb / Kasse ===== */

/* ---- 1. CART TABLE — brand table container: hairline border, radius,
   header row in cream-deep with fir ink, Karla body, comfortable cell
   padding. WooCommerce ships "table.shop_table" with its own border/
   padding at matching specificity, so we out-specificity it with a
   "body.woocommerce table.cart" prefix instead of !important; the
   border-collapse/box-shadow additions here are purely additive. ---- */
body.woocommerce table.cart,
body.woocommerce table.shop_table {
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    font-family: var(--font-sans);
    font-size: var(--fs-normal);
    color: var(--text-body);
}
body.woocommerce table.cart th,
body.woocommerce table.shop_table th {
    background: var(--fk-cream-deep);
    color: var(--fk-fir);
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-chip);
    font-size: var(--fs-small);
    padding: var(--space-16) var(--space-16);
    border-bottom: 1px solid var(--border-hairline);
}
body.woocommerce table.cart td,
body.woocommerce table.shop_table td {
    padding: var(--space-16);
    border-bottom: 1px solid var(--border-hairline);
    vertical-align: middle;
}
body.woocommerce table.cart .product-name a,
body.woocommerce table.shop_table .product-name a {
    font-family: var(--font-display);
    color: var(--text-heading);
    font-size: var(--fs-medium);
}

/* ---- 2. CART TOTALS — card look: warm card surface, radius, soft
   shadow, comfortable padding. The final "Gesamtsumme" row reads
   prominent (heading-ink, medium size). Woo sets ".cart_totals" width/
   float only (no background), so a plain rule is enough here; the
   ".order-total .woocommerce-Price-amount" selector needs "body …"
   prefix to out-specify Woo's own ".order-total td{font-weight:700}"
   which would otherwise leave the ink color untouched but is safe to
   layer under since we don't touch font-weight. ---- */
body .cart_totals,
body.woocommerce-cart .cart-collaterals .cart_totals {
    background: var(--surface-card-warm);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-24);
}
body .cart_totals h2 {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--text-heading);
    letter-spacing: var(--ls-display);
}
body .cart_totals table.shop_table,
body .cart_totals table.shop_table th,
body .cart_totals table.shop_table td {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
body .cart_totals table.shop_table th,
body .cart_totals table.shop_table td {
    font-family: var(--font-sans);
    padding: var(--space-12) 0;
    border-bottom: 1px solid var(--border-hairline);
}
body .cart_totals .order-total th,
body .cart_totals .order-total td {
    border-bottom: none;
    font-size: var(--fs-medium);
    color: var(--text-heading);
}
body .cart_totals .order-total .woocommerce-Price-amount {
    color: var(--text-heading);
    font-weight: var(--fw-semibold);
}

/* ---- 3. COUPON ROW — input inherits M2's unified text-field look
   already (".coupon .input-text" matches "body input[type=\"text\"]");
   the apply-coupon button inherits M1's secondary pill already
   (".woocommerce button.button" matches). Only spacing/alignment is
   added here so the field and button sit on one comfortable row. ---- */
body.woocommerce .cart .coupon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-12);
}
body.woocommerce .cart .coupon .input-text {
    width: auto;
    max-width: 220px;
}

/* ---- 4. CHECKOUT FORM SECTIONS — section headings serif/heading-ink,
   labels Karla small/body, ".form-row" spacing via tokens. Inputs
   inherit M2's unified treatment (WooCommerce checkout fields render
   plain "input[type=text]" etc., already matched there); verified this
   context doesn't need extra overrides beyond spacing. ---- */
body.woocommerce-checkout h3,
body #customer_details h3,
body.woocommerce-billing-fields h3,
body.woocommerce-shipping-fields h3,
body.woocommerce-additional-fields h3 {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--text-heading);
    letter-spacing: var(--ls-display);
    margin-bottom: var(--space-16);
}
body.woocommerce-checkout .form-row label,
body.woocommerce-billing-fields label,
body.woocommerce-shipping-fields label {
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    color: var(--text-body);
    font-weight: var(--fw-semibold);
}
body.woocommerce-checkout .form-row {
    margin: 0 0 var(--space-16);
}

/* ---- 5. ORDER REVIEW — same table/totals treatment as the cart
   (M5.1/M5.2 selectors already cover ".woocommerce-checkout-review-
   order-table" via the shared "table.shop_table" selector and
   "#order_review" isn't a ".cart_totals" so it gets its own card rule
   here). The place-order button is the primary buy CTA: it's a plain
   "button.button" so M1's SECONDARY rule currently wins it by source
   order (both blocks match, secondary is declared later) — add it to
   the PRIMARY set explicitly so it reads as the terracotta pill. ---- */
body #order_review {
    background: var(--surface-card-warm);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-24);
}
body #order_review h3 {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--text-heading);
    letter-spacing: var(--ls-display);
}
body #place_order,
body.woocommerce #place_order {
    background: var(--fk-buy) !important;
    color: var(--text-on-accent) !important;
    border: 1.5px solid var(--fk-buy) !important;
    border-color: var(--fk-buy) !important;
    border-radius: var(--radius-pill) !important;
    text-transform: uppercase !important;
    padding: 14px 30px !important;
    letter-spacing: var(--ls-button) !important;
    box-shadow: 0 8px 20px var(--fk-buy-glow);
}
body #place_order:hover,
body.woocommerce #place_order:hover {
    background: var(--fk-buy-deep) !important;
    border-color: var(--fk-buy-deep) !important;
    color: var(--text-on-accent) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px var(--fk-buy-glow);
}

/* ---- 6. PAYMENT METHODS — cream-soft boxes, radius, subtle hairline
   border around the payment-method list and the expanded payment_box
   detail (PayPal/Germanized rows keep their own icons/markup intact;
   only surface/spacing changes). ---- */
body ul.wc_payment_methods {
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    background: var(--surface-card-warm);
    padding: var(--space-8) var(--space-16);
}
body ul.wc_payment_methods li.wc_payment_method {
    padding: var(--space-12) 0;
    border-bottom: 1px solid var(--border-hairline);
}
body ul.wc_payment_methods li.wc_payment_method:last-child {
    border-bottom: none;
}
body ul.wc_payment_methods label {
    font-family: var(--font-sans);
    font-size: var(--fs-normal);
    color: var(--text-body);
}
body.woocommerce .payment_box {
    background: var(--fk-cream-deep);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    color: var(--text-body);
    padding: var(--space-16);
    margin: var(--space-8) 0 var(--space-16);
}
body.woocommerce .payment_box::before {
    border-bottom-color: var(--fk-cream-deep);
}

/* ---- 7. NOTICES — brand callout treatment for Woo's message/info/
   error banners, mirroring blog.css's ".gw-callout" left-border-accent
   intent. WooCommerce sets background/border directly on these classes
   at matching specificity, so "body.woocommerce…" out-specifies it
   without needing !important. Info = terracotta/cream-soft; error =
   sale-badge/rose wash; success message = sage. ---- */
body.woocommerce-message,
body.woocommerce-info,
body.woocommerce-error,
body.woocommerce-noreviews,
body p.no-comments {
    font-family: var(--font-sans);
    font-size: var(--fs-normal);
    color: var(--text-body);
    border-top: none;
    border-radius: var(--radius-sm);
    padding: var(--space-16) var(--space-20);
    box-shadow: none;
}
body.woocommerce-message {
    background: var(--fk-cream-soft);
    border-left: 3px solid var(--fk-sage);
}
body.woocommerce-info {
    background: var(--fk-cream-soft);
    border-left: 3px solid var(--fk-terracotta);
}
body.woocommerce-error {
    background: var(--fk-rose-soft);
    border-left: 3px solid var(--sale-badge);
}
body.woocommerce-message::before,
body.woocommerce-info::before,
body.woocommerce-error::before {
    color: var(--fk-fir);
}

/* ===== Phase 3 — M6: Header/Footer + Block-CTA ===== */

/* ---- 1. BLOCK CART/CHECKOUT PRIMARY CTA — the block checkout
   "Bestellung aufgeben" button (.wc-block-components-checkout-place-
   order-button, a native <button>) and the block cart "Zur Kasse"
   button (.wc-block-cart__submit-button / …contained, an <a>) are both
   already matched by M1's PRIMARY selector list via the generic
   ".wc-block-components-button" class — but the checkout button (a
   real <button>) is ALSO matched by M1's SECONDARY generic-button rule
   "body button:not(.menu-toggle):not(.plus):not(.minus)", which has
   specificity (0,3,2) — higher than a plain "body .foo.bar" selector
   (0,2,1) — and wins outright regardless of source order, so it
   rendered as the fir outline instead of the terracotta fill.
   UPDATE (M5-B): M1 SECONDARYs generischer button-Selektor ist durch
   weitere :not()-Klassen inzwischen deutlich spezifischer als die
   (0,4,1) der wiederholten Klassen hier — deshalb ist der Place-Order-
   Button jetzt in M1 explizit per :not(.wc-block-components-checkout-
   place-order-button) ausgenommen; diese Regel liefert nur noch den
   Primary-Look und muss lediglich Woo/GP-Basisstyles schlagen. ---- */
body .wc-block-components-checkout-place-order-button.wc-block-components-checkout-place-order-button.wc-block-components-button.wc-block-components-button,
body .wc-block-cart__submit-button.wc-block-cart__submit-button.wc-block-components-button.wc-block-components-button,
body .wc-block-components-button.contained.wc-block-components-button.contained {
    background: var(--fk-buy) !important;
    color: var(--text-on-accent) !important;
    border: 1.5px solid var(--fk-buy) !important;
    border-color: var(--fk-buy) !important;
    border-radius: var(--radius-pill) !important;
    text-transform: uppercase !important;
    padding: 14px 30px !important;
    letter-spacing: var(--ls-button) !important;
    box-shadow: 0 8px 20px var(--fk-buy-glow);
}
body .wc-block-components-checkout-place-order-button.wc-block-components-checkout-place-order-button.wc-block-components-button.wc-block-components-button:hover,
body .wc-block-cart__submit-button.wc-block-cart__submit-button.wc-block-components-button.wc-block-components-button:hover,
body .wc-block-components-button.contained.wc-block-components-button.contained:hover {
    background: var(--fk-buy-deep) !important;
    border-color: var(--fk-buy-deep) !important;
    color: var(--text-on-accent) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px var(--fk-buy-glow);
}

/* ===== Phase 3 — M5-B: Warenkorb/Kasse (WooCommerce Blocks, UX-Fixes) =====
 * Cart (Seite 30) & Checkout (Seite 31) sind BLOCK-basiert (wp:woocommerce/
 * cart bzw. /checkout) und rendern clientseitig mit wc-block-components-*-
 * Klassen — die klassischen M5-Selektoren oben greifen dort nicht.
 * Hinweis Kaskade: M1s generischer SECONDARY-Button-Selektor ist auf
 * (0,10,2) angewachsen; die Block-CTAs (.wc-block-components-checkout-
 * place-order-button), die Qty-Stepper-Buttons und der Remove-Icon-Button
 * sind deshalb oben in M1 per :not() ausgenommen statt hier per
 * Spezifitäts-Wettrüsten überstimmt. Alle Klassen am Live-DOM verifiziert. */

/* ---- 1. CONTAINER — GP rendert die Seiten "one-container" ohne eigenes
   Content-Maß; .site-content hat 50px Padding, aber .alignwide bricht mit
   negativen Margins (margin: 0 -50px; max-width: calc(100% + 100px))
   wieder bis an den Viewport-Rand aus. Constraint direkt auf dem Block-
   Wrapper: container-wide (1180px), zentriert, fluides Innen-Padding.
   !important gegen GPs alignwide-Regel gleicher Zielrichtung. Der
   entry-title ("Warenkorb"/"Kasse") bekommt dasselbe Maß, damit Titel
   und Inhalt fluchten (body-Klassen woocommerce-cart/-checkout). ---- */
body .wp-block-woocommerce-cart.alignwide,
body .wp-block-woocommerce-checkout {
    max-width: var(--container-wide) !important;
    margin-inline: auto !important;
    padding-inline: clamp(24px, 5vw, 64px);
    box-sizing: border-box;
}
body.woocommerce-cart .site-main .entry-header,
body.woocommerce-checkout .site-main .entry-header {
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: clamp(24px, 5vw, 64px);
    padding-top: clamp(28px, 4vw, 56px); /* Luft zum Header — Titel klebte am Menü */
    margin-bottom: 28px;
    box-sizing: border-box;
}
body.woocommerce-cart .site-main .entry-header .entry-title,
body.woocommerce-checkout .site-main .entry-header .entry-title {
    margin-bottom: 0;
}

/* ---- 2. HEADINGS — die Checkout-Step-Titel (H2 .wc-block-components-
   checkout-step__title: "Kontaktinformationen", "Lieferadresse", …)
   erben Serif-italic + --ls-display (3px) und lasen sich übertrackt
   ("K o n t a k t…"). Tracking auf 0.5px, ~21px, fir; italic bleibt.
   Ebenso die Produkt-Titel in Cart-Zeilen und Checkout-Bestellübersicht
   (.wc-block-components-product-name, in der Summary ein H3): der
   Serif-Look ging in der Tabelle unter — jetzt sans (Karla) semibold,
   fir, ohne Tracking; Cart 15px, Summary 14px; Hover coral. ---- */
body .wc-block-components-title.wc-block-components-checkout-step__title {
    font-size: 21px !important;
    letter-spacing: 0.5px !important;
    color: var(--fk-fir);
    font-weight: var(--fw-semibold);
}
body .wc-block-cart-items .wc-block-components-product-name,
body .wc-block-components-order-summary-item__description .wc-block-components-product-name {
    font-family: var(--font-sans);
    font-style: normal;
    /* !important: Woo cart.css setzt via table.wc-block-cart-items…-Kette
       (hoehere Spezifitaet) preset-small (13px) + fw 500. */
    font-weight: var(--fw-semibold) !important;
    font-size: 15px !important;
    letter-spacing: 0 !important;
    color: var(--fk-fir);
    text-decoration: none;
    margin: 0;
}
body .wc-block-components-order-summary-item__description .wc-block-components-product-name {
    font-size: 14px !important;
}
body .wc-block-cart-items a.wc-block-components-product-name:hover,
body .wc-block-cart-items a.wc-block-components-product-name:focus {
    color: var(--fk-coral);
}

/* ---- 3. SUMMARY ALS WEISSE KARTE — Checkout-Sidebar und Cart-Summe.
   Die Karte liegt auf dem inneren Order-Summary-Block, NICHT auf der
   .wc-block-components-sidebar selbst: deren padding-left (~32px) ist
   der Spalten-Gutter des Sidebar-Layouts und darf nicht zum Karten-
   Padding werden. Germanized dupliziert im Checkout einen zweiten
   Order-Summary-Block ("Gesamtsumme" in .wc-gzd-checkout-submit) — der
   wird bewusst mitgecardet. Innere Grauflächen (.wc-block-components-
   order-summary rendert #eee) auf transparent. ---- */
body .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block,
body .wc-gzd-checkout-submit .wp-block-woocommerce-checkout-order-summary-block,
body .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: clamp(20px, 3vw, 28px);
}
body .wc-block-components-order-summary.wc-block-components-order-summary,
body .wc-block-components-totals-wrapper.wc-block-components-totals-wrapper {
    background: transparent !important;
}

/* ---- 4. PRODUKT-KURZBESCHREIBUNGEN AUS — die Excerpts in Cart-Zeilen
   und Checkout-Summary (.wc-block-components-product-metadata__
   description) sind Rauschen. Die Germanized-"Lieferzeit"-Zeile lebt
   separat in .wc-block-components-product-details und BLEIBT (12px,
   muted); nur ihr rohes Feldnamen-Label ("gzd-delivery_time:",
   .wc-block-components-product-details__name) wird versteckt — der
   Wert enthält "Lieferzeit:" bereits selbst. ---- */
body .wc-block-components-product-metadata__description {
    display: none !important;
}
body .wc-block-components-product-details__gzd-delivery-time .wc-block-components-product-details__name {
    display: none;
}
body .wc-block-components-product-details.wc-block-components-product-details {
    font-size: 12px;
    color: var(--text-muted);
    margin: 4px 0 0;
}
/* Lieferzeit-Zeile grün (lieferbar-Signal) — NUR hier in Cart/Checkout;
   auf den Produktkarten bleibt die Meta neutral (anderes Markup). */
body .wc-block-components-product-details .wc-block-components-product-details__gzd-delivery-time {
    color: var(--in-stock);
    font-size: 13px;
}

/* ---- 5. QTY-STEPPER — gleiche Optik wie der Produktseiten-Mengen-
   wähler (M4): eine fir-umrandete Pill, innen transparente −/+ (hover
   coral) und zentrierte Zahl (Karla semibold, fir). Die −/+-Buttons
   sind oben in M1 aus der Secondary-Pill ausgenommen; hier bleiben
   Woos eigene Resets zu überstimmen (!important auf den entscheidenden
   Flächen/Borders; das Input matcht M2s input[type=number]-Regel mit
   !important-Hintergrund/-Border, daher gleiche Waffe + mehr Gewicht
   durch verdoppelte Klasse). ---- */
body .wc-block-components-quantity-selector.wc-block-components-quantity-selector {
    border: 1.5px solid var(--fk-fir) !important;
    border-radius: var(--radius-pill) !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden;
}
body .wc-block-components-quantity-selector.wc-block-components-quantity-selector::after {
    display: none !important;
    border: none !important;
}
body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button.wc-block-components-quantity-selector__button {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--fk-fir) !important;
    padding: 0 !important;
    min-width: 32px;
    font-size: 16px;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer;
}
body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button.wc-block-components-quantity-selector__button:hover {
    background: transparent !important;
    color: var(--fk-coral) !important;
    transform: none;
}
body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input.wc-block-components-quantity-selector__input {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 6px 0 !important;
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    color: var(--fk-fir) !important;
    text-align: center;
}

/* Remove-Icon-Button (Mülleimer-SVG neben dem Stepper) — war durch M1s
   Secondary-Regel eine leere Sage-Pille; jetzt nackter Icon-Button. */
body .wc-block-cart-item__remove-link {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: var(--text-muted) !important;
    cursor: pointer;
}
body .wc-block-cart-item__remove-link:hover {
    background: transparent !important;
    color: var(--fk-coral) !important;
    transform: none;
}

/* ---- 6. FORMFELDER / CHECKBOXEN / RADIOS — Block-Checkout nutzt
   floating labels, daher KEINE Pill und kein Padding-Eingriff, nur
   Border/Radius/Focus. Focus sage statt terracotta (M2s generische
   Focus-Regel wird per doppelter Wrapper-Klasse überstimmt). Gewählte
   Versand-/Zahlungsoption: Sage-Border + zarter Sage-Wash statt des
   harten fir-Rahmens. ---- */
body .wc-block-components-text-input.wc-block-components-text-input input,
body .wc-blocks-components-select__container .wc-blocks-components-select__select,
body .wc-block-components-textarea.wc-block-components-textarea {
    background: var(--surface-card) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 12px !important;
}
body .wc-block-components-text-input.wc-block-components-text-input input:focus,
body .wc-blocks-components-select__container .wc-blocks-components-select__select:focus,
body .wc-block-components-textarea.wc-block-components-textarea:focus {
    border-color: var(--fk-sage) !important;
    box-shadow: 0 0 0 3px rgba(151, 171, 141, 0.25) !important;
    outline: none !important;
}

/* Floating-Label-Reparatur: M2s Unified-Padding (12px 16px !important
   auf .wc-block-components-text-input input bzw. body select) überstimmte
   Woos .is-active-Padding-Shift (Ruhe 16px 12px -> aktiv 24px 9px 8px,
   ohne !important) — der Wert saß dadurch mittig UNTER dem Label statt
   darunter versetzt. Woos Label-Shrink (.is-active label{top:6px;
   transform:scale(.82)}) war nie überschrieben und bleibt unangetastet;
   hier nur die Paddings mit gleicher Waffe (!important, mehr Gewicht,
   spätere Quelle) wiederherstellen. Label-Einzug auf unser 16px-
   Horizontal-Padding ausgerichtet (Woo-Default: left 10px). */
body .wc-block-components-text-input.wc-block-components-text-input input {
    padding: 16px !important;
}
body .wc-block-components-text-input.wc-block-components-text-input.is-active input,
body .wc-block-components-text-input.wc-block-components-text-input input:-webkit-autofill {
    padding: 24px 16px 8px !important;
}
body .wc-block-components-text-input.wc-block-components-text-input label {
    left: 16px;
}
/* Country-/State-Select: Label sitzt permanent klein oben (top:6px),
   Woo-Padding 16px 9px 0 muss gegen M2s "body select" zurückgeholt
   werden; rechts Platz für den Expand-Pfeil (right:12px). */
body .wc-blocks-components-select__container .wc-blocks-components-select__select {
    padding: 16px 40px 0 16px !important;
}
body .wc-blocks-components-select .wc-blocks-components-select__label {
    left: 16px;
}

/* Checkboxen prominenter: unchecked weiße Box mit Sage-Border (1.5px)
   + zartem Schatten, checked Fir-Füllung mit hellem SVG-Häkchen
   (__mark zeichnet per fill, nicht color). [type=checkbox] nötig,
   um Woos (0,3,0)/(0,4,0)-Regeln (u.a. :checked{background:#fff})
   spezifisch zu schlagen. */
body .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    background: var(--fk-white);
    border: 1.5px solid var(--fk-sage);
    border-radius: var(--radius-xs);
    box-shadow: var(--shadow-xs);
}
body .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
    background: var(--fk-fir);
    border-color: var(--fk-fir);
}
body .wc-block-components-checkbox .wc-block-components-checkbox__mark {
    fill: var(--fk-cream);
    color: var(--fk-cream);
    width: 16px;
    height: 16px;
    margin-left: 3px;
    margin-top: 2px;
}
body .wc-block-components-radio-control__input {
    border: 1px solid var(--border-soft);
}
body .wc-block-components-radio-control__input:checked {
    border-color: var(--fk-fir);
    color: var(--fk-fir);
}
body .wc-block-components-radio-control__input:checked::before {
    background: var(--fk-fir);
}
body .wc-block-components-radio-control__option--checked-option-highlighted,
body .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
    box-shadow: inset 0 0 0 1.5px var(--fk-sage) !important;
    background: rgba(151, 171, 141, 0.14) !important;
    border-radius: var(--radius-md);
}

/* CTA voll breit: Woo rendert den Place-Order-Button bereits mit
   --full-width-Modifier; width sichert das auch für den Cart-CTA ab. */
body .wc-block-cart__submit-button.wc-block-cart__submit-button,
body .wc-block-components-checkout-place-order-button.wc-block-components-checkout-place-order-button {
    width: 100%;
}

/* ===== Phase 3 — M6 (Fortsetzung): Header/Footer ===== */

/* ---- 2. HEADER / MAIN NAVIGATION — nav links get the brand sans
   voice (Karla, small size, tracked) and terracotta on hover/active.
   The existing migrated centered-logo layout block above (M0, "Zentrierte
   Logo-Navigation") is left completely untouched — only typography/color
   here, no positioning. "body" prefix matches M1's out-specificity
   convention against GeneratePress's own ".main-navigation a{color:…}"
   dynamic-CSS rule of equal selector weight. ---- */
body .main-navigation a {
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    letter-spacing: var(--ls-button);
    color: var(--text-heading);
}
body .main-navigation a:hover,
body .main-navigation .current-menu-item > a,
body .main-navigation .current-menu-ancestor > a {
    color: var(--fk-terracotta);
}

/* ---- 3. CART COUNT BADGE — WooCommerce Blocks' own CSS wraps the
   badge paint in ":where(...)" (zero specificity) specifically so
   themes can restyle it without !important; we do exactly that. Fill
   in the buy-terracotta, cream-yellow ring for a warm "accent" edge,
   white number for legibility. ---- */
.wc-block-mini-cart__badge {
    background-color: var(--fk-buy);
    border: 2px solid var(--fk-cream-yellow);
    color: var(--fk-white);
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
}

/* ---- 4. ANNOUNCEMENT / INFO BAND — base.css reserves ".site-info,
   .fk-band" for a rose announcement band. Checked live content: the
   only candidate ("Banner oberhalb NAV", GP Elements post 3193) is
   currently in DRAFT/inactive, and GeneratePress's real ".site-info" is
   the plain footer copyright bar, not a band — so there is no live
   announcement band to restyle. Intentionally skipped per the M6 brief
   ("skip if not present"); revisit if that banner is ever published. ---- */

/* ---- 5. FOOTER — the footer content (GP Elements post "Footer", #170)
   is GenerateBlocks markup: section headings use ".gbp-card__title" (h4,
   "Wieso Farbenkranz?" / "Service"), body copy uses ".gbp-section__text",
   and the social row uses ".small-icon" gb-buttons. Section titles get
   the brand display-serif; body/links get the brand sans + terracotta
   link treatment; social icons get a consistent bordered circle instead
   of M1's oversized secondary-button pill (each gb-button instance also
   matches M1's ".gb-button" SECONDARY rule and its !important padding/
   uppercase/pill-border, which is exactly what made an icon-only link
   look like a stretched button — overridden here with equal !important
   weight, settled by this rule being later in source). ---- */
body .site-footer .gbp-card__title {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--text-heading);
    letter-spacing: var(--ls-display);
}
body .site-footer .gbp-section__text {
    font-family: var(--font-sans);
    color: var(--text-body);
}
body .site-footer a {
    color: var(--text-link);
}
body .site-footer a:hover {
    color: var(--fk-terracotta-deep);
}
body .site-footer a.small-icon,
body .site-footer .small-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--fk-terracotta) !important;
    border: 1.5px solid var(--border-soft) !important;
    border-radius: var(--radius-circle) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    transition: var(--transition-base);
}
body .site-footer a.small-icon:hover,
body .site-footer .small-icon:hover {
    background: var(--fk-terracotta) !important;
    border-color: var(--fk-terracotta) !important;
    color: var(--fk-white) !important;
    transform: translateY(-2px);
}

/* ===== Phase 3 — M7: Home =====
 * front-page.php — Stage 1 Design-Layout mit hardcodiertem Real-Content.
 * Alle Sections sind edge-to-edge (100vw-Bleed-Trick), unabhängig vom
 * GP-Grid-Container (max 1440px) und dessen .one-container .site-content
 * Padding (50px). Innerer Content wird pro Section durch .fk-home-container
 * auf --container-max begrenzt und bekommt sein eigenes Seiten-Padding.
 * ACF-Backend-Editierbarkeit folgt erst in Stage 2 — hier nur Layout/CSS. */

.fk-home {
    width: 100%;
    background: var(--surface-page);
    overflow-x: clip;
}

.fk-home > section {
    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    margin-right: 0;
}

/* Vertical rhythm between sections (design spec). Hero manages its own
   height, so it is excluded here. */
.fk-home > section:not(.fk-home-hero):not(.fk-home-trust) {
    padding-block: clamp(56px, 8vw, 100px);
}

.fk-home-container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: clamp(24px, 5vw, 64px);
}

.fk-home-text-link {
    display: inline-block;
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    color: var(--text-link);
    border-bottom: 1.5px solid var(--fk-coral-soft);
    padding-bottom: 2px;
}
.fk-home-text-link:hover {
    color: var(--fk-coral-deep);
    border-color: var(--fk-coral-deep);
}

/* ---- Shared section headline ---- */
.fk-home-section-head {
    margin-bottom: clamp(32px, 5vw, 56px);
}
.fk-home-section-head h2 {
    margin-top: 0.2em;
}
.fk-home-section-head--center {
    max-width: var(--container-narrow);
    margin-inline: auto;
    text-align: center;
}
.fk-home-section-head__lead {
    font-size: var(--fs-medium);
    color: var(--text-body);
}
.fk-home-section-head--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-24);
    flex-wrap: wrap;
}
.fk-home-section-head--split h2 {
    margin-bottom: 0;
}

/* ---- 1. Hero ---- */
.fk-home-hero {
    min-height: 90vh;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.fk-home-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(246, 242, 233, 0.94) 0%,
        rgba(246, 242, 233, 0.62) 32%,
        rgba(246, 242, 233, 0.12) 58%,
        rgba(246, 242, 233, 0) 100%
    );
}
.fk-home-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-block: 96px;
}
/* Card sits LEFT within the shell (not centered, no margin-inline:auto).
   Glass look declared directly on this selector — do not rely on
   .container-glas alone here, so the hero card can never silently lose
   its background/blur/border to an unrelated cascade change. */
.fk-home-hero__card {
    max-width: 540px;
    margin-inline: 0;
    background: rgba(250, 247, 240, 0.88);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
    padding: clamp(32px, 4vw, 54px);
    display: flex;
    flex-direction: column;
    gap: 26px;
    text-align: left;
}
/* Home-scoped chip (pill tag). Decoupled from the theme-wide .text-chips
   utility on purpose: GenerateBlocks Global Styles also define a
   `.text-chips` class that loads AFTER this stylesheet (compiled to
   uploads/generateblocks/style-global.css) and silently wins on equal
   specificity, overriding our pill look. Using a class GB does not know
   about (.fk-home-chip) guarantees this rule always applies on the home.
   See planning/home-backlog.md. */
.fk-home-chip {
    display: inline-block;
    font-family: var(--font-sans);
    /* Design "Tag" = 12px (var(--fs-small)=13px war minimal zu gross). */
    font-size: 12px;
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-chip);
    text-transform: uppercase;
    color: var(--fk-terracotta);
    background: var(--fk-cream-deep);
    border-radius: var(--radius-pill);
    padding: 5px 14px;
}

.fk-home-hero__eyebrow {
    color: var(--fk-coral);
    text-align: left;
    margin: 0;
}
.fk-home-hero__title {
    font-size: clamp(44px, 6vw, 78px);
    line-height: 1.02;
    letter-spacing: 2px;
    color: var(--fk-fir);
    text-align: left;
    margin: 0;
}
.fk-home-hero__lead {
    font-size: 19px;
    font-weight: var(--fw-light);
    line-height: 1.75;
    max-width: 430px;
    color: var(--text-body);
    text-align: left;
    margin: 0;
}
.fk-home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 14px;
    margin-top: 0;
}

/* ---- 2. Trust-Strip ----
   Horizontal row, no card, no background image — a hairline-bordered
   strip of 4 short claims (icon + text) directly under the hero. */
.fk-home-trust {
    border-bottom: 1px solid var(--border-hairline);
}
.fk-home-trust__list {
    list-style: none;
    margin: 0;
    padding-block: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: space-between;
}
.fk-home-trust__item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-sans);
    color: var(--fk-fir);
}
.fk-home-trust__icon {
    flex: none;
    display: inline-flex;
    width: 22px;
    height: 22px;
    color: var(--fk-coral);
}
.fk-home-trust__icon svg,
.fk-home-trust__icon .gp-icon svg {
    width: 100%;
    height: 100%;
}
.fk-home-trust__text {
    font-size: 14px;
    font-weight: 500;
    line-height: var(--lh-snug);
}

/* ---- 3. USP ---- */
.fk-home-usp {
    background: var(--grad-sage);
}
.fk-home-usp__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(32px, 5vw, 72px);
    margin-top: clamp(48px, 7vw, 88px);
}
.fk-home-usp__item {
    text-align: center;
}
.fk-home-usp__icon {
    display: block;
    width: 96px;
    height: 96px;
    margin: 0 auto var(--space-20);
    border-radius: var(--radius-circle);
    background-color: var(--fk-sage-soft);
    background-size: cover;
    background-position: center;
    box-shadow: var(--shadow-sm);
}
.fk-home-usp__item h3 {
    margin-bottom: var(--space-8);
}
.fk-home-usp__item p {
    color: var(--text-body);
}

/* ---- 4. Editorial split ---- */
.fk-home-editorial {
    background: var(--grad-blush);
}
.fk-home-editorial__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 6vw, 96px);
    align-items: center;
}
.fk-home-editorial__image {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-lg);
    background-size: cover;
    background-position: center top;
    box-shadow: var(--shadow-md);
}
.fk-home-editorial__content {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 460px;
}
.fk-home-editorial__content h2 {
    font-size: clamp(30px, 3.6vw, 46px);
    margin: 0;
}
.fk-home-editorial__content p {
    font-size: 17px;
    line-height: 1.8;
    font-weight: var(--fw-light);
    color: var(--text-body);
    margin: 0;
}

/* ---- 5. Product loop ----
   The WooCommerce [products] shortcode ships its own grid/float rules
   (core woocommerce.css + gp-premium/woocommerce.min.css, loaded AFTER
   this stylesheet). We out-specify with the two-class wrapper selector
   and back it with !important on the properties GP-Premium re-declares
   on the bare "ul.products" selector, so the grid can never silently
   collapse to Woo's default 6-col/right-aligned behaviour. */
.fk-home-products .fk-home-products__grid ul.products,
.fk-home-products__grid .products {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(24px, 3vw, 40px) !important;
    width: 100% !important;
    margin: 0 !important;
    list-style: none;
    padding: 0;
}
.fk-home-products__grid .products li.product {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
}
/* WooCommerce fügt ul.products::before/::after (Clearfix) hinzu; im Grid
   werden sie zu Grid-Items und belegen die erste/letzte Zelle (leere Spalte
   links). Entfernen, damit die Produkte alle Spalten füllen. */
.fk-home-products .fk-home-products__grid ul.products::before,
.fk-home-products .fk-home-products__grid ul.products::after,
.fk-home-products__grid .products::before,
.fk-home-products__grid .products::after {
    content: none !important;
    display: none !important;
}

/* ---- 6. Testimonials ---- */
.fk-home-testimonials__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-32);
}
.fk-home-testimonials__card {
    margin: 0;
    padding: clamp(28px, 3vw, 40px);
    text-align: left;
}
.fk-home-testimonials__mark {
    display: block;
    font-family: var(--font-display);
    font-size: 64px;
    line-height: 1;
    color: var(--fk-coral-soft);
    margin-bottom: var(--space-8);
}
.fk-home-testimonials__card blockquote {
    margin: 0 0 var(--space-16);
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-medium);
    color: var(--fk-fir);
    line-height: var(--lh-snug);
}
.fk-home-testimonials__card figcaption {
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
}

/* ---- 7. Newsletter ---- */
.fk-home-newsletter__box {
    background: var(--grad-blush);
    border-radius: var(--radius-lg);
    padding: clamp(40px, 6vw, 80px);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    box-shadow: var(--shadow-xs);
}
.fk-home-newsletter__content h2 {
    margin-top: 0.3em;
}
.fk-home-newsletter__content p:not(.fk-home-chip) {
    color: var(--text-body);
}
.fk-home-newsletter__static-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12);
}
.fk-home-newsletter__static-form input[type="email"] {
    flex: 1 1 220px;
    min-width: 0;
    background: var(--fk-white);
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-pill);
    padding: 14px 22px;
    font-family: var(--font-sans);
    font-size: var(--fs-normal);
    color: var(--text-body);
}
.fk-home-newsletter__static-form input[type="email"]:focus {
    outline: none;
    border-color: var(--fk-coral-soft);
}
.fk-home-newsletter__static-form .fk-button {
    border: none;
}
.fk-home-newsletter__note {
    margin: var(--space-8) 0 0;
}
.fk-home-newsletter__note:empty {
    display: none;
}

/* ---- 8. Blog-Teaser ---- */
.fk-home-blog__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-32);
}
.fk-home-blog__card {
    margin: 0;
}
.fk-home-blog__thumb {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.fk-home-blog__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.fk-home-blog__body {
    padding: clamp(20px, 2.5vw, 28px);
}
.fk-home-blog__body h3 {
    margin-top: var(--space-12);
}
.fk-home-blog__body h3 a {
    color: var(--fk-coral);
}
.fk-home-blog__body p {
    color: var(--text-body);
}

/* ---- Responsive: stack to 1 column under ~768px ---- */
@media (max-width: 768px) {
    .fk-home-hero {
        min-height: unset;
        padding-block: clamp(96px, 24vw, 160px) clamp(48px, 10vw, 80px);
    }
    .fk-home-hero__card {
        max-width: 100%;
    }
    .fk-home-trust__list {
        grid-template-columns: 1fr;
    }
    .fk-home-usp__grid,
    .fk-home-testimonials__grid,
    .fk-home-blog__grid,
    .fk-home-products__grid .products {
        grid-template-columns: 1fr !important;
    }
    .fk-home-editorial__grid,
    .fk-home-newsletter__box {
        grid-template-columns: 1fr;
    }
    .fk-home-editorial__image {
        order: -1;
    }
    .fk-home-section-head--split {
        align-items: flex-start;
    }
}

/* ===== Design-System Utility-Klassen (aus base.css) ===== */

/* ---- Eyebrow / sub-headline ---- */
.fk-eyebrow,
.sub-headline {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-chip);
  text-transform: uppercase;
  color: var(--fk-coral);
}

/* ---- Buttons (pill, uppercase, tracked) ---- */
.fk-button,
.gbp-button--primary,
.gbp-button--secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 14px 30px;
  border: 1.5px solid var(--fk-fir);
  cursor: pointer;
  transition: var(--transition-base);
  line-height: 1;
}
.fk-button--primary,
.gbp-button--primary {
  background: var(--fk-buy);
  color: #fff;
  border-color: var(--fk-buy);
  box-shadow: 0 8px 20px var(--fk-buy-glow);
}
.fk-button--primary:hover,
.gbp-button--primary:hover {
  background: var(--fk-buy-deep);
  border-color: var(--fk-buy-deep);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px var(--fk-buy-glow);
}
.fk-button--dark {
  background: var(--fk-fir);
  color: var(--text-on-dark);
}
.fk-button--dark:hover {
  background: var(--fk-fir-soft);
  color: var(--text-on-dark);
}
.fk-button--secondary,
.gbp-button--secondary {
  background: transparent;
  color: var(--fk-fir);
}
.fk-button--secondary:hover,
.gbp-button--secondary:hover {
  background: var(--fk-sage);
  border-color: var(--fk-sage);
  color: var(--fk-white);
}

/* ---- Glass box (hero / newsletter panels) ---- */
.container-glas {
  background: var(--surface-glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
  padding: clamp(24px, 4vw, 48px);
}

/* ---- Chips / tags ---- */
.text-chips {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-chip);
  text-transform: uppercase;
  color: var(--fk-terracotta);
  background: var(--fk-cream-deep);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
}

/* ---- Cards ---- */
.fk-card,
.gbp-card {
  background: var(--surface-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* ---- Custom content callouts ---- */
.is-style-fk-hinweis {
  background: var(--fk-cream-yellow);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  font-family: var(--font-sans);
  color: var(--fk-fir);
  margin: 1.5em 0;
}
.is-style-fk-lesetipp {
  border-left: 3px solid var(--fk-terracotta);
  background: var(--fk-cream-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 20px;
  font-style: italic;
  font-family: var(--font-display);
  font-size: var(--fs-medium);
  color: var(--fk-fir);
  margin: 1.5em 0;
}

/* ---- Small round icon disc ---- */
.small-icon-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-circle);
  background: var(--fk-cream-deep);
  color: var(--fk-terracotta);
}

/* ===== Produkt-Feature-Liste ===== */
.fk-product-features {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 1em 0;
}
.fk-feature {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 5px 0;
}
.fk-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fk-coral);
}
.fk-feature__icon svg {
  width: 18px;
  height: 18px;
  color: currentColor;
}
.fk-feature__text {
  font-family: var(--font-sans);
  font-size: 75%;
  color: var(--text-body);
}
.fk-feature__text strong {
  color: var(--fk-fir);
  font-weight: var(--fw-semibold);
}

/* ===== Block-Pattern-Pilot (Home-Sektionen) =====
 * page-fullwidth-blocks.php + patterns/{hero,usp,testimonials}.php.
 * CORE blocks only, styled entirely from here (tokens) — no inline styles
 * in the DB. Mirrors the same viewport-anchored full-bleed trick already
 * used for .fk-home (see "Phase 3 — M7: Home" above): 100vw + negative
 * margin works regardless of GP's .site-content/.grid-container padding
 * because it's relative to the viewport, not the parent. */

.fk-blocks {
  width: 100%;
  background: var(--surface-page);
  overflow-x: clip;
}

.fk-blocks .alignfull {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
}

/* Vertical rhythm between pattern sections. */
.fk-blocks > .alignfull + .alignfull {
  margin-top: 0;
}
.fk-usp,
.fk-testimonials {
  padding-block: clamp(56px, 8vw, 100px);
}

/* Constrain the inner content of the alignfull sections to the shared
   container width + side padding (same values as .fk-home-container). */
.fk-usp > .wp-block-group__inner-container,
.fk-testimonials > .wp-block-group__inner-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(24px, 5vw, 64px);
  box-sizing: border-box;
}
.fk-usp__grid,
.fk-testimonials__grid {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* ---- Hero (core/cover) ---- */
.fk-hero {
  min-height: 640px;
}
.fk-hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(24px, 5vw, 64px);
  display: flex;
  justify-content: flex-start;
}
/* Left-heavy cream gradient over the hero photo, on top of the block's own
   dim layer, so the glass card always sits on a legible, on-brand surface. */
.fk-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(246, 242, 233, 0.92) 0%,
    rgba(246, 242, 233, 0.6) 42%,
    rgba(246, 242, 233, 0.08) 72%,
    rgba(246, 242, 233, 0) 100%
  );
}
.fk-hero__card {
  position: relative;
  background: rgba(250, 247, 240, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
  padding: clamp(32px, 4vw, 54px);
  max-width: 540px;
  margin: 0;
}
.fk-hero__card .fk-eyebrow {
  margin-top: 0;
  /* .fk-hero__card p (font-size:var(--fs-medium)=20px, color:var(--text-body))
     uebersteuert sonst die Eyebrow -> hier explizit auf Design (13px / ls 4px /
     coral) zwingen. */
  font-size: 13px;
  letter-spacing: 4px;
  line-height: 1.3;
  color: var(--fk-coral);
}
.fk-hero__card h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--text-heading);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  margin-block: 0.2em 0.4em;
  font-size: clamp(44px, 6vw, 78px);
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}
.fk-hero__card p {
  color: var(--text-body);
  font-size: var(--fs-medium);
  line-height: var(--lh-snug);
}
.fk-hero__card .wp-block-buttons {
  margin-top: clamp(20px, 3vw, 32px);
}
.fk-hero__card .wp-block-button__link {
    padding: 15px 36px !important;
    font-size: var(--fs-small) !important;
}

/* ---- USP (core/columns) ---- */
.fk-usp .fk-home-section-head {
  margin-bottom: clamp(32px, 5vw, 56px);
}
.fk-usp .fk-home-section-head h2,
.fk-testimonials .fk-home-section-head h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--text-heading);
}
.fk-usp__grid .wp-block-image img {
  border-radius: var(--radius-circle);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
}
.fk-usp__grid h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--text-heading);
  margin-top: 0.6em;
}
.fk-usp__grid p {
  color: var(--text-body);
}

/* ---- Testimonials (core/columns > core/group) ---- */
.fk-testimonial-card {
  background: var(--fk-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: clamp(24px, 3vw, 36px);
  height: 100%;
  box-sizing: border-box;
  position: relative;
}
.fk-testimonial-card::before {
  content: "\201C";
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 64px;
  line-height: 1;
  color: var(--fk-coral);
  opacity: 0.5;
  margin-bottom: 0.1em;
}
.fk-testimonial-card p:first-of-type {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-medium);
  line-height: var(--lh-snug);
  color: var(--text-heading);
}
.fk-testimonial-name {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  margin-top: 1em;
}

/* ===== Block-Pattern-Pilot — Ausbau (Trust / Editorial / Product-Loop /
 * Newsletter / Blog-Teaser) =====
 * patterns/{trust,editorial,product-loop,newsletter,blog-teaser}.php.
 * Gleiches Rezept wie USP/Testimonials: äußere core/group ist alignfull
 * (100vw-Bleed via .fk-blocks .alignfull), der Inhalt wird über die vom
 * constrained-Layout eingezogene .wp-block-group__inner-container-Ebene auf
 * --container-max + Seiten-Padding constrained. CORE-Blöcke, nur Tokens. */

/* Innencontent aller neuen Sektionen constrainen (analog fk-usp-Regel). */
.fk-trust > .wp-block-group__inner-container,
.fk-editorial > .wp-block-group__inner-container,
.fk-product-loop > .wp-block-group__inner-container,
.fk-newsletter > .wp-block-group__inner-container,
.fk-blog-teaser > .wp-block-group__inner-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(24px, 5vw, 64px);
  box-sizing: border-box;
}

/* Section-Rhythmus vertikal. Trust hat eigenen 30px-Innenabstand; Blog-Teaser
   nur unten (lt. Design). */
.fk-editorial,
.fk-product-loop,
.fk-newsletter {
  padding-block: clamp(56px, 8vw, 100px);
}
.fk-blog-teaser {
  padding-block: 0 clamp(56px, 8vw, 100px);
}

/* Text-CTA-Link (kein Button-Block): coral, kein uppercase, hängt " ›" an. */
.fk-link-cta {
  margin: 0;
}
.fk-link-cta a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  color: var(--fk-coral);
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
  transition: var(--transition-base);
}
.fk-link-cta a::after {
  content: "\203A";
  font-size: 1.15em;
  line-height: 1;
}
.fk-link-cta a:hover {
  color: var(--fk-coral-deep);
}

/* ---- Trust-Strip (core/group > core/html) ---- */
.fk-trust {
  border-bottom: 1px solid var(--border-hairline);
}
.fk-trust__list {
  list-style: none;
  margin: 0;
  padding: 30px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
}
.fk-trust__item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fk-trust__icon {
  flex: none;
  display: inline-flex;
  width: 22px;
  height: 22px;
  color: var(--fk-coral);
}
.fk-trust__icon svg {
  width: 22px;
  height: 22px;
}
.fk-trust__text {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--fk-fir);
}

/* ---- Editorial (core/columns auf Blush) ---- */
.fk-editorial {
  background: var(--grad-blush);
}
.fk-editorial__grid {
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.fk-editorial__image img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: cover;
  object-position: left center;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.fk-editorial__text {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 460px;
}
.fk-editorial__text .fk-eyebrow {
  margin: 0;
}
.fk-editorial__text h2 {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  font-size: clamp(30px, 3.6vw, 46px);
  color: var(--text-heading);
}
.fk-editorial__text p {
  margin: 0;
  color: var(--text-body);
  line-height: 1.8;
}

/* ---- Product-Loop (Split-Header + WooCommerce-Shortcode) ---- */
.fk-product-loop .fk-home-section-head--split {
  margin-bottom: clamp(40px, 6vw, 64px);
  /* Section-constrained kappt den Block sonst auf content-size (~648px) +
     margin-inline:auto -> zentriert. Auf volle Inner-Breite zwingen, damit
     head-text am linken, Button am rechten Container-Rand sitzt.
     display:block statt des geerbten flex, sonst wird das einzige Kind (der
     von WP eingezogene Inner-Container) als Flex-Item in der Mitte zentriert. */
  display: block;
  max-width: none;
  margin-inline: 0;
  width: 100%;
  box-sizing: border-box;
}
/* Der --split-Gruppenblock ist constrained -> WP verpackt Head-Text + CTA in
   EINEN .wp-block-group__inner-container. Das Split-Flex muss daher auf den
   Inner-Container, sonst stapeln die beiden echten Kinder. Zusaetzlich die von
   WP eingezogenen max-width/margin-inline:auto auf den Grandchildren loeschen. */
.fk-product-loop .fk-home-section-head--split > .wp-block-group__inner-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
.fk-product-loop .fk-product-loop__head-text,
.fk-product-loop .fk-product-loop__cta {
  max-width: none;
  margin-inline: 0;
}
.fk-product-loop__head-text {
  margin: 0;
  text-align: left;
}
.fk-product-loop__head-text .fk-eyebrow {
  margin: 0;
}
.fk-product-loop__head-text h2 {
  margin: 0.2em 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--text-heading);
}
.fk-product-loop__cta {
  margin: 0;
}
/* Grids der eigenen Listen-Shortcodes [fk_posts] / [fk_products]
   (inc/home-lists.php). 3 Spalten, responsive Staffelung unten. */
.fk-posts-grid,
.fk-products-grid {
  display: grid;
  /* minmax(0,1fr): min-content der Karten darf die Spalten nicht aufdrücken. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
  width: 100%;
}

/* ---- Newsletter (Blush-Box mit statischem Formular) ---- */
.fk-newsletter__box {
  background: var(--grad-blush);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: clamp(40px, 6vw, 80px);
}
.fk-newsletter__grid {
  display: grid !important;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.fk-newsletter__grid > .wp-block-column:first-child {
  flex-basis: 55% !important;
}
.fk-newsletter__grid h2 {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  font-size: clamp(30px, 3.6vw, 46px);
  color: var(--text-heading);
}
.fk-newsletter__grid p {
  margin: 16px 0 0;
  max-width: 420px;
  color: var(--text-body);
  line-height: 1.75;
}
/* Das statische Mockup-Formular (.fk-newsletter__form/__input/__submit)
   wurde durch Fluent Forms #5 ersetzt — Styling siehe Sektion
   "Newsletter — Fluent Forms #5" am Dateiende (0.2.42). */

/* ---- Blog-Teaser (zentrierte Headline + 3 Cards) ---- */
.fk-blog-teaser .fk-home-section-head--center h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--text-heading);
}
.fk-blog-card {
  background: var(--fk-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.fk-blog-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  width: 100%;
  overflow: hidden;
}
.fk-blog-card__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
/* Gradient-Fallback fuer Posts ohne Beitragsbild (img ueberdeckt ihn). */
.fk-posts-grid > .fk-blog-card:nth-child(1) .fk-blog-card__media {
  background: var(--grad-image-b);
}
.fk-posts-grid > .fk-blog-card:nth-child(2) .fk-blog-card__media {
  background: var(--grad-image-d);
}
.fk-posts-grid > .fk-blog-card:nth-child(3) .fk-blog-card__media {
  background: var(--grad-image-c);
}
/* Kategorie-Chip & Titel-Link (Shortcode rendert Links statt Plaintext). */
a.fk-home-chip {
  text-decoration: none;
}
a.fk-home-chip:hover {
  color: var(--fk-terracotta-deep, var(--fk-terracotta));
}
.fk-blog-card__body h3 a {
  color: inherit;
  text-decoration: none;
}
.fk-blog-card__body h3 a:hover {
  color: var(--fk-coral);
}
.fk-blog-card__body {
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.fk-blog-card__body .fk-home-chip {
  align-self: flex-start;
  margin: 0;
}
.fk-blog-card__body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 22px;
  line-height: 1.25;
  color: var(--text-heading);
}
.fk-blog-card__body p:not(.fk-home-chip):not(.fk-link-cta) {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-body);
  flex: 1;
}

/* Responsiv: Listen-Grids staffeln (3 -> 2 -> 1 Spalten).
   Die core/columns-Blöcke (Editorial, Newsletter) stapeln <782px selbst. */
@media (max-width: 900px) {
  .fk-posts-grid,
  .fk-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 781px) {
  .fk-posts-grid,
  .fk-products-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .fk-newsletter__grid {
    grid-template-columns: 1fr;
  }
  .fk-newsletter__grid > .wp-block-column:first-child {
    flex-basis: 100% !important;
  }
}

/* ==========================================================================
   Phase 3 — Polish (0.2.7)
   ========================================================================== */

/* ---- Home-Produktkarten ([fk_products], Design ProductCard) -----------
   Eigenes Markup aus inc/home-lists.php — kein Woo-Loop mehr auf der Home.
   Karte: Surface-Card, radius-lg, Hover-Lift; Bild PORTRAIT 4/5 flush;
   Body linksbuendig mit 22px-Padding; Button unten buendig (margin-top:auto). */
.fk-product-card {
  position: relative;
  min-width: 0; /* Flex/Grid-Item darf schmaler als sein min-content werden */
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition-base);
}
.fk-product-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-6px);
}
.fk-product-card__media {
  display: block;
  position: relative; /* Anker fuer das Hover-Alt-Bild */
  overflow: hidden;
}
.fk-product-card__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  margin: 0;
  border-radius: 0;
  transition: transform var(--transition-base);
}
/* Hover-Scale bleibt und gilt fuer BEIDE Bilder (Haupt + Alt) — so
   crossfaden zwei identisch skalierte Bilder ohne Sprung. */
.fk-product-card:hover .fk-product-card__media img {
  transform: scale(1.05);
}
/* Hover-Swap: zweites Produktbild (erste Galerie-ID, Renderer
   inc/product-card.php) liegt absolut ueber dem Hauptbild und wird
   beim Karten-Hover eingeblendet. Kein JS. */
.fk-product-card__media img.fk-product-card__img-alt {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
  transition:
    opacity var(--dur-base) var(--ease-soft),
    transform var(--transition-base);
}
.fk-product-card:hover .fk-product-card__media img.fk-product-card__img-alt {
  opacity: 1;
}
.fk-product-card__body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  text-align: left;
}
/* Titel: nimmt IMMER exakt 3 Zeilen ein — längere Titel werden per
   line-clamp auf 3 Zeilen geklemmt, kürzere reservieren die Resthöhe
   (min-height = 3 × line-height 1.25). So starten Meta/Preis/Legal/Button
   in jeder Karte einer Reihe auf derselben Höhe. */
.fk-product-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 20px;
  line-height: 1.25;
  color: var(--fk-fir);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(3 * 1.25em);
}
.fk-product-card__title a {
  color: inherit;
  text-decoration: none;
}
.fk-product-card__title a:hover {
  color: var(--fk-coral);
}
/* Oe-Zeile ("Ø ca. X cm · handgebunden"): der Renderer gibt das Element
   IMMER aus (leer ohne Durchmesser, inc/product-card.php) — min-height
   reserviert die Zeilenhöhe, damit die Struktur aller Karten identisch ist. */
.fk-product-card__meta {
  display: block;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.4;
  min-height: 1.4em;
  color: var(--text-muted);
}
.fk-product-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
/* Preis: Woo-price_html-Markup (ins = Sale-Preis coral, del muted). */
.fk-product-card__price {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: 19px;
  color: var(--text-heading);
}
.fk-product-card__price ins {
  text-decoration: none;
  color: var(--fk-coral);
}
.fk-product-card__price del {
  color: var(--text-muted);
  font-weight: var(--fw-regular);
  text-decoration: line-through;
  opacity: 1;
}
.fk-product-card__stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--in-stock);
  white-space: nowrap;
}
.fk-product-card__stock::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--in-stock);
}
.fk-product-card__legal {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted);
}
/* Button: Full-Width Primary Fir/Buy-Pill, unten buendig. Die generische
   Primary-Regel (body a.add_to_cart_button, 0,1,2) matcht bereits mit
   !important auf padding/radius — diese Regel (0,2,1) gewinnt bei gleicher
   !important-Prioritaet und setzt das Design-Padding 14px 16px + width:100%.
   Gilt auch fuer den "Details ansehen"-Link (variable Produkte). */
.fk-product-card a.fk-product-card__button {
  display: block;
  box-sizing: border-box;
  width: 100%;
  /* !important: Woo core setzt ".woocommerce ul.products li.product .button
     { margin-top: 1em }" (Spezifität 0,3,1 > unsere 0,2,1) — ohne !important
     verliert margin-top:auto in allen Woo-Loops (Shop, Related, Cross-Sells)
     und die Buttons sitzen nicht bündig am Kartenboden. */
  margin-top: auto !important;
  text-align: center;
  white-space: normal; /* darf bei schmalen Karten 2-zeilig umbrechen */
  background: var(--fk-buy) !important;
  color: var(--text-on-accent) !important;
  border: 1.5px solid var(--fk-buy) !important;
  border-color: var(--fk-buy) !important;
  border-radius: var(--radius-pill) !important;
  padding: 14px 16px !important;
  text-transform: uppercase !important;
  letter-spacing: var(--ls-button) !important;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: var(--transition-base);
}
.fk-product-card a.fk-product-card__button:hover {
  background: var(--fk-buy-deep) !important;
  border-color: var(--fk-buy-deep) !important;
  color: var(--text-on-accent) !important;
  transform: translateY(-2px);
}
/* Sale-Badge: floating oben-links, Peach-Pill mit Fir-Text (.onsale-Optik). */
.fk-product-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: var(--sale-badge);
  color: var(--fk-fir);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-chip);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  line-height: 1;
}


/* ---- Testimonials: Foto-Veil-Hintergrund (Design) ---------------------
   Dekoratives Foto + Cream/Sage-Veil hinter den Cards. Cards nutzen
   var(--fk-white) und werden ueber z-index 1 gehoben -> bleiben lesbar. */
.fk-testimonials {
  position: relative;
  overflow: hidden;
}
.fk-testimonials::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url(https://farbenkranz.de/wp-content/uploads/2025/05/trockenblumen-newsletter.png);
  background-size: cover;
  background-position: center;
}
.fk-testimonials::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(246, 242, 233, 0.93) 0%,
    rgba(238, 241, 231, 0.87) 45%,
    rgba(212, 221, 203, 0.85) 100%
  );
}
.fk-testimonials > .wp-block-group__inner-container {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Design-Footer (fir-grünes Band + Wellen-Divider + 4 Spalten + Copyright)
   Markup: inc/footer.php · Ersetzt die GP-Default-Footerbar site-weit.
   ========================================================================== */

/* GP-Footer-Wrapper neutralisieren, damit unser Band randlos/full-width sitzt
   und keine doppelten Paddings der .site-footer/.inside-footer stören. */
.site-footer,
.site-footer .inside-footer {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

.fk-footer {
  position: relative;
  background: var(--surface-footer);
  color: var(--fk-cream);
  font-family: var(--font-sans);
}

/* Wellen-Divider – absolut oberhalb des Bands. bottom:99% (statt 100%) lässt
   die Welle 1 % ins Band überlappen -> keine 1px-Naht-Linie zwischen Welle
   und Footer-Band. */
.fk-footer__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 99%;
  height: clamp(64px, 8vw, 140px);
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
}
.fk-footer__wave svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Innerer Container mit den 4 Spalten. */
.fk-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 64px) 48px;
}
.fk-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-top: 56px;
}
.fk-footer__col {
  display: flex;
  flex-direction: column;
}

/* Spalte 1: Marke. */
.fk-footer__wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 28px;
  color: var(--fk-cream);
  line-height: 1;
}
.fk-footer__tagline {
  max-width: 280px;
  margin: 10px 0 0;
  color: rgba(246, 242, 233, 0.8);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
}
.fk-footer__social {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.fk-footer__social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(246, 242, 233, 0.35);
  border-radius: 50%;
  color: var(--fk-cream);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.fk-footer__social-btn:hover {
  border-color: var(--fk-cream);
  background: rgba(246, 242, 233, 0.08);
}

/* Outline-Icons NIE füllen: GP setzt `.gp-icon svg { fill: … }` (CSS schlägt
   das inline-Präsentationsattribut `fill="none"`) -> Outline-Icons (Lucide aus
   inc/icons.php, Footer-Social u. a.) würden gefüllt/„blob". Das inline
   fill="none" per CSS re-asserten. Nur SVGs mit explizitem fill="none" (echte
   Outline-Icons) — gefüllte Icons (Burger-Bars, GP-Pfeile) bleiben unberührt.
   Die gp-icon-/lucide-Varianten (0,2,1) schlagen GPs `.gp-icon svg` (0,1,1),
   das sonst später + gleich spezifisch gewinnt (Header-Warenkorb/Suche). */
.gp-icon svg[fill="none"],
svg.lucide[fill="none"],
svg[fill="none"] {
  fill: none !important;
}

/* Navigationsspalten. */
.fk-footer__heading {
  margin: 0 0 4px;
  color: var(--fk-cream-yellow);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.fk-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fk-footer__links a {
  color: rgba(246, 242, 233, 0.82);
  font-size: 14px;
  font-weight: 300;
  text-decoration: none;
  transition: color 0.2s ease;
}
.fk-footer__links a:hover {
  color: var(--fk-cream);
}

/* Spalte 4: Kontakt. */
.fk-footer__col--contact {
  align-items: flex-start;
}
/* Weitere Überschrift(en) in der Kontakt-Spalte (z. B. „Vertrag widerrufen")
   vom vorigen Block absetzen — gilt für Code-Footer UND Block-Element.
   !important: der Block-Heading-Reset (.fk-footer__heading.wp-block-heading
   { margin: 0 0 4px }) steht später und würde margin-top sonst nullen. */
.fk-footer__col--contact .fk-footer__heading:not(:first-child) {
  margin-top: 28px !important;
}
.fk-footer__contact-text {
  margin: 0 0 16px;
  color: rgba(246, 242, 233, 0.8);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
}
.fk-footer__contact-btn {
  align-self: flex-start;
  display: inline-block;
  background: transparent;
  border: 1.5px solid var(--fk-cream);
  color: var(--fk-cream);
  border-radius: var(--radius-pill);
  padding: 12px 28px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--ls-button);
  font-size: var(--fs-small);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.fk-footer__contact-btn:hover {
  background: var(--fk-cream);
  color: var(--surface-footer);
}

/* Copyright- und Rechtslinks-Bar. */
.fk-footer__copy {
  border-top: 1px solid rgba(246, 242, 233, 0.16);
  padding: 20px 32px;
  text-align: center;
  font-size: 12.5px;
  color: rgba(246, 242, 233, 0.7);
}
.fk-footer__legal {
  margin: 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.fk-footer__legal a {
  color: rgba(246, 242, 233, 0.7);
  text-decoration: none;
  transition: color 0.2s ease;
}
.fk-footer__legal a:hover {
  color: var(--fk-cream);
}
.fk-footer__sep {
  color: rgba(246, 242, 233, 0.4);
}
/* GP-Legacy-Regel `body .site-footer a{color:var(--text-link)}` (0,1,2) faerbt
   sonst alle Footer-Links/Icons coral (der Footer sitzt in GPs .site-footer).
   Mit .fk-footer-Prefix auf (0,2,x) anheben -> Cream gewinnt. */
.fk-footer .fk-footer__links a,
.fk-footer .fk-footer__social-btn,
.fk-footer .fk-footer__contact-btn {
  color: var(--fk-cream);
}
.fk-footer .fk-footer__links a {
  color: rgba(246, 242, 233, 0.82);
}
.fk-footer .fk-footer__legal a {
  color: rgba(246, 242, 233, 0.7);
}
.fk-footer .fk-footer__links a:hover,
.fk-footer .fk-footer__legal a:hover,
.fk-footer .fk-footer__social-btn:hover {
  color: var(--fk-cream);
}
/* Footer-Widget-Bereiche (E3): Navigations-/Listen-Widgets identisch zur
   Fallback-Linkliste stylen — egal ob Redaktion ein „Navigation"-Widget
   (ul.menu), eine Liste oder Custom-HTML einsetzt. Höhere Spezifität
   (.fk-footer .fk-footer__widget a = 0,3,1) schlägt die coral Footer-Link-
   Erbregel wie bei .fk-footer__links. */
.fk-footer__widget ul,
.fk-footer__widget ul.menu,
.fk-footer__widget .wp-block-navigation__container {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fk-footer__widget nav {
  margin: 0;
}
.fk-footer .fk-footer__widget a {
  color: rgba(246, 242, 233, 0.82);
  font-size: 14px;
  font-weight: 300;
  text-decoration: none;
  transition: color 0.2s ease;
}
.fk-footer .fk-footer__widget a:hover {
  color: var(--fk-cream);
}
.fk-footer .fk-footer__contact-btn:hover {
  color: var(--surface-footer);
}
.fk-footer__copyline {
  margin: 0;
}

/* Responsiv: unter GPs Mobile-Breakpoint (782px) auf 1 Spalte stapeln. */
@media (max-width: 782px) {
  .fk-footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 40px;
  }
  .fk-footer__tagline {
    max-width: none;
  }
}

/* ---- Footer als GP Block Element (echte Blöcke): Anpassungen an Gutenbergs
   Group-/Columns-Wrapper. Die fk-footer__*-Optik (oben) bleibt unverändert;
   hier nur die Struktur-Overrides. Der Code-Footer (inc/footer.php, Fallback)
   nutzt dieselben Klassen OHNE diese Wrapper -> beide Wege funktionieren. */
/* .fk-footer ist ein constrained Group -> sein inner-container übernimmt die
   frühere .fk-footer__inner-Ebene (Textbreite + Seiten-Padding). */
.fk-footer > .wp-block-group__inner-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 clamp(24px, 5vw, 64px) 48px;
  box-sizing: border-box;
}
/* Constrained-Layout zieht Kindern sonst eine content-size-max-width ein —
   Grid + Copy sollen die volle Innenbreite nutzen. */
.fk-footer > .wp-block-group__inner-container > * {
  max-width: none;
  margin-inline: 0;
}
/* Das Grid ist jetzt ein Columns-Block -> als CSS-Grid layouten (Spalten wie
   zuvor 1.4/1/1/1.2), Columns-Defaults (flex/gap/margin) neutralisieren. */
.fk-footer__grid.wp-block-columns {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  /* margin-bottom: Abstand zur Copyright-/Divider-Zeile, sonst kleben die
     Menüpunkte am Trenner. */
  margin: 0 0 10px;
  padding-top: 56px;
}
.fk-footer__grid.wp-block-columns > .fk-footer__col.wp-block-column {
  flex-basis: auto;
  padding: 0;
}
/* Block-Defaults der Text-Bausteine (Absatz-/Heading-/Listen-Margins) neutralisieren. */
.fk-footer .fk-footer__wordmark { margin: 0; }
.fk-footer .fk-footer__heading.wp-block-heading { margin: 0 0 4px; }
.fk-footer .fk-footer__links.wp-block-list { margin: 0; padding: 0; }
@media (max-width: 782px) {
  .fk-footer__grid.wp-block-columns {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 40px;
  }
}

/* ==========================================================================
   Phase 3 — Blog/Post-Artikel (blog.css portiert)
   1:1 aus design/reference/blog.css (Design-Quelle). .fk-prose = Artikel-Body-
   Wrapper (auf Single-Posts via inc/blog.php gesetzt); gw-* = Goblin-Worker-
   Plugin-Klassen (Callouts, FAQ, Pro/Con, Tabellen, TL;DR, Quellen, Related,
   Module). Alle Tokens existieren bereits im Theme.
   ========================================================================== */

/* 1. PROSE — Artikel-Body (.fk-prose) */
.fk-prose { font-family: var(--font-sans); font-weight: var(--fw-light); font-size: 17.5px; line-height: 1.85; color: var(--text-body); }
.fk-prose > *:first-child { margin-top: 0; }
.fk-prose p { margin: 0 0 1.35em; }
.fk-prose h2 { font-family: var(--font-display); font-style: italic; font-weight: 500; letter-spacing: 1.5px; font-size: clamp(28px, 3.2vw, 36px); line-height: 1.2; color: var(--fk-fir); margin: 1.9em 0 0.55em; scroll-margin-top: 130px; }
.fk-prose h3 { font-family: var(--font-display); font-style: normal; font-weight: 600; font-size: 23px; color: var(--fk-terracotta); margin: 1.6em 0 0.5em; scroll-margin-top: 130px; }
.fk-prose a { color: var(--fk-terracotta); text-decoration: none; border-bottom: 1px solid var(--fk-terracotta-soft); transition: color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft); }
.fk-prose a:hover { color: var(--fk-terracotta-deep); border-color: var(--fk-terracotta); }
.fk-prose strong { font-weight: 600; color: var(--fk-fir); }
.fk-prose ul, .fk-prose ol { margin: 0 0 1.5em; padding-left: 0; list-style: none; }
.fk-prose li { position: relative; padding-left: 30px; margin: 0.55em 0; }
.fk-prose ul > li::before { content: ''; position: absolute; left: 6px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--fk-terracotta); }
.fk-prose ol { counter-reset: fk-ol; }
.fk-prose ol > li { padding-left: 42px; margin: 0.7em 0; }
.fk-prose ol > li::before { counter-increment: fk-ol; content: counter(fk-ol); position: absolute; left: 0; top: 2px; width: 28px; height: 28px; border-radius: 50%; background: var(--fk-cream-deep); color: var(--fk-terracotta); font-family: var(--font-sans); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.fk-prose img, .fk-prose figure img { border-radius: var(--radius-md); display: block; max-width: 100%; }
.fk-prose figure { margin: 1.6em 0; }
.fk-prose figcaption { font-size: 13px; color: var(--text-muted); text-align: center; margin-top: 10px; font-style: italic; }

/* 2. TABLES */
.gw-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 32px 0; border-radius: var(--radius-md); border: 1px solid var(--border-hairline); background: var(--surface-card); }
.fk-prose table, .gw-table-scroll table { border-collapse: collapse; width: 100%; font-family: var(--font-sans); font-size: 15px; color: var(--text-body); }
.gw-table-scroll th, .fk-prose th { background: var(--fk-cream-deep); color: var(--fk-fir); font-weight: 700; text-align: left; padding: 13px 18px; white-space: nowrap; }
.gw-table-scroll td, .fk-prose td { padding: 13px 18px; border-top: 1px solid var(--border-hairline); font-weight: 300; }
.gw-table-scroll tr:nth-child(even) td { background: var(--fk-cream-soft); }

/* 3. CALLOUTS */
.gw-callout { margin: 30px 0; padding: 18px 22px 18px 24px; border-radius: var(--radius-md); border-left: 3px solid var(--fk-terracotta); background: var(--fk-cream-soft); font-family: var(--font-sans); font-weight: 300; font-size: 15.5px; line-height: 1.65; color: var(--text-body); }
.gw-callout p { margin: 0; }
.gw-callout p + p { margin-top: 0.7em; }
.gw-callout-label { display: inline-block; margin-right: 8px; font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--fk-terracotta); }
.gw-callout-info { border-left-color: var(--fk-terracotta); background: var(--fk-cream-soft); }
.gw-callout-info .gw-callout-label { color: var(--fk-terracotta); }
.gw-callout-tip { border-left-color: var(--fk-green-mid); background: var(--fk-sage-soft); }
.gw-callout-tip .gw-callout-label { color: var(--fk-green-mid); }
.gw-callout-warning { border-left-color: var(--sale-badge); background: var(--fk-rose-soft); }
.gw-callout-warning .gw-callout-label { color: var(--text-on-band); }

/* 4. RELATED CALLOUT CARD */
.gw-callout-related-card { display: grid; grid-template-columns: 1fr 150px; gap: 22px; align-items: center; margin: 34px 0; padding: 22px 24px; background: var(--fk-cream-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.gw-callout-related-text { display: flex; flex-direction: column; gap: 8px; }
.gw-callout-related-label { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--fk-terracotta); }
.gw-callout-related-text > p, .gw-callout-related-text a:not(.gw-callout-related-cta) { font-family: var(--font-display); font-style: italic; font-size: 21px; line-height: 1.35; color: var(--fk-fir); margin: 0; border: none; }
.gw-callout-related-cta { align-self: flex-start; margin-top: 4px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.3px; color: var(--fk-terracotta); text-decoration: none; border: none; }
.gw-callout-related-cta::after { content: ' ›'; }
.gw-callout-related-img-col { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1; background: var(--grad-image-d); }
.gw-callout-related-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 5. PRO / CON */
.gw-procon { margin: 26px 0; padding: 20px 24px; border-radius: var(--radius-md); border: 1px solid transparent; }
.gw-procon-pro { background: var(--fk-sage-soft); border-color: var(--fk-sage); }
.gw-procon-con { background: var(--fk-rose-soft); border-color: var(--fk-rose); }
.gw-procon-heading { margin: 0 0 10px; }
.gw-procon-heading strong { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 22px; letter-spacing: 0.5px; }
.gw-procon-pro .gw-procon-heading strong { color: var(--fk-green-mid); }
.gw-procon-con .gw-procon-heading strong { color: var(--text-on-band); }
.gw-procon-list { list-style: none; margin: 0; padding: 0; }
.gw-procon-list li { position: relative; padding-left: 30px; margin: 9px 0; font-family: var(--font-sans); font-weight: 300; font-size: 15.5px; line-height: 1.55; color: var(--text-body); }
.gw-procon-pro .gw-procon-list li::before { content: ''; position: absolute; left: 6px; top: 5px; width: 6px; height: 11px; border: solid var(--fk-green-mid); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.gw-procon-con .gw-procon-list li::before { content: ''; position: absolute; left: 4px; top: 11px; width: 13px; height: 2.5px; border-radius: 2px; background: var(--sale-badge); }

/* 6. FAQ */
.gw-faq { margin: 40px 0; }
.gw-faq-title { font-family: var(--font-display); font-style: italic; font-weight: 500; letter-spacing: 1.5px; font-size: clamp(26px, 3vw, 34px); color: var(--fk-fir); margin: 0 0 8px; }
.gw-faq-item { border-bottom: 1px solid var(--border-hairline); }
.gw-faq-item summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font-family: var(--font-sans); font-weight: 600; font-size: 17px; color: var(--fk-fir); transition: color var(--dur-fast) var(--ease-soft); }
.gw-faq-item summary:hover { color: var(--fk-terracotta); }
.gw-faq-item summary::-webkit-details-marker { display: none; }
.gw-faq-item summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--fk-terracotta); border-bottom: 2px solid var(--fk-terracotta); transform: translateY(-70%) rotate(45deg); transition: transform var(--dur-base) var(--ease-soft); }
.gw-faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.gw-faq-item p { margin: 0; padding: 0 0 20px; font-family: var(--font-sans); font-weight: 300; font-size: 15.5px; line-height: 1.75; color: var(--text-body); }

/* 7. SOURCES */
.gw-sources { margin: 44px 0 0; padding-top: 22px; border-top: 1px solid var(--border-hairline); }
.gw-sources-details summary { cursor: pointer; list-style: none; font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); }
.gw-sources-details summary::-webkit-details-marker { display: none; }
.gw-sources-details summary::before { content: '+ '; color: var(--fk-terracotta); }
.gw-sources-details[open] summary::before { content: '– '; }
.gw-sources-list { margin: 14px 0 0; padding-left: 20px; }
.gw-sources-list li { font-family: var(--font-sans); font-size: 14px; font-weight: 300; color: var(--text-muted); margin: 6px 0; }
.gw-sources-list a { color: var(--fk-terracotta); word-break: break-word; }

/* 8. MODULE */
.gw-module { margin: 30px 0; padding: 18px 22px; background: var(--fk-cream-deep); border-left: 3px solid var(--fk-sage); border-radius: var(--radius-md); }
.gw-module-title { font-family: var(--font-sans); font-weight: 700; font-size: 14px; letter-spacing: 0.4px; color: var(--fk-fir); margin: 0 0 6px; }
.gw-module-content { font-family: var(--font-sans); font-weight: 300; font-size: 15px; line-height: 1.7; color: var(--text-body); }
.gw-module-content p { margin: 0; }
.gw-module--guide { border-left-color: var(--fk-terracotta); }
.gw-module--how-to { border-left-color: var(--fk-green-mid); }
.gw-module--comparison { border-left-color: var(--fk-rose); }
.gw-module--review { border-left-color: var(--fk-cream-yellow); }

/* 9. TL;DR */
.gw-tldr { margin: 0 0 40px; padding: 24px 28px; background: var(--grad-blush); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.gw-tldr-label { display: inline-block; margin-bottom: 8px; font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--fk-terracotta); }
.gw-tldr-text { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 20px; line-height: 1.55; color: var(--fk-fir); margin: 0; }

/* 10. RELATED POSTS WIDGET */
.gw-related-posts-widget { margin: 0; }
.gw-rp-heading { font-family: var(--font-display); font-style: italic; font-weight: 500; letter-spacing: 1px; font-size: 22px; color: var(--fk-fir); margin: 0 0 16px; }
.gw-rp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.gw-rp-link { display: flex; gap: 14px; align-items: center; text-decoration: none; }
.gw-rp-thumb { width: 66px; height: 66px; flex: none; border-radius: var(--radius-sm); object-fit: cover; background: var(--grad-image-b); display: block; }
.gw-rp-title { font-family: var(--font-sans); font-weight: 500; font-size: 14.5px; line-height: 1.35; color: var(--fk-fir); transition: color var(--dur-fast) var(--ease-soft); }
.gw-rp-link:hover .gw-rp-title { color: var(--fk-terracotta); }

/* 11. CODE */
.fk-prose pre, .fk-prose .wp-block-code { background: var(--fk-fir); color: var(--fk-cream); border-radius: var(--radius-md); padding: 18px 20px; margin: 28px 0; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 14px; line-height: 1.6; overflow-x: auto; }

/* Blog-Integration-Overrides:
 * - Lesespalte begrenzen (Prosa lief sonst über die volle Content-Breite ~1325px,
 *   viel zu lange Zeilen). Zentrierte Narrow-Spalte fuer angenehme Zeilenlaenge.
 * - GP setzt `.inside-article a{color:var(--main)}` (fir, 0,1,1) als spaete Dynamic-
 *   CSS und schlaegt `.fk-prose a` -> mit .inside-article-Prefix (0,2,1) coral erzwingen. */
.fk-prose { max-width: var(--container-narrow); margin-inline: auto; }
.inside-article .fk-prose a { color: var(--fk-coral) !important; }
.inside-article .fk-prose a:hover { color: var(--fk-coral-deep) !important; }

/* ==========================================================================
   Phase 3 — Blog-Archiv (0.2.24)
   Blog-Index (home.php) + Post-Archive (archive.php): Magazin-Card-Grid
   in der bestehenden .fk-blog-card-Optik (Grid .fk-posts-grid inkl.
   Media-Queries wird wiederverwendet, s. Home-Listen oben).
   ========================================================================== */

/* Section-Rhythmus + Container: .fk-blocks liefert den Full-width-Kontext,
   .fk-blog-archive constrained den Inhalt auf die Shared-Container-Breite. */
.fk-blog-archive {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 100px);
  padding-inline: clamp(24px, 5vw, 64px);
  box-sizing: border-box;
}

/* Archiv-h1 im Section-Head: Cormorant italic — die bestehende Head-Typo
   (.fk-blog-teaser ... h2) greift nur für h2, daher hier explizit fürs h1. */
.fk-blog-archive__head h1 {
  margin: 0.2em 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  font-size: clamp(32px, 4vw, 52px);
  color: var(--text-heading);
}
.fk-blog-archive__head .fk-home-section-head__lead {
  margin-top: 12px;
}
.fk-blog-archive__head .fk-home-section-head__lead p {
  margin: 0;
}

/* Pagination — gleiche Pill-Optik wie die Woo-Pagination (s. Abschnitt
   „3. PAGINATION" oben; Core rendert nav.pagination > .nav-links >
   a/span.page-numbers, daher eigener kompakter Block statt Merge).
   Achtung: GP filtert das navigation_markup_template — der
   <nav class="navigation pagination">-Wrapper fehlt im Output, es kommt
   nur .nav-links an, daher sitzt der Abstand direkt dort. */
.fk-blog-archive .nav-links {
  margin-top: clamp(32px, 5vw, 56px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.fk-blog-archive .page-numbers {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-soft);
  background: #fff;
  color: var(--fk-fir);
  text-decoration: none;
  transition: var(--transition-base);
}
.fk-blog-archive a.page-numbers:hover {
  background: var(--fk-sage-soft);
  border-color: var(--fk-sage-soft);
  color: var(--fk-fir);
}
.fk-blog-archive .page-numbers.current {
  background: var(--fk-fir);
  border-color: var(--fk-fir);
  color: var(--text-on-accent);
}
/* Prev/Next & Ellipsis als Text (keine Pill-Border). */
.fk-blog-archive .page-numbers.prev,
.fk-blog-archive .page-numbers.next,
.fk-blog-archive .page-numbers.dots {
  border-color: transparent;
  background: transparent;
}

/* ==========================================================================
   Phase 3 — Shop-Filter (FiboFilters Pro) (0.2.25)
   Sidebar-Filter #left-sidebar auf Woo-Archiven; <=1024px übernimmt
   FiboFilters' eigener Mobile-Modus (Button über dem Grid + Fullscreen-
   Overlay) — Breakpoints via inc/shop-filters.php auf 1024 gehoben.
   ========================================================================== */

/* ---- 1. Responsiv: Sidebar <=1024px ausblenden, Content volle Breite.
   Die Filter sind dort über FiboFilters' Mobile-Button erreichbar
   (.fibofilters-mobile-filters-container, injiziert via
   woocommerce_before_shop_loop). Überstimmt GPs Spaltenbreiten
   (.is-left-sidebar 20% / .content-area 80% aus dem Customizer-CSS). */
@media (max-width: 1024px) {
  body.woocommerce #left-sidebar,
  body.woocommerce-page #left-sidebar {
    display: none !important;
  }
  body.woocommerce .site-content .content-area,
  body.woocommerce-page .site-content .content-area {
    width: 100% !important;
  }
}
/* Horizontale (Tablet-)Filterleiste ist per Hook deaktiviert
   (tablet_filters_enabled=false) — Container samt reserviertem
   min-height (Inline-CSS des Plugins, 66px ab 1025px) wegblenden. */
body .fibofilters-horizontal-filters-container {
  display: none !important;
  min-height: 0 !important;
}

/* ---- 2. Markenfarben über die Plugin-Custom-Properties. FiboFilters'
   GP-Integration setzt --fibofilters--colors--base/--link auf var(--accent)
   (Customizer-Pink #d1637d) mit Selektor `body` (0,0,1) — body.woocommerce
   (0,1,1) gewinnt unabhängig von der Ladereihenfolge.
   base färbt den Preis-/Durchmesser-Slider (aktives Track-Segment,
   Handle-Border 4px auf weißem Handle, Histogramm) sowie ausgewählte
   Controls und Fokus-Outlines -> Sage; link färbt "mehr (N)"
   (.fibofilters-item--more-less) und Breadcrumb-Links -> Coral. */
body.woocommerce,
body.woocommerce-page {
  --fibofilters--colors--base: var(--fk-sage);
  --fibofilters--colors--link: var(--fk-coral);
  --fibofilters--colors-input-border: var(--fk-sage);
}
/* Ausgewählte Checkboxen/Radios: Fir statt base (Sage) als Füllung —
   Haken/Punkt (weißes SVG) bleibt kontraststark. */
.fibofilters-item--checkbox.fibofilters-selected > .fibofilters-item__interactive > .fibofilters-item__control,
.fibofilters-item--radio.fibofilters-selected > .fibofilters-item__interactive > .fibofilters-item__control {
  background: var(--fk-fir) !important;
}
/* Falls native Inputs im Spiel sind (Fallback): ebenfalls Fir. */
.fibofilters-block input[type="checkbox"],
.fibofilters-block input[type="radio"] {
  accent-color: var(--fk-fir);
}

/* ---- 3. Filter-Sektionen klarer trennen (Sidebar, vertikale Liste):
   Hairline-Trenner zwischen den Blöcken (erster ohne), ruhiger Rhythmus. */
.fibofilters-vertical-filters-container .fibofilters-block {
  margin: 0;
  padding-block: 18px;
  border-top: 1px solid var(--border-hairline);
  border-bottom: 0; /* Plugin-Default #f2f2f2 raus */
}
.fibofilters-vertical-filters-container .fibofilters-block:first-of-type {
  border-top: 0;
  padding-top: 0;
}
/* Headline: Display-Serif kursiv, Fir — 3 Klassen (0,3,0) überstimmen die
   Plugin-Regel .fibofilters-block__headline .fibofilters-block__headline-box-inner. */
.fibofilters-block .fibofilters-block__headline {
  margin-bottom: 12px;
}
.fibofilters-block .fibofilters-block__headline .fibofilters-block__headline-box-inner {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  color: var(--fk-fir);
}
/* Labels sans 14px, Counts muted 12px. */
.fibofilters-block .fibofilters-item__label {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-body);
}
.fibofilters-block .fibofilters-item__counter {
  font-size: 12px;
  color: var(--text-muted);
}

/* ---- 4. FiboFilters-interne Chrome-Buttons (Collapse-Chevron, Collapser
   in Term-Hierarchien, "mehr (N)", Overlay-Header) von der globalen
   Sekundär-Pill-Regel (M1, Spezifität 0,4,2 durch die :not()-Kette)
   ausnehmen. :not(#_) hebt die Spezifität auf 1,x,x ohne Markup-Zwang. */
body button.fibofilters-block__chevron-btn:not(#_),
body .fibofilters-collapser button.fibofilters-button:not(#_),
body button.fibofilters-item--more-less:not(#_),
body a.fibofilters-item--more-less:not(#_),
body button.fibofilters-mobile-overlay__header-clear:not(#_),
body button.fibofilters-mobile-overlay__header-close:not(#_) {
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--radius-xs) !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: inherit !important;
  box-shadow: none !important;
}
/* Collapse-Chevron (fibofilters_appearance_filters_collapsible=1):
   Coral, das Icon ist ein stroke-basiertes SVG (path M13 7 7 1 1 7). */
.fibofilters-block .fibofilters-block__chevron-btn {
  color: var(--fk-coral);
}
.fibofilters-block .fibofilters-block__chevron-btn svg,
.fibofilters-block .fibofilters-block__chevron-btn svg path {
  stroke: var(--fk-coral);
}

/* ---- 5. Mobile-Filter-Button(s) <=1024px: Pill in Sekundär-Optik
   (Sage-Soft-Füllung, Sage-Border, Fir-Text) statt Plugin-Grau.
   :not(#_) schlägt sowohl die Plugin-Regeln als auch die M1-Pill-Regel;
   der :before-Hover-Layer des Plugins (base-Farbfläche) entfällt. */
body .fibofilters-mobile-filters-container .fibofilters-filter-button:not(#_) {
  background: var(--fk-sage-soft) !important;
  color: var(--fk-fir) !important;
  border: 1.5px solid var(--fk-sage) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: none !important;
  padding: 10px 20px !important;
  font-family: var(--font-sans);
  font-size: 13px !important;
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  text-transform: uppercase !important;
  letter-spacing: var(--ls-button) !important;
  text-shadow: none !important;
  transition: var(--transition-base);
}
body .fibofilters-mobile-filters-container .fibofilters-filter-button:not(#_):hover {
  background: var(--fk-sage) !important;
  border-color: var(--fk-sage) !important;
  color: var(--fk-fir) !important;
  box-shadow: none !important;
}
body .fibofilters-mobile-filters-container .fibofilters-filter-button:before {
  content: none !important;
}

/* ===== Phase 3 — Header (inc/header.php, Design-Referenz Header.jsx) ===== */

/* ---- 1. Announcement-Band (über der Nav, scrollt beim Sticky weg) ---- */
.fk-announcement {
    background: var(--surface-band);
    color: var(--text-on-band);
    text-align: center;
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1.4;
    padding: 8px 16px;
}

/* ---- 2. Text-Wortmarke (ersetzt Logo-Bild in .site-logo, Desktop-Nav
   UND Mobile-Header). Kompakt genug für die GP-Navhöhe; Padding hält
   die Branding-Box in der Sticky-Nav ruhig. ---- */
.fk-wordmark,
.site-logo .fk-wordmark,
.navigation-branding .fk-wordmark,
.sticky-navigation-logo .fk-wordmark {
    /* Mehrfach-Selektor: GPs Branding-CSS setzt das Logo-<a> sonst auf
       display:block -> Sub-Zeile stand neben statt unter dem Namen. */
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    padding: 8px 0;
    text-decoration: none;
}
.fk-wordmark__name {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 30px;
    letter-spacing: 1px;
    /* GP-Nav vererbt text-transform:uppercase — Name bleibt gemischt. */
    text-transform: none;
    color: var(--fk-fir);
    transition: color var(--dur-fast, 150ms) var(--ease-soft, ease);
}
.fk-wordmark__sub {
    font-family: var(--font-sans);
    font-size: 9.5px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--fk-coral);
    margin-top: 3px;
    /* letter-spacing hängt hinter dem letzten Zeichen — optisch zentrieren */
    margin-right: -4px;
}
.fk-wordmark:hover .fk-wordmark__name {
    color: var(--fk-fir-soft);
}
@media (max-width: 768px) {
    .fk-wordmark__name {
        font-size: 24px;
    }
}

/* ---- 3. Shop-Mega-Panel (Kind-Items von Menü-Item 235) ----
   Tile-Bestandteile (Thumb + Beschreibung) sind per Default versteckt —
   im Slideout & in getoggelten Mobile-Menüs bleiben die Kind-Items so
   einfache Menüpunkte. Nur das Desktop-Panel (>=1025px, #site-navigation
   bzw. dessen Sticky-Klon #sticky-navigation) aktiviert die volle
   Tile-Optik. */
.fk-mega__thumb,
.fk-mega__desc {
    display: none;
}

@media (min-width: 1025px) {
    /* Panel-Fläche: GP-Default-Dropdown (200px-Spalte, Schatten, Hover-
       Farben) neutralisieren und als 3-Spalten-Grid aufziehen. GP zeigt/
       versteckt über left/-99999px + height:0/opacity — display bleibt
       frei, daher ist grid hier gefahrlos. */
    :is(#site-navigation, #sticky-navigation) li.menu-item-235 > .sub-menu {
        width: min(720px, 78vw);
        background: var(--fk-white);
        border: 1px solid var(--border-hairline);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        padding: 16px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
    /* GPs "sub-menu-left" verankert Dropdowns mit right:0 an der rechten
       li-Kante -> das 720px-Panel ragte links aus dem Viewport. Im
       SICHTBAR-Zustand links am Shop-Item ausrichten. Nur dort — GP
       versteckt Submenus ueber left:-99999px, ein globales left:0 wuerde
       das Panel permanent einblenden. */
    :is(#site-navigation, #sticky-navigation) li.menu-item-235:hover > .sub-menu,
    :is(#site-navigation, #sticky-navigation) li.menu-item-235.sfHover > .sub-menu {
        left: 0;
        right: auto;
        margin-top: 14px;
    }
    /* Hover-Bruecke: die 14px margin-Luecke gehoert weder zur li noch zum
       Panel -> :hover riss beim Rueberfahren ab. Unsichtbarer ::before am
       Panel ueberspannt die Luecke (14px + 1px Overlap); als Panel-Kind
       haelt er li:hover/sfHover am Leben, optisch bleibt die Distanz. */
    :is(#site-navigation, #sticky-navigation) li.menu-item-235 > .sub-menu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -15px;
        height: 16px;
    }
    :is(#site-navigation, #sticky-navigation) li.menu-item-235 > .sub-menu > li {
        float: none;
        width: auto;
        border: 0;
    }
    :is(#site-navigation, #sticky-navigation) li.menu-item-235 > .sub-menu > li > a.fk-mega__item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px;
        border-radius: var(--radius-md);
        background: transparent;
        color: inherit;
        text-transform: none;
        letter-spacing: normal;
        line-height: normal;
        height: auto;
        transition: background var(--dur-fast, 150ms) var(--ease-soft, ease);
    }
    :is(#site-navigation, #sticky-navigation) li.menu-item-235 > .sub-menu > li > a.fk-mega__item:hover,
    :is(#site-navigation, #sticky-navigation) li.menu-item-235 > .sub-menu > li.sfHover > a.fk-mega__item,
    :is(#site-navigation, #sticky-navigation) li.menu-item-235 > .sub-menu > li > a.fk-mega__item:focus {
        background: var(--fk-cream-deep);
        color: inherit;
    }

    /* Tile-Bestandteile im Panel aktivieren */
    :is(#site-navigation, #sticky-navigation) li.menu-item-235 > .sub-menu .fk-mega__thumb {
        display: block;
        flex: 0 0 62px;
        width: 62px;
        height: 62px;
        border-radius: var(--radius-sm);
        overflow: hidden;
    }
    :is(#site-navigation, #sticky-navigation) li.menu-item-235 > .sub-menu .fk-mega__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    :is(#site-navigation, #sticky-navigation) li.menu-item-235 > .sub-menu .fk-mega__thumb--doc {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--grad-image-d);
        color: var(--fk-coral);
    }
    :is(#site-navigation, #sticky-navigation) li.menu-item-235 > .sub-menu .fk-mega__text {
        display: block;
        min-width: 0;
    }
    :is(#site-navigation, #sticky-navigation) li.menu-item-235 > .sub-menu .fk-mega__name {
        display: block;
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 600;
        font-size: 19px;
        color: var(--fk-fir);
        line-height: 1.05;
    }
    :is(#site-navigation, #sticky-navigation) li.menu-item-235 > .sub-menu .fk-mega__desc {
        display: block;
        font-family: var(--font-sans);
        font-size: 12.5px;
        font-weight: 300;
        color: var(--text-muted);
        line-height: 1.4;
        margin-top: 4px;
    }

    /* GP-Chevron am Shop-Item: funktional lassen, Optik dezent (13px,
       coral bei Hover/offenem Panel). */
    :is(#site-navigation, #sticky-navigation) li.menu-item-235 > a .dropdown-menu-toggle .gp-icon svg {
        width: 13px;
        height: 13px;
    }
    :is(#site-navigation, #sticky-navigation) li.menu-item-235:hover > a .dropdown-menu-toggle,
    :is(#site-navigation, #sticky-navigation) li.menu-item-235.sfHover > a .dropdown-menu-toggle {
        color: var(--fk-coral);
    }
}

/* ---- 4. Nav-Icons Suche/Warenkorb (GP menu-bar-items) — Ghost-Icon-
   Buttons nach Header.jsx: Icon fir 20px, kein Hintergrund, Hover coral.
   ID-Scope (normal + sticky, s.o.) schlaegt GPs Customizer-Hover-Regel
   (.main-navigation .menu-bar-item:hover > a { background-color: … }). */
:is(#site-navigation, #sticky-navigation) .menu-bar-item > a {
    background: transparent;
    color: var(--fk-fir);
    transition: color var(--dur-fast, 150ms) var(--ease-soft, ease);
}
:is(#site-navigation, #sticky-navigation) .menu-bar-item:hover > a,
:is(#site-navigation, #sticky-navigation) .menu-bar-item.sfHover > a,
:is(#site-navigation, #sticky-navigation) .menu-bar-item > a:focus {
    background: transparent;
    color: var(--fk-coral);
}
:is(#site-navigation, #sticky-navigation) .menu-bar-item .gp-icon svg {
    width: 20px;
    height: 20px;
}
/* Warenkorb: nur Icon + Badge — die Preissumme (.amount) entfaellt. */
:is(#site-navigation, #sticky-navigation) .menu-bar-item a.cart-contents {
    position: relative;
}
:is(#site-navigation, #sticky-navigation) .menu-bar-item a.cart-contents .amount {
    display: none;
}
/* Badge oben rechts am Icon: 18px-Kreis. Signal-Farbe = SALE-Badge-Token
   (Peach + Fir-Text), identisch mit dem "Angebot!"-Chip auf den
   Produktkarten (.fk-product-card__badge / span.onsale) — EIN Peach-Signal
   im ganzen Shop (0.2.51). Anker = Link-Mitte (Icon sitzt zentriert in
   der GP-Navhoehe). */
:is(#site-navigation, #sticky-navigation) .menu-bar-item .number-of-items {
    position: absolute;
    left: calc(50% + 2px);
    top: calc(50% - 20px);
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    background: var(--sale-badge);
    color: var(--fk-fir);
    border-radius: 50%;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
}
/* Mobile-Header (GP #mobile-header): gleiche Signal-Farbe, ohne die
   Desktop-Positionierung zu erzwingen. */
#mobile-header a.cart-contents .number-of-items {
    background: var(--sale-badge);
    color: var(--fk-fir);
}
/* Leerer Warenkorb: GP rendert bei 0 Artikeln
   <span class="number-of-items no-items">0</span> (Klasse .no-items). Der
   Peach-Dot soll dann NICHT erscheinen. .no-items wird beim AJAX-Fragment-
   Refresh von GP/Woo gesetzt/entfernt -> Dot blendet sich live ein/aus.
   Höhere Spezifität (ID) als GPs Inline `.cart-contents>span.number-of-items
   {display:inline-block}` (0,2,1). */
:is(#site-navigation, #sticky-navigation) .menu-bar-item .number-of-items.no-items,
#mobile-header a.cart-contents .number-of-items.no-items {
    display: none !important;
}

/* ---- 5. GP-Such-Modal (#gp-search) branden: cream-getoenter Backdrop,
   Formular als weisse Karte, Pill-Input, runder Buy-Submit. !important
   nur dort, wo die Unified-Form-/Button-Regeln (M1/M2, selbst !important)
   sonst gewinnen wuerden. ---- */
#gp-search .gp-modal__overlay {
    background: rgba(246, 242, 233, 0.75);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
#gp-search .gp-modal__container {
    background: var(--fk-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
    padding: 20px;
}
/* GP faerbt das Such-<form> selbst sage — Streifen hinter Input/Button. */
#gp-search .search-modal-form {
    background: transparent;
}
#gp-search .search-modal-fields {
    display: flex;
    align-items: center;
    gap: 12px;
}
#gp-search input#search-modal-input {
    flex: 1 1 auto;
    background: var(--fk-white) !important;
    border: 1.5px solid var(--border-soft) !important;
    border-radius: var(--radius-pill) !important;
    padding: 14px 20px !important;
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--text-body);
}
#gp-search input#search-modal-input:focus {
    border-color: var(--fk-sage) !important;
    outline: none;
    box-shadow: none !important;
}
#gp-search .search-modal-fields button {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--fk-buy) !important;
    color: var(--fk-cream) !important;
    border: 0 !important;
    border-radius: 50% !important;
    padding: 0 !important;
    box-shadow: none !important;
    transform: none;
}
#gp-search .search-modal-fields button:hover,
#gp-search .search-modal-fields button:focus {
    background: var(--fk-buy-deep) !important;
    color: var(--fk-cream) !important;
    transform: none;
}
#gp-search .search-modal-fields button .gp-icon svg {
    width: 18px;
    height: 18px;
}

/* ===== Phase 3 — Breadcrumbs (WooCommerce, Shop-/Produktseiten) =====
   Basisfarbe fir = aktueller Titel (blanker Textknoten); Links coral;
   Trenner "/" wird in inc/woocommerce.php in span.fk-crumb-sep gewrappt
   und laeuft muted. */
.woocommerce nav.woocommerce-breadcrumb,
nav.woocommerce-breadcrumb {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 400;
    color: var(--fk-fir);
    margin: 0 0 20px;
}
.woocommerce nav.woocommerce-breadcrumb a,
nav.woocommerce-breadcrumb a {
    color: var(--fk-coral);
    text-decoration: none;
}
.woocommerce nav.woocommerce-breadcrumb a:hover,
nav.woocommerce-breadcrumb a:hover {
    color: var(--fk-coral-deep);
    text-decoration: none;
}
.woocommerce-breadcrumb .fk-crumb-sep {
    color: var(--text-muted);
}

/* ===== Phase 3 — Slide-out-Mini-Cart (Off-Canvas-Panel von rechts) =====
   Ersetzt das GP-Premium-Menu-Cart-Dropdown. Markup: inc/mini-cart.php
   (wp_footer), Verhalten: assets/js/fk-minicart.js. Der Fragment-
   Container div.widget_shopping_cart_content wird von Woos cart-
   fragments-JS KOMPLETT ersetzt (replaceWith) und liegt deshalb nackt
   im Wrapper .fk-minicart__body. */

/* GP-Premium-Dropdown deaktivieren (haengt als #wc-mini-cart / .wc-mini-cart
   unter jedem a.cart-contents in normaler + Sticky-Nav). */
.wc-mini-cart,
#wc-mini-cart {
    display: none !important;
}

/* -- Shell: Fixed-Overlay, unsichtbar bis body.fk-minicart-open -- */
.fk-minicart {
    position: fixed;
    inset: 0;
    z-index: 100001;
    visibility: hidden;
    transition: visibility 0s linear 300ms;
}
body.fk-minicart-open .fk-minicart {
    visibility: visible;
    transition-delay: 0s;
}
html.fk-minicart-open,
body.fk-minicart-open {
    overflow: hidden;
}

/* -- Backdrop: dunkler Fir-Scrim wie der Offcanvas-Menü-Schatten
   (rgba(46,67,65,0.45)) für konsistente Drawer-Optik. -- */
.fk-minicart__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(46, 67, 65, 0.45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 200ms ease;
}
body.fk-minicart-open .fk-minicart__backdrop {
    opacity: 1;
}

/* -- Panel: von rechts einschieben -- */
.fk-minicart__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(360px, 100vw);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    /* Optik-Vertrag mit dem Offcanvas-Menü: gleiche Cream-Fläche,
       gleiche Breite (360px), gleiche Hairline-Divider. */
    background: var(--fk-cream);
    box-shadow: var(--shadow-lg);
    border-radius: 22px 0 0 22px;
    transform: translateX(100%);
    transition: transform 300ms var(--ease-soft);
}
body.fk-minicart-open .fk-minicart__panel {
    transform: translateX(0);
}
@media (max-width: 480px) {
    .fk-minicart__panel {
        border-radius: 0;
    }
}

/* -- Head -- */
.fk-minicart__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px 16px;
    border-bottom: 1px solid var(--border-hairline);
    flex: 0 0 auto;
}
/* Titel = Wortmarken-Stil der Slideout-Kopfzeile (.fk-slideout__brand):
   display-italic, 23px, Fir, leichte Sperrung. */
.fk-minicart__title {
    margin: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 23px;
    letter-spacing: 0.5px;
    color: var(--fk-fir);
}
/* Close = Outline-Kreis wie der Slideout-Exit-Button (1.5px Fir, Hover
   coral, transparenter Grund). */
.fk-minicart__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 1.5px solid var(--fk-fir);
    border-radius: 50%;
    color: var(--fk-fir);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    transition: var(--transition-base);
}
.fk-minicart__close:hover {
    background: transparent;
    border-color: var(--fk-coral);
    color: var(--fk-coral);
    transform: none;
}

/* -- Body: scrollt, Head bleibt fix -- */
.fk-minicart__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 24px 24px;
}
.fk-minicart__body .widget_shopping_cart_content {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* -- Item-Liste -- */
.fk-minicart ul.woocommerce-mini-cart {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
}
/* ACHTUNG Woo-Markup: Das Thumbnail liegt IM Titel-Anker
   (<a>{img}Titeltext<p.delivery-time-info></a>), danach folgen
   dl.variation + span.quantity als Geschwister. Der Anker wird per
   display:contents aufgeloest, damit img, Titeltext (anonymes
   Grid-Item), Lieferzeit und Menge in EINEM li-Grid ausrichtbar sind
   (Design-CartDrawer: Thumb 60x60 links, Textspalte rechts,
   Entfernen-x vertikal zentriert, kein Float). */
.fk-minicart li.woocommerce-mini-cart-item {
    position: relative;
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    grid-auto-rows: min-content;
    align-content: center;
    gap: 3px 14px;
    margin: 0;
    padding: 14px 34px 14px 0;
    border-bottom: 1px solid var(--border-hairline);
}
.fk-minicart li.woocommerce-mini-cart-item > a:not(.remove) {
    display: contents;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: var(--fw-medium);
    text-transform: none;
    letter-spacing: 0;
    color: var(--fk-fir);
    text-decoration: none;
    line-height: 1.35;
}
.fk-minicart li.woocommerce-mini-cart-item > a:not(.remove):hover {
    color: var(--fk-coral);
}
/* Produkttitel: genau EINE Zeile, danach Ellipsis (kein Umbruch). Der Name
   wird per Filter (inc/mini-cart.php) in span.fk-mc-title gewrappt, damit der
   sonst nackte Textknoten als Grid-Item klemmbar ist. min-width:0 erlaubt das
   Schrumpfen unter die Content-Breite in der 1fr-Spalte. */
.fk-minicart li.woocommerce-mini-cart-item .fk-mc-title {
    grid-column: 2;
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.fk-minicart li.woocommerce-mini-cart-item img {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: center;
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    float: none !important;
    margin: 0 !important;
}
/* Menge x Preis ("1 × 29,90 €") */
.fk-minicart li.woocommerce-mini-cart-item .quantity {
    grid-column: 2;
    display: block;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: var(--fw-regular);
    color: var(--text-muted);
}
/* dl.variation dupliziert die Lieferzeit inkl. rohem Feldnamen-Label
   ("gzd-delivery_time:") — komplett ausblenden. */
.fk-minicart li.woocommerce-mini-cart-item dl.variation {
    display: none;
}
/* Remove-x (Woo a.remove): klein, coral, rechts vertikal zentriert. */
.fk-minicart li.woocommerce-mini-cart-item a.remove {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    float: none;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    color: var(--fk-coral) !important;
    background: transparent;
    border-radius: 50%;
    text-decoration: none;
    transition: var(--transition-base);
}
.fk-minicart li.woocommerce-mini-cart-item a.remove:hover {
    color: #fff !important;
    background: var(--fk-coral);
    transform: translateY(-50%);
}
/* Germanized-Zusatzinfos: dezent 12px. Lieferzeit gruen (lieferbar-
   Signal wie Cart/Checkout-Blocks), Rest muted. */
.fk-minicart .wc-gzd-cart-info,
.fk-minicart li.woocommerce-mini-cart-item p.delivery-time-info,
.fk-minicart li.woocommerce-mini-cart-item .shipping-costs-info,
.fk-minicart li.woocommerce-mini-cart-item .units-info,
.fk-minicart li.woocommerce-mini-cart-item .tax-info {
    grid-column: 2;
    display: block;
    margin: 0;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: var(--fw-regular);
    line-height: 1.4;
    color: var(--text-muted);
}
.fk-minicart li.woocommerce-mini-cart-item p.delivery-time-info {
    color: var(--fk-buy-sage);
}

/* -- Subtotal: Label leicht (300), Betrag semibold -- */
.fk-minicart p.woocommerce-mini-cart__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin: 0;
    padding: 16px 0 2px;
    border-top: 1px solid var(--fk-cream-deep);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: var(--fw-semibold);
    color: var(--fk-fir);
}
.fk-minicart p.woocommerce-mini-cart__total strong {
    font-weight: var(--fw-light);
    color: var(--fk-fir);
}
.fk-minicart p.woocommerce-mini-cart__total .amount {
    color: var(--fk-fir);
}
/* -- Germanized "zzgl. Versandkosten" (p.total.shipping-costs-cart-info
   .wc-gzd-total-mini-cart — traegt .total und erbt sonst grosse
   Summen-Styles): klein, muted, rechtsbuendig unter dem Betrag. -- */
.fk-minicart p.shipping-costs-cart-info,
.fk-minicart p.wc-gzd-total-mini-cart {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: var(--fw-regular);
    line-height: 1.4;
    color: var(--text-muted);
    text-align: right;
}
.fk-minicart p.shipping-costs-cart-info a,
.fk-minicart p.wc-gzd-total-mini-cart a {
    color: var(--text-muted);
    font-weight: var(--fw-regular);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.fk-minicart p.shipping-costs-cart-info a:hover,
.fk-minicart p.wc-gzd-total-mini-cart a:hover {
    color: var(--fk-coral);
}

/* -- CTAs: gestapelt, Full-Width. Ueberschreibt die globalen
   body.woocommerce a.button-Regeln (M1) mit hoeherer Spezifitaet. -- */
.fk-minicart p.woocommerce-mini-cart__buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding-top: 4px;
}
body .fk-minicart .woocommerce-mini-cart__buttons a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 14px 28px !important;
    border-radius: var(--radius-pill) !important;
    font-family: var(--font-sans);
    font-size: var(--fs-small) !important;
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-button) !important;
    text-transform: uppercase !important;
    text-decoration: none;
    line-height: 1;
    transition: var(--transition-base);
}
/* Primary: "Kasse" (a.button.checkout) — Fir-Fuellung, Cream-Text. */
body .fk-minicart .woocommerce-mini-cart__buttons a.button.checkout {
    background: var(--fk-fir) !important;
    color: var(--fk-cream) !important;
    border: 1.5px solid var(--fk-fir) !important;
    border-color: var(--fk-fir) !important;
    box-shadow: 0 8px 20px var(--fk-buy-glow);
}
body .fk-minicart .woocommerce-mini-cart__buttons a.button.checkout:hover {
    background: var(--fk-fir-soft) !important;
    border-color: var(--fk-fir-soft) !important;
    color: var(--fk-cream) !important;
    transform: translateY(-2px);
}
/* Sekundaer: "Warenkorb anzeigen" — Sage-Soft. */
body .fk-minicart .woocommerce-mini-cart__buttons a.button:not(.checkout) {
    background: var(--fk-sage-soft) !important;
    color: var(--fk-fir) !important;
    border: 1.5px solid var(--fk-sage) !important;
    border-color: var(--fk-sage) !important;
}
body .fk-minicart .woocommerce-mini-cart__buttons a.button:not(.checkout):hover {
    background: var(--fk-sage) !important;
    border-color: var(--fk-sage) !important;
    color: var(--fk-fir) !important;
    transform: translateY(-2px);
}

/* -- Leerer Warenkorb -- */
.fk-minicart .woocommerce-mini-cart__empty-message {
    margin: 0;
    padding: 48px 16px;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--text-muted);
}

/* ==========================================================================
   Phase 3 — Blog-Einzelseite (single.php, 0.2.37)
   Design-Quelle: design/reference/BlogPostScreen.jsx. Furniture rund um den
   bereits gestylten Artikel-Body (.fk-prose/gw-*, s. o.): Reading-Progress,
   Hero (Meta-Karte + rundes Featured Image), Body-Grid mit Sticky-Sidebar
   (TOC / Autorin / „Passend dazu"), Autorinnen-Box, Related-Posts-Grid
   (.fk-rp-grid als Karten-Variante der gw-rp-Vertragsklassen — die
   gw-rp-Sidebar-Styles oben bleiben unangetastet).
   ========================================================================== */

/* GPs one-container-Padding (50px) raus — der Hero sitzt bündig unterm
   Header; die Sektionen bringen ihr eigenes Padding mit. */
.single-post .site-content {
  padding: 0;
}

/* Easy-TOC-Kästchen im Content unterdrücken (Filter in inc/blog.php schaltet
   den the_content-Filter ab; CSS als Gürtel-und-Hosenträger, z. B. Widget). */
.single-post .ez-toc-container,
.single-post #ez-toc-container {
  display: none !important;
}

/* Prosa-Spalte: die Grid-Spalte begrenzt bereits (minmax(0,1fr) neben 300px
   Sidebar), die zentrierte Narrow-Begrenzung aus dem GP-Default-Layout
   wuerde die Spalte sonst nochmal einengen. */
.fk-single__content .fk-prose {
  max-width: none;
}

/* ---- Reading-Progress-Bar (Füllung via assets/js/fk-blogpost.js) ---- */
.fk-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(46, 67, 65, 0.08);
  z-index: 2000; /* über GPs Sticky-Header */
  pointer-events: none;
}
.fk-progress__bar {
  height: 100%;
  width: 0;
  background: var(--fk-terracotta);
  transition: width 80ms linear;
}

/* ---- Avatar (get_avatar-Bild oder Initialen-Kreis, inc/blog.php) ---- */
.fk-avatar {
  width: var(--fk-avatar-size, 44px);
  height: var(--fk-avatar-size, 44px);
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
span.fk-avatar--initials {
  display: grid;
  place-items: center;
  background: var(--grad-image-c);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: calc(var(--fk-avatar-size, 44px) * 0.4);
  color: var(--fk-fir);
  line-height: 1;
}

/* ---- Hero (grad-hero, 2-Spalten auto-fit) ---- */
.fk-single-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--grad-hero);
  overflow: hidden;
}
.fk-single-hero__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: clamp(44px, 6vw, 88px) clamp(24px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  box-sizing: border-box;
}
.fk-single-hero__card {
  background: var(--fk-cream-yellow);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: clamp(30px, 3.4vw, 52px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.fk-single-hero__meta {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fk-single-hero__pill,
.fk-single-hero__pill:visited {
  display: inline-block;
  border: 1.5px solid var(--fk-fir);
  border-radius: var(--radius-pill);
  padding: 6px 20px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fk-fir);
  text-decoration: none;
  transition: var(--transition-base);
}
.fk-single-hero__pill:hover {
  background: var(--fk-fir);
  color: var(--fk-cream);
}
h1.fk-single-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 1.5px;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.12;
  color: var(--fk-fir);
}
.fk-single-hero__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.fk-single-hero__author-name {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--fk-fir);
}
.fk-single-hero__mail,
.fk-single-hero__mail:visited {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--fk-fir);
  display: grid;
  place-items: center;
  color: var(--fk-fir);
  transition: var(--transition-base);
}
.fk-single-hero__mail:hover {
  background: var(--fk-fir);
  color: var(--fk-cream);
}
.fk-single-hero__media {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}
.fk-single-hero__ring {
  position: absolute;
  width: min(84%, 500px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid var(--fk-terracotta-soft);
  transform: translate(-8%, -8%);
}
.fk-single-hero__img {
  position: relative;
  width: min(92%, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: translateX(5%);
  background: var(--grad-image-b);
}
.fk-single-hero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0; /* .fk-prose-img-Radius greift hier nicht, sicherheitshalber */
}

/* ---- Body + Sticky-Sidebar ---- */
.fk-single__body {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: clamp(72px, 9vw, 104px) clamp(24px, 5vw, 64px) clamp(64px, 9vw, 96px);
  box-sizing: border-box;
}
.fk-single__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
.fk-single__content {
  min-width: 0;
}
.fk-single-sidebar {
  position: sticky;
  top: 118px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
@media (max-width: 1024px) {
  .fk-single__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .fk-single-sidebar {
    position: static;
  }
}

/* -- Sidebar: TOC „Inhalt" -- */
.fk-single-toc {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fk-single-toc__label,
.fk-single-shoplist__label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fk-single-toc a.fk-single-toc__link {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.4;
  text-decoration: none;
  padding-left: 14px;
  border-left: 2px solid var(--border-hairline);
  color: var(--text-body);
  transition: var(--transition-base);
}
.fk-single-toc a.fk-single-toc__link:hover {
  color: var(--fk-terracotta);
}
.fk-single-toc a.fk-single-toc__link.is-active {
  font-weight: 600;
  border-left-color: var(--fk-terracotta);
  color: var(--fk-terracotta);
}

/* -- Sidebar: Autorin-Karte -- */
.fk-single-sidebar__author {
  background: var(--fk-cream-soft);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fk-single-sidebar__author-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fk-single-sidebar__author-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  color: var(--fk-fir);
  line-height: 1;
}
.fk-single-sidebar__author-role {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
}
.fk-single-sidebar__author-bio {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-body);
}

/* -- Sidebar: „Passend dazu" (2 kompakte Produktkarten) -- */
.fk-single-shoplist {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fk-single-shoplist__card {
  display: flex;
  gap: 14px;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  padding: 12px;
  box-shadow: var(--shadow-xs);
}
a.fk-single-shoplist__media {
  width: 78px;
  height: 78px;
  flex: none;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--grad-image-a);
  display: block;
}
a.fk-single-shoplist__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fk-single-shoplist__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
a.fk-single-shoplist__title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--fk-fir);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
a.fk-single-shoplist__title:hover {
  color: var(--fk-terracotta);
}
.fk-single-shoplist__price {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--fk-fir);
}
.fk-single-shoplist__price del {
  color: var(--text-muted);
  font-weight: 400;
  margin-right: 6px;
}
/* Button „Kaufen" — hohe Spezifität gegen GPs a.button-Altregeln
   (bekannter Kaskaden-Gegner: :not()-Button-Regeln). */
body .fk-single-sidebar a.fk-single-shoplist__btn {
  align-self: flex-start;
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fk-cream);
  background: var(--fk-terracotta);
  border: none;
  border-radius: var(--radius-pill);
  text-decoration: none;
  line-height: 1;
  transition: var(--transition-base);
}
body .fk-single-sidebar a.fk-single-shoplist__btn:hover {
  background: var(--fk-terracotta-deep);
  color: var(--fk-cream);
  transform: translateY(-1px);
}
/* WCs nach dem AJAX-Add eingesetzter „Warenkorb anzeigen"-Link */
.fk-single-shoplist__body a.added_to_cart {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fk-terracotta);
  text-decoration: none;
}

/* ---- Autorinnen-Box am Content-Ende ---- */
.fk-single-authorbox {
  margin-top: 48px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--grad-sage);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 32px);
}
.fk-single-authorbox__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fk-single-authorbox__eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--fk-terracotta);
}
.fk-single-authorbox__name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  color: var(--fk-fir);
  line-height: 1;
}
.fk-single-authorbox__bio {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-body);
  max-width: 460px;
}
.fk-single-authorbox a.fk-single-authorbox__link {
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--fk-terracotta);
  text-decoration: none;
  border: none;
  transition: var(--transition-base);
}
.fk-single-authorbox a.fk-single-authorbox__link::after {
  content: ' ›';
}
.fk-single-authorbox a.fk-single-authorbox__link:hover {
  color: var(--fk-terracotta-deep);
}
@media (max-width: 600px) {
  .fk-single-authorbox {
    flex-direction: column;
  }
}

/* ---- Related-Posts-Sektion (volle Breite, cream) ----
   .fk-rp-grid = Karten-Grid-Variante der gw-rp-Vertragsklassen; die
   gw-rp-Sidebar-Styles (Abschnitt 10 oben) bleiben unverändert gültig. */
.fk-single-related {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--fk-cream);
}
.fk-single-related__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: clamp(64px, 9vw, 96px) clamp(24px, 5vw, 64px);
  box-sizing: border-box;
}
.fk-rp-grid .gw-rp-heading {
  font-size: clamp(26px, 3vw, 36px);
  text-align: center;
  margin: 0 0 40px;
}
.fk-rp-grid .gw-rp-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.fk-rp-grid .gw-rp-item {
  margin: 0;
}
.fk-rp-grid a.gw-rp-link {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  height: 100%;
  background: var(--surface-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: var(--transition-base);
}
.fk-rp-grid a.gw-rp-link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.fk-rp-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--grad-image-b);
  overflow: hidden;
}
.fk-rp-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fk-rp-card__body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fk-rp-card__eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--fk-terracotta);
}
.fk-rp-grid .gw-rp-title {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--fk-fir);
}

/* ==========================================================================
   Phase 3 — Blumen-Lexikon-Einzelseite (single-blume.php, 0.2.38)
   Design-Quelle: design/reference/FlowerScreen.jsx. Hero (Eyebrow + Titel +
   Fakten-Karte, rundes Blumenbild ~430px mit Offset-Ring), Body-Grid mit
   Sticky-Sidebar „Kränze mit <Blume>" (nutzt die fk-single__*/fk-single-
   shoplist-Klassen der Blog-Einzelseite oben mit), „Weitere Blumen"-Chips
   auf cream-deep. Plus: Modal-Nachschärfung für den formatierten
   [produkt_blumen]-Auszug (.fk-prose in #fkModalExcerpt).
   ========================================================================== */

/* GPs one-container-Padding raus — der Hero sitzt bündig unterm Header
   (gleicher Kaskaden-Gegner wie .single-post, s. o.). */
.single-blume .site-content {
  padding: 0;
}

/* Easy-TOC-Kästchen unterdrücken (Filter in inc/blume.php; CSS als
   Gürtel-und-Hosenträger wie auf .single-post). */
.single-blume .ez-toc-container,
.single-blume #ez-toc-container {
  display: none !important;
}

/* ---- Hero (grad-hero, 2-Spalten auto-fit, Full-Bleed via 100vw-Trick) ---- */
.fk-blume-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--grad-hero);
  overflow: hidden;
}
.fk-blume-hero__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: clamp(44px, 6vw, 80px) clamp(24px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  box-sizing: border-box;
}
.fk-blume-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.fk-blume-hero__eyebrow {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--fk-coral);
}
h1.fk-blume-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 2px;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  color: var(--fk-fir);
}

/* -- Fakten-Karte (cream-yellow; Inhalt aus dem ersten Content-Absatz,
   inc/blume.php) -- */
dl.fk-blume-facts {
  margin: 0;
  background: var(--fk-cream-yellow);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: flex-start;
}
.fk-blume-facts__row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}
.fk-blume-facts__label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--fk-terracotta);
  flex: none;
}
.fk-blume-facts__value {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--fk-fir);
  line-height: 1.4;
}
.fk-blume-facts__value.is-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  font-weight: 500;
}

/* -- Rundes Blumenbild mit Offset-Ring (kleiner als Blog-Hero: ~430px) -- */
.fk-blume-hero__media {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 260px;
}
.fk-blume-hero__ring {
  position: absolute;
  width: min(78%, 380px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid var(--fk-terracotta-soft);
  transform: translate(-7%, -7%);
}
.fk-blume-hero__img {
  position: relative;
  width: min(86%, 430px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: translateX(4%);
  background: var(--grad-image-b);
}
.fk-blume-hero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0; /* .fk-prose-img-Radius greift hier nicht, sicherheitshalber */
}

/* ---- Sidebar: Textlink „Alle Kränze ansehen" unter den Produktkarten ---- */
.fk-blume-sidebar a.fk-blume-sidebar__all {
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--fk-terracotta);
  text-decoration: none;
  border: none;
  transition: var(--transition-base);
}
.fk-blume-sidebar a.fk-blume-sidebar__all::after {
  content: ' ›';
}
.fk-blume-sidebar a.fk-blume-sidebar__all:hover {
  color: var(--fk-terracotta-deep);
}

/* ---- „Weitere Blumen aus dem Lexikon" (cream-deep, runde 110px-Chips) ---- */
.fk-blume-more {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--fk-cream-deep);
}
.fk-blume-more__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: clamp(56px, 8vw, 88px) clamp(24px, 5vw, 64px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fk-blume-more__eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--fk-terracotta);
}
h2.fk-blume-more__title {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 1.5px;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.2;
  color: var(--fk-fir);
  text-align: center;
}
.fk-blume-more__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(24px, 4vw, 48px);
  margin-top: clamp(36px, 5vw, 56px);
}
a.fk-blume-more__chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  width: 128px;
}
.fk-blume-more__media {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--grad-image-b);
  box-shadow: var(--shadow-xs);
  border: 3px solid var(--fk-white);
  display: block;
  transition: transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);
}
.fk-blume-more__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
a.fk-blume-more__chip:hover .fk-blume-more__media {
  transform: scale(1.06);
  box-shadow: var(--shadow-md);
}
.fk-blume-more__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 18px;
  color: var(--fk-fir);
  text-align: center;
  line-height: 1.3;
}

/* ---- [produkt_blumen]-Modal: formatierter Auszug (.fk-prose) ----
   #fkModalExcerpt ist jetzt ein <div class="fk-prose"> (inc/shortcodes.php);
   die .fk-prose-Basistypo (17.5px, narrow-Zentrierung) ist fürs Modal zu
   groß — hier per ID-Spezifität auf Modal-Maß bringen. Scrollbarkeit
   (max-height 40vh, overflow auto) kommt bereits aus dem bestehenden
   #fkModalExcerpt-Block in M4 oben. */
.fk-modal-content #fkModalExcerpt.fk-prose {
  max-width: none;
  font-size: 15px;
  line-height: 1.7;
  padding-right: 6px; /* Luft zwischen Text und Scrollbar */
}
.fk-modal-content #fkModalExcerpt.fk-prose h2 {
  font-size: 21px;
  letter-spacing: 1px;
  margin: 1.2em 0 0.4em;
}
.fk-modal-content #fkModalExcerpt.fk-prose h3 {
  font-size: 17px;
  margin: 1.2em 0 0.35em;
}
.fk-modal-content #fkModalExcerpt.fk-prose > *:first-child {
  margin-top: 0;
}

/* ===== Phase 3 — Über-uns-Seite (patterns/about.php, Seite 236) =====
 * 1:1 nach design/reference/AboutScreen.jsx: Hero (grad-hero), Intro
 * 2-Spalten mit Foto, Warum-Sektion (grad-sage) mit Werte-Karten, Video
 * 16:9, Galerie-Grid mit Hover-Zoom, CTA-Band (grad-blush).
 * Rezept wie die Home-Patterns: äußere Gruppe alignfull (100vw-Bleed via
 * .fk-blocks .alignfull), Layout-CSS auf .wp-block-group__inner-container
 * (Inner-Container-Falle), CORE-Blöcke, nur Tokens. */

/* Innencontent der Sektionen auf Design-Shell constrainen (AboutScreen:
   --container-wide + clamp-Padding). */
.fk-about-intro > .wp-block-group__inner-container,
.fk-about-why > .wp-block-group__inner-container,
.fk-about-video > .wp-block-group__inner-container,
.fk-about-gallery > .wp-block-group__inner-container,
.fk-about-cta > .wp-block-group__inner-container {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: clamp(24px, 5vw, 64px);
  box-sizing: border-box;
}

/* Von WP auf die Inner-Container-Kinder gesetzte content-size-Zentrierung
   für die Grids neutralisieren (siehe fk-usp__grid). */
.fk-about-intro__grid,
.fk-about-why__grid,
.fk-about-gallery__grid {
  max-width: none;
  margin-inline: 0;
}

/* Display-Italic-Headlines der Sektionsköpfe (wie fk-usp). */
.fk-about-why .fk-home-section-head h2,
.fk-about-video .fk-home-section-head h2,
.fk-about-gallery .fk-home-section-head h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--text-heading);
}

/* ---- Hero ---- */
.fk-about-hero {
  background: var(--grad-hero);
  text-align: center;
  padding: clamp(64px, 9vw, 110px) 24px clamp(48px, 6vw, 72px);
}
.fk-about-hero .fk-eyebrow {
  margin: 0;
  font-size: 13px;
  letter-spacing: 4px;
  line-height: 1.3;
}
.fk-about-hero h1 {
  margin: 14px auto 0;
  max-width: none;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-medium);
  letter-spacing: 2px;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.05;
  color: var(--fk-fir);
}

/* ---- Intro: Foto + persönlicher Text + Zitat ---- */
.fk-about-intro {
  padding-block: clamp(56px, 8vw, 96px);
}
.fk-about-intro__grid {
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.fk-about-intro__photo {
  margin: 0;
}
.fk-about-intro__photo img {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  background: var(--grad-image-c);
}
/* Text-Stack: Gap liegt (Inner-Container-Falle) auf dem von WP eingezogenen
   Inner-Container, nicht auf der äußeren Gruppe. */
.fk-about-intro__text > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: none;
  margin-inline: 0;
}
.fk-about-intro__text p {
  margin: 0;
  font-weight: var(--fw-light);
  font-size: 17px;
  line-height: 1.8;
  color: var(--text-body);
}
.fk-about-intro__text .fk-about-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.5;
  color: var(--fk-fir);
  font-weight: var(--fw-medium);
}
.fk-about-intro__text .is-style-fk-lesetipp {
  margin: 8px 0 0;
  font-size: var(--fs-medium);
  line-height: 1.5;
}

/* ---- Warum-Sektion (grad-sage) + Werte-Karten ---- */
.fk-about-why {
  background: var(--grad-sage);
  padding-block: clamp(64px, 9vw, 110px);
}
.fk-about-why .fk-home-section-head {
  margin-bottom: 0;
}
.fk-about-why__copy {
  max-width: 640px;
  margin: clamp(20px, 3vw, 28px) auto 0;
  text-align: center;
  font-weight: var(--fw-light);
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--text-body);
}
.fk-about-why__copy strong {
  font-weight: var(--fw-semibold);
  color: var(--fk-fir);
}
.fk-about-why__grid {
  margin-top: clamp(44px, 6vw, 72px);
  gap: clamp(28px, 4vw, 56px);
}
.fk-about-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  /* 1fr = minmax(auto,1fr): lange Titel dürfen die Spalten nicht aufdrücken. */
  min-width: 0;
}
.fk-about-value__icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-circle);
  background: var(--fk-white);
  color: var(--fk-terracotta);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-xs);
}
.fk-about-value__icon svg {
  width: 28px;
  height: 28px;
}
.fk-about-value h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 22px;
  line-height: 1.3;
  color: var(--fk-fir);
}
.fk-about-value p {
  margin: 0;
  max-width: 280px;
  font-weight: var(--fw-light);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-body);
}

/* ---- Video-Sektion (16:9, YouTube-nocookie-Iframe aus dem Alt-Content) ---- */
.fk-about-video {
  padding-block: clamp(64px, 9vw, 110px);
}
.fk-about-video__frame {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--grad-image-b);
}
.fk-about-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---- Galerie (cream-deep, Grid mit Hover-Zoom) ---- */
.fk-about-gallery {
  background: var(--fk-cream-deep);
  padding-block: clamp(64px, 9vw, 110px);
}
.fk-about-gallery__grid > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: 220px;
  grid-auto-flow: dense;
  gap: clamp(16px, 2vw, 24px);
  max-width: none;
  margin-inline: 0;
}
.fk-about-gallery__item {
  margin: 0;
  height: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.fk-about-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0; /* Radius liegt auf der figure (overflow:hidden) */
  transition: transform var(--dur-slow) var(--ease-soft);
}
.fk-about-gallery__item:hover img {
  transform: scale(1.045);
}
.fk-about-gallery__item--tall {
  grid-row: span 2;
}
.fk-about-gallery__item--wide {
  grid-column: span 2;
}
@media (max-width: 600px) {
  /* Einspaltig darf nichts über die (einzige) Spalte hinausspannen. */
  .fk-about-gallery__item--wide {
    grid-column: span 1;
  }
  .fk-about-gallery__item--tall {
    grid-row: span 1;
  }
}

/* ---- CTA-Band (grad-blush) ---- */
.fk-about-cta {
  background: var(--grad-blush);
  padding-block: clamp(64px, 9vw, 110px);
  text-align: center;
}
.fk-about-cta h2 {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-medium);
  letter-spacing: 2px;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.1;
  color: var(--fk-fir);
}
.fk-about-cta p {
  max-width: 480px;
  margin: 22px auto 0;
  font-weight: var(--fw-light);
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--text-body);
}
.fk-about-cta .wp-block-buttons {
  margin-top: 22px;
  display: flex;
  justify-content: center;
}

/* ==========================================================================
 * SHOP-LANDING-PAGES  (fk-landing-*)  — Seiten 5298 /handgemachte-deko/ &
 * 2253 /diy-anleitungen/. Zwei Patterns (patterns/landing-deko.php,
 * landing-diy.php) auf page-fullwidth-blocks.php. Gleiche Grammatik wie
 * about.php: äußere Gruppe alignfull (100vw-Bleed via .fk-blocks .alignfull),
 * Layout auf den von WP injizierten .wp-block-group__inner-container
 * (Inner-Container-Falle), CORE-Blöcke, nur Tokens.
 * ========================================================================== */

/* Sektions-Innencontent auf Design-Shell (container-wide + clamp-Padding). */
.fk-landing-hero > .wp-block-group__inner-container,
.fk-landing-products > .wp-block-group__inner-container,
.fk-landing-info > .wp-block-group__inner-container,
.fk-landing-prose > .wp-block-group__inner-container,
.fk-landing-cta > .wp-block-group__inner-container {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: clamp(24px, 5vw, 64px);
  box-sizing: border-box;
}

/* ---- Hero (grad-hero, zentriert) ---- */
.fk-landing-hero {
  background: var(--grad-hero);
  text-align: center;
  padding-block: clamp(64px, 9vw, 110px) clamp(48px, 6vw, 72px);
}
.fk-landing-hero .fk-eyebrow {
  margin: 0;
  font-size: 13px;
  letter-spacing: 4px;
  line-height: 1.3;
}
.fk-landing-hero h1 {
  margin: 14px auto 0;
  max-width: 16ch;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-medium);
  letter-spacing: 2px;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.05;
  color: var(--fk-fir);
}
.fk-landing-hero__lead {
  max-width: 640px;
  margin: 22px auto 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-body);
}
.fk-landing-hero__lead strong {
  font-weight: var(--fw-semibold);
  color: var(--fk-fir);
}

/* ---- Produkt-Grid-Sektion ---- */
.fk-landing-products {
  padding-block: clamp(56px, 8vw, 100px);
}
.fk-landing-products .fk-home-section-head {
  margin-bottom: clamp(36px, 5vw, 56px);
}
.fk-landing-products .fk-home-section-head h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--text-heading);
}
/* Woo-Shortcode-Wrapper über die volle container-wide-Breite ziehen (die
   constrained-Gruppe würde ihn sonst auf GP-contentSize zentrieren). */
.fk-landing-products .woocommerce {
  max-width: none;
  margin-inline: 0;
}
/* [products]-Loop als 3-Spalten-Grid erzwingen (wie fk-home-products; die
   Woo/GP-Premium-Float-Regeln laden nach dieser Datei). */
.fk-landing-products .products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(24px, 3vw, 40px) !important;
  width: 100% !important;
  margin: 0 !important;
  list-style: none;
  padding: 0;
}
.fk-landing-products .products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}
.fk-landing-products .products::before,
.fk-landing-products .products::after {
  content: none !important;
  display: none !important;
}
@media (max-width: 900px) {
  .fk-landing-products .products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 600px) {
  .fk-landing-products .products {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
/* PDF-Download-Notice unter dem Grid (nur DIY-Seite). */
.fk-landing-notice {
  max-width: 760px;
  margin: clamp(28px, 4vw, 44px) auto 0;
}

/* ---- Info-Sektionen mit Icon-Checkliste (alternierende Flächen) ---- */
.fk-landing-info {
  padding-block: clamp(56px, 8vw, 100px);
}
.fk-landing-info--sage {
  background: var(--grad-sage);
}
.fk-landing-info--cream {
  background: var(--fk-cream-deep);
}
.fk-landing-info__title {
  margin: 0 auto;
  max-width: 22ch;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-medium);
  letter-spacing: 1.5px;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.15;
  color: var(--fk-fir);
}
.fk-landing-checks {
  list-style: none;
  margin: clamp(32px, 5vw, 52px) auto 0;
  padding: 0;
  max-width: 860px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px clamp(28px, 4vw, 56px);
}
.fk-landing-checks li {
  position: relative;
  margin: 0;
  padding: 3px 0 3px 46px;
  min-height: 30px;
  display: flex;
  align-items: center;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--text-body);
}
.fk-landing-checks li strong {
  font-weight: var(--fw-semibold);
  color: var(--fk-fir);
}
/* Häkchen-Kreis (weiße Scheibe, coral Haken) — Stil wie Home-USP-Icons. */
.fk-landing-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: var(--radius-circle);
  background: var(--fk-white) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23a94e33'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%206%209%2017l-5-5'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
  box-shadow: var(--shadow-xs);
}
@media (max-width: 768px) {
  .fk-landing-checks {
    grid-template-columns: minmax(0, 1fr);
    max-width: 520px;
  }
}

/* ---- Prosa-Sektion (container-narrow, fk-prose-Typo) ---- */
.fk-landing-prose {
  padding-block: clamp(56px, 8vw, 96px);
}
.fk-landing-prose > .wp-block-group__inner-container {
  max-width: var(--container-narrow);
  padding-inline: clamp(24px, 5vw, 40px);
}
.fk-landing-prose .fk-prose h2:first-child,
.fk-landing-prose .fk-prose > .wp-block-group__inner-container > h2:first-child {
  margin-top: 0;
}
.fk-landing-prose .fk-prose .wp-block-separator {
  margin: 2.2em auto;
  border: 0;
  border-top: 1px solid var(--border-hairline);
  max-width: 100%;
}

/* ---- CTA-Band (grad-blush) ---- */
.fk-landing-cta {
  background: var(--grad-blush);
  padding-block: clamp(64px, 9vw, 110px);
  text-align: center;
}
.fk-landing-cta h2 {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-medium);
  letter-spacing: 2px;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.1;
  color: var(--fk-fir);
}
.fk-landing-cta p {
  max-width: 480px;
  margin: 22px auto 0;
  font-weight: var(--fw-light);
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--text-body);
}
.fk-landing-cta .wp-block-buttons {
  margin-top: 22px;
  display: flex;
  justify-content: center;
}

/* ==========================================================================
   Phase 3 — Blog-Single Fixes (0.2.41)
   1. Alt-CTA .fk-cta-wrapper (Content-Markup in 46 Altbeiträgen, nur CSS):
      Karte auf grad-blush wie die CTA-Bänder (About/Landing), florale Deko-
      SVGs unten links/rechts, Button in Primary-Buy-Optik (fir-soft Pill).
   2. Tabellen: alle .fk-prose .wp-block-table wie .gw-table-scroll behandeln
      (Card + overflow-x) — Ursache: .fk-prose th { white-space: nowrap } +
      has-fixed-layout ließ lange Header in Nachbarzellen laufen.
   3. Mobile-TOC: <details class="fk-toc-mobile"> über dem Content (< 1024px),
      Sidebar-TOC + Sidebar-Autorin-Karte werden dort versteckt (Autorin ist
      doppelt zur Authorbox am Content-Ende).
   ========================================================================== */

/* ---- 1. Alt-CTA .fk-cta-wrapper ---- */
.fk-prose .fk-cta-wrapper {
  position: relative;
  overflow: hidden;
  margin: 40px 0;
  padding: clamp(32px, 5vw, 56px);
  background: var(--grad-blush);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  text-align: center;
}
/* Florale Deko-SVGs (Inline-Fill-Farben bleiben — reine Deko im Content). */
.fk-cta-wrapper .fk-floral-left,
.fk-cta-wrapper .fk-floral-right {
  position: absolute;
  bottom: -4px;
  width: 80px;
  height: 160px;
  pointer-events: none;
}
.fk-cta-wrapper .fk-floral-left {
  left: clamp(8px, 3vw, 32px);
}
.fk-cta-wrapper .fk-floral-right {
  right: clamp(8px, 3vw, 32px);
  transform: scaleX(-1);
}
@media (max-width: 640px) {
  .fk-cta-wrapper .fk-floral-left,
  .fk-cta-wrapper .fk-floral-right {
    display: none;
  }
}
.fk-cta-wrapper .fk-cta-content {
  position: relative; /* über den Floral-SVGs */
  max-width: 520px;
  margin-inline: auto;
}
.fk-prose .fk-cta-wrapper p.fk-cta-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-medium);
  letter-spacing: 1.5px;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2;
  color: var(--fk-fir);
}
.fk-prose .fk-cta-wrapper p.fk-cta-text {
  max-width: 480px;
  margin: 0 auto 24px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-muted);
}
/* Button in Primary-Buy-Optik (fir-soft Pill wie body .wp-block-button__link
   oben in M1). Kaskaden-Gegner: `.inside-article .fk-prose a` setzt
   color: coral !important (0,2,1 + !important) — hier mit (0,3,1) + !important
   kontern; border-bottom von .fk-prose a ebenfalls überschreiben. */
.inside-article .fk-prose a.fk-cta-button,
.fk-prose a.fk-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 28px;
  background: var(--fk-buy);
  color: var(--text-on-accent) !important;
  border: 1.5px solid var(--fk-buy);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.4;
  box-shadow: 0 8px 20px var(--fk-buy-glow);
  transition: var(--transition-base);
}
.inside-article .fk-prose a.fk-cta-button:hover,
.fk-prose a.fk-cta-button:hover {
  background: var(--fk-buy-deep);
  border-color: var(--fk-buy-deep);
  color: var(--text-on-accent) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px var(--fk-buy-glow);
}
.fk-cta-button .fk-flower-icon {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--fk-coral); /* SVG-fill = currentColor -> Coral-Blüte auf Fir */
}

/* ---- 2. Tabellen ohne gw-table-scroll: Card-Optik + horizontales Scrollen ---- */
.fk-prose figure.wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 32px 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-hairline);
  background: var(--surface-card);
}
.fk-prose figure.wp-block-table table {
  min-width: 640px; /* auf Mobile scrollen statt quetschen */
  margin: 0;
}
.fk-prose figure.wp-block-table tr:nth-child(even) td {
  background: var(--fk-cream-soft);
}
/* has-fixed-layout ignoriert Inhaltsbreiten: nowrap-Header (globale
   .fk-prose-th-Regel) liefen in die Nachbarzelle. Umbruch erlauben. */
.fk-prose .wp-block-table table.has-fixed-layout th {
  white-space: normal;
  overflow-wrap: break-word;
}
/* Defensive: falls eine Figure doch in .gw-table-scroll steckt, keine
   doppelte Card (Border/Radius/Margin nur auf dem äußeren Wrapper). */
.fk-prose .gw-table-scroll figure.wp-block-table {
  overflow-x: visible;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

/* ---- 3. Mobile-TOC (<details>) + Sidebar-Ausblendungen < 1024px ---- */
.fk-toc-mobile {
  display: none; /* nur < 1024px (Media-Query unten) */
  margin: 0 0 32px;
  padding: 0 20px;
  background: var(--fk-cream-soft);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
}
/* Summary-Optik wie gw-faq-item (Chevron rechts, kein Marker). */
.fk-toc-mobile__summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 16px 40px 16px 0;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--fk-fir);
  transition: color var(--dur-fast) var(--ease-soft);
}
.fk-toc-mobile__summary:hover {
  color: var(--fk-terracotta);
}
.fk-toc-mobile__summary::-webkit-details-marker {
  display: none;
}
.fk-toc-mobile__summary::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--fk-terracotta);
  border-bottom: 2px solid var(--fk-terracotta);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--dur-base) var(--ease-soft);
}
.fk-toc-mobile[open] .fk-toc-mobile__summary::after {
  transform: translateY(-30%) rotate(-135deg);
}
.fk-toc-mobile__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0 18px;
}
/* Linkoptik wie Sidebar-TOC; .inside-article .fk-prose a greift hier nicht
   (TOC steht VOR .fk-prose), aber GPs .inside-article a (fir) — daher explizit. */
.inside-article a.fk-toc-mobile__link,
a.fk-toc-mobile__link {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.4;
  text-decoration: none;
  padding-left: 14px;
  border-left: 2px solid var(--border-hairline);
  color: var(--text-body);
  transition: var(--transition-base);
}
.inside-article a.fk-toc-mobile__link:hover,
a.fk-toc-mobile__link:hover {
  color: var(--fk-terracotta);
  border-left-color: var(--fk-terracotta);
}
@media (max-width: 1024px) {
  .fk-toc-mobile {
    display: block;
  }
  /* Sidebar rutscht unter den Content: TOC dort nutzlos, Autorin-Karte
     doppelt zur Authorbox am Content-Ende. „Passend dazu" bleibt. */
  .fk-single-sidebar .fk-single-toc,
  .fk-single-sidebar .fk-single-sidebar__author {
    display: none;
  }
}

/* ==========================================================================
   Newsletter — Fluent Forms #5 (0.2.42)
   Ersetzt das statische Mockup-Formular im Pattern farbenkranz/newsletter.
   Scope: .fk-newsletter — Markup (FF-Default): .fluentform_wrapper_5 >
   form > fieldset > .ff-el-group (Label + Tooltip + input.ff-el-form-control)
   + .ff_submit_btn_wrapper (button.ff-btn-submit.wpf_has_custom_css).
   FF-Default-CSS + wpf_has_custom_css werden mit Scope-Spezifitaet
   (+ !important am Button) ueberschrieben.
   ========================================================================== */
.fk-newsletter .fluentform {
  max-width: 520px;
  margin-inline: auto;
}
/* Feld + Button nebeneinander (Fieldset als Flex-Container), Button
   buendig zur Input-Unterkante. */
.fk-newsletter .fluentform form fieldset {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.fk-newsletter .fluentform .ff-el-group {
  flex: 1 1 220px;
  margin: 0;
}
.fk-newsletter .fluentform .ff_submit_btn_wrapper {
  flex: 0 0 auto;
  margin: 0;
  text-align: left;
}
/* Label klein ueber dem Feld (Platzhalter-Stil), Tooltip-Icon muted. */
.fk-newsletter .fluentform .ff-el-input--label {
  margin-bottom: 6px;
}
.fk-newsletter .fluentform .ff-el-input--label label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--fw-regular);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fk-newsletter .fluentform .ff-el-tooltip {
  vertical-align: middle;
}
.fk-newsletter .fluentform .ff-el-tooltip svg {
  width: 14px;
  height: 14px;
  fill: var(--text-muted);
  opacity: 0.7;
}
/* E-Mail-Input als Pill (Optik wie Design-Input). */
.fk-newsletter .fluentform input.ff-el-form-control {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 15px;
  padding: 14px 20px;
  height: auto;
  line-height: 1.3;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-soft);
  background: #fff;
  color: var(--fk-fir);
  box-shadow: none;
  outline: none;
  transition: var(--transition-base);
}
.fk-newsletter .fluentform input.ff-el-form-control::placeholder {
  color: var(--text-muted);
}
.fk-newsletter .fluentform input.ff-el-form-control:focus {
  border-color: var(--fk-sage);
  box-shadow: 0 0 0 3px var(--fk-sage-soft);
}
/* Submit = Primary-Pill (fir-soft-Fuellung, Cream-Text). !important
   gegen FF-Default + .wpf_has_custom_css + GP-Button-Altregeln
   (bekannte Gegner: :not()-Ketten, font-size .8em auf buttons). */
.fk-newsletter .fluentform button.ff-btn-submit {
  font-family: var(--font-sans);
  font-size: var(--fs-small) !important;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  padding: 15px 28px !important;
  border-radius: var(--radius-pill) !important;
  background: var(--fk-buy) !important;
  color: var(--text-on-accent) !important;
  border: 1.5px solid var(--fk-buy) !important;
  line-height: 1;
  min-height: 0;
  cursor: pointer;
  box-shadow: 0 8px 20px var(--fk-buy-glow);
  transition: var(--transition-base);
}
.fk-newsletter .fluentform button.ff-btn-submit:hover {
  background: var(--fk-buy-deep) !important;
  border-color: var(--fk-buy-deep) !important;
  color: var(--text-on-accent) !important;
  transform: translateY(-2px);
}
/* Fehler: coral, klein. */
.fk-newsletter .fluentform .ff-el-is-error .text-danger,
.fk-newsletter .fluentform .error,
.fk-newsletter .ff-errors-in-stack {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fk-coral);
}
.fk-newsletter .ff-errors-in-stack {
  margin-top: 8px;
}
.fk-newsletter .fluentform .ff-el-is-error input.ff-el-form-control {
  border-color: var(--fk-coral);
}
/* Success-Message im Notice-Stil (sage-Wash). */
.fk-newsletter .fluentform .ff-message-success {
  margin-top: 12px;
  padding: 14px 20px;
  border: 1px solid var(--fk-sage);
  border-radius: var(--radius-sm);
  background: var(--fk-sage-soft);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--fk-fir);
  box-shadow: none;
}
/* Mobile: gestapelt, Button Full-Width. */
@media (max-width: 640px) {
  .fk-newsletter .fluentform form fieldset {
    flex-direction: column;
    align-items: stretch;
  }
  .fk-newsletter .fluentform .ff-el-group,
  .fk-newsletter .fluentform .ff_submit_btn_wrapper {
    flex: 1 1 auto;
  }
  .fk-newsletter .fluentform button.ff-btn-submit {
    width: 100%;
  }
}

/* ==========================================================================
   Produkt-Slider in Beitraegen — .fk-product-slider (0.2.42)
   GenerateBlocks-Carousel (div.gb-carousel.fk-product-slider) mit
   Header-Zeile (h4.gb-text + .gb-carousel-control Prev/Next) und
   Produkt-Slides (.gb-carousel-item > article mit img/h3/p).
   GB-Hashklassen (gb-element-*) sind instanzabhaengig -> nur
   strukturelle Selektoren. Kein Kauf-Button in den Slides (nur
   Permalinks) -> §19-Regel unkritisch. Carousel-JS unangetastet.
   ========================================================================== */
.fk-product-slider {
  margin: 40px 0;
}
/* Header-Zeile: erstes div vor der Router-Region (Titel links,
   Controls rechts). */
.fk-product-slider > div:first-of-type {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.fk-product-slider h4.gb-text {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-semibold);
  font-size: 26px;
  line-height: 1.2;
  color: var(--fk-fir);
}
/* Prev/Next: runde 40px-Outline-Buttons, Hover invertiert. Hohe
   Spezifitaet + Resets gegen GPs generische button-Regeln
   (:not()-Ketten, font-size .8em). */
body .fk-product-slider button.gb-carousel-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0 !important;
  background: transparent !important;
  border: 1.5px solid var(--fk-fir) !important;
  border-radius: 50% !important;
  color: var(--fk-fir) !important;
  box-shadow: none;
  cursor: pointer;
  transition: var(--transition-base);
}
body .fk-product-slider button.gb-carousel-control:hover {
  background: var(--fk-fir) !important;
  border-color: var(--fk-fir) !important;
  color: var(--fk-cream) !important;
  transform: none;
}
.fk-product-slider .gb-carousel-control-icon {
  display: inline-flex;
}
.fk-product-slider .gb-carousel-control svg {
  width: 18px;
  height: 18px;
}
/* Slides: Karten-Optik konsistent zu fk-product-card. */
.fk-product-slider .gb-carousel-item {
  height: auto;
}
.fk-product-slider .gb-carousel-item article {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--surface-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
.fk-product-slider .gb-carousel-item article img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin: 0;
}
/* Produkt-Titel: Theme-Typo, Link ohne Prose-Underline
   (.inside-article a wird durch 0,2,1-Spezifitaet geschlagen). */
.fk-product-slider h3.gb-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
}
.fk-product-slider h3.gb-text a {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  color: var(--fk-fir);
  text-decoration: none;
}
.fk-product-slider h3.gb-text a:hover {
  color: var(--fk-coral);
}
/* Kurzbeschreibung: klein, muted, auf 3 Zeilen begrenzt. */
.fk-product-slider .gb-carousel-item article p.gb-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Meta-Zeile (Autor/Datum aus dem Loop-Template): dezent klein. */
.fk-product-slider .gb-carousel-item article > div:last-child {
  margin-top: auto;
  font-size: 12px;
  color: var(--text-muted);
}
@media (max-width: 640px) {
  .fk-product-slider h4.gb-text {
    font-size: 22px;
  }
  body .fk-product-slider button.gb-carousel-control {
    width: 36px;
    height: 36px;
  }
}

/* ==========================================================================
   E2a (0.2.43) — GP-Element-Slots: Announcement + Promo-Band
   Das Announcement-Band kommt jetzt als GP Block Element auf
   generate_before_header (statt Theme-Hook in inc/header.php). GP rendert
   Block Elements ohne zusätzlichen Wrapper direkt am Hook — das <p> aus dem
   Pattern trägt .fk-announcement selbst. Vorher war es ein <div>; Absatz-
   Margins (GP-Basis-CSS `p { margin-bottom: 1.5em }`) neutralisieren, sonst
   klafft unter dem Band eine Lücke.
   ========================================================================== */
p.fk-announcement,
.fk-announcement {
  margin: 0;
}

/* ---- Promo-Band (Pattern farbenkranz/element-promo, Vertragsklasse
   fk-promo-band). Optik-Familie der CTA-Bänder (.fk-cta-wrapper /
   About-/Landing-CTAs): blush-Karte, Radius, zentriert, Titel display-italic.
   Buttons erben die globale Primary-Buy-Optik (body .wp-block-button__link).
   Hook-Kontext variiert (z. B. generate_before_main_content, außerhalb des
   Containers) -> eigene max-width + Seitenrand, damit das Band nie am
   Viewport klebt. Gutenberg-Falle: constrained-Group kann einen
   .wp-block-group__inner-container einziehen — deshalb nichts Layout-
   kritisches auf direkte Kinder (>) binden. ---- */
.fk-promo-band {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  max-width: min(1100px, calc(100% - 32px));
  margin: clamp(24px, 4vw, 40px) auto;
  padding: clamp(28px, 4.5vw, 52px) clamp(20px, 4vw, 48px);
  background: var(--grad-blush);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  text-align: center;
}
.fk-promo-band p.fk-promo-band__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-medium);
  letter-spacing: 1.5px;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2;
  color: var(--fk-fir);
}
.fk-promo-band p.fk-promo-band__text {
  max-width: 520px;
  margin: 0 auto;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-muted);
}
.fk-promo-band .wp-block-buttons {
  margin-top: 24px;
}

/* ==========================================================================
   0.2.44 — Produktseite: Tabs-Redesign, Lieferstatus-Grün, Sticky-Panel
   ========================================================================== */

/* ---- Produkt-Tabs als schlichte Inline-Zeile (ProductScreen.jsx) ----
   Woo core + GP Premium (woocommerce.css) geben ul.tabs li eine Karte
   (background rgba(0,0,0,.02), 1px-Borders, Radius) und dem Panel Box-
   Optik; die GP-Customizer-Inline-CSS setzt Link-Farben. Karte/Borders
   werden hier mit !important neutralisiert (GP-Inline-CSS hängt in der
   Kaskade hinter style.css); Farbe/Typo gewinnen über Spezifität
   (.woocommerce div.product … = 4 Klassen). Der frühere Tab-Teilblock
   (".single-product .woocommerce-tabs", M4) bleibt kompatibel darunter. */
.woocommerce div.product .woocommerce-tabs {
    margin-top: clamp(48px, 7vw, 72px);
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: clamp(18px, 3vw, 32px);
    margin: 0 0 26px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--fk-coral-soft) !important;
    box-shadow: none !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
    display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: inline-block;
    padding: 8px 2px 12px;
    margin-bottom: -1px; /* aktive 2px-Linie liegt AUF der Hairline */
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.5px;
    color: var(--text-muted);
    white-space: nowrap;
    text-shadow: none;
    border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus {
    color: var(--fk-fir);
    background: transparent !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--fk-coral);
    border-bottom-color: var(--fk-coral);
}
/* Panel: keine Box — Fließtext 16/1.8, lesbare Zeilenlänge. */
.woocommerce div.product .woocommerce-Tabs-panel {
    max-width: 760px;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-body);
}
/* Panel-Headings behalten die Display-Italic-Optik (M4-Regel), aber
   mobil im Zaum: clamp statt fixer Woo/GP-Größen. */
.woocommerce div.product .woocommerce-Tabs-panel h2 {
    font-size: clamp(21px, 2.8vw, 27px);
    line-height: 1.25;
}
.woocommerce div.product .woocommerce-Tabs-panel h3 {
    font-size: clamp(18px, 2.3vw, 22px);
    line-height: 1.3;
}

/* ---- Lieferzeit / Lagerstatus: positive Signale ÜBERALL in Grün ----
   Konsolidierte Gruppe (var(--in-stock), dieselbe Farbe wie Block-Cart-
   Lieferzeit Z. ~1430 und Produktkarten-Stock). Abgedeckt: Einzelseite
   (p.stock.in-stock, Germanized p.delivery-time-info — dessen muted-
   Farbe aus ".single-product .wc-gzd-additional-info" wird über die
   3-Klassen-Variante überstimmt), Loop-Karten, Mini-Cart (bereits grün,
   Z. ~4218), Blocks (bereits grün). out-of-stock bleibt bewusst NICHT
   grün — Woo-Default-Rot wird auf Brand-Coral gezogen. */
body p.stock.in-stock,
body p.delivery-time-info,
.single-product .wc-gzd-additional-info.delivery-time-info,
#wc-sticky-cart-panel .delivery-time-info {
    color: var(--in-stock);
}
body p.stock.out-of-stock,
.single-product .wc-gzd-additional-info.delivery-time-info .out-of-stock {
    color: var(--fk-coral);
}

/* ---- Sticky-Add-to-cart-Panel (#wc-sticky-cart-panel) ----
   Quelle: GP Premium WooCommerce-Modul (generatepress_wc_add_to_cart_helper,
   Setting sticky_add_to_cart_panel) — Markup: .inside-add-to-cart-panel >
   .product-image img / .product-title / .product-price / form.cart(button.alt).
   NUR Kosmetik: Position/translateY-Verhalten (JS-Scroll-Einblendung,
   mobile bottom:0 aus GPs woocommerce-mobile.css) bleibt unangetastet.
   ID-Selektor schlägt GPs Klassen-Regeln (.add-to-cart-panel …) und die
   Customizer-Inline-Farben. */
#wc-sticky-cart-panel.add-to-cart-panel {
    background: #fff;
    border-top: 1px solid var(--fk-coral-soft);
    box-shadow: 0 -6px 24px rgba(46, 67, 65, 0.10);
    padding: clamp(10px, 2vw, 14px) clamp(14px, 4vw, 28px);
}
/* Layout lt. User-Vorgabe: Bild links über beide Zeilen; Zeile 1 = Titel
   volle Breite; Zeile 2 = Preis und Warenkorb-Button im 30:70-Split. */
#wc-sticky-cart-panel .inside-add-to-cart-panel {
    display: grid;
    grid-template-columns: 56px minmax(0, 3fr) minmax(0, 7fr);
    grid-template-areas:
        "img title title"
        "img price form";
    column-gap: clamp(12px, 2vw, 16px);
    row-gap: 6px;
    align-items: center;
    min-width: 0;
    max-width: var(--container-wide);
    margin: 0 auto;
}
#wc-sticky-cart-panel .product-image {
    grid-area: img;
    line-height: 0;
}
#wc-sticky-cart-panel .product-image img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}
#wc-sticky-cart-panel .product-title {
    grid-area: title;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: var(--fw-medium);
    color: var(--fk-fir);
    line-height: 1.3;
    align-self: end;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#wc-sticky-cart-panel .product-price {
    grid-area: price;
    margin: 0;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: var(--fw-semibold);
    color: var(--fk-fir);
    white-space: nowrap;
    align-self: start;
}
#wc-sticky-cart-panel form.cart {
    grid-area: form;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    min-width: 0;
    align-self: start;
}
#wc-sticky-cart-panel form.cart .button {
    width: 100%;
}
/* Kompakter Primary-Pill — GP-Customizer-Inline (#wc-sticky-cart-panel
   .button {…var(--contrast)…}) hat gleiche Spezifität und hängt in der
   Kaskade unklar -> decisive Props !important (wie die globale
   Button-Schicht oben, bewusst eng gescopt). */
#wc-sticky-cart-panel .button {
    background: var(--fk-buy) !important;
    color: var(--text-on-accent) !important;
    border: 1.5px solid var(--fk-buy) !important;
    border-radius: var(--radius-pill) !important;
    padding: 9px 18px !important;
    font-size: 12px !important;
    letter-spacing: var(--ls-button) !important;
    text-transform: uppercase !important;
    white-space: nowrap;
}
#wc-sticky-cart-panel .button:hover,
#wc-sticky-cart-panel .button:focus,
#wc-sticky-cart-panel .button:active {
    background: var(--fk-buy-deep) !important;
    border-color: var(--fk-buy-deep) !important;
    color: var(--text-on-accent) !important;
}
/* Mobil: gleiche Grid-Struktur, nur kompakter (GPs 13px-Preisregel wird
   per ID überstimmt). */
@media (max-width: 600px) {
    #wc-sticky-cart-panel .inside-add-to-cart-panel {
        grid-template-columns: 48px minmax(0, 3fr) minmax(0, 7fr);
    }
    #wc-sticky-cart-panel .product-image img {
        width: 48px;
        height: 48px;
    }
    #wc-sticky-cart-panel .product-title {
        font-size: 13px;
    }
    #wc-sticky-cart-panel .product-price {
        font-size: 14px;
    }
    #wc-sticky-cart-panel .button {
        padding: 9px 14px !important;
        font-size: 11px !important;
    }
}

/* ==========================================================================
   Mobile-Politur (0.2.45): Slideout-Menü, Header-Icons, Mobile-Typo,
   FF-Floating-Label, Blog-Card-CTA
   ========================================================================== */

/* ===== 1. Mobile-Slideout-Menü (GP Premium Off-Canvas, Stil "overlay") ====
   Markup: nav#generate-slideout-menu.slideout-navigation.do-overlay >
   .inside-navigation > [.fk-slideout__brand (Theme-Hook, Prio 5) +
   button.slideout-exit (GP, Prio 10) + .main-nav > ul.slideout-menu +
   .fk-slideout__search (Theme-Hook, after_slideout_navigation)].
   Gegner (gp-premium offside.css + Customizer-Inline-CSS):
   - .do-overlay: width:100%, text-align:center, Fade statt Slide;
   - .main-nav ul li a { font-weight:200; font-size:.8em / 16px mobil };
   - background-color:var(--background) auf .slideout-navigation;
   - #generate-slideout-menu.main-navigation ul ul { display:none } und
     li:hover > ul { display:none } (Dropdown per JS-Toggle) — hier per
     CSS permanent AUFgeklappt, GP-JS bleibt unangetastet.
   Optik-Vertrag: wie .fk-minicart / Design-CartDrawer (App.jsx). */

/* -- Panel: cream, rechts, max 360px, voller Viewport. Der dunkle Scrim
   ist ein 100vmax-Schatten am Panel selbst — der do-overlay-Modus hat
   KEIN eigenes .slideout-overlay-Element, so fadet der Scrim mit der
   Panel-Opacity mit (Transition kommt von GP). -- */
#generate-slideout-menu.slideout-navigation.main-navigation {
    left: auto !important;
    right: 0 !important;
    width: min(360px, 100vw) !important;
    height: 100dvh;
    background-color: var(--fk-cream) !important;
    text-align: left !important;
    box-shadow: 0 0 0 100vmax rgba(46, 67, 65, 0.45), var(--shadow-lg);
    overflow-y: auto;
    overscroll-behavior: contain;
}
#generate-slideout-menu .inside-navigation {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    max-width: none;
    padding: 0;
    text-align: left;
}

/* -- Kopfzeile: Wortmarken-Stil links, Close-Kreis rechts, Hairline. -- */
#generate-slideout-menu .fk-slideout__brand {
    padding: 18px 60px 16px 24px;
    border-bottom: 1px solid var(--border-hairline);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 23px;
    letter-spacing: 0.5px;
    color: var(--fk-fir);
}
/* GP-Gegner: Inline padding-left/right:27px + width:100% (offside.css)
   + do-overlay position:fixed/static (mobil). */
#generate-slideout-menu.slideout-navigation button.slideout-exit {
    position: absolute !important;
    top: 14px;
    right: 16px;
    left: auto;
    width: 36px !important;
    height: 36px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: 1.5px solid var(--fk-fir) !important;
    border-radius: 50%;
    color: var(--fk-fir) !important;
    font-size: 15px;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    box-shadow: none;
    transition: var(--transition-base);
}
#generate-slideout-menu.slideout-navigation button.slideout-exit:hover,
#generate-slideout-menu.slideout-navigation button.slideout-exit:focus {
    color: var(--fk-coral) !important;
    border-color: var(--fk-coral) !important;
    background: transparent !important;
    transform: none;
}
#generate-slideout-menu.slideout-navigation button.slideout-exit .gp-icon svg {
    width: 14px;
    height: 14px;
}

/* -- Menüpunkte Ebene 1: display-italic, fir, Hairlines. -- */
#generate-slideout-menu .main-nav {
    width: 100%;
    min-width: 0;
    margin: 0 0 24px;
}
#generate-slideout-menu .slideout-menu > li {
    text-align: left !important;
    border-bottom: 1px solid var(--border-hairline);
}
#generate-slideout-menu.main-navigation .main-nav ul li a {
    display: block;
    width: 100%;
    font-family: var(--font-display) !important;
    font-style: italic;
    font-weight: 500 !important;
    font-size: 23px !important;
    letter-spacing: 0.5px;
    text-transform: none !important;
    line-height: 1.3 !important;
    color: var(--fk-fir) !important;
    background: transparent !important;
    padding: 14px 24px;
}
#generate-slideout-menu.main-navigation .main-nav ul li:hover > a,
#generate-slideout-menu.main-navigation .main-nav ul li:focus > a,
#generate-slideout-menu.main-navigation .main-nav ul li.sfHover > a {
    color: var(--fk-coral) !important;
    background: transparent !important;
}
/* Aktiver Punkt: coral. */
#generate-slideout-menu.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    color: var(--fk-coral) !important;
    background: transparent !important;
}

/* -- Shop-Unterpunkte PERMANENT ausgeklappt: GPs display:none-Regeln
   (Default + li:hover>ul-Neutralisierung) überschreiben, Toggle-Pfeil
   verstecken. Defensive visibility/left-Resets gegen GP-Kern-Dropdown-
   Mechanik (left:-99999px / opacity). -- */
#generate-slideout-menu .dropdown-menu-toggle {
    display: none !important;
}
#generate-slideout-menu.main-navigation ul ul,
#generate-slideout-menu .slideout-menu li:hover > ul,
#generate-slideout-menu .slideout-menu li.sfHover > ul {
    display: block !important;
    position: static !important;
    left: 0 !important;
    top: 0;
    width: 100%;
    height: auto;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto;
    background: transparent !important;
    box-shadow: none;
    margin: 0;
    padding: 0 0 12px;
}
#generate-slideout-menu .sub-menu li {
    border-bottom: 0;
}
/* Unterpunkte: sans 14px 500 uppercase, eingerückt. Doppel-Selektor
   schlägt GPs Inline-Submenu-Fontsize (font-size - 1px). */
#generate-slideout-menu.main-navigation .main-nav ul ul li a,
#generate-slideout-menu .slideout-menu .sub-menu a.fk-mega__item {
    font-family: var(--font-sans) !important;
    font-style: normal;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 1px;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
    color: var(--fk-fir) !important;
    padding: 9px 24px 9px 38px;
}
/* Mega-Menü-Kacheln (inc/header.php) im Slideout auf reine Textpunkte
   reduzieren — Thumb + Beschreibung sind global schon display:none,
   hier zusätzlich die Tile-Container neutralisieren. */
#generate-slideout-menu .fk-mega__thumb,
#generate-slideout-menu .fk-mega__desc {
    display: none !important;
}
#generate-slideout-menu .fk-mega__item,
#generate-slideout-menu .fk-mega__text,
#generate-slideout-menu .fk-mega__name {
    display: block;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    margin: 0;
}

/* -- Suche unten im Panel: Pill weiß + Lupe (Data-URI, fir), wie
   Suchmodal-Optik. margin-top:auto pinnt sie ans Panel-Ende. -- */
#generate-slideout-menu .fk-slideout__search {
    margin-top: auto;
    padding: 16px 24px 24px;
    border-top: 1px solid var(--border-hairline);
}
#generate-slideout-menu .fk-slideout__search form {
    position: relative;
    display: block;
    margin: 0;
}
/* WP-Suchformular wrappt das Feld in ein inline-<label> — auf volle
   Breite strecken, sonst kollabiert die Pill. */
#generate-slideout-menu .fk-slideout__search form label {
    display: block;
    width: 100%;
    margin: 0;
}
#generate-slideout-menu .fk-slideout__search .search-field,
#generate-slideout-menu .fk-slideout__search input[type="search"] {
    width: 100%;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.3;
    /* !important: schlägt die globale Formular-Basisregel
       `body .search-field { padding:12px 16px !important }` (Z. ~312) —
       ohne !important gewinnt deren padding-left:16px und der Text
       überlappt das Lupen-Icon bei 17px ("l@vendel"-Bug). */
    padding: 12px 18px 12px 46px !important;
    border: 1.5px solid var(--border-soft) !important;
    border-radius: var(--radius-pill) !important;
    color: var(--fk-fir);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e4341' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 17px center / 17px 17px !important;
    box-shadow: none;
    outline: none;
}
#generate-slideout-menu .fk-slideout__search .search-field:focus,
#generate-slideout-menu .fk-slideout__search input[type="search"]:focus {
    border-color: var(--fk-sage) !important;
    box-shadow: 0 0 0 3px var(--fk-sage-soft);
}
/* Submit unsichtbar — Enter/Go der Mobil-Tastatur schickt ab. */
#generate-slideout-menu .fk-slideout__search .search-submit,
#generate-slideout-menu .fk-slideout__search input[type="submit"],
#generate-slideout-menu .fk-slideout__search button[type="submit"] {
    display: none;
}

/* ===== 2. Header-Icons mobil größer (markengerecht, Touch >= 44px) ====
   #mobile-header ist auch der Sticky-Zustand (GP macht das Element
   selbst sticky, kein Klon). SVGs aus inc/icons.php nur per CSS
   skaliert. */
#mobile-header .menu-bar-item .gp-icon svg {
    width: 24px;
    height: 24px;
}
#mobile-header .menu-bar-item > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding-left: 4px;
    padding-right: 4px;
    background: transparent;
    color: var(--fk-fir);
}
#mobile-header .menu-bar-item:hover > a,
#mobile-header .menu-bar-item > a:focus {
    background: transparent;
    color: var(--fk-coral);
}
#mobile-header button.menu-toggle {
    min-width: 44px;
    min-height: 44px;
    color: var(--fk-fir);
    /* Luft zwischen Warenkorb und Burger (klebten mit 0px aneinander). */
    margin-left: 12px;
    /* Icon vertikal zentrieren: ohne Flex-Zentrierung saß das Burger-SVG
       ~6.5px über der Box-Mitte -> wirkte höher als das Warenkorb-Icon. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#mobile-header button.menu-toggle .gp-icon svg {
    width: 26px;
    height: 26px;
}
/* Warenkorb-Badge an die größere Icon-Kante setzen. */
#mobile-header .menu-bar-item a.cart-contents {
    position: relative;
}
#mobile-header .menu-bar-item a.cart-contents .number-of-items {
    position: absolute;
    left: calc(50% + 4px);
    top: calc(50% - 22px);
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
}

/* ===== 3. Mobile-Typografie: Hero + Display-Überschriften ====
   text-wrap:balance als Progressive Enhancement für alle Headlines
   (ein Sammelselektor — ältere Browser ignorieren die Property). */
h1, h2, h3 {
    text-wrap: balance;
}

@media (max-width: 600px) {
    /* -- Home-/Pattern-Hero: kleinere h1 ohne Wortbrüche, Card entzerrt. */
    .fk-home-hero__title,
    .fk-hero__card h1 {
        font-size: clamp(31px, 9.5vw, 40px);
        line-height: 1.15;
        letter-spacing: 1px;
        hyphens: none;
        -webkit-hyphens: none;
        overflow-wrap: normal;
        word-break: normal;
    }
    .fk-home-hero__card {
        gap: 18px;
        padding: 28px 22px;
    }
    .fk-hero__card {
        padding: 28px 22px;
    }
    /* Luft zwischen Eyebrow / h1 / Lead / Buttons (Group ist kein Flex —
       Abstände über Margins der Kinder). */
    .fk-hero__card h1 {
        margin-block: 10px 12px;
    }
    .fk-home-hero__lead,
    .fk-hero__card p:not(.fk-eyebrow) {
        font-size: 16px;
        line-height: 1.65;
    }
    /* Buttons im Hero: sauber gestapelt, volle Breite. */
    .fk-home-hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .fk-home-hero__actions > * {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    .fk-hero__card .wp-block-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: 22px;
    }
    .fk-hero__card .wp-block-buttons .wp-block-button,
    .fk-hero__card .wp-block-buttons .wp-block-button__link {
        width: 100%;
        text-align: center;
    }

    /* -- Display-h2 (Sektionen, Editorial, Newsletter, CTAs): Minima
       von 30px auf ~25px. */
    .fk-home-editorial__content h2,
    .fk-editorial__text h2,
    .fk-newsletter__grid h2,
    .fk-about-cta h2,
    .fk-landing-cta h2,
    .fk-about-why .fk-home-section-head h2,
    .fk-about-video .fk-home-section-head h2,
    .fk-about-gallery .fk-home-section-head h2 {
        font-size: 25px;
    }
    /* -- Prose-/Panel-h2 (28er-Minimum) auf 25px. */
    .fk-prose h2,
    .fk-landing-info__title {
        font-size: 25px;
    }
    /* -- Seiten-/Landing-/About-/Blume-Heros (30-40er-Minima). */
    h1.fk-single-hero__title {
        font-size: 26px;
    }
    .fk-blog-archive__head h1 {
        font-size: 27px;
    }
    h1.fk-blume-hero__title,
    .fk-about-hero h1,
    .fk-landing-hero h1 {
        font-size: 30px;
        line-height: 1.15;
    }
    h2.fk-blume-more__title,
    .fk-rp-grid .gw-rp-heading {
        font-size: 24px;
    }
    /* Keine Silbentrennung in Display-Headlines. */
    .fk-about-hero h1,
    .fk-landing-hero h1,
    h1.fk-single-hero__title,
    h1.fk-blume-hero__title {
        hyphens: none;
        -webkit-hyphens: none;
    }
}

/* ===== 4. FluentForm-Tooltip-Popup ====
   (Der Floating-Label-Ansatz von v0.2.45/46 ist in 0.2.54 durch
   sr-only-Label + Placeholder ersetzt — Regeln entfernt. Das Popup-
   Styling bleibt: das Icon selbst wird in 0.2.54 im Feld positioniert.) */
/* FF-Tooltip-Popup (global an <body> gehängt): weißer Kasten, lesbar. */
.ff-el-tooltip-content,
#ff_tooltip_wrapper,
.ff_tooltip_wrapper {
    background: #fff !important;
    color: var(--text-body) !important;
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    max-width: 280px;
    padding: 12px 14px !important;
    border: 1px solid var(--border-hairline) !important;
    border-radius: var(--radius-sm, 10px) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* ===== 5. Blog-Card-CTA "Beitrag entdecken" (inc/post-card.php) ====
   Dezenter Design-Textlink (HomeScreen.jsx BlogTeaser, Button variant
   "text"): klein, tracked, uppercase, coral, ›-Pfeil kommt von
   .fk-link-cta a::after. Nur in den Beitragskarten — der Editorial-
   Textlink ("Mehr über uns") behält die Standardgröße. */
.fk-blog-card .fk-link-cta {
    margin-top: 4px;
}
.fk-blog-card .fk-link-cta a {
    font-size: 12.5px;
    font-weight: var(--fw-semibold);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ==========================================================================
   v0.2.46 — Nachfixes nach Sichtprüfung (Staging)
   ========================================================================== */

/* ---- 1. Lagerstatus: Oliv-Gewinner überstimmen ----
   Verursacher: Woo-Core woocommerce.css (10.8.1) —
   ".woocommerce:where(body:not(.woocommerce-uses-block-theme))
    div.product .stock { color:#958e09 }" = Spezifität (0,3,1) und
   schlägt damit unser "body p.stock.in-stock" (0,2,2) aus Z. ~6285.
   Gegenmittel: gleiche Struktur + Zustandsklasse -> (0,4,2), kein
   !important nötig (Woo-CSS lädt vor style.css). p.delivery-time-info
   trägt KEINE .stock-Klasse und ist von der Woo-Regel nicht betroffen —
   dessen Grün aus Z. ~6286 hält (gegengeprüft im Live-Markup). */
.woocommerce div.product p.stock.in-stock {
    color: var(--in-stock);
}
.woocommerce div.product p.stock.out-of-stock {
    color: var(--fk-coral);
}

/* ---- 2. (entfernt in 0.2.54) FluentForm Floating Label ----
   Der Floating-Label-Fix lebte hier; das nötige Neutralisieren des
   ff-el-form-left-Layouts ist in den 0.2.54-Block am Dateiende gewandert. */

/* ---- 3. Produkt-Tabs: aktiver Tab-Text coral ----
   GP Premium (generate-woocommerce-inline-css, lädt NACH style.css)
   setzt "li.active a { color: var(--contrast) }" mit (0,5,4) — gleiche
   Spezifität wie unsere Z. ~6249, spätere Quelle gewinnt -> Text blieb
   fir, nur der Unterstrich war coral. Gegenmittel: body-Klasse
   .single-product zusätzlich -> (0,6,4). Inaktive bleiben muted. */
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: var(--text-muted);
}
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus {
    color: var(--fk-fir);
}
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--fk-coral);
}

/* ==========================================================================
   0.2.47 — Mobile Produktkarten-Höhe, Autor-Links, Prose-Bilder, TL;DR-Kontext
   ========================================================================== */

/* ---- 1. Produktkarte mobil: max. ~80% Viewport-Höhe ----
   Ist-Rechnung bei 390px-Viewport (1-Spalten-Grid, Kartenbreite ~340-350px):
   Bild 4/5 = ~425-437px + Body ~292px (Padding 46 + 4x12 Gap + Titel 75
   + Meta 17.5 + Preiszeile ~27 + Legal ~31 (2 Zeilen) + Button ~47)
   = ~717-729px Gesamthöhe -> überschreitet 80svh auf praktisch allen
   Portrait-Phones (greift, sobald svh < ~900px; z. B. 844er-Phone:
   80svh ~600-675px, SE 667er: ~440-530px).
   Mechanik: Karte ist bereits flex-column -> max-height kappen (svh gegen
   Mobile-Browser-Chrome, vh-Fallback davor), der Bild-Container wird zum
   shrinkbaren Flex-Item (aspect-ratio liefert die Wunschhöhe, min-height:0
   erlaubt Schrumpfen), das Bild füllt ihn mit object-fit:cover (croppt
   statt zu verzerren). Body bleibt starr (flex:none) -> 3-Zeilen-Titel,
   Meta-Reserve und margin-top:auto-Button unverändert. Desktop (>600px)
   komplett unberührt. Gilt für ALLE Karten-Vorkommen (ein Selektor:
   Home-[fk_products], Shop-/Archiv-Loop, Related, Cross-Sells). */
@media (max-width: 600px) {
  /* Kompakte Karte auf Mobile: Das BILD bekommt eine DEFINITE Höhe (svh),
     nicht mehr eine aspect-ratio auf einem schrumpfenden Flex-Item. Nur
     eine definite Elternhöhe lässt img{height:100%} sauber auflösen —
     sonst greift der WP-Core-Fallback img[sizes="auto"]
     {contain-intrinsic-size:3000px 1500px} und streckt das Bild auf 1500px
     (der „stark gestreckt"-Bug). Body bleibt starr; die gedeckelte Bildhöhe
     hält die Karte kompakt, ohne den Button abzuschneiden. */
  .fk-product-card__media {
    flex: 0 0 auto;
    aspect-ratio: auto;
    height: 42svh;
    min-height: 240px;
    max-height: 440px;
  }
  .fk-product-card__media img {
    /* !important: Woo-Core `.woocommerce ul.products li.product a img`
       (0,3,4) schlägt sonst height:100% -> img fiele auf intrinsische
       1500px zurück und object-fit:cover würde wirkungslos (sichtbarer
       Crop nur der obere Streifen via overflow:hidden). Erzwungen füllt das
       Bild die definite 42svh-Box und wird echt zentriert gecroppt. */
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto;
    object-fit: cover;
  }
  .fk-product-card__body {
    flex: 0 0 auto;
  }
}

/* ---- 2. Autor-Links auf /ueber-uns/ (single.php: Hero, Sidebar, Authorbox)
   Dezent: keine Unterstreichung, Farben erben, Name hovert coral. */
a.fk-single-hero__author-link {
  display: inline-flex;
  align-items: center;
  gap: 12px; /* wie .fk-single-hero__author */
  text-decoration: none;
  color: inherit;
}
a.fk-single-hero__author-link:hover .fk-single-hero__author-name {
  color: var(--fk-coral);
}
/* Sidebar: der Head selbst ist jetzt der Link (Flex-Layout bleibt). */
a.fk-single-sidebar__author-head {
  text-decoration: none;
  color: inherit;
}
a.fk-single-sidebar__author-head:hover .fk-single-sidebar__author-name {
  color: var(--fk-coral);
}
a.fk-single-authorbox__avatar-link {
  text-decoration: none;
  flex-shrink: 0;
  line-height: 0;
}
.fk-single-authorbox__name a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-base);
}
.fk-single-authorbox__name a:hover {
  color: var(--fk-coral);
}

/* ---- 3. Bild-Abstände + Captions im Beitrags-Content ----
   Ist-Markup (beide Varianten auf Kranz live):
   a) neu:  <figure class="wp-block-image size-large">…</figure>
   b) alt:  <div class="wp-block-image"><figure class="aligncenter size-large">…</figure></div>
   Core-CSS setzt ".wp-block-image figure{margin:0}" (0,1,1) und killt damit
   unser ".fk-prose figure{margin:1.6em 0}" für Variante b — Text klebt am
   Bild. Gegenmittel: Abstand auf den .wp-block-image-Wrapper legen (0,2,0
   schlägt Core-".wp-block-image{…}") — deckt Variante a UND b ab. */
.fk-prose .wp-block-image {
  margin-top: 1.6em;
  margin-bottom: 1.6em;
}
/* Nackte img direkt im Absatz (Classic-/wpautop-Markup, defensiv):
   .fk-prose img ist bereits display:block — Abstand + zentrieren. */
.fk-prose p > img {
  margin: 1.6em auto;
}
/* Floats: Core setzt nur .5em/1em-Abstände — Prose-Luft nachziehen.
   (0,3,0 schlägt Core-".wp-block-image .alignleft" 0,2,0.) */
.fk-prose .wp-block-image.alignleft,
.fk-prose .wp-block-image .alignleft {
  margin: 0.4em 1.6em 1em 0;
  max-width: 50%;
}
.fk-prose .wp-block-image.alignright,
.fk-prose .wp-block-image .alignright {
  margin: 0.4em 0 1em 1.6em;
  max-width: 50%;
}
.fk-prose .wp-block-image.alignwide,
.fk-prose .wp-block-image.alignfull {
  max-width: 100%;
}
/* Captions: harmonisiert mit der bestehenden .fk-prose-figcaption-Regel
   (Z. ~3315: 13px, muted, zentriert, italic, margin-top 10px — greift auch
   für figcaption.wp-element-caption, Element-Selektor schlägt Cores
   ".wp-block-image :where(figcaption)" 0,1,0). Hier nur ergänzen:
   sans explizit, nicht breiter als das Bild, zentriert unter Floats. */
.fk-prose figcaption,
.fk-prose .wp-element-caption {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
  margin-top: 10px;
  margin-bottom: 0;
  max-width: 100%;
}

/* GenerateBlocks-Bildelemente im Beitrags-Content: Galerien/Bild-Wrapper
   (gb-element) haben margin:0 — Folgetext klebte direkt am Bild.
   :not(.gb-carousel): der fk-product-slider hat eigene 40px-Margins. */
.fk-prose > div[class*="gb-element"]:not(.gb-carousel):has(img) {
  margin-block: 1.6em;
}

/* ==========================================================================
   0.2.49 — Produktseite: Lieferzeit-Ampel, Stock-Text, Galerie-Thumbs-Row
   + Produkt-Slider auf Karten-Grammatik
   ========================================================================== */

/* ---- 1. Lieferzeit-Ampel-Dot in der Feature-Liste ----
   Markup aus inc/product-features.php (fk_delivery_feature_row):
   Text + <span class="fk-delivery-dot fk-delivery-dot--{green|yellow|red}">.
   Gelb: es gibt keinen dunklen Gelb-Token (--fk-cream-yellow #f6e7b4 ist
   als Dot zu hell/unlesbar) -> Literal #c9a227 (warmes Signal-Gelb). */
.fk-delivery-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-left: 3px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.fk-delivery-dot--green {
  background: var(--in-stock);
}
.fk-delivery-dot--yellow {
  background: #c9a227;
}
.fk-delivery-dot--red {
  background: var(--fk-coral);
}

/* ---- 2. "X vorrätig" klein über dem Mengenwähler ----
   DOM-Reihenfolge stimmt bereits (Woo simple.php: wc_get_stock_html
   direkt vor form.cart) -> nur Typo/Abstand. Farbe bleibt var(--in-stock)
   aus der konsolidierten Gruppe (Z. ~6285). Kein Layout-Sprung bei
   sold-individually: der Text steht dann einfach über dem Button. */
.single-product div.product .summary p.stock.in-stock {
  font-size: 12px;
  letter-spacing: 0.5px;
  font-family: var(--font-sans);
  margin: 0 0 6px;
}

/* ---- 3. Galerie-Thumbnails: EINE scrollbare Zeile statt 4er-Umbruch ----
   Woo-Core bricht mit ".woocommerce-product-gallery--columns-4
   .flex-control-thumbs li:nth-child(4n+1){clear:left}" + li{width:25%;
   float:left} nach 4 Thumbs um. Gegenmittel CSS-only: die <ol> wird
   Flex-Row mit overflow-x + Scroll-Snap; float/clear/width der li per
   !important neutralisiert (gleiche Waffe wie die Legacy-CodeKit-Datei,
   die nach uns lädt). Thumbs fix 72px quadratisch (object-fit cover),
   radius-sm + aktiver 2px-Coral-Rahmen kommen aus der bestehenden
   Galerie-Regel (Z. ~988). Scrollbar dezent (thin, coral-soft),
   Touch/Trackpad-Scroll funktioniert nativ. */
.single-product .woocommerce-product-gallery .flex-control-thumbs {
  display: flex;
  flex-wrap: nowrap;
  /* !important: Woo-Core `.woocommerce div.product div.images .flex-control-thumbs`
     setzt overflow hidden (höhere Spezifität) — blockiert den Touch-Scroll. */
  overflow-x: auto !important;
  gap: 10px;
  margin: 12px 0 0;
  padding: 2px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--fk-coral-soft) transparent;
  /* Horizontales Scrollen der Thumb-Leiste als Browser-Geste reservieren
     (entkoppelt vom Flexslider-Swipe; JS: fk-gallery.js stopPropagation). */
  touch-action: pan-x;
}
/* Hauptbild-Viewport: vertikales Seiten-Scrollen bleibt native Browser-Geste,
   horizontal ist dem Flexslider-Swipe vorbehalten. Reduziert die
   „cancelable=false"-Touch-Interventions in der Konsole beim Wischen. */
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery .flex-viewport {
  touch-action: pan-y;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
  height: 6px;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-thumb {
  background: var(--fk-coral-soft);
  border-radius: 3px;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li {
  float: none !important;
  clear: none !important;
  width: auto !important;
  margin: 0 !important;
  flex: 0 0 72px;
  scroll-snap-align: start;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  display: block;
}

/* ---- 4. Produkt-Slider auf fk-product-card-Grammatik ----
   Überschreibt die 0.2.42-Basis (Z. ~6016): Slides wie die Produktkarten
   (weiße Karte radius-lg shadow-xs, Bild 4:5 flush + cover, Body-Padding,
   Titel sans semibold 16px, 2-Zeilen-Clamp fir). Nur strukturelle
   Selektoren (fk-product-slider-Scope), keine gb-Hashklassen.
   Die Autor/Datum-Meta-Zeile (Überbleibsel des GB-Loop-Templates,
   article > div:last-child) wird als INTERIM per CSS ausgeblendet —
   sauber wäre, den Meta-Block im GB-Editor aus dem Slider-Template zu
   entfernen (und ggf. einen Preis-Block zu ergänzen). */
.fk-product-slider .gb-carousel-item article {
  padding: 0 0 20px;
  gap: 10px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
/* Bild flush 4:5 wie .fk-product-card__media img. */
.fk-product-slider .gb-carousel-item article img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0;
}
/* Titel: sans semibold 16px, 2 Zeilen geclampt, fir (Linkfarbe kommt
   aus der 0.2.42-Regel .fk-product-slider h3.gb-text a). */
.fk-product-slider h3.gb-text {
  padding: 6px 16px 0;
  font-size: 16px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Kurzbeschreibung: gleiches Innenpadding wie der Titel. */
.fk-product-slider .gb-carousel-item article p.gb-text {
  padding: 0 16px;
}
/* Meta-Zeile Autor/Datum ausblenden (Interim, s. o.). */
.fk-product-slider .gb-carousel-item article > div:last-child {
  display: none;
}

/* ==========================================================================
   0.2.51 — Produktseite: Luft zum Header, Kaufgruppen-Rhythmus,
   Qty-Pill auf Buy-Button-Höhe (+ Warenkorb-Badge = Sale-Chip-Peach,
   Token-Swap in den bestehenden Badge-Regeln Z. ~3876/3898)
   ========================================================================== */

/* ---- 1. Luft zwischen Menü und Produkt ----
   Breadcrumbs sind entfernt; GPs Customizer-Inline-CSS setzt
   ".one-container .site-content{padding:0px 50px 96px 50px}" (Desktop,
   top 0) bzw. 32px top mobil — die Galerie klebte am Menü. Nur
   padding-top übersteuern (body-Prefix hebt die Spezifität über GPs
   (0,2,0), Quer-/Bottom-Padding von GP bleibt unangetastet). */
body.single-product .site-content {
  padding-top: clamp(28px, 4vw, 48px);
}

/* ---- 2. Abstand "Verwendete Blumen" -> Kaufgruppe ----
   Der Chips-Block endete margin-los direkt vor Stock-Text/form.cart. */
.single-product .summary .fk-bestandteile {
  margin-bottom: 26px;
}

/* ---- 3. "X vorrätig" an der Kaufgruppe verankern ----
   DOM-Reihenfolge stimmt (p.stock direkt vor form.cart, s. 0.2.49) —
   knapper 8px-Abstand zum Mengenwähler, gleiche linke Kante (beide
   linksbündig im summary-Flow), Luft nach oben kommt aus Punkt 2. */
.single-product div.product .summary p.stock.in-stock {
  margin: 0 0 8px;
}

/* ---- 4. Qty-Pill auf exakte Buy-Button-Höhe ----
   Gemessen: Buy = 13px Font (fs-small, line-height 1) + 2×12px Padding
   + 2×1.5px Border = 40px. Pill bisher 44px Innenhöhe + 3px Border =
   47px -> überragte den Button. Innenhöhe der Stepper/des Inputs auf
   37px (37 + 3px Border = 40px), schlankere Breiten, Zahl 15px.
   form.cart hat bereits align-items:center (Z. ~832). */
/* !important: gemessen blieb die Pille 52px — eine Fremdregel (GP-Inline/
   Woo-Forms) überstimmt die Höhen. Wrapper hart auf Button-Höhe (40px)
   fixieren, Kinder füllen. */
.single-product form.cart .quantity {
  height: 40px !important;
  box-sizing: border-box;
}
.single-product form.cart .quantity .minus,
.single-product form.cart .quantity .plus {
  width: 32px;
  height: 100% !important;
  font-size: 16px;
  line-height: 1 !important;
  padding: 0 !important;
}
.single-product form.cart .quantity input.qty {
  width: 34px;
  height: 100% !important;
  font-size: 15px;
  line-height: 1 !important;
  padding: 0 !important;
}

/* ==========================================================================
   0.2.54 — FluentForm-Redesign: Newsletter robust (kein Floating-Label mehr)
   + Kontaktseite (/kontakt/, Pattern farbenkranz/kontakt, Form #3)
   Newsletter (#5): Label sr-only, Placeholder kommt aus den FF-Feld-
   Einstellungen (per DB gesetzt: "deine@email.de") — kein JS-Zustand mehr,
   fk-ff-float.js ist entfernt. Tooltip-Icon liegt IM Feld (rechts, mittig).
   !important auf den Box-/Paint-Werten der Inputs: die Unified-Form-Controls
   (Z. ~291ff) setzen radius-sm/padding/Terracotta-Fokus selbst mit
   !important — gleiche Waffe, spätere Quelle gewinnt. Daher stammte auch
   die "orange" (terracotta) eckige Optik des Newsletter-Felds.
   ========================================================================== */

/* ---- 1. Gemeinsame FF-Basis (Scopes .fk-newsletter + .fk-kontakt) ---- */
/* FFs form-left-Layout neutralisieren (fluent-forms-public.css: Label
   float:left/180px, Content margin-left:180px) — Feld füllt die Gruppe. */
.fk-newsletter .fluentform .ff-el-group.ff-el-form-left .ff-el-input--label,
.fk-kontakt .fluentform .ff-el-group.ff-el-form-left .ff-el-input--label {
  float: none;
  width: auto;
  padding: 0;
}
.fk-newsletter .fluentform .ff-el-group.ff-el-form-left .ff-el-input--content,
.fk-kontakt .fluentform .ff-el-group.ff-el-form-left .ff-el-input--content {
  margin-left: 0;
  width: auto;
}
/* Einzeilige Inputs: weiße Pill, Fokus sage + Ring (statt Terracotta). */
/* body-Prefix + :not(): die Unified-Form-Regel (Z. ~293, body .fluentform
   input:not():not(), Spezifität 0,3,2) schlug den nackten Newsletter-Scope. */
body .fk-newsletter .fluentform input.ff-el-form-control:not([type="checkbox"]),
body .fk-kontakt .fluentform input.ff-el-form-control:not([type="checkbox"]) {
  width: 100%;
  background: #fff !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-pill) !important;
  padding: 14px 22px !important;
  height: auto;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.3;
  color: var(--fk-fir);
  box-shadow: none;
  outline: none;
  transition: var(--transition-base);
}
.fk-newsletter .fluentform .ff-el-form-control::placeholder,
.fk-kontakt .fluentform .ff-el-form-control::placeholder {
  color: var(--text-muted);
}
body .fk-newsletter .fluentform input.ff-el-form-control:not([type="checkbox"]):focus,
body .fk-kontakt .fluentform .ff-el-form-control:not([type="checkbox"]):focus {
  border-color: var(--fk-sage) !important;
  box-shadow: 0 0 0 3px var(--fk-sage-soft) !important;
}

/* ---- 1b. GDPR-/Einwilligungs-Checkbox (FluentForm Terms-Feld .ff-el-tc) ----
   Gilt für Newsletter (#5) UND Kontakt (#3). Gebrandete Box (sage Rahmen,
   Fir-Fläche + heller Haken bei :checked), Label als Flex-Zeile (Box links,
   Text rechts, lesbar), Datenschutz/AGB-Links coral. */
:is(.fk-newsletter, .fk-kontakt) .fluentform .ff-el-form-check.ff-el-tc {
  margin: 0;
}
:is(.fk-newsletter, .fk-kontakt) .fluentform .ff_tc_label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
  text-align: left;
}
:is(.fk-newsletter, .fk-kontakt) .fluentform .ff_tc_checkbox {
  flex: 0 0 auto;
  display: inline-flex;
  margin-top: 2px;
}
/* Native Checkbox ersetzen: 18px-Box, sage Rahmen. */
body :is(.fk-newsletter, .fk-kontakt) .fluentform input.ff-el-form-check-input {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
  border: 1.5px solid var(--fk-sage) !important;
  border-radius: 5px !important;
  background: var(--fk-white) !important;
  cursor: pointer;
  transition: var(--transition-base);
}
body :is(.fk-newsletter, .fk-kontakt) .fluentform input.ff-el-form-check-input:checked {
  background: var(--fk-fir) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f6f2e9' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / 12px 12px !important;
  border-color: var(--fk-fir) !important;
}
body :is(.fk-newsletter, .fk-kontakt) .fluentform input.ff-el-form-check-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--fk-sage-soft) !important;
}
:is(.fk-newsletter, .fk-kontakt) .fluentform .ff_tc_label a {
  color: var(--fk-coral);
  text-decoration: underline;
  text-underline-offset: 2px;
}
:is(.fk-newsletter, .fk-kontakt) .fluentform .ff_tc_label a:hover {
  color: var(--fk-coral-deep, var(--fk-fir));
}
/* Newsletter-Layout: der Consent liegt in einem .ff-el-group, das im Flex-Row
   sonst neben Input/Button gequetscht wird -> volle Breite + hinter Input+Button
   (order) = eigene Zeile darunter. */
.fk-newsletter .fluentform .ff-el-group:has(.ff-el-tc) {
  flex: 1 1 100% !important;
  order: 1;
  margin-top: 10px;
}

/* ---- 2. Newsletter (#5): Label sr-only, Tooltip mittig im Feld ---- */
/* .ff-el-group ist der Positionskontext; der Label-Wrapper kollabiert
   (Label sr-only, Tooltip absolut) -> top:50% = Mitte des Inputs. */
.fk-newsletter .fluentform .ff-el-group {
  position: relative;
}
.fk-newsletter .fluentform .ff-el-input--label {
  position: static;
  margin: 0;
}
/* Label nur visuell verstecken — für Screenreader erhalten (sr-only). */
.fk-newsletter .fluentform .ff-el-input--label label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Rechts Platz fürs Tooltip-Icon. */
body .fk-newsletter .fluentform input.ff-el-form-control:not([type="checkbox"]) {
  padding-right: 46px !important;
}
/* Geometrie-Dump 2026-07-07: .ff-el-group hatte ~35px Innenabstand ÜBER
   dem Input (FF-Padding/Label-Margins) — deshalb saß das Icon bei top:50%
   wie bei top:24px daneben. Abstände hart nullen, dann ist Gruppen-Ober-
   kante = Input-Oberkante und 24px = Input-Mitte (Fehler wächst unten). */
.fk-newsletter .fluentform .ff-el-group {
  padding: 0 !important;
}
.fk-newsletter .fluentform .ff-el-input--label,
.fk-newsletter .fluentform .ff-el-input--content {
  margin: 0 !important;
  padding: 0 !important;
}
.fk-newsletter .fluentform .ff-el-tooltip {
  position: absolute !important;
  top: 24px !important;
  right: 16px;
  bottom: auto !important;
  transform: translateY(-50%);
  z-index: 2;
  margin: 0 !important;
  line-height: 0;
  cursor: help;
}
.fk-newsletter .fluentform .ff-el-tooltip svg {
  width: 18px;
  height: 18px;
  fill: var(--text-muted);
  opacity: 1;
  transition: fill 160ms ease;
}
.fk-newsletter .fluentform .ff-el-tooltip:hover svg {
  fill: var(--fk-fir);
}

/* ---- 3. Kontaktseite: Container + SectionHeadline (ContactScreen) ---- */
/* Gutenberg-Falle: constrained-Group rendert .wp-block-group__inner-container
   — Layout dort verankern, nicht am äußeren Block. */
.fk-kontakt > .wp-block-group__inner-container {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding: clamp(64px, 9vw, 110px) clamp(24px, 5vw, 40px);
}
.fk-kontakt .fk-eyebrow {
  margin: 0 0 14px;
}
.fk-kontakt h1.wp-block-heading {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-medium);
  letter-spacing: 1px;
  font-size: clamp(34px, 4.5vw, 52px);
  line-height: 1.1;
  color: var(--fk-fir);
}
.fk-kontakt .fk-kontakt__lead {
  margin: 0 0 40px;
  max-width: 560px;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-body);
}

/* ---- 4. Kontaktformular (#3): Labels über dem Feld, 2-Spalten-Grid ---- */
/* Fieldset als Grid; Name/E-Mail teilen sich ab 640px eine Zeile
   (FF #3 rendert KEINE .ff-t-container-Spalten — alles flache
   .ff-el-group-Geschwister). Hidden-Inputs sind display:none (UA),
   die sr-Legend wird absolut, damit sie keine Grid-Zelle belegt. */
.fk-kontakt .fluentform form fieldset {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.fk-kontakt .fluentform legend.ff_screen_reader_title {
  position: absolute;
}
.fk-kontakt .fluentform .ff-el-group {
  margin: 0;
}
@media (min-width: 640px) {
  .fk-kontakt .fluentform form fieldset {
    grid-template-columns: 1fr 1fr;
    gap: 20px 16px;
  }
  .fk-kontakt .fluentform form fieldset > * {
    grid-column: 1 / -1;
  }
  .fk-kontakt .fluentform .ff-el-group:has([data-name="your-name"]),
  .fk-kontakt .fluentform .ff-el-group:has([data-name="your-email"]) {
    grid-column: auto;
  }
}
/* Labels: klein, uppercase, muted — ÜBER dem Feld (robustes Muster). */
.fk-kontakt .fluentform .ff-el-input--label {
  margin: 0 0 6px;
}
.fk-kontakt .fluentform .ff-el-input--label label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Textarea: radius-md statt Pill, etwas kompakteres Padding. */
.fk-kontakt .fluentform textarea.ff-el-form-control {
  width: 100%;
  min-height: 150px;
  background: #fff !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-md) !important;
  padding: 13px 18px !important;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--fk-fir);
  box-shadow: none;
  outline: none;
  transition: var(--transition-base);
}
/* Datenschutz-Checkbox: Optik wie Block-Checkout (weiß/Sage-Border,
   checked Fir mit Cream-Haken) — FFs .ff_tc_checkbox-Markup ist von
   den Woo-Regeln (Z. ~1556) nicht abgedeckt, daher hier gezeichnet. */
.fk-kontakt .fluentform .ff-el-form-check-input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  flex: none;
  position: relative;
  background: var(--fk-white);
  border: 1.5px solid var(--fk-sage);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  vertical-align: middle;
  transition: var(--transition-base);
}
.fk-kontakt .fluentform .ff-el-form-check-input[type="checkbox"]:checked {
  background: var(--fk-fir);
  border-color: var(--fk-fir);
}
.fk-kontakt .fluentform .ff-el-form-check-input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--fk-cream);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.fk-kontakt .fluentform .ff-el-tc {
  display: flex;
}
.fk-kontakt .fluentform .ff-el-tc .ff_t_c,
.fk-kontakt .fluentform .ff-el-tc .ff_t_c p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-body);
}
.fk-kontakt .fluentform .ff-el-tc .ff_t_c a {
  color: var(--fk-coral);
}
/* Submit: Primary-Pill (wie Newsletter-Button, Z. ~5946 — !important
   gegen FF-Default + GP-Button-Altregeln). */
.fk-kontakt .fluentform button.ff-btn-submit {
  font-family: var(--font-sans);
  font-size: var(--fs-small) !important;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  padding: 15px 32px !important;
  border-radius: var(--radius-pill) !important;
  background: var(--fk-buy) !important;
  color: var(--text-on-accent) !important;
  border: 1.5px solid var(--fk-buy) !important;
  line-height: 1;
  min-height: 0;
  cursor: pointer;
  box-shadow: 0 8px 20px var(--fk-buy-glow);
  transition: var(--transition-base);
}
.fk-kontakt .fluentform button.ff-btn-submit:hover {
  background: var(--fk-buy-deep) !important;
  border-color: var(--fk-buy-deep) !important;
  color: var(--text-on-accent) !important;
  transform: translateY(-2px);
}
/* Fehler coral, Success als Sage-Notice (wie Newsletter). */
.fk-kontakt .fluentform .ff-el-is-error .text-danger,
.fk-kontakt .fluentform .error,
.fk-kontakt .ff-errors-in-stack {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fk-coral);
}
.fk-kontakt .fluentform .ff-el-is-error .ff-el-form-control {
  border-color: var(--fk-coral) !important;
}
.fk-kontakt .fluentform .ff-message-success {
  margin-top: 16px;
  padding: 14px 20px;
  border: 1px solid var(--fk-sage);
  border-radius: var(--radius-sm);
  background: var(--fk-sage-soft);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--fk-fir);
  box-shadow: none;
}

/* ---- 25. CHECKOUT-BESTELLUEBERSICHT — DOPPELTER PREIS RAUS. Woo-Block
   zeigt pro Artikel rechts den Zeilen-Gesamtpreis (__total-price), dazu
   rendert Germanized darunter (in __description) den Stueckpreis
   (__individual-prices) — beides gleichzeitig sichtbar = Preis doppelt.
   Gewuenschtes Layout: Bild links, rechts daneben Titel ueber volle
   Breite, darunter der (Stueck-)Preis, darunter die Lieferzeit. Der
   rechte Zeilenpreis wird daher ausgeblendet (screen-reader-text bleibt
   fuer A11y erhalten), __description erbt das freiwerdende Platzangebot
   (padding-right war fuer die Preis-Spalte reserviert). NUR die Checkout-
   Sidebar-Order-Summary betroffen — die Warenkorb-Seite rendert keine
   .wc-block-components-order-summary-item (dort Cart-Items-Tabelle,
   bleibt unveraendert). ---- */
body .wc-block-components-order-summary-item__total-price {
  display: none !important;
}
body .wc-block-components-order-summary-item__description {
  padding-right: 0 !important;
}
/* Stueckpreis-Zeile unterm Titel — kompakt, fir, semibold. */
body .wc-block-components-order-summary-item__individual-prices.wc-block-components-product-price {
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--fk-fir);
}
body .wc-block-cart-item__prices {
  margin: 2px 0 0;
}
/* Lieferwagen-Icon vor der Lieferzeit-Zeile (Lucide "truck", wie
   inc/icons.php) — per CSS-Mask in currentColor, damit es das
   bestehende Gruen (--in-stock, Regel 4 oben) mitnimmt. */
body .wc-block-components-product-details .wc-block-components-product-details__gzd-delivery-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body .wc-block-components-product-details .wc-block-components-product-details__gzd-delivery-time::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle r='2' cy='18' cx='17'/%3E%3Ccircle r='2' cy='18' cx='7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle r='2' cy='18' cx='17'/%3E%3Ccircle r='2' cy='18' cx='7'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* ==========================================================================
   Rechtstext-Seiten (0.2.61) — .fk-legal (Body-Klasse via inc/legal-pages.php
   für Impressum / Datenschutzerklärung / AGB / Widerrufsbelehrung). Lange
   Standard-.entry-content-Seiten lesefreundlich branden: ruhige Textbreite
   als weiche Karte, Cormorant-Headings, coral Links, klare Listen. Nur diese
   vier Slugs; Pattern-Seiten (/ueber-uns/, /kontakt/) bleiben unberührt.
   ========================================================================== */
.fk-legal .inside-article {
  max-width: 820px;
  margin-inline: auto;
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(28px, 5vw, 56px);
}
/* Kopf: Titel mit Trennlinie abgesetzt. */
.fk-legal .entry-header {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-soft);
}
.fk-legal h1.entry-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1.15;
  color: var(--fk-fir);
}
/* Fließtext: ruhige Zeilenhöhe, angenehme Laufweite. */
.fk-legal .entry-content {
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-body);
}
.fk-legal .entry-content p {
  margin: 0 0 1.2em;
}
/* Überschriften im Text: h2 display, h3 sans-semibold, beide Fir. */
.fk-legal .entry-content h2,
.fk-legal .entry-content h3,
.fk-legal .entry-content h4 {
  color: var(--fk-fir);
  line-height: 1.3;
  margin: 1.8em 0 0.5em;
}
.fk-legal .entry-content h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 26px;
}
.fk-legal .entry-content h3,
.fk-legal .entry-content h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: 18px;
}
/* /versand/ nutzt GenerateBlocks-Headlines (.gb-headline) statt reiner h2/h3.
   GBs Instanz-CSS überstimmen, damit sie die fk-legal-Typo bekommen. */
.fk-legal .entry-content h2.gb-headline {
  font-family: var(--font-display) !important;
  font-weight: var(--fw-semibold) !important;
  font-size: 26px !important;
  color: var(--fk-fir) !important;
}
.fk-legal .entry-content h3.gb-headline,
.fk-legal .entry-content h4.gb-headline {
  font-family: var(--font-sans) !important;
  font-weight: var(--fw-semibold) !important;
  font-size: 18px !important;
  color: var(--fk-fir) !important;
}
/* <strong> wird in diesen Texten als Pseudo-Überschrift genutzt
   ("Server-Logfiles", "Verantwortlicher" …) — dezent Fir hervorheben. */
.fk-legal .entry-content strong {
  color: var(--fk-fir);
}
/* Links: coral, Hover Fir. */
.fk-legal .entry-content a {
  color: var(--fk-coral);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fk-legal .entry-content a:hover {
  color: var(--fk-fir);
}
/* Listen: klarer Einzug + Zeilenluft. */
.fk-legal .entry-content ul,
.fk-legal .entry-content ol {
  margin: 0 0 1.2em;
  padding-left: 1.4em;
}
.fk-legal .entry-content li {
  margin-bottom: 0.4em;
}
/* Tabellen (z. B. in AGB/Widerruf) scrollbar bei Überbreite. */
.fk-legal .entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.2em;
  font-size: 14px;
}
.fk-legal .entry-content th,
.fk-legal .entry-content td {
  border: 1px solid var(--border-soft);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
@media (max-width: 640px) {
  .fk-legal .entry-content {
    font-size: 15px;
  }
  .fk-legal .entry-content h2 {
    font-size: 22px;
  }
}

/* ==========================================================================
   0.2.62 — Mobile-Header-Suche, Shop-Seite (Intro + Mobil-Filter),
   Suchergebnis-Seite
   ========================================================================== */

/* ---- 1. Mobile-Header: Such-Icon entfernen ----
   Die Suche ist auf Mobile im Offcanvas-Menü (fk-slideout__search); das
   separate Header-Such-Icon (GP-Menu-Bar-Item mit gp-search-Modal-Trigger)
   entfällt damit -> weniger Icons, ruhigerer Header. Warenkorb bleibt. */
#mobile-header .menu-bar-item:has(> a[data-gpmodal-trigger="gp-search"]) {
  display: none;
}

/* ---- 2. Shop-Intro (editierbar aus dem Shop-Seiten-Content, gewrappt in
   .fk-shop-intro via inc/woocommerce.php). Ruhige, zentrierte Lead-Sektion
   über dem Produktgrid; Cormorant-Überschrift, angenehme Textbreite. ---- */
.fk-shop-intro {
  max-width: 760px;
  /* Luftiger: deutlicher Abstand nach oben (klebte vorher am Menü). */
  margin: clamp(32px, 6vw, 64px) auto 44px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-body);
}
.fk-shop-intro > :first-child { margin-top: 0; }
.fk-shop-intro > :last-child { margin-bottom: 0; }
/* Eyebrow (kleine Zeile über der Überschrift, z. B. „Handgemacht in
   Bayreuth"). Content trägt die Klasse fk-eyebrow (Shop-Seiten-Absatz). */
.fk-shop-intro .fk-eyebrow {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-chip, 1.5px);
  text-transform: uppercase;
  color: var(--fk-terracotta);
}
.fk-shop-intro h1,
.fk-shop-intro h2,
.fk-shop-intro h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--fk-fir);
  line-height: 1.2;
  margin: 0 0 14px;
}
.fk-shop-intro h1 { font-size: clamp(28px, 4.5vw, 38px); }
.fk-shop-intro h2 { font-size: clamp(26px, 4vw, 34px); }
.fk-shop-intro p { margin: 0 0 1em; }
.fk-shop-intro a { color: var(--fk-coral); text-decoration: underline; text-underline-offset: 2px; }
.fk-shop-intro a:hover { color: var(--fk-fir); }
@media (max-width: 600px) {
  .fk-shop-intro { font-size: 15px; margin-bottom: 28px; text-align: center; }
}

/* ---- 3. Shop-Filter mobil: NUR den "Alle Filter"-Button zeigen ----
   FiboFilters rendert im Mobile-Container (.fibofilters-mobile-filters,
   data-max-screen=1024) die Einzelfilter-Buttons (Preis, Kategorien …) plus
   den "Alle Filter"-Button (js-fibofilters-filter-button-all-filters). Die
   Einzelfilter ausblenden -> ein aufgeräumter Button, der das komplette
   Filter-Panel öffnet. */
.fibofilters-mobile-filters .fibofilters-filter-button:not(.js-fibofilters-filter-button-all-filters) {
  display: none !important;
}
/* Der verbleibende "Alle Filter"-Button darf die Breite nehmen und mittig
   sitzen. */
.fibofilters-mobile-filters {
  justify-content: flex-start;
}

/* ---- 3b. Shop-Toolbar mobil: Filter (links) + Sortieren (rechts) in EINER
   Zeile, Ergebnis-Anzahl darunter. Die drei Teile (FiboFilters-Mobil-Container,
   woocommerce-ordering, result-count) sind DOM-Geschwister in #wc-column-
   container; per flex-wrap + order visuell angeordnet. Beide Steuerungen sind
   bereits Pills gleicher Höhe (~39px) -> einheitliche UI-Zeile. Nur ≤1024px,
   wo der FiboFilters-Mobil-Container aktiv ist (Desktop unberührt). */
@media (max-width: 1024px) {
  body.woocommerce #wc-column-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 4px;
  }
  /* Standard: jedes Kind volle Breite (eigene Zeile). */
  body.woocommerce #wc-column-container > * {
    flex-basis: 100%;
  }
  /* Zeile 1: Filter links (inhaltsbreit), Sortieren rechts (füllt Rest).
     !important auf width, weil FiboFilters den Mobil-Container auf 100%
     Breite zieht -> sonst schiebt er das Sortieren in Zeile 2. */
  body.woocommerce #wc-column-container .fibofilters-mobile-filters-container {
    order: 2;
    flex: 0 0 auto;
    width: auto !important;
    max-width: max-content;
    margin: 0;
  }
  body.woocommerce #wc-column-container .fibofilters-mobile-filters {
    display: inline-flex;
    width: auto;
    /* FiboFilters gibt der Leiste padding-bottom:20px + dem Button
       margin-bottom:8px -> Container wird 70px statt 42px hoch, der Pill sitzt
       oben, und align-items:center schiebt das 42px-Sort-Pill 14px tiefer.
       Beide Extra-Abstände nullen -> Container = 42px -> aligned. */
    padding-bottom: 0 !important;
    align-items: center;
  }
  body.woocommerce #wc-column-container .fibofilters-mobile-filters .fibofilters-filter-button {
    margin-bottom: 0 !important;
  }
  body.woocommerce #wc-column-container .woocommerce-ordering {
    order: 3;
    /* flex-basis 0 (nicht auto): sonst nimmt das Formular seine ~353px
       Content-Breite als Basis, und flex-wrap bricht es in Zeile 2, BEVOR
       es schrumpfen kann. Mit Basis 0 wächst es in die Restbreite rechts
       neben dem Filter (kein Umbruch). */
    flex: 1 1 0;
    min-width: 0;
    margin: 0 0 0 12px;
    text-align: right;
  }
  /* Sortier-Select darf mitschrumpfen (Text ggf. gekürzt), damit die Zeile
     bei 412px nicht umbricht. */
  body.woocommerce #wc-column-container .woocommerce-ordering select {
    max-width: 100%;
    width: auto;
  }
  /* ---- EINHEITLICHE PILL für Filter UND Sortieren ----
     Vorher uneinheitlich (Filter: sage, Pill, 39.9px, uppercase; Sort: weiß,
     8px-Radius, 44.8px) -> unterschiedliche Optik + nicht aligned (centerY-
     Diff 13.8px). Jetzt identische Fläche/Höhe/Rahmen/Radius/Typo; gleiche
     42px-Höhe -> in der Flex-Zeile (align-items:center) exakt aligned.
     !important schlägt die sage-Filter-Regel (~Z.3683) und die abweichende
     Sort-Select-Regel. */
  body.woocommerce #wc-column-container .fibofilters-mobile-filters-container .fibofilters-filter-button.js-fibofilters-filter-button-all-filters,
  body.woocommerce #wc-column-container .woocommerce-ordering select.orderby {
    height: 42px !important;
    box-sizing: border-box !important;
    border: 1.5px solid var(--border-soft) !important;
    border-radius: var(--radius-pill) !important;
    color: var(--fk-fir) !important;
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: 0.2px !important;
    box-shadow: none !important;
  }
  /* Filter-Button: weiße Fläche, Icon + Text zentriert. NUR der sichtbare
     „Alle Filter"-Button (js-…all-filters) — sonst würde display:inline-flex
     die per display:none ausgeblendeten Einzelfilter (Preis/Kategorien) wieder
     einblenden. */
  body.woocommerce #wc-column-container .fibofilters-mobile-filters-container .fibofilters-filter-button.js-fibofilters-filter-button-all-filters {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 0 18px !important;
    background: var(--fk-white) !important;
  }
  body.woocommerce #wc-column-container .fibofilters-mobile-filters-container .fibofilters-filter-button.js-fibofilters-filter-button-all-filters:hover {
    background: var(--fk-cream) !important;
    border-color: var(--fk-fir) !important;
    color: var(--fk-fir) !important;
  }
  /* Sortier-Select: weiße Fläche + eigener Chevron (appearance:none), Platz
     rechts für den Pfeil. */
  body.woocommerce #wc-column-container .woocommerce-ordering select.orderby {
    padding: 0 34px 0 18px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background: var(--fk-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232e4341' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center !important;
    cursor: pointer;
  }
  /* Zeile 2: Ergebnis-Anzahl darunter. */
  body.woocommerce #wc-column-container .woocommerce-result-count {
    order: 4;
    margin: 8px 0 20px;
  }
  /* Restliche Geschwister ober-/unterhalb einsortieren. */
  body.woocommerce #wc-column-container .fibofilters-horizontal-filters-container { order: 0; }
  body.woocommerce #wc-column-container .woocommerce-notices-wrapper { order: 1; }
  body.woocommerce #wc-column-container .fibofilters-applied-filters-container { order: 5; }
  body.woocommerce #wc-column-container .fibofilters-show-previous-button-container { order: 6; }
  body.woocommerce #wc-column-container ul.products { order: 7; }
  body.woocommerce #wc-column-container .fibofilters-show-more-button-container { order: 8; }
  body.woocommerce #wc-column-container nav.woocommerce-pagination { order: 9; }
}

/* ---- 4. Suchergebnis-Seite (search.php): Suchformular im Sektionskopf als
   zentrierte Pill mit rundem Fir-Submit. Grid/Karten erben .fk-posts-grid /
   .fk-blog-card. ---- */
.fk-search__form {
  max-width: 480px;
  margin: 20px auto 0;
}
.fk-search__form form.search-form {
  display: flex;
  gap: 10px;
  margin: 0;
  align-items: stretch;
}
.fk-search__form form.search-form label {
  flex: 1 1 auto;
  margin: 0;
  display: block;
}
.fk-search__form .search-field {
  width: 100%;
  border-radius: var(--radius-pill) !important;
  padding: 13px 20px !important;
}
.fk-search__form .search-submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0 !important;
  background: var(--fk-buy) !important;
  color: var(--text-on-accent) !important;
  border: 1.5px solid var(--fk-buy) !important;
  border-radius: 50% !important;
  box-shadow: none;
  cursor: pointer;
  transition: var(--transition-base);
}
.fk-search__form .search-submit:hover {
  background: var(--fk-buy-deep) !important;
  border-color: var(--fk-buy-deep) !important;
  transform: translateY(-2px);
}
.fk-search__form .search-submit .gp-icon svg {
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   0.2.81 — Bestellabschluss / „Bestellung erhalten" (WooCommerce order-received
   + Konto-Bestellansicht). Standard-Woo-Markup (teils Germanized-Ergänzungen):
   .woocommerce-order > Danke-Notice, ul.woocommerce-order-overview,
   table.woocommerce-table--order-downloads/details (.order_details),
   .woocommerce-customer-details > address. Branding: weiche Karten/Tabellen,
   sage Header, Fir-Werte, Hairline-Zeilen. Scope .woocommerce-order lässt
   Warenkorb/Kasse unberührt.
   ========================================================================== */
.woocommerce-order {
  font-family: var(--font-sans);
}
/* Danke-Nachricht */
.woocommerce-order .woocommerce-thankyou-order-received {
  font-size: 16px;
  color: var(--text-body);
  margin: 0 0 32px;
  padding: 0;
  border: 0;
  background: none;
}
/* Übersicht (Bestellnummer · Datum · Gesamt · Zahlungsart) als Karten-Zeile */
.woocommerce-order ul.woocommerce-order-overview {
  list-style: none;
  margin: 0 0 44px;
  padding: 22px 28px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  display: flex;
  flex-wrap: wrap;
  gap: 22px 44px;
}
.woocommerce-order ul.woocommerce-order-overview li {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.4;
}
.woocommerce-order ul.woocommerce-order-overview li strong {
  display: block;
  margin-top: 5px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fk-fir);
}
/* Abschnitts-Überschriften (Downloads / Bestelldetails / Rechnungsadresse):
   erben bereits Cormorant aus der Seiten-Typo — nur Rhythmus setzen. */
.woocommerce-order .woocommerce-order-details__title,
.woocommerce-order .woocommerce-column__title,
.woocommerce-order h2 {
  margin: 0 0 18px;
}
/* Tabellen (Downloads + Bestelldetails) als weiche Karte */
/* Rand via box-shadow (immun gegen border-width-/border-collapse-Resets von
   Woo-Core, die border=0 erzwingen); Radius + separate für gerundete Ecken.
   .shop_table-Klasse mitnehmen -> höhere Spezifität. */
.woocommerce-order table.order_details.shop_table,
.woocommerce-order table.order_details {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 0 !important;
  box-shadow: 0 0 0 1px var(--border-soft);
  border-radius: var(--radius-lg) !important;
  margin: 0 0 44px;
  font-size: 14px;
  background: var(--surface-card);
  overflow: hidden;
}
.woocommerce-order table.order_details thead th {
  background: var(--fk-sage-soft) !important;
  color: var(--fk-fir);
  font-weight: 600;
  text-align: left;
  padding: 15px 22px;
  font-size: 13px;
  border: 0 !important;
}
.woocommerce-order table.order_details tbody td,
.woocommerce-order table.order_details tbody th {
  padding: 15px 22px;
  border: 0 !important;
  /* Zeilen-Hairline via inset-box-shadow (border wird von Woo genullt). */
  box-shadow: inset 0 1px 0 0 var(--border-hairline);
  color: var(--text-body);
  vertical-align: top;
  background: transparent;
}
.woocommerce-order table.order_details tbody tr:first-child td,
.woocommerce-order table.order_details tbody tr:first-child th {
  box-shadow: none;
}
.woocommerce-order table.order_details a {
  color: var(--fk-coral);
  text-decoration: none;
}
.woocommerce-order table.order_details a:hover {
  color: var(--fk-coral-deep, var(--fk-fir));
}
/* Fuß (Zwischensumme / Gesamt / Zahlungsart) abgesetzt */
.woocommerce-order table.order_details tfoot th,
.woocommerce-order table.order_details tfoot td {
  padding: 14px 22px;
  border: 0 !important;
  box-shadow: inset 0 1px 0 0 var(--border-hairline);
  background: var(--fk-cream);
  color: var(--fk-fir);
  font-weight: 600;
  text-align: left;
}
.woocommerce-order table.order_details tfoot tr:last-child th,
.woocommerce-order table.order_details tfoot tr:last-child td {
  font-size: 16px;
}
/* Ecken runden (overflow:hidden clippt Tabellen nicht zuverlässig -> die
   Eck-Zellen selbst runden): oben am thead, unten am letzten Fuß bzw. — wenn
   kein tfoot da ist (Downloads-Tabelle) — an der letzten tbody-Zeile. */
.woocommerce-order table.order_details thead tr:first-child th:first-child {
  border-top-left-radius: var(--radius-lg);
}
.woocommerce-order table.order_details thead tr:first-child th:last-child {
  border-top-right-radius: var(--radius-lg);
}
.woocommerce-order table.order_details tfoot tr:last-child > :first-child {
  border-bottom-left-radius: var(--radius-lg);
}
.woocommerce-order table.order_details tfoot tr:last-child > :last-child {
  border-bottom-right-radius: var(--radius-lg);
}
.woocommerce-order table.woocommerce-table--order-downloads tbody tr:last-child > :first-child {
  border-bottom-left-radius: var(--radius-lg);
}
.woocommerce-order table.woocommerce-table--order-downloads tbody tr:last-child > :last-child {
  border-bottom-right-radius: var(--radius-lg);
}
/* Download-Button — Fir-Pill wie die Kauf-Buttons (Woo rendert ihn sonst als
   scharfkantiges Rechteck). */
.woocommerce-order td.download-file a,
.woocommerce-order .woocommerce-MyAccount-downloads-file {
  display: inline-block;
  box-sizing: border-box;
  background: var(--fk-buy) !important;
  color: var(--text-on-accent) !important;
  border: 1.5px solid var(--fk-buy) !important;
  border-radius: var(--radius-pill) !important;
  padding: 12px 24px !important;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-button);
  text-decoration: none;
  white-space: normal;
  line-height: 1.3;
  transition: var(--transition-base);
}
.woocommerce-order td.download-file a:hover,
.woocommerce-order .woocommerce-MyAccount-downloads-file:hover {
  background: var(--fk-buy-deep) !important;
  border-color: var(--fk-buy-deep) !important;
  color: var(--text-on-accent) !important;
  transform: translateY(-2px);
}
/* Rechnungs-/Kundenadresse als Karte */
.woocommerce-order .woocommerce-customer-details address,
.woocommerce-order .woocommerce-customer-details .woocommerce-customer-details--phone {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  padding: 24px 28px;
  font-style: normal;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-body);
}
.woocommerce-order .woocommerce-customer-details address a {
  color: var(--fk-coral);
  text-decoration: none;
}
/* Germanized-Rechtszeilen im Bestellabschluss dezent. */
.woocommerce-order .wc-gzd-additional-info,
.woocommerce-order .wc-gzd-order-legal-notice,
.woocommerce-order .legal-price-info {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}
/* Verify-Email-Gate (Gastbestellung) hübsch: Formular als Karte, Input-Pill,
   Fir-Button erbt aus der Button-Basis. */
.woocommerce-order form.woocommerce-verify-email {
  max-width: 460px;
  margin: 8px 0 0;
  padding: 24px 28px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}
.woocommerce-order form.woocommerce-verify-email .input-text {
  width: 100%;
  border: 1.5px solid var(--border-soft) !important;
  border-radius: var(--radius-pill) !important;
  padding: 12px 18px !important;
  background: #fff !important;
}
@media (max-width: 600px) {
  .woocommerce-order ul.woocommerce-order-overview {
    gap: 16px 28px;
    padding: 18px 20px;
  }
  /* table-layout:fixed + Umbruch: der thead erzwang sonst eine intrinsische
     Breite > Viewport (12px horizontaler Overflow). */
  .woocommerce-order table.order_details {
    table-layout: fixed;
    width: 100%;
  }
  .woocommerce-order table.order_details thead th,
  .woocommerce-order table.order_details tbody td,
  .woocommerce-order table.order_details tbody th,
  .woocommerce-order table.order_details tfoot th,
  .woocommerce-order table.order_details tfoot td {
    padding: 12px 14px;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}
/* Downloads-Tabelle mobil: Woo stapelt sie im shop_table_responsive-Modus als
   Label-links / Wert-rechts — der lange Produktname wird dabei rechtsbündig
   gequetscht (unschön). Sauber untereinander stapeln: Label als kleine
   Zeile drüber, Wert linksbündig über die volle Breite, Button voll breit.
   Woo-Responsive greift bei 768px -> gleicher Breakpoint. */
@media (max-width: 768px) {
  .woocommerce-order table.woocommerce-table--order-downloads tbody td {
    display: block;
    width: 100% !important;
    text-align: left !important;
    padding: 13px 20px;
    box-shadow: inset 0 1px 0 0 var(--border-hairline);
  }
  .woocommerce-order table.woocommerce-table--order-downloads tbody tr:first-child td:first-child {
    box-shadow: none;
  }
  .woocommerce-order table.woocommerce-table--order-downloads tbody td::before {
    content: attr(data-title);
    float: none !important;
    display: block !important;
    width: auto !important;
    margin: 0 0 5px !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .woocommerce-order table.woocommerce-table--order-downloads td.download-product a {
    color: var(--fk-fir);
    font-weight: 600;
  }
  .woocommerce-order table.woocommerce-table--order-downloads td.download-file a {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 2px;
  }
}

/* ==========================================================================
   0.2.89 — Wunschkranz-Anfrage (/wunschkranz-anfrage/, Fluent Form #6)
   4-Schritt-Formular im Farbenkranz-Look. Scope: .fluentform_wrapper_6 —
   der Gutenberg-Wrapper trägt SELBST auch .fluentform, daher überall
   verkettet (.fluentform.fluentform_wrapper_6 = 0,2,0 am Element) plus
   Nachfahre → schlägt die Plugin-Regeln (.fluentform .ff-*, 0,2,0)
   unabhängig von der Ladereihenfolge. !important nur dort, wo die
   Unified-Form-Controls (Z. ~293) bzw. FF-Defaults selbst mit !important
   malen. Die Seite läuft im Fließtext-Template (.fk-legal-Karte) — deren
   ul/li/p-Prosa-Regeln werden hier gezielt neutralisiert.
   Struktur-Hooks (FF 6.2): .ff-step-titles (li.ff_active/.ff_completed,
   counter), .fluentform-step, .ff-el-form-check (Chips), .ff_el_checkable_
   photo_holders + .ff-el-image-holder (Bildauswahl, Input dort von FF
   versteckt, .ff_item_selected), .step-nav (Zurück/Weiter), .ff-el-tc
   (Datenschutz), .ff_upload_btn (Upload), flatpickr (Datepicker).
   ========================================================================== */

/* ---- 1. Grundlayout: Gruppen-Rhythmus, fk-legal-Prosa neutralisieren ---- */
.fluentform.fluentform_wrapper_6 {
  margin-top: 6px;
}
.fluentform.fluentform_wrapper_6 .ff-el-group {
  margin: 0 0 30px;
}
.fluentform.fluentform_wrapper_6 .ff-el-group:last-child {
  margin-bottom: 0;
}
/* Fragen-Labels: das sind hier echte Fragen, keine Mikro-Labels —
   Karla semibold in Fir, Tooltip-Icon sitzt daneben in der Flex-Zeile. */
.fluentform.fluentform_wrapper_6 .ff-el-input--label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 12px;
}
.fluentform.fluentform_wrapper_6 .ff-el-input--label label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--fk-fir);
}
/* Pflicht-Sternchen coral statt FF-Rot. */
.fluentform.fluentform_wrapper_6 .ff-el-is-required.asterisk-right label:after {
  color: var(--fk-coral);
}
/* Tooltip-Icon: sage, Hover fir. */
.fluentform.fluentform_wrapper_6 .ff-el-tooltip {
  line-height: 0;
  cursor: help;
  align-self: center;
}
.fluentform.fluentform_wrapper_6 .ff-el-tooltip svg {
  width: 17px;
  height: 17px;
  fill: var(--fk-sage);
  transition: fill 160ms ease;
}
.fluentform.fluentform_wrapper_6 .ff-el-tooltip:hover svg {
  fill: var(--fk-fir);
}

/* ---- 2. Schritt-Anzeige: nummerierte Kreise + Verbinderlinie ----
   FF liefert counter + li.ff_active/.ff_completed; hier nur Optik:
   erledigt = sage-Kreis, aktiv = fir-Kreis, kommend = weiß/sage-Rand. */
.fk-legal .entry-content .fluentform.fluentform_wrapper_6 .ff-step-titles {
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
}
.fk-legal .entry-content .fluentform.fluentform_wrapper_6 .ff-step-titles li {
  margin: 0;
}
.fluentform.fluentform_wrapper_6 .ff-step-titles li {
  font-family: var(--font-sans);
}
.fluentform.fluentform_wrapper_6 .ff-step-titles li:before {
  width: 34px;
  height: 34px;
  line-height: 31px;
  border-radius: var(--radius-circle);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  background: var(--fk-white);
  border: 1.5px solid var(--fk-sage);
  color: var(--text-muted);
  margin-bottom: 8px;
  transition: var(--transition-base);
}
/* Verbinderlinie zwischen den Kreisen. */
.fluentform.fluentform_wrapper_6 .ff-step-titles li:after {
  top: 16px;
  height: 2px;
  background: var(--fk-cream-deep);
}
.fluentform.fluentform_wrapper_6 .ff-step-titles li span {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Erledigte Schritte: sage. */
.fluentform.fluentform_wrapper_6 .ff-step-titles li.ff_completed:before {
  background: var(--fk-sage);
  border-color: var(--fk-sage);
  color: var(--fk-white);
}
.fluentform.fluentform_wrapper_6 .ff-step-titles li.ff_completed:after {
  background: var(--fk-sage);
}
.fluentform.fluentform_wrapper_6 .ff-step-titles li.ff_completed span {
  color: var(--fk-green-mid);
}
/* Aktiver Schritt: fir. */
.fluentform.fluentform_wrapper_6 .ff-step-titles li.ff_active:before {
  background: var(--fk-fir);
  border-color: var(--fk-fir);
  color: var(--fk-cream);
}
.fluentform.fluentform_wrapper_6 .ff-step-titles li.ff_active:after {
  background: var(--fk-sage);
}
.fluentform.fluentform_wrapper_6 .ff-step-titles li.ff_active span {
  color: var(--fk-fir);
}

/* ---- 3. Text-Antworten als Chips (Radios/Checkboxen ohne Bild) ----
   Jede Option wird eine große, klickbare Pill: cream-soft Fläche, sage
   Hover, Auswahl = sage-Wash + fir Text. Radio/Checkbox bleiben sichtbar
   (custom gezeichnet) — große Klickfläche, klarer Zustand. */
.fluentform.fluentform_wrapper_6 .ff-el-input--content:has(> .ff-el-form-check:not(.ff-el-tc):not(.ff-el-image-holder)) {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.fluentform.fluentform_wrapper_6 .ff-el-form-check {
  margin: 0;
}
.fluentform.fluentform_wrapper_6 .ff-el-form-check:not(.ff-el-tc):not(.ff-el-image-holder) .ff-el-form-check-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 11px 20px 11px 14px;
  background: var(--fk-cream-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--text-body);
  cursor: pointer;
  transition: var(--transition-base);
}
.fluentform.fluentform_wrapper_6 .ff-el-form-check:not(.ff-el-tc):not(.ff-el-image-holder) .ff-el-form-check-label:hover {
  background: var(--fk-white);
  border-color: var(--fk-sage);
}
.fluentform.fluentform_wrapper_6 .ff-el-form-check:not(.ff-el-tc):not(.ff-el-image-holder) .ff-el-form-check-label:has(input:checked) {
  background: var(--fk-sage-soft);
  border-color: var(--fk-sage);
  color: var(--fk-fir);
}
.fluentform.fluentform_wrapper_6 .ff-el-form-check:not(.ff-el-tc):not(.ff-el-image-holder) .ff-el-form-check-label:has(input:focus-visible) {
  box-shadow: 0 0 0 3px var(--fk-sage-soft);
}
/* Custom-Radio: 18px-Kreis, checked = fir mit weißem Innenring. */
.fluentform.fluentform_wrapper_6 .ff-el-form-check:not(.ff-el-tc) input.ff-el-form-check-radio {
  -webkit-appearance: none;
  appearance: none;
  position: static;
  top: 0;
  flex: 0 0 auto;
  box-sizing: border-box;
  /* !important: irgendeine Altregel drückte die Box auf 18x15 (oval). */
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--fk-sage);
  border-radius: var(--radius-circle);
  background: var(--fk-white);
  cursor: pointer;
  transition: var(--transition-base);
}
/* Punkt als radial-gradient statt Inset-Shadow: bleibt selbst dann rund,
   wenn eine Fremdregel die Box verzerrt (war zuvor oval). */
.fluentform.fluentform_wrapper_6 .ff-el-form-check:not(.ff-el-tc) input.ff-el-form-check-radio:checked {
  border-color: var(--fk-fir);
  background-color: var(--fk-white);
  background-image: radial-gradient(circle, var(--fk-fir) 0 4px, transparent 4.5px);
  background-position: center;
  background-repeat: no-repeat;
}
/* Custom-Checkbox (gleiche Sprache wie Block-Checkout): checked = fir + Haken. */
.fluentform.fluentform_wrapper_6 .ff-el-form-check:not(.ff-el-tc) input.ff-el-form-check-checkbox {
  -webkit-appearance: none;
  appearance: none;
  position: static;
  top: 0;
  flex: 0 0 auto;
  box-sizing: border-box;
  /* !important: irgendeine Altregel drückte die Box auf 18x15 (oval). */
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--fk-sage);
  border-radius: 5px;
  background: var(--fk-white);
  cursor: pointer;
  transition: var(--transition-base);
}
.fluentform.fluentform_wrapper_6 .ff-el-form-check:not(.ff-el-tc) input.ff-el-form-check-checkbox:checked {
  border-color: var(--fk-fir);
  background: var(--fk-fir) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f6f2e9' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / 11px 11px;
}
.fluentform.fluentform_wrapper_6 .ff-el-form-check:not(.ff-el-tc) input.ff-el-form-check-input:focus {
  outline: none;
}

/* ---- 4. Bildauswahl (Form / Farben / Stil) als Karten-Grid ----
   FF versteckt die Inputs in .ff_list_buttons-Gruppen selbst (opacity 0);
   Auswahlzustand kommt über .ff_item_selected (FF-JS) UND :has(:checked).
   Karte: quadratisches Bild, Titel darunter, Auswahl = fir-Rahmen +
   Häkchen-Badge oben rechts im Bild. */
.fluentform.fluentform_wrapper_6 .ff_el_checkable_photo_holders {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 14px;
  margin: 0;
  overflow: visible;
}
.fluentform.fluentform_wrapper_6 .ff-el-form-check.ff-el-image-holder {
  float: none;
  width: auto;
  margin: 0;
  position: relative;
}
.fluentform.fluentform_wrapper_6 .ff-el-image-holder label.ff-el-image-input-src {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  background-color: var(--fk-cream-deep);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: var(--transition-base);
}
.fluentform.fluentform_wrapper_6 .ff-el-image-holder:hover label.ff-el-image-input-src {
  border-color: var(--fk-sage);
}
.fluentform.fluentform_wrapper_6 .ff-el-image-holder .ff-el-form-check-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0 2px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.35;
  text-align: center;
  color: var(--text-body);
  cursor: pointer;
  transition: var(--transition-base);
}
/* Auswahl: fir-Rahmen + sage-Ring + Badge — die Beschriftung bleibt
   bewusst in ALLEN Zuständen unverändert (Kundenwunsch 0.2.92). */
.fluentform.fluentform_wrapper_6 .ff-el-image-holder.ff_item_selected label.ff-el-image-input-src,
.fluentform.fluentform_wrapper_6 .ff-el-image-holder:has(input:checked) label.ff-el-image-input-src {
  border-color: var(--fk-fir);
  box-shadow: 0 0 0 3px var(--fk-sage-soft);
}
.fluentform.fluentform_wrapper_6 .ff-el-image-holder.ff_item_selected label.ff-el-image-input-src::after,
.fluentform.fluentform_wrapper_6 .ff-el-image-holder:has(input:checked) label.ff-el-image-input-src::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-circle);
  background: var(--fk-fir) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f6f2e9' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
  box-shadow: var(--shadow-sm);
}
.fluentform.fluentform_wrapper_6 .ff-el-image-holder:has(input:focus-visible) label.ff-el-image-input-src {
  box-shadow: 0 0 0 3px var(--fk-sage-soft);
}

/* ---- 5. Texteingaben: Pill-Inputs, Textareas weich, Fokus sage ----
   body-Prefix + !important gegen die Unified-Form-Controls (Z. ~293),
   gleiche Waffe, spätere Quelle gewinnt — wie beim Kontaktformular. */
body .fluentform.fluentform_wrapper_6 input.ff-el-form-control:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  background: var(--fk-white) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-pill) !important;
  padding: 13px 20px !important;
  height: auto;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.3;
  color: var(--fk-fir);
  box-shadow: none;
}
body .fluentform.fluentform_wrapper_6 textarea.ff-el-form-control {
  width: 100%;
  min-height: 120px;
  background: var(--fk-white) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-md) !important;
  padding: 13px 18px !important;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--fk-fir);
  box-shadow: none;
}
.fluentform.fluentform_wrapper_6 .ff-el-form-control::placeholder {
  color: var(--text-muted);
}
body .fluentform.fluentform_wrapper_6 input.ff-el-form-control:not([type="checkbox"]):not([type="radio"]):focus,
body .fluentform.fluentform_wrapper_6 textarea.ff-el-form-control:focus {
  border-color: var(--fk-sage) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--fk-sage-soft) !important;
}

/* ---- 6. Bild-Upload: gestrichelte Dropfläche statt grauem Button ---- */
.fluentform.fluentform_wrapper_6 .ff_upload_btn.ff-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 26px 20px;
  /* !important: FF-Uploader-CSS lädt NACH style.css und malt blau-dashed. */
  background: var(--fk-cream-soft) !important;
  border: 1.5px dashed var(--fk-sage) !important;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-body);
  text-align: center;
  cursor: pointer;
  transition: var(--transition-base);
}
.fluentform.fluentform_wrapper_6 .ff_upload_btn.ff-btn:hover {
  background: var(--fk-sage-soft) !important;
  border-color: var(--fk-green-mid) !important;
  color: var(--fk-fir);
}

/* ---- 7. Datenschutz-Consent (.ff-el-tc): Flex-Zeile, gebrandete Box ---- */
.fluentform.fluentform_wrapper_6 .ff-el-form-check.ff-el-tc {
  margin: 0;
}
.fluentform.fluentform_wrapper_6 .ff_tc_label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  cursor: pointer;
}
.fluentform.fluentform_wrapper_6 .ff_tc_checkbox {
  flex: 0 0 auto;
  display: inline-flex;
  margin-top: 1px;
}
.fluentform.fluentform_wrapper_6 .ff_tc_checkbox input.ff-el-form-check-input {
  -webkit-appearance: none;
  appearance: none;
  position: static;
  width: 19px;
  height: 19px;
  margin: 0;
  border: 1.5px solid var(--fk-sage);
  border-radius: 5px;
  background: var(--fk-white);
  cursor: pointer;
  transition: var(--transition-base);
}
.fluentform.fluentform_wrapper_6 .ff_tc_checkbox input.ff-el-form-check-input:checked {
  border-color: var(--fk-fir);
  background: var(--fk-fir) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f6f2e9' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
}
.fluentform.fluentform_wrapper_6 .ff_tc_checkbox input.ff-el-form-check-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--fk-sage-soft);
}
.fk-legal .entry-content .fluentform.fluentform_wrapper_6 .ff_t_c,
.fk-legal .entry-content .fluentform.fluentform_wrapper_6 .ff_t_c p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-body);
}
.fluentform.fluentform_wrapper_6 .ff_t_c a {
  color: var(--fk-coral);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fluentform.fluentform_wrapper_6 .ff_t_c a:hover {
  color: var(--fk-fir);
}
/* Hinweis vor dem Absenden ("kostenlose, unverbindliche Anfrage"):
   sanfte cream-yellow Hinweisbox. */
.fk-legal .entry-content .fluentform.fluentform_wrapper_6 .ff-custom_html p {
  margin: 0;
  padding: 14px 18px;
  background: var(--fk-cream-yellow);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fk-fir);
}

/* ---- 8. Navigation: Zurück (Ghost) / Weiter + Absenden (Primary-Pill) ---- */
.fluentform.fluentform_wrapper_6 .step-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding-top: 26px;
  border-top: 1px solid var(--border-hairline);
}
.fluentform.fluentform_wrapper_6 .step-nav .ff-btn {
  float: none !important;
}
.fluentform.fluentform_wrapper_6 .ff-btn-next {
  margin-left: auto;
}
/* :not(#_)-Boost: die globale Sekundär-Button-Regel (Z. ~221, 9×:not +
   !important) schlägt sonst jede Klassen-Spezifität — wie bei FiboFilters. */
.fluentform.fluentform_wrapper_6 .ff-btn-next:not(#_),
.fluentform.fluentform_wrapper_6 button.ff-btn-submit:not(#_) {
  font-family: var(--font-sans);
  font-size: var(--fs-small) !important;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  padding: 15px 32px !important;
  border-radius: var(--radius-pill) !important;
  background: var(--fk-buy) !important;
  color: var(--text-on-accent) !important;
  border: 1.5px solid var(--fk-buy) !important;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition-base);
}
.fluentform.fluentform_wrapper_6 .ff-btn-next:not(#_):hover,
.fluentform.fluentform_wrapper_6 button.ff-btn-submit:not(#_):hover {
  background: var(--fk-buy-deep) !important;
  border-color: var(--fk-buy-deep) !important;
  box-shadow: 0 8px 22px var(--fk-buy-glow);
}
.fluentform.fluentform_wrapper_6 .ff-btn-prev:not(#_) {
  font-family: var(--font-sans);
  font-size: var(--fs-small) !important;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  padding: 15px 26px !important;
  border-radius: var(--radius-pill) !important;
  background: transparent !important;
  color: var(--fk-fir) !important;
  border: 1.5px solid var(--fk-sage) !important;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition-base);
}
.fluentform.fluentform_wrapper_6 .ff-btn-prev:not(#_):hover {
  background: var(--fk-sage-soft) !important;
}
/* Letzter Schritt: FFs 2-Spalten-Tabelle (Zurück | Absenden) auf Flex. */
.fluentform.fluentform_wrapper_6 .ff-inner_submit_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding-top: 26px;
  border-top: 1px solid var(--border-hairline);
}
.fluentform.fluentform_wrapper_6 .ff-inner_submit_container .ff-t-cell {
  display: block;
  width: auto !important;
  padding: 0;
}
.fluentform.fluentform_wrapper_6 .ff-inner_submit_container .ff-el-group,
.fluentform.fluentform_wrapper_6 .ff-inner_submit_container .step-nav {
  margin: 0;
  padding: 0;
  border: 0;
}

/* ---- 9. Fehler & Erfolg im Markenklang ---- */
.fluentform.fluentform_wrapper_6 .ff-el-is-error .ff-el-form-control {
  border-color: var(--fk-coral) !important;
}
.fluentform.fluentform_wrapper_6 .error,
.fluentform.fluentform_wrapper_6 .text-danger,
.fluentform.fluentform_wrapper_6 .ff-errors-in-stack {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fk-coral);
}
.fluentform.fluentform_wrapper_6 .ff-el-is-error .ff-el-form-check:not(.ff-el-tc):not(.ff-el-image-holder) .ff-el-form-check-label {
  border-color: var(--fk-coral-soft);
}
.ff-message-success {
  background: var(--fk-sage-soft);
  border: 1px solid var(--fk-sage);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--fk-fir);
}

/* ---- 10. Flatpickr (Wunschtermin): Akzente fir/sage statt Blau ----
   Kalender hängt an <body>, daher global — greift nur, wo flatpickr lädt. */
/* .flatpickr-calendar-Prefix: flatpickr.min.css lädt nach style.css,
   gleiche Spezifität würde verlieren. */
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-day.selected:focus {
  background: var(--fk-fir);
  border-color: var(--fk-fir);
  color: var(--fk-cream);
}
.flatpickr-calendar .flatpickr-day.today:not(.selected) {
  border-color: var(--fk-sage);
}
.flatpickr-calendar .flatpickr-day:not(.selected):hover {
  background: var(--fk-sage-soft);
  border-color: var(--fk-sage-soft);
}

/* ---- 11. Mobil: Chips volle Breite, kompakteres Bild-Grid ---- */
@media (max-width: 560px) {
  .fluentform.fluentform_wrapper_6 .ff-el-input--content:has(> .ff-el-form-check:not(.ff-el-tc):not(.ff-el-image-holder)) {
    gap: 8px;
  }
  .fluentform.fluentform_wrapper_6 .ff-el-form-check:not(.ff-el-tc):not(.ff-el-image-holder) {
    flex: 1 1 100%;
  }
  .fluentform.fluentform_wrapper_6 .ff_el_checkable_photo_holders {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
  }
  /* Schrittleiste: nur der aktive Schritt trägt sein Label. */
  .fluentform.fluentform_wrapper_6 .ff-step-titles li:not(.ff_active) span {
    display: none;
  }
  .fluentform.fluentform_wrapper_6 .step-nav,
  .fluentform.fluentform_wrapper_6 .ff-inner_submit_container {
    flex-wrap: wrap;
  }
}

/* ---- 12. Nachschärfung (0.2.90) nach Sichtprüfung ----
   FF-Blau-Lecks an den Bildkarten stopfen + Beschriftungen entklemmen.
   Die Plugin-Regeln hängen alle an .ff-el-group.ff_list_buttons — hier mit
   Wrapper-Verkettung überstimmt (mehr Klassen, Ladereihenfolge egal). */
/* Blaue Fokus-Fläche (#b3d4fc) unter der Karten-Beschriftung. */
.fluentform.fluentform_wrapper_6 .ff-el-group.ff_list_buttons .ff-el-form-check label:focus-within span {
  background-color: transparent;
}
/* Karten-Rahmen: FF malt 1px grau, bei Auswahl blau (#1a7efb) — weg damit,
   der Auswahlzustand lebt auf dem Bild-Label. overflow:visible statt hidden,
   sonst werden Badge und mehrzeilige Beschriftung beschnitten. */
.fluentform.fluentform_wrapper_6 .ff-el-group.ff_list_buttons .ff-el-form-check.ff-el-image-holder {
  border: 0;
  overflow: visible;
}
.fluentform.fluentform_wrapper_6 .ff-el-group.ff_list_buttons .ff-el-form-check.ff-el-image-holder.ff_item_selected {
  border: 0;
}
/* Beschriftungen dürfen umbrechen (FF erbt nowrap/Clipping). */
.fluentform.fluentform_wrapper_6 .ff-el-image-holder .ff-el-form-check-label,
.fluentform.fluentform_wrapper_6 .ff-el-group.ff_list_buttons .ff-el-form-check.ff-el-image-holder span {
  white-space: normal;
  overflow-wrap: break-word;
  margin-left: 0;
}

/* ---- 13. Kacheln ohne Foto: Farb-Swatches + Platzhalter (0.2.90) ----
   Nur die 3 Kranzformen haben echte Fotos. Die Farb-Frage bekommt CSS-
   Swatches (per aria-label des Bild-Labels, deterministisch aus den
   Formular-Werten), alle übrigen leeren Kacheln einen sanften Sage-
   Verlauf mit Blüten-Glyphe — sobald im FF-Editor echte Fotos hinterlegt
   werden, gewinnt deren Inline-style automatisch. */
.fluentform.fluentform_wrapper_6 label.ff-el-image-input-src[style="background-image: url()"] {
  display: grid;
  place-items: center;
  background-image: var(--grad-sage) !important; /* !important: schlägt das leere Inline-style */
}
.fluentform.fluentform_wrapper_6 label.ff-el-image-input-src[style="background-image: url()"]::before {
  content: "✿";
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  color: var(--fk-green-soft);
}
/* Farb-Swatches (Frage „Welche Farben dürfen vorkommen?"). */
.fluentform.fluentform_wrapper_6 label.ff-el-image-input-src[style="background-image: url()"][aria-label="Weiß und Creme"] {
  background-image: linear-gradient(135deg, #ffffff 0%, #f1e8d2 100%) !important;
}
.fluentform.fluentform_wrapper_6 label.ff-el-image-input-src[style="background-image: url()"][aria-label="Beige und Naturtöne"] {
  background-image: linear-gradient(135deg, #e9dfc9 0%, #d3c3a3 100%) !important;
}
.fluentform.fluentform_wrapper_6 label.ff-el-image-input-src[style="background-image: url()"][aria-label="Braun"] {
  background-image: linear-gradient(135deg, #a37e5f 0%, #6e5138 100%) !important;
}
.fluentform.fluentform_wrapper_6 label.ff-el-image-input-src[style="background-image: url()"][aria-label="Grün"] {
  background-image: linear-gradient(135deg, #b9c8ab 0%, #5f7c67 100%) !important;
}
.fluentform.fluentform_wrapper_6 label.ff-el-image-input-src[style="background-image: url()"][aria-label="Rosa und Altrosa"] {
  background-image: linear-gradient(135deg, #f5d3d4 0%, #d79fa4 100%) !important;
}
.fluentform.fluentform_wrapper_6 label.ff-el-image-input-src[style="background-image: url()"][aria-label="Lila und Lavendel"] {
  background-image: linear-gradient(135deg, #ddcce8 0%, #a493c4 100%) !important;
}
.fluentform.fluentform_wrapper_6 label.ff-el-image-input-src[style="background-image: url()"][aria-label="Blau"] {
  background-image: linear-gradient(135deg, #c3d2e4 0%, #7f9bc0 100%) !important;
}
.fluentform.fluentform_wrapper_6 label.ff-el-image-input-src[style="background-image: url()"][aria-label="Gelb und Orange"] {
  background-image: linear-gradient(135deg, #f6e7b4 0%, #f0b26a 100%) !important;
}
.fluentform.fluentform_wrapper_6 label.ff-el-image-input-src[style="background-image: url()"][aria-label="Rot und Bordeaux"] {
  background-image: linear-gradient(135deg, #c25b52 0%, #722832 100%) !important;
}
.fluentform.fluentform_wrapper_6 label.ff-el-image-input-src[style="background-image: url()"][aria-label="Bunt gemischt"] {
  background-image: conic-gradient(from 40deg, #f0b26a, #d79fa4, #a493c4, #7f9bc0, #97ab8d, #f6e7b4, #f0b26a) !important;
}
.fluentform.fluentform_wrapper_6 label.ff-el-image-input-src[style="background-image: url()"][aria-label="Überrasche mich"] {
  background-image: radial-gradient(120% 120% at 30% 20%, #fbe6dc 0%, #d4ddcb 55%, #f6e7b4 100%) !important;
}
/* Swatches brauchen keine Blüten-Glyphe. */
.fluentform.fluentform_wrapper_6 label.ff-el-image-input-src[style="background-image: url()"][aria-label="Weiß und Creme"]::before,
.fluentform.fluentform_wrapper_6 label.ff-el-image-input-src[style="background-image: url()"][aria-label="Beige und Naturtöne"]::before,
.fluentform.fluentform_wrapper_6 label.ff-el-image-input-src[style="background-image: url()"][aria-label="Braun"]::before,
.fluentform.fluentform_wrapper_6 label.ff-el-image-input-src[style="background-image: url()"][aria-label="Grün"]::before,
.fluentform.fluentform_wrapper_6 label.ff-el-image-input-src[style="background-image: url()"][aria-label="Rosa und Altrosa"]::before,
.fluentform.fluentform_wrapper_6 label.ff-el-image-input-src[style="background-image: url()"][aria-label="Lila und Lavendel"]::before,
.fluentform.fluentform_wrapper_6 label.ff-el-image-input-src[style="background-image: url()"][aria-label="Blau"]::before,
.fluentform.fluentform_wrapper_6 label.ff-el-image-input-src[style="background-image: url()"][aria-label="Gelb und Orange"]::before,
.fluentform.fluentform_wrapper_6 label.ff-el-image-input-src[style="background-image: url()"][aria-label="Rot und Bordeaux"]::before,
.fluentform.fluentform_wrapper_6 label.ff-el-image-input-src[style="background-image: url()"][aria-label="Bunt gemischt"]::before,
.fluentform.fluentform_wrapper_6 label.ff-el-image-input-src[style="background-image: url()"][aria-label="Überrasche mich"]::before {
  content: none;
}

/* ---- 14. Bildkarten-Beschriftungen: in JEDEM Zustand identisch (0.2.92) ----
   FFs ff_list_buttons-Regeln stylen das <span> als Button: hover #1a7efb,
   selected weiß-auf-blau (wurde nach dem Blau-Entfernen unsichtbar),
   mobile <768px zusätzlich border:1px solid !important. Alle Zustände
   hart auf neutrale Text-Optik gesetzt — gleiche !important-Waffe,
   höhere Spezifität durch Wrapper-Verkettung. */
.fluentform.fluentform_wrapper_6 .ff-el-group.ff_list_buttons .ff-el-form-check label > span,
.fluentform.fluentform_wrapper_6 .ff-el-group.ff_list_buttons .ff-el-form-check label > span:hover,
.fluentform.fluentform_wrapper_6 .ff-el-group.ff_list_buttons .ff-el-form-check label:focus-within span,
.fluentform.fluentform_wrapper_6 .ff-el-group.ff_list_buttons .ff-el-form-check.ff_item_selected label > span,
.fluentform.fluentform_wrapper_6 .ff-el-group.ff_list_buttons .ff-el-form-check.ff_item_selected:first-child label > span,
.fluentform.fluentform_wrapper_6 .ff-el-group.ff_list_buttons .ff-el-form-check:first-child label > span,
.fluentform.fluentform_wrapper_6 .ff-el-group.ff_list_buttons .ff-el-form-check:last-child label > span {
  display: inline !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--text-body) !important;
  font-family: var(--font-sans) !important;
  font-size: 13.5px !important;
  font-weight: var(--fw-regular, 400) !important;
  line-height: 1.35 !important;
}

/* ---- 15. Bildkarten-Beschriftung: Geisterelement raus, mehr Luft (0.2.92b) ----
   Der unsichtbare 18px-Radio/Checkbox (Regel in Abschnitt 3 setzte ihn auf
   position:static zurück) saß mit in der Caption-Zeile und schob den Text
   nach rechts. In Bildkarten gehört er aus dem Fluss (FF-Original:
   absolut + opacity 0, für Screenreader/Tastatur weiter fokussierbar). */
.fluentform.fluentform_wrapper_6 .ff-el-image-holder .ff-el-form-check-label input.ff-el-form-check-input {
  position: absolute;
  width: 1px;
  min-width: 0;
  height: 1px;
  margin: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
/* Mehr Abstand zwischen Bild und Beschriftung. */
.fluentform.fluentform_wrapper_6 .ff-el-image-holder .ff-el-form-check-label {
  margin-top: 12px;
}

/* ---- 16. FF-„Custom"-Preset-Fake-Radios abschalten (0.2.92c) ----
   Das ffs_custom-Inline-<style> zeichnet eine EIGENE Radio/Checkbox-Optik
   per ::after (weiße 15px-Fläche + SVG-Dot auf einer 21x15-Box — Quelle
   der Oval-/Versatz-Optik). Unsere Controls zeichnen sich selbst
   (Border + radial-gradient/SVG-Background), daher Pseudo-Inhalte hier
   komplett aus — Dreifach-Verkettung + !important schlägt das Inline-CSS. */
.fluentform.fluentform_wrapper_6.ffs_custom_wrap .ff-el-group input[type="radio"]::before,
.fluentform.fluentform_wrapper_6.ffs_custom_wrap .ff-el-group input[type="radio"]::after,
.fluentform.fluentform_wrapper_6.ffs_custom_wrap .ff-el-group input[type="checkbox"]::before,
.fluentform.fluentform_wrapper_6.ffs_custom_wrap .ff-el-group input[type="checkbox"]::after {
  content: none !important;
}

/* ---- 17. Radio/Checkbox: grüne Outline hart wiederherstellen (0.2.92d) ----
   Mit dem abgeschalteten ffs_custom-::after fiel dessen Ring mit weg und
   der eigene 1.5px-Rand wurde vom Inline-Preset-CSS geschluckt — Rand
   deshalb mit !important: sage im Grundzustand, fir bei checked. */
.fluentform.fluentform_wrapper_6 .ff-el-form-check:not(.ff-el-tc) input.ff-el-form-check-radio,
.fluentform.fluentform_wrapper_6 .ff-el-form-check:not(.ff-el-tc) input.ff-el-form-check-checkbox,
.fluentform.fluentform_wrapper_6 .ff_tc_checkbox input.ff-el-form-check-input {
  border: 1.5px solid var(--fk-sage) !important;
}
.fluentform.fluentform_wrapper_6 .ff-el-form-check:not(.ff-el-tc) input.ff-el-form-check-radio:checked,
.fluentform.fluentform_wrapper_6 .ff-el-form-check:not(.ff-el-tc) input.ff-el-form-check-checkbox:checked,
.fluentform.fluentform_wrapper_6 .ff_tc_checkbox input.ff-el-form-check-input:checked {
  border-color: var(--fk-fir) !important;
}