/*
Theme Name: Kadence Child FBF
Template: kadence
Description: FBF-Child-Theme — self-hosted Fonts (Anton, Lora, Inter), CI-Tokens als CSS-Custom-Properties. Globale Heading/Color-Defaults sind im Kadence-Customizer gesetzt (theme_mods_kadence). Dieses Stylesheet hält nur das, was der Customizer nicht abdeckt: Self-Hosted-Font-Files, FBF-Variablen-Pool, Header-Icons + Mega-Menu, Footer-Color-Override.
Version: 5.4.17
Author: FBF
Text Domain: kadence-child-fbf
*/

/* === Self-Hosted Fonts (Apache 2.0 / OFL, kein Google-CDN) === */

@font-face {
    font-family: "Anton";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("assets/fonts/anton/anton-regular.woff2") format("woff2");
}

@font-face {
    font-family: "Lora";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("assets/fonts/lora/lora-regular.woff2") format("woff2");
}

@font-face {
    font-family: "Lora";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("assets/fonts/lora/lora-italic.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("assets/fonts/inter/inter-variable.woff2") format("woff2-variations");
}

/* === FBF-CI als CSS-Variablen (Convenience-Aliases für Inline-Verwendung) === */

:root {
    --fbf-font-display: "Anton", system-ui, sans-serif;
    --fbf-font-serif:   "Lora", Georgia, serif;
    --fbf-font-sans:    "Inter", system-ui, -apple-system, sans-serif;
}

/* === Footer (Dunkelblau): Headings müssen weiß bleiben === */
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6 {
    color: var(--global-palette9);
}

/* === Top-Nav-Icons (Desktop only) === */
.menu-item-icon > a {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}
.menu-item-icon > a::before {
    content: "";
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}
.menu-item-icon > a:hover::before { opacity: 1; }
.menu-item-icon-fenster > a::before {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23011E41' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='1'/%3E%3Cline x1='12' y1='3' x2='12' y2='21'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3C/svg%3E");
}
.menu-item-icon-sonne > a::before {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23011E41' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cline x1='12' y1='1' x2='12' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='23'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'/%3E%3Cline x1='1' y1='12' x2='3' y2='12'/%3E%3Cline x1='21' y1='12' x2='23' y2='12'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'/%3E%3C/svg%3E");
}
.menu-item-icon-sicherheit > a::before {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23011E41' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}
.menu-item-icon-wartung > a::before {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23011E41' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
}

@media (max-width: 1024px) {
    .menu-item-icon > a::before {
        display: none;
    }
}

/* === Mega-Menu Featured-Image (Drutex-Pattern) === */
@media (min-width: 1025px) {
    .header-menu-container ul.menu > li.kadence-menu-mega-enabled.menu-item-icon-fenster > ul.sub-menu,
    .header-menu-container ul.menu > li.kadence-menu-mega-enabled.menu-item-icon-sonne > ul.sub-menu {
        padding: 18px 340px 18px 18px;
        min-height: 280px;
        background-color: var(--global-palette9);
        grid-template-columns: 1fr;
        grid-auto-rows: min-content;
        align-content: start;
        gap: 4px;
    }
    .header-menu-container ul.menu > li.kadence-menu-mega-enabled.menu-item-icon-fenster > ul.sub-menu > li > a,
    .header-menu-container ul.menu > li.kadence-menu-mega-enabled.menu-item-icon-sonne > ul.sub-menu > li > a {
        font-size: 15px;
        font-weight: 500;
        padding: 10px 14px;
    }
    .header-menu-container ul.menu > li.kadence-menu-mega-enabled.menu-item-icon-fenster > ul.sub-menu::after,
    .header-menu-container ul.menu > li.kadence-menu-mega-enabled.menu-item-icon-sonne > ul.sub-menu::after {
        content: "";
        display: block;
        position: absolute;
        top: 24px;
        right: 24px;
        bottom: 24px;
        width: 300px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 6px;
        pointer-events: none;
        z-index: 1;
    }
    .header-menu-container ul.menu > li.kadence-menu-mega-enabled.menu-item-icon-fenster > ul.sub-menu::after {
        background-image: url("/wp-content/uploads/2026/05/fbf-megamenu-tueren-anthrazit.jpg");
    }
    .header-menu-container ul.menu > li.kadence-menu-mega-enabled.menu-item-icon-sonne > ul.sub-menu::after {
        background-image: url("/wp-content/uploads/2026/05/fbf-nav-sonnen-sichtschutz.jpg");
    }
}


/* ============================================================================
 * FBF F4 Fixes (2026-05-20) — P1-3, P1-4, P1-5
 * Touch-Targets + Mobile-Phone 2x2-Layout
 * ============================================================================
 */

/* === FBF Touch-Targets WCAG 2.5.5 === */

/* Submit-Button im Form (Kadence Forms) — min 48 px */
.kb-forms-submit,
.wp-block-kadence-advanced-form button[type="submit"] {
  min-height: 48px;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

/* Route-Open-Buttons (Standorte) — Kadence advancedbtn / singlebtn (default size) */
.wp-block-kadence-advancedbtn .kb-button,
.wp-block-kadence-singlebtn .kb-button {
  min-height: 48px;
}

/* Hero-Service-Pills (singlebtn mit sizePreset=small) — ausgenommen explizite Mini-Buttons */
.wp-block-kadence-singlebtn .kb-button-size-small {
  min-height: 44px;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

/* === /FBF Touch-Targets === */


/* === FBF Mobile-Phone 2x2-Layout für 4-Spalter-Sektionen === */

@media (max-width: 767px) {
  /* Team-Sektion w8t — 4 Mitarbeiter → 2x2 */
  .kb-row-layout-idw8t .kt-row-column-wrap > .wp-block-kadence-column,
  .kb-row-layout-idw8t > .kt-inside-inner-col > .wp-block-kadence-column {
    flex: 0 0 calc(50% - 0.5rem) !important;
    max-width: calc(50% - 0.5rem) !important;
  }

  /* Hersteller-Sektion w8h — 4 Marken → 2x2 */
  .kb-row-layout-idw8h .kt-row-column-wrap > .wp-block-kadence-column,
  .kb-row-layout-idw8h > .kt-inside-inner-col > .wp-block-kadence-column {
    flex: 0 0 calc(50% - 0.5rem) !important;
    max-width: calc(50% - 0.5rem) !important;
  }

  /* Counter / Mont w8mont — 4 Werte → 2x2 */
  .kb-row-layout-idw8mont .kt-row-column-wrap > .wp-block-kadence-column,
  .kb-row-layout-idw8mont > .kt-inside-inner-col > .wp-block-kadence-column {
    flex: 0 0 calc(50% - 0.5rem) !important;
    max-width: calc(50% - 0.5rem) !important;
  }
}

/* === /FBF Mobile-Phone 2x2 === */


/* ============================================================================
 * FBF F4b Touch-Target-Spezifität-Fix (2026-05-20)
 * Kadence-Inline-CSS hat 3-class-Spezifität — wir matchen oder übertrumpfen.
 * ============================================================================ */

/* Submit-Button — höhere Spezifität als Kadence's .kb-form .kadence-blocks-form-field .kb-forms-submit */
.kb-form .kadence-blocks-form-field .kb-forms-submit,
.wp-block-kadence-advanced-form .kb-form .kadence-blocks-form-field button[type="submit"] {
  min-height: 48px !important;
  padding-top: 0.875rem !important;
  padding-bottom: 0.875rem !important;
}

/* Route-Open-Buttons — Kadence singlebtn-Wrapper sind oft .wp-block-kadence-singlebtn > .kb-button */
.wp-block-kadence-advancedbtn .wp-block-kadence-singlebtn .kb-button,
.wp-block-kadence-advancedbtn .kb-button,
.wp-block-kadence-singlebtn .kb-button {
  min-height: 48px !important;
}

/* Falls Buttons mit explizitem size-small ausgenommen werden sollen (Hero-Pills): */
.wp-block-kadence-singlebtn .kb-button.kb-button-size-small {
  min-height: 44px !important;
}

/* === /FBF F4b === */


/* ============================================================================
 * FBF F4c Touch-Target-Fix v3 (2026-05-20)
 * - Submit-Button via 3-class-Specificity (Kadence-internes Selektor-Pattern)
 * - Alle .kb-button direkt — Klassen sind ON the link-element, kein Descendant
 * - Small-Pills via kt-btn-size-small (Kadence-eigene Klasse)
 * ============================================================================ */

/* Submit-Button — Spezifität-Match mit Kadence-Inline-CSS */
.kb-form .kadence-blocks-form-field .kb-forms-submit,
.kadence-blocks-form-field button.kb-forms-submit {
  min-height: 48px !important;
  padding-top: 0.875rem !important;
  padding-bottom: 0.875rem !important;
}

/* Alle Kadence-Single-Buttons mit Standard-Size — Klassen sind chained, kein space! */
a.kb-button.kt-btn-size-standard,
button.kb-button.kt-btn-size-standard,
.wp-block-kadence-singlebtn.kb-button.kt-btn-size-standard,
a.wp-block-kadence-singlebtn.kt-btn-size-standard {
  min-height: 48px !important;
}

/* Small-Pills (Hero-Service-Pills) — bewusst 44 px */
a.kb-button.kt-btn-size-small,
button.kb-button.kt-btn-size-small,
.wp-block-kadence-singlebtn.kb-button.kt-btn-size-small {
  min-height: 44px !important;
}

/* === /FBF F4c === */


/* ============================================================================
 * FBF F4d Mobile-2x2 Grid-Override (2026-05-20)
 * Kadence nutzt CSS-Grid mit kt-has-4-columns, nicht Flex.
 * Override: grid-template-columns auf 2 Spalten zwingen <768px.
 * ============================================================================ */

@media (max-width: 767px) {
  .kb-row-layout-idw8t .kt-row-column-wrap.kt-has-4-columns,
  .kb-row-layout-idw8h .kt-row-column-wrap.kt-has-4-columns,
  .kb-row-layout-idw8mont .kt-row-column-wrap.kt-has-4-columns {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* Reset der Flex-Regel aus F4 (war wirkungslos, aber clean halten) */
  .kb-row-layout-idw8t .kt-row-column-wrap > .wp-block-kadence-column,
  .kb-row-layout-idw8h .kt-row-column-wrap > .wp-block-kadence-column,
  .kb-row-layout-idw8mont .kt-row-column-wrap > .wp-block-kadence-column {
    flex: initial !important;
    max-width: 100% !important;
  }
}

/* === /FBF F4d Grid-2x2 === */


/* ============================================================================
 * FBF Welle-8 Header-Konsistenz (w8t, w8h, w8pgrid) — 2026-05-22 v2
 * - Eyebrow Olive Caps 18px (statt 14px Default)
 * - H2 Anton 60/48/38 (statt 24px Block-Inline-Override)
 * - Sub-Text Block mittig (margin auto) — nicht nur Text-Inline-Center
 * - Watermark 120px Anton hinter H2 (palette3 op 0.06)
 * - Ansprechpartner-Cards 1px palette4-Border + inner-col 100% Höhe
 * ============================================================================ */

.kb-row-layout-idw8t,
.kb-row-layout-idw8h,
.kb-row-layout-idw8pgrid { position: relative; }

/* Eyebrow harmonisieren auf 18px */
.kt-adv-heading261_042439-23,
.kt-adv-heading261_e1ba4c-f6,
.kt-adv-heading261_b96d69-2a {
  font-size: 18px !important;
}

/* H2 Anton 60/48/38 */
.kb-row-layout-idw8t .kt-adv-heading261_421375-e6,
.kb-row-layout-idw8h .kt-adv-heading261_cab0a5-96,
.kb-row-layout-idw8pgrid .kt-adv-heading261_269eb0-d0 {
  position: relative;
  z-index: 1;
  font-size: 60px !important;
  line-height: 1.05 !important;
  font-family: "Anton", sans-serif !important;
}
@media (max-width: 1024px) {
  .kb-row-layout-idw8t .kt-adv-heading261_421375-e6,
  .kb-row-layout-idw8h .kt-adv-heading261_cab0a5-96,
  .kb-row-layout-idw8pgrid .kt-adv-heading261_269eb0-d0 { font-size: 48px !important; }
}
@media (max-width: 767px) {
  .kb-row-layout-idw8t .kt-adv-heading261_421375-e6,
  .kb-row-layout-idw8h .kt-adv-heading261_cab0a5-96,
  .kb-row-layout-idw8pgrid .kt-adv-heading261_269eb0-d0 { font-size: 38px !important; }
}

/* Sub-Text Block wirklich mittig (margin auto) */
.kt-adv-heading261_b11159-b5,
.kt-adv-heading261_799e67-6b {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Watermarks */
.kb-row-layout-idw8t .kt-adv-heading261_421375-e6::before {
  content: "Ansprechpartner";
}
.kb-row-layout-idw8h .kt-adv-heading261_cab0a5-96::before {
  content: "Hersteller";
}
.kb-row-layout-idw8pgrid .kt-adv-heading261_269eb0-d0::before {
  content: "Partner";
}
.kb-row-layout-idw8t .kt-adv-heading261_421375-e6::before,
.kb-row-layout-idw8h .kt-adv-heading261_cab0a5-96::before,
.kb-row-layout-idw8pgrid .kt-adv-heading261_269eb0-d0::before {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Anton", sans-serif;
  font-size: 120px;
  color: rgba(1, 30, 65, 0.06);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  pointer-events: none;
  white-space: nowrap;
  z-index: -1;
  line-height: 1;
  display: block;
}
@media (max-width: 1024px) {
  .kb-row-layout-idw8t .kt-adv-heading261_421375-e6::before,
  .kb-row-layout-idw8h .kt-adv-heading261_cab0a5-96::before,
  .kb-row-layout-idw8pgrid .kt-adv-heading261_269eb0-d0::before { font-size: 90px; }
}
@media (max-width: 767px) {
  .kb-row-layout-idw8t .kt-adv-heading261_421375-e6::before,
  .kb-row-layout-idw8h .kt-adv-heading261_cab0a5-96::before,
  .kb-row-layout-idw8pgrid .kt-adv-heading261_269eb0-d0::before { font-size: 60px; }
}

/* Ansprechpartner-Cards: 1px Border + Equal-Height (inner-col füllt Container) */
.kadence-column261_385bfb-12 > .kt-inside-inner-col,
.kadence-column261_65b034-f0 > .kt-inside-inner-col,
.kadence-column261_0e2334-5d > .kt-inside-inner-col,
.kadence-column261_de719f-2e > .kt-inside-inner-col {
  border: 1px solid var(--global-palette4, #E5E7EB) !important;
  border-radius: 0 !important;
  height: 100% !important;
  min-height: 100% !important;
}
.kadence-column261_385bfb-12,
.kadence-column261_65b034-f0,
.kadence-column261_0e2334-5d,
.kadence-column261_de719f-2e {
  display: flex !important;
  flex-direction: column !important;
}


/* Mitarbeiter-Namen: Anton hat nur weight 400 — fake bold (700) erzeugt unschar­fen "Border"-Effekt */
.kt-adv-headingw8t_buch_n,
.kt-adv-headingw8t_term_n,
.kt-adv-headingw8t_vert_n,
.kt-adv-headingw8t_proj_n {
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* === /FBF Welle-8 Header-Konsistenz === */


/* ============================================================================
 * FBF w8h Hersteller-Cards v3 — 2026-05-22
 * - Bild edge-to-edge (kein Padding)
 * - Olive-Pille raus
 * - Hover-Overlay: weißer Layer + Hersteller-Logo zentriert
 * - Anton-H3 Hersteller-Name unter Bild
 * - Border + Equal-Height
 * ============================================================================ */

/* Card-Container relative */
.kadence-column261_7de3f2-c9,
.kadence-column261_e2bcd0-6f,
.kadence-column261_6a3bbb-6b,
.kadence-column261_c06eed-a4 {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
}

/* Card-Inner: Border + Equal-Height + KEIN Padding */
.kadence-column261_7de3f2-c9 > .kt-inside-inner-col,
.kadence-column261_e2bcd0-6f > .kt-inside-inner-col,
.kadence-column261_6a3bbb-6b > .kt-inside-inner-col,
.kadence-column261_c06eed-a4 > .kt-inside-inner-col {
  border: 1px solid var(--global-palette4, #E5E7EB) !important;
  border-radius: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Bild edge-to-edge */
.kb-row-layout-idw8h .wp-block-kadence-image,
.kb-row-layout-idw8h .wp-block-kadence-image figure {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  position: relative;
  overflow: hidden;
}
.kb-row-layout-idw8h .wp-block-kadence-image img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  display: block;
  transition: transform 0.4s ease;
}

/* Hover-Overlay: weißer Layer mit Hersteller-Logo zentriert */
.kb-row-layout-idw8h .wp-block-kadence-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.92);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60% auto;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.kadence-column261_7de3f2-c9 .wp-block-kadence-image::after {
  background-image: url("/wp-content/uploads/2026/05/fbf-logo-drutex.png");
}
.kadence-column261_e2bcd0-6f .wp-block-kadence-image::after {
  background-image: url("/wp-content/uploads/2026/05/fbf-logo-noblesse-768x430.png");
}
.kadence-column261_6a3bbb-6b .wp-block-kadence-image::after {
  background-image: url("/wp-content/uploads/2026/05/fbf-logo-hoermann.png");
}
.kadence-column261_c06eed-a4 .wp-block-kadence-image::after {
  background-image: url("/wp-content/uploads/2026/05/fbf-logo-fensterbau-elbe-elster-300x188.png");
}
.kadence-column261_7de3f2-c9:hover .wp-block-kadence-image::after,
.kadence-column261_e2bcd0-6f:hover .wp-block-kadence-image::after,
.kadence-column261_6a3bbb-6b:hover .wp-block-kadence-image::after,
.kadence-column261_c06eed-a4:hover .wp-block-kadence-image::after {
  opacity: 1;
}

/* Hersteller-Name Anton H3 unter Bild */
.kt-adv-headingw8h_drutex_name,
.kt-adv-headingw8h_nobless_name,
.kt-adv-headingw8h_hoermann_name,
.kt-adv-headingw8h_fmh_name {
  font-family: "Anton", sans-serif !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  -webkit-font-smoothing: antialiased;
  color: var(--global-palette3, #011E41) !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
}

/* Text-Bereich unter Bild bekommt Padding */
.kadence-column261_7de3f2-c9 > .kt-inside-inner-col > *:not(.wp-block-kadence-image),
.kadence-column261_e2bcd0-6f > .kt-inside-inner-col > *:not(.wp-block-kadence-image),
.kadence-column261_6a3bbb-6b > .kt-inside-inner-col > *:not(.wp-block-kadence-image),
.kadence-column261_c06eed-a4 > .kt-inside-inner-col > *:not(.wp-block-kadence-image) {
  padding-left: 24px !important;
  padding-right: 24px !important;
}
/* Title bekommt einheitlich 20px Padding-Top als Abstand vom Bild */
.kt-adv-headingw8h_drutex_name,
.kt-adv-headingw8h_nobless_name,
.kt-adv-headingw8h_hoermann_name,
.kt-adv-headingw8h_fmh_name {
  padding-top: 20px !important;
}
/* Eyebrow KEIN Padding-Top (sonst entsteht visuelle Leerzeile zwischen Title und Eyebrow) */
.kt-adv-headingw8h_drutex_r,
.kt-adv-headingw8h_nobless_r,
.kt-adv-headingw8h_hoermann_r,
.kt-adv-headingw8h_fmh_r {
  padding-top: 0 !important;
}

/* Eyebrow (Rolle): klein olive — bleibt aber kleiner */
.kt-adv-headingw8h_drutex_r,
.kt-adv-headingw8h_nobless_r,
.kt-adv-headingw8h_hoermann_r,
.kt-adv-headingw8h_fmh_r {
  margin-bottom: 8px !important;
  margin-top: 0 !important;
}

/* Body flex-grow so readmore sits at bottom */
.kt-adv-headingw8h_drutex_t,
.kt-adv-headingw8h_nobless_t,
.kt-adv-headingw8h_hoermann_t,
.kt-adv-headingw8h_fmh_t {
  flex-grow: 1;
}

/* Read-More */
.kb-row-layout-idw8h .w8h-readmore {
  margin: 8px 0 0;
  padding: 16px 0 24px;
}
.kb-row-layout-idw8h .w8h-readmore a {
  color: var(--global-palette1, #5B7F00);
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
}
.kb-row-layout-idw8h .w8h-readmore a:hover {
  color: var(--global-palette3, #011E41);
}


/* Fix: figure full-width (Kadence default ist 180px max-width / display:table) */
.kb-row-layout-idw8h .wp-block-kadence-image figure {
  display: block !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}
.kb-row-layout-idw8h .wp-block-kadence-image figure img {
  width: 100% !important;
}


/* Title (Drutex/Nobless/...) tight gap to eyebrow */
.kt-adv-headingw8h_drutex_name,
.kt-adv-headingw8h_nobless_name,
.kt-adv-headingw8h_hoermann_name,
.kt-adv-headingw8h_fmh_name {
  margin-bottom: 2px !important;
}
.kt-adv-headingw8h_drutex_r,
.kt-adv-headingw8h_nobless_r,
.kt-adv-headingw8h_hoermann_r,
.kt-adv-headingw8h_fmh_r {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

/* === /FBF w8h Cards === */


/* ============================================================================
 * FBF w8pgrid Partner-Cards — 2026-05-22
 * - Header w8pgrid: 6-Col-Grid kollabiert auf 1-Col, Header zentriert
 * - Logo-Sektion 261_5f049b-00: 6 echte Cards mit Border + grayscale Logos
 * - Hover: Logo wechselt zu Farbe
 * ============================================================================ */

/* Header-Row w8pgrid: andere Cols (1-5) ausblenden, Col 0 spans full */
.kb-row-layout-idw8pgrid > .kt-row-column-wrap {
  grid-template-columns: 1fr !important;
}
.kb-row-layout-idw8pgrid > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(n+2) {
  display: none !important;
}
.kadence-column261_24d622-4f > .kt-inside-inner-col {
  text-align: center !important;
  align-items: center !important;
}
.kadence-column261_24d622-4f > .kt-inside-inner-col > * {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Sub-Text Block mittig (max 720px) */
.w8pgrid-subtext {
  max-width: 720px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Logo-Row 261_5f049b-00: Cards + grayscale */
.kb-row-layout-id261_5f049b-00 > .kt-row-column-wrap {
  align-items: stretch !important;
}
.kb-row-layout-id261_5f049b-00 > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
  border: 1px solid var(--global-palette4, #E5E7EB) !important;
  border-radius: 0 !important;
  height: 100% !important;
  min-height: 160px !important;
  padding: 32px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff;
}

/* === Caption-Row UNTER der Logo-Row === */
.kb-row-layout-idw8pcaptions {
  padding: 16px 0 64px !important;
  background-color: var(--global-palette9, #fff) !important;
}
.kb-row-layout-idw8pcaptions > .kt-row-column-wrap {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 16px !important;
  align-items: flex-start !important;
  max-width: var(--global-content-width, 1320px);
  margin: 0 auto;
  padding: 0 16px;
}
@media (max-width: 1024px) {
  .kb-row-layout-idw8pcaptions > .kt-row-column-wrap {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .kb-row-layout-idw8pcaptions > .kt-row-column-wrap {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
.kb-row-layout-idw8pcaptions .wp-block-kadence-column > .kt-inside-inner-col {
  padding: 0 8px !important;
  border: none !important;
  background: transparent !important;
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
}
.kb-row-layout-idw8pcaptions .w8pcap {
  font-size: 13px !important;
  line-height: 1.45 !important;
  text-align: center !important;
  margin: 0 !important;
  color: var(--global-palette5, #6b7280) !important;
}
/* Logo-Row weniger bottom-padding, damit Caption-Row optisch zugehört */
.kb-row-layout-id261_5f049b-00 {
  padding-bottom: 0 !important;
}
.kb-row-layout-id261_5f049b-00 .wp-block-kadence-image,
.kb-row-layout-id261_5f049b-00 .wp-block-kadence-image figure {
  margin: 0 !important;
  max-width: 100% !important;
  display: block;
}
.kb-row-layout-id261_5f049b-00 img {
  filter: grayscale(100%);
  opacity: 0.55;
  transition: filter 0.3s ease, opacity 0.3s ease;
  max-width: 100%;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.kadence-column261_c90f78-b2:hover img,
.kadence-column261_995673-fb:hover img,
.kadence-column261_6d5012-c1:hover img,
.kadence-column261_aeeacc-64:hover img,
.kadence-column261_02b5fe-7d:hover img,
.kadence-column261_fc1eb7-49:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* Equal-Height ensured via flex */
.kb-row-layout-id261_5f049b-00 > .kt-row-column-wrap > .wp-block-kadence-column {
  display: flex !important;
  flex-direction: column !important;
}

/* === /FBF w8pgrid Partner-Cards === */


/* ============================================================================
 * FBF Standorte Watermark — 2026-05-22
 * "ANFAHRT" hinter H2 "Besuchen Sie uns." linksbündig (passend zum Header-Layout)
 * ============================================================================ */

.kb-row-layout-id261_156bef-1c {
  position: relative;
  overflow: hidden;
}
.kb-row-layout-id261_156bef-1c .kt-adv-heading261_657fda-49 {
  position: relative;
  z-index: 1;
}
.kb-row-layout-id261_156bef-1c .kt-adv-heading261_657fda-49::before {
  content: "Anfahrt";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: 120px;
  color: rgba(1, 30, 65, 0.06);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  pointer-events: none;
  white-space: nowrap;
  z-index: -1;
  line-height: 1;
  display: block;
}
@media (max-width: 1024px) {
  .kb-row-layout-id261_156bef-1c .kt-adv-heading261_657fda-49::before { font-size: 90px; }
}
@media (max-width: 767px) {
  .kb-row-layout-id261_156bef-1c .kt-adv-heading261_657fda-49::before { font-size: 60px; }
}

/* === /FBF Standorte Watermark === */


/* ============================================================================
 * FBF Form Nacharbeit — 2026-05-22
 * - Honeypot komplett off-screen (Label "Email" + Input verify)
 * - Select-Field BG + Option-Color (war transparent / browser-blau)
 * ============================================================================ */

/* Honeypot total off-screen — Bots sehen ihn im DOM, User nicht */
.kadence-form-261_18b519-99 input.kadence-blocks-field.verify,
.kadence-form-261_18b519-99 .kadence-verify-label,
.kadence-form-261_18b519-99 input[name="_kb_verify_email"] {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Bereich-Select: dezenter dunkler BG + weiße Option-List */
.kadence-form-261_18b519-99 select.kb-select-style-field {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--global-palette9, #fff) !important;
  border: 1px solid var(--global-palette9, #fff) !important;
  border-radius: 0 !important;
  padding: 10px 14px !important;
}
.kadence-form-261_18b519-99 select.kb-select-style-field option {
  background-color: var(--global-palette3, #011E41);
  color: var(--global-palette9, #fff);
}
.kadence-form-261_18b519-99 select.kb-select-style-field:focus {
  outline: 2px solid var(--global-palette1, #5B7F00);
  outline-offset: 2px;
}

/* === /FBF Form Nacharbeit === */


/* ============================================================================
 * FBF Step-Process Nacharbeit — 2026-05-22
 * - 6 H4-Headings: fontWeight 700 → 400 (Anton-Faux-Bold-Fix)
 * - Mittlere Spalte (stp-center-col mit Haus-Icon) schmaler, links/rechts breiter
 * ============================================================================ */

/* H4 fontWeight Fix */
.kt-adv-heading261_165282-86,
.kt-adv-heading261_e432bf-1f,
.kt-adv-heading261_ba16e0-bf,
.kt-adv-heading261_7e5597-f4,
.kt-adv-heading261_601276-29,
.kt-adv-heading261_163dcc-52 {
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Mittlere Spalte schmaler (Haus-Icon), links/rechts breiter */
.kb-row-layout-idw8stp .kt-row-column-wrap.kt-has-3-columns {
  grid-template-columns: 1fr 0.45fr 1fr !important;
}
@media (max-width: 1024px) {
  .kb-row-layout-idw8stp .kt-row-column-wrap.kt-has-3-columns {
    grid-template-columns: 1fr 0.5fr 1fr !important;
  }
}
@media (max-width: 767px) {
  .kb-row-layout-idw8stp .kt-row-column-wrap.kt-has-3-columns {
    grid-template-columns: 1fr !important;
  }
}

/* === /FBF Step-Process Nacharbeit === */


/* ============================================================================
 * FBF Stabile Klassen-Library — 2026-05-22
 *
 * ZIEL: Migration weg von uniqueID-Selektoren (kt-adv-heading261_*, kadence-column261_*)
 * hin zu stabilen Klassen, die im Editor über "Erweitert → CSS-Klasse" gesetzt werden.
 * Update-Resilient gegen Kadence-Block-Re-Saves + Theme/Plugin-Updates.
 *
 * MIGRATIONS-WORKFLOW:
 * 1. CSS hier definiert (parallel zu existing uniqueID-Selektoren).
 * 2. Daniel setzt im Editor pro Sektion die CSS-Klasse (Block-Settings > Erweitert).
 * 3. Wenn ALLE Sektionen migriert sind, lösche ich die uniqueID-Variante.
 *
 * ============================================================================ */

/* === WATERMARK-Pattern (für jede Sektion mit dezentem H2-Hintergrund-Wort) ===
 * Anwendung:
 * 1. Section-Wrapper (kadence/rowlayout) bekommt CSS-Klasse: fbf-section
 * 2. H2-Block bekommt CSS-Klasse: fbf-watermark-<text>
 *    z.B. fbf-watermark-anfahrt, fbf-watermark-ansprechpartner, fbf-watermark-hersteller
 */
.fbf-section {
  position: relative;
}
[class*="fbf-watermark-"] {
  position: relative;
  z-index: 1;
}
[class*="fbf-watermark-"]::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: 120px;
  color: rgba(1, 30, 65, 0.06);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  pointer-events: none;
  white-space: nowrap;
  z-index: -1;
  line-height: 1;
  display: block;
}
/* Dunkle Sektionen (BG palette3) — heller Watermark */
.fbf-section-dark [class*="fbf-watermark-"]::before {
  color: rgba(255, 255, 255, 0.08);
}
/* Linksbündig statt zentriert (für Standorte-Style: H2 ist links-bündig) */
.fbf-watermark-left::before {
  left: 0;
  transform: translateY(-50%);
}
@media (max-width: 1024px) {
  [class*="fbf-watermark-"]::before { font-size: 90px; }
}
@media (max-width: 767px) {
  [class*="fbf-watermark-"]::before { font-size: 60px; }
}

/* Watermark-Texte (per Klasse → content) */
.fbf-watermark-material::before     { content: "Material"; }
.fbf-watermark-ueber-uns::before    { content: "Über uns"; }
.fbf-watermark-services::before     { content: "Services"; }
.fbf-watermark-ablauf::before       { content: "Ablauf"; }
.fbf-watermark-zeiten::before       { content: "Zeiten"; }
.fbf-watermark-monteure::before     { content: "Monteure"; }
.fbf-watermark-ansprechpartner::before { content: "Ansprechpartner"; }
.fbf-watermark-hersteller::before   { content: "Hersteller"; }
.fbf-watermark-partner::before      { content: "Partner"; }
.fbf-watermark-anfahrt::before      { content: "Anfahrt"; }

/* === CARDS-Pattern ===
 * Anwendung: kadence/column-Block bekommt CSS-Klasse (Erweitert > CSS-Klasse):
 * - fbf-card-bordered      → 1px palette4-Border + Equal-Height (für Standard-Cards wie Ansprechpartner)
 * - fbf-card-hover-logo    → Hersteller-Style mit edge-to-edge Image + Hover-Logo
 * - fbf-card-grayscale     → Partner-Style mit grayscale Logo + Hover Color
 */

/* fbf-card-bordered — Standard-Card mit Border */
.fbf-card-bordered > .kt-inside-inner-col {
  border: 1px solid var(--global-palette4, #1A2330) !important;
  border-radius: 0 !important;
  height: 100% !important;
}
.fbf-card-bordered {
  display: flex !important;
  flex-direction: column !important;
}

/* fbf-card-hover-logo — Hersteller-Card mit edge-to-edge Image + Hover Logo */
.fbf-card-hover-logo {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
}
.fbf-card-hover-logo > .kt-inside-inner-col {
  border: 1px solid var(--global-palette4, #1A2330) !important;
  border-radius: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.fbf-card-hover-logo .wp-block-kadence-image,
.fbf-card-hover-logo .wp-block-kadence-image figure {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  position: relative;
  overflow: hidden;
}
.fbf-card-hover-logo .wp-block-kadence-image img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  display: block;
}
/* Hover-Overlay weiß-transparent, Logo via Custom-Property --fbf-logo */
.fbf-card-hover-logo .wp-block-kadence-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.92);
  background-image: var(--fbf-logo);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60% auto;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.fbf-card-hover-logo:hover .wp-block-kadence-image::after {
  opacity: 1;
}

/* fbf-card-grayscale — Partner-Card mit grayscale Logo, Hover Color */
.fbf-card-grayscale {
  display: flex !important;
  flex-direction: column !important;
}
.fbf-card-grayscale > .kt-inside-inner-col {
  border: 1px solid var(--global-palette4, #1A2330) !important;
  border-radius: 0 !important;
  height: 100% !important;
  min-height: 160px !important;
  padding: 32px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff;
}
.fbf-card-grayscale img {
  filter: grayscale(100%);
  opacity: 0.55;
  transition: filter 0.3s ease, opacity 0.3s ease;
  max-width: 100%;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.fbf-card-grayscale:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* === SUB-TEXT-Pattern ===
 * Anwendung: <p> oder kadence/advancedheading mit Body-Text bekommt Klasse:
 * - fbf-subtext  → max-width 640-720px, margin: auto, palette5
 */
.fbf-subtext {
  max-width: 720px;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: 16px;
  line-height: 1.65;
  color: var(--global-palette5, #404040) !important;
  text-align: center;
}

/* === HEADER-Pattern ===
 * Anwendung: H2-Block bekommt Klasse fbf-h2 wenn der Anton-60px-Style nicht von Customizer kommt
 */
.fbf-h2 {
  font-family: "Anton", sans-serif !important;
  font-size: 60px !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
}
@media (max-width: 1024px) {
  .fbf-h2 { font-size: 48px !important; }
}
@media (max-width: 767px) {
  .fbf-h2 { font-size: 38px !important; }
}

/* === EYEBROW-Pattern === */
.fbf-eyebrow {
  font-size: 18px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.96px !important;
  color: var(--global-palette1, #5B7F00) !important;
}

/* === FAUX-BOLD-FIX-Pattern ===
 * Anwendung: jedes Anton-Heading (H1-H4) bekommt zusätzlich diese Klasse wenn Block-Inline-fontWeight 700 setzt:
 */
.fbf-anton-clean {
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* === /FBF Stabile Klassen-Library === */


/* ============================================================================
 * FBF Update-Resilient Fallbacks — 2026-05-22
 *
 * ZIEL: Stabile Section-uniqueID-Selektoren als Fallback zu individuellen Card-uniqueIDs.
 * Falls Kadence-Block-Update die individuellen Card-uniqueIDs ändert (z.B. nach Block-Re-Save),
 * greifen diese generischen Selektoren weiter. Keine Daniel-Editor-Arbeit nötig.
 *
 * ============================================================================ */

/* === w8t Ansprechpartner — 4 Cards, Border palette4, eckig === */
.kb-row-layout-idw8t .kb-row-layout-wrap .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
  border: 1px solid var(--global-palette4, #1A2330) !important;
  border-radius: 0 !important;
  height: 100% !important;
  min-height: 100% !important;
}
.kb-row-layout-idw8t .kb-row-layout-wrap .kt-row-column-wrap > .wp-block-kadence-column {
  display: flex !important;
  flex-direction: column !important;
}

/* === w8h Hersteller — 4 Update-News-Cards mit Hover-Logo === */
.kb-row-layout-idw8h .kb-row-layout-wrap .kt-row-column-wrap > .wp-block-kadence-column {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
}
.kb-row-layout-idw8h .kb-row-layout-wrap .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
  border: 1px solid var(--global-palette4, #1A2330) !important;
  border-radius: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* w8h Hover-Logo via nth-of-type (statt individual uniqueID) */
.kb-row-layout-idw8h .kb-row-layout-wrap .kt-row-column-wrap > .wp-block-kadence-column:nth-of-type(1) .wp-block-kadence-image::after {
  background-image: url("/wp-content/uploads/2026/05/fbf-logo-drutex.png");
}
.kb-row-layout-idw8h .kb-row-layout-wrap .kt-row-column-wrap > .wp-block-kadence-column:nth-of-type(2) .wp-block-kadence-image::after {
  background-image: url("/wp-content/uploads/2026/05/fbf-logo-noblesse-768x430.png");
}
.kb-row-layout-idw8h .kb-row-layout-wrap .kt-row-column-wrap > .wp-block-kadence-column:nth-of-type(3) .wp-block-kadence-image::after {
  background-image: url("/wp-content/uploads/2026/05/fbf-logo-hoermann.png");
}
.kb-row-layout-idw8h .kb-row-layout-wrap .kt-row-column-wrap > .wp-block-kadence-column:nth-of-type(4) .wp-block-kadence-image::after {
  background-image: url("/wp-content/uploads/2026/05/fbf-logo-fensterbau-elbe-elster-300x188.png");
}
.kb-row-layout-idw8h .kb-row-layout-wrap .kt-row-column-wrap > .wp-block-kadence-column:hover .wp-block-kadence-image::after {
  opacity: 1;
}

/* === w8pgrid Partner — 6 Logo-Cards Grayscale === */
.kb-row-layout-id261_5f049b-00 > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
  border: 1px solid var(--global-palette4, #1A2330) !important;
  border-radius: 0 !important;
  height: 100% !important;
  min-height: 160px !important;
  padding: 32px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff;
}
.kb-row-layout-id261_5f049b-00 > .kt-row-column-wrap > .wp-block-kadence-column {
  display: flex !important;
  flex-direction: column !important;
}
.kb-row-layout-id261_5f049b-00 img {
  filter: grayscale(100%);
  opacity: 0.55;
  transition: filter 0.3s ease, opacity 0.3s ease;
  max-width: 100%;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.kb-row-layout-id261_5f049b-00 > .kt-row-column-wrap > .wp-block-kadence-column:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* === w8h Hersteller-Names (H3 Drutex/Nobless/Hörmann/FmH) — Anton-clean === */
.kb-row-layout-idw8h h3.wp-block-kadence-advancedheading {
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* === w8t Ansprechpartner-Names (H3 Ricarda/Ute/Mattias/Daniel) === */
.kb-row-layout-idw8t h3.wp-block-kadence-advancedheading {
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* === w8stp Step-Process-Headings (6 H4) — Anton-clean === */
.kb-row-layout-idw8stp h4.wp-block-kadence-advancedheading {
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* === Standorte H3 (Lager+Hauptsitz, Ausstellung+Büro) === */
.kb-row-layout-id261_156bef-1c h3.wp-block-kadence-advancedheading {
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* === FAQ-Form H2 "Anfrage senden" — Anton-clean === */
.kb-row-layout-id261_1993c4-7b h2.wp-block-kadence-advancedheading {
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* === /FBF Update-Resilient Fallbacks === */


/* ============================================================================
 * FBF Mega-Menu Hover-Image-Swap — 2026-05-22
 * Wechselt das rechte Platzhalter-Bild (::after) dynamisch beim Hover über
 * einzelne Sub-Items. Defaults bleiben fbf-megamenu-tueren-anthrazit.jpg
 * (Item 18) bzw. fbf-megamenu-sonnenschutz.jpg (Item 19).
 * ============================================================================ */

@media (min-width: 1025px) {
  /* Sanfter Übergang für Image-Swap (Hover-fade) */
  .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu::after {
    transition: background-image 0.25s ease, opacity 0.25s ease;
  }

  /* === Item 18 — Fenster und Türen === */
  /* Sub-Item 23 (Fenster) → fbf-nav-fenster */
  .header-menu-container ul.menu > li.menu-item-18 > ul.sub-menu:has(li.menu-item-23:hover)::after {
    background-image: url("/wp-content/uploads/2026/05/fbf-nav-fenster.jpg") !important;
  }
  /* Sub-Item 24 (Terrassen+Balkon) */
  .header-menu-container ul.menu > li.menu-item-18 > ul.sub-menu:has(li.menu-item-24:hover)::after {
    background-image: url("/wp-content/uploads/2026/05/fbf-nav-terrassen-balkonsysteme.jpg") !important;
  }
  /* Sub-Item 25 (Neben- und Eingangstüren) */
  .header-menu-container ul.menu > li.menu-item-18 > ul.sub-menu:has(li.menu-item-25:hover)::after {
    background-image: url("/wp-content/uploads/2026/05/fbf-nav-neben-eingangstueren.jpg") !important;
  }
  /* Sub-Item 26 (Giebelverglasungen) */
  .header-menu-container ul.menu > li.menu-item-18 > ul.sub-menu:has(li.menu-item-26:hover)::after {
    background-image: url("/wp-content/uploads/2026/05/fbf-nav-giebelverglasungen.jpg") !important;
  }
  /* Sub-Item 27 (Zubehör) */
  .header-menu-container ul.menu > li.menu-item-18 > ul.sub-menu:has(li.menu-item-27:hover)::after {
    background-image: url("/wp-content/uploads/2026/05/fbf-nav-zubehoer.jpg") !important;
  }

  /* === Item 19 — Sonnen- und Sichtschutz === */
  /* Sub-Item 28 (Aufsatz- und Vorsatzrollläden) */
  .header-menu-container ul.menu > li.menu-item-19 > ul.sub-menu:has(li.menu-item-28:hover)::after {
    background-image: url("/wp-content/uploads/2026/05/fbf-nav-aufsatz-vorsatzrollladen.jpg") !important;
  }
  /* Sub-Item 29 (Raffstore) */
  .header-menu-container ul.menu > li.menu-item-19 > ul.sub-menu:has(li.menu-item-29:hover)::after {
    background-image: url("/wp-content/uploads/2026/05/fbf-nav-raffstore.jpg") !important;
  }
  /* Sub-Item 30 (Insektenschutz) */
  .header-menu-container ul.menu > li.menu-item-19 > ul.sub-menu:has(li.menu-item-30:hover)::after {
    background-image: url("/wp-content/uploads/2026/05/fbf-nav-insektenschutz.jpg") !important;
  }
}

/* === /FBF Mega-Menu Hover-Image-Swap === */


/* ============================================================================
 * FBF Produkt-Vorlage Sticky-Anchor-Bar + neue Watermarks — 2026-05-22
 * Drutex-Style Sticky-Bar mit Sektion-Anker-Links für Produktseiten.
 * ============================================================================ */

/* Sticky-Bar Wrapper */
.fbf-anchor-bar-section {
  position: sticky;
  top: 80px; /* unter Site-Header, anpassen je nach Header-Höhe */
  z-index: 90;
  background: var(--global-palette9, #fff);
  border-top: 1px solid var(--global-palette7, #E5E5E5);
  border-bottom: 1px solid var(--global-palette7, #E5E5E5);
  box-shadow: 0 2px 12px rgba(1, 30, 65, 0.04);
}
.fbf-anchor-bar-section .kt-inside-inner-col {
  padding: 0 !important;
}

/* Bar — horizontale Link-Liste */
.fbf-anchor-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 32px;
  padding: 14px 24px;
  max-width: 1320px;
  margin: 0 auto;
}
.fbf-anchor-link {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--global-palette3, #011E41);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.fbf-anchor-link:hover {
  color: var(--global-palette1, #5B7F00);
  border-bottom-color: var(--global-palette1, #5B7F00);
}
.fbf-anchor-cta {
  background: var(--global-palette3, #011E41);
  color: var(--global-palette9, #fff) !important;
  padding: 10px 22px !important;
  border-bottom: 0 !important;
  margin-left: 8px;
}
.fbf-anchor-cta:hover {
  background: var(--global-palette1, #5B7F00);
  color: var(--global-palette9, #fff) !important;
}

/* Mobile — kleinerer Padding, horizontale Scrollbar */
@media (max-width: 767px) {
  .fbf-anchor-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 20px;
    padding: 10px 16px;
    -webkit-overflow-scrolling: touch;
  }
  .fbf-anchor-bar::-webkit-scrollbar { display: none; }
  .fbf-anchor-link {
    flex-shrink: 0;
    font-size: 13px;
  }
}

/* Section-Anchor scroll-offset — damit beim Klick die Sektion nicht hinter dem Header verschwindet */
#features, #varianten, #zubehoer, #hersteller, #faq, #anfrage, #standorte {
  scroll-margin-top: 140px;
}

/* Watermark-Texte für die neuen Produkt-Vorlage-Sektionen */
.fbf-watermark-vorteile::before  { content: "Vorteile"; }
.fbf-watermark-varianten::before { content: "Varianten"; }
.fbf-watermark-zubehoer::before  { content: "Zubehör"; }

/* === /FBF Produkt-Vorlage Sticky-Anchor-Bar === */


/* =====================================================================
   FBF GLOBAL CSS — Material-Sektion + Watermark-Klassen-Konvention
   Hinzugefügt: 2026-05-26
   Zweck: Welle-8-Material-Layout + Watermark-System für ALLE Folgeseiten
   (Fenster, Türen, Terrassen, Balkon, Sicherheit, Wartung etc.)
   ===================================================================== */

/* --- Watermark-Klassen für Sortimente (ergänzt [class*="fbf-watermark-"]::before Base) --- */
.fbf-watermark-pvc::before        { content: "PVC"; }
.fbf-watermark-aluminium::before  { content: "Aluminium"; }
.fbf-watermark-holz::before       { content: "Holz"; }
.fbf-watermark-fragen::before     { content: "Fragen"; }
.fbf-watermark-faq::before        { content: "FAQ"; }
.fbf-watermark-tueren::before     { content: "Türen"; }
.fbf-watermark-eingang::before    { content: "Eingang"; }
.fbf-watermark-haupteingang::before { content: "Haupteingang"; }
.fbf-watermark-nebeneingang::before { content: "Nebeneingang"; }
.fbf-watermark-terrassen::before  { content: "Terrassen"; }
.fbf-watermark-balkon::before     { content: "Balkon"; }
.fbf-watermark-balkonsystem::before { content: "Balkonsystem"; }
.fbf-watermark-rollladen::before  { content: "Rollladen"; }
.fbf-watermark-rolllaeden::before { content: "Rollläden"; }
.fbf-watermark-wartung::before    { content: "Wartung"; }
.fbf-watermark-reparatur::before  { content: "Reparatur"; }
.fbf-watermark-sicherheit::before { content: "Sicherheit"; }
.fbf-watermark-umruestung::before { content: "Umrüstung"; }
.fbf-watermark-foerderung::before { content: "Förderung"; }
.fbf-watermark-beratung::before   { content: "Beratung"; }
.fbf-watermark-kontakt::before    { content: "Kontakt"; }

/* =====================================================================
   MATERIAL-SEKTION (Reusable Block 380 — "Sektion Profile")
   Gilt auf ALLEN Pages die Reusable 380 referenzieren.
   Vorher: Custom-CSS Page-261-spezifisch. Jetzt: global.
   ===================================================================== */

/* H2 "Materialien" — Watermark "MATERIAL" hinter dem Heading */
.kt-adv-heading380_3eb2f0-d6 {
  position: relative;
  z-index: 1;
  text-align: center;
}
.kt-adv-heading380_3eb2f0-d6::before {
  content: "MATERIAL";
  position: absolute;
  font-family: Anton, sans-serif;
  font-size: 120px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--global-palette3, #011E41);
  opacity: 0.06;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 767px) {
  .kt-adv-heading380_3eb2f0-d6::before { font-size: 80px; }
}

/* Sub-Text "Drei Materialien, ein Anspruch..." — zentriert */
.kt-adv-heading380_1a5587-06 {
  text-align: center;
  max-width: 720px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Material-Cards: Box-Stil (PVC + Aluminium + Holz) */
.kadence-column380_8ddfdd-c2 > .kt-inside-inner-col,
.kadence-column380_756324-97 > .kt-inside-inner-col,
.kadence-column380_0fd292-42 > .kt-inside-inner-col {
  background-color: var(--global-palette9, #ffffff) !important;
  box-shadow: rgba(0,0,0,0.07) 0px 0px 40px 0px;
  border-bottom: 6px solid var(--global-palette7, #EDF2F7);
  position: relative;
  overflow: hidden;
  padding: 0 !important;
}

/* Olive-Balken volle Breite (PVC + Aluminium + Holz Card-Footer) */
.kb-row-layout-id380_fedea4-29,
.kb-row-layout-id380_713fab-61,
.kb-row-layout-id380_a5817d-bf {
  background-color: var(--global-palette1, #5B7F00) !important;
  margin: 0 !important;
  width: 100% !important;
}
.kb-row-layout-id380_fedea4-29 > .kt-row-column-wrap,
.kb-row-layout-id380_713fab-61 > .kt-row-column-wrap,
.kb-row-layout-id380_a5817d-bf > .kt-row-column-wrap {
  column-gap: 6px;
  padding: 16px;
  grid-template-columns: minmax(0px, calc(20% - 3px)) minmax(0px, calc(80% - 3px));
  align-content: center;
}

/* Card-Title (PVC/Aluminium/Holz) zentriert im Olive-Balken */
.kt-adv-heading380_cc1ed5-42,
.kt-adv-heading380_766502-ce,
.kt-adv-heading380_4a1703-15 {
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: var(--global-palette9, #fff) !important;
  text-align: center !important;
  align-self: center;
}

/* Hover-Overlay: Tagline fade-in mit dunklem BG palette3-0.92 */
.kt-adv-heading380_400b31-b8,
.kt-adv-heading380_dc28cd-54,
.kt-adv-heading380_cbe234-b8 {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: rgba(1, 30, 65, 0.92) !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 5;
  color: #ffffff !important;
  display: flex !important;
  margin: 0 !important;
  padding: 24px !important;
  font-size: 15px;
}

/* Hover-Trigger auf Card-Columns */
.kadence-column380_8ddfdd-c2:hover .kt-adv-heading380_400b31-b8,
.kadence-column380_756324-97:hover .kt-adv-heading380_dc28cd-54,
.kadence-column380_0fd292-42:hover .kt-adv-heading380_cbe234-b8 {
  opacity: 1;
}

/* Image in Card — full width, no margin */
.kadence-column380_8ddfdd-c2 .wp-block-kadence-image,
.kadence-column380_756324-97 .wp-block-kadence-image,
.kadence-column380_0fd292-42 .wp-block-kadence-image {
  margin: 0 !important;
  width: 100% !important;
}
.kadence-column380_8ddfdd-c2 .wp-block-kadence-image img,
.kadence-column380_756324-97 .wp-block-kadence-image img,
.kadence-column380_0fd292-42 .wp-block-kadence-image img {
  display: block;
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
}

/* Icon-Column im Olive-Balken: zentriert */
.kadence-column380_5d23a2-a9 > .kt-inside-inner-col,
.kadence-column380_2cd720-fd > .kt-inside-inner-col {
  padding: 8px !important;
  background-color: transparent !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}
.kt-svg-icons380_pvc_olv_ic,
.kt-svg-icons380_alu_olv_ic,
.kt-svg-icons380_holz_olv_ic {
  justify-content: center !important;
}

/* === Material-Header-Row: Single Column statt 60/40 (Fix 2026-05-26) === */
.kb-row-layout-id380_e48f1b-ed > .kt-row-column-wrap {
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: 1100px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.kadence-column380_9bc8ef-c4 {
  display: none !important;
}

/* === Hero Page 681 — BG-Video constrain auf linke 65%-Spalte (Daniel 28.05.) === */
/* Video soll nur im grauen Gradient-Bereich laufen, nicht hinter dem Wohnzimmer-Bild rechts */
@media (min-width: 768px) {
  .kb-row-layout-id681_4cdf0a-f5 > .kb-blocks-bg-video-container {
    width: 65%;
  }
}

/* Page 674 Hero-Video auf 65%-Spalte begrenzen (analog 681, weniger Zoom, kein Rand) */
@media (min-width: 768px) {
  .kb-row-layout-id674_4cdf0a-f5 > .kb-blocks-bg-video-container { width: 65%; }
}


/* Page 673 Hero-Video (Eingangstueren) auf 65%-Spalte begrenzen (analog 681/674) */
@media (min-width: 768px) {
  .kb-row-layout-id673_4cdf0a-f5 > .kb-blocks-bg-video-container { width: 65%; }
}


/* Page 673 Hero-Tuer-Video ~20% kleiner (Daniel 29.05.) */
@media (min-width: 768px) {
  .kb-row-layout-id673_4cdf0a-f5 .kb-blocks-bg-video-container { transform: scale(0.7); transform-origin: center center; }
}


/* Holz-Querschnitt 673 klein */
@media (min-width: 768px) {
  .kb-image673_3540d3-41 { max-width: 200px !important; margin-left: auto !important; margin-right: auto !important; }
}


/* === FBF Reviews-Sektion Startseite (30.05.) === */
.fbf-watermark-bewertungen::before { content: "Bewertungen"; }
.ti-widget { text-align: center !important; }
.ti-widget .ti-reviews-container,
.ti-widget .ti-row,
.ti-widget .ti-list,
.ti-widget [class*="-container"] { justify-content: center !important; margin-left: auto !important; margin-right: auto !important; }
/* === /FBF Reviews-Sektion === */

/* Reviews-Sektion: H2 + Subtext mittig (margin:auto, da Dynamic CSS bei manuell eingefuegten Bloecken fehlt) */
.kt-adv-heading261revh2, .kt-adv-heading261revsub { margin-left:auto !important; margin-right:auto !important; }


/* FBF-FOOTER-PHASE-D-START */
/* Grüne eckige Klammern an Sektions-Überschriften (Navigation + Kontakt) */
.fbf-foot-h::before { content: "[ "; color: #5B7F00; }
.fbf-foot-h::after  { content: " ]"; color: #5B7F00; }

/* Dezente Tür-Strichgrafik als Footer-Hintergrund (hell invertiert, sehr schwach) */
.site-top-footer-wrap { position: relative; overflow: hidden; }
.site-top-footer-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url('/wp-content/uploads/2026/05/ChatGPT-Image-22.-Mai-2026-09_37_48.jpg');
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: contain;
	filter: invert(1);
	opacity: 0.18;
	mix-blend-mode: screen;
	pointer-events: none;
	z-index: 0;
}
.site-top-footer-inner-wrap { position: relative; z-index: 1; }

/* Max-Spalte: Bild am unteren Rand der Spalte ausrichten */
.fbf-foot-max { display: flex; align-items: flex-end; justify-content: center; height: 100%; }
/* FBF-FOOTER-PHASE-D-END */

/* --- Watermark-Klassen Sonnenschutz (Rollläden + Raffstore) ergänzt 2026-06-02 --- */
.fbf-watermark-systeme::before      { content: "Systeme"; }
.fbf-watermark-konstruktion::before { content: "Konstruktion"; }
.fbf-watermark-energie::before      { content: "Energie"; }
.fbf-watermark-ueberblick::before   { content: "Überblick"; }
.fbf-watermark-bedienung::before    { content: "Bedienung"; }
.fbf-watermark-farben::before       { content: "Farben"; }
.fbf-watermark-lamellen::before     { content: "Lamellen"; }
.fbf-watermark-sommer::before       { content: "Sommer"; }
.fbf-watermark-licht::before        { content: "Licht"; }
.fbf-watermark-automatik::before    { content: "Automatik"; }

/* Raffstore-Hero: Hintergrund-Video voll sichtbar + nach rechts (Daniel-Wunsch 2026-06-02) */
/* Raffstore-Hero: BG-Video wie 681 auf Spalte begrenzt + kleiner + nach rechts (Daniel 2026-06-02) */
@media (min-width: 768px) {
  .kb-row-layout-idrf13t > .kb-blocks-bg-video-container { width: 60%; left: 0; right: auto; }
  .kb-row-layout-idrf13t .kb-blocks-bg-video-container { transform: scale(0.85); transform-origin: left center; }
  .kb-row-layout-idrl15p > .kb-blocks-bg-video-container { width: 60%; left: 0; right: auto; }
  .kb-row-layout-idrl15p .kb-blocks-bg-video-container { transform: scale(0.85); transform-origin: left center; }
  .kb-row-layout-id1254_38cb09-87 > .kb-blocks-bg-video-container { width: 60%; left: 0; right: auto; }
  .kb-row-layout-id1254_38cb09-87 .kb-blocks-bg-video-container { transform: scale(0.85); transform-origin: left center; }
}

/* Konstruktion-Klappkarten im FBF-Blau, Schrift + Zeichen weiß (Daniel 2026-06-02) */
.fbf-acc-blue .kt-blocks-accordion-header { background:#011E41 !important; color:#fff !important; border-color:#011E41 !important; }
.fbf-acc-blue .kt-blocks-accordion-header.kt-accordion-panel-active { background:#011E41 !important; }
.fbf-acc-blue .kt-blocks-accordion-title { color:#fff !important; }
.fbf-acc-blue .kt-blocks-accordion-header .kt-blocks-accordion-icon-trigger::before,
.fbf-acc-blue .kt-blocks-accordion-header .kt-blocks-accordion-icon-trigger::after { background-color:#fff !important; border-color:#fff !important; }

/* === Raffstore Farbwähler (interaktiv, CSS-only) Daniel 2026-06-02 === */
.fbf-rafcfg{max-width:400px;margin:0 auto}
.fbf-rafcfg input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
.fbf-rafcfg-stage{position:relative;width:100%;aspect-ratio:540/808;background:#f5f5f3;border:1px solid #e5e7eb;overflow:hidden}
.fbf-rafcfg-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .3s ease}
#rafc-9016:checked~.fbf-rafcfg-stage .rc-9016,
#rafc-9005:checked~.fbf-rafcfg-stage .rc-9005,
#rafc-7016:checked~.fbf-rafcfg-stage .rc-7016,
#rafc-9006:checked~.fbf-rafcfg-stage .rc-9006,
#rafc-9007:checked~.fbf-rafcfg-stage .rc-9007,
#rafc-db703:checked~.fbf-rafcfg-stage .rc-db703{opacity:1}
.fbf-rafcfg-swatches{display:grid;grid-template-columns:repeat(3,58px);gap:42px 30px;justify-content:center;margin:46px auto 14px;width:max-content}
.fbf-rafcfg-swatches label{width:58px;height:58px;border-radius:6px;cursor:pointer;border:2px solid #e5e7eb;position:relative;transition:transform .15s}
.fbf-rafcfg-swatches label:hover{transform:scale(1.08)}
.fbf-rafcfg-swatches label::after{content:attr(data-ral);position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);font-size:12px;font-weight:600;color:#011E41;white-space:nowrap}
#rafc-9016:checked~.fbf-rafcfg-swatches label[for=rafc-9016],
#rafc-9005:checked~.fbf-rafcfg-swatches label[for=rafc-9005],
#rafc-7016:checked~.fbf-rafcfg-swatches label[for=rafc-7016],
#rafc-9006:checked~.fbf-rafcfg-swatches label[for=rafc-9006],
#rafc-9007:checked~.fbf-rafcfg-swatches label[for=rafc-9007],
#rafc-db703:checked~.fbf-rafcfg-swatches label[for=rafc-db703]{border-color:#5B7F00;box-shadow:0 0 0 3px rgba(91,127,0,.35)}

/* === Rollladen-Farbwähler (16 Lamellenfarben, interaktiv CSS-only) Daniel 2026-06-02 === */
.fbf-rollcfg{max-width:440px;margin:0 auto}
.fbf-rollcfg input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
.fbf-rollcfg-stage{position:relative;width:100%;aspect-ratio:760/635;background:#f5f5f3;border:1px solid #e5e7eb;overflow:hidden}
.fbf-rollcfg-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .3s ease}
#rollc-weiss:checked~.fbf-rollcfg-stage .rcimg-weiss,
#rollc-beige:checked~.fbf-rollcfg-stage .rcimg-beige,
#rollc-silber:checked~.fbf-rollcfg-stage .rcimg-silber,
#rollc-grau:checked~.fbf-rollcfg-stage .rcimg-grau,
#rollc-grau-alu:checked~.fbf-rollcfg-stage .rcimg-grau-alu,
#rollc-quarzgrau:checked~.fbf-rollcfg-stage .rcimg-quarzgrau,
#rollc-basaltgrau:checked~.fbf-rollcfg-stage .rcimg-basaltgrau,
#rollc-anthrazit:checked~.fbf-rollcfg-stage .rcimg-anthrazit,
#rollc-moosgruen:checked~.fbf-rollcfg-stage .rcimg-moosgruen,
#rollc-braun:checked~.fbf-rollcfg-stage .rcimg-braun,
#rollc-dunkelbraun:checked~.fbf-rollcfg-stage .rcimg-dunkelbraun,
#rollc-schwarz:checked~.fbf-rollcfg-stage .rcimg-schwarz,
#rollc-golden-oak:checked~.fbf-rollcfg-stage .rcimg-golden-oak,
#rollc-nussbaum:checked~.fbf-rollcfg-stage .rcimg-nussbaum,
#rollc-turner-oak:checked~.fbf-rollcfg-stage .rcimg-turner-oak,
#rollc-winchester:checked~.fbf-rollcfg-stage .rcimg-winchester{opacity:1}
.fbf-rollcfg-swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:26px 12px;justify-content:center;margin:30px auto 6px;max-width:430px}
.fbf-rollcfg-swatches label{aspect-ratio:1;border-radius:5px;cursor:pointer;border:2px solid #e5e7eb;background-size:cover;background-position:center;transition:transform .15s}
.fbf-rollcfg-swatches label:hover{transform:scale(1.12)}
#rollc-weiss:checked~.fbf-rollcfg-swatches label[for=rollc-weiss],
#rollc-beige:checked~.fbf-rollcfg-swatches label[for=rollc-beige],
#rollc-silber:checked~.fbf-rollcfg-swatches label[for=rollc-silber],
#rollc-grau:checked~.fbf-rollcfg-swatches label[for=rollc-grau],
#rollc-grau-alu:checked~.fbf-rollcfg-swatches label[for=rollc-grau-alu],
#rollc-quarzgrau:checked~.fbf-rollcfg-swatches label[for=rollc-quarzgrau],
#rollc-basaltgrau:checked~.fbf-rollcfg-swatches label[for=rollc-basaltgrau],
#rollc-anthrazit:checked~.fbf-rollcfg-swatches label[for=rollc-anthrazit],
#rollc-moosgruen:checked~.fbf-rollcfg-swatches label[for=rollc-moosgruen],
#rollc-braun:checked~.fbf-rollcfg-swatches label[for=rollc-braun],
#rollc-dunkelbraun:checked~.fbf-rollcfg-swatches label[for=rollc-dunkelbraun],
#rollc-schwarz:checked~.fbf-rollcfg-swatches label[for=rollc-schwarz],
#rollc-golden-oak:checked~.fbf-rollcfg-swatches label[for=rollc-golden-oak],
#rollc-nussbaum:checked~.fbf-rollcfg-swatches label[for=rollc-nussbaum],
#rollc-turner-oak:checked~.fbf-rollcfg-swatches label[for=rollc-turner-oak],
#rollc-winchester:checked~.fbf-rollcfg-swatches label[for=rollc-winchester]{border-color:#5B7F00;box-shadow:0 0 0 3px rgba(91,127,0,.4)}

/* Zubehör-Seite Watermarks (2026-06-04) */
.fbf-watermark-glas::before        { content: "Glas"; }
.fbf-watermark-dekor::before       { content: "Dekor"; }
.fbf-watermark-warmkante::before   { content: "Wärme"; }
.fbf-watermark-klinken::before     { content: "Klinken"; }
.fbf-watermark-lueftung::before    { content: "Lüftung"; }
.fbf-watermark-beschlaege::before  { content: "Beschläge"; }
.fbf-watermark-sprossen::before    { content: "Sprossen"; }
.fbf-watermark-baenke::before      { content: "Bänke"; }
.fbf-watermark-schwellen::before   { content: "Schwellen"; }
.fbf-watermark-renovierung::before { content: "Renovierung"; }

/* Zubehör Übersicht-Karten: einheitliche Bildhöhe (2026-06-04) */
.fbf-card-img img { width:100%; height:230px; object-fit:cover; display:block; }
@media (max-width:767px){ .fbf-card-img img { height:200px; } }

/* Zubehör Warmkante-Farbreihe: kleine Farbproben (2026-06-04) */
.fbf-farbreihe .kb-gallery-figure img,
.fbf-farbreihe figure img,
.fbf-farbreihe img { height:78px !important; width:100% !important; object-fit:cover; display:block; }
.fbf-farbreihe .kadence-blocks-gallery-item { margin-bottom:6px; }

/* Zubehör Übersicht-Karten: Aufmachung wie Startseite (Rahmen statt Schatten, eckig) 2026-06-04 */
.fbf-zub-card { border:1px solid var(--global-palette7, #E5E7EB) !important; border-radius:0 !important; box-shadow:none !important; }
.fbf-zub-card .kt-inside-inner-col, .fbf-zub-card .kadence-inner-column-inner { box-shadow:none !important; }

/* Zubehör Türklinken: einheitlich weiße Kachel hinter jedem Bild (2026-06-04) */
.fbf-klinken-weiss .kadence-blocks-gallery-item-inner,
.fbf-klinken-weiss .kt-gallery-figure,
.fbf-klinken-weiss figure { background:#ffffff !important; }
.fbf-klinken-weiss .kadence-blocks-gallery-item-inner img { background:#ffffff !important; padding:14px; }

/* Sonderfaelle / Giebelverglasung – Watermarks (2026-06-04) */
.fbf-watermark-panorama::before     { content: "Panorama"; }
.fbf-watermark-erfahrung::before    { content: "Erfahrung"; }

/* fbf-form-field-readability: dunkler Feld-Text auf weissem BG — fixt weiss-auf-weiss in allen kb-form Feldern (2026-06-04) */
.kb-form input[type=text], .kb-form input[type=email], .kb-form input[type=tel], .kb-form input[type=url], .kb-form input[type=number], .kb-form textarea, .kb-form select {
  color: var(--global-palette3, #011E41) !important;
}
.kb-form ::placeholder { color: rgba(1, 30, 65, 0.55) !important; }