body {color:#666F7A;background-color:#FFFFFF !important;background-image:none;background-size: cover;background-repeat: no-repeat;background-position: center top;background-attachment: fixed;min-height: 100%;font-family:'Open Sans';font-weight:400;font-style:normal;font-size:16px;line-height:1.6;} .sp-el-row{max-width:1100px;}#primary.content-area{max-width:1000px;} h1, h2, h3, h4, h5, h6{color:#00A5B2; font-family:'Open Sans';font-weight:700;font-style:normal;} a{color:#00A5B2;} a:hover{color:#B93008;text-decoration:underline;} label{font-size:14px;font-weight:bold;} ::placeholder{color:rgba(72, 72, 72, 0.5) !important;} .sp-button,  #edd-purchase-button.edd-submit.sp-button, input[type='submit'].edd-submit.sp-button, .edd-add-to-cart, button.edd-submit.sp-button, a.edd-submit.sp-button, .edd-submit, input[type='submit'].edd-submit, #edd-save-cart-button, #edd_next_button, input[type='submit'], .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .button.wp-element-button,  .widget-content-block input[type='submit']{color:#ffffff;background-color:#FF6B00;font-family:'Inter';font-weight:400;font-style:normal;border-radius:4px;border-width:0px;border-style:solid;} .sp-button:hover{background-color:#E55D00;color:#ffffff;} input[type="text"],  input[type="password"],  input[type="email"], input[type="url"],  input[type="date"],  input[type="month"],  input[type="time"],  input[type="datetime"],  input[type="datetime-local"],  input[type="week"],  input[type="number"],  input[type="search"],  input[type="tel"],  input[type="color"],  select,  textarea, .woocommerce input, .woocommerce select, .woocommerce textarea, .widget-content-block input, .widget-content-block select, .widget-content-block textarea{color:#484848;background-color:#ffffff;border:1px solid #DBDBDB;border-radius:5px;padding:7px;font-family:'Open Sans';font-weight:400;font-style:normal;} .btn{background-color:#FF6B00}@media (max-width: 480px){body {font-size:14px;line-height:1.6;}}/*endmobile*/@media (min-width: 481px) and (max-width: 1024px){}/*endtablet*/

/* Custom CSS */
/* Produktraster + Zaehlung + Sortierung auf Eltern-Kategorie ausblenden */
.term-bodenreparatur .sp-wccustomproductsgrid-wrapper,
.term-bodenbeschichtung .sp-wccustomproductsgrid-wrapper,
.term-bodenvorbereitung .sp-wccustomproductsgrid-wrapper {
    display: none !important;
}
/* === FRAMARY Kategorie-Kacheln (Eltern-Kategorieseiten) === */

/* Einleitungstext */
.framary-kat-text .fk-intro {
    max-width: 900px;
    margin: 0 0 24px 0;
    color: #666f7a;
    font-size: 17px;
    line-height: 1.6;
}

/* "Weitere Infos"-Button */
.framary-kat-text .fk-btn {
    display: inline-block;
    margin: 0 0 32px 0;
    padding: 12px 24px;
    background: #ff6b00;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: background 0.2s ease;
}
.framary-kat-text .fk-btn:hover {
    background: #e55d00;
    color: #fff;
}

/* Kachel-Reihe: zwei Spalten */
.framary-kat-text .fk-kacheln {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 0 0 40px 0;
}

/* Einzelne Kachel */
.framary-kat-text .fk-kachel {
    position: relative;
    display: block;
    height: 260px;
    border-radius: 4px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    text-decoration: none;
}

/* Dunkler Verlauf für Lesbarkeit */
.framary-kat-text .fk-kachel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.18);
    transition: background 0.2s ease;
}
.framary-kat-text .fk-kachel:hover::after {
    background: rgba(0,0,0,0.32);
}

/* Beschriftungsbalken auf der Kachel */
.framary-kat-text .fk-kachel-label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    background: rgba(30,30,30,0.78);
    color: #fff;
    padding: 12px 20px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

/* Lange Textsektion */
.framary-kat-text .fk-section {
    max-width: 900px;
    margin: 0 0 28px 0;
}
.framary-kat-text .fk-section h2 {
    color: #00a5b2;
    font-size: 26px;
    margin: 0 0 14px 0;
}
.framary-kat-text .fk-section h3 {
    color: #00a5b2;
    font-size: 20px;
    margin: 24px 0 12px 0;
}
.framary-kat-text .fk-section p,
.framary-kat-text .fk-section li {
    color: #666f7a;
    font-size: 16px;
    line-height: 1.7;
}
.framary-kat-text .fk-section ol,
.framary-kat-text .fk-section ul {
    padding-left: 22px;
    margin: 0 0 16px 0;
}

/* Mobil: Kacheln untereinander */
@media (max-width: 768px) {
    .framary-kat-text .fk-kacheln {
        grid-template-columns: 1fr;
    }
    .framary-kat-text .fk-kachel {
        height: 200px;
    }
}
/* Hintergrundbilder der Bodenreparatur-Kacheln */
.framary-kat-text .fk-kachel-beton {
    background-image: url('https://mediumspringgreen-quail-698690.hostingersite.com/wp-content/uploads/2026/06/FM-Kat-Betonboden-Reparatur-880_0x420.jpg');
}
.framary-kat-text .fk-kachel-asphalt {
    background-image: url('https://mediumspringgreen-quail-698690.hostingersite.com/wp-content/uploads/2026/06/FM-Asphaltreparatur-880_0x420.jpg');
}
/* === Unterkategorie-Einleitungstext (über dem Produktraster) === */
.framary-kat-text .framary-unterkat {
    max-width: 900px;
    margin: 0 0 28px 0;
}
.framary-kat-text .framary-unterkat h2 {
    color: #00a5b2;
    font-size: 24px;
    margin: 0 0 12px 0;
}
.framary-kat-text .framary-unterkat p {
    color: #666f7a;
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 10px 0;
}
.framary-kat-text .framary-unterkat a {
    color: #00a5b2;
    text-decoration: underline;
}
/* ============================================================
   BODENBESCHICHTUNG – Eltern-Kacheln (3 nebeneinander)
   ============================================================ */

/* 3 Kacheln nebeneinander; mobil untereinander */
.framary-kat-text .fk-kacheln-3 {
    grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 768px) {
    .framary-kat-text .fk-kacheln-3 {
        grid-template-columns: 1fr;
    }
}

/* Hintergrundbilder der Bodenbeschichtungs-Kacheln */
.framary-kat-text .fk-kachel-bb-beton {
    background-image: url('https://mediumspringgreen-quail-698690.hostingersite.com/wp-content/uploads/2026/06/FM-Bodenbeschichtung-Beton-880_0x420.jpg');
}
.framary-kat-text .fk-kachel-bb-ar {
    background-image: url('https://mediumspringgreen-quail-698690.hostingersite.com/wp-content/uploads/2026/06/FM-Beschichtung-AR-880_0x420.jpg');
}
.framary-kat-text .fk-kachel-bb-asphalt {
    background-image: url('https://mediumspringgreen-quail-698690.hostingersite.com/wp-content/uploads/2026/06/FM-Bodenbeschichtung-Asphalt-880_0x420.jpg');
}
/* Sprung-Anker unter dem Raster sauber unter dem Header positionieren */
.framary-kat-text #fk-mehr {
    scroll-margin-top: 120px;
}
/* Button-Schrift sicher weiß (gegen Theme-Linkfarbe in der Kategorie-Beschreibung) */
.framary-kat-text .fk-btn,
.framary-kat-text .fk-btn:link,
.framary-kat-text .fk-btn:visited,
.framary-kat-text .fk-btn:hover,
.framary-kat-text .fk-btn:focus {
    color: #fff !important;
}
/* Button-Schrift weiß – sticht theme.json currentColor & Linkfarbe aus */
.framary-kat-text a.fk-btn,
.framary-kat-text a.fk-btn:where(:not(.wp-element-button)) {
    color: #fff !important;
}
/* ============================================================
   VIDEO-KACHELN (verlinkte YouTube-Vorschau, DSGVO-freundlich)
   ============================================================ */
.framary-kat-text .fk-videos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 0 0 28px 0;
    max-width: 900px;
}
.framary-kat-text .fk-video {
    position: relative;
    display: block;
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    background: #000;
}
.framary-kat-text .fk-video img {
    display: block;
    width: 100%;
    height: auto;
}
/* Play-Button-Overlay */
.framary-kat-text .fk-video::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    background: rgba(0,0,0,0.75);
    border-radius: 10px;
    transition: background 0.2s ease;
}
.framary-kat-text .fk-video::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-40%, -50%);
    z-index: 2;
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #fff;
}
.framary-kat-text .fk-video:hover::after {
    background: #ff0000;
}
.framary-kat-text .fk-video-title {
    display: block;
    padding: 10px 4px 0 4px;
    color: #666f7a;
    font-size: 14px;
    font-weight: 600;
}
@media (max-width: 768px) {
    .framary-kat-text .fk-videos {
        grid-template-columns: 1fr;
    }
}
/* Zusätzlicher Abstand vor der FAQ-Überschrift */
.framary-kat-text .fk-section h2.fk-faq-heading {
    margin-top: 40px;
}
/* Gruppen-Überschrift über Kachel-Paaren (z.B. Bodenvorbereitung) */
.framary-kat-text .fk-gruppen-titel {
    color: #00a5b2;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 12px 0;
}
/* Hintergrundbilder der Bodenvorbereitung-Kacheln */
.framary-kat-text .fk-kachel-bv-betonreparatur {
    background-image: url('https://mediumspringgreen-quail-698690.hostingersite.com/wp-content/uploads/2026/06/Bodenvorb-Betonreparatur.jpg');
}
.framary-kat-text .fk-kachel-bv-betonbeschichtung {
    background-image: url('https://mediumspringgreen-quail-698690.hostingersite.com/wp-content/uploads/2026/06/FM-Super-Haftgrund-Beschichtung-880_0x420.jpg');
}
.framary-kat-text .fk-kachel-bv-asphaltreparatur {
    background-image: url('https://mediumspringgreen-quail-698690.hostingersite.com/wp-content/uploads/2026/06/FM-Bodenvorbereitung-Asphalt-880_0x420.jpg');
}
.framary-kat-text .fk-kachel-bv-asphaltbeschichtung {
    background-image: url('https://mediumspringgreen-quail-698690.hostingersite.com/wp-content/uploads/2026/06/FM-Bodenvorbereitung-Asphaltbeschichtung-880_0x420.jpg');
}
/* Produktraster auf Werkzeuge-Elternseite ausblenden */
.term-werkzeuge .sp-wccustomproductsgrid-wrapper {
    display: none !important;
}
/* Hintergrundbilder der Werkzeuge-Kacheln */
.framary-kat-text .fk-kachel-wz-elektro {
    background-image: url('https://mediumspringgreen-quail-698690.hostingersite.com/wp-content/uploads/2026/06/FM-Elektrowerkzeug-880_0x420.jpg');
}
.framary-kat-text .fk-kachel-wz-hand {
    background-image: url('https://mediumspringgreen-quail-698690.hostingersite.com/wp-content/uploads/2026/06/FM-Handwerkzeuge-880_0x420.jpg');
}
/* Zusätzlicher Abstand vor einzelnen Absätzen in Sektionen */
.framary-kat-text .fk-section p.fk-abstand-oben {
    margin-top: 32px;
}
/* Produktraster auf Arbeitsschutz-Elternseite ausblenden */
.term-arbeitsschutz .sp-wccustomproductsgrid-wrapper {
    display: none !important;
}
/* Hintergrundbild der Arbeitsschutz-Kachel (Schutzhandschuhe) */
.framary-kat-text .fk-kachel-as-handschuhe {
    background-image: url('https://mediumspringgreen-quail-698690.hostingersite.com/wp-content/uploads/2026/06/FM-Arbeitshandschuhe-880_0x420.jpg');
}
/* Sprung-Anker der Normen-Abschnitte sauber unter dem Header */
.framary-kat-text #en388,
.framary-kat-text #en407,
.framary-kat-text #en511,
.framary-kat-text #en374 {
    scroll-margin-top: 120px;
}
/* Prüflevel-Tabelle (z.B. EN388) */
.framary-kat-text .fk-tabelle {
    border-collapse: collapse;
    margin: 0 0 20px 0;
    font-size: 15px;
    color: #666f7a;
}
.framary-kat-text .fk-tabelle th,
.framary-kat-text .fk-tabelle td {
    border: 1px solid #d5d9dd;
    padding: 8px 12px;
    text-align: center;
    vertical-align: middle;
}
.framary-kat-text .fk-tabelle thead th {
    background: #00a5b2;
    color: #fff;
    font-weight: 600;
}
.framary-kat-text .fk-tabelle td:first-child {
    font-weight: 700;
    background: #f5f7f8;
}
/* Norm-Piktogramme (EN407, EN511, EN374 …) */
.framary-kat-text .fk-picto {
    max-width: 160px;
    height: auto;
    margin: 8px 0 16px 0;
}
/* Breitere Grafik (z.B. EN511 Kälte-Schaubild mit Beschriftung) */
.framary-kat-text .fk-picto-breit {
    max-width: 420px;
    height: auto;
    margin: 8px 0 16px 0;
}
/* ============================================================
   RATGEBER-Elternseite – runde Themen-Kacheln
   ============================================================ */
.framary-kat-text .fk-highlight {
    color: #00a5b2;
    font-weight: 700;
}
.framary-kat-text .fk-rg-kacheln {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 900px;
    margin: 8px 0 36px 0;
}
.framary-kat-text .fk-rg-kachel {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
}
.framary-kat-text .fk-rg-kachel-titel {
    display: block;
    color: #1e1e1e;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
    margin: 0 0 14px 0;
}
.framary-kat-text .fk-rg-bild {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.framary-kat-text .fk-rg-kachel:hover .fk-rg-bild {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
@media (max-width: 768px) {
    .framary-kat-text .fk-rg-kacheln {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}
.framary-kat-text .fk-rg-kachel-titel {
    display: block;
    color: #1e1e1e;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
    min-height: 88px;
    margin: 0 0 14px 0;
}
/* ============================================================
   RATGEBER / Seiten – Breadcrumb-Abstand
   ============================================================ */
.framary-breadcrumb {
    margin: 0 0 28px 0;
    font-size: 14px;
    color: #666f7a;
}
/* ============================================================
   Kontakt-/Beratungs-Box (grau, orange Links)
   ============================================================ */
.framary-kat-text .fk-kontaktbox {
    background: #666f7a;
    color: #fff;
    padding: 28px 32px;
    border-radius: 4px;
    max-width: 900px;
    margin: 8px 0 36px 0;
}
.framary-kat-text .fk-kontaktbox-titel {
    color: #fff;
    font-size: 22px;
    margin: 0 0 14px 0;
}
.framary-kat-text .fk-kontaktbox p {
    color: #fff;
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 12px 0;
}
.framary-kat-text .fk-kontaktbox a {
    color: #ff6b00;
    font-weight: 700;
    text-decoration: underline;
}
.framary-kat-text .fk-kontaktbox a:hover {
    color: #ff8a33;
}
.framary-kat-text .fk-kontaktbox-cta {
    text-align: center;
    margin: 18px 0 0 0;
}
/* ============================================================
   RATGEBER FAQ – Sprungliste + Anker-Abstand + Inline-Links
   (Betonboden reparieren, Ebene 2)
   ============================================================ */
.framary-kat-text .fk-faq-liste {
    list-style: none;
    padding-left: 0;
    max-width: 900px;
    margin: 0 0 24px 0;
}
.framary-kat-text .fk-faq-liste li {
    margin: 0 0 8px 0;
}
.framary-kat-text .fk-faq-liste a {
    color: #00a5b2;
    font-weight: 600;
    text-decoration: none;
}
.framary-kat-text .fk-faq-liste a:hover {
    text-decoration: underline;
}
.framary-kat-text #faq-loecher,
.framary-kat-text #faq-feucht,
.framary-kat-text #faq-frost,
.framary-kat-text #faq-schnell,
.framary-kat-text #faq-ausgleichen,
.framary-kat-text #faq-qualitaet,
.framary-kat-text #faq-quarzsand {
    scroll-margin-top: 120px;
}
/* Inline-Links in Ratgeber-Sektionen: teal = Kategorie/intern, orange = Produkt */
.framary-kat-text .fk-section a {
    color: #00a5b2;
    text-decoration: underline;
}
.framary-kat-text .fk-section a.fk-produktlink {
    color: #ff6b00;
    font-weight: 700;
}
.framary-kat-text .fk-section a.fk-produktlink:hover {
    color: #e55d00;
}
/* ============================================================
   RATGEBER – Bild mit Textumfluss (Ebene-3-Seiten)
   Text läuft neben dem Bild und darunter weiter
   ============================================================ */
.framary-kat-text .fk-media {
    max-width: 900px;
    margin: 0 0 28px 0;
}
/* Clearfix: Section umschließt das gefloatete Bild sauber */
.framary-kat-text .fk-media::after {
    content: "";
    display: table;
    clear: both;
}
.framary-kat-text .fk-media h2 {
    margin-top: 0;
}
.framary-kat-text .fk-media-bild {
    width: 40%;
    margin: 6px 28px 12px 0;   /* Abstand rechts + unten zum Text */
}
.framary-kat-text .fk-media-bild img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}
/* Standard: Bild links */
.framary-kat-text .fk-media-bild {
    float: left;
}
/* Variante: Bild rechts */
.framary-kat-text .fk-media-rechts .fk-media-bild {
    float: right;
    margin: 6px 0 12px 28px;   /* Abstand links + unten zum Text */
}
@media (max-width: 768px) {
    .framary-kat-text .fk-media-bild,
    .framary-kat-text .fk-media-rechts .fk-media-bild {
        float: none;
        width: 100%;
        margin: 0 0 16px 0;
    }
}
/* Interne/Kategorie-Links in Ratgeber-Sektionen kräftiger (nicht mehr "dünn") */
.framary-kat-text .fk-section a {
    color: #00a5b2;
    text-decoration: underline;
    font-weight: 600;
}
/* Sicherung: fk-media bleibt Block-Layout (neutralisiert evtl. geerbtes/gecachtes flex) */
.framary-kat-text .fk-media {
    display: block;
}
/* ============================================================
   RATGEBER – Ablauf-Piktogramm (volle Breite, oberhalb einer Sektion)
   ============================================================ */
.framary-kat-text .fk-ablauf-grafik {
    max-width: 900px;
    margin: 0 0 24px 0;
}
.framary-kat-text .fk-ablauf-grafik img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}
/* ============================================================
   RATGEBER-Elternseite mit nur EINER Themen-Kachel (Asphalt)
   ============================================================ */
.framary-kat-text .fk-rg-kacheln.fk-rg-kacheln-einzel {
    grid-template-columns: minmax(0, 240px);
    max-width: 240px;
}
.framary-kat-text .fk-rg-kacheln-einzel .fk-rg-kachel-titel {
    min-height: 0;
}
/* ============================================================
   RATGEBER-Elternseite mit ZWEI Themen-Kacheln (Boden markieren)
   ============================================================ */
.framary-kat-text .fk-rg-kacheln.fk-rg-kacheln-2 {
    grid-template-columns: 1fr 1fr;
    max-width: 520px;
}
/* ============================================================
   PARKPLATZ – Verkehrszeichen-Reihe (mehrere Pikto nebeneinander)
   ============================================================ */
.framary-kat-text .fk-picto-reihe {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin: 8px 0 20px 0;
}
.framary-kat-text .fk-picto-reihe img {
    max-width: 120px;
    height: auto;
    border-radius: 4px;
}
/* ============================================================
   SHOP-EINGANGSSEITE /start (page-id-8) – Eltern-Kategorie-Kacheln
   ============================================================ */

/* Einzelprodukt-Raster (SeedProd-Produktgrid) auf /start ausblenden */
.page-id-8 .sp-wccustomproductsgrid-wrapper {
    display: none !important;
}

/* Hintergrundbilder der 6 Eingangs-Kacheln */
.framary-kat-text .fk-kachel-start-bodenreparatur {
    background-image: url('https://mediumspringgreen-quail-698690.hostingersite.com/wp-content/uploads/2026/07/FM-Kat-Bodenreparatur-880_0x420.jpg');
}
.framary-kat-text .fk-kachel-start-bodenbeschichtung {
    background-image: url('https://mediumspringgreen-quail-698690.hostingersite.com/wp-content/uploads/2026/07/FM-Bodenbeschichtung-880_0x420.jpg');
}
.framary-kat-text .fk-kachel-start-bodenvorbereitung {
    background-image: url('https://mediumspringgreen-quail-698690.hostingersite.com/wp-content/uploads/2026/07/FM-Bodenvorbereitung-880_0x420.jpg');
}
.framary-kat-text .fk-kachel-start-bodenmarkierung {
    background-image: url('https://mediumspringgreen-quail-698690.hostingersite.com/wp-content/uploads/2026/07/FM-Bodenmarkierung-880_0x420.jpg');
}
.framary-kat-text .fk-kachel-start-werkzeuge {
    background-image: url('https://mediumspringgreen-quail-698690.hostingersite.com/wp-content/uploads/2026/07/FM-Werkzeuge-880_0x420.jpg');
}
.framary-kat-text .fk-kachel-start-arbeitsschutz {
    background-image: url('https://mediumspringgreen-quail-698690.hostingersite.com/wp-content/uploads/2026/07/FM-Arbeitsschutz-880_0x420.jpg');
}
/* Sicherung: 6er-Kachelraster auf /start dreispaltig */
.framary-kat-text .fk-kacheln-3 {
    grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 768px) {
    .framary-kat-text .fk-kacheln-3 {
        grid-template-columns: 1fr;
    }
}
/* ============================================================
   HOMEPAGE "/" (.home) – Hero (Mockup-Stil)
   ============================================================ */
.home .fk-hero {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 32px;
    align-items: center;
    background: linear-gradient(135deg, #00a5b2 0%, #0071a3 100%);
    color: #fff;
    padding: 56px 48px;
    margin: 0 0 48px 0;
    border-radius: 4px;
}
.home .fk-hero-eyebrow {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 0 0 12px 0;
    opacity: 0.9;
    color: #fff;
}
.home .fk-hero h1.fk-hero-titel {
    color: #fff;
    font-size: 46px;
    line-height: 1.1;
    margin: 0 0 16px 0;
}
.home .fk-hero-claim {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 18px 0;
}
.home .fk-hero-intro {
    font-size: 17px;
    line-height: 1.6;
    color: #fff;
    opacity: 0.97;
    max-width: 620px;
    margin: 0 0 24px 0;
}
.home .fk-hero-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
    max-width: 620px;
}
.home .fk-hero-features li {
    position: relative;
    padding-left: 30px;
    font-size: 15px;
    color: #fff;
}
.home .fk-hero-features li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 50%;
    background: #28a745;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}
.home .fk-hero-tel {
    font-size: 16px;
    color: #fff;
    margin: 0 0 26px 0;
}
.home .fk-hero-tel a {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}
.home .fk-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.home .fk-hero-cta .fk-btn {
    margin: 0;
}
.home .fk-hero-btn-sek {
    display: inline-block;
    padding: 12px 24px;
    background: #fff;
    color: #00a5b2;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: background 0.2s ease, color 0.2s ease;
}
.home .fk-hero-btn-sek:hover {
    background: #eaf7f8;
    color: #0071a3;
}
.home .fk-hero-deko {
    display: flex;
    justify-content: center;
    align-items: center;
}
.home .fk-hero-svg {
    width: 100%;
    max-width: 260px;
    height: auto;
    opacity: 0.35;
}
.home .fk-hero-svg .fk-svg-a { fill: #ffffff; }
.home .fk-hero-svg .fk-svg-b { fill: #ffffff; }
.home .fk-hero-svg .fk-svg-c { fill: #0071a3; }
@media (max-width: 768px) {
    .home .fk-hero {
        grid-template-columns: 1fr;
        padding: 36px 24px;
    }
    .home .fk-hero h1.fk-hero-titel {
        font-size: 32px;
    }
    .home .fk-hero-features {
        grid-template-columns: 1fr;
    }
    .home .fk-hero-deko {
        display: none;
    }
}
/* Hero – Intro als Bulletpoints (schlicht, weiß) */
.home .fk-hero-intro-liste {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    max-width: 620px;
}
.home .fk-hero-intro-liste li {
    position: relative;
    padding-left: 22px;
    margin: 0 0 10px 0;
    font-size: 17px;
    line-height: 1.5;
    color: #fff;
}
.home .fk-hero-intro-liste li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff6b00;
}
/* ============================================================
   HOMEPAGE "/" – Themen-Kacheln (4 Einstiege)
   ============================================================ */
.home .fk-home-themen {
    max-width: 1100px;
    margin: 0 auto 56px auto;
    padding: 0 20px;
}
.home .fk-home-h2 {
    color: #00a5b2;
    font-size: 30px;
    text-align: center;
    margin: 0 0 10px 0;
}
.home .fk-home-sub {
    color: #666f7a;
    font-size: 19px;
    font-weight: 600;
    text-align: center;
    max-width: 720px;
    margin: 0 auto 32px auto;
}
.home .fk-themen-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.home .fk-thema {
    position: relative;
    display: block;
    height: 220px;
    border-radius: 4px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    text-decoration: none;
}
.home .fk-thema::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.30);
    transition: background 0.2s ease;
}
.home .fk-thema:hover::after {
    background: rgba(0,0,0,0.45);
}
.home .fk-thema-label {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 2;
    background: rgba(30,30,30,0.80);
    color: #fff;
    padding: 10px 18px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    white-space: nowrap;
}
.home .fk-thema-beton {
    background-image: url('https://mediumspringgreen-quail-698690.hostingersite.com/wp-content/uploads/2026/07/Framary_FM_Epoxi_Betonrep_Verarbeitung_168.jpg');
}
.home .fk-thema-beschichten {
    background-image: url('https://mediumspringgreen-quail-698690.hostingersite.com/wp-content/uploads/2026/07/Beschichten-1.jpg');
}
.home .fk-thema-asphalt {
    background-image: url('https://mediumspringgreen-quail-698690.hostingersite.com/wp-content/uploads/2026/07/Chipfill.jpg');
}
.home .fk-thema-markieren {
    background-image: url('https://mediumspringgreen-quail-698690.hostingersite.com/wp-content/uploads/2026/07/PREMARK-Buchstaben-gelb-2.jpg');
}
@media (max-width: 900px) {
    .home .fk-themen-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 480px) {
    .home .fk-themen-grid {
        grid-template-columns: 1fr;
    }
}
/* ============================================================
   HOMEPAGE "/" – Eigenschafts-Piktogramme + Anwendungsfälle
   ============================================================ */
.home .fk-home-pictos {
    max-width: 1000px;
    margin: 0 auto 32px auto;
    padding: 0 20px;
}
.home .fk-home-h2-2 {
    margin-top: 20px;
}
.home .fk-picto-grid {
    display: grid;
    gap: 10px 24px;
    justify-items: center;
    align-items: center;
    margin: 0 auto;
}
.home .fk-picto-grid-4 {
    grid-template-columns: repeat(4, 1fr);
    max-width: 820px;
}
.home .fk-picto-grid-3 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 640px;
}
.home .fk-picto-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.home .fk-picto-item img {
    width: 100%;
    max-width: 190px;
    height: auto;
    object-fit: contain;
}
@media (max-width: 700px) {
    .home .fk-picto-grid-4,
    .home .fk-picto-grid-3 {
        grid-template-columns: 1fr 1fr;
        max-width: 400px;
    }
}
/* ============================================================
   HOMEPAGE "/" – DIY / Handwerker-Block (Text links, Foto rechts)
   ============================================================ */
.home .fk-home-diy {
    max-width: 1100px;
    margin: 0 auto 56px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    align-items: center;
}
.home .fk-diy-h2 {
    text-align: left;
    margin-top: 0;
}
.home .fk-diy-p {
    color: #666f7a;
    font-size: 17px;
    line-height: 1.7;
    margin: 0 0 16px 0;
}
.home .fk-diy-liste {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
}
.home .fk-diy-liste li {
    position: relative;
    padding-left: 30px;
    margin: 0 0 10px 0;
    color: #666f7a;
    font-size: 16px;
    line-height: 1.5;
}
.home .fk-diy-liste li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 50%;
    background: #00a5b2;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}
.home .fk-diy-cta {
    margin-top: 24px;
}
.home .fk-diy-cta .fk-btn {
    margin: 0;
}
.home .fk-diy-bild img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}
@media (max-width: 768px) {
    .home .fk-home-diy {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .home .fk-diy-bild {
        order: -1;
    }
}
/* ============================================================
   HOMEPAGE "/" – Intro-Textblock (zentriert)
   ============================================================ */
.home .fk-home-intro {
    max-width: 820px;
    margin: 0 auto 56px auto;
    padding: 0 20px;
    text-align: center;
}
.home .fk-intro-p {
    color: #666f7a;
    font-size: 17px;
    line-height: 1.8;
    margin: 0 0 18px 0;
}
/* ============================================================
   HOMEPAGE "/" – Werte-Karten (4 Spalten)
   ============================================================ */
.home .fk-home-werte {
    max-width: 1100px;
    margin: 0 auto 56px auto;
    padding: 0 20px;
}
.home .fk-werte-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 8px;
}
.home .fk-werte-karte {
    background: #f5f7f8;
    border-top: 3px solid #00a5b2;
    border-radius: 4px;
    padding: 24px 22px;
}
.home .fk-werte-titel {
    color: #00a5b2;
    font-size: 18px;
    margin: 0 0 12px 0;
    line-height: 1.3;
}
.home .fk-werte-karte p {
    color: #666f7a;
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
}
@media (max-width: 900px) {
    .home .fk-werte-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 480px) {
    .home .fk-werte-grid {
        grid-template-columns: 1fr;
    }
}
/* ============================================================
   HOMEPAGE "/" – Zielgruppen / Branchen (4 Karten)
   ============================================================ */
.home .fk-home-zielgruppen {
    max-width: 1100px;
    margin: 0 auto 56px auto;
    padding: 0 20px;
}
.home .fk-zg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 8px;
}
.home .fk-zg-karte {
    background: #fff;
    border: 1px solid #d5d9dd;
    border-radius: 4px;
    padding: 24px 22px;
}
.home .fk-zg-titel {
    color: #00a5b2;
    font-size: 18px;
    margin: 0 0 14px 0;
    padding: 0 0 10px 0;
    border-bottom: 2px solid #f5f7f8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.home .fk-zg-liste {
    list-style: none;
    padding: 0;
    margin: 0;
}
.home .fk-zg-liste li {
    position: relative;
    padding-left: 18px;
    margin: 0 0 9px 0;
    color: #666f7a;
    font-size: 15px;
    line-height: 1.5;
}
.home .fk-zg-liste li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff6b00;
}
@media (max-width: 900px) {
    .home .fk-zg-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 480px) {
    .home .fk-zg-grid {
        grid-template-columns: 1fr;
    }
}
/* ============================================================
   HOMEPAGE "/" – Oranges CTA-Band
   ============================================================ */
.home .fk-home-cta-band {
    max-width: 1100px;
    margin: 0 auto 56px auto;
    padding: 48px 32px;
    background: linear-gradient(135deg, #ff6b00 0%, #e55d00 100%);
    border-radius: 4px;
    text-align: center;
}
.home .fk-cta-band-titel {
    color: #fff;
    font-size: 28px;
    margin: 0 0 12px 0;
    line-height: 1.2;
}
.home .fk-cta-band-text {
    color: #fff;
    font-size: 17px;
    line-height: 1.6;
    max-width: 680px;
    margin: 0 auto 24px auto;
    opacity: 0.97;
}
.home .fk-cta-band-btn {
    margin: 0;
    background: #fff;
    color: #ff6b00;
}
.home .fk-cta-band-btn:link,
.home .fk-cta-band-btn:visited,
.home .fk-cta-band-btn:hover,
.home .fk-cta-band-btn:focus {
    color: #ff6b00 !important;
}
.home .fk-cta-band-btn {
    background: #fff;
    color: #ff6b00;
}
@media (max-width: 480px) {
    .home .fk-home-cta-band {
        padding: 36px 20px;
    }
    .home .fk-cta-band-titel {
        font-size: 23px;
    }
}
/* ============================================================
   HOMEPAGE "/" – Fotoberatung-Teaser
   ============================================================ */
.home .fk-home-foto {
    max-width: 1100px;
    margin: 0 auto 56px auto;
    padding: 0 20px;
}
.home .fk-foto-inner {
    background: #f5f7f8;
    border-left: 4px solid #00a5b2;
    border-radius: 4px;
    padding: 36px 40px;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}
.home .fk-foto-h2 {
    margin-top: 0;
}
.home .fk-foto-p {
    color: #666f7a;
    font-size: 17px;
    line-height: 1.7;
    margin: 0 0 14px 0;
}
.home .fk-foto-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px 24px;
    margin-top: 24px;
}
.home .fk-foto-cta .fk-btn {
    margin: 0;
}
.home .fk-foto-tel {
    color: #00a5b2;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
}
.home .fk-foto-tel:hover {
    text-decoration: underline;
}
@media (max-width: 480px) {
    .home .fk-foto-inner {
        padding: 28px 22px;
    }
}
/* ============================================================
   HOMEPAGE "/" – Kundenbewertungen (statisch, DSGVO-neutral)
   ============================================================ */
.home .fk-home-reviews {
    max-width: 1100px;
    margin: 0 auto 56px auto;
    padding: 0 20px;
}
.home .fk-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 8px;
}
.home .fk-review-karte {
    background: #fff;
    border: 1px solid #d5d9dd;
    border-radius: 4px;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
}
.home .fk-review-sterne {
    color: #ffa500;
    font-size: 18px;
    letter-spacing: 2px;
    margin: 0 0 12px 0;
}
.home .fk-review-text {
    color: #666f7a;
    font-size: 15px;
    line-height: 1.65;
    margin: 0 0 16px 0;
    flex: 1;
}
.home .fk-review-quelle {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid #f5f7f8;
    padding-top: 12px;
}
.home .fk-review-name {
    color: #1e1e1e;
    font-weight: 700;
    font-size: 15px;
}
.home .fk-review-src {
    color: #999;
    font-size: 13px;
}
@media (max-width: 900px) {
    .home .fk-reviews-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 600px) {
    .home .fk-reviews-grid {
        grid-template-columns: 1fr;
    }
}
/* Hintergrundbilder der Collomix-Kacheln (Ebene 3: Collomix > Rührwerke / Rührer) */
.framary-kat-text .fk-kachel-collomix-ruehrwerke {
    background-image: url('https://mediumspringgreen-quail-698690.hostingersite.com/wp-content/uploads/2026/06/File20189.png');
}
.framary-kat-text .fk-kachel-collomix-ruehrer {
    background-image: url('https://mediumspringgreen-quail-698690.hostingersite.com/wp-content/uploads/2026/07/Ruehrer-MKD.jpg');
}
/* Hintergrundbilder der Collomix-Kacheln (Ebene 3: Collomix Rührer > Rührwerke / Rührer) */
.framary-kat-text .fk-kachel-collomix-ruehrwerke {
    background-image: url('https://mediumspringgreen-quail-698690.hostingersite.com/wp-content/uploads/2026/06/File20189.png');
}
.framary-kat-text .fk-kachel-collomix-ruehrer {
    background-image: url('https://mediumspringgreen-quail-698690.hostingersite.com/wp-content/uploads/2026/07/Ruehrer-MKD.jpg');
}

/* Kachel "Collomix Rührer" auf der Elektrowerkzeuge-Elternseite (Ebene 2) */
.framary-kat-text .fk-kachel-ew-collomix {
    background-image: url('https://mediumspringgreen-quail-698690.hostingersite.com/wp-content/uploads/2026/06/File20189.png');
}

/* Produktraster + Zaehlung + Sortierung auf den Collomix-Elternseiten ausblenden
   (analog zu .term-bodenreparatur / .term-bodenbeschichtung / .term-bodenvorbereitung / .term-werkzeuge / .term-arbeitsschutz) */
.term-elektrowerkzeuge .sp-wccustomproductsgrid-wrapper,
.term-collomix-ruehrer .sp-wccustomproductsgrid-wrapper {
    display: none !important;
}
/* ============================================================
   RÜHRER-FINDER Widget – ins globale Stylesheet einfügen
   (aus dem <style>-Block des Widgets ausgelagert, damit die
   Kategorie-Beschreibung kein <style> mehr enthalten muss)
   ============================================================ */
.fm-rf-widget {
      max-width: 720px;
      margin: 24px 0;
      padding: 24px;
      border: 1px solid #dbe3ec;
      border-radius: 10px;
      background: #f8fafc;
      font-family: inherit;
      box-sizing: border-box;
    }
    .fm-rf-widget * { box-sizing: border-box; }
    .fm-rf-title {
      font-size: 1.15em;
      font-weight: 700;
      color: #1f4e79;
      margin: 0 0 6px 0;
    }
    .fm-rf-sub {
      font-size: 0.92em;
      color: #5b6b7c;
      margin: 0 0 18px 0;
    }
    .fm-rf-row {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-bottom: 18px;
    }
    .fm-rf-field {
      flex: 1 1 260px;
      display: flex;
      flex-direction: column;
    }
    .fm-rf-field label {
      font-size: 0.88em;
      font-weight: 600;
      color: #33475b;
      margin-bottom: 6px;
    }
    .fm-rf-field select {
      padding: 10px 12px;
      border: 1px solid #c3d0dd;
      border-radius: 6px;
      background: #fff;
      font-size: 0.95em;
      color: #1a2733;
    }
    .fm-rf-field select:focus {
      outline: 2px solid #1f4e79;
      outline-offset: 1px;
    }
    .fm-rf-result {
      border-top: 2px solid #1f4e79;
      padding-top: 16px;
      min-height: 40px;
    }
    .fm-rf-placeholder {
      color: #78889a;
      font-size: 0.92em;
    }
    .fm-rf-card {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 18px;
      background: #fff;
      border: 1px solid #d7e2ec;
      border-radius: 8px;
      padding: 16px 18px;
    }
    .fm-rf-card-main {
      flex: 1 1 220px;
    }
    .fm-rf-model {
      font-size: 1.2em;
      font-weight: 700;
      color: #1f4e79;
      margin: 0 0 4px 0;
    }
    .fm-rf-note {
      font-size: 0.85em;
      color: #b26a00;
      margin: 4px 0 0 0;
    }
    .fm-rf-specs {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 24px;
      flex: 2 1 320px;
    }
    .fm-rf-spec {
      font-size: 0.9em;
      color: #33475b;
    }
    .fm-rf-spec strong {
      display: block;
      color: #6d7c8c;
      font-weight: 600;
      font-size: 0.78em;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      margin-bottom: 2px;
    }
    .fm-rf-cta {
      display: inline-block;
      margin-top: 14px;
      padding: 10px 18px;
      background: #1f4e79;
      color: #fff !important;
      text-decoration: none;
      border-radius: 6px;
      font-size: 0.92em;
      font-weight: 600;
    }
    .fm-rf-cta:hover { background: #163a5c; }
/* ============================================================
   Mehr vertikaler Abstand in Rührer-/Produkttexten (framary-unterkat)
   Gleichmäßige Luft zwischen allen Blöcken: Überschriften, Absätze,
   Listen und Tabelle.
   WICHTIG: Ohne .framary-kat-text davor, da der Produkttext direkt in
   der WooCommerce-Beschreibungsbox liegt (nur .framary-unterkat als Wrapper).
   ============================================================ */
.framary-unterkat h2 {
    margin: 32px 0 14px 0;
}
.framary-unterkat h3 {
    margin: 28px 0 12px 0;
}
.framary-unterkat p {
    margin: 0 0 18px 0;
}
.framary-unterkat ul {
    margin: 0 0 24px 0;
}
.framary-unterkat li {
    margin: 0 0 8px 0;
}
.framary-unterkat .fk-tabelle {
    margin: 0 0 28px 0;
}
/* Erste Überschrift ohne zu großen Abstand nach oben */
.framary-unterkat > h2:first-child {
    margin-top: 0;
}