/*
Theme Name: CleanFix Child
Template: Avada
Description: Child Theme für CleanFix Service
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --blue:        #1040A0;
  --blue-deep:   #0A2E7A;
  --blue-navy:   #061A55;
  --blue-soft:   #E8F1FB;
  --accent:      #8CCDE8;
  --spring:      #7BC52F;
  --spring-soft: #EEF8DC;
  --sun:         #F59E0B;
  --sun-deep:    #B45309;
  --sun-soft:    #FEF3C7;
  --solar:       #F59E0B;
  --solar-deep:  #B45309;
  --solar-soft:  #FEF3C7;
  --ink:         #0D1B3E;
  --text:        #2C3E50;
  --mute:        #506070;
  --line:        #D8E4F0;
  --bg:          #FFFFFF;
  --bg-soft:     #F0F4FA;
  --pool:        #0EA5E9;
  --pool-deep:   #0369A1;
  --pool-soft:   #E0F2FE;
}

/* Global: suppress WP/Avada underline on CF buttons */
[class*="cf-"][class*="-cta"]:hover,
[class*="cf-"][class*="-btn"]:hover,
.ablauf-cta:hover,
.paket-cta:hover { text-decoration: none !important; }


/* ============================================================
   HEADER / EYEBROW HELPERS
   ============================================================ */

.fusion-main-menu > ul > li.fusion-megamenu-menu,
.awb-menu > ul > li {
   /* position: static !important; */
}

.awb-menu.collapse-enabled a,
.awb-menu.collapse-enabled > ul > li > a,
.awb-menu.collapse-enabled ul li a {
  padding: 0px !important;
  --awb-items-padding-top: 0px !important;
  --awb-items-padding-bottom: 0px !important;
  --awb-items-padding-left: 0px !important;
  --awb-items-padding-right: 0px !important;
}

#cleanfix-mega-menu {
 /*   width: 100vw;
    left: 50%;
    transform: translateX(-50%); 
*/
}

/* ===== LEISTUNGEN MEGA MENU ===== */

/* Mega Wrap — Position fix per CSS (kein JS nötig)
   URSACHE: Avada zentriert per JS (awbMegamenuPosition) nach window.load →
   springt 1-2 Sek. nach Seitenaufbau. Fix: position:fixed + margin-left
   zentriert ab Frame 1, unabhängig von JS-Timing. */
@media (min-width: 1281px) {
  .cf-nav-leistungen > div.awb-menu__mega-wrap {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    margin-left: -600px !important;   /* halbe Panel-Breite (1200 / 2) */
    width: 1200px !important;
    top: auto !important;
    transform: translateY(39.6px) !important;
    background: #fff !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.12), 0 4px 16px rgba(16,64,160,.08) !important;
    overflow: hidden !important;
  }
}

/* Panel im DOM halten → Layout der Karten passiert vor erstem Hover */
@media (min-width: 1025px) {
  html .cf-nav-leistungen > div.awb-menu__mega-wrap {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, visibility 0s linear .15s !important;
  }
  html .cf-nav-leistungen:hover > div.awb-menu__mega-wrap,
  html .cf-nav-leistungen:focus-within > div.awb-menu__mega-wrap {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .15s ease .06s, visibility 0s !important;
  }
}

/* Avada Library fusion-Wrapper neutralisieren (max-width:104% + negative margins zurücksetzen) */
.cf-nav-leistungen .awb-menu__mega-wrap .fusion-fullwidth {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
.cf-nav-leistungen .awb-menu__mega-wrap .fusion-builder-row {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
}
.cf-nav-leistungen .awb-menu__mega-wrap .fusion-layout-column,
.cf-nav-leistungen .awb-menu__mega-wrap .fusion-column-wrapper {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Schmale Viewports (1025–1280px): fixe Breite fällt weg, volle Breite mit Abstand */
@media (min-width: 1025px) and (max-width: 1280px) {
  .cf-nav-leistungen > div.awb-menu__mega-wrap {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    margin-left: 0 !important;
    transform: translateY(39.6px) !important;
  }
}

.cf-mm {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 420px;
}

.cf-mm-tabs {
  background: #fff;
  border-right: 1px solid #e2e8f0;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cf-mm-tab {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .14s, border-color .14s;
}
.cf-mm-tab:hover { background: #fff; }
.cf-mm-tab.active { background: #fff; border-left-color: #1040A0; }

.cf-mm-tab-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 15px;
  flex-shrink: 0;
  transition: transform .15s;
}
.cf-mm-tab:hover .cf-mm-tab-icon,
.cf-mm-tab.active .cf-mm-tab-icon { transform: scale(1.08); }

.cf-mm-icon-blue  { background: #dbeafe; color: #3b82f6; }
.cf-mm-icon-green { background: #d1fae5; color: #10b981; }
.cf-mm-icon-amber { background: #fef3c7; color: #f59e0b; }

.cf-mm-tab-title { font-size: 13.5px; font-weight: 600; color: #0f172a; line-height: 1.2; }
.cf-mm-tab.active .cf-mm-tab-title { color: #1040A0; }
.cf-mm-tab-sub { font-size: 11.5px; color: #64748b; margin-top: 2px; }

.cf-mm-tab-footer {
  margin-top: auto;
  padding: 16px 20px;
  border-top: 1px solid #e2e8f0;
}
.cf-mm-footer-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 8px;
}
.cf-mm-footer-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #eff4ff;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 600;
  color: #1a56db;
  transition: background .14s;
}
.cf-mm-footer-link:hover { background: #dbeafe; }

.cf-mm-content { padding: 28px 32px; position: relative; }

.cf-mm-pane { display: none; }
.cf-mm-pane.active { display: block; }

.cf-mm-pane-head {
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e8f1fb;
}
.cf-mm-pane-title { font-size: 17px; font-weight: 700; color: #061A55; letter-spacing: -0.2px; }

.cf-mm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.cf-mm-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  text-decoration: none;
  color: #0f172a;
  background: #fff;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cf-mm-card,
.cf-mm-card:hover {
  text-decoration: none !important;
}
.cf-mm-card:hover {
  border-color: #1040A0;
  box-shadow: 0 2px 10px rgba(16,64,160,.10);
  transform: none;
}

.cf-mm-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 13px;
  flex-shrink: 0;
}

.cf-mm-card-title { font-size: 13px; font-weight: 600; line-height: 1.3; }
.cf-mm-card-sub { font-size: 11.5px; color: #64748b; margin-top: 2px; line-height: 1.4; }

.cf-mm-promo {
  display: none;
}
.cf-mm-promo-badge {
  background: #38bdf8;
  color: #061A55;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.cf-mm-promo-text { flex: 1; font-size: 13px; color: rgba(255,255,255,.85); }
.cf-mm-promo-text strong { color: #fff; }
.cf-mm-promo-cta {
  padding: 9px 16px;
  background: #38bdf8;
  color: #061A55;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s;
}
.cf-mm-promo-cta:hover { background: #7dd3fc; }

/* ===== ENDE LEISTUNGEN MEGA MENU V3 ===== */

.cf-eyebrow,
.cleanfix-eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--blue-deep);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 0;
}
.cf-eyebrow::before,
.cleanfix-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--accent);
  flex-shrink: 0;
  position: static !important;
  display: block;
}
.cf-eyebrow-accent {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0;
}
.cf-eyebrow-accent::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--accent);
  flex-shrink: 0;
  display: block;
}

.cleanfix-eyebrow.spring-eye {
  color: #3a6200;
}
.cleanfix-eyebrow.spring-eye::before {
  background: var(--spring);
}

.cleanfix-eyebrow.summer-eye::before {
  background: var(--sun-deep);
}


/* ══════════════════════════════════════════════════════════
   SAISON PILLS (Unterseiten-Eyebrow)
   ══════════════════════════════════════════════════════════ */

.cf-spring-pill,
.cf-summer-pill,
.cf-autumn-pill,
.cf-winter-pill {
  display: inline-flex !important;
  width: fit-content !important;
  align-items: center;
}

/* ══════════════════════════════════════════════════════════
   SAISON-BANNER & FLOATING PILL
   Snippet: saison-banner-snippet.html
   ══════════════════════════════════════════════════════════ */

.cf-saison-banner {
  position: relative;
  width: 100%; padding: 11px 80px;
  display: none; align-items: center; justify-content: center;
  gap: 20px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 14px;
  background-color: #fff;
}
.cf-saison-banner.is-visible { display: flex; }

.cf-saison-banner.theme-spring {
  background: linear-gradient(90deg, #e8f4fb 0%, #f0f9ff 50%, #e8f4fb 100%);
  border-bottom: 1px solid rgba(140,205,232,.4); color: #0D1B3E;
}
.cf-saison-banner.theme-summer {
  background: linear-gradient(90deg, #fff8e8 0%, #fffbf0 50%, #fff8e8 100%);
  border-bottom: 1px solid rgba(255,195,0,.3); color: #4a3800;
}
.cf-saison-banner.theme-autumn {
  background: linear-gradient(90deg, #e8f1fb 0%, #eef4ff 50%, #e8f1fb 100%);
  border-bottom: 1px solid rgba(16,64,160,.2); color: #0D1B3E;
}
.cf-saison-banner.theme-winter {
  background: linear-gradient(90deg, #061A55 0%, #0A2E7A 50%, #061A55 100%);
  border-bottom: 1px solid rgba(140,205,232,.2); color: #fff;
}

.cf-saison-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; letter-spacing: .08em;
  margin-left: 8px;
  text-transform: uppercase; padding: 2px 8px;
  border-radius: 999px; flex-shrink: 0; margin-right: 5px;
}
.cf-saison-badge svg { width: 12px; height: 12px; flex-shrink: 0; }
.theme-spring .cf-saison-badge { background: #8CCDE8; color: #0A2E7A; }
.theme-summer .cf-saison-badge { background: #ffc300; color: #4a3800; }
.theme-autumn .cf-saison-badge { background: #1040A0; color: #fff; }
.theme-winter .cf-saison-badge { background: #8CCDE8; color: #0A2E7A; }

.cf-saison-link {
  display: block;
  text-decoration: none !important; color: inherit; transition: opacity .2s;
}
.cf-saison-link *, .cf-saison-link:hover * { text-decoration: none !important; }
.cf-saison-link:hover { opacity: .8; }
.cf-saison-link:hover .cf-saison-arrow { transform: translateX(3px); }
.cf-saison-text { display: inline; line-height:28px; }
.cf-saison-arrow {
  display: inline-flex; align-items: center;
  vertical-align: middle; margin-left: 8px;
  transition: transform .2s;
}
.cf-saison-text strong { font-weight: 600; }

.cf-saison-close {
  position: absolute; right: 50px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  opacity: .4; padding: 4px; line-height: 1; transition: opacity .2s;
}
.cf-saison-close:hover { opacity: .8; }
.cf-saison-close svg { width: 14px; height: 14px; display: block; }
.theme-winter .cf-saison-close svg { stroke: #fff; }
.theme-spring .cf-saison-close svg,
.theme-summer .cf-saison-close svg,
.theme-autumn .cf-saison-close svg { stroke: #0D1B3E; }

.cf-floating-pill {
  position: fixed; bottom: 28px; right: 28px; z-index: 999999 !important;
  display: inline-flex; align-items: center; gap: 10px;
  width: max-content;
  padding: 12px 20px 12px 14px; border-radius: 999px;
  font-family: 'DM Sans', system-ui, sans-serif; font-size: 14px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 8px 32px -4px rgba(6,26,85,.35);
  opacity: 0 !important; pointer-events: none; transform: translateY(12px) !important;
  transition: opacity .35s ease, transform .35s ease, background .2s, box-shadow .2s !important;
}
.cf-floating-pill, .cf-floating-pill *, .cf-floating-pill:hover, .cf-floating-pill:hover * { text-decoration: none !important; }
.cf-floating-pill.fp-visible { opacity: 1 !important; pointer-events: auto; transform: translateY(0) !important; }
.cf-floating-pill.theme-spring  { background: var(--blue);   color: #fff; }
.cf-floating-pill.theme-spring:hover  { background: var(--blue-deep); box-shadow: 0 12px 40px -4px rgba(6,26,85,.45); }
.cf-floating-pill.theme-summer  { background: #ffc300; color: #4a3800; }
.cf-floating-pill.theme-summer:hover  { background: #e6b000;  box-shadow: 0 12px 40px -4px rgba(74,56,0,.35); }
.cf-floating-pill.theme-autumn  { background: var(--blue);   color: #fff; }
.cf-floating-pill.theme-autumn:hover  { background: var(--blue-deep); box-shadow: 0 12px 40px -4px rgba(6,26,85,.45); }
.cf-floating-pill.theme-winter  { background: var(--accent); color: var(--blue-deep); }
.cf-floating-pill.theme-winter:hover  { background: #72bdd8;  box-shadow: 0 12px 40px -4px rgba(6,26,85,.35); }

.cf-fp-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cf-fp-icon svg { width: 15px; height: 15px; }
.cf-fp-text { line-height: 1.25; }
.cf-fp-label { font-size: 11px; opacity: .75; font-weight: 500; display: block; }
.cf-fp-action { display: block; }

@media (max-width: 768px) {
  /* Banner: kompakter 1-Zeiler, kein Umbruch */
  .cf-saison-banner {
    padding: 9px 44px 9px 14px;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .cf-saison-link {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .cf-saison-text {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }
  .cf-saison-arrow { display: none; }
  .cf-saison-close { right: 12px; }

  /* Floating Pill: kompakter, keine zweizeilige Beschriftung */
  .cf-floating-pill {
    bottom: 16px;
    right: 16px;
    padding: 10px 16px 10px 12px;
    gap: 8px;
    font-size: 13px;
  }
  .cf-fp-icon { width: 28px; height: 28px; }
  .cf-fp-label { display: none; }
  .cf-fp-action { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-saison-arrow, .cf-floating-pill { transition: none; }
}


/* ============================================================
   BREADCRUMB  (.cf-breadcrumb)
   Snippet: breadcrumb-snippet.html
   ============================================================ */
.cf-breadcrumb {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  margin-bottom: 28px;
}
.cf-bc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}
.cf-bc-item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #506070;
}
.cf-bc-link {
  color: #506070;
  text-decoration: none;
  transition: color .2s;
}
.cf-bc-link:hover { color: #1040A0; }
.cf-bc-sep {
  color: #B0BEC5;
  flex-shrink: 0;
}
.cf-bc-current span {
  color: #1040A0;
  font-weight: 500;
}

@media (max-width: 640px) {
  .cf-breadcrumb { font-size: 12px; }
}


/* ============================================================
   SVG KARTE BADEN-WÜRTTEMBERG  (.cf-regionen-map)
   Snippet: snippet-karte-bw.html
   ============================================================ */
.cf-regionen-map {
  border-radius: 20px; border: 1px solid #D8E4F0;
  background: #F0F4FA; padding: 24px;
  display: flex; align-items: center; justify-content: center;
}
.cf-regionen-map svg { width: 100%; height: auto; display: block; }

@media (max-width: 768px) {
  .cf-regionen-map { display: none; }
}


/* ============================================================
   STÄDTE PILLS  (.cf-pill-cloud)
   Snippet: snippet-staedte-pills.html
   ============================================================ */
.cf-pill-cloud {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px;
}
.cf-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500;
  color: #506070; background: #F0F4FA;
  border: 1px solid #D8E4F0; border-radius: 999px;
  padding: 6px 14px; line-height: 1;
}
.cf-pill svg { width: 12px; height: 12px; stroke: #506070; flex-shrink: 0; }
.cf-pill-main {
  color: #1040A0; background: #E8F1FB;
  border-color: rgba(16,64,160,.2); font-weight: 600;
}
.cf-pill-main svg { stroke: #1040A0; }
.cf-stadt-note {
  margin-top: 14px !important; font-size: 13px; color: #506070;
  display: flex; align-items: center; gap: 8px;
}
.cf-stadt-note::before {
  content: ""; width: 20px; height: 1px;
  background: #8CCDE8; flex-shrink: 0;
}

@media (max-width: 640px) {
  .cf-pill-cloud { gap: 6px; }
}


/* ============================================================
   USP CHECKLISTE  (.cf-usp-list)
   Snippet: snippet-usp-checkliste.html
   Hintergrund: Dunkel (Navy/Blau)
   ============================================================ */
.cf-usp-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0;
}
.cf-usp-list li {
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: flex-start; gap: 14px;
}
.cf-usp-list li:first-child {
  border-top: 1px solid rgba(255,255,255,.08);
}
.cf-usp-check {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(140,205,232,.15);
  border: 1px solid rgba(140,205,232,.3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
}
.cf-usp-check svg {
  width: 11px; height: 11px;
  stroke: #8CCDE8; stroke-width: 2.5;
}
.cf-usp-list strong {
  display: block; font-size: 16px; font-weight: 600;
  color: #fff; margin-bottom: 3px;
}
.cf-usp-list span {
  font-size: 14px; color: rgba(255,255,255,.55);
}


/* ============================================================
   KUNDENLOGO CAROUSEL  (.cf-marquee-wrap)
   Shortcode: [kundenlogos]
   ============================================================ */
.cf-marquee-wrap { display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.cf-marquee-row { display: flex; overflow: hidden; user-select: none; }
.cf-marquee-row:hover .cf-marquee-track { animation-play-state: paused; }
.cf-marquee-track {
  display: flex; gap: 14px; flex-shrink: 0;
  animation: cf-marquee-left 32s linear infinite;
}
.cf-marquee-reverse .cf-marquee-track { animation-name: cf-marquee-right; }

@keyframes cf-marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes cf-marquee-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.cf-logo-item {
  flex-shrink: 0; background: #F0F4FA; border: 1px solid #D8E4F0;
  border-radius: 12px; padding: 18px 24px;
  display: flex; align-items: center; justify-content: center;
  min-width: 160px; min-height: 68px; transition: border-color .2s, background .2s;
}
.cf-logo-item:hover { border-color: #1040A0; background: #E8F1FB; }
.cf-logo-item img { max-height: 40px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; }
.cf-logo-item:hover img { filter: grayscale(0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .cf-marquee-track { animation: none; }
}


/* ============================================================
   LEISTUNGSPORTFOLIO 3-SPALTEN  (.cf-col3-grid)
   Snippet: snippet-leistungsportfolio-3col.html
   ============================================================ */
.cf-col3-label {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: #506070; margin: 48px 0 20px;
}
.cf-col3-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, auto);
  column-gap: 2px; row-gap: 0;
  background: #D8E4F0;
  border: 1px solid #D8E4F0; border-radius: 18px; overflow: hidden;
}
.cf-col3-col {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  background: #fff; padding: 36px 32px; transition: background .25s;
}
.cf-col3-col:hover { background: #F0F4FA; }
.cf-col3-cat {
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: #8CCDE8; margin-bottom: 8px;
}
.cf-col3-title {
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 19px;
  color: #0D1B3E; margin-bottom: 22px; padding-bottom: 18px;
  border-bottom: 1px solid #D8E4F0;
}
.cf-col3-list {
  list-style: none; display: flex; flex-direction: column; gap: 9px;
  padding-inline-start: 30px !important;
}
.cf-col3-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; color: #2C3E50; line-height: 1.4;
}
.cf-col3-list li::before {
  content: ""; width: 16px; height: 16px; min-width: 16px;
  border-radius: 50%; margin-top: 1px;
  background: #E8F1FB
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 8l2.5 2.5L12 5.5' stroke='%231040A0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center/contain;
}
.cf-col3-mehr {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid #D8E4F0;
  font-size: 13px; font-weight: 600; color: #1040A0;
  text-decoration: none; transition: gap .2s ease, color .2s ease;
}
.cf-col3-mehr:hover { gap: 10px; color: #0A2E7A; }
.cf-col3-mehr svg { width: 14px; height: 14px; flex-shrink: 0; }

@media (max-width: 640px) {
  .cf-col3-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .cf-col3-col { grid-template-rows: auto; grid-row: span 1; padding: 20px 20px; }
  .cf-col3-cat { margin-bottom: 4px; }
  .cf-col3-title { font-size: 16px; margin-bottom: 12px; padding-bottom: 10px; }
  .cf-col3-list { columns: 1; }
  .cf-col3-list li { font-size: 13px; gap: 8px; }
  .cf-col3-mehr { margin-top: 12px; padding-top: 10px; font-size: 12px; }
}


/* ============================================================
   STATS + TRUST STRIP  (.cf-combined-strip)
   Snippet: snippet-stats-trust-strip.html
   ============================================================ */
.cf-combined-strip {
  background: #F0F4FA;
}
.cf-strip-inner {
  display: flex; align-items: stretch; min-height: 64px;
}
.cf-strip-stats {
  display: flex; align-items: center; justify-content: center; gap: 0; flex: 1;
}
.cf-strip-stat {
  display: flex; align-items: center; gap: 10px;
  padding: 0 20px; border-right: 1px solid #D8E4F0; white-space: nowrap;
}
.cf-strip-stat:first-child { padding-left: 0; }
.cf-strip-stat-num {
  font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 700;
  color: #1040A0; line-height: 1; font-variant-numeric: tabular-nums;
}
.cf-strip-stat-num sup { font-size: 13px; font-weight: 600; }
.cf-strip-stat-label { font-size: 12px; color: #506070; line-height: 1.3; }
.cf-strip-divider { width: 1px; background: #D8E4F0; margin: 12px 0; flex-shrink: 0; }
.cf-strip-certs {
  display: flex; align-items: center; gap: 20px;
  padding: 0 0 0 28px; flex-shrink: 0;
}
.cf-strip-cert {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: #0D1B3E; white-space: nowrap;
}
.cf-strip-cert svg {
  width: 15px; height: 15px; stroke: #1040A0;
  fill: none; stroke-width: 2; flex-shrink: 0;
}

@media (max-width: 1280px) {
  .cf-strip-certs { display: none; }
  .cf-strip-divider { display: none; }
  .cf-strip-stat { padding: 0 14px; }
}
@media (max-width: 768px) {
  .cf-strip-inner { flex-direction: column; min-height: unset; padding: 12px 0; }
  .cf-strip-stats {
    display: flex; flex-direction: row;
    justify-content: center; gap: 0;
  }
  .cf-strip-stat {
    flex: 1; flex-direction: column; align-items: center; text-align: center;
    padding: 0 6px; border-right: 1px solid #D8E4F0; white-space: normal; gap: 2px;
  }
  .cf-strip-stat:first-child { padding-left: 6px; }
  .cf-strip-stat:last-child  { border-right: none; }
  .cf-strip-stat-num  { font-size: 17px; }
  .cf-strip-stat-num sup { font-size: 10px; }
  .cf-strip-stat-label { font-size: 10px; line-height: 1.2; }
  .cf-strip-divider { display: none; }
}


/* ============================================================
   HERO TRUST BAR  (.cf-trust)
   ============================================================ */
.cf-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 64px;
  padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.cf-trust .cf-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.cf-trust .cf-ico {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(140,205,232,.18);
  border: 1px solid rgba(140,205,232,.38);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cf-trust .cf-ico svg {
  width: 20px; height: 20px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cf-trust .cf-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  line-height: 1.3;
}
.cf-trust .cf-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,.65);
  margin-top: 2px;
  line-height: 1.4;
}

@media (max-width: 1024px) {
  .cf-trust {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 48px;
  }
}
@media (max-width: 768px) {
  .cf-trust {
    display: none;
  }
}


/* ============================================================
   LEISTUNGEN TILES  (.cf-services-grid)
   ============================================================ */
.cf-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cf-service {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px 28px;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  cursor: default;
}
.cf-service:hover {
  border-color: var(--blue);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(10,76,140,.18);
}
.cf-service-icon {
  width: 48px; height: 48px;
  background: var(--blue-soft);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  color: var(--blue);
  transition: background .3s ease, color .3s ease;
}
.cf-service:hover .cf-service-icon {
  background: var(--blue);
  color: #fff;
}
.cf-service-icon svg {
  width: 22px; height: 22px;
}
.cf-service h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: 10px;
}
.cf-service p {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: var(--text);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 1024px) {
  .cf-services-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .cf-services-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   FAQ HEAD  (.cf-faq-head)
   ============================================================ */
.cf-faq-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 0;
}
.cf-faq-head h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--ink);
  max-width: 24ch;
  margin: 0 auto;
}


/* ============================================================
   ABLAUF HEAD  (.cf-ablauf-head)
   ============================================================ */
.cf-ablauf-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 0;
}
.cf-ablauf-head h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--ink);
  max-width: 24ch;
  margin: 0 auto;
}
.cf-ablauf-head p {
  color: var(--mute);
  font-size: 16px;
  max-width: 52ch;
  margin: 16px auto 0 !important;
  line-height: 1.65;
}


/* ============================================================
   ABLAUF STEPS  (.cf-steps)
   ============================================================ */
.cf-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--line);
}
.cf-step {
  background: #fff;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cf-step-num {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 36px;
  color: var(--blue-soft);
  line-height: 1;
}
.cf-step h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  margin: 0;
}
.cf-step p {
  font-size: 14px;
  color: var(--mute);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 1024px) {
  .cf-steps {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .cf-steps {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   BRANCHEN TILES  (.cf-branchen-grid)
   ============================================================ */
.cf-branchen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cf-branche {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 28px 24px;
  transition: background .3s ease, border-color .3s ease;
}
.cf-branche:hover {
  background: rgba(255,255,255,.08);
  border-color: var(--accent);
}
.cf-branche .cf-tag {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: var(--accent);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 14px;
  display: block;
}
.cf-branche h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -.01em;
  color: #fff;
  margin-bottom: 10px;
}
.cf-branche p {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,.7);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 1024px) {
  .cf-branchen-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .cf-branchen-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   WARUM ARGUMENTE  (.cf-warum-list)
   ============================================================ */
.cf-warum-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cf-warum-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
}
.cf-warum-list li:first-child {
  border-top: 1px solid var(--line);
}
.cf-warum-list .cf-num {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  color: var(--blue);
  font-size: 14px;
  padding-top: 3px;
}
.cf-warum-list .cf-content strong {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 2px;
}
.cf-warum-list .cf-content p {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--text);
  line-height: 1.55;
  margin: 0;
}


/* ============================================================
   FAQ AKKORDEON  (.cf-faq-list)
   ============================================================ */
.cf-faq-list details {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 26px;
  cursor: pointer;
  margin: 0 auto 12px;
  max-width: 900px;
  transition: border-color .25s ease;
}
.cf-faq-list details[open] { border-color: var(--blue); }
.cf-faq-list details summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
}
.cf-faq-list details summary::-webkit-details-marker { display: none; }
.cf-faq-list details summary .plus {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s ease, background .3s ease;
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}
.cf-faq-list details[open] summary .plus {
  transform: rotate(45deg);
  background: var(--blue);
  color: #fff;
}
.cf-faq-list details p {
  margin-top: 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: var(--text);
  line-height: 1.65;
}


/* ============================================================
   DIREKTKONTAKT  (.cf-direktkontakt)
   Für dunkle Hintergründe (Gradient Navy/Blau)
   ============================================================ */
.cf-direktkontakt {
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.cf-dk-divider {
  width: 40px; height: 3px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px; margin-bottom: 32px;
}
.cf-dk-head {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,.5); margin-bottom: 20px;
}
.cf-dk-item {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-decoration: none; color: inherit;
  transition: opacity .2s;
}
.cf-dk-item:first-of-type { border-top: 1px solid rgba(255,255,255,0.08); }
.cf-dk-item:hover { opacity: .8; }
.cf-dk-ico {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255,255,255,0.07);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cf-dk-ico svg {
  width: 17px; height: 17px;
  stroke: #8CCDE8; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.cf-dk-label {
  font-size: 11px; color: rgba(255,255,255,.5);
  font-weight: 500; margin-bottom: 2px;
}
.cf-dk-val {
  font-size: 14px; font-weight: 600; color: #fff;
}
.cf-dk-promise {
  margin-top: 32px; padding: 18px 20px;
  background: rgba(140,205,232,.12);
  border-radius: 10px;
  border-left: 3px solid #8CCDE8;
}
.cf-dk-promise-text {
  font-size: 13px; line-height: 1.6;
  color: rgba(255,255,255,.7);
}
.cf-dk-promise-text strong { color: #fff; }


/* ============================================================
   DATENSCHUTZ / LEGAL LAYOUT  (.legal-layout)
   Snippet: snippet-datenschutz.html
   ============================================================ */
.legal-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 64px;
  align-items: start;
  font-family: 'DM Sans', system-ui, sans-serif;
}

/* TOC Sidebar */
.legal-toc {
  position: sticky; top: 200px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
}
.legal-toc-title {
  font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--mute); margin-bottom: 16px;
}
.legal-toc ol {
  list-style: none; counter-reset: toc;
  display: flex; flex-direction: column; gap: 4px;
  margin: 0; padding: 0;
}
.legal-toc ol li { counter-increment: toc; }
.legal-toc ol li a {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px; color: var(--mute);
  text-decoration: none; padding: 5px 8px;
  border-radius: 6px; line-height: 1.4;
  transition: background .15s, color .15s;
}
.legal-toc ol li a::before {
  content: counter(toc) ".";
  font-size: 11px; font-weight: 600;
  color: var(--blue); flex-shrink: 0; width: 18px;
}
.legal-toc ol li a:hover {
  background: var(--blue-soft); color: var(--ink);
}

/* Article */
.legal-article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 56px 64px;
}
.legal-article section {
  padding-top: 48px;
  margin-top: 48px;
  border-top: 1px solid var(--line);
}
.legal-article section:first-child {
  padding-top: 0; margin-top: 0; border-top: none;
}
.legal-section-num {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue);
  margin-bottom: 10px;
}
.legal-section-num::before {
  content: ""; width: 20px; height: 2px;
  background: var(--accent); flex-shrink: 0;
}
.legal-article h2 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(20px, 2vw, 26px); font-weight: 700;
  color: var(--ink); margin-bottom: 18px;
  letter-spacing: -.02em; line-height: 1.2;
}
.legal-article h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 17px; font-weight: 600;
  color: var(--ink); margin-top: 28px; margin-bottom: 10px;
}
.legal-article p {
  font-size: 15px; color: var(--text);
  line-height: 1.75; margin-bottom: 14px;
}
.legal-article p:last-child { margin-bottom: 0; }
.legal-article ul, .legal-article ol {
  margin: 12px 0 16px 0;
  padding-left: 0; list-style: none;
  display: flex; flex-direction: column; gap: 8px;
}
.legal-article ul li, .legal-article ol li {
  font-size: 15px; color: var(--text);
  line-height: 1.65; padding-left: 22px;
  position: relative;
}
.legal-article ul li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.legal-article ol { counter-reset: list; }
.legal-article ol li { counter-increment: list; }
.legal-article ol li::before {
  content: counter(list) ".";
  position: absolute; left: 0;
  font-size: 13px; font-weight: 600; color: var(--blue);
}
.legal-article a {
  color: var(--blue); text-decoration: underline;
  text-underline-offset: 3px; transition: color .2s;
}
.legal-article a:hover { color: var(--blue-deep); }

/* Info + Contact cards */
.legal-info-box {
  background: var(--blue-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: 10px; padding: 20px 24px;
  margin: 20px 0;
}
.legal-info-box p {
  font-size: 14px; color: var(--ink); margin: 0; line-height: 1.65;
}
.legal-info-box strong { color: var(--blue-deep); }
.legal-contact-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px; padding: 24px;
  margin: 20px 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.legal-contact-row {
  display: flex; flex-direction: column; gap: 2px;
}
.legal-contact-label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--mute);
}
.legal-contact-val {
  font-size: 14px; font-weight: 500; color: var(--ink);
}
.legal-contact-val a { text-decoration: none; color: var(--blue); }
.legal-contact-val a:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 1024px) {
  .legal-layout { grid-template-columns: 1fr; gap: 32px; }
  .legal-toc { position: static; }
  .legal-toc ol { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .legal-article { padding: 40px 40px; }
}
@media (max-width: 640px) {
  .legal-article { padding: 28px 24px; }
  .legal-toc ol { grid-template-columns: 1fr; }
  .legal-contact-card { grid-template-columns: 1fr; }
}

/* ============================================================
   LEISTUNGEN SPLIT-LAYOUT  (.cf-split-*)
   Snippet: snippet-leistungen-split.html
   ============================================================ */
.cf-leistungen-split-section {
  background: var(--bg-soft);
  padding: 0;
}
.cf-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 40px -16px rgba(10,30,80,.16);
}
.cf-split-image {
  background:
    linear-gradient(160deg, rgba(6,26,85,.25) 0%, rgba(6,26,85,.05) 60%),
    url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1200&q=90') center/cover;
  min-height: 480px;
  position: relative;
}
.cf-split-img-badge {
  position: absolute;
  bottom: 28px; left: 28px; right: 28px;
  background: rgba(6,26,85,.82);
  backdrop-filter: blur(8px);
  color: #fff;
  padding: 16px 20px;
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
.cf-split-img-badge strong {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
}
.cf-split-content {
  background: #fff;
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cf-split-heading {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(32px, 3.8vw, 48px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: #0D1B3E;
  margin-bottom: 28px;
}
.cf-split-list {
  list-style: none;
  margin: 0;
  padding: 0 !important;
}
.cf-split-list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.cf-split-list li:last-child { border-bottom: none; }
.cf-split-sico {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--blue-soft);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--blue);
  flex-shrink: 0;
  transition: background .25s, color .25s;
}
.cf-split-list li:hover .cf-split-sico { background: var(--blue); color: #fff; }
.cf-split-sico svg { width: 16px; height: 16px; }
.cf-split-stxt {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #0D1B3E;
}
.cf-split-stxt span {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: #506070;
  margin-top: 1px;
}

@media (max-width: 1024px) {
  .cf-split-grid { grid-template-columns: 1fr; }
  .cf-split-image { min-height: 280px; }
  .cf-split-content { padding: 36px 28px; }
}
@media (max-width: 640px) {
  .cf-split-content { padding: 28px 20px; }
}


/* ============================================================
   BRANCHEN KOMPAKT-BLOCK  (.cf-branchen-compact, .cf-branche-mini-*)
   Snippet: snippet-branchen-kompakt.html
   Hintergrund: Dunkel (--blue-deep #0A2E7A)
   ============================================================ */
.cf-branchen-compact-section {
  padding: 80px 0;
}
.cf-branchen-compact {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 72px;
  align-items: center;
}
.cf-branchen-compact-text .cleanfix-eyebrow {
  color: var(--accent);
}
.cf-branchen-compact-text .cleanfix-eyebrow::before {
  background: var(--accent);
}
.cf-branchen-compact-heading {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(32px, 3.8vw, 48px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: #fff;
  margin-bottom: 0;
}
.cf-branchen-compact-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  color: rgba(255,255,255,.72);
  margin-top: 16px;
  line-height: 1.6;
  max-width: 52ch;
}
.cf-branchen-compact-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(140,205,232,.35);
  padding-bottom: 2px;
  transition: border-color .2s;
}
.cf-branchen-compact-cta:hover { border-color: var(--accent); }

.cf-branche-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cf-branche-mini {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background .25s, border-color .25s;
}
.cf-branche-mini:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(140,205,232,.4);
}
.cf-bm-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.cf-bm-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}
.cf-bm-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,.45);
  margin-top: 1px;
}

@media (max-width: 1024px) {
  .cf-branchen-compact { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 640px) {
  .cf-branche-mini-grid { grid-template-columns: 1fr; }
  .cf-branchen-compact-heading { font-size: 26px; }
}


/* ============================================================
   FRÜHJAHRS-AKTION SNIPPETS
   snippet-spring-pill.html
   snippet-spring-telefon.html
   snippet-spring-urgency.html
   snippet-spring-check-grid.html
   snippet-spring-warum-list.html
   ============================================================ */

/* -- Pille -------------------------------------------------- */
/* Für dunkle Hintergründe (Hero, farbige Section) */
.cf-spring-pill {
  display: inline-flex; align-items: center; gap: 8px;
  width: fit-content;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 600;
  background: rgba(123,197,47,.18);
  color: #b6f062;
  border: 1px solid rgba(123,197,47,.4);
  border-radius: 999px;
  padding: 6px 16px;
  letter-spacing: .04em;
}
.cf-spring-pill svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Für helle Hintergründe */
.cf-spring-pill.light {
  background: var(--spring-soft);
  color: #3a6200;
  border-color: rgba(123,197,47,.35);
}
.cf-spring-pill.light svg { stroke: #3a6200; }

/* -- Telefonnummer ------------------------------------------ */
.cf-spring-tel {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 20px; font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: color .2s;
}
.cf-spring-tel:hover { color: var(--blue); }
.cf-spring-tel-ico {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--spring-soft);
  border: 1px solid rgba(123,197,47,.3);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cf-spring-tel-ico svg { width: 18px; height: 18px; stroke: var(--spring); fill: none; stroke-width: 2; }

/* -- Urgency Bar -------------------------------------------- */
.cf-spring-urgency {
  display: flex; gap: 28px; flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: 'DM Sans', sans-serif;
}
.cf-urgency-item {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; color: rgba(255,255,255,.75);
}
.cf-urgency-item svg {
  width: 18px; height: 18px;
  stroke: var(--spring); fill: none; stroke-width: 2;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .cf-spring-urgency { gap: 14px; }
}

/* -- Check-Grid --------------------------------------------- */
.cf-check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  font-family: 'DM Sans', sans-serif;
}
.cf-check-item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 22px 26px;
  border-bottom: 1px solid var(--line);
  transition: background .2s;
}
.cf-check-item:nth-child(odd)          { border-right: 1px solid var(--line); }
.cf-check-item:nth-last-child(-n+2)    { border-bottom: none; }
.cf-check-item:hover                   { background: var(--bg-soft); }
.cf-ci-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 8px;
  background: var(--spring-soft);
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.cf-ci-icon svg { width: 15px; height: 15px; stroke: var(--spring); fill: none; stroke-width: 2.5; }
.cf-ci-text strong { display: block; font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.cf-ci-text span   { font-size: 14px; color: var(--mute); line-height: 1.55; }

@media (max-width: 768px) {
  .cf-check-grid { grid-template-columns: 1fr; }
  .cf-check-item:nth-child(odd) { border-right: none; }
  .cf-check-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .cf-check-item:last-child { border-bottom: none; }
}

/* -- Aktions-Hinweis-Box ------------------------------------ */
.cf-spring-note {
  display: flex; gap: 8px; align-items: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; color: #3a6200;
  background: var(--spring-soft);
  border: 1px solid rgba(123,197,47,.3);
  border-radius: 10px;
  padding: 12px 14px;
  line-height: 1.5;
}
.cf-spring-note svg, .cf-spring-note i {
  width: 15px; height: 15px; flex-shrink: 0;
  stroke: var(--spring); fill: none; stroke-width: 2;
}

/* -- Warum-List (Frühjahr) ---------------------------------- */
.cf-spring-warum-list {
  list-style: none; margin: 0; padding: 0;
  font-family: 'DM Sans', sans-serif;
}
.cf-spring-warum-list li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.cf-spring-warum-list li:first-child { border-top: 1px solid var(--line); }
.cf-swl-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--spring); flex-shrink: 0; margin-top: 7px;
}
.cf-swl-text strong {
  display: block; font-size: 15px; font-weight: 600;
  color: var(--ink); margin-bottom: 3px;
}
.cf-swl-text span { font-size: 14px; color: var(--mute); line-height: 1.6; }


/* ============================================================
   KONTAKT-INFO SNIPPET (snippet-kontakt-info.html)
   ============================================================ */
.cf-kontakt-info-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cf-kontakt-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 32px;
}

.cf-kontakt-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 20px;
}

.cf-kontakt-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.cf-kontakt-row:last-child { border-bottom: none; padding-bottom: 0; }
.cf-kontakt-row:first-of-type { padding-top: 0; }

.cf-kontakt-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--blue-soft);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cf-kontakt-icon i {
  font-size: 16px;
  color: var(--blue);
}

.cf-kontakt-row-content { display: flex; flex-direction: column; gap: 2px; }

.cf-kontakt-row-label {
  font-size: 12px;
  color: var(--mute);
  font-weight: 500;
}

.cf-kontakt-row-val {
  font-size: 15px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
}
.cf-kontakt-row-val a { color: var(--blue); transition: opacity .2s; }
.cf-kontakt-row-val a:hover { opacity: .75; }

/* Öffnungszeiten */
.cf-oeffnung-grid { display: grid; gap: 0; }

.cf-oeffnung-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.cf-oeffnung-row:last-child { border-bottom: none; padding-bottom: 0; }

.cf-oeffnung-day { color: var(--mute); }

.cf-oeffnung-time {
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}

.cf-oeffnung-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}

.cf-oeffnung-closed { color: var(--mute); font-weight: 400; }

/* Karte */
.cf-kontakt-map {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  height: 220px;
}
.cf-kontakt-map iframe {
  width: 100%; height: 100%;
  border: none; display: block;
}

/* ============================================================
   GLASREINIGUNG FREQUENZ-EMPFEHLUNG
   Snippet: snippet-glasreinigung-frequenz.html
   ============================================================ */

.cf-freq-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .cf-freq-track { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .cf-freq-track { grid-template-columns: 1fr; }
}

.cf-freq-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  padding: 28px 24px 24px;
  transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.cf-freq-card:hover {
  box-shadow: 0 12px 36px -12px rgba(10,30,80,.14);
  transform: translateY(-3px);
  border-color: var(--blue);
}
.cf-freq-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--blue);
  opacity: 0;
  transition: opacity .3s ease;
}
.cf-freq-card:hover::before { opacity: 1; }
.cf-freq-card.cf-freq-highlight::before { opacity: 1; background: var(--spring); }
.cf-freq-card.cf-freq-highlight { border-color: var(--spring); }
.cf-freq-card.cf-freq-highlight:hover { border-color: var(--spring); }

.cf-freq-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 4px 10px; border-radius: 999px;
  margin-bottom: 20px;
  background: var(--blue-soft); color: var(--blue-deep);
}
.cf-freq-card.cf-freq-highlight .cf-freq-tag { background: var(--spring-soft); color: #3a6200; }
.cf-freq-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
  display: inline-block;
}

.cf-freq-type {
  font-weight: 600; font-size: 20px; letter-spacing: -.01em;
  color: var(--ink); margin-bottom: 8px;
}
.cf-freq-sub {
  font-size: 13px; color: var(--mute); margin-bottom: 20px; line-height: 1.5;
}

.cf-freq-bar-wrap { margin-bottom: 20px; }
.cf-freq-bar-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--mute); margin-bottom: 6px; font-weight: 500;
}
.cf-freq-bar-label strong { font-size: 15px; color: var(--ink); font-weight: 600; }
.cf-freq-bar-track {
  height: 6px; border-radius: 999px;
  background: var(--line); overflow: hidden;
}
.cf-freq-bar-fill {
  height: 100%; border-radius: 999px;
  background: var(--blue);
  transition: width .8s cubic-bezier(.4,0,.2,1);
}
.cf-freq-card.cf-freq-highlight .cf-freq-bar-fill { background: var(--spring); }

.cf-freq-details {
  list-style: none; border-top: 1px solid var(--line); padding-top: 16px;
  display: flex; flex-direction: column; gap: 8px;
  padding-left: 0; margin: 0;
}
.cf-freq-details li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; color: var(--text); line-height: 1.4;
}
.cf-freq-details li::before {
  content: ""; display: block; flex-shrink: 0;
  width: 5px; height: 5px; border-radius: 50%; margin-top: 5px;
  background: var(--accent);
}
.cf-freq-card.cf-freq-highlight .cf-freq-details li::before { background: var(--spring); }

.cf-freq-hint {
  margin-top: 40px;
  background: var(--spring-soft);
  border: 1px solid rgba(123,197,47,.3);
  border-radius: 12px;
  padding: 18px 22px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 14px;
  color: #3a6200;
  line-height: 1.55;
}
.cf-freq-hint svg {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px;
  stroke: var(--spring); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.cf-freq-hint strong { font-weight: 600; }

/* ============================================================
   GLASREINIGUNG VERFAHREN
   Snippet: snippet-glasreinigung-verfahren.html
   ============================================================ */

.cf-vf-box {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0; align-items: stretch;
  background: #fff; border: 1px solid var(--line);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 4px 24px -8px rgba(10,30,80,.08);
}
@media (max-width: 900px) {
  .cf-vf-box { grid-template-columns: 1fr; }
}

.cf-vf-left {
  display: flex; align-items: flex-start; gap: 24px;
  padding: 44px 48px;
}
@media (max-width: 900px) {
  .cf-vf-left { padding: 32px 28px; flex-direction: column; gap: 16px; }
}

.cf-vf-ico {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px;
  background: var(--blue-soft);
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 4px;
}
.cf-vf-ico svg { width: 26px; height: 26px; stroke: var(--blue); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.cf-vf-flow {
  background: linear-gradient(160deg, var(--blue) 0%, var(--blue-deep) 100%);
  padding: 40px 44px;
  display: flex; flex-direction: column; justify-content: center;
}
.cf-vf-flow-dark {
  background: linear-gradient(160deg, #2C3E50 0%, #1a252f 100%);
}
@media (max-width: 900px) {
  .cf-vf-flow { padding: 32px 28px; }
}

.cf-vf-flow-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; color: rgba(255,255,255,.5);
  margin-bottom: 28px;
}

.cf-vf-step {
  display: flex; align-items: center; gap: 14px; line-height: 1;
}
.cf-vf-step-ico {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cf-vf-step-ico svg {
  width: 18px; height: 18px; stroke: rgba(255,255,255,.9);
  fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.cf-vf-step-body strong {
  display: block; font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 0;
}
.cf-vf-step-body span { font-size: 12px; color: rgba(255,255,255,.55); line-height: 1.4; }

.cf-vf-arrow {
  width: 1px; background: rgba(255,255,255,.15);
  height: 20px; margin: 6px 0 6px 19px;
  align-self: flex-start;
}

.cf-vf-result .cf-vf-step-ico { background: rgba(123,197,47,.25); }
.cf-vf-result .cf-vf-step-ico svg { stroke: #b6f062; }
.cf-vf-result strong { color: #b6f062; }


/* ============================================================
   BLOG — ARTIKEL-SNIPPETS
   Snippets: snippet-blog-glasreinigung-*.html
   ============================================================ */

/* Definition Box */
.cf-def-box {
  background: var(--blue-soft);
  border-left: 3px solid var(--blue);
  border-radius: 0 12px 12px 0;
  padding: 20px 24px;
  margin: 24px 0;
}
.cf-def-box .cf-def-term {
  font-family: 'Outfit', sans-serif;
  font-weight: 600; font-size: 15px; color: var(--blue-deep);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 6px;
}
.cf-def-box p { font-size: 15px; color: var(--ink); line-height: 1.6; margin: 0; }

/* Technique card */
.cf-tech-block {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  margin: 32px 0;
}
.cf-tech-block-head {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 28px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.cf-tech-block-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 600; font-size: 18px; color: var(--ink);
}
.cf-tech-block-sub { font-size: 13px; color: var(--mute); margin-top: 1px; }
.cf-tech-badge {
  margin-left: auto; flex-shrink: 0;
  background: var(--blue); color: #fff;
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 4px 12px; border-radius: 999px;
}
.cf-tech-block-body { padding: 24px 28px; }
.cf-tech-block-body p {
  font-size: 15px; line-height: 1.7; color: var(--text);
  margin-bottom: 14px;
}
.cf-tech-block-body p:last-child { margin-bottom: 0; }
.cf-tech-block-body strong { color: var(--ink); font-weight: 600; }

/* Pros / Cons grid */
.cf-pros-cons {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px;
}
.cf-tc-col { background: var(--bg-soft); border-radius: 10px; padding: 16px 18px; }
.cf-tc-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; margin-bottom: 10px;
}
.cf-tc-label.pro { color: #3a6200; }
.cf-tc-label.con { color: #92400E; }
.cf-tc-list {
  list-style: none; display: flex; flex-direction: column;
  gap: 6px; padding: 0; margin: 0;
}
.cf-tc-list li {
  font-size: 13px; color: var(--text);
  display: flex; gap: 8px; align-items: flex-start; line-height: 1.45;
}
.cf-tc-list.pro-list li::before { content: "✓"; color: var(--spring); font-weight: 700; flex-shrink: 0; }
.cf-tc-list.con-list li::before { content: "–"; color: var(--mute); font-weight: 700; flex-shrink: 0; }

/* Tags row */
.cf-tech-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 28px 22px; }
.cf-t-tag {
  font-size: 12px; font-weight: 500; padding: 3px 10px;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg-soft); color: var(--mute);
}

/* Comparison table */
.cf-comp-wrap {
  overflow-x: auto; margin: 32px 0;
  border: 1px solid var(--line); border-radius: 14px;
}
.cf-comp-table {
  width: 100%; border-collapse: collapse; font-size: 14px;
  white-space: nowrap;
}
.cf-comp-table th {
  text-align: left; padding: 12px 18px;
  background: var(--bg-soft); border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 500; color: var(--mute);
  text-transform: uppercase; letter-spacing: .08em;
}
.cf-comp-table td {
  padding: 13px 18px; border-bottom: 1px solid var(--line);
  color: var(--text); vertical-align: middle;
}
.cf-comp-table tr:last-child td { border-bottom: none; }
.cf-comp-table tr:hover td { background: var(--bg-soft); }
.cf-comp-table .cf-t-name { font-weight: 600; color: var(--ink); }

/* Pills (used in table) */
.cf-pill-badge {
  display: inline-flex; font-size: 11px; font-weight: 500;
  padding: 2px 9px; border-radius: 999px;
}
.cf-pill-badge.blue { background: var(--blue-soft); color: var(--blue-deep); }
.cf-pill-badge.green { background: var(--spring-soft); color: #3a6200; }
.cf-pill-badge.yellow { background: #FEF3C7; color: #92400E; }
.cf-pill-badge.grey { background: var(--bg-soft); color: var(--mute); border: 1px solid var(--line); }

/* Intro paragraph styles */
.cf-blog-intro p {
  font-size: 16px; line-height: 1.75; color: var(--text); margin-bottom: 18px;
}
.cf-blog-intro p:last-child { margin-bottom: 0; }

/* Fazit paragraph styles */
.cf-blog-fazit p {
  font-size: 16px; line-height: 1.75; color: var(--text); margin-bottom: 18px;
}
.cf-blog-fazit p:last-child { margin-bottom: 0; }
.cf-blog-fazit strong { color: var(--ink); font-weight: 600; }

/* ── INDUSTRIE BLOG EXTENSIONS ────────────────────────────────────────────── */

/* Tech icon box */
.cf-tech-ico {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--blue-soft);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cf-tech-ico svg {
  width: 22px; height: 22px; stroke: var(--blue);
  fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

/* 3-stat row inside tech-block */
.cf-tech-specs {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 12px; margin-top: 20px;
}
.cf-spec-item {
  background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 14px 16px; text-align: center;
}
.cf-spec-val {
  font-family: 'Outfit', sans-serif; font-weight: 700;
  font-size: 18px; color: var(--blue); margin-bottom: 4px;
}
.cf-spec-label { font-size: 12px; color: var(--mute); }

/* Pro/con with traffic-light colors */
.cf-pro-con {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px;
}
.cf-pro-list, .cf-con-list {
  border-radius: 10px; padding: 16px 18px;
  list-style: none; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.cf-pro-list { background: #f0fce8; }
.cf-con-list { background: #fff5f0; }
.cf-pro-list .cf-list-head { font-size: 12px; font-weight: 600; color: #3a7c0a; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .06em; }
.cf-con-list .cf-list-head { font-size: 12px; font-weight: 600; color: #b83a1c; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .06em; }
.cf-pro-list li, .cf-con-list li { font-size: 14px; list-style: none; padding-left: 18px; position: relative; }
.cf-pro-list li::before { content: "✓"; position: absolute; left: 0; color: #3a7c0a; font-weight: 700; }
.cf-con-list li::before { content: "–"; position: absolute; left: 0; color: #b83a1c; font-weight: 700; }

/* Dark-header comparison table variant */
.cf-comp-wrap--dark { overflow-x: auto; margin: 32px 0; border: 1px solid var(--line); border-radius: 14px; }
.cf-comp-wrap--dark .cf-comp-table th {
  background: var(--blue-navy); color: #fff;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 13px;
}
.cf-comp-wrap--dark .cf-comp-table th:first-child { border-radius: 14px 0 0 0; }
.cf-comp-wrap--dark .cf-comp-table th:last-child { border-radius: 0 14px 0 0; }
.cf-comp-wrap--dark .cf-comp-table tr:nth-child(even) td { background: var(--bg-soft); }

/* Traffic-light tag badges (used in dark-header comparison table) */
.cf-tag-high { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #e8f8dc; color: #2d7a0a; }
.cf-tag-mid  { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #fff5dc; color: #8a5a00; }
.cf-tag-low  { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #fce8e8; color: #9a1c1c; }

/* Article closing text (Fazit, before CTA) */
.cf-blog-closing p {
  font-size: 16px; line-height: 1.75; color: var(--text); margin-bottom: 20px;
}
.cf-blog-closing p:last-child { margin-bottom: 0; }
.cf-blog-closing strong { color: var(--ink); font-weight: 600; }

@media (max-width: 680px) {
  .cf-pros-cons { grid-template-columns: 1fr; }
  .cf-pro-con { grid-template-columns: 1fr; }
  .cf-tech-specs { grid-template-columns: repeat(2,1fr); }
  .cf-comp-table { font-size: 13px; }
  .cf-tech-block-head { flex-wrap: wrap; gap: 10px; }
}


/* ============================================================
   INDUSTRIEREINIGUNG — ST-RIGHT (Kein Stillstand)
   ============================================================ */
.cf-st-right { display: flex; flex-direction: column; gap: 32px; }
.cf-st-stat-box {
  background: var(--blue-navy);
  border-radius: 20px;
  padding: 40px 36px;
  text-align: center;
}
.cf-st-zero {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(72px, 10vw, 128px);
  line-height: 1;
  color: #fff;
  letter-spacing: -4px;
}
.cf-st-stat-label {
  font-size: 15px;
  color: rgba(255,255,255,0.6);
  margin-top: 8px;
  line-height: 1.5;
}
.cf-st-stat-label span {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  display: block;
}
.cf-st-checks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0;
}
.cf-st-checks li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: var(--text);
}
.cf-st-checks li svg { width: 20px; height: 20px; flex-shrink: 0; }


/* ============================================================
   INDUSTRIEREINIGUNG — HALLE ZONEN-EXPLORER
   ============================================================ */
.cf-halle-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 56px;
  align-items: center;
}
.cf-halle-zones { display: flex; flex-direction: column; gap: 0; }
.cf-hz-item {
  display: flex; gap: 16px; align-items: flex-start;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  border-radius: 10px;
  padding: 14px 12px;
  opacity: .5;
  transition: opacity .3s, transform .3s;
}
.cf-hz-item:last-child { border-bottom: none; }
.cf-hz-item.active { opacity: 1; background: var(--blue-soft); border-radius: 10px; }
.cf-hz-num {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 7px;
  background: var(--line); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 600; color: var(--blue);
  margin-top: 1px;
}
.cf-hz-item.active .cf-hz-num { background: var(--blue); color: #fff; border-color: var(--blue); }
.cf-hz-title {
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 17px; color: var(--ink);
  margin-bottom: 4px;
}
.cf-hz-sub { font-size: 13.5px; color: var(--mute); line-height: 1.5; }
.cf-hz-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.cf-hz-tag {
  font-size: 11px; font-weight: 500; padding: 2px 8px;
  border-radius: 999px; border: 1px solid var(--line);
  color: var(--blue);
}
.cf-halle-visual { position: relative; }
.cf-halle-svg-wrap {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 24px 20px;
  overflow: hidden;
}
.cf-halle-svg-wrap svg { width: 100%; height: auto; display: block; }
.cf-zone-layer { transition: opacity .4s ease; opacity: 0; }
.cf-zone-layer.visible { opacity: 1; }
.cf-scan-line {
  position: absolute;
  left: 28px; right: 28px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, rgba(140,205,232,.5) 70%, transparent 100%);
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 12px 2px rgba(140,205,232,.35);
}
.cf-scan-line.animate { animation: cfScanMove 1.2s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes cfScanMove {
  0%   { opacity: 0; transform: translateY(0); }
  8%   { opacity: 1; }
  88%  { opacity: .7; }
  100% { opacity: 0; transform: translateY(380px); }
}
.cf-halle-progress { display: flex; gap: 6px; margin-top: 20px; justify-content: center; }
.cf-halle-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line); cursor: pointer;
  transition: background .3s, transform .3s;
}
.cf-halle-dot.active { background: var(--blue); transform: scale(1.3); }
@media (max-width: 900px) {
  .cf-halle-layout { grid-template-columns: 1fr; gap: 40px; }
}


/* ============================================================
   INDUSTRIEREINIGUNG — SPARTEN-GRID (Food & Non-Food)
   ============================================================ */
.cf-sparten-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.cf-sp-card {
  border-radius: 18px;
  padding: 36px 32px;
  border: 1.5px solid var(--line);
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.cf-sp-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
}
.cf-sp-card.cf-food::before   { background: var(--spring); }
.cf-sp-card.cf-nonfood::before { background: var(--blue); }

.cf-sp-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 20px; padding: 4px 12px; margin-bottom: 20px;
}
.cf-sp-card.cf-food .cf-sp-tag   { background: var(--spring-soft); color: #4a7d15; }
.cf-sp-card.cf-nonfood .cf-sp-tag { background: var(--blue-soft); color: var(--blue); }
.cf-sp-tag svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.cf-sp-card h3 { font-family: 'Outfit', sans-serif; font-size: 21px; font-weight: 700; margin-bottom: 12px; color: var(--ink); }
.cf-sp-card > p { font-size: 15px; color: var(--mute); line-height: 1.6; margin-bottom: 24px; }

.cf-sp-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; padding: 0; }
.cf-sp-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; color: var(--text); line-height: 1.45;
}
.cf-sp-list li::before {
  content: ""; flex-shrink: 0; margin-top: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background-size: 11px; background-repeat: no-repeat; background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.cf-sp-card.cf-food .cf-sp-list li::before   { background-color: var(--spring); }
.cf-sp-card.cf-nonfood .cf-sp-list li::before { background-color: var(--blue); }

.cf-sp-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.cf-sp-badge { font-size: 11px; font-weight: 700; border-radius: 6px; padding: 5px 10px; letter-spacing: .04em; }
.cf-sp-card.cf-food .cf-sp-badge   { background: var(--spring-soft); color: #4a7d15; }
.cf-sp-card.cf-nonfood .cf-sp-badge { background: var(--blue-soft); color: var(--blue); }

.cf-sp-refs { border-top: 1px solid var(--line); padding-top: 20px; }
.cf-sp-refs-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin-bottom: 14px; }
.cf-sp-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.cf-sp-logo-item { display: flex; align-items: center; justify-content: center; height: 36px; }
.cf-sp-logo-item img {
  max-height: 36px; max-width: 110px; width: auto;
  filter: grayscale(1) opacity(.55);
  transition: filter .2s;
  object-fit: contain;
}
.cf-sp-logo-item img:hover { filter: grayscale(0) opacity(1); }

@media (max-width: 768px) {
  .cf-sparten-grid { grid-template-columns: 1fr; }
  .cf-sp-card { padding: 28px 22px; }
}


/* ============================================================
   INDUSTRIEREINIGUNG — VF-COMPACT-GRID (Verfahren-Übersicht)
   ============================================================ */
.cf-vf-compact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin-top: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--line);
}
.cf-vf-compact-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  background: #fff;
}
.cf-vf-compact-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 2px;
}
.cf-vf-compact-sub { font-size: 12.5px; color: var(--mute); line-height: 1.5; }
.cf-vf-blog-link { margin-top: 28px; text-align: center; }
.cf-vf-blog-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px; font-weight: 500; color: var(--blue);
  border-bottom: 1px solid var(--blue); padding-bottom: 2px;
  text-decoration: none;
  transition: opacity .2s;
}
.cf-vf-blog-cta:hover { opacity: .7; }
.cf-vf-blog-cta svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1024px) { .cf-vf-compact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cf-vf-compact-grid { grid-template-columns: 1fr; } }

/* ── SONDER- & GRUNDREINIGUNG — TAB-SWITCHER (Unsere Leistungen)
   ============================================================ */
.cf-tab-bar {
  display: flex; gap: 0;
  background: var(--bg-soft); border: 1.5px solid var(--line);
  border-radius: 14px; padding: 5px;
  width: fit-content; margin: 0 auto 52px;
  position: relative;
}
.cf-tab-btn {
  position: relative; z-index: 1;
  padding: 12px 32px; border-radius: 10px;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 15px;
  color: var(--mute); cursor: pointer; border: none; background: none;
  transition: color .25s; white-space: nowrap;
}
.cf-tab-btn.active { color: var(--blue); }
.cf-tab-pill {
  position: absolute; top: 5px; left: 5px;
  height: calc(100% - 10px);
  background: #fff; border-radius: 10px;
  box-shadow: 0 2px 12px -4px rgba(16,64,160,.18);
  transition: transform .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.cf-tab-content { display: none; }
.cf-tab-content.active { display: block; }
.cf-tab-intro,
.cf-tab-content .cf-tab-intro,
.cf-tab-content.active .cf-tab-intro {
  text-align: center !important; max-width: 60ch; margin: 0 auto 40px;
  color: var(--mute); font-size: 15.5px; line-height: 1.65;
}
.cf-svc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cf-svc-card {
  border: 1.5px solid var(--line); border-radius: 16px;
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.cf-svc-card:hover {
  border-color: var(--blue);
  box-shadow: 0 4px 24px -8px rgba(16,64,160,.14);
  transform: translateY(-2px);
}
.cf-svc-ico {
  width: 44px; height: 44px; border-radius: 11px;
  background: var(--blue-soft); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.cf-svc-ico svg { width: 22px; height: 22px; stroke: var(--blue); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.cf-svc-ico i { display: flex; align-items: center; justify-content: center; }
.cf-svc-name { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 16px; color: var(--ink); line-height: 1.25; }
.cf-svc-desc { font-size: 13.5px; color: var(--mute); line-height: 1.55; flex-grow: 1; }
@media (max-width: 1024px) { .cf-svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .cf-svc-grid { grid-template-columns: 1fr; } .cf-tab-btn { padding: 12px 20px; font-size: 14px; } }

/* Kompaktes horizontales Layout — Modifier für Grünpflege */
.cf-svc-grid.cf-svc-compact { gap: 10px; }
.cf-svc-grid.cf-svc-compact .cf-svc-card { flex-direction: row; align-items: flex-start; padding: 16px 18px; gap: 14px; }
.cf-svc-grid.cf-svc-compact .cf-svc-card:hover { border-color: var(--blue); background: var(--blue-soft); box-shadow: none; transform: none; }
.cf-svc-grid.cf-svc-compact .cf-svc-ico { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; transition: background .2s; }
.cf-svc-grid.cf-svc-compact .cf-svc-card:hover .cf-svc-ico { background: rgba(16,64,160,.15); }
.cf-svc-grid.cf-svc-compact .cf-svc-ico svg { width: 18px; height: 18px; }
.cf-svc-grid.cf-svc-compact .cf-svc-body { display: flex; flex-direction: column; gap: 3px; }
.cf-svc-grid.cf-svc-compact .cf-svc-name { font-size: 14px; }
.cf-svc-grid.cf-svc-compact .cf-svc-desc { font-size: 12px; flex-grow: 0; }
@media (max-width: 600px) { .cf-svc-grid.cf-svc-compact { grid-template-columns: repeat(2,1fr); } }

/* ── SONDER- & GRUNDREINIGUNG — ABLAUF
   ============================================================ */
.cf-sonder-steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2px; border: 1px solid var(--line); border-radius: 18px;
  overflow: hidden; background: var(--line);
}
.cf-sonder-step {
  background: #fff; padding: 32px 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.cf-sonder-step-num {
  font-family: 'Outfit', sans-serif; font-weight: 700;
  font-size: 36px; color: var(--blue-soft); line-height: 1;
}
.cf-sonder-step-title {
  font-family: 'Outfit', sans-serif; font-weight: 600;
  font-size: 16px; color: var(--ink);
}
.cf-sonder-step-body { font-size: 14px; color: var(--mute); line-height: 1.6; }
@media (max-width: 768px) { .cf-sonder-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px)  { .cf-sonder-steps { grid-template-columns: 1fr; } }

/* ── SONDER- & GRUNDREINIGUNG — DEFINITIONS-SPLIT
   ============================================================ */
.cf-def-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2px; border-radius: 20px; overflow: hidden;
  background: var(--line);
}
.cf-def-card {
  background: #fff; padding: 44px 40px;
  display: flex; flex-direction: column; gap: 20px;
}
.cf-def-card.right { background: var(--blue-navy); }
.cf-def-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; padding: 5px 12px; border-radius: 99px;
  width: fit-content;
}
.cf-def-eyebrow.grund  { background: var(--blue-soft); color: var(--blue); }
.cf-def-eyebrow.sonder { background: rgba(140,205,232,.2); color: var(--accent); }
.cf-def-title {
  font-family: 'Outfit', sans-serif; font-weight: 700;
  font-size: clamp(22px,2.4vw,32px); color: var(--ink); line-height: 1.1;
}
.cf-def-card.right .cf-def-title { color: #fff; }
.cf-def-body { font-size: 15px; color: var(--mute); line-height: 1.65; max-width: 44ch; }
.cf-def-card.right .cf-def-body { color: rgba(255,255,255,.72); }
.cf-def-meta {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.cf-def-card.right .cf-def-meta { border-color: rgba(255,255,255,.12); }
.cf-def-meta-item {
  display: flex; gap: 10px; align-items: center;
  font-size: 13.5px; color: var(--text);
}
.cf-def-card.right .cf-def-meta-item { color: rgba(255,255,255,.75); }
.cf-def-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--blue);
}
.cf-def-card.right .cf-def-dot { background: var(--accent); }
@media (max-width: 768px) { .cf-def-grid { grid-template-columns: 1fr; } }


/* ============================================================
   SOMMER-AKTION  (.cf-summer-pill, .cf-ertrag-banner,
                   .cf-check-grid.cf-summer, .cf-summer-warum-list)
   ============================================================ */

/* ── Pill ── */
.cf-summer-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(245,158,11,.16);
  border: 1px solid rgba(245,158,11,.38);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 13px; font-weight: 600;
  color: #FCD34D;
  letter-spacing: .04em;
}
.cf-summer-pill svg { width: 14px; height: 14px; flex-shrink: 0; stroke: #FCD34D; fill: none; stroke-width: 2; }
.cf-summer-pill.light {
  background: var(--sun-soft);
  border-color: rgba(245,158,11,.4);
  color: var(--sun-deep);
}
.cf-summer-pill.light svg { stroke: var(--sun-deep); }

/* ── Ertragsverlust-Banner ── */
.cf-ertrag-banner {
  background: var(--sun-soft);
  border-top: 1px solid rgba(245,158,11,.2);
  border-bottom: 2px solid rgba(245,158,11,.25);
  padding: 22px 0;
}
.cf-ertrag-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 48px; flex-wrap: wrap; text-align: center;
}
.cf-ertrag-stat { display: flex; flex-direction: column; align-items: center; }
.cf-ertrag-stat strong {
  font-family: 'Outfit', sans-serif;
  font-size: 36px; font-weight: 700;
  color: var(--sun-deep);
  line-height: 1;
}
.cf-ertrag-stat span { font-size: 13px; color: var(--mute); margin-top: 4px; }
.cf-ertrag-divider {
  width: 1px; height: 48px;
  background: rgba(245,158,11,.3);
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .cf-ertrag-inner { gap: 24px; }
  .cf-ertrag-divider { display: none; }
  .cf-ertrag-stat strong { font-size: 28px; }
}

/* ── PV-Feature-Grid (Sommer) ── */
.cf-pv-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cf-pv-feature-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--sun);
  border-radius: 14px;
  padding: 32px 28px;
}
.cf-pv-feature-stat {
  font-family: 'Outfit', sans-serif;
  font-size: 52px; font-weight: 700;
  color: var(--sun);
  line-height: 1;
  letter-spacing: -.03em;
  margin-bottom: 12px;
}
.cf-pv-feature-title {
  font-family: 'Outfit', sans-serif;
  font-size: 17px; font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.cf-pv-feature-desc { font-size: 14px; color: var(--mute); line-height: 1.6; }
@media (max-width: 768px) {
  .cf-pv-feature-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ── Warum-Liste Sommer ── */
.cf-summer-warum-list { list-style: none; }
.cf-summer-warum-list li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.cf-summer-warum-list li:first-child { border-top: 1px solid var(--line); }
.cf-summer-warum-list .cf-wl-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sun); flex-shrink: 0; margin-top: 8px;
}
.cf-summer-warum-list .cf-wl-text strong {
  display: block; font-size: 15px; font-weight: 600;
  color: var(--ink); margin-bottom: 2px;
}
.cf-summer-warum-list .cf-wl-text span { font-size: 14px; color: var(--text); }

/* ── Sommer-Note (Formular) ── */
.cf-summer-note {
  display: flex; gap: 8px; align-items: center;
  font-size: 12px; color: var(--sun-deep);
  background: var(--sun-soft);
  border: 1px solid rgba(245,158,11,.25);
  border-radius: 8px;
  padding: 10px 12px;
}
.cf-summer-note svg, .cf-summer-note i {
  width: 14px; height: 14px; flex-shrink: 0;
  stroke: var(--sun); fill: none; stroke-width: 2;
}

/* ── Herbst-Note (Formular) ── */
.cf-autumn-note {
  display: flex; gap: 8px; align-items: center;
  font-size: 12px; color: #1040A0;
  background: #e8f1fb;
  border: 1px solid rgba(16,64,160,.2);
  border-radius: 8px;
  padding: 10px 12px;
}
.cf-autumn-note svg, .cf-autumn-note i {
  width: 14px; height: 14px; flex-shrink: 0;
  stroke: #1040A0; color: #1040A0; fill: none; stroke-width: 2;
}

/* ── Winter-Note (Formular) ── */
.cf-winter-note {
  display: flex; gap: 8px; align-items: center;
  font-size: 12px; color: #0A2E7A;
  background: #dbeafe;
  border: 1px solid rgba(10,46,122,.2);
  border-radius: 8px;
  padding: 10px 12px;
}
.cf-winter-note svg, .cf-winter-note i {
  width: 14px; height: 14px; flex-shrink: 0;
  stroke: #0A2E7A; color: #0A2E7A; fill: none; stroke-width: 2;
}

/* ── Sommer-Urgency ── */
.cf-summer-urgency {
  display: flex; gap: 28px; flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-family: 'DM Sans', sans-serif;
}
.cf-summer-urgency .cf-urgency-item svg { stroke: var(--sun); }
@media (max-width: 640px) { .cf-summer-urgency { gap: 14px; } }


/* ============================================================
   BAUREINIGUNG — HERO USPs  (.cf-hero-usps)
   Snippet: snippet-baureinigung-hero-usps.html
   Hintergrund: Dunkel (Hero-Bereich)
   ============================================================ */
.cf-hero-usps {
  display: flex; flex-wrap: wrap; gap: 24px;
  margin: 0; padding: 0; list-style: none;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.cf-hero-usp {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: rgba(255,255,255,.75);
}
.cf-hero-usp svg {
  width: 16px; height: 16px;
  stroke: #8CCDE8; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.cf-hero-usp i[data-lucide] { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 640px) { .cf-hero-usps { flex-direction: column; gap: 10px; } }


/* ============================================================
   BAUREINIGUNG — PHASEN-NAVIGATOR  (.cf-phasen-*)
   Snippet: snippet-baureinigung-phasen.html
   ============================================================ */
.cf-phasen-nav {
  display: flex; align-items: flex-start;
  margin-bottom: 48px; position: relative;
}
.cf-phasen-nav::before {
  content: ""; position: absolute; top: 28px; left: 40px; right: 40px;
  height: 2px; background: var(--line); z-index: 0;
}
.cf-phasen-track {
  position: absolute; top: 28px; left: 40px; height: 2px;
  background: var(--blue); z-index: 1;
  transition: width .5s cubic-bezier(.4,0,.2,1); width: 0%;
}
.cf-phase-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 14px;
  cursor: pointer; position: relative; z-index: 2; padding: 0 8px;
  border: none; background: none;
}
.cf-phase-node {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft); border: 2px solid var(--line);
  transition: all .3s; position: relative; z-index: 2;
}
.cf-phase-node svg,
.cf-phase-node i[data-lucide] {
  width: 22px; height: 22px; stroke: var(--mute); fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .3s;
}
.cf-phase-node .ti { font-size: 20px; color: var(--mute); transition: color .3s; }
.cf-phase-label {
  font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 600;
  color: var(--mute); text-align: center; line-height: 1.3;
  transition: color .3s; max-width: 100px;
}
.cf-phase-num {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--line); transition: color .3s;
}
.cf-phase-btn.active .cf-phase-node {
  background: var(--blue); border-color: var(--blue);
  box-shadow: 0 0 0 6px rgba(16,64,160,.15), 0 8px 24px -6px rgba(16,64,160,.35);
}
.cf-phase-btn.active .cf-phase-node svg,
.cf-phase-btn.active .cf-phase-node i[data-lucide] { stroke: #fff; }
.cf-phase-btn.active .cf-phase-node .ti { color: #fff; }
.cf-phase-btn.active .cf-phase-label { color: var(--ink); }
.cf-phase-btn.active .cf-phase-num  { color: var(--blue); }
.cf-phase-btn.passed .cf-phase-node { background: var(--blue-soft); border-color: var(--blue); }
.cf-phase-btn.passed .cf-phase-node svg { stroke: var(--blue); }
.cf-phase-btn.passed .cf-phase-node .ti { color: var(--blue); }
.cf-phase-btn.passed .cf-phase-label { color: var(--blue-deep); }
.cf-phase-btn.passed .cf-phase-num  { color: var(--blue); }
@keyframes cf-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(16,64,160,.22); }
  70%  { box-shadow: 0 0 0 10px rgba(16,64,160,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,64,160,0); }
}
.cf-phase-btn:not(.active):not(.passed) .cf-phase-node { animation: cf-pulse-ring 2.4s ease-out infinite; }
.cf-phase-btn:nth-child(3):not(.active):not(.passed) .cf-phase-node { animation-delay: .6s; }
.cf-phase-btn:nth-child(4):not(.active):not(.passed) .cf-phase-node { animation-delay: 1.2s; }
.cf-phase-btn:nth-child(5):not(.active):not(.passed) .cf-phase-node { animation-delay: 1.8s; }
.cf-phase-btn:not(.active):not(.passed):hover .cf-phase-node { border-color: var(--blue); }
.cf-phase-btn:not(.active):not(.passed):hover .cf-phase-label { color: var(--blue-deep); }
.cf-phase-btn:not(.active):not(.passed):hover .cf-phase-num { color: var(--blue); }

.cf-phase-panel {
  background: #fff; border-radius: 20px;
  box-shadow: 0 2px 32px -8px rgba(13,27,62,.08);
  border: 1px solid var(--line); overflow: hidden;
  opacity: 0; transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease;
}
.cf-phase-panel.visible { opacity: 1; transform: translateY(0); }
.cf-pp-header {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  padding: 40px 44px 32px; border-bottom: 1px solid var(--line);
}
.cf-pp-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px; border-radius: 99px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--blue-soft); color: var(--blue-deep); margin-bottom: 16px;
}
.cf-pp-badge svg { width: 13px; height: 13px; stroke: var(--blue); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cf-pp-title {
  font-family: 'Outfit', sans-serif; font-weight: 700;
  font-size: clamp(20px,2.2vw,28px); color: var(--ink);
  line-height: 1.15; letter-spacing: -.02em; margin-bottom: 10px;
}
.cf-pp-desc { font-size: 15px; color: var(--mute); line-height: 1.7; }
.cf-pp-outcome-wrap { display: flex; align-items: center; }
.cf-pp-outcome {
  width: 100%; padding: 22px 24px;
  background: var(--blue-navy); border-radius: 14px;
  position: relative; overflow: hidden;
}
.cf-pp-outcome::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 85% 20%, rgba(140,205,232,.18) 0%, transparent 60%);
  pointer-events: none;
}
.cf-pp-outcome-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 10px;
}
.cf-pp-outcome-text { font-size: 15px; color: #fff; line-height: 1.6; position: relative; z-index: 1; }
.cf-pp-tiles-wrap { padding: 28px 44px 36px; }
.cf-pp-tiles-label {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mute); margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.cf-pp-tiles-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.cf-pp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cf-pp-tile {
  background: var(--bg-soft); border-radius: 12px; padding: 14px 12px;
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
}
.cf-pp-tile.show { opacity: 1; transform: translateY(0); }
.cf-pp-tile-ico {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--blue-soft);
  display: flex; align-items: center; justify-content: center;
}
.cf-pp-tile-ico svg,
.cf-pp-tile-ico i[data-lucide] { width: 17px; height: 17px; stroke: var(--blue); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.cf-pp-tile-ico .ti { font-size: 17px; color: var(--blue); line-height: 1; }
.cf-pp-tile-text { font-size: 12.5px; color: var(--ink); font-weight: 600; line-height: 1.3; }
.cf-pp-tile-desc { font-size: 11.5px; color: var(--mute); line-height: 1.4; }

@media (max-width: 1024px) {
  .cf-phasen-nav::before { left: 20px; right: 20px; }
  .cf-phasen-track { left: 20px; }
  .cf-pp-header { grid-template-columns: 1fr; gap: 24px; padding: 28px 28px 24px; }
  .cf-pp-tiles-wrap { padding: 24px 28px 32px; }
}
@media (max-width: 640px) {
  .cf-phase-label { font-size: 11px; max-width: 70px; }
  .cf-phase-node { width: 44px; height: 44px; }
  .cf-pp-tiles { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   BAUREINIGUNG — ÜBERGABE-CHECKLISTE  (.cf-ue-*)
   Snippet: snippet-baureinigung-uebergabe.html
   ============================================================ */
.cf-ue-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.cf-ue-photo {
  border-radius: 20px; overflow: hidden; position: relative;
  height: 480px; box-shadow: 0 8px 40px -12px rgba(13,27,62,.15);
}
.cf-ue-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-ue-photo-badge {
  position: absolute; bottom: 20px; left: 20px;
  background: rgba(255,255,255,.95); border-radius: 12px; padding: 12px 18px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.1); backdrop-filter: blur(8px);
}
@keyframes cf-pulse-dot { 0%,100%{opacity:1} 50%{opacity:.35} }
.cf-ue-badge-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue); flex-shrink: 0;
  animation: cf-pulse-dot 2s ease-in-out infinite;
}
.cf-ue-badge-text { font-size: 13px; font-weight: 600; color: var(--ink); }
.cf-ue-card {
  background: #fff; border-radius: 16px;
  border: 1.5px solid var(--line);
  box-shadow: 0 2px 20px -6px rgba(13,27,62,.08);
  overflow: hidden; margin-top: 28px;
}
.cf-ue-card-header {
  padding: 16px 24px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
}
.cf-ue-card-title { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 14px; color: var(--ink); }
.cf-ue-card-badge {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 99px; background: var(--blue-soft); color: var(--blue);
}
.cf-ue-items { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 4px; }
.cf-ue-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 10px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
}
.cf-ue-item.appear { opacity: 1; transform: translateY(0); background: var(--bg-soft); }
.cf-ue-dot {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; background: var(--blue-soft);
}
.cf-ue-dot svg {
  width: 12px; height: 12px; stroke: var(--blue); fill: none;
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 20; stroke-dashoffset: 20;
  transition: stroke-dashoffset .5s ease;
}
.cf-ue-item.appear .cf-ue-dot svg { stroke-dashoffset: 0; }
.cf-ue-item-text { font-size: 14px; color: var(--text); font-weight: 500; }
.cf-ue-card-footer {
  padding: 14px 24px; background: var(--blue);
  display: flex; align-items: center; gap: 10px;
}
.cf-ue-footer-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  animation: cf-pulse-dot 2s ease-in-out infinite; flex-shrink: 0;
}
.cf-ue-footer-text { font-size: 13px; color: #fff; font-weight: 600; }
@media (max-width: 1024px) {
  .cf-ue-grid { grid-template-columns: 1fr; gap: 40px; }
  .cf-ue-photo { height: 320px; }
}

/* ============================================================
   CF-USP-BLOCK
   3-spaltiger USP-Block auf dunkelblauem Hintergrund.
   Einsatz: eigenständiger WP-Block.
   ============================================================ */
.cf-usp-block {
  background: var(--blue-navy);
  border-radius: 16px;
  padding: 48px 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.cf-usp-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cf-usp-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(140,205,232,.15);
  border: 1px solid rgba(140,205,232,.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cf-usp-icon svg {
  width: 22px; height: 22px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cf-usp-item h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 17px; font-weight: 600;
  color: #fff !important; margin: 0;
}
.cf-usp-item p {
  font-size: 14px;
  color: rgba(255,255,255,.65);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 768px) {
  .cf-usp-block { grid-template-columns: 1fr; gap: 24px; padding: 32px 24px; }
}

/* ============================================================
   CF-STAT-BANNER
   Statistik-Block mit Quellenangabe. Einsatz: eigenständiger
   WP-Block oder innerhalb einer Section.
   ============================================================ */
.cf-stat-banner {
  background: var(--blue-soft);
  border-left: 4px solid var(--blue);
  border-radius: 0 12px 12px 0;
  padding: 18px 24px;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.65;
}
.cf-stat-banner strong { color: var(--blue); font-weight: 600; }
.cf-stat-source {
  font-size: 12px;
  color: var(--mute);
  margin-top: 6px;
}

/* ── CF-STAT-BLOCK (dark, hero/section context) ─────────────── */
.cf-stat-block {
  margin-top: 40px;
  background: var(--blue-navy);
  border-radius: 16px;
  padding: 28px 36px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.cf-stat-block .cf-stat-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(140,205,232,.15);
  display: flex; align-items: center; justify-content: center;
}
.cf-stat-block .cf-stat-icon svg {
  width: 22px; height: 22px;
  stroke: var(--accent); fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.cf-stat-block .cf-stat-text { font-size: 15px; color: rgba(255,255,255,.8); line-height: 1.65; }
.cf-stat-block .cf-stat-text strong { color: #fff; }
.cf-stat-block .cf-stat-source { display: block; margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.4); }

/* ============================================================
   CF-DEFINITION-REVEAL
   Scroll-triggered Definitions-Block mit Fade-in-Reveal.
   Einsatz: nach Hero-Lead-Text, als eigenständiger WP-Block.
   ============================================================ */
.cf-definition-reveal {
  padding: 12px 16px;
  background: rgba(255,255,255,.10);
  border-left: 2px solid var(--accent);
  border-radius: 0 8px 8px 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13.5px; line-height: 1.6;
  color: rgba(255,255,255,.78);
  max-width: 64ch;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.cf-definition-reveal.cf-in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .cf-definition-reveal { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 768px) {
  .cf-definition-reveal { display: none; }
}
.cf-definition-reveal strong { color: #fff; font-weight: 600; }
.cf-definition-reveal .cf-def-label {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 6px;
}

/* Light-Variante — für weißen/hellen Hintergrund */
.cf-definition-reveal-dark {
  padding: 14px 18px;
  background: var(--blue-soft);
  border-left: 3px solid var(--blue);
  border-radius: 0 8px 8px 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13.5px; line-height: 1.6;
  color: var(--text);
  max-width: 64ch;
}
.cf-definition-reveal-dark strong { color: var(--ink); font-weight: 600; }
.cf-definition-reveal-dark .cf-def-label {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blue);
  margin-bottom: 6px;
}

/* ============================================================
   CF-B2B-STRIP
   Dunkler Trust-Streifen unterhalb Hero.
   Einsatz: nach Hero, vor erster Content-Section.
   ============================================================ */
.cf-b2b-strip {
  background: var(--ink);
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.cf-b2b-strip .wrap {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0;
}
.cf-b2b-label {
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,.4);
  text-transform: uppercase; letter-spacing: .1em;
  margin-right: 28px; white-space: nowrap;
}
.cf-b2b-items {
  display: flex; gap: 28px; flex-wrap: wrap; align-items: center;
}
.cf-b2b-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: rgba(255,255,255,.72); font-weight: 500;
}
.cf-b2b-item svg {
  width: 16px; height: 16px; stroke: var(--accent); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 768px) { .cf-b2b-strip .wrap { gap: 12px; } }

/* ============================================================
   CF-USP-GRID
   3-spaltiges USP-Karten-Grid mit Icon, Titel, Text.
   Einsatz: "Warum CleanFix Service"-Sektionen.
   ============================================================ */
.cf-usp-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; margin-bottom: 48px;
}
.cf-usp-card {
  border: 1.5px solid var(--line); border-radius: 18px;
  padding: 36px 28px; text-align: center; background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.cf-usp-card:hover {
  border-color: var(--blue);
  box-shadow: 0 4px 24px -8px rgba(16,64,160,.14);
}
.cf-usp-ico {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--blue-soft);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.cf-usp-ico svg {
  width: 24px; height: 24px; stroke: var(--blue); fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.cf-usp-title {
  font-family: 'Outfit', sans-serif; font-weight: 700;
  font-size: 18px; color: var(--ink); margin-bottom: 10px;
}
.cf-usp-body { font-size: 14.5px; color: var(--mute); line-height: 1.6; }
@media (max-width: 1024px) { .cf-usp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .cf-usp-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CF-ZIELGRUPPE-ROW
   Pill-Tags für Zielgruppen (Hausverwaltungen, FM etc.).
   Einsatz: unterhalb USP-Grid oder als eigenständiger Block.
   ============================================================ */
.cf-zielgruppe-row {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.cf-zg-tag {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--blue-soft); color: var(--blue);
  border-radius: 999px; padding: 8px 18px;
  font-size: 13.5px; font-weight: 600;
}
.cf-zg-tag svg {
  width: 15px; height: 15px; stroke: var(--blue); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ============================================================
   CF-STEPS-ROW
   Generischer 4-Schritt-Ablauf (horizontal, Grid).
   Einsatz: Ablauf-Sektionen auf allen Unterseiten.
   ============================================================ */
.cf-steps-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2px; border: 1px solid var(--line); border-radius: 18px;
  overflow: hidden; background: var(--line);
}
.cf-step {
  background: #fff; padding: 32px 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.cf-step-num {
  font-family: 'Outfit', sans-serif; font-weight: 700;
  font-size: 36px; color: var(--blue-soft); line-height: 1;
}
.cf-step-title {
  font-family: 'Outfit', sans-serif; font-weight: 600;
  font-size: 16px; color: var(--ink);
}
.cf-step-body { font-size: 14px; color: var(--mute); line-height: 1.6; }
@media (max-width: 768px) { .cf-steps-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px)  { .cf-steps-row { grid-template-columns: 1fr; } }

/* ============================================================
   CF-PHOTO-BANNER
   Cinematisches Full-width-Foto-Trennband mit Overlay-Text.
   Einsatz: zwischen Content-Sektionen als visueller Akzent.
   ============================================================ */
.cf-photo-banner {
  position: relative; height: 520px; overflow: hidden;
}
.cf-photo-banner img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%; display: block;
}
.cf-photo-banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(6,26,85,.72) 0%, rgba(6,26,85,.2) 50%, transparent 100%);
}
.cf-photo-banner-text {
  position: absolute; top: 50%; left: 0;
  transform: translateY(-50%);
  z-index: 2; padding: 0 64px; max-width: 600px;
}
.cf-photo-banner-text blockquote {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(24px, 3vw, 38px); font-weight: 600;
  line-height: 1.2; color: #fff; letter-spacing: -.02em;
}
.cf-photo-banner-text blockquote span { color: var(--accent); }
.cf-photo-banner-text p {
  margin-top: 14px; font-size: 15px;
  color: rgba(255,255,255,.72); line-height: 1.6;
}
@media (max-width: 768px) {
  .cf-photo-banner { height: 360px; }
  .cf-photo-banner-text { padding: 0 32px; }
}

/* ============================================================
   CF-IMG-SPLIT
   Foto links + Text rechts (oder umgekehrt), im wrap-Container.
   Einsatz: Team-Foto-Sektionen, Leistungs-Highlights.
   ============================================================ */
.cf-img-split { padding: 72px 0; }
.cf-img-split-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
}
.cf-img-split-img {
  border-radius: 20px; overflow: hidden; aspect-ratio: 4/3;
}
.cf-img-split-img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top; display: block;
}
.cf-img-split-content {
  display: flex; flex-direction: column; gap: 24px;
}
.cf-img-split-content h2 { font-size: clamp(28px, 2.8vw, 40px); }
.cf-img-split-content p { font-size: 15.5px; color: var(--mute); line-height: 1.7; }
.cf-img-split-list {
  list-style: none; display: flex; flex-direction: column; gap: 10px;
}
.cf-img-split-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14.5px; color: var(--text); line-height: 1.5;
}
.cf-img-split-list li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0; margin-top: 6px;
}
.cf-img-split-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--blue); color: #fff;
  padding: 14px 26px; border-radius: 999px;
  font-weight: 600; font-size: 15px; width: fit-content;
  transition: background .2s, transform .2s;
}
.cf-img-split-cta:hover { background: var(--blue-deep); transform: translateY(-1px); }
@media (max-width: 1024px) {
  .cf-img-split-inner { grid-template-columns: 1fr; gap: 36px; }
}

/* ============================================================
   CF-JAHRESPLAN
   Saisonale Pflegeplan-Karten (Frühling / Sommer / Herbst / Winter).
   Einsatz: Grün- & Anlagenpflege, saisonale Dienstleistungsseiten.
   ============================================================ */
.cf-jahresplan-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2px; border-radius: 20px; overflow: hidden; background: var(--line);
}
.cf-jahresplan-card {
  background: #fff; padding: 36px 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.cf-jahresplan-label {
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 5px 12px; border-radius: 99px; width: fit-content;
}
.cf-jahresplan-label.fruehling { background: #E6F4EC; color: #2D7A4A; }
.cf-jahresplan-label.sommer    { background: #FEF3C7; color: #92400E; }
.cf-jahresplan-label.herbst    { background: #FEF0E6; color: #9A3B00; }
.cf-jahresplan-label.winter    { background: var(--blue-soft); color: var(--blue); }
.cf-jahresplan-title {
  font-family: 'Outfit', sans-serif; font-weight: 700;
  font-size: 20px; color: var(--ink); line-height: 1.1;
}
.cf-jahresplan-list {
  list-style: none; display: flex; flex-direction: column; gap: 7px;
}
.cf-jahresplan-list li {
  font-size: 13.5px; color: var(--mute); line-height: 1.5;
  display: flex; gap: 8px; align-items: flex-start;
}
.cf-jahresplan-list li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0; margin-top: 7px;
}
@media (max-width: 1024px) { .cf-jahresplan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .cf-jahresplan-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CF-COUNTER-SECTION
   Animierter Zähler-Block mit 4 Kennzahlen.
   Varianten: dark (navy) und light (weiß).
   Einsatz: Eye-Catcher nach Hero oder vor FAQ.
   ============================================================ */
.cf-counter-section {
  border-radius: 24px; padding: 64px 56px;
  position: relative; overflow: hidden;
  background: var(--blue-navy);
}
.cf-counter-section::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 10% 50%, rgba(140,205,232,.12) 0%, transparent 55%),
    radial-gradient(circle at 90% 20%, rgba(16,64,160,.3) 0%, transparent 50%);
  pointer-events: none;
}
.cf-counter-section > * { position: relative; z-index: 1; }
.cf-counter-head { text-align: left; margin-bottom: 56px; }
.cf-counter-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}
.cf-counter-eyebrow::before {
  content: ""; width: 24px; height: 2px; background: var(--accent);
}
.cf-counter-head h2 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(28px, 3vw, 40px); font-weight: 600;
  color: #fff; line-height: 1.15; letter-spacing: -.025em;
}
.cf-counter-head h2 span { color: var(--accent); }
.cf-counter-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2px; background: rgba(255,255,255,.06);
  border-radius: 16px; overflow: hidden;
}
.cf-counter-item {
  background: rgba(255,255,255,.04);
  padding: 40px 28px; text-align: left;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  transition: background .3s;
}
.cf-counter-item:hover { background: rgba(140,205,232,.08); }
.cf-counter-ico {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(140,205,232,.12);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.cf-counter-ico svg {
  width: 22px; height: 22px; stroke: var(--accent); fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.cf-counter-number {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(40px, 5vw, 60px); font-weight: 700;
  color: #fff; line-height: 1; letter-spacing: -.03em;
}
.cf-counter-number .cf-suffix {
  font-size: .55em; font-weight: 500; color: var(--accent); letter-spacing: 0;
}
.cf-counter-label {
  font-size: 13.5px; font-weight: 500;
  color: rgba(255,255,255,.65); line-height: 1.4; max-width: 14ch;
}
/* Variante: light */
.cf-counter-section.light {
  background: var(--bg);
  border: 1.5px solid var(--line);
  box-shadow: 0 8px 48px -16px rgba(16,64,160,.12);
}
.cf-counter-section.light::before {
  background: radial-gradient(circle at 50% 0%, rgba(140,205,232,.08) 0%, transparent 60%);
}
.cf-counter-section.light .cf-counter-eyebrow { color: var(--blue); }
.cf-counter-section.light .cf-counter-eyebrow::before { background: var(--accent); }
.cf-counter-section.light .cf-counter-head h2 { color: var(--ink); }
.cf-counter-section.light .cf-counter-head h2 span { color: var(--blue); }
.cf-counter-section.light .cf-counter-grid { background: var(--bg-soft); }
.cf-counter-section.light .cf-counter-item {
  background: #fff; border: 1.5px solid var(--line);
  align-items: flex-start; text-align: left;
  transition: border-color .2s, box-shadow .2s;
}
.cf-counter-section.light .cf-counter-item:hover {
  border-color: var(--blue); background: #fff;
  box-shadow: 0 4px 24px -8px rgba(16,64,160,.14);
}
.cf-counter-section.light .cf-counter-ico { background: var(--blue-soft); }
.cf-counter-section.light .cf-counter-ico svg { stroke: var(--blue); }
.cf-counter-section.light .cf-counter-number { color: var(--ink); }
.cf-counter-section.light .cf-counter-number .cf-suffix { color: var(--blue); }
.cf-counter-section.light .cf-counter-label { color: var(--mute); }
@media (max-width: 768px) {
  .cf-counter-grid { grid-template-columns: repeat(2, 1fr); }
  .cf-counter-section { padding: 48px 28px; }
}

/* ============================================================
   CF-SPLIT-LIST (Bullet-Punkt-Variante)
   Einfache Liste mit Accent-Dot, für Split-/Team-Sektionen.
   Überschreibt das ältere Grid-Icon-Pattern aus dem Leistungs-Split.
   ============================================================ */
.cf-split-list {
  list-style: none;
  display: flex; flex-direction: column; gap: 10px;
  margin: 0; padding: 0 !important;
}
.cf-split-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14.5px; color: var(--text); line-height: 1.5;
  padding: 0; border-bottom: none;
  grid-template-columns: unset;
}
.cf-split-list li::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0; margin-top: 6px;
}
.cf-split-list li:has(.cf-split-sico)::before { display: none; }

/* ============================================================
   CF-LS-GRID — Objektservice & Winterdienst Leistungskarten
   2-spaltiges Grid mit hellem und dunklem (navy) Kartentyp.
   ============================================================ */
.cf-ls-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.cf-ls-card {
  background: #fff; border-radius: 20px;
  border: 1px solid var(--line); overflow: hidden;
  box-shadow: 0 2px 32px -8px rgba(13,27,62,.07);
}
.cf-ls-card-winter {
  background: var(--blue-navy); border-color: transparent;
}
.cf-ls-card-head {
  padding: 36px 36px 28px;
  border-bottom: 1px solid var(--line);
}
.cf-ls-card-winter .cf-ls-card-head {
  border-bottom-color: rgba(255,255,255,.1);
}
.cf-ls-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--blue-soft);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.cf-ls-icon svg, .cf-ls-icon i {
  width: 24px; height: 24px; stroke: var(--blue); fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  display: flex; align-items: center; justify-content: center;
}
.cf-ls-card-winter .cf-ls-icon { background: rgba(140,205,232,.15); }
.cf-ls-card-winter .cf-ls-icon svg,
.cf-ls-card-winter .cf-ls-icon i { stroke: var(--accent); color: var(--accent); }
.cf-ls-card-eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 10px;
}
.cf-ls-card-winter .cf-ls-card-eyebrow { color: var(--accent); }
.cf-ls-card-head h3 {
  font-family: 'Outfit', sans-serif; font-weight: 600;
  font-size: clamp(18px,1.8vw,22px); color: var(--ink);
  line-height: 1.25; margin-bottom: 10px; letter-spacing: -.015em;
}
.cf-ls-card-winter .cf-ls-card-head h3 { color: #fff; }
.cf-ls-card-head p { font-size: 14.5px; color: var(--mute); line-height: 1.65; }
.cf-ls-card-winter .cf-ls-card-head p { color: rgba(255,255,255,.65); }
.cf-ls-items {
  padding: 24px 36px 32px; display: flex; flex-direction: column; gap: 4px;
}
.cf-ls-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 14px; border-radius: 12px; transition: background .2s;
}
.cf-ls-item:hover { background: var(--bg-soft); }
.cf-ls-card-winter .cf-ls-item:hover { background: rgba(255,255,255,.06); }
.cf-ls-item-ico {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: var(--blue-soft);
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.cf-ls-item-ico svg, .cf-ls-item-ico i {
  width: 17px; height: 17px; stroke: var(--blue); fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  display: flex; align-items: center; justify-content: center;
}
.cf-ls-card-winter .cf-ls-item-ico { background: rgba(140,205,232,.12); }
.cf-ls-card-winter .cf-ls-item-ico svg,
.cf-ls-card-winter .cf-ls-item-ico i { stroke: var(--accent); color: var(--accent); }
.cf-ls-item-name {
  font-family: 'Outfit', sans-serif; font-size: 14px;
  font-weight: 600; color: var(--ink); line-height: 1.3;
}
.cf-ls-card-winter .cf-ls-item-name { color: #fff; }
.cf-ls-item-desc { font-size: 12.5px; color: var(--mute); line-height: 1.5; margin-top: 2px; }
.cf-ls-card-winter .cf-ls-item-desc { color: rgba(255,255,255,.5); }
@media (max-width: 1024px) { .cf-ls-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .cf-ls-card-head { padding: 28px 24px 22px; }
  .cf-ls-items { padding: 16px 24px 24px; }
}

/* ============================================================
   CF-HAFTUNG — Winterdienst Haftungsrisiko-Block
   Badge, Risk-Chain (Pfeil-Kette) und Protection-Grid.
   ============================================================ */
.cf-haftung-badge {
  display: inline-flex; align-items: center; gap: 8px;
  width: fit-content;
  padding: 6px 14px; border-radius: 99px;
  background: #FEF2F2; color: #991B1B;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 18px;
}
.cf-haftung-badge svg {
  width: 13px; height: 13px; stroke: #DC2626; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.cf-risk-chain {
  display: flex; align-items: center;
  background: #FEF2F2; border: 1px solid #FECACA;
  border-radius: 20px; padding: 36px 32px;
  margin-bottom: 24px; overflow-x: auto; gap: 0;
}
.cf-risk-step {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; flex: 1; min-width: 100px;
}
.cf-risk-icon {
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1.5px solid #FECACA;
}
.cf-risk-icon svg {
  width: 22px; height: 22px; stroke: #9CA3AF; fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.cf-risk-icon.warn svg { stroke: #D97706; }
.cf-risk-icon.danger { background: #991B1B; border-color: #991B1B; }
.cf-risk-icon.danger svg { stroke: #fff; }
.cf-risk-icon.solution { background: #D1FAE5; border-color: #6EE7B7; }
.cf-risk-icon.solution svg { stroke: #065F46; }
.cf-risk-label.solution-label { color: #065F46; }
.cf-risk-divider {
  flex-shrink: 0; width: 32px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.cf-risk-divider-line {
  width: 1px; height: 60px;
  background: linear-gradient(to bottom, #FECACA, #6EE7B7);
}
.cf-risk-label {
  font-size: 12px; font-weight: 600; color: var(--ink);
  text-align: center; line-height: 1.35; max-width: 90px;
}
.cf-risk-connector {
  flex-shrink: 0; width: 40px;
  display: flex; align-items: center; justify-content: center;
}
.cf-risk-connector svg {
  width: 32px; height: 32px; stroke: #DC2626; fill: none;
  stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.cf-haftung-note {
  background: var(--bg-soft); border-radius: 12px;
  padding: 16px 22px; margin-bottom: 48px;
  font-size: 13.5px; color: var(--mute); line-height: 1.6;
  border-left: 3px solid var(--line);
}
.cf-haftung-note strong { color: var(--ink); }
.cf-protection-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 16px;
}
.cf-protection-card {
  background: var(--blue-navy); border-radius: 16px;
  padding: 28px 24px; position: relative; overflow: hidden;
}
.cf-protection-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 90% 10%, rgba(140,205,232,.15) 0%, transparent 60%);
  pointer-events: none;
}
.cf-protection-card-ico {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(140,205,232,.15);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px; position: relative; z-index: 1;
}
.cf-protection-card-ico svg {
  width: 20px; height: 20px; stroke: var(--accent); fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.cf-protection-card strong {
  display: block; font-family: 'Outfit', sans-serif;
  font-weight: 600; font-size: 15px; color: #fff;
  margin-bottom: 8px; position: relative; z-index: 1;
}
.cf-protection-card p {
  font-size: 13.5px; color: rgba(255,255,255,.6);
  line-height: 1.6; margin: 0; position: relative; z-index: 1;
}
@media (max-width: 1024px) { .cf-protection-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .cf-protection-grid { display: none; }

  /* Risk-Chain: von horizontal nach vertikal stapeln */
  .cf-risk-chain {
    flex-direction: column;
    align-items: stretch;
    overflow-x: hidden;
    padding: 20px 20px;
    gap: 0;
  }
  .cf-risk-step {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    flex: none;
    min-width: 0;
  }
  .cf-risk-label {
    text-align: left;
    max-width: none;
    font-size: 13px;
    line-height: 1.4;
  }
  /* Connector: Pfeil 90° drehen → zeigt nach unten */
  .cf-risk-connector {
    width: auto;
    height: 18px;
    padding-left: 18px; /* (52px Icon / 2) - (16px SVG / 2) = Icon-Mitte */
    justify-content: flex-start;
  }
  .cf-risk-connector svg {
    width: 16px;
    height: 16px;
    transform: rotate(90deg);
  }
  /* Divider: volle Breite als horizontale Trennlinie */
  .cf-risk-divider {
    width: 100%;
    height: 24px;
    padding: 8px 0;
  }
  .cf-risk-divider-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, #FECACA, #6EE7B7);
  }
  /* Solution-Label: linksbündig wie alle anderen Labels */
  .cf-risk-label.solution-label { text-align: left; }
}

/* ============================================================
   PRIVATHAUSREINIGUNG — Komponenten
   usp-band, stat-banner, zielgruppen, ablauf,
   raumuebersicht (tabs), pakete
   ============================================================ */

/* Wrapper */
.usp-band .wrap,
.stat-banner .wrap,
.zielgruppen .wrap,
.ablauf .wrap,
.raumuebersicht .wrap,
.pakete .wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
}

/* Eyebrow & Heading Helpers */
.usp-band .eyebrow,
.stat-banner .eyebrow,
.zielgruppen .eyebrow,
.ablauf .eyebrow,
.raumuebersicht .eyebrow,
.pakete .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--blue-deep);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 0;
}
.usp-band .eyebrow::before,
.stat-banner .eyebrow::before,
.zielgruppen .eyebrow::before,
.ablauf .eyebrow::before,
.raumuebersicht .eyebrow::before,
.pakete .eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--accent);
  flex-shrink: 0;
}

.zielgruppen h2,
.ablauf h2,
.raumuebersicht h2,
.pakete h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 3.8vw, 44px);
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--ink);
}
.zielgruppen h2 .accent,
.ablauf h2 .accent,
.raumuebersicht h2 .accent,
.pakete h2 .accent {
  color: var(--blue);
}

/* ── USP BAND ── */
.usp-band { background: var(--blue-navy); padding: 40px 0; }
.usp-band-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.usp-item { display: flex; align-items: flex-start; gap: 16px; }
.usp-ico { width: 44px; height: 44px; border-radius: 11px; background: rgba(140,205,232,.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.usp-ico svg { width: 20px; height: 20px; stroke: var(--accent); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.usp-text-title { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 15px; color: #fff; margin-bottom: 4px; }
.usp-text-desc { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.5; }

/* ── STATISTIK BANNER ── */
.stat-banner { background: var(--blue-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 28px 0; }
.stat-banner-inner { display: flex; align-items: center; gap: 20px; }
.stat-banner-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-banner-ico svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stat-banner p { font-size: 14.5px; color: var(--ink); line-height: 1.55; }
.stat-banner strong { font-weight: 600; color: var(--blue); }

/* ── ZIELGRUPPEN ── */
.zielgruppen { background: var(--bg-soft); padding: 72px 0; }
.zielgruppen-head { text-align: center; margin-bottom: 48px; }
.zielgruppen-head .eyebrow { justify-content: center; }
.zg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.zg-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px 24px; text-align: center; transition: box-shadow .25s, transform .25s; }
.zg-card:hover { box-shadow: 0 8px 24px -8px rgba(16,64,160,.1); transform: translateY(-2px); }
.zg-ico { width: 52px; height: 52px; border-radius: 14px; background: var(--blue-soft); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.zg-ico svg { width: 22px; height: 22px; stroke: var(--blue); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.zg-ico i { font-size: 20px; color: var(--blue); }
.zg-title { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 8px; }
.zg-desc { font-size: 13px; color: var(--mute); line-height: 1.55; }

/* ── ABLAUF ── */
.ablauf { background: #fff; padding: 72px 0; }
.ablauf-head { text-align: center; margin-bottom: 56px; }
.ablauf-head .eyebrow { justify-content: center; }
.ablauf-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.ablauf-steps::before { content: ""; position: absolute; top: 28px; left: calc(12.5% + 14px); right: calc(12.5% + 14px); height: 2px; background: var(--line); z-index: 0; }
.ablauf-step { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 16px; position: relative; z-index: 1; }
.ablauf-num { width: 56px; height: 56px; border-radius: 50%; background: var(--blue); color: #fff; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; border: 4px solid #fff; box-shadow: 0 0 0 2px var(--blue); }
.ablauf-title { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 8px; }
.ablauf-desc { font-size: 13px; color: var(--mute); line-height: 1.55; }
.ablauf-cta-wrap { text-align: center; margin-top: 48px; }
.ablauf-cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; background: var(--blue); color: #fff; border-radius: 999px; font-size: 15px; font-weight: 600; transition: background .2s, transform .2s; }
.ablauf-cta:hover { background: var(--blue-deep); transform: translateY(-1px); }
.ablauf-cta svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── RAUMÜBERSICHT (Tabs) ── */
.raumuebersicht { padding: 23px 0; }
.raumuebersicht .section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 48px; align-items: end; }
.raumuebersicht .section-head p { color: var(--mute); font-size: 16px; max-width: 48ch; line-height: 1.65; }
.room-tabs { display: flex; gap: 8px; margin-bottom: 28px; border-bottom: 2px solid var(--line); padding-bottom: 0; overflow-x: auto; scrollbar-width: none; }
.room-tabs::-webkit-scrollbar { display: none; }
.room-tab { display: flex; align-items: center; gap: 8px; padding: 12px 22px; border: none; background: none; cursor: pointer; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 600; color: var(--mute); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color .2s, border-color .2s; }
.room-tab svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.room-tab i { font-size: 15px; width: 16px; text-align: center; }
.room-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.room-tab:hover:not(.active) { color: var(--ink); }
.room-panel { display: none; }
.room-panel.active { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.room-card { background: #fff; border-radius: 16px; padding: 28px; border: 1px solid var(--line); box-shadow: 0 1px 12px -4px rgba(13,27,62,.05); }
.room-card-title { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.room-card-title svg { width: 17px; height: 17px; stroke: var(--blue); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.room-card-title i { font-size: 16px; color: var(--blue); width: 18px; text-align: center; }
.room-checklist { display: flex; flex-direction: column; gap: 10px; }
.room-check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); }
.room-check-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--blue-soft); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.room-check-dot svg { width: 10px; height: 10px; stroke: var(--blue); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.room-check-dot i { font-size: 9px; color: var(--blue); }

/* ── PAKETE ── */
.pakete { background: #fff; padding: 23px 0; }
.pakete-head { text-align: center; margin-bottom: 48px; }
.pakete-head .eyebrow { justify-content: center; }
.pakete-head p { color: var(--mute); font-size: 16px; max-width: 52ch; margin: 14px auto 0; }
.paket-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.paket-card { border-radius: 20px; border: 1.5px solid var(--line); padding: 36px 30px; display: flex; flex-direction: column; gap: 0; background: #fff; transition: box-shadow .25s, transform .25s; }
.paket-card:hover { box-shadow: 0 8px 32px -12px rgba(13,27,62,.12); transform: translateY(-2px); }
.paket-featured { background: var(--blue-navy); border-color: var(--blue-navy); box-shadow: 0 16px 48px -16px rgba(6,26,85,.4); position: relative; transform: none; }
.paket-featured:hover { transform: translateY(-3px); }
.paket-badge { display: inline-block; padding: 4px 12px; border-radius: 99px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 20px; background: var(--blue-soft); color: var(--blue); }
.paket-featured .paket-badge { background: rgba(140,205,232,.2); color: var(--accent); }
.paket-icon { width: 48px; height: 48px; border-radius: 13px; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.paket-icon svg { width: 22px; height: 22px; stroke: var(--blue); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.paket-featured .paket-icon { background: rgba(140,205,232,.12); }
.paket-featured .paket-icon svg { stroke: var(--accent); }
.paket-name { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 20px; color: var(--ink); margin-bottom: 8px; }
.paket-featured .paket-name { color: #fff; }
.paket-ideal { font-size: 13px; color: var(--mute); line-height: 1.5; margin-bottom: 24px; }
.paket-featured .paket-ideal { color: rgba(255,255,255,.55); }
.paket-divider { height: 1px; background: var(--line); margin-bottom: 20px; }
.paket-featured .paket-divider { background: rgba(255,255,255,.1); }
.paket-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.paket-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--text); line-height: 1.4; }
.paket-featured .paket-item { color: rgba(255,255,255,.8); }
.paket-item-ico { width: 18px; height: 18px; border-radius: 50%; background: var(--blue-soft); flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.paket-item-ico svg { width: 9px; height: 9px; stroke: var(--blue); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.paket-featured .paket-item-ico { background: rgba(140,205,232,.2); }
.paket-featured .paket-item-ico svg { stroke: var(--accent); }
.paket-cta { display: block; text-align: center; padding: 13px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; transition: background .2s, color .2s; background: var(--bg-soft); color: var(--blue); border: 1.5px solid var(--line); }
.paket-cta:hover { background: var(--blue-soft); border-color: var(--blue); }
.paket-featured .paket-cta { background: var(--accent); color: var(--blue-navy); border-color: transparent; }
.paket-featured .paket-cta:hover { background: #A8DCEF; }

/* ── Responsive: Privathausreinigung ── */
@media (max-width: 1024px) {
  .raumuebersicht .section-head { grid-template-columns: 1fr; gap: 20px; }
  .paket-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .room-panel.active { grid-template-columns: 1fr; }
  .usp-band-inner { grid-template-columns: 1fr; gap: 24px; }
  .zg-grid { grid-template-columns: 1fr 1fr; }
  .ablauf-steps { grid-template-columns: 1fr 1fr; gap: 40px; }
  .ablauf-steps::before { display: none; }
}
@media (max-width: 640px) {
  .zg-grid { grid-template-columns: 1fr; }
  .ablauf-steps { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   FASSADENREINIGUNG — CANVAS-ANIMATION  (.cf-anim-*)
   Snippet: snippet-fassadenreinigung-anim-canvas.html
           snippet-fassadenreinigung-anim-steps.html
════════════════════════════════════════════════════════════════ */
.cf-anim-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.cf-anim-canvas-col { display: flex; flex-direction: column; }
.cf-anim-info-col .eyebrow { color: var(--accent); }
.cf-anim-info-col .eyebrow::before { background: var(--accent); }
.cf-anim-info-col h2 { color: #fff; margin-bottom: 32px; }
.cf-anim-info-col h2 .accent { color: var(--accent); }
.cf-anim-canvas-wrap {
  position: relative;
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 24px 80px -20px rgba(0,0,0,.55);
}
#fassadenCanvas {
  display: block; width: 100%; height: 480px;
  cursor: default;
}
ol.cf-anim-steps, .cf-anim-steps {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cf-anim-steps li {
  display: flex !important;
  gap: 16px;
  align-items: flex-start;
  padding: 0 !important;
  margin: 0 !important;
}
.cf-anim-steps li::before { display: none !important; content: none !important; }
.cf-anim-step-num {
  flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex !important; align-items: center; justify-content: center;
  margin-top: 2px;
  line-height: 1;
}
.cf-anim-steps li strong { display: block; color: #fff; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.cf-anim-steps li p { margin: 0 !important; color: rgba(255,255,255,.55); font-size: 14px; line-height: 1.55; }
.cf-anim-badge {
  position: absolute; pointer-events: none;
  padding: 7px 14px; border-radius: 99px;
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  transition: opacity .4s;
}
.cf-anim-badge-dirty { bottom: 20px; left: 20px; background: rgba(20,14,6,.65); color: rgba(255,255,255,.7); backdrop-filter: blur(8px); }
.cf-anim-badge-clean { top: 20px; left: 20px; background: rgba(255,255,255,.82); color: var(--ink); backdrop-filter: blur(8px); opacity: 0; }

@media (max-width: 640px) {
  .cf-anim-split { grid-template-columns: 1fr; gap: 32px; }
  .cf-anim-canvas-wrap { border-radius: 14px; }
  #fassadenCanvas { height: 360px; }
}

/* ════════════════════════════════════════════════════════════════
   FASSADENREINIGUNG — VERFALL-ZEITLINIE  (.cf-verfall-*)
   Snippet: snippet-fassadenreinigung-verfall.html
════════════════════════════════════════════════════════════════ */
.cf-verfall-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 64px; align-items: end; }
.cf-verfall-head p { color: var(--mute); font-size: 16px; max-width: 48ch; line-height: 1.65; }

.cf-verfall-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: var(--line);
}
.cf-verfall-stage {
  background: #fff;
  padding: 32px 28px 36px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
}
.cf-verfall-stage:first-child { border-radius: 19px 0 0 19px; }
.cf-verfall-stage:last-child  { border-radius: 0 19px 19px 0; }

.cf-vs-year  { font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--mute); }
.cf-vs-label { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 18px; color: var(--ink); line-height: 1.2; }
.cf-vs-desc  { font-size: 14px; color: var(--mute); line-height: 1.55; }

.cf-vs-dot { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; flex-shrink: 0; }
.cf-vs-dot svg { width: 18px; height: 18px; stroke-linecap: round; stroke-linejoin: round; }

.cf-verfall-stage:nth-child(1) .cf-vs-dot { background: #EBF5EA; }
.cf-verfall-stage:nth-child(1) .cf-vs-dot svg { stroke: #3A9D46; fill: none; stroke-width: 1.75; }
.cf-verfall-stage:nth-child(2) .cf-vs-dot { background: #FFF8E6; }
.cf-verfall-stage:nth-child(2) .cf-vs-dot svg { stroke: #E09B1A; fill: none; stroke-width: 1.75; }
.cf-verfall-stage:nth-child(3) .cf-vs-dot { background: #FDEEDE; }
.cf-verfall-stage:nth-child(3) .cf-vs-dot svg { stroke: #D96C24; fill: none; stroke-width: 1.75; }
.cf-verfall-stage:nth-child(4) .cf-vs-dot { background: rgba(204,41,41,.25); }
.cf-verfall-stage:nth-child(4) .cf-vs-dot svg { stroke: #CC2929; fill: none; stroke-width: 1.75; }
.cf-verfall-stage:nth-child(4) { background: var(--blue-navy); }
.cf-verfall-stage:nth-child(4) .cf-vs-year  { color: rgba(255,255,255,.45); }
.cf-verfall-stage:nth-child(4) .cf-vs-label { color: #fff; }
.cf-verfall-stage:nth-child(4) .cf-vs-desc  { color: rgba(255,255,255,.6); }

.cf-verfall-note {
  margin-top: 28px;
  display: flex; align-items: center; gap: 14px;
  background: #fff; border-radius: 14px; padding: 18px 22px;
  border: 1px solid var(--line);
  font-size: 14px; color: var(--mute); line-height: 1.5;
}
.cf-verfall-note svg { width: 18px; height: 18px; stroke: var(--blue); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.cf-verfall-note strong { color: var(--ink); }

@media (max-width: 1024px) {
  .cf-verfall-head { grid-template-columns: 1fr; gap: 20px; }
  .cf-verfall-track { grid-template-columns: 1fr 1fr; }
  .cf-verfall-stage:nth-child(1) { border-radius: 19px 0 0 0; }
  .cf-verfall-stage:nth-child(2) { border-radius: 0 19px 0 0; }
  .cf-verfall-stage:nth-child(3) { border-radius: 0 0 0 19px; }
  .cf-verfall-stage:nth-child(4) { border-radius: 0 0 19px 0; }
}
@media (max-width: 640px) {
  .cf-verfall-track { grid-template-columns: 1fr; }
  .cf-verfall-stage:nth-child(1) { border-radius: 19px 19px 0 0; }
  .cf-verfall-stage:nth-child(2), .cf-verfall-stage:nth-child(3) { border-radius: 0; }
  .cf-verfall-stage:nth-child(4) { border-radius: 0 0 19px 19px; }
}

/* ════════════════════════════════════════════════════════════════
   FASSADENREINIGUNG — REINIGUNGSVERFAHREN  (.cf-verf-*)
   Snippet: snippet-fassadenreinigung-verfahren.html
════════════════════════════════════════════════════════════════ */
.cf-verfahren-head { text-align: center; margin-bottom: 52px; }
.cf-verfahren-head .eyebrow { justify-content: center; }
.cf-verfahren-head p { color: var(--mute); font-size: 16px; max-width: 52ch; margin: 14px auto 0; line-height: 1.65; }

.cf-verf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cf-verf-card {
  border-radius: 20px;
  border: 1.5px solid var(--line);
  background: #fff;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .25s, transform .25s;
}
.cf-verf-card:hover { box-shadow: 0 8px 32px -12px rgba(13,27,62,.10); transform: translateY(-2px); }

.cf-verf-header {
  padding: 28px 28px 22px;
  display: flex; align-items: center; gap: 18px;
  border-bottom: 1px solid var(--line);
}
.cf-verf-icon {
  width: 50px; height: 50px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cf-verf-card:nth-child(1) .cf-verf-icon { background: #EDF3F8; }
.cf-verf-card:nth-child(2) .cf-verf-icon { background: #FFF3E0; }
.cf-verf-card:nth-child(3) .cf-verf-icon { background: #EFF5EC; }
.cf-verf-icon i { font-size: 22px; }
.cf-verf-card:nth-child(1) .cf-verf-icon i { color: #3880A0; }
.cf-verf-card:nth-child(2) .cf-verf-icon i { color: #C07318; }
.cf-verf-card:nth-child(3) .cf-verf-icon i { color: #4A7A3A; }

.cf-verf-title     { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 17px; color: var(--ink); line-height: 1.25; }
.cf-verf-subtitle  { font-size: 13px; color: var(--mute); margin-top: 3px; }
.cf-verf-body      { padding: 24px 28px; flex: 1; display: flex; flex-direction: column; gap: 16px; }
.cf-verf-desc      { font-size: 14.5px; color: var(--text); line-height: 1.6; }
.cf-verf-meta      { display: flex; flex-direction: column; gap: 10px; }
.cf-verf-meta-row  { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; }
.cf-verf-meta-key  { font-weight: 600; color: var(--ink); min-width: 72px; flex-shrink: 0; }
.cf-verf-meta-val  { color: var(--mute); line-height: 1.45; }
.cf-verf-materials { display: flex; flex-wrap: wrap; gap: 6px; padding: 18px 28px 24px; border-top: 1px solid var(--line); }
.cf-verf-mat-pill  { padding: 4px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 500; background: var(--bg-soft); color: var(--mute); border: 1px solid var(--line); }

@media (max-width: 1024px) {
  .cf-verf-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}

/* ════════════════════════════════════════════════════════════════
   FASSADENREINIGUNG — VORHER/NACHHER-SLIDER  (.cf-compare-*)
   Snippet: snippet-fassadenreinigung-vorher-nachher.html
════════════════════════════════════════════════════════════════ */
.cf-compare {
  --pos: 50%;
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  cursor: col-resize;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 20px 60px -16px rgba(13,27,62,.18);
}
.cf-compare-after,
.cf-compare-before {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.cf-compare-before { z-index: 2; }

.cf-compare-after img,
.cf-compare-before img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
}
.cf-compare-before img {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.cf-compare-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: col-resize;
}
.cf-compare-line {
  flex: 1;
  width: 2px;
  background: rgba(255,255,255,.85);
}
.cf-compare-btn {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center; gap: 2px;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
}
.cf-compare-btn svg {
  width: 16px; height: 16px;
  stroke: var(--blue); fill: none;
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}

.cf-compare-label {
  position: absolute;
  bottom: 18px;
  z-index: 4;
  padding: 5px 14px;
  border-radius: 99px;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  backdrop-filter: blur(8px);
}
.cf-label-before {
  left: 18px;
  background: rgba(20,14,6,.60); color: rgba(255,255,255,.85);
}
.cf-label-after {
  right: 18px;
  background: rgba(255,255,255,.88); color: var(--ink);
}

@media (max-width: 640px) {
  .cf-compare { border-radius: 14px; aspect-ratio: 4 / 3; }
}


/* ═══════════════════════════════════════════════════════════════
   PV-REINIGUNG SNIPPETS
   ─────────────────────────────────────────────────────────────
   Voraussetzungen:
   - Font Awesome 6 Free (via functions.php)
   - CSS-Variablen: --solar, --solar-deep, --solar-soft
     (in :root des Themes oder per Custom CSS ergänzen)
   ─────────────────────────────────────────────────────────────
   :root {
     --solar:      #F59E0B;
     --solar-deep: #B45309;
     --solar-soft: #FEF3C7;
   }
   ═══════════════════════════════════════════════════════════════ */

/* ── PV HERO USPs ── */
/* Hinweis: nutzt .cf-hero-usps / .cf-hero-usp — bereits definiert */

/* ── PV VERLUST-BANNER ── */
.cf-pv-verlust-banner { padding: 0; margin: 0; }
.cf-pv-vb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.cf-pv-vb-item { padding: 28px 40px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.cf-pv-vb-item:last-child { border-right: none; }
.cf-pv-vb-icon { font-size: 16px; color: var(--blue); margin-bottom: 6px; }
.cf-pv-vb-num { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 32px; line-height: 1; color: var(--ink); letter-spacing: -.03em; }
.cf-pv-vb-num span { color: var(--solar-deep); }
.cf-pv-vb-label { font-size: 13px; color: var(--mute); line-height: 1.4; max-width: 28ch; }
@media (max-width: 1024px) {
  .cf-pv-vb-grid { grid-template-columns: 1fr; }
  .cf-pv-vb-item { border-right: none; border-bottom: 1px solid var(--line); padding: 24px 28px; }
  .cf-pv-vb-item:last-child { border-bottom: none; }
}

/* ── PV LEISTUNGSRECHNER ── */
.cf-pv-rechner-card { background: var(--bg-soft); border: 1.5px solid var(--line); border-radius: 24px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; }
.cf-pv-rechner-inputs { padding: 48px 44px; display: flex; flex-direction: column; gap: 36px; border-right: 1.5px solid var(--line); }
.cf-pv-rechner-group { display: flex; flex-direction: column; gap: 14px; }
.cf-pv-rechner-label { font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 600; color: var(--ink); }
.cf-pv-rechner-label span { font-weight: 400; color: var(--mute); font-size: 13px; margin-left: 6px; }
.cf-pv-kwp-display { font-family: 'Outfit', sans-serif; font-size: 42px; font-weight: 700; color: var(--blue); line-height: 1; }
.cf-pv-kwp-display small { font-size: 18px; font-weight: 400; color: var(--mute); }
.cf-pv-kwp-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: var(--line); outline: none; cursor: pointer; }
.cf-pv-kwp-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--blue); cursor: pointer; box-shadow: 0 2px 8px rgba(16,64,160,.35); transition: transform .15s; }
.cf-pv-kwp-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.cf-pv-kwp-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--mute); }
.cf-pv-grad-btns { display: flex; gap: 10px; }
.cf-pv-grad-btn { flex: 1; padding: 12px 8px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; font-size: 13px; font-weight: 600; color: var(--mute); cursor: pointer; transition: all .2s; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cf-pv-grad-btn i { font-size: 18px; }
.cf-pv-grad-btn.active { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.cf-pv-grad-btn:nth-child(1) i { color: #7BC52F; }
.cf-pv-grad-btn:nth-child(2) i { color: var(--solar); }
.cf-pv-grad-btn:nth-child(3) i { color: #CC2929; }
.cf-pv-rechner-results { padding: 48px 44px; background: var(--blue-navy); display: flex; flex-direction: column; justify-content: space-between; }
.cf-pv-rechner-results-top { display: flex; flex-direction: column; gap: 32px; }
.cf-pv-result-main { display: flex; flex-direction: column; gap: 6px; }
.cf-pv-result-eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.4); }
.cf-pv-result-big { font-family: 'Outfit', sans-serif; font-size: 64px; font-weight: 700; color: var(--solar); line-height: 1; letter-spacing: -.03em; }
.cf-pv-result-big small { font-size: 28px; }
.cf-pv-result-sub { font-size: 14px; color: rgba(255,255,255,.55); margin-top: 2px; }
.cf-pv-result-row { display: flex; align-items: center; gap: 14px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.08); }
.cf-pv-result-row-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cf-pv-result-row-icon i { font-size: 16px; color: var(--accent); }
.cf-pv-result-row-val { font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 700; color: #fff; line-height: 1; }
.cf-pv-result-row-unit { font-size: 12px; color: rgba(255,255,255,.45); margin-top: 3px; }
.cf-pv-rechner-cta { margin-top: 32px; display: block; text-align: center; padding: 15px 24px; background: var(--solar); color: var(--ink); border-radius: 999px; font-size: 15px; font-weight: 700; transition: background .2s, transform .2s; font-family: 'Outfit', sans-serif; }
.cf-pv-rechner-cta:hover { background: #FBC02D; transform: translateY(-1px); }
.cf-pv-rechner-hint { text-align: center; margin-top: 24px !important; font-size: 11.5px; color: rgba(255,255,255,.3); line-height: 1.5; }
@media (max-width: 1024px) {
  .cf-pv-rechner-card { grid-template-columns: 1fr; }
  .cf-pv-rechner-inputs { border-right: none; border-bottom: 1.5px solid var(--line); }
}
@media (max-width: 640px) {
  .cf-pv-rechner-inputs, .cf-pv-rechner-results { padding: 32px 28px; }
  .cf-pv-result-big { font-size: 48px; }
  .cf-pv-grad-btns { gap: 8px; }
}

/* ── PV ZIELGRUPPEN ── */
.cf-pv-zg-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cf-pv-zg-card { background: #fff; border-radius: 24px; border: 1.5px solid var(--line); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .25s, transform .25s; }
.cf-pv-zg-card:hover { box-shadow: 0 12px 40px -12px rgba(13,27,62,.12); transform: translateY(-3px); }
.cf-pv-zg-card-top { padding: 36px 36px 32px; border-bottom: 1px solid var(--line); }
.cf-pv-zg-card:first-child .cf-pv-zg-card-top { background: linear-gradient(135deg, var(--blue-soft) 0%, #fff 100%); }
.cf-pv-zg-card:last-child  .cf-pv-zg-card-top { background: linear-gradient(135deg, #EFF8F0 0%, #fff 100%); }
.cf-pv-zg-icon { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.cf-pv-zg-card:first-child .cf-pv-zg-icon { background: var(--blue-soft); }
.cf-pv-zg-card:last-child  .cf-pv-zg-icon { background: #E6F4E8; }
.cf-pv-zg-icon i { font-size: 24px; }
.cf-pv-zg-card:first-child .cf-pv-zg-icon i { color: var(--blue); }
.cf-pv-zg-card:last-child  .cf-pv-zg-icon i { color: #2E7D32; }
.cf-pv-zg-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 22px; color: var(--ink); margin-bottom: 8px; }
.cf-pv-zg-desc { font-size: 14px; color: var(--mute); line-height: 1.6; }
.cf-pv-zg-card-body { padding: 28px 36px 36px; flex: 1; display: flex; flex-direction: column; }
.cf-pv-zg-list { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.cf-pv-zg-item { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--text); line-height: 1.45; }
.cf-pv-zg-item i { font-size: 15px; margin-top: 1px; flex-shrink: 0; }
.cf-pv-zg-card:first-child .cf-pv-zg-item i { color: var(--blue); }
.cf-pv-zg-card:last-child  .cf-pv-zg-item i { color: #2E7D32; }
.cf-pv-zg-item strong { color: var(--ink); }
.cf-pv-zg-cta { margin-top: 28px; display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px; font-size: 14px; font-weight: 600; transition: background .2s, transform .2s; }
.cf-pv-zg-card:first-child .cf-pv-zg-cta { background: var(--blue); color: #fff; }
.cf-pv-zg-card:first-child .cf-pv-zg-cta:hover { background: var(--blue-deep); transform: translateY(-1px); }
.cf-pv-zg-card:last-child .cf-pv-zg-cta { background: var(--ink); color: #fff; }
.cf-pv-zg-card:last-child .cf-pv-zg-cta:hover { background: #0A1428; transform: translateY(-1px); }
@media (max-width: 1024px) {
  .cf-pv-zg-split { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}

/* ── PV ABLAUF ── */
.cf-pv-ablauf-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.cf-pv-ablauf-steps::before { content: ""; position: absolute; top: 28px; left: calc(12.5% + 20px); right: calc(12.5% + 20px); height: 1px; background: var(--line); z-index: 0; }
.cf-pv-ablauf-step { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 24px; position: relative; z-index: 1; }
.cf-pv-ablauf-num { width: 56px; height: 56px; border-radius: 50%; background: var(--blue-soft); border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: 'Outfit', sans-serif; font-size: 18px; font-weight: 700; color: var(--blue); margin-bottom: 20px; flex-shrink: 0; transition: background .25s, border-color .25s; }
.cf-pv-ablauf-step:hover .cf-pv-ablauf-num { background: var(--blue); color: #fff; border-color: var(--blue); }
.cf-pv-ablauf-step-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 16px; color: var(--ink); margin-bottom: 8px; line-height: 1.3; }
.cf-pv-ablauf-step-desc { font-size: 13.5px; color: var(--mute); line-height: 1.6; }
@media (max-width: 1024px) {
  .cf-pv-ablauf-steps { grid-template-columns: 1fr 1fr; gap: 48px; }
  .cf-pv-ablauf-steps::before { display: none; }
}
@media (max-width: 640px) {
  .cf-pv-ablauf-steps { grid-template-columns: 1fr; }
}

/* ── PV FOTO BREAK ── */
.cf-foto-break { position: relative; width: 100%; height: 520px; overflow: hidden; }
.cf-foto-break img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.cf-foto-break-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(to right, rgba(6,26,85,.75) 0%, rgba(6,26,85,.4) 50%, transparent 80%); padding-left: max(48px, calc((100vw - 1240px) / 2 + 32px)); padding-right: 40%; }
.cf-foto-break-content h2 { color: #fff; font-size: clamp(40px, 5.5vw, 72px); line-height: 1.05; letter-spacing: -.03em; font-weight: 700; max-width: 14ch; }
.cf-foto-break-content h2 span { color: var(--solar); }
.cf-foto-break-content p { color: rgba(255,255,255,.75); font-size: 17px; line-height: 1.55; max-width: 40ch; margin-top: 20px; }
@media (max-width: 640px) {
  .cf-foto-break { height: 380px; }
  .cf-foto-break-content { padding-left: 24px; padding-right: 24px; }
}


/* === HALLENREINIGUNG cf-hr-* === */

/* ── RISIKEN ── */
.cf-hr-risiken { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.cf-hr-risiko-card { background: #fff; border-radius: 16px; padding: 28px 24px; border: 1.5px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.cf-hr-risiko-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.cf-hr-risiko-card.warn   .cf-hr-risiko-icon { background: #FEF3C7; color: #B45309; }
.cf-hr-risiko-card.damage .cf-hr-risiko-icon { background: #FEE2E2; color: #DC2626; }
.cf-hr-risiko-card.audit  .cf-hr-risiko-icon { background: var(--blue-soft); color: var(--blue); }
.cf-hr-risiko-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.cf-hr-risiko-text  { font-size: 14px; color: var(--mute); line-height: 1.65; }
@media (max-width: 768px) { .cf-hr-risiken { grid-template-columns: 1fr; } }

/* ── BODENTYPEN FOTO-SELEKTOR ── */
.cf-hr-boden-selector {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
  margin-bottom: 16px;
}
.cf-hr-boden-card {
  border: none; padding: 0; cursor: pointer; text-align: left;
  border-radius: 14px; overflow: hidden;
  outline: 2.5px solid transparent;
  transition: outline-color .2s;
  background: var(--blue-navy);
  user-select: none;
}
.cf-hr-boden-card:hover { outline-color: var(--accent); }
.cf-hr-boden-card.active { outline-color: var(--blue); }
.cf-hr-boden-card-img {
  height: 148px; position: relative;
  background-size: cover; background-position: center;
  background-color: var(--blue-navy);
}
.cf-hr-boden-card-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 25%, rgba(0,0,0,.72) 100%);
  transition: opacity .2s;
}
.cf-hr-boden-card.active .cf-hr-boden-card-img::after { opacity: .6; }
.cf-hr-boden-card-name {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 1;
  padding: 10px 12px;
  color: #fff; font-size: 12px; font-weight: 700; line-height: 1.3;
  display: flex; align-items: center; gap: 7px;
}
.cf-hr-boden-card-name i { font-size: 13px; opacity: .8; flex-shrink: 0; }
.cf-hr-boden-card-bar {
  height: 3px; background: transparent;
  transition: background .2s;
}
.cf-hr-boden-card.active .cf-hr-boden-card-bar { background: var(--blue); }
/* Panel (info below selector) */
.cf-hr-boden-panel { display: none; background: var(--blue-navy); border-radius: 20px; padding: 36px 40px; }
.cf-hr-boden-panel.active { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
.cf-hr-boden-col-label { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 14px; }
.cf-hr-boden-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.cf-hr-boden-tag-warn { background: rgba(245,158,11,.15); color: #FCD34D; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.cf-hr-boden-tag-method { background: rgba(16,64,160,.35); color: #93C5FD; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid rgba(16,64,160,.6); }
.cf-hr-boden-note { font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.65; }
@media (max-width: 900px) {
  .cf-hr-boden-selector { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .cf-hr-boden-panel.active { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 500px) {
  .cf-hr-boden-selector { grid-template-columns: repeat(2, 1fr); }
}

/* ── BRANCHEN ── */
.cf-hr-branchen { display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; }
.cf-hr-branche-card { background: #fff; border-radius: 16px; padding: 24px 18px; border: 1.5px solid var(--line); text-align: center; transition: border-color .2s, transform .2s; }
.cf-hr-branche-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.cf-hr-branche-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--blue-soft); color: var(--blue); font-size: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.cf-hr-branche-title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 8px; line-height: 1.3; }
.cf-hr-branche-sub { font-size: 12px; color: var(--mute); line-height: 1.55; }
@media (max-width: 1024px) { .cf-hr-branchen { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 600px)  { .cf-hr-branchen { grid-template-columns: repeat(2,1fr); } }

/* ── ABLAUF ── */
.cf-hr-ablauf-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; position: relative; }
.cf-hr-ablauf-steps::before { content: ''; position: absolute; top: 32px; left: 12%; right: 12%; height: 2px; background: var(--line); z-index: 0; }
.cf-hr-ablauf-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; position: relative; z-index: 1; }
.cf-hr-ablauf-num { width: 64px; height: 64px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 22px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: 'Outfit', sans-serif; box-shadow: 0 4px 16px rgba(16,64,160,.30); flex-shrink: 0; }
.cf-hr-ablauf-step-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.cf-hr-ablauf-step-desc { font-size: 13px; color: var(--mute); line-height: 1.6; }
@media (max-width: 768px) {
  .cf-hr-ablauf-steps { grid-template-columns: 1fr; }
  .cf-hr-ablauf-steps::before { display: none; }
  .cf-hr-ablauf-step { flex-direction: row; text-align: left; align-items: flex-start; }
}

/* === GRÜNPFLEGE — JAHRESPLAN cf-gp-* === */
.cf-gp-jahresplan { display: grid; grid-template-columns: repeat(4,1fr); }
.cf-gp-saison-card { padding: 36px 28px; border-right: 1px solid var(--line); }
.cf-gp-saison-card:last-child { border-right: none; }
.cf-gp-saison-card[data-season="fruehling"] { --sc: #059669; --ss: #D1FAE5; }
.cf-gp-saison-card[data-season="sommer"]    { --sc: #D97706; --ss: #FEF3C7; }
.cf-gp-saison-card[data-season="herbst"]    { --sc: #EA580C; --ss: #FFEDD5; }
.cf-gp-saison-card[data-season="winter"]    { --sc: #3B82F6; --ss: #DBEAFE; }
.cf-gp-saison-pill { display: inline-block; background: var(--ss); color: var(--sc); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: 5px 13px; border-radius: 999px; margin-bottom: 18px; }
.cf-gp-saison-title { font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.2; margin-bottom: 20px; }
.cf-gp-saison-tasks { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.cf-gp-saison-tasks li { font-size: 14px; color: var(--text); line-height: 1.45; padding-left: 18px; position: relative; }
.cf-gp-saison-tasks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--sc); }
@media (max-width: 1024px) {
  .cf-gp-jahresplan { grid-template-columns: repeat(2,1fr); }
  .cf-gp-saison-card:nth-child(2) { border-right: none; }
  .cf-gp-saison-card:nth-child(3) { border-right: 1px solid var(--line); border-top: 1px solid var(--line); }
  .cf-gp-saison-card:nth-child(4) { border-right: none; border-top: 1px solid var(--line); }
}
@media (max-width: 540px) {
  .cf-gp-jahresplan { grid-template-columns: 1fr; }
  .cf-gp-saison-card { border-right: none; border-top: 1px solid var(--line); }
  .cf-gp-saison-card:first-child { border-top: none; }
}

/* ============================================================
   KLINIKREINIGUNG cf-kk-*
   Reinigungsgruppen-Karten, Panel-Badge, Einrichtungstypen
   ============================================================ */

/* Reinigungsgruppen-Grid */
.cf-kk-normen-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 16px;
}
.cf-kk-normen-card {
  background: #fff; border-radius: 16px; padding: 28px 24px;
  border: 1.5px solid var(--line); position: relative; overflow: hidden;
}
.cf-kk-normen-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
}
.cf-kk-normen-card.rg1::before { background: var(--spring); }
.cf-kk-normen-card.rg2::before { background: var(--solar); }
.cf-kk-normen-card.rg3::before { background: #DC2626; }
.cf-kk-normen-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 12px;
}
.cf-kk-normen-card.rg1 .cf-kk-normen-badge { color: var(--spring); }
.cf-kk-normen-card.rg2 .cf-kk-normen-badge { color: var(--solar-deep); }
.cf-kk-normen-card.rg3 .cf-kk-normen-badge { color: #DC2626; }
.cf-kk-normen-title { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.cf-kk-normen-areas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cf-kk-normen-area {
  background: var(--bg-soft); color: var(--text);
  padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 500;
}
.cf-kk-normen-note { font-size: 13px; color: var(--mute); line-height: 1.6; }
.cf-kk-normen-source { margin-top: 24px !important; font-size: 12px; color: var(--mute); }
.cf-kk-normen-freq {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 12px; font-weight: 600; color: var(--mute);
  display: flex; align-items: center; gap: 7px;
}
.cf-kk-normen-freq i { font-size: 13px; }
.cf-kk-normen-card.rg1 .cf-kk-normen-freq i { color: var(--spring); }
.cf-kk-normen-card.rg2 .cf-kk-normen-freq i { color: var(--solar-deep); }
.cf-kk-normen-card.rg3 .cf-kk-normen-freq i { color: #DC2626; }

/* Panel-Badge (Reinigungsgruppe im Bereich-Selektor) */
.cf-kk-rg-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px;
}
.cf-kk-rg-badge.rg1 { background: rgba(123,197,47,.15); color: #7BC52F; }
.cf-kk-rg-badge.rg2 { background: rgba(245,158,11,.15); color: #FCD34D; }
.cf-kk-rg-badge.rg3 { background: rgba(220,38,38,.15); color: #FCA5A5; }

@media (max-width: 768px) {
  .cf-kk-normen-grid { grid-template-columns: 1fr; }
}

/* === KLINIK HERO-TRUST (snippet-klinik-hero-trust) === */
.cf-kk-hero-trust {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 28px; margin-top: 64px; padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.cf-kk-hero-trust .item { display: flex; align-items: flex-start; gap: 14px; }
.cf-kk-hero-trust .ico {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
  background: rgba(140,205,232,.18); border: 1px solid rgba(140,205,232,.38);
  display: inline-flex; align-items: center; justify-content: center;
}
.cf-kk-hero-trust .ico svg { width: 20px; height: 20px; stroke: #8CCDE8; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.cf-kk-hero-trust .item-title { font-weight: 600; font-size: 14px; color: #fff; line-height: 1.3; }
.cf-kk-hero-trust .item-sub { font-size: 13px; color: rgba(255,255,255,.65); margin-top: 2px; line-height: 1.4; }

@media (max-width: 1024px) { .cf-kk-hero-trust { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px)  { .cf-kk-hero-trust { grid-template-columns: 1fr; gap: 20px; } }

/* === KLINIK RG-TABS & BEREICHE-PANELS (snippet-klinik-bereiche) === */
.kk-rg-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 24px; }
.kk-rg-tab { background: #fff; border: 2px solid var(--line); border-radius: 16px; padding: 20px 24px; cursor: pointer; transition: border-color .2s, box-shadow .2s; text-align: left; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; }
.kk-rg-tab::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.kk-rg-tab.rg1::before { background: var(--spring); }
.kk-rg-tab.rg2::before { background: var(--solar); }
.kk-rg-tab.rg3::before { background: #DC2626; }
.kk-rg-tab.active { box-shadow: 0 4px 24px rgba(16,64,160,.14); }
.kk-rg-tab.rg1.active { border-color: var(--spring); }
.kk-rg-tab.rg2.active { border-color: var(--solar); }
.kk-rg-tab.rg3.active { border-color: #DC2626; }
.kk-rg-tab-header { display: flex; align-items: center; justify-content: space-between; }
.kk-rg-tab-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.kk-rg-tab.rg1 .kk-rg-tab-label { color: var(--spring); }
.kk-rg-tab.rg2 .kk-rg-tab-label { color: var(--solar-deep); }
.kk-rg-tab.rg3 .kk-rg-tab-label { color: #DC2626; }
.kk-rg-tab-arrow { font-size: 12px; color: var(--mute); transition: transform .2s, color .2s; }
.kk-rg-tab.active .kk-rg-tab-arrow { transform: rotate(90deg); color: var(--blue); }
.kk-rg-tab-name { font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.kk-rg-tab-areas { display: flex; flex-wrap: wrap; gap: 5px; }
.kk-rg-tab-area { font-size: 11px; background: var(--bg-soft); color: var(--mute); padding: 3px 9px; border-radius: 999px; }
.kk-rg-tab-freq { font-size: 12px; color: var(--mute); display: flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.kk-rg-tab.rg1 .kk-rg-tab-freq i { color: var(--spring); }
.kk-rg-tab.rg2 .kk-rg-tab-freq i { color: var(--solar-deep); }
.kk-rg-tab.rg3 .kk-rg-tab-freq i { color: #DC2626; }
.kk-bereiche-panel { display: none; }
.kk-bereiche-panel.active { display: block; }
.cf-hr-boden-selector.cols-2 { grid-template-columns: repeat(2,1fr); }
@media (max-width: 640px) {
  .kk-rg-tabs { grid-template-columns: 1fr; }
  .cf-hr-boden-selector.cols-2 { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════
   PFLEGEHEIMREINIGUNG  (.ph-*)
   ═══════════════════════════════════════════════════════════ */

/* ── SHARED UTILITIES (scoped to ph-* sections) ────────────── */
.ph-stat-usp .wrap,
.ph-split-section .wrap,
.ph-zones-section .wrap,
.ph-normen-section .wrap,
.ph-ablauf-section .wrap,
.ph-sparten-section .wrap,
.ph-faq-section .wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }

.ph-split-section .eyebrow,
.ph-zones-section .eyebrow,
.ph-normen-section .eyebrow,
.ph-ablauf-section .eyebrow,
.ph-sparten-section .eyebrow,
.ph-faq-section .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ph-split-section .eyebrow::before,
.ph-zones-section .eyebrow::before,
.ph-normen-section .eyebrow::before,
.ph-ablauf-section .eyebrow::before,
.ph-sparten-section .eyebrow::before,
.ph-faq-section .eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--blue); border-radius: 999px; flex-shrink: 0; }

.ph-zones-section .section-head,
.ph-normen-section .section-head,
.ph-ablauf-section .section-head,
.ph-sparten-section .section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 56px; align-items: end; }
.ph-zones-section .section-head p,
.ph-normen-section .section-head p,
.ph-ablauf-section .section-head p,
.ph-sparten-section .section-head p { font-size: 16px; color: var(--mute); max-width: 48ch; line-height: 1.65; margin: 0; }

.ph-zones-section h2 .accent,
.ph-normen-section h2 .accent,
.ph-ablauf-section h2 .accent,
.ph-sparten-section h2 .accent,
.ph-faq-section h2 .accent,
.ph-split-section h2 .accent { color: var(--accent); }

/* ── HERO TRUST ──────────────────────────────────────────── */
.ph-hero-trust-section { box-sizing: border-box; margin-top: 64px; }
.ph-hero-trust { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; max-width: 1200px; margin: 0 auto; padding-top: 36px; border-top: 1px solid rgba(255,255,255,.18); }
.ph-ht-item { display: flex; align-items: flex-start; gap: 14px; }
.ph-ht-ico { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: rgba(140,205,232,.18); border: 1px solid rgba(140,205,232,.35); display: inline-flex; align-items: center; justify-content: center; }
.ph-ht-ico svg { width: 20px; height: 20px; stroke: #8CCDE8; fill: none; }
.ph-ht-title { font-weight: 600; font-size: 14px; color: #fff; line-height: 1.3; }
.ph-ht-sub { font-size: 13px; color: rgba(255,255,255,.65); margin-top: 2px; line-height: 1.4; }
@media (max-width: 1024px) { .ph-hero-trust { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px)  { .ph-hero-trust { grid-template-columns: 1fr; gap: 20px; } .ph-hero-trust-section { padding: 0 20px; } }

/* ── STAT + USP ──────────────────────────────────────────── */
.ph-stat-usp { background: none; }
.ph-stat-row { display: flex; align-items: flex-end; gap: 28px; margin-bottom: 0; }
.ph-stat-number { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: clamp(72px,10vw,120px); line-height: 1; color: var(--blue); letter-spacing: -4px; }
.ph-stat-label-wrap { padding-bottom: 12px; }
.ph-stat-label { font-size: 18px; font-weight: 500; color: var(--ink); max-width: 28ch; line-height: 1.4; }
.ph-stat-source { font-size: 12px; color: var(--mute); margin-top: 6px; }
.ph-usp-block { background: var(--blue-navy); border-radius: 20px; padding: 48px 44px; display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; margin-top: 56px; }
.ph-usp-item { display: flex; flex-direction: column; gap: 12px; }
.ph-usp-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(140,205,232,.15); border: 1px solid rgba(140,205,232,.3); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; color: var(--accent); }
.ph-usp-item h3 { font-size: 17px; font-weight: 600; color: #fff !important; margin: 0; font-family: 'Outfit', sans-serif; }
.ph-usp-item p { font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.55; }

/* ── §36 SPLIT ───────────────────────────────────────────── */
.ph-split-section { padding: 110px 0; background: var(--bg-soft); }
.ph-split-grid { display: grid; grid-template-columns: 1fr 1fr; border-radius: 20px; overflow: hidden; box-shadow: 0 12px 48px -16px rgba(10,30,80,.18); }
.ph-split-image { min-height: 480px; position: relative; background: linear-gradient(160deg,rgba(6,26,85,.30) 0%,rgba(6,26,85,.05) 60%), url('') center/cover no-repeat; }
.ph-split-badge { position: absolute; bottom: 28px; left: 28px; right: 28px; background: rgba(6,26,85,.88); backdrop-filter: blur(8px); color: #fff; padding: 14px 18px; border-radius: 12px; font-size: 14px; font-weight: 500; line-height: 1.4; border-left: 3px solid var(--accent); }
.ph-split-content { background: #fff; padding: 52px 48px; display: flex; flex-direction: column; justify-content: center; }
.ph-split-content h2 { font-size: clamp(22px,2.4vw,32px); margin-bottom: 16px; max-width: 26ch; }
.ph-split-lead { font-size: 15px; color: var(--mute); line-height: 1.65; max-width: 48ch; margin-bottom: 32px; }
.ph-split-list { list-style: none; }
.ph-split-list li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ph-split-list li:last-child { border-bottom: none; }
.ph-split-list .ph-sico { width: 40px; height: 40px; border-radius: 10px; background: var(--blue-soft); display: inline-flex; align-items: center; justify-content: center; color: var(--blue); flex-shrink: 0; font-size: 16px; transition: background .25s, color .25s; }
.ph-split-list li:hover .ph-sico { background: var(--blue); color: #fff; }
.ph-split-list .ph-stxt { font-size: 15px; font-weight: 600; color: var(--ink); }
.ph-split-list .ph-ssub { font-size: 13px; font-weight: 400; color: var(--mute); margin-top: 2px; line-height: 1.45; }

/* ── BEREICHE ZONE-SELEKTOR ──────────────────────────────── */
.ph-zones-section { padding: 110px 0; background: var(--bg-soft); }
.ph-zones-layout { display: grid; grid-template-columns: 380px 1fr; gap: 40px; align-items: start; margin-top: 0; }
.ph-zone-list { display: flex; flex-direction: column; gap: 0; }
.ph-zone-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px 14px; border-radius: 12px; cursor: pointer; border-bottom: 1px solid var(--line); transition: background .25s; opacity: .55; }
.ph-zone-item:last-child { border-bottom: none; }
.ph-zone-item.active { background: var(--blue-soft); opacity: 1; }
.ph-zone-item:hover { opacity: 1; }
.ph-zone-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 7px; background: var(--line); display: flex; align-items: center; justify-content: center; font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 700; color: var(--blue); margin-top: 2px; transition: background .25s, color .25s; }
.ph-zone-item.active .ph-zone-num { background: var(--blue); color: #fff; }
.ph-zone-body { flex: 1; }
.ph-zone-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 16px; color: var(--ink); margin-bottom: 3px; }
.ph-zone-sub { font-size: 13px; color: var(--mute); line-height: 1.45; }
.ph-zone-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.ph-zone-tag { font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--blue); background: #fff; }
.ph-zone-panels { position: relative; }
.ph-zone-panel { display: none; }
.ph-zone-panel.active { display: block; }
.ph-zone-panel-img { width: 100%; height: 260px; object-fit: cover; border-radius: 16px 16px 0 0; display: block; }
.ph-zone-panel-info { background: #fff; border: 1px solid var(--line); border-top: none; border-radius: 0 0 16px 16px; padding: 28px 28px 24px; }
.ph-zone-panel-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 20px; }
.ph-zone-col-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-bottom: 10px; }
.ph-zone-col-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ph-zone-col-tag-req { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
.ph-zone-col-tag-method { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); border: 1px solid var(--line); }
.ph-zone-col-tag-reg { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--spring-soft); color: #4D7C0F; border: 1px solid #BBF7D0; }
.ph-zone-note { font-size: 13px; color: var(--mute); line-height: 1.65; padding-top: 16px; border-top: 1px solid var(--line); }

/* ── NORMEN 3-KARTEN ─────────────────────────────────────── */
.ph-normen-section { padding: 110px 0; background: #fff; }
.ph-normen-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 56px; }
.ph-normen-card { background: #fff; border-radius: 16px; padding: 28px 24px; border: 1.5px solid var(--line); border-left: 4px solid transparent; }
.ph-normen-card.law   { border-left-color: var(--spring); }
.ph-normen-card.krinko { border-left-color: var(--solar); }
.ph-normen-card.mdk   { border-left-color: #DC2626; }
.ph-normen-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 16px; }
.ph-normen-card.law   .ph-normen-icon { background: var(--spring-soft); color: #4D7C0F; }
.ph-normen-card.krinko .ph-normen-icon { background: var(--solar-soft); color: var(--solar-deep); }
.ph-normen-card.mdk   .ph-normen-icon { background: #FEE2E2; color: #B91C1C; }
.ph-normen-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.ph-normen-card.law   .ph-normen-label { color: #4D7C0F; }
.ph-normen-card.krinko .ph-normen-label { color: var(--solar-deep); }
.ph-normen-card.mdk   .ph-normen-label { color: #B91C1C; }
.ph-normen-title { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 10px; font-family: 'Outfit', sans-serif; }
.ph-normen-text { font-size: 13px; color: var(--mute); line-height: 1.65; }
.ph-normen-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.ph-normen-item { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: var(--bg-soft); color: var(--mute); border: 1px solid var(--line); }
.ph-normen-source { margin-top: 24px; font-size: 12px; color: var(--mute); }

/* ── FOTO BREAK ──────────────────────────────────────────── */
.ph-foto-break { position: relative; height: 480px; overflow: hidden; }
.ph-foto-break img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-foto-break-overlay { position: absolute; inset: 0; background: linear-gradient(105deg,rgba(6,26,85,.82) 0%,rgba(16,64,160,.55) 60%,transparent 100%); display: flex; align-items: center; }
.ph-foto-break-content { padding: 0 72px; max-width: 640px; }
.ph-foto-break-content h2 { font-size: clamp(36px,5vw,60px); color: #fff; line-height: 1.1; letter-spacing: -.03em; font-family: 'Outfit', sans-serif; max-width: none; }
.ph-foto-break-content h2 span { color: var(--accent); }
.ph-foto-break-content p { font-size: 17px; color: rgba(255,255,255,.8); line-height: 1.6; margin-top: 16px; max-width: 52ch; }
@media (max-width: 768px) { .ph-foto-break { height: 360px; } .ph-foto-break-content { padding: 0 32px; } }

/* ── ABLAUF DASHED STEPS ─────────────────────────────────── */
.ph-ablauf-section { padding: 110px 0; background: var(--bg-soft); }
.ph-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; position: relative; margin-top: 60px; }
.ph-steps::before { content: ""; position: absolute; top: 23px; left: 5%; right: 5%; height: 1px; background: repeating-linear-gradient(to right,var(--line) 0,var(--line) 6px,transparent 6px,transparent 12px); z-index: 0; }
.ph-step { padding: 0 20px; position: relative; z-index: 1; }
.ph-step-num { width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); color: var(--blue); font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 24px; position: relative; z-index: 2; box-shadow: 0 0 0 6px var(--bg-soft); }
.ph-step:first-child .ph-step-num { background: var(--blue); color: #fff; }
.ph-step h3 { font-size: 17px; margin-bottom: 10px; font-family: 'Outfit', sans-serif; font-weight: 600; color: var(--ink); }
.ph-step p { font-size: 14px; color: var(--text); line-height: 1.6; max-width: 28ch; }

/* ── EINRICHTUNGSTYPEN SPARTEN ───────────────────────────── */
.ph-sparten-section { padding: 110px 0; background: #fff; }
.ph-sparten-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; }
.ph-sp-card { border-radius: 18px; padding: 36px 32px; border: 1.5px solid var(--line); border-left: 4px solid transparent; }
.ph-sp-card.wohnpflege { border-left-color: var(--spring); }
.ph-sp-card.spezial    { border-left-color: var(--solar); }
.ph-sp-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 20px; padding: 4px 12px; margin-bottom: 20px; }
.ph-sp-card.wohnpflege .ph-sp-tag { background: var(--spring-soft); color: #4a7d15; }
.ph-sp-card.spezial    .ph-sp-tag { background: var(--solar-soft); color: var(--solar-deep); }
.ph-sp-card h3 { font-size: 20px; margin-bottom: 16px; color: var(--ink); font-family: 'Outfit', sans-serif; font-weight: 600; }
.ph-sp-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.ph-sp-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--text); line-height: 1.45; }
.ph-sp-check { flex-shrink: 0; margin-top: 1px; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.ph-sp-card.wohnpflege .ph-sp-check { background: var(--spring); color: #fff; }
.ph-sp-card.spezial    .ph-sp-check { background: var(--solar); color: #fff; }
.ph-sp-txt strong { display: block; font-weight: 600; color: var(--ink); font-size: 15px; margin-bottom: 2px; }
.ph-sp-txt span { font-size: 13px; color: var(--mute); }

/* ── FAQ 2-SPALTEN ───────────────────────────────────────── */
.ph-faq-section { padding: 110px 0; background: var(--bg-soft); }
.ph-faq-grid { display: grid; grid-template-columns: 1fr 1.8fr; gap: 80px; align-items: start; }
.ph-faq-left h2 { max-width: 18ch; margin-bottom: 16px; }
.ph-faq-lead { font-size: 16px; color: var(--mute); line-height: 1.65; max-width: 36ch; margin-bottom: 28px; }
.ph-faq-cta-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--blue); border-bottom: 1px solid rgba(16,64,160,.3); padding-bottom: 2px; transition: border-color .2s; }
.ph-faq-cta-link:hover { border-color: var(--blue); }
.ph-faq-right details { border-bottom: 1px solid var(--line); }
.ph-faq-right details:last-child { border-bottom: none; }
.ph-faq-right summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 17px; color: var(--ink); cursor: pointer; list-style: none; user-select: none; transition: color .2s; }
.ph-faq-right summary::-webkit-details-marker { display: none; }
.ph-faq-right summary:hover { color: var(--blue); }
.ph-faq-right summary .plus { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--blue-soft); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--blue); line-height: 1; transition: transform .3s, background .2s; }
.ph-faq-right details[open] summary .plus { transform: rotate(45deg); background: var(--blue); color: #fff; }
.ph-faq-right details p { padding: 0 0 22px; font-size: 15px; color: var(--text); line-height: 1.7; max-width: 64ch; }

/* ── RESPONSIVE PFLEGEHEIM ───────────────────────────────── */
@media (max-width: 1024px) {
  .ph-split-grid { grid-template-columns: 1fr; }
  .ph-split-image { min-height: 300px; }
  .ph-zones-layout { grid-template-columns: 1fr; }
  .ph-zone-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ph-zone-item { border-radius: 10px; border: 1px solid var(--line) !important; }
  .ph-normen-grid { grid-template-columns: 1fr 1fr; }
  .ph-steps { grid-template-columns: 1fr 1fr; gap: 36px 16px; }
  .ph-steps::before { display: none; }
  .ph-sparten-grid { grid-template-columns: 1fr; }
  .ph-faq-grid { grid-template-columns: 1fr; gap: 40px; }
  .ph-usp-block { grid-template-columns: 1fr; gap: 24px; padding: 32px 24px; }
  .ph-zones-section .section-head,
  .ph-normen-section .section-head,
  .ph-ablauf-section .section-head,
  .ph-sparten-section .section-head { grid-template-columns: 1fr; gap: 20px; }
  .ph-stat-usp .wrap,
  .ph-split-section .wrap,
  .ph-zones-section .wrap,
  .ph-normen-section .wrap,
  .ph-ablauf-section .wrap,
  .ph-sparten-section .wrap,
  .ph-faq-section .wrap { padding: 0 24px; }
}
@media (max-width: 640px) {
  .ph-stat-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ph-zone-list { grid-template-columns: 1fr; }
  .ph-normen-grid { grid-template-columns: 1fr; }
  .ph-steps { grid-template-columns: 1fr; }
  .ph-zone-panel-cols { grid-template-columns: 1fr; }
  .ph-stat-usp .wrap,
  .ph-split-section .wrap,
  .ph-zones-section .wrap,
  .ph-normen-section .wrap,
  .ph-ablauf-section .wrap,
  .ph-sparten-section .wrap,
  .ph-faq-section .wrap { padding: 0 20px; }
}


/* ════════════════════════════════════════════════════════
   SCHULREINIGUNG — sk-* KOMPONENTEN
   ════════════════════════════════════════════════════════ */

/* ── Hero Trust ── */
.sk-hero-trust-section { box-sizing: border-box; margin-top: 64px; }
.sk-hero-trust { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; padding-top: 36px; border-top: 1px solid rgba(255,255,255,.18); }
.sk-ht-item { display: flex; align-items: flex-start; gap: 14px; }
.sk-ht-ico { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: rgba(140,205,232,.18); border: 1px solid rgba(140,205,232,.35); display: inline-flex; align-items: center; justify-content: center; }
.sk-ht-ico svg { width: 20px; height: 20px; stroke: #8CCDE8; fill: none; }
.sk-ht-title { font-weight: 600; font-size: 14px; color: #fff; line-height: 1.3; }
.sk-ht-sub { font-size: 13px; color: rgba(255,255,255,.65); margin-top: 2px; line-height: 1.4; }

/* ── Keim-Fakten ── */
.sk-kf-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; overflow: hidden; }
.sk-kf-card { padding: 52px 44px; position: relative; border-right: 1px solid rgba(255,255,255,.1); background: var(--blue-navy); }
.sk-kf-card:last-child { border-right: none; }
.sk-kf-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #8CCDE8, transparent); }
.sk-kf-card:nth-child(2)::before { background: linear-gradient(90deg, #7BC52F, transparent); }
.sk-kf-card:nth-child(3)::before { background: linear-gradient(90deg, #F59E0B, transparent); }
.sk-kf-num { font-family: 'Outfit', sans-serif; font-size: clamp(56px, 7vw, 88px); font-weight: 700; line-height: 1; color: #fff; letter-spacing: -3px; }
.sk-kf-unit { font-size: 15px; font-weight: 600; color: #8CCDE8; text-transform: uppercase; letter-spacing: .06em; margin-top: 6px; }
.sk-kf-card:nth-child(2) .sk-kf-unit { color: #7BC52F; }
.sk-kf-card:nth-child(3) .sk-kf-unit { color: #F59E0B; }
.sk-kf-desc { font-size: 16px; color: rgba(255,255,255,.8); margin-top: 20px; line-height: 1.55; font-weight: 500; }
.sk-kf-compare { font-size: 13px; color: rgba(255,255,255,.42); margin-top: 10px; line-height: 1.6; border-top: 1px solid rgba(255,255,255,.08); padding-top: 12px; }


/* ── Split ── */
.sk-split-grid { display: grid; grid-template-columns: 1fr 1fr; border-radius: 20px; overflow: hidden; box-shadow: 0 12px 48px -16px rgba(10,30,80,.18); }
.sk-split-image { background: center/cover no-repeat; min-height: 480px; position: relative; }
.sk-split-badge { position: absolute; bottom: 28px; left: 28px; right: 28px; background: rgba(6,26,85,.88); backdrop-filter: blur(8px); color: #fff; padding: 14px 18px; border-radius: 12px; font-size: 14px; font-weight: 500; line-height: 1.4; border-left: 3px solid #8CCDE8; }
.sk-split-content { background: #fff; padding: 52px 48px; display: flex; flex-direction: column; justify-content: center; }
.sk-split-content h2 { font-size: clamp(22px, 2.4vw, 32px); margin-bottom: 16px; max-width: 26ch; }
.sk-split-lead { font-size: 15px; color: var(--mute); line-height: 1.65; max-width: 48ch; margin-bottom: 32px; }
.sk-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--blue); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .12em; }
.sk-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--accent); flex-shrink: 0; }
.sk-ferien-badge { display: inline-flex; align-items: center; gap: 10px; background: #EEF8DC; color: #4a7c10; border: 1px solid #bbf7d0; border-radius: 12px; padding: 10px 16px; font-size: 13px; font-weight: 600; margin-bottom: 24px; }
.sk-ferien-badge svg { width: 16px; height: 16px; stroke: #4a7c10; fill: none; stroke-width: 2; }
.sk-split-list { list-style: none; }
.sk-split-list li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.sk-split-list li:last-child { border-bottom: none; }
.sk-sico { width: 40px; height: 40px; border-radius: 10px; background: var(--blue-soft); display: inline-flex; align-items: center; justify-content: center; color: var(--blue); flex-shrink: 0; font-size: 16px; transition: background .25s, color .25s; }
.sk-split-list li:hover .sk-sico { background: var(--blue); color: #fff; }
.sk-stxt { font-size: 15px; font-weight: 600; color: var(--ink); }
.sk-ssub { font-size: 13px; font-weight: 400; color: var(--mute); margin-top: 2px; line-height: 1.45; }

/* ── Bereiche/Zonen ── */
.sk-zones-layout { display: grid; grid-template-columns: 380px 1fr; gap: 40px; align-items: start; margin-top: 0; }
.sk-zone-list { display: flex; flex-direction: column; gap: 0; }
.sk-zone-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px 14px; border-radius: 12px; cursor: pointer; border-bottom: 1px solid var(--line); transition: background .25s; opacity: .55; }
.sk-zone-item:last-child { border-bottom: none; }
.sk-zone-item.active { background: var(--blue-soft); opacity: 1; }
.sk-zone-item:hover { opacity: 1; }
.sk-zone-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 7px; background: var(--line); display: flex; align-items: center; justify-content: center; font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 700; color: var(--blue); margin-top: 2px; transition: background .25s, color .25s; }
.sk-zone-item.active .sk-zone-num { background: var(--blue); color: #fff; }
.sk-zone-body { flex: 1; }
.sk-zone-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 16px; color: var(--ink); margin-bottom: 3px; }
.sk-zone-sub { font-size: 13px; color: var(--mute); line-height: 1.45; }
.sk-zone-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.sk-zone-tag { font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--blue); background: #fff; }
.sk-zone-panels { position: relative; }
.sk-zone-panel { display: none; }
.sk-zone-panel.active { display: block; }
.sk-zone-panel-img { width: 100%; height: 260px; object-fit: cover; border-radius: 16px 16px 0 0; display: block; }
.sk-zone-panel-info { background: #fff; border: 1px solid var(--line); border-top: none; border-radius: 0 0 16px 16px; padding: 28px 28px 24px; }
.sk-zone-panel-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 20px; }
.sk-zone-col-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-bottom: 10px; }
.sk-zone-col-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-zone-col-tag-req { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
.sk-zone-col-tag-method { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); border: 1px solid var(--line); }
.sk-zone-col-tag-reg { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: #EEF8DC; color: #4D7C0F; border: 1px solid #BBF7D0; }
.sk-zone-note { font-size: 13px; color: var(--mute); line-height: 1.65; padding-top: 16px; border-top: 1px solid var(--line); }

/* ── Foto Break ── */
.sk-foto-break { position: relative; height: 480px; overflow: hidden; }
.sk-foto-break img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-foto-break-overlay { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(6,26,85,.84) 0%, rgba(16,64,160,.56) 55%, transparent 100%); display: flex; align-items: center; }
.sk-foto-break-content { padding: 0 72px; max-width: 640px; }
.sk-foto-break-content h2 { font-family: 'Outfit', sans-serif; font-size: clamp(36px, 5vw, 60px); color: #fff; line-height: 1.1; letter-spacing: -.03em; font-weight: 600; max-width: none; }
.sk-foto-break-content h2 span { color: #8CCDE8; }
.sk-foto-break-content p { font-size: 17px; color: rgba(255,255,255,.8); line-height: 1.6; margin-top: 16px; max-width: 52ch; }

/* ── FAQ ── */
.sk-faq-right details { border-bottom: 1px solid var(--line); }
.sk-faq-right details:last-child { border-bottom: none; }
.sk-faq-right summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 17px; color: var(--ink); cursor: pointer; list-style: none; user-select: none; transition: color .2s; }
.sk-faq-right summary::-webkit-details-marker { display: none; }
.sk-faq-right summary:hover { color: var(--blue); }
.sk-faq-right summary .sk-plus { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--blue-soft); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--blue); line-height: 1; transition: transform .3s, background .2s; }
.sk-faq-right details[open] summary .sk-plus { transform: rotate(45deg); background: var(--blue); color: #fff; }
.sk-faq-right details p { padding: 0 0 22px; font-size: 15px; color: var(--text); line-height: 1.7; max-width: 64ch; }

/* ── Responsive sk-* ── */
@media (max-width: 1024px) {
  .sk-hero-trust { grid-template-columns: repeat(2,1fr); }
  .sk-kf-grid { grid-template-columns: 1fr; }
  .sk-kf-card { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); }
  .sk-kf-card:last-child { border-bottom: none; }
  .sk-split-grid { grid-template-columns: 1fr; }
  .sk-split-image { min-height: 300px; }
  .sk-zones-layout { grid-template-columns: 1fr; }
  .sk-zone-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .sk-zone-item { border-radius: 10px; border: 1px solid var(--line); }
}
@media (max-width: 768px) {
  .sk-kf-card { padding: 36px 28px; }
  .sk-foto-break { height: 360px; }
  .sk-foto-break-content { padding: 0 32px; }
  .sk-zone-list { grid-template-columns: 1fr; }
  .sk-zone-panel-cols { grid-template-columns: 1fr; }
  .sk-split-content { padding: 36px 28px; }
}
@media (max-width: 640px) {
  .sk-hero-trust { grid-template-columns: 1fr; gap: 20px; }
  .sk-foto-break { height: 300px; }
  .sk-foto-break-content { padding: 0 24px; }
}

/* ════════════════════════════════════════════════
   sk-tplan — Schulreinigung Tagesplan
   snippet-sk-tagesplan.html
════════════════════════════════════════════════ */
.sk-mode-switcher {
  display: inline-flex !important; gap: 0;
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 5px; margin-bottom: 40px;
  width: auto !important; max-width: 100%;
}
.sk-mode-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 24px; border-radius: 10px; cursor: pointer;
  border: none; background: transparent;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 15px;
  color: var(--mute); transition: background .2s, color .2s;
}
.sk-mode-btn:hover { background: var(--bg-soft); color: var(--ink); }
.sk-mode-btn.active { background: var(--blue); color: #fff; box-shadow: 0 2px 12px -4px rgba(16,64,160,.3); }
.sk-mode-ico { font-size: 18px; }
.sk-mode-sub { font-size: 11px; font-weight: 500; opacity: .65; display: block; margin-top: 1px; }
.sk-mode-btn.active .sk-mode-sub { opacity: .75; }

.sk-mode-block { display: none; }
.sk-mode-block.active { display: block; animation: sk-fadein .3s ease; }
@keyframes sk-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.sk-tplan-tabs {
  display: flex !important; gap: 0; background: #fff;
  border-radius: 16px; padding: 6px;
  border: 1px solid var(--line);
  margin-bottom: 32px; width: fit-content !important; max-width: 100%; flex-wrap: wrap;
}
.sk-tplan-tab {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 12px 22px; border-radius: 12px; cursor: pointer;
  border: none; background: transparent;
  transition: background .2s; text-align: left; min-width: 170px;
}
.sk-tplan-tab:hover { background: var(--bg-soft); }
.sk-tplan-tab.active { background: var(--blue); }
.sk-tab-time { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 12px; color: var(--accent); letter-spacing: .04em; transition: color .2s; }
.sk-tplan-tab.active .sk-tab-time { color: rgba(140,205,232,.85); }
.sk-tab-label { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 14px; color: var(--ink); margin-top: 2px; transition: color .2s; }
.sk-tplan-tab.active .sk-tab-label { color: #fff; }
.sk-tab-sub { font-size: 11px; color: var(--mute); margin-top: 2px; transition: color .2s; }
.sk-tplan-tab.active .sk-tab-sub { color: rgba(255,255,255,.55); }

.sk-tplan-panel { display: none; }
.sk-tplan-panel.active { display: block; animation: sk-fadein .3s ease; }

.sk-tplan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sk-tplan-grid.sk-cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 700px; }

.sk-tplan-card {
  background: #fff; border-radius: 14px;
  border: 1.5px solid var(--line); padding: 22px 20px;
}
.sk-tplan-card.sk-card-red { border-left: 3px solid #EF4444; }
.sk-tplan-card.sk-card-green { border-left: 3px solid var(--spring); }

.sk-tplan-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sk-tplan-ico {
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--blue-soft); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.sk-tplan-ico.sk-ico-red { background: #FEF2F2; }
.sk-tplan-ico.sk-ico-green { background: var(--spring-soft); }
.sk-tplan-ico.sk-ico-orange { background: #FEF3C7; }

.sk-tplan-area { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 15px; color: var(--ink); }
.sk-tplan-freq { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--blue); margin-top: 2px; }
.sk-tplan-freq.sk-freq-red { color: #EF4444; }
.sk-tplan-freq.sk-freq-green { color: #4a7c10; }
.sk-tplan-freq.sk-freq-orange { color: #B45309; }

.sk-tplan-tasks { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.sk-tplan-tasks li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--text); line-height: 1.45; }
.sk-tplan-tasks li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 5px; }
.sk-tplan-tasks li.sk-li-red::before { background: #EF4444; }
.sk-tplan-tasks li.sk-li-green::before { background: var(--spring); }
.sk-tplan-tasks li.sk-li-orange::before { background: #F59E0B; }

.sk-tplan-hint {
  margin-top: 24px; padding: 14px 18px;
  background: var(--blue-navy); border-radius: 10px;
  font-size: 13.5px; color: rgba(255,255,255,.7); line-height: 1.5;
}
.sk-tplan-hint strong { color: #fff; }
.sk-tplan-hint.sk-hint-green { background: #14532d; }

@media (max-width: 860px) {
  .sk-tplan-grid, .sk-tplan-grid.sk-cols-2 { grid-template-columns: 1fr; }
  .sk-tplan-tabs { width: 100%; }
  .sk-tplan-tab { min-width: unset; flex: 1; }
  .sk-mode-switcher { width: 100%; }
  .sk-mode-btn { flex: 1; justify-content: center; }
}


/* ============================================================
   REINRAUMREINIGUNG (rr-)
   ============================================================ */

/* Anforderungen Grid */
.rr-anforderungen { background: #fff; }
.rr-anf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.rr-anf-card { border: 1.5px solid var(--line); border-radius: 18px; padding: 32px 28px; display: flex; gap: 20px; align-items: flex-start; transition: border-color .2s, box-shadow .2s; }
.rr-anf-card:hover { border-color: var(--blue); box-shadow: 0 4px 24px -8px rgba(16,64,160,.12); }
.rr-anf-ico { width: 44px; height: 44px; border-radius: 11px; background: var(--blue-soft); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.rr-anf-ico svg { width: 22px; height: 22px; stroke: var(--blue); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.rr-anf-title { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 16px; color: var(--ink); margin-bottom: 8px; }
.rr-anf-body { font-size: 14px; color: var(--mute); line-height: 1.6; }
@media (max-width: 768px) { .rr-anf-grid { grid-template-columns: 1fr; } }

/* Stat Block */
.rr-stat-block { background: var(--blue-navy); padding: 52px 0; }
.rr-stat-block-inner { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; align-items: center; }
.rr-stat-number { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: clamp(52px, 6vw, 80px); color: var(--accent); line-height: 1; letter-spacing: -.03em; }
.rr-stat-label { font-size: 15px; color: rgba(255,255,255,.55); margin-top: 8px; line-height: 1.4; }
.rr-stat-text { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.72); border-left: 2px solid rgba(140,205,232,.3); padding-left: 28px; }
.rr-stat-text strong { color: rgba(255,255,255,.92); }
.rr-stat-source { display: block; margin-top: 12px; font-size: 12px; color: rgba(255,255,255,.35); font-style: italic; }
@media (max-width: 1100px) { .rr-stat-block-inner { grid-template-columns: 1fr; gap: 32px; } }

/* Hero Definition Block */
.rr-hero-definition {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(140,205,232,.18);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 20px 24px;
  max-width: 680px;
  backdrop-filter: blur(6px);
}
.rr-hero-definition p { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.68); }
.rr-hero-definition strong { color: rgba(255,255,255,.92); font-weight: 600; }

/* Hero Trust */
.rr-hero-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 64px;
  padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.rr-hero-trust .rr-item { display: flex; align-items: flex-start; gap: 14px; }
.rr-hero-trust .rr-ico {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(140,205,232,.18);
  border: 1px solid rgba(140,205,232,.38);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rr-hero-trust .rr-ico svg { width: 20px; height: 20px; stroke: var(--accent); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.rr-hero-trust .rr-item-title { font-weight: 600; font-size: 14px; color: #fff; line-height: 1.3; }
.rr-hero-trust .rr-item-sub { font-size: 13px; color: rgba(255,255,255,.65); margin-top: 2px; line-height: 1.4; }

/* ISO Grid */
.rr-iso-section { background: var(--bg-soft); }
.rr-iso-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; }
.rr-iso-card {
  background: #fff; border: 1.5px solid var(--line);
  border-radius: 16px; padding: 28px 22px;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color .2s, box-shadow .2s;
}
.rr-iso-card:hover { border-color: var(--blue); box-shadow: 0 4px 24px -8px rgba(16,64,160,.12); }
.rr-iso-card-label { font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.rr-iso-card-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 22px; color: var(--ink); line-height: 1.1; }
.rr-iso-card-sub { font-size: 13px; color: var(--mute); font-weight: 500; line-height: 1.4; }
.rr-iso-card-divider { height: 1px; background: var(--line); }
.rr-iso-card-row { display: flex; flex-direction: column; gap: 3px; }
.rr-iso-card-row-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
.rr-iso-card-row-value { font-size: 14px; font-weight: 500; color: var(--ink); }
.rr-iso-card-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue); background: var(--blue-soft);
  border-radius: 99px; padding: 5px 12px; width: fit-content;
  margin-top: auto;
}

/* Branchen Strip */
.rr-branchen-strip {
  margin-top: 32px; padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.rr-bs-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--mute); white-space: nowrap; flex-shrink: 0; }
.rr-bs-items { display: flex; flex-wrap: wrap; gap: 10px; }
.rr-bs-item {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 500; color: var(--ink);
  background: #fff; border: 1px solid var(--line);
  border-radius: 99px; padding: 7px 14px;
  transition: border-color .2s, background .2s;
}
.rr-bs-item:hover { background: var(--blue-soft); border-color: var(--blue); }
.rr-bs-item svg { width: 15px; height: 15px; stroke: var(--blue); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Split Section */
.rr-split-section { background: #fff; }
.rr-split-grid { display: grid; grid-template-columns: 1fr 1fr; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 40px -16px rgba(10,30,80,.16); }
.rr-split-image {
  background:
    linear-gradient(160deg, rgba(6,26,85,.4) 0%, rgba(6,26,85,.1) 60%),
    url('https://images.unsplash.com/photo-1576086213369-97a306d36557?auto=format&fit=crop&w=1200&q=90') center/cover;
  min-height: 520px; position: relative;
}
.rr-img-badge {
  position: absolute; bottom: 28px; left: 28px; right: 28px;
  background: rgba(6,26,85,.84); backdrop-filter: blur(8px);
  color: #fff; padding: 16px 20px; border-radius: 12px;
  font-size: 14px; line-height: 1.5;
}
.rr-img-badge strong { display: block; font-size: 16px; margin-bottom: 4px; }
.rr-split-content { background: #fff; padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; }
.rr-split-content h2 { font-size: clamp(24px,2.4vw,34px); margin-bottom: 32px; }
.rr-split-list { list-style: none; }
.rr-split-list li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }
.rr-split-list li:last-child { border-bottom: none; }
.rr-sico { width: 36px; height: 36px; border-radius: 9px; background: var(--blue-soft); display: inline-flex; align-items: center; justify-content: center; color: var(--blue); flex-shrink: 0; }
.rr-sico svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.rr-stxt { font-size: 15px; font-weight: 500; color: var(--ink); }
.rr-stxt span { display: block; font-size: 13px; font-weight: 400; color: var(--mute); margin-top: 1px; }

/* Responsive */
@media (max-width: 1100px) { .rr-iso-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1024px) { .rr-hero-trust { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 768px) {
  .rr-split-grid { grid-template-columns: 1fr; }
  .rr-split-image { min-height: 280px; }
  .rr-split-content { padding: 36px 28px; }
  .rr-hero-trust { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) { .rr-iso-grid { grid-template-columns: 1fr; } }

/* ============================================================
   GROSSKÜCHE — Risikokette gestapelt  (.cf-risk-stack)
   Vertikal gestapelte Warnstufen-Cards, grau → gelb → rot → dunkelrot
   ============================================================ */
.cf-risk-stack { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }

.cf-risk-stack-card {
  display: flex; align-items: center; gap: 20px;
  border-radius: 16px; padding: 22px 28px;
  border: 1.5px solid transparent;
  transition: transform .2s;
}
.cf-risk-stack-card:hover { transform: translateX(4px); }
.cf-risk-stack-card.step1 { background: #F9FAFB; border-color: #E5E7EB; }
.cf-risk-stack-card.step2 { background: #FFFBEB; border-color: #FCD34D; }
.cf-risk-stack-card.step3 { background: #FEF2F2; border-color: #FCA5A5; }
.cf-risk-stack-card.step4 { background: #7F1D1D; border-color: #991B1B; }

.cf-risk-stack-num {
  font-family: 'Outfit', sans-serif; font-weight: 800;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  flex-shrink: 0; width: 32px; text-align: center;
}
.cf-risk-stack-card.step1 .cf-risk-stack-num { color: #9CA3AF; }
.cf-risk-stack-card.step2 .cf-risk-stack-num { color: #D97706; }
.cf-risk-stack-card.step3 .cf-risk-stack-num { color: #DC2626; }
.cf-risk-stack-card.step4 .cf-risk-stack-num { color: rgba(255,255,255,.5); }

.cf-risk-stack-icon {
  width: 52px; height: 52px; border-radius: 14px;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.cf-risk-stack-card.step1 .cf-risk-stack-icon { background: #F3F4F6; color: #9CA3AF; }
.cf-risk-stack-card.step1 .cf-risk-stack-icon svg { width: 22px; height: 22px; stroke: #9CA3AF; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.cf-risk-stack-card.step2 .cf-risk-stack-icon { background: #FEF3C7; color: #D97706; }
.cf-risk-stack-card.step2 .cf-risk-stack-icon svg { width: 22px; height: 22px; stroke: #D97706; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.cf-risk-stack-card.step3 .cf-risk-stack-icon { background: #FEE2E2; color: #DC2626; }
.cf-risk-stack-card.step3 .cf-risk-stack-icon svg { width: 22px; height: 22px; stroke: #DC2626; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.cf-risk-stack-card.step4 .cf-risk-stack-icon { background: rgba(255,255,255,.12); color: #fff; }
.cf-risk-stack-card.step4 .cf-risk-stack-icon svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.cf-risk-stack-text { flex: 1; }

.cf-risk-stack-title {
  font-family: 'Outfit', sans-serif; font-weight: 700;
  font-size: 15px; line-height: 1.25; margin-bottom: 4px;
}
.cf-risk-stack-card.step1 .cf-risk-stack-title { color: #374151; }
.cf-risk-stack-card.step2 .cf-risk-stack-title { color: #92400E; }
.cf-risk-stack-card.step3 .cf-risk-stack-title { color: #991B1B; }
.cf-risk-stack-card.step4 .cf-risk-stack-title { color: #fff; }

.cf-risk-stack-desc { font-size: 13.5px; line-height: 1.5; }
.cf-risk-stack-card.step1 .cf-risk-stack-desc { color: #6B7280; }
.cf-risk-stack-card.step2 .cf-risk-stack-desc { color: #B45309; }
.cf-risk-stack-card.step3 .cf-risk-stack-desc { color: #B91C1C; }
.cf-risk-stack-card.step4 .cf-risk-stack-desc { color: rgba(255,255,255,.65); }

.cf-risk-stack-arrow {
  display: flex; justify-content: center; height: 8px;
}
.cf-risk-stack-arrow svg {
  width: 18px; height: 18px; stroke: #D1D5DB; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 640px) {
  .cf-risk-stack-card { padding: 18px 20px; gap: 14px; }
  .cf-risk-stack-desc { display: none; }
  .cf-risk-stack-num { display: none; }
}

/* cf-ls-grid: Duplikat entfernt — aktiver Block weiter oben (cf-ls-card-winter) */

/* ============================================================
   sw- — Schwimmbad- & Freibadreinigung
   Alle Klassen mit Präfix sw-
   ============================================================ */

/* Hero Trust */
.sw-hero-trust-section { box-sizing: border-box; margin-top: 64px; }
.sw-hero-trust { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; padding-top: 36px; border-top: 1px solid rgba(255,255,255,.18); }
.sw-ht-item { display: flex; align-items: flex-start; gap: 14px; }
.sw-ht-ico { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: rgba(14,165,233,.18); border: 1px solid rgba(140,205,232,.35); display: inline-flex; align-items: center; justify-content: center; }
.sw-ht-ico svg { width: 20px; height: 20px; stroke: #8CCDE8; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sw-ht-title { font-weight: 600; font-size: 14px; color: #fff; line-height: 1.3; }
.sw-ht-sub { font-size: 13px; color: rgba(255,255,255,.65); margin-top: 2px; line-height: 1.4; }

/* Split */
.sw-split-grid { display: grid; grid-template-columns: 1fr 1fr; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 40px -16px rgba(10,30,80,.16); }
.sw-split-image { min-height: 560px; position: relative; background: linear-gradient(160deg, rgba(6,26,85,.45) 0%, rgba(6,26,85,.15) 60%), url('https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?auto=format&fit=crop&w=1200&q=90') center/cover; }
.sw-split-badge { position: absolute; bottom: 28px; left: 28px; right: 28px; background: rgba(6,26,85,.84); backdrop-filter: blur(8px); color: #fff; padding: 16px 20px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.sw-split-badge strong { display: block; font-size: 16px; margin-bottom: 4px; color: var(--accent); }
.sw-split-content { background: #fff; padding: 52px 48px; display: flex; flex-direction: column; justify-content: center; }
.sw-split-lead { font-size: 16px; line-height: 1.6; color: var(--mute); margin: 20px 0 32px; }
.sw-split-list { list-style: none; }
.sw-split-list li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.sw-split-list li:last-child { border-bottom: none; }
.sw-sico { width: 36px; height: 36px; border-radius: 9px; background: var(--blue-soft); display: inline-flex; align-items: center; justify-content: center; color: var(--blue); flex-shrink: 0; font-size: 15px; }
.sw-stxt { font-size: 15px; font-weight: 600; color: var(--ink); }
.sw-ssub { font-size: 13px; font-weight: 400; color: var(--mute); margin-top: 2px; line-height: 1.45; }

/* Fakten */
.sw-fakten-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border: 1px solid rgba(6,26,85,.12); border-radius: 16px; overflow: hidden; box-shadow: 0 8px 40px rgba(6,26,85,.14); }
.sw-fakten-card { padding: 28px; background: var(--blue-navy); border-right: 1px solid rgba(255,255,255,.08); }
.sw-fakten-card:last-child { border-right: none; }
.sw-fakten-ico { width: 40px; height: 40px; border-radius: 10px; background: rgba(14,165,233,.2); border: 1px solid rgba(14,165,233,.35); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; font-size: 15px; color: var(--accent); }
.sw-fakten-num { font-family: 'Outfit', sans-serif; font-size: clamp(28px,2.8vw,40px); font-weight: 600; color: #fff; letter-spacing: -.03em; line-height: 1; }
.sw-fakten-unit { font-size: 13px; font-weight: 500; color: var(--accent); margin-top: 3px; text-transform: uppercase; letter-spacing: .08em; }
.sw-fakten-desc { font-size: 14px; color: rgba(255,255,255,.75); margin-top: 10px; line-height: 1.55; }

/* Saisonplan */
.sw-phase-tabs { display: flex !important; width: fit-content !important; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 0 auto 48px; background: #fff; box-shadow: 0 2px 12px rgba(10,30,80,.07); }
.sw-phase-tab { display: flex; flex-direction: column; align-items: flex-start; padding: 18px 28px; cursor: pointer; background: none; border: none; border-right: 1px solid var(--line); font-family: 'DM Sans', sans-serif; transition: background .2s; min-width: 200px; }
.sw-phase-tab:last-child { border-right: none; }
.sw-phase-tab:hover { background: var(--bg-soft); }
.sw-phase-tab.active { background: var(--blue-navy); }
.sw-phase-tab.active .sw-tab-rhythm { color: var(--accent); }
.sw-phase-tab.active .sw-tab-title { color: #fff; }
.sw-phase-tab.active .sw-tab-sub { color: rgba(255,255,255,.6); }
.sw-tab-rhythm { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--blue); margin-bottom: 4px; }
.sw-tab-title { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.sw-tab-sub { font-size: 12px; color: var(--mute); margin-top: 3px; }
.sw-phase-panel { display: none; }
.sw-phase-panel.active { display: block; }
.sw-phase-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.sw-phase-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 28px 26px; transition: box-shadow .2s, border-color .2s; }
.sw-phase-card:hover { box-shadow: 0 6px 28px rgba(10,30,80,.1); border-color: var(--accent); }
.sw-phase-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.sw-phase-card-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--blue-soft); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--blue); flex-shrink: 0; }
.sw-phase-area { font-size: 15px; font-weight: 600; color: var(--ink); }
.sw-phase-freq { display: inline-block; margin-top: 3px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--blue); background: var(--blue-soft); border-radius: 99px; padding: 2px 8px; }
.sw-phase-tasks { list-style: none; }
.sw-phase-tasks li { font-size: 14px; color: var(--text); padding: 6px 0; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; gap: 8px; }
.sw-phase-tasks li:last-child { border-bottom: none; padding-bottom: 0; }
.sw-phase-tasks li::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 7px; }
.sw-phase-card.highlight { border-color: var(--spring); }
.sw-phase-card.highlight .sw-phase-card-ico { background: var(--spring-soft); color: var(--spring); }
.sw-phase-card.highlight .sw-phase-freq { color: var(--spring); background: var(--spring-soft); }
.sw-phase-hint { margin-top: 28px; padding: 18px 22px; background: var(--blue-navy); border-radius: 12px; color: rgba(255,255,255,.85); font-size: 14px; line-height: 1.55; display: flex; align-items: flex-start; gap: 14px; }
.sw-phase-hint svg { width: 20px; height: 20px; stroke: var(--accent); fill: none; stroke-width: 1.75; flex-shrink: 0; margin-top: 1px; }
.sw-phase-hint strong { color: #fff; }

/* Foto Break */
.sw-foto-break { position: relative; height: 420px; overflow: hidden; }
.sw-foto-break img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.6); }
.sw-foto-break-overlay { position: absolute; inset: 0; display: flex; align-items: center; background: linear-gradient(90deg, rgba(6,26,85,.75) 0%, rgba(6,26,85,.3) 60%, transparent 100%); }
.sw-foto-break-content { padding: 0 64px; max-width: 640px; }
.sw-foto-break-content h2 { font-family: 'Outfit', sans-serif; font-size: clamp(32px,3.6vw,52px); font-weight: 600; color: #fff; max-width: none; line-height: 1.1; letter-spacing: -.025em; }
.sw-foto-break-content h2 span { color: var(--accent); }
.sw-foto-break-content p { color: rgba(255,255,255,.82); font-size: 16px; margin-top: 16px; line-height: 1.6; }

/* FAQ */
.sw-faq-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 72px; align-items: start; }
.sw-faq-left h2 { font-family: 'Outfit', sans-serif; font-size: clamp(32px,3.8vw,48px); font-weight: 600; line-height: 1.1; letter-spacing: -.025em; color: var(--ink); max-width: 18ch; margin-bottom: 20px; }
.sw-faq-lead { font-size: 16px; color: var(--mute); line-height: 1.6; margin-bottom: 32px; }
.sw-faq-cta-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--blue); border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
.sw-faq-right details { border-bottom: 1px solid var(--line); padding: 20px 0; }
.sw-faq-right details:first-child { padding-top: 0; }
.sw-faq-right summary { font-size: 16px; font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.sw-faq-right summary::-webkit-details-marker { display: none; }
.sw-plus { font-size: 22px; color: var(--blue); flex-shrink: 0; transition: transform .3s; }
details[open] .sw-plus { transform: rotate(45deg); }
.sw-faq-right details p { font-size: 15px; color: var(--mute); line-height: 1.65; margin-top: 14px; }

/* Reveal */
.sw-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.sw-reveal.in { opacity: 1; transform: none; }

/* Responsive */
@media (max-width: 1024px) {
  .sw-hero-trust { grid-template-columns: repeat(2,1fr); gap: 20px; }
  .sw-phase-tabs { flex-direction: column; width: 100% !important; }
  .sw-phase-tab { border-right: none; border-bottom: 1px solid var(--line); min-width: unset; }
  .sw-phase-tab:last-child { border-bottom: none; }
}
@media (max-width: 900px) {
  .sw-split-grid { grid-template-columns: 1fr; }
  .sw-split-image { min-height: 280px; }
  .sw-split-content { padding: 40px 32px; }
  .sw-fakten-grid { grid-template-columns: 1fr; }
  .sw-fakten-card { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); }
  .sw-fakten-card:last-child { border-bottom: none; }
  .sw-phase-grid { grid-template-columns: 1fr; }
  .sw-faq-grid { grid-template-columns: 1fr; gap: 40px; }
  .sw-foto-break-content { padding: 0 32px; }
}
@media (max-width: 600px) {
  .sw-hero-trust { grid-template-columns: 1fr; }
}

/* ============================================================
   CF-DEFINITION — Standalone Definitionsblock (heller Hintergrund)
   ============================================================ */
.cf-definition {
  padding: 18px 22px;
  background: #F8FAFC;
  border-radius: 12px;
  border-left: 3px solid var(--accent, #8CCDE8);
  max-width: 64ch;
}
.cf-definition p { font-size: 14px; color: #4B5563; line-height: 1.65; margin: 0; }

/* ============================================================
   DESINFEKTIONSREINIGUNG HERO TRUST  (.cf-dht-*)
   ============================================================ */
.cf-dht-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,.18);
  font-family: 'DM Sans', system-ui, sans-serif;
}
.cf-dht-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.cf-dht-ico {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(140,205,232,.18);
  border: 1px solid rgba(140,205,232,.38);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cf-dht-ico svg { width: 20px; height: 20px; }
.cf-dht-title { font-weight: 600; font-size: 14px; color: #fff; line-height: 1.3; }
.cf-dht-sub { font-size: 13px; color: rgba(255,255,255,.65); margin-top: 2px; line-height: 1.4; }
@media (max-width: 1024px) {
  .cf-dht-wrap { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 520px) {
  .cf-dht-wrap { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================
   KEIM-INFOGRAFIK  (.cf-ki-*)
   ============================================================ */
.cf-ki-panel {
  background: #F0F4FA;
  border: 1px solid #D8E4F0;
  border-radius: 24px;
  overflow: hidden;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.cf-ki-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 40px 24px;
  border-bottom: 1px solid #D8E4F0;
  gap: 24px;
  flex-wrap: wrap;
}
.cf-ki-head-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #0A2E7A;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cf-ki-head-eyebrow::before { content: ""; width: 20px; height: 2px; background: #8CCDE8; }
.cf-ki-head-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 600;
  color: #0D1B3E;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.cf-ki-head-title span { color: #1040A0; }
.cf-ki-counter-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #E8F1FB;
  border: 1px solid #D8E4F0;
  border-radius: 16px;
  padding: 14px 28px;
  flex-shrink: 0;
}
.cf-ki-counter-num {
  font-family: 'Outfit', sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: #1040A0;
  line-height: 1;
  letter-spacing: -.02em;
}
.cf-ki-counter-label {
  font-size: 11px;
  color: #506070;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: 3px;
}
.cf-ki-rows {
  display: flex;
  flex-direction: column;
  padding: 12px 32px 20px;
}
.cf-ki-row {
  display: grid;
  grid-template-columns: 160px 1fr 72px;
  align-items: center;
  gap: 16px;
  padding: 10px 8px;
  border-radius: 8px;
  transition: background .18s;
}
.cf-ki-row:hover { background: rgba(16,64,160,.04); }
.cf-ki-row + .cf-ki-row { border-top: 1px solid #D8E4F0; }
.cf-ki-row-name { font-size: 13px; font-weight: 600; color: #0D1B3E; line-height: 1.2; white-space: nowrap; }
.cf-ki-row-sub { font-size: 11px; color: #506070; margin-top: 1px; white-space: nowrap; }
.cf-ki-track { height: 8px; background: #D8E4F0; border-radius: 999px; overflow: hidden; }
.cf-ki-bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  transition: width 1.1s cubic-bezier(.2,.7,.2,1);
}
.cf-ki-bar.risk-mittel { background: linear-gradient(90deg, #d97706, #fbbf24); }
.cf-ki-bar.risk-hoch   { background: linear-gradient(90deg, #dc2626, #f87171); }
.cf-ki-bar.risk-sh     { background: linear-gradient(90deg, #7f1d1d, #dc2626); }
.cf-ki-time { font-size: 12px; font-weight: 600; color: #0D1B3E; text-align: right; white-space: nowrap; }
.cf-ki-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 40px;
  border-top: 1px solid #D8E4F0;
  flex-wrap: wrap;
  background: #fff;
}
.cf-ki-foot-note { font-size: 12px; color: #506070; max-width: 60ch; line-height: 1.5; margin: 0; }
.cf-ki-foot-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: #1040A0;
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  text-decoration: none;
  transition: background .2s ease;
  flex-shrink: 0;
}
.cf-ki-foot-cta:hover { background: #0A2E7A; }
@media (max-width: 640px) {
  .cf-ki-row { grid-template-columns: 110px 1fr 60px; gap: 10px; }
  .cf-ki-rows { padding: 8px 16px 16px; }
  .cf-ki-head { padding: 24px 24px 18px; }
  .cf-ki-foot { padding: 16px 24px; }
  .cf-ki-counter-pill { padding: 10px 18px; }
  .cf-ki-counter-num { font-size: 28px; }
}


/* ============================================================
   TATORTREINIGUNG UNTERSEITE  (Präfix: tr-)
   ============================================================ */

/* ── 00 Sticky Phone CTA ── */
.tr-phone-sticky {
  position: fixed;
  right: 0; top: 50%;
  transform: translateY(-50%) translateX(100%);
  z-index: 200;
  display: flex; flex-direction: column; align-items: center;
  background: var(--blue);
  border-radius: 12px 0 0 12px;
  padding: 16px 12px;
  gap: 10px;
  box-shadow: -4px 0 24px rgba(10,30,80,.18);
  transition: transform .35s cubic-bezier(.4,0,.2,1), background .2s;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
}
.tr-phone-sticky.visible { transform: translateY(-50%) translateX(0); }
.tr-phone-sticky:hover { background: var(--blue-deep); text-decoration: none !important; }
.tr-phone-sticky, .tr-phone-sticky:visited, .tr-phone-sticky:focus { text-decoration: none !important; }
.tr-phone-sticky-ico {
  width: 36px; height: 36px; border-radius: 999px;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.tr-phone-sticky-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.75);
  white-space: nowrap;
}
@media (max-width: 1024px) { .tr-phone-sticky { display: none; } }

/* ── 01 Hero Trust-Streifen ── */
.tr-hero-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 52px;
  padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.tr-ht-item { display: flex; align-items: flex-start; gap: 14px; }
.tr-ht-ico {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
  background: rgba(140,205,232,.12); border: 1px solid rgba(140,205,232,.22);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--accent);
}
.tr-ht-label { font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.5; margin-top: 2px; }
.tr-ht-label strong { display: block; font-family: 'Outfit', sans-serif; font-weight: 600; color: #fff; font-size: 14px; line-height: 1.3; margin-bottom: 2px; }
@media (max-width: 1024px) { .tr-hero-trust { grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; } }
@media (max-width: 640px) { .tr-hero-trust { grid-template-columns: 1fr; } }

/* ── 02 Einsätze Grid ── */
.tr-einsaetze-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.tr-einsatz-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 28px 24px;
  display: flex; gap: 20px;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.tr-einsatz-card:hover {
  box-shadow: 0 8px 32px -8px rgba(10,30,80,.14);
  border-color: var(--accent);
}
.tr-einsatz-ico {
  flex-shrink: 0;
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--blue-soft);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--blue);
}
.tr-einsatz-body h3 { font-size: 18px; font-weight: 600; margin-bottom: 10px; color: var(--ink); letter-spacing: -.01em; }
.tr-einsatz-body p { font-size: 15px; color: var(--mute); line-height: 1.6; }
.tr-einsatz-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.tr-einsatz-tag {
  font-size: 12px; font-weight: 500; padding: 3px 10px;
  border-radius: 999px; background: var(--blue-soft);
  color: var(--blue-deep); letter-spacing: .02em;
}
@media (max-width: 1024px) { .tr-einsaetze-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) {
  .tr-einsaetze-grid { grid-template-columns: 1fr; }
  .tr-einsatz-card { flex-direction: column; }
}

/* ── 03 Empathie-Items (für Angehörige) ── */
.tr-empathie-items { display: flex; flex-direction: column; }
.tr-empathie-item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.tr-empathie-item:last-child { border-bottom: none; }
.tr-empathie-item-ico {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--accent);
  margin-top: 2px;
}
.tr-empathie-item-body strong {
  display: block; font-size: 15px; font-weight: 600;
  color: #fff; margin-bottom: 4px;
}
.tr-empathie-item-body span {
  font-size: 14px; color: rgba(255,255,255,.62); line-height: 1.55;
}

/* ── 04 Versicherungsliste + Toggle + Hinweisbox ── */
.tr-vers-list { display: flex; flex-direction: column; gap: 12px; }
.tr-vers-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: start;
  transition: box-shadow .2s, border-color .2s;
}
.tr-vers-item:hover {
  box-shadow: 0 4px 20px -4px rgba(10,30,80,.10);
  border-color: var(--accent);
}
.tr-vers-ico {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--blue-soft);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--blue); flex-shrink: 0;
}
.tr-vers-body strong { display: block; font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.tr-vers-body p { font-size: 15px; color: var(--mute); line-height: 1.6; }
.tr-vers-badge {
  flex-shrink: 0;
  font-size: 11px; font-weight: 600; padding: 3px 10px;
  border-radius: 999px; white-space: nowrap; align-self: start;
}
.tr-vers-badge.green { background: var(--spring-soft); color: #3D7A00; }
.tr-vers-badge.blue  { background: var(--blue-soft); color: var(--blue-deep); }
.tr-vers-badge.mute  { background: var(--bg-soft); color: var(--mute); border: 1px solid var(--line); }
.tr-vers-more {
  max-height: 0; overflow: hidden; transition: max-height .45s ease;
  display: flex; flex-direction: column; gap: 12px; padding-top: 0;
}
.tr-vers-more.open { max-height: 800px; padding-top: 12px; }
.tr-vers-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px;
  font-size: 14px; font-weight: 600; color: var(--blue);
  background: none; border: none; cursor: pointer;
  padding: 8px 0; transition: color .2s;
}
.tr-vers-toggle:hover { color: var(--blue-deep); }
.tr-vers-toggle i { transition: transform .3s ease; font-size: 12px; }
.tr-vers-toggle.open i { transform: rotate(180deg); }
.tr-kosten-note {
  margin-top: 20px;
  background: var(--blue-soft);
  border-left: 3px solid var(--blue);
  border-radius: 10px;
  padding: 16px 18px;
  font-size: 13px; color: var(--blue-deep); line-height: 1.55;
}
.tr-kosten-note strong { font-weight: 600; }

/* ── 05 Kosten Sidebar (Preiskarte + CTA-Karte) ── */
.tr-kosten-sidebar { display: flex; flex-direction: column; gap: 16px; }
.tr-kosten-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.tr-kosten-card-head { background: var(--blue-navy); padding: 18px 22px; }
.tr-kosten-card-head h3 { color: #fff !important; font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.tr-kosten-card-head p { font-size: 13px; color: rgba(255,255,255,.55) !important; }
.tr-kosten-ranges { padding: 6px 0; }
.tr-kosten-range {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  gap: 16px;
}
.tr-kosten-range:last-child { border-bottom: none; }
.tr-kosten-range-label { font-size: 13px; color: var(--text); line-height: 1.4; }
.tr-kosten-range-label span { display: block; font-size: 11px; color: var(--mute); margin-top: 2px; }
.tr-kosten-range-price {
  font-family: 'Outfit', sans-serif;
  font-size: 15px; font-weight: 700;
  color: var(--blue); white-space: nowrap;
}
.tr-kosten-cta-card {
  background: var(--blue);
  border-radius: 16px;
  padding: 24px 22px;
  text-align: center;
}
.tr-kosten-cta-card p { font-size: 13px; color: rgba(255,255,255,.75); line-height: 1.5; margin-bottom: 16px; }
.tr-kosten-cta-card a {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--blue-navy);
  padding: 12px 22px; border-radius: 999px;
  font-weight: 600; font-size: 14px;
  transition: background .2s;
}
.tr-kosten-cta-card a:hover { background: var(--blue-soft); }

/* ── 06 Ablauf Steps ── */
.tr-ablauf-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.tr-ablauf-steps::before {
  content: "";
  position: absolute;
  top: 36px; left: 12.5%; right: 12.5%;
  height: 1px;
  background: linear-gradient(90deg, var(--line), var(--accent) 50%, var(--line));
  z-index: 0;
}
.tr-step { padding: 0 24px; text-align: center; position: relative; z-index: 1; }
.tr-step-num {
  width: 72px; height: 72px; border-radius: 999px;
  background: var(--blue-navy); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 22px;
  margin-bottom: 24px;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--line);
  position: relative;
}
.tr-step-num::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 999px;
  border: 1px dashed rgba(140,205,232,.4);
}
.tr-step h3 { font-size: 17px; font-weight: 600; margin-bottom: 10px; color: var(--ink); }
.tr-step p { font-size: 14px; color: var(--mute); line-height: 1.6; }
.tr-step-tag {
  display: inline-block; margin-top: 14px;
  font-size: 11px; font-weight: 600; padding: 3px 10px;
  border-radius: 999px; background: var(--blue-soft);
  color: var(--blue); text-transform: uppercase; letter-spacing: .06em;
}
@media (max-width: 1024px) {
  .tr-ablauf-steps { grid-template-columns: 1fr 1fr; }
  .tr-ablauf-steps::before { display: none; }
}
@media (max-width: 768px) { .tr-ablauf-steps { grid-template-columns: 1fr; } }

/* ── 07 B2B-Bridge ── */
.tr-b2b-bridge-inner {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  max-width: 680px;
}
.tr-b2b-bridge-inner i { flex-shrink: 0; font-size: 18px; color: var(--blue); }
.tr-b2b-bridge-inner p { font-size: 15px; color: var(--mute); line-height: 1.6; }
.tr-b2b-bridge-inner p strong { color: var(--ink); font-weight: 600; }

/* ── 08 B2B Grid + Kontakt-Banner ── */
.tr-b2b-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.tr-b2b-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 24px;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.tr-b2b-card:hover {
  box-shadow: 0 8px 32px -8px rgba(10,30,80,.14);
  border-color: var(--accent);
}
.tr-b2b-card-ico {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--blue-soft);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--blue);
  margin-bottom: 20px;
}
.tr-b2b-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 12px; color: var(--ink); }
.tr-b2b-card p { font-size: 15px; color: var(--mute); line-height: 1.6; }
.tr-b2b-card ul { list-style: none; margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.tr-b2b-card ul li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; color: var(--text); line-height: 1.5;
}
.tr-b2b-card ul li i { flex-shrink: 0; color: var(--spring); margin-top: 3px; font-size: 13px; }
.tr-b2b-contact {
  margin-top: 48px;
  background: var(--blue-navy);
  border-radius: 16px;
  padding: 40px 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  flex-wrap: wrap;
}
.tr-b2b-contact-text h3 { color: #fff !important; font-size: 22px; font-weight: 600; margin-bottom: 8px; }
.tr-b2b-contact-text p { font-size: 15px; color: rgba(255,255,255,.7); max-width: 52ch; }
.tr-b2b-cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 30px; background: #fff; color: var(--blue-navy);
  border-radius: 999px; font-weight: 600; font-size: 16px;
  white-space: nowrap;
  transition: background .2s ease, transform .2s ease;
}
.tr-b2b-cta:hover { background: var(--blue-soft); transform: translateY(-1px); }
@media (max-width: 1024px) { .tr-b2b-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) {
  .tr-b2b-grid { grid-template-columns: 1fr; }
  .tr-b2b-contact { flex-direction: column; padding: 28px 24px; }
}

/* ── 09 FAQ Akkordeon ── */
.tr-faq-list { display: flex; flex-direction: column; gap: 0; }
.tr-faq-item { border-bottom: 1px solid var(--line); }
.tr-faq-item:first-child { border-top: 1px solid var(--line); }
.tr-faq-q {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 22px 0; cursor: pointer;
  font-weight: 600; font-size: 16px; color: var(--ink);
  transition: color .2s;
  list-style: none;
  user-select: none;
}
.tr-faq-q:hover { color: var(--blue); }
.tr-faq-q .tr-faq-icon {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 999px;
  background: var(--blue-soft); color: var(--blue);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; transition: background .2s, transform .3s;
}
.tr-faq-item.open .tr-faq-q .tr-faq-icon { background: var(--blue); color: #fff; transform: rotate(45deg); }
.tr-faq-a {
  font-size: 15px; color: var(--mute); line-height: 1.7;
  max-height: 0; overflow: hidden;
  transition: max-height .4s ease, padding .3s ease;
  padding: 0;
}
.tr-faq-item.open .tr-faq-a { max-height: 400px; padding-bottom: 22px; }

/* ── 10 Kontaktformular ── */
.tr-kontakt-form {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px; padding: 40px;
}
.tr-kontakt-form h3 { color: #fff; font-size: 20px; font-weight: 600; margin-bottom: 28px; }
.tr-form-note {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(140,205,232,.1); border: 1px solid rgba(140,205,232,.2);
  border-radius: 10px; padding: 14px 16px;
  margin-bottom: 24px;
  font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.5;
}
.tr-form-note i { color: var(--accent); margin-top: 1px; flex-shrink: 0; }
.tr-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.tr-form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.tr-form-field label { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.65); }
.tr-form-field input,
.tr-form-field select,
.tr-form-field textarea {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px; padding: 12px 16px;
  font-size: 15px; color: #fff; font-family: 'DM Sans', sans-serif;
  transition: border-color .2s, background .2s;
  -webkit-appearance: none;
}
.tr-form-field input::placeholder,
.tr-form-field textarea::placeholder { color: rgba(255,255,255,.32); }
.tr-form-field input:focus,
.tr-form-field select:focus,
.tr-form-field textarea:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,.12); }
.tr-form-field select option { background: var(--blue-navy); color: #fff; }
.tr-form-field textarea { resize: vertical; min-height: 100px; }
.tr-required { color: var(--accent); margin-left: 3px; }
.tr-upload-area {
  border: 1.5px dashed rgba(255,255,255,.2);
  border-radius: 10px; padding: 20px 16px; text-align: center;
  cursor: pointer; transition: border-color .2s, background .2s;
  position: relative; margin-bottom: 16px;
}
.tr-upload-area:hover, .tr-upload-area.drag-over { border-color: var(--accent); background: rgba(140,205,232,.06); }
.tr-upload-area input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
  width: 100%; height: 100%; border: none; background: none; padding: 0;
}
.tr-upload-icon { font-size: 22px; color: rgba(255,255,255,.35); margin-bottom: 8px; }
.tr-upload-area.has-files .tr-upload-icon { color: var(--accent); }
.tr-upload-label { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.5; }
.tr-upload-label strong { color: rgba(255,255,255,.8); font-weight: 600; }
.tr-upload-hint { font-size: 11px; color: rgba(255,255,255,.3); margin-top: 4px; }
.tr-upload-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; justify-content: center; }
.tr-upload-thumb { width: 52px; height: 52px; border-radius: 6px; object-fit: cover; border: 1px solid rgba(255,255,255,.15); }
.tr-upload-count { font-size: 12px; color: var(--accent); margin-top: 6px; font-weight: 500; }
.tr-form-submit {
  width: 100%; padding: 16px;
  background: var(--accent); color: var(--blue-navy);
  border: none; border-radius: 10px;
  font-size: 16px; font-weight: 700; font-family: 'DM Sans', sans-serif;
  cursor: pointer; transition: background .2s ease, transform .2s ease;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.tr-form-submit:hover { background: #A8DCEF; transform: translateY(-1px); }
.tr-form-privacy { text-align: center; font-size: 12px; color: rgba(255,255,255,.38); margin-top: 14px; }
.tr-form-privacy a { color: rgba(255,255,255,.45); text-decoration: underline; }
.tr-form-submit.loading { pointer-events: none; opacity: .7; }
.tr-form-submit .tr-btn-text { display: inline; }
.tr-form-submit .tr-btn-spinner { display: none; }
.tr-form-submit.loading .tr-btn-text { display: none; }
.tr-form-submit.loading .tr-btn-spinner { display: inline; }
.tr-form-success { display: none; text-align: center; padding: 40px 24px; }
.tr-form-success.visible { display: block; }
.tr-form-success-ico {
  width: 64px; height: 64px; border-radius: 999px;
  background: var(--spring-soft);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--spring);
  margin: 0 auto 20px;
}
.tr-form-success h3 { color: #fff; font-size: 20px; margin-bottom: 10px; }
.tr-form-success p { font-size: 15px; color: rgba(255,255,255,.7); line-height: 1.6; }
@media (max-width: 768px) {
  .tr-kontakt-form { padding: 28px 24px; }
  .tr-form-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .tr-phone-sticky { transition: none; }
  .tr-faq-a { transition: none; }
  .tr-vers-more { transition: none; }
}
.cf-definition strong { color: var(--blue, #1A2B4A); font-weight: 600; }


/* ============================================================
   MOBILES MENÜ — Slide-in Drawer (cf-mob-*)
   Nur auf Mobilgeräten aktiv (≤ 800px).
   JS: /js/cf-mob-menu.js — PHP: cfs-functions.php Section 14
   ============================================================ */

/* Auf Desktop komplett versteckt (Avada-Breakpoint: 1024px) */
@media (min-width: 1025px) {
  .cf-mob-drawer,
  .cf-mob-overlay { display: none !important; }
}

/* Scroll-Lock wenn Drawer offen */
body.cf-mob-open { overflow: hidden; }

/* Avadas natives Panel ausblenden wenn unser Drawer aktiv */
body.cf-mob-open #menu-hauptmenu { display: none !important; }

/* ── Overlay ─────────────────────────────── */
.cf-mob-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 26, 85, .55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
  z-index: 999998;
}
.cf-mob-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

/* ── Drawer ──────────────────────────────── */
.cf-mob-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 88%;
  max-width: 400px;
  background: #fff;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  z-index: 999999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: -4px 0 24px rgba(6, 26, 85, .15);
}
.cf-mob-drawer.is-open { transform: translateX(0); }

/* ── Header ──────────────────────────────── */
.cf-mob-header {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  gap: 12px;
}
.cf-mob-brand {
  flex: 1;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--blue-navy);
  text-decoration: none !important;
}
.cf-mob-brand span { color: var(--blue); }

.cf-mob-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-soft);
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--mute);
  font-size: 13px;
  flex-shrink: 0;
  transition: background .15s;
}
.cf-mob-close:hover { background: var(--line); }

/* ── Telefon-CTA ─────────────────────────── */
.cf-mob-phone-cta {
  margin: 14px 16px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--spring);
  border-radius: 12px;
  padding: 13px 16px;
  text-decoration: none !important;
  color: #fff;
  flex-shrink: 0;
}
.cf-mob-phone-cta > i:first-child { font-size: 16px; }
.cf-mob-phone-text { flex: 1; display: flex; flex-direction: column; }
.cf-mob-phone-label { font-size: 11px; opacity: .8; line-height: 1.2; }
.cf-mob-phone-num { font-size: 15px; font-weight: 700; letter-spacing: -.3px; line-height: 1.3; }
.cf-mob-phone-arrow { font-size: 11px; opacity: .6; flex-shrink: 0; }

/* ── Scrollbarer Inhaltsbereich ──────────── */
.cf-mob-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
  -webkit-overflow-scrolling: touch;
}

/* ── Abschnitts-Label ────────────────────── */
.cf-mob-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
  padding: 16px 18px 6px;
  margin: 0;
}

/* ── Accordion Trigger ───────────────────── */
.cf-mob-acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  transition: color .15s;
}
.cf-mob-acc-trigger.is-open { color: var(--blue); }

.cf-mob-acc-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 13px;
  flex-shrink: 0;
}
.cf-mob-acc-blue  { background: var(--blue-soft); color: var(--blue); }
.cf-mob-acc-green { background: #d1fae5; color: #10b981; }
.cf-mob-acc-amber { background: #fef3c7; color: #d97706; }

.cf-mob-chev {
  margin-left: auto;
  font-size: 11px;
  color: var(--mute);
  transition: transform .2s;
  flex-shrink: 0;
}
.cf-mob-acc-trigger.is-open .cf-mob-chev { transform: rotate(180deg); }

/* ── Accordion Body ──────────────────────── */
.cf-mob-acc-body { background: var(--bg-soft); }
.cf-mob-acc-body[hidden] { display: none; }

/* ── Sub-Links ───────────────────────────── */
.cf-mob-sub-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 64px;
  font-size: 13.5px;
  color: var(--text);
  text-decoration: none !important;
  border-bottom: 1px solid var(--line);
  transition: color .15s;
}
.cf-mob-sub-link > i { font-size: 12px; color: var(--mute); width: 14px; flex-shrink: 0; }
.cf-mob-sub-link:hover { color: var(--blue); }

/* ── Unternehmens-Links ──────────────────── */
.cf-mob-page-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none !important;
  border-bottom: 1px solid var(--line);
  transition: color .15s;
}
.cf-mob-page-link > i { width: 18px; font-size: 13px; color: var(--mute); flex-shrink: 0; }
.cf-mob-page-link:hover { color: var(--blue); }

/* ── Footer-CTAs ─────────────────────────── */
.cf-mob-footer {
  padding: 14px 16px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.cf-mob-footer a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
}
.cf-mob-footer-primary { background: var(--blue); color: #fff !important; }
.cf-mob-footer-primary:hover { background: var(--blue-deep); color: #fff !important; }
.cf-mob-footer-secondary {
  background: var(--bg-soft);
  color: var(--text) !important;
  border: 1.5px solid var(--line);
}
.cf-mob-footer-secondary:hover { border-color: var(--accent); }


/* ═══════════════════════════════════════════════════════════════
   BODENAUFBEREITUNG — bo-
   snippet-bo-hero-trust · snippet-bo-prozess · snippet-bo-kombi · snippet-bo-faq
═══════════════════════════════════════════════════════════════ */

/* ── Hero Trust Bar (sitzt im blauen Hero) ── */
.bo-trust {
  margin-top: 64px;
  padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,.18);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.bo-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.bo-trust-ico {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(140,205,232,.15);
  border: 1px solid rgba(140,205,232,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--accent);
}
.bo-trust-title {
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  line-height: 1.3;
}
.bo-trust-sub {
  font-size: 13px;
  color: rgba(255,255,255,.6);
  margin-top: 2px;
  line-height: 1.4;
}
@media (max-width: 900px) {
  .bo-trust { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .bo-trust { grid-template-columns: 1fr; }
}

/* ── Prozess Steps (Timeline) ─────────────── */
.bo-prozess-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
/* Verbindungslinie zwischen den Kreisen */
.bo-prozess-steps::before {
  content: '';
  position: absolute;
  top: 28px; /* Mitte der Kreise (56px / 2) */
  left: calc(12.5% + 28px); /* ab Mitte erster Kreis */
  right: calc(12.5% + 28px); /* bis Mitte letzter Kreis */
  height: 1.5px;
  background: var(--accent);
  z-index: 0;
}
.bo-step {
  position: relative;
  padding: 0 20px;
  text-align: center;
  z-index: 1;
}
.bo-step-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--accent);
  color: var(--blue);
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  position: relative;
  z-index: 1;
}
.bo-step-title {
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.2;
}
.bo-step-desc {
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.6;
}
@media (max-width: 900px) {
  .bo-prozess-steps { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .bo-prozess-steps::before { display: none; }
  .bo-step { text-align: left; padding: 0; }
  .bo-step-num { margin: 0 0 16px 0; }
}
@media (max-width: 540px) {
  .bo-prozess-steps { grid-template-columns: 1fr; }
}

/* ── Kombi Grid (Verfahren-Karten) ───────── */
.bo-kombi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.bo-kombi-card {
  border: 1.5px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: box-shadow .18s, border-color .18s;
}
.bo-kombi-card:hover {
  box-shadow: 0 6px 24px rgba(16,64,160,.08);
  border-color: var(--accent);
}
.bo-kombi-card.featured {
  grid-column: span 1;
}
.bo-kombi-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.bo-kombi-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.bo-kombi-title {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.2;
}
.bo-kombi-desc {
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.55;
  flex: 1;
}
.bo-kombi-divider {
  height: 1px;
  background: var(--line);
  margin: 18px 0 14px;
}
.bo-kombi-for-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--mute);
  margin-bottom: 8px;
}
.bo-kombi-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bo-kombi-chip {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--blue);
  background: var(--blue-soft);
  border-radius: 20px;
  padding: 3px 11px;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .bo-kombi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .bo-kombi-grid { grid-template-columns: 1fr; }
  .bo-kombi-img { height: 160px; }
}


/* Kontaktformular Mobile dunkel */

/* Haupt-Container für die dunkle Unterseite */
.fusion-layout-column.cfs-unterseite-dunkel {
    color: #ffffff !important; /* Text auf Weiß setzen für maximalen Kontrast */
}

/* Labels im Formular besser lesbar machen */
.cfs-unterseite-dunkel label {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    display: inline-block;
}

/* Hinweistexte und Pflichtfelder-Hinweis */
.cfs-unterseite-dunkel .fusion-text p, 
.cfs-unterseite-dunkel .fusion-text {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* Sommer-Aktion Box hervorheben */
.cfs-unterseite-dunkel .cf-summer-note {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-left: 4px solid #fbbd08; /* Akzentfarbe für die Aktion */
    border-radius: 4px;
    color: #ffffff !important;
    margin: 20px 0;
}

/* Eingabefelder optimieren (hellerer Hintergrund für bessere Sichtbarkeit) */
.cfs-unterseite-dunkel .fusion-form-input {
    background-color: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #d8e4f0 !important;
    padding: 12px 15px !important;
    border-radius: 8px !important;
}


/* ── Avada Blog Layout: Abstand zwischen Artikeln ── */
.fusion-blog-layout-large article,
.fusion-blog-layout-large-alternate article,
.fusion-blog-layout-medium article,
.fusion-blog-layout-medium-alternate article {
    margin: 0 !important;
    padding: 0 !important;
}


/* ============================================================
   MITARBEITER-VISITENKARTE (mw-)
   Avada fusion_person Override + Standalone-Seite paul-mueller.html
   ============================================================ */

.mw-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px 56px;
  background: var(--bg-soft);
}

.mw-card {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  font-family: 'DM Sans', sans-serif;
}

/* Header */
.mw-header {
  background: var(--bg-soft);
  border-bottom: 1.5px solid var(--line);
  padding: 28px 28px 52px;
}
.mw-header-logo {
  height: 36px;
  width: auto;
  display: block;
}

/* Avatar */
.mw-avatar-wrap {
  display: flex;
  justify-content: flex-start;
  padding: 0 28px;
  margin-top: -36px;
  position: relative;
  z-index: 2;
}
.mw-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--blue);
  border: 3px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
}
.mw-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Name & Titel */
.mw-identity {
  padding: 14px 28px 0;
}
.mw-name {
  font-family: 'Outfit', sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.mw-role {
  font-size: 14px;
  font-weight: 500;
  color: var(--blue);
  margin-top: 5px;
}
.mw-company {
  font-size: 13px;
  color: var(--mute);
  margin-top: 2px;
}

/* Trennlinie */
.mw-divider {
  height: 1px;
  background: var(--line);
  margin: 24px 28px;
}

/* Kontakt-Items */
.mw-contacts {
  padding: 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mw-contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--bg-soft);
  transition: border-color .15s, background .15s;
}
.mw-contact-item:hover {
  border-color: var(--accent);
  background: var(--blue-soft);
  text-decoration: none !important;
  text-decoration: none;
}
.mw-contact-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--blue-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-size: 14px;
  flex-shrink: 0;
}
.mw-contact-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--mute);
  line-height: 1;
}
.mw-contact-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-top: 3px;
  line-height: 1.2;
}

/* Buttons */
.mw-ctas {
  padding: 24px 28px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mw-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 20px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--blue-navy);
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  width: 100%;
  transition: background .15s;
}
.mw-btn-primary:hover { background: #A8DCEF; text-decoration: none !important; }
.mw-card a:hover, .mw-card a:active, .mw-card a:focus { text-decoration: none !important; }

.mw-btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 20px;
  border-radius: 999px;
  background: transparent;
  color: var(--blue);
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid var(--blue);
  width: 100%;
  transition: background .15s;
}
.mw-btn-secondary:hover {
  background: var(--blue-soft);
  text-decoration: none !important;
}

/* Social */
.mw-social {
  padding: 18px 28px 0;
  display: flex;
  gap: 8px;
}
.mw-social-btn {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--bg-soft);
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mute);
  font-size: 16px;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.mw-social-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
  text-decoration: none !important;
  text-decoration: none;
}

/* Footer */
.mw-footer {
  padding: 20px 28px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}
.mw-footer-copy {
  font-size: 11.5px;
  color: var(--mute);
}
.mw-footer-links {
  display: flex;
  gap: 12px;
}
.mw-footer-links a {
  font-size: 11.5px;
  color: var(--mute);
  text-decoration: none;
}
.mw-footer-links a:hover { color: var(--blue); text-decoration: none !important; }

/* Toast */
.mw-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(70px);
  visibility: hidden;
  background: var(--ink);
  color: #fff;
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: transform .28s cubic-bezier(.34,1.4,.64,1), visibility 0s .28s;
  z-index: 9999;
  pointer-events: none;
}
.mw-toast.show {
  transform: translateX(-50%) translateY(0);
  visibility: visible;
  transition: transform .28s cubic-bezier(.34,1.4,.64,1), visibility 0s 0s;
}
.mw-toast i { color: var(--accent); }

/* Avada-Kontext: Karte zentriert in Sektion */
.fusion-builder-live-editing .mw-card,
.fusion-row .mw-card {
  margin: 0 auto;
}

/* ============================================================
   BLOG ARTIKEL — Einheitliches System für alle Blogposts
   Prefix: cf-art-
   Verwendung: WordPress Custom HTML Block im Blogpost
   Gilt für: alle aktuellen und zukünftigen Blogs
   ============================================================ */

/* ── Basis-Typografie ─────────────────────────────────────── */
.cf-art-content h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 56px 0 18px;
  padding-top: 56px;
  border-top: 1px solid var(--line);
}
.cf-art-content h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
/* H3 direkt nach H2 = Untertitel/Tagline */
.cf-art-content h2 + h3 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500; font-size: 16px; letter-spacing: 0;
  color: var(--mute); margin: -10px 0 28px;
}
/* H3 im Fließtext = Abschnittsüberschrift */
.cf-art-content h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 600; font-size: 19px; letter-spacing: -.01em;
  color: var(--ink); margin: 32px 0 12px;
}
.cf-art-content p { font-size: 16px; line-height: 1.75; color: var(--text); margin-bottom: 20px; }
.cf-art-content ul, .cf-art-content ol { padding-left: 22px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
.cf-art-content li { font-size: 16px; line-height: 1.65; color: var(--text); }
.cf-art-content strong { color: var(--ink); font-weight: 600; }

/* ── Definition Box ───────────────────────────────────────── */
.cf-art-def-box { background: var(--blue-soft); border-left: 3px solid var(--blue); border-radius: 0 12px 12px 0; padding: 20px 24px; margin: 28px 0; }
.cf-art-def-label { font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.cf-art-def-box p { font-size: 15px; line-height: 1.65; color: var(--ink); margin: 0; }

/* ── Technik-Karte ────────────────────────────────────────── */
.cf-art-tech-block { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin: 28px 0; }
.cf-art-tech-head { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 20px 28px; display: flex; align-items: center; gap: 16px; }
.cf-art-tech-title { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 18px; color: var(--ink); }
.cf-art-tech-sub { font-size: 13px; color: var(--mute); margin-top: 2px; }
.cf-art-badge { margin-left: auto; flex-shrink: 0; background: var(--blue); color: #fff; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; padding: 4px 12px; border-radius: 999px; }
.cf-art-tech-body { padding: 24px 28px; }
.cf-art-tech-body > p { font-size: 15px; line-height: 1.7; color: var(--text); margin-bottom: 14px; max-width: none; }
.cf-art-tech-body > p:last-child { margin-bottom: 0; }
.cf-art-tech-body > .cf-art-pro-con:first-child { margin-top: 0; }

/* ── Spezifikations-Grid ──────────────────────────────────── */
.cf-art-specs { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 20px; }
.cf-art-spec-item { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; text-align: center; }
.cf-art-spec-val { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 18px; color: var(--blue); margin-bottom: 4px; }
.cf-art-spec-label { font-size: 12px; color: var(--mute); }

/* ── Vor-/Nachteile ───────────────────────────────────────── */
.cf-art-pro-con { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.cf-art-pro-list, .cf-art-con-list { list-style: none; border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.cf-art-pro-list { background: #f0fce8; }
.cf-art-con-list { background: #fff5f0; }
.cf-art-list-head { font-size: 12px !important; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding-left: 0 !important; }
.cf-art-list-head::before { display: none !important; }
.cf-art-pro-list .cf-art-list-head { color: #3a7c0a; }
.cf-art-con-list .cf-art-list-head { color: #b83a1c; }
.cf-art-pro-list li, .cf-art-con-list li { font-size: 14px; list-style: none; padding-left: 18px; position: relative; line-height: 1.5; }
.cf-art-pro-list li::before { content: "✓"; position: absolute; left: 0; color: #3a7c0a; font-weight: 700; }
.cf-art-con-list li::before { content: "–"; position: absolute; left: 0; color: #b83a1c; font-weight: 700; }

/* ── Tag-Zeile (optional, unter Technik-Karte) ────────────── */
.cf-art-tags-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 28px 18px; border-top: 1px solid var(--line); }
.cf-art-tag { display: inline-block; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-soft); color: var(--mute); }

/* ── Vergleichstabelle ────────────────────────────────────── */
.cf-art-table-wrap { overflow-x: auto; margin: 32px 0; border: 1px solid var(--line); border-radius: 14px; }
.cf-art-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cf-art-table th { background: var(--blue-navy); color: #fff; padding: 14px 18px; text-align: left; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 13px; }
.cf-art-table th:first-child { border-radius: 14px 0 0 0; }
.cf-art-table th:last-child { border-radius: 0 14px 0 0; }
.cf-art-table td { padding: 13px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; line-height: 1.5; }
.cf-art-table tr:last-child td { border-bottom: none; }
.cf-art-table tr:nth-child(even) td { background: var(--bg-soft); }
.cf-art-table tr:hover td { background: var(--blue-soft); }
.cf-art-table-name { font-weight: 600; color: var(--ink); }

/* Status-Tags (farbig, für kompakte Tabellenwerte) */
.cf-art-tag-high { background: #e8f8dc; color: #2d7a0a; border-color: transparent; }
.cf-art-tag-mid  { background: #fff5dc; color: #8a5a00; border-color: transparent; }
.cf-art-tag-low  { background: #fce8e8; color: #9a1c1c; border-color: transparent; }

/* Status-Pills (für Vergleichstabelle — breitere Labels) */
.cf-art-pill { display: inline-flex; font-size: 11px; font-weight: 500; padding: 2px 9px; border-radius: 999px; }
.cf-art-pill--blue   { background: var(--blue-soft); color: var(--blue-deep); }
.cf-art-pill--green  { background: var(--spring-soft); color: #3a6200; }
.cf-art-pill--yellow { background: #FEF3C7; color: #92400E; }
.cf-art-pill--grey   { background: var(--bg-soft); color: var(--mute); border: 1px solid var(--line); }

/* ── Artikel-CTA ──────────────────────────────────────────── */
.cf-art-cta { background: var(--blue-navy); color: #fff; border-radius: 20px; padding: 48px; margin-top: 56px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.cf-art-content .cf-art-cta h3 { font-family: 'Outfit', sans-serif; font-size: 26px; font-weight: 600; margin-bottom: 12px; color: #fff !important; letter-spacing: -.015em; }
.cf-art-content .cf-art-cta p { font-size: 16px; color: rgba(255,255,255,.7); margin-bottom: 28px; max-width: 50ch; margin-left: auto !important; margin-right: auto !important; text-align: center !important; }
.cf-art-cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cf-art-btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--blue-navy); border-radius: 999px; padding: 14px 28px; font-weight: 600; font-size: 15px; transition: background .2s; text-decoration: none; }
.cf-art-btn-primary:hover { background: #A8DCEF; }
.cf-art-btn-ghost { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.3); color: rgba(255,255,255,.85); border-radius: 999px; padding: 14px 28px; font-weight: 500; font-size: 15px; transition: border-color .2s; text-decoration: none; }
.cf-art-btn-ghost:hover { border-color: #fff; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .cf-art-specs { grid-template-columns: repeat(2,1fr); }
  .cf-art-pro-con { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cf-art-specs { grid-template-columns: 1fr; }
  .cf-art-cta { padding: 32px 24px; }
  .cf-art-tech-head, .cf-art-tech-body, .cf-art-tags-row { padding-left: 20px; padding-right: 20px; }

  /* Tabelle: Spalten 3 + 4 ausblenden, nur Verfahren / 2. Spalte / letzte Spalte */
  .cf-art-table th:nth-child(3),
  .cf-art-table td:nth-child(3),
  .cf-art-table th:nth-child(4),
  .cf-art-table td:nth-child(4) { display: none; }
  .cf-art-table { font-size: 13px; }
  .cf-art-table th, .cf-art-table td { padding: 10px 12px; }
  .cf-art-table-wrap { border-radius: 10px; }
  .cf-art-table th:first-child { border-radius: 10px 0 0 0; }
  .cf-art-table th:last-child { border-radius: 0 10px 0 0; }

  /* Tech-Head: Badge unter Titel umbrechen */
  .cf-art-tech-head { flex-wrap: wrap; gap: 10px; }
  .cf-art-badge { align-self: flex-start; }

  /* CTA-Buttons: untereinander stapeln */
  .cf-art-cta-btns { flex-direction: column; align-items: center; }
  .cf-art-btn-primary, .cf-art-btn-ghost { width: 100%; max-width: 320px; justify-content: center; }

  /* CTA Titel etwas kleiner */
  .cf-art-content .cf-art-cta h3 { font-size: 22px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   FAQ ACCORDION — .fusion-accordian (Avada FAQ Shortcode)
   ═══════════════════════════════════════════════════════════════ */

/* Jedes FAQ-Item */
.fusion-accordian .fusion-panel {
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  margin-bottom: 8px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color .2s, box-shadow .2s;
}
.fusion-accordian .fusion-panel:hover {
  border-color: rgba(16,64,160,.3) !important;
  box-shadow: 0 2px 10px rgba(16,64,160,.06) !important;
}

/* Header/Frage */
.fusion-accordian .panel-heading {
  background: #fff !important;
  padding: 0 !important;
  border: none !important;
}
.fusion-accordian .panel-title { margin: 0 !important; }
.fusion-accordian .panel-title a {
  padding: 18px 24px !important;
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
}
.fusion-accordian .fusion-toggle-heading {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  line-height: 1.5 !important;
}

/* Plus/Minus Icon — Kreis auf dem Wrapper, nicht auf <i> */
.fusion-accordian .fusion-toggle-icon-wrapper-sub {
  background: var(--blue-soft) !important;
  border-radius: 50% !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
/* Nur Farbe auf <i>, kein display-Override (Avada zeigt/versteckt selbst) */
.fusion-accordian .fusion-toggle-icon-wrapper-sub i {
  color: var(--blue) !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

/* Antwort */
.fusion-accordian .panel-body {
  padding: 4px 24px 22px !important;
  border-top: none !important;
  margin: 0 !important;
}
.fusion-accordian .panel-body p {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: var(--text) !important;
  margin: 0 !important;
}

/* Geöffneter Zustand: blaue Border, Icon solid blau */
.fusion-accordian .fusion-panel:has(.panel-collapse.in),
.fusion-accordian .fusion-panel:has(.panel-collapse.show) {
  border-color: var(--blue) !important;
  box-shadow: 0 2px 12px rgba(16,64,160,.08) !important;
}
/* Geöffnet: Icon-Kreis bleibt gleich, nur Border ändert sich */


/* ═══════════════════════════════════════════════════════════════
   AVADA TOC ELEMENT — Blog-Sidebar (.awb-toc-el)
   ═══════════════════════════════════════════════════════════════ */
.awb-toc-el__content {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 28px;
}
.awb-toc-el__content::before {
  content: "Inhalt";
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
}
.awb-toc-el__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.awb-toc-el__item-anchor {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--blue);
  text-decoration: none;
  display: block;
  padding: 7px 0;
  border-bottom: 1px solid rgba(16,64,160,.15);
  transition: color .2s, border-color .2s;
  line-height: 1.4;
}
.awb-toc-el__list-item:last-child .awb-toc-el__item-anchor {
  border-bottom: none;
  padding-bottom: 0;
}
.awb-toc-el__item-anchor:hover {
  color: var(--blue-deep);
  border-color: rgba(16,64,160,.35);
}


/* ============================================================
   MITARBEITER TEAM-KARTE (Über-uns-Seite, .mw-team-card)
   Rechteckiges Foto oben, Info + Icons unten
   ============================================================ */

/* Avada: Wrapper-Padding entfernen damit Karte sauber bündig sitzt */
.fusion-column-wrapper:has(.mw-team-card) {
  padding-bottom: 0 !important;
}

/* --- Karte --------------------------------------------------- */
.mw-team-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .25s, transform .25s;
}
.mw-team-card:hover {
  box-shadow: 0 8px 28px rgba(16,64,160,.10);
  transform: translateY(-3px);
}

/* --- Foto ---------------------------------------------------- */
.mw-team-avatar {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--blue-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mw-team-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Initialen-Fallback (kein Foto vorhanden) */
.mw-team-initials {
  font-family: 'Outfit', sans-serif;
  font-size: 40px;
  font-weight: 600;
  color: var(--blue);
  line-height: 1;
}

/* --- Info-Bereich -------------------------------------------- */
.mw-team-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 18px 0;
}
.mw-team-name {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1.25;
}
.mw-team-role {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--mute);
  font-weight: 500;
  line-height: 1.4;
}

/* --- Icon-Zeile ---------------------------------------------- */
.mw-team-icons {
  display: flex;
  gap: 8px;
  padding: 14px 18px 18px;
  margin-top: auto;
  border-top: 1px solid var(--line);
  margin-top: 14px;
}
.mw-team-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: var(--blue-soft);
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: var(--blue) !important;
  font-size: 13px;
  text-decoration: none !important;
  transition: background .18s, color .18s;
  cursor: pointer;
}
.mw-team-icon:hover {
  background: var(--blue) !important;
  color: #fff !important;
}

/* --- Mobil: 2-spaltig --------------------------------------- */
@media (max-width: 640px) {
  .mw-team-avatar {
    aspect-ratio: 3 / 2;
  }
}


/* ============================================================
   COMPLIANZ COOKIE-RICHTLINIE (#cmplz-document)
   ============================================================ */

/* --- Basis-Typografie ---------------------------------------- */
#cmplz-document {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  max-width: 860px;
}
#cmplz-document h2 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 48px 0 16px;
  line-height: 1.15;
}
#cmplz-document h2:first-child { margin-top: 0; }
#cmplz-document h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}
#cmplz-document p,
#cmplz-document li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
}
#cmplz-document a {
  color: var(--blue);
  text-decoration: none;
}
#cmplz-document a:hover { text-decoration: underline; }

/* --- Service-Dropdown (details/summary) ---------------------- */
#cmplz-document .cmplz-dropdown {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 10px;
  background: #fff;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
#cmplz-document .cmplz-dropdown[open] {
  border-color: var(--blue);
  box-shadow: 0 2px 16px rgba(16,64,160,.08);
}
#cmplz-document .cmplz-service-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
#cmplz-document .cmplz-service-header::-webkit-details-marker { display: none; }
#cmplz-document .cmplz-service-header h3 {
  font-size: 16px;
  font-weight: 600;
  flex: 1;
}
#cmplz-document .cmplz-service-header p {
  font-size: 13px;
  color: var(--mute);
  margin: 0;
  white-space: nowrap;
}
/* Chevron-Icon */
#cmplz-document .cmplz-service-header::after {
  content: '';
  width: 28px;
  height: 28px;
  min-width: 28px;
  background: var(--blue-soft);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231040A0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform .2s;
}
#cmplz-document .cmplz-dropdown[open] .cmplz-service-header::after {
  transform: rotate(180deg);
}
/* Service-Inhalt */
#cmplz-document .cmplz-service-description,
#cmplz-document .cmplz-sharing-data {
  padding: 0 20px 16px;
  font-size: 14px;
  color: var(--mute);
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

/* --- Cookie-Tabelle (flat-div grid) -------------------------- */
#cmplz-document .cookies-per-purpose {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 0;
  margin: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  font-size: 13px;
}
#cmplz-document .cookies-per-purpose .name-header,
#cmplz-document .cookies-per-purpose .retention-header,
#cmplz-document .cookies-per-purpose .function-header {
  background: var(--bg-soft);
  color: var(--mute);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
#cmplz-document .cookies-per-purpose .name,
#cmplz-document .cookies-per-purpose .retention,
#cmplz-document .cookies-per-purpose .function {
  padding: 9px 12px;
  color: var(--text);
  border-bottom: 1px solid rgba(216,228,240,.5);
  word-break: break-word;
}
#cmplz-document .cookies-per-purpose .purpose {
  display: none; /* Zweck bereits im Header sichtbar */
}
/* Letzte Zeile ohne Border */
#cmplz-document .cookies-per-purpose .name:last-of-type,
#cmplz-document .cookies-per-purpose .retention:last-of-type,
#cmplz-document .cookies-per-purpose .function:last-of-type {
  border-bottom: none;
}

/* Mobil: Retention-Spalte ausblenden */
@media (max-width: 600px) {
  #cmplz-document .cookies-per-purpose {
    grid-template-columns: 1fr 2fr;
  }
  #cmplz-document .cookies-per-purpose .retention-header,
  #cmplz-document .cookies-per-purpose .retention {
    display: none;
  }
}

/* --- Consent Manager ----------------------------------------- */
#cmplz-document .cmplz-manage-consent-container {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  margin: 32px 0;
}
#cmplz-document .cmplz-categories {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
#cmplz-document .cmplz-category {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
#cmplz-document .cmplz-category-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
}
#cmplz-document .cmplz-category-title {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
}
/* Toggle switch */
#cmplz-document .cmplz-category-toggle {
  position: relative;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
#cmplz-document .cmplz-category-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
#cmplz-document .cmplz-category-toggle .slider,
#cmplz-document .cmplz-category-toggle label {
  position: absolute;
  inset: 0;
  background: var(--line);
  border-radius: 22px;
  cursor: pointer;
  transition: background .2s;
}
#cmplz-document .cmplz-category-toggle input:checked + label,
#cmplz-document .cmplz-category-toggle input:checked ~ label {
  background: var(--blue);
}
#cmplz-document .cmplz-description {
  font-size: 13px;
  color: var(--mute);
  padding: 0 18px 14px;
  line-height: 1.55;
}
/* Notwendige Kategorie (always-on) */
#cmplz-document .cmplz-category.cmplz-always-active .cmplz-category-title::after {
  content: 'Erforderlich';
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--spring-soft);
  color: #3a7a00;
  border-radius: 4px;
  padding: 2px 7px;
  vertical-align: middle;
}
/* Speichern-Button */
#cmplz-document .cmplz-save-preferences {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 11px 24px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
#cmplz-document .cmplz-save-preferences:hover {
  background: var(--blue-deep);
}


/* ============================================================
   WINTERDIENST AKTIONSSEITE — Präfix: cf-wd-
   snippets/aktionen/herbst/
   ============================================================ */

/* Urgency Bar (snippet-wd-urgency-bar.html) */
.cf-wd-urgency {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  padding: 20px 32px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.cf-wd-urgency-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,.75);
  white-space: nowrap;
}
.cf-wd-urgency-item svg {
  width: 17px;
  height: 17px;
  stroke: var(--accent);
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .cf-wd-urgency { gap: 20px; flex-direction: column; align-items: flex-start; padding: 20px 22px; }
  .cf-wd-urgency-item { white-space: normal; }
}

/* Leistungen Grid (snippet-wd-leistungen-grid.html) */
.cf-wd-check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.cf-wd-check-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 24px 28px;
  border-bottom: 1px solid var(--line);
  transition: background .2s;
}
.cf-wd-check-item:nth-child(odd) { border-right: 1px solid var(--line); }
.cf-wd-check-item:nth-last-child(-n+2) { border-bottom: none; }
.cf-wd-check-item:hover { background: var(--bg-soft); }
.cf-wd-check-icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  background: #EBF2FB;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.cf-wd-check-icon svg {
  width: 15px; height: 15px;
  stroke: #4B78C8;
}
.cf-wd-check-text strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
}
.cf-wd-check-text span {
  font-size: 14px;
  color: var(--mute);
  line-height: 1.55;
}
@media (max-width: 768px) {
  .cf-wd-check-grid { grid-template-columns: 1fr; }
  .cf-wd-check-item:nth-child(odd) { border-right: none; }
  .cf-wd-check-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .cf-wd-check-item:last-child { border-bottom: none; }
}

/* Fakten Banner (snippet-wd-fakten-banner.html) */
.cf-wd-fakten {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
  padding: 28px 32px;
  text-align: center;
}
.cf-wd-fakten-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 0 24px;
}
.cf-wd-fakten-stat strong {
  font-family: 'Outfit', sans-serif;
  font-size: 36px;
  font-weight: 600;
  color: var(--blue-deep);
  line-height: 1;
  letter-spacing: -.02em;
}
.cf-wd-fakten-stat span {
  font-size: 13px;
  color: var(--mute);
  margin-top: 6px;
  line-height: 1.4;
}
.cf-wd-fakten-divider {
  width: 1px;
  height: 48px;
  background: var(--line);
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .cf-wd-fakten { flex-wrap: wrap; gap: 24px; padding: 24px 22px; }
  .cf-wd-fakten-stat { flex: 0 0 calc(50% - 12px); padding: 0; }
  .cf-wd-fakten-divider { display: none; }
}

/* Warum-Liste (snippet-wd-warum-liste.html) */
.cf-wd-warum-list {
  list-style: none;
  margin: 0; padding: 0;
}
.cf-wd-warum-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.cf-wd-warum-list li:first-child { border-top: 1px solid var(--line); }
.cf-wd-wl-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
  margin-top: 8px;
}
.cf-wd-wl-text strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.cf-wd-wl-text span {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
}


/* ============================================================
   BLOG ÜBERSICHT — Präfix: cf-blog-
   template-blog.php / 0 snippets/blog/template-blog.php
   ============================================================ */

.cf-blog-wrap { padding: 0 15%; }
@media (max-width: 960px) { .cf-blog-wrap { padding: 0 8%; } }
@media (max-width: 640px)  { .cf-blog-wrap { padding: 0 20px; } }

.cf-blog-hero {
  background: var(--blue);
  padding: 80px 0 72px;
  position: relative; overflow: hidden;
}
.cf-blog-hero .cf-blog-wrap { padding-top: 0; padding-bottom: 0; }
.cf-blog-hero::after {
  content: "";
  position: absolute; right: -80px; top: 50%;
  transform: translateY(-50%);
  width: 560px; height: 560px;
  border-radius: 50%;
  border: 1.5px solid rgba(140,205,232,.08);
  pointer-events: none;
}
.cf-blog-hero-inner { position: relative; z-index: 1; }

.cf-blog-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 20px;
}
.cf-blog-eyebrow::before {
  content: ""; display: block;
  width: 28px; height: 2px; background: var(--accent); flex-shrink: 0;
}
.cf-blog-hero h1 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(44px, 6.4vw, 88px);
  font-weight: 600; color: #fff;
  letter-spacing: -.035em; line-height: 1;
  margin-bottom: 20px; max-width: 16ch;
}
.cf-blog-hero h1 .soft { color: var(--accent); }
.cf-blog-hero-lead {
  font-size: 17px; color: rgba(255,255,255,.65);
  line-height: 1.6; max-width: 50ch;
}

/* Filter */
.cf-blog-filter {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.cf-blog-filter-inner {
  display: flex; align-items: center;
  gap: 6px; padding: 14px 0;
  overflow-x: auto; scrollbar-width: none;
}
.cf-blog-filter-inner::-webkit-scrollbar { display: none; }
.cf-filter-btn {
  flex-shrink: 0;
  padding: 7px 16px; border-radius: 999px;
  border: 1.5px solid var(--line);
  background: transparent;
  font-size: 13.5px; font-weight: 500;
  color: var(--mute); cursor: pointer;
  transition: all .15s; white-space: nowrap;
  text-decoration: none; display: inline-block;
}
.cf-filter-btn:hover { border-color: var(--blue); color: var(--blue); }
.cf-filter-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.cf-filter-count { margin-left: 5px; font-size: 11px; opacity: .6; }

/* Body */
.cf-blog-body { padding: 64px 0 100px; background: var(--bg-soft); }

/* Featured */
.cf-blog-featured { margin-bottom: 56px; }
.cf-blog-featured-card {
  display: grid; grid-template-columns: 1fr 1fr;
  background: #fff; border: 1px solid var(--line);
  border-radius: 20px; overflow: hidden;
  transition: box-shadow .2s; text-decoration: none; color: inherit;
}
.cf-blog-featured-card:hover { box-shadow: 0 8px 32px rgba(10,46,122,.08); }

/* Avada underline-Override */
.cf-blog-featured-card, .cf-blog-featured-card *,
.cf-blog-card, .cf-blog-card *,
.cf-filter-btn, .cf-page-btn, .cf-blog-cta-btn { text-decoration: none !important; }
.cf-blog-featured-card:hover, .cf-blog-featured-card:hover *,
.cf-blog-card:hover, .cf-blog-card:hover *,
.cf-blog-cta-btn:hover { text-decoration: none !important; }

.cf-blog-feat-img { position: relative; overflow: hidden; aspect-ratio: 4/3; }
.cf-blog-feat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.cf-blog-featured-card:hover .cf-blog-feat-img img { transform: scale(1.03); }
.cf-blog-feat-badge {
  position: absolute; top: 18px; left: 18px;
  background: var(--blue); color: #fff;
  font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}
.cf-blog-feat-content {
  padding: 48px 44px;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
}
.cf-post-cat {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--blue);
}
.cf-post-cat::before { content: ""; display: block; width: 18px; height: 2px; background: var(--accent); }
.cf-blog-feat-content h2 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 600; color: var(--ink);
  letter-spacing: -.02em; line-height: 1.2;
}
.cf-blog-feat-content p { font-size: 15.5px; color: var(--text); line-height: 1.6; }
.cf-post-meta { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--mute); }
.cf-post-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line); flex-shrink: 0; }
.cf-read-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--blue); transition: gap .2s;
}
.cf-read-link:hover { gap: 12px; }

/* Grid */
.cf-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cf-blog-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .2s; text-decoration: none; color: inherit;
}
.cf-blog-card:hover { box-shadow: 0 6px 24px rgba(10,46,122,.08); }
.cf-blog-card-img { overflow: hidden; aspect-ratio: 16/9; }
.cf-blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.cf-blog-card:hover .cf-blog-card-img img { transform: scale(1.04); }
.cf-blog-card-body { padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cf-blog-card-body h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 17px; font-weight: 600; color: var(--ink);
  letter-spacing: -.01em; line-height: 1.3;
}
.cf-blog-card-body p {
  font-size: 14px; color: var(--text); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.cf-blog-card-footer {
  padding: 16px 24px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
}
.cf-post-date { font-size: 12.5px; color: var(--mute); }
.cf-post-read { font-size: 12.5px; font-weight: 600; color: var(--blue); display: flex; align-items: center; gap: 5px; }

/* Leer-Zustand */
.cf-blog-empty { grid-column: 1 / -1; text-align: center; padding: 80px 20px; color: var(--mute); }
.cf-blog-empty i { font-size: 40px; margin-bottom: 16px; color: var(--line); }
.cf-blog-empty p { font-size: 16px; }

/* CTA Banner */
.cf-blog-cta { margin: 56px 0 0; }
.cf-blog-cta-card {
  background: var(--blue-navy); border-radius: 20px;
  padding: 48px 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.cf-blog-cta-text h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 22px; font-weight: 600; color: #fff;
  letter-spacing: -.02em; margin-bottom: 6px;
}
.cf-blog-cta-text p { font-size: 14.5px; color: rgba(255,255,255,.6); max-width: 48ch; }
.cf-blog-cta-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--accent); color: var(--blue-navy);
  font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 600;
  padding: 15px 28px; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0; transition: background .15s; text-decoration: none;
}
.cf-blog-cta-btn:hover { background: #A8DCEF; }

/* Pagination */
.cf-blog-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 56px; }
.cf-page-btn {
  min-width: 40px; height: 40px; padding: 0 12px;
  border-radius: 10px; border: 1.5px solid var(--line);
  background: #fff; font-size: 14px; font-weight: 500; color: var(--mute);
  text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all .15s;
}
.cf-page-btn:hover { border-color: var(--blue); color: var(--blue); }
.cf-page-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.cf-page-btn.disabled { opacity: .4; pointer-events: none; }

/* Responsive */
@media (max-width: 1024px) { .cf-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .cf-blog-featured-card { grid-template-columns: 1fr; }
  .cf-blog-feat-img { aspect-ratio: 16/9; }
  .cf-blog-feat-content { padding: 28px 24px; }
  .cf-blog-cta-card { flex-direction: column; gap: 24px; padding: 32px 24px; }
  .cf-blog-cta-btn { width: 100%; justify-content: center; }
}
@media (max-width: 640px) {
  .cf-blog-grid { grid-template-columns: 1fr; }
  .cf-blog-hero { padding: 56px 0 48px; }
  .cf-blog-body { padding: 40px 0 72px; }
}