/*
 Theme Name:   FS Fahrschule Child
 Description:  Child-Theme der Fahrschul-Websites (Marketing Fahrschule)
 Author:       Marketing Fahrschule
 Template:     hello-elementor
 Version:      1.0.25.1-D
*/

/* 1.0.13-D: Kein Google-Import mehr. Saira Condensed liegt als eigene Schrift im Font-Manager; der Import
   holte sie zusätzlich von fonts.googleapis.com, obwohl Google-Schriften in Elementor abgeschaltet sind
   (Datenschutz). Alle Schriften kommen jetzt vom eigenen Server. */


/* =========================================================
   ÜBERGABEVERSION style.css
   =========================================================

   KURZANLEITUNG FÜR DIE ÜBERGABE
   ---------------------------------------------------------
   Diese Datei ist NICHT zum freien Umbauen gedacht.
   Bitte nur in den markierten Bereichen ändern.

   DU DARFST ÄNDERN:
   1) Farben / Radius / Grundwerte in Abschnitt A
   2) Standard-Abstände in Abschnitt B
   3) Button-Optik in Abschnitt C

   BITTE NICHT ÄNDERN:
   - WCS / Terminlogik
   - Plugin-Fixes
   - Responsive Sonderregeln
   - page-id / post-id Sonderfälle
   - Header-/Hero-Fixes

   WICHTIG:
   - Nur Werte ändern, keine Klassennamen umbenennen.
   - Bei Unsicherheit lieber vorhandene Seite duplizieren.
   - Diese Datei enthält auch technische Stabilitätsregeln.
   ========================================================= */

/* =========================================================
   SYSTEM-HINWEIS
   ---------------------------------------------------------
   Diese Basisdatei soll nur systemische Regeln enthalten.
   Projekt-/kundenspezifische Farben und Feinsteuerungen
   gehören künftig in fs-design-overrides.css.
   ========================================================= */

/* =========================================================
   INHALT
   ---------------------------------------------------------
   A) ÄNDERBAR – DESIGNTOKENS
   A2) OPTIONAL – ELEMENTOR SYNC / KOMPATIBILITÄT
   B) ÄNDERBAR – STANDARD-ABSTÄNDE
   C) ÄNDERBAR – BUTTONS
   D) SYSTEM – BASIS / HEADER / HERO
   E) SYSTEM – ICONS / ICON BOXEN / SOCIAL ICONS
   F) SYSTEM – DARK SURFACES / UTILITIES / ACCORDION / PORTFOLIO / LOGO
   G) SYSTEM – FLIPBOXEN / TABELLEN / EINZELSEITEN / TABS / NAV
   H) GESCHÜTZT – PLUGIN OVERRIDES
   I) GESCHÜTZT – WCS SYSTEM
   ========================================================= */

/* =========================================================
   A) ÄNDERBAR – DESIGNTOKENS
   ========================================================= */

:root{
  /* ========================================
     HIGHLIGHT BUTTON TOKENS
  ======================================== */
  --fp-highlight-button-bg: var(--fp-accent);
  --fp-highlight-button-bg-hover: var(--fp-primary-dark);
  --fp-highlight-button-text: var(--fp-text-invert);
  --fp-highlight-button-shadow: 0 8px 20px rgba(0,0,0,.25);

  /* ======================================================
     DESIGN SYSTEM – FÜHRENDE TOKENS
     ------------------------------------------------------
     Diese Tokens sind die zentrale Andockstelle für:
     - manuelle Design-Anpassungen
     - fs-design-overrides.css
     - spätere Tool-Automation (Logo -> Palette -> Tokens)
     ====================================================== */

  /* BRAND */
  --fp-primary: #1f4fb8;
  --fp-primary-dark: #142f73;
  --fp-accent: #1f4fb8;
  --fp-icon-color: var(--fp-accent);

  /* TEXT */
  --fp-text: #07080c;
  --fp-text-invert: #ffffff;
  --fp-text-on-dark: #ffffff;
  --fp-text-on-brand: #07080c;

  /* LIGHT SURFACES */
  --fp-bg-white: #ffffff;
  --fp-bg-light: #f3f5f9;
  --fp-bg-soft: #f7f9fc;

  /* DARK SURFACES */
  --fp-surface-dark-1: #1f2023;
  --fp-surface-dark-2: #131417;
  --fp-surface-dark-3: #060709;

  /* BRAND SURFACES / EFFECT STEPS */
  --fp-brand-1: #1f4fb8;
  --fp-brand-2: rgba(31,79,184,0.85);
  --fp-brand-3: rgba(20,47,115,0.95);
  --fp-brand-strong-1: rgba(31,79,184,0.95);
  --fp-brand-strong-2: rgba(31,79,184,0.70);
  --fp-brand-strong-3: rgba(20,47,115,0.95);

  /* BORDERS */
  --fp-border-light: rgba(7,8,12,.12);
  --fp-border-soft: rgba(7,8,12,.08);
  --fp-border-soft-strong: rgba(31,79,184,.45);
  --fp-border-invert: rgba(255,255,255,.18);

  /* SHADOWS / GLOWS */
  --fp-shadow-dark-soft: rgba(0,0,0,0.45);
  --fp-shadow-dark-strong: rgba(0,0,0,0.60);
  --fp-glow-brand-soft: rgba(31,79,184,0.18);
  --fp-glow-brand-strong: rgba(31,79,184,0.30);

  /* RADIUS / SYSTEM */
  --fp-radius: 8px;
  --fp-radius-soft: 16px;
  --fp-radius-xl: 22px;
  --fp-header-h: 110px;

  /* DESIGN-SYSTEM GRADIENTS */
  --fp-gradient-brand: linear-gradient(
    90deg,
    var(--fp-primary) 0%,
    var(--fp-primary-dark) 100%
  );
  --fp-gradient-brand-reverse: linear-gradient(
    90deg,
    var(--fp-primary-dark) 0%,
    var(--fp-primary) 100%
  );
  --fp-gradient-dark-diagonal: linear-gradient(
    129deg,
    var(--fp-text) 21%,
    var(--fp-primary) 130%
  );
  --fp-gradient-brand-radial: radial-gradient(
    at center,
    var(--fp-primary) -50%,
    var(--fp-text) 100%
  );
  --fp-gradient-surface-dark: radial-gradient(
    circle at top left,
    var(--fp-surface-dark-1) 0%,
    var(--fp-surface-dark-2) 60%,
    var(--fp-surface-dark-3) 100%
  );
  --fp-gradient-brand-surface: radial-gradient(
    circle at top left,
    var(--fp-brand-1) 0%,
    var(--fp-brand-2) 65%,
    var(--fp-brand-3) 100%
  );
  --fp-gradient-brand-surface-strong: radial-gradient(
    circle at top left,
    var(--fp-brand-strong-1) 0%,
    var(--fp-brand-strong-2) 55%,
    var(--fp-brand-strong-3) 100%
  );

  /* WCS-Farben – ziehen aus dem Hauptsystem */
  --wcs-accent: var(--fp-primary);
  --wcs-accent-dark: var(--fp-primary-dark);
  --wcs-text: var(--fp-text);
  --wcs-bg: var(--fp-bg-white);
  --wcs-bg-light: var(--fp-bg-light);
  --wcs-border: var(--fp-border-light);
  --wcs-border-soft: var(--fp-border-soft);
  --wcs-radius: var(--fp-radius-soft);

  /* WHATSAPP PLUGIN – SYSTEM MAPPING */
  --mf-wa-btn-bg: var(--fp-primary);
  --mf-wa-btn-bg-hover: var(--fp-primary-dark);
  --mf-wa-btn-text: var(--fp-text-invert);

  --mf-wa-panel-bg: var(--fp-bg-white);
  --mf-wa-panel-text: var(--fp-text);
  --mf-wa-panel-muted: rgba(7,8,12,.72);
  --mf-wa-panel-border: var(--fp-border-light);

  --mf-wa-header-bg: var(--fp-primary);
  --mf-wa-header-text: var(--fp-text-invert);

  --mf-wa-card-bg: var(--fp-bg-light);
  --mf-wa-card-text: var(--fp-text);

  --mf-wa-radius: var(--fp-radius-soft);
  --mf-wa-shadow: 0 18px 40px rgba(0,0,0,.16);
}


/* ========================================
   SHADOW SYSTEM
   ----------------------------------------
   Neutrales Shadow-System für cleanere Varianten
======================================== */
:root{
  --fp-shadow-soft: 0 10px 24px rgba(0,0,0,.06);
  --fp-shadow-medium: 0 12px 28px rgba(0,0,0,.08);
  --fp-shadow-strong: 0 14px 32px rgba(0,0,0,.10);
}
/* =========================================================
   A2) OPTIONAL – ELEMENTOR SYNC / KOMPATIBILITÄT
   ========================================================= */

:root {
  /* System-Slots */
  --e-global-color-primary:   var(--fp-text);
  --e-global-color-secondary: var(--fp-text-invert);
  --e-global-color-text:      var(--fp-text);

  /* Bestehende projektbezogene Kompatibilitäts-Mappings */
  --e-global-color-7fb8d35:   var(--fp-primary);
  --e-global-color-3abdacc:   var(--fp-primary-dark);
  --e-global-color-8a4203a:   var(--fp-bg-light);
  --e-global-color-9749358:   var(--fp-bg-soft);
}

/* =========================================================
   THEME MODES
   ---------------------------------------------------------
   Body-Klasse via ACF / PHP:
   - fp-theme-standard
   - fp-theme-premium
   ========================================================= */

body.fp-theme-standard{
  --fp-primary: #1f4fb8;
  --fp-primary-dark: #142f73;
  --fp-accent: var(--fp-primary);
  --fp-icon-color: var(--fp-accent);

  --fp-text: #07080c;
  --fp-text-invert: #ffffff;
  --fp-text-on-dark: #ffffff;
  --fp-text-on-brand: #07080c;

  --fp-bg-white: #ffffff;
  --fp-bg-light: #f3f5f9;
  --fp-bg-soft: #f7f9fc;

  --fp-surface-dark-1: #1f2023;
  --fp-surface-dark-2: #131417;
  --fp-surface-dark-3: #060709;

  --fp-brand-1: var(--fp-primary);
  --fp-brand-2: rgba(31,79,184,0.85);
  --fp-brand-3: rgba(20,47,115,0.95);
  --fp-brand-strong-1: rgba(31,79,184,0.95);
  --fp-brand-strong-2: rgba(31,79,184,0.70);
  --fp-brand-strong-3: rgba(20,47,115,0.95);

  --fp-border-light: rgba(7,8,12,.12);
  --fp-border-soft: rgba(7,8,12,.08);
  --fp-border-soft-strong: rgba(31,79,184,.45);
  --fp-border-invert: rgba(255,255,255,.18);

  --fp-shadow-dark-soft: rgba(0,0,0,0.45);
  --fp-shadow-dark-strong: rgba(0,0,0,0.60);
  --fp-glow-brand-soft: rgba(31,79,184,0.18);
  --fp-glow-brand-strong: rgba(31,79,184,0.30);

  --fp-gradient-brand: linear-gradient(
    90deg,
    var(--fp-primary) 0%,
    var(--fp-primary-dark) 100%
  );
  --fp-gradient-brand-reverse: linear-gradient(
    90deg,
    var(--fp-primary-dark) 0%,
    var(--fp-primary) 100%
  );
  --fp-gradient-dark-diagonal: linear-gradient(
    129deg,
    var(--fp-text) 21%,
    var(--fp-primary) 130%
  );
  --fp-gradient-brand-radial: radial-gradient(
    at center,
    var(--fp-primary) -50%,
    var(--fp-text) 100%
  );
  --fp-gradient-surface-dark: radial-gradient(
    circle at top left,
    var(--fp-surface-dark-1) 0%,
    var(--fp-surface-dark-2) 60%,
    var(--fp-surface-dark-3) 100%
  );
  --fp-gradient-brand-surface: radial-gradient(
    circle at top left,
    var(--fp-brand-1) 0%,
    var(--fp-brand-2) 65%,
    var(--fp-brand-3) 100%
  );
  --fp-gradient-brand-surface-strong: radial-gradient(
    circle at top left,
    var(--fp-brand-strong-1) 0%,
    var(--fp-brand-strong-2) 55%,
    var(--fp-brand-strong-3) 100%
  );

  --wcs-accent: var(--fp-primary);
  --wcs-accent-dark: var(--fp-primary-dark);
  --wcs-text: var(--fp-text);
  --wcs-bg: var(--fp-bg-white);
  --wcs-bg-light: var(--fp-bg-light);
  --wcs-border: var(--fp-border-light);
  --wcs-border-soft: var(--fp-border-soft);
  --wcs-radius: var(--fp-radius-soft);

  --mf-wa-btn-bg: var(--fp-primary);
  --mf-wa-btn-bg-hover: var(--fp-primary-dark);
  --mf-wa-btn-text: var(--fp-text-invert);

  --mf-wa-panel-bg: var(--fp-bg-white);
  --mf-wa-panel-text: var(--fp-text);
  --mf-wa-panel-muted: rgba(7,8,12,.72);
  --mf-wa-panel-border: var(--fp-border-light);

  --mf-wa-header-bg: var(--fp-primary);
  --mf-wa-header-text: var(--fp-text-invert);

  --mf-wa-card-bg: var(--fp-bg-light);
  --mf-wa-card-text: var(--fp-text);
}

body.fp-theme-premium{
  --fp-primary: #e2c35a;
  --fp-primary-dark: #cfa24a;
  --fp-accent: var(--fp-primary);
  --fp-icon-color: var(--fp-accent);

  --fp-text: #080809;
  --fp-text-invert: #ffffff;
  --fp-text-on-dark: #ffffff;
  --fp-text-on-brand: #111111;

  --fp-bg-white: #080809;
  --fp-bg-light: #121315;
  --fp-bg-soft: #1b1b1d;

  --fp-surface-dark-1: #1b1b1d;
  --fp-surface-dark-2: #121315;
  --fp-surface-dark-3: #080809;

  --fp-brand-1: var(--fp-primary);
  --fp-brand-2: rgba(207,162,74,0.82);
  --fp-brand-3: rgba(166,124,33,0.95);
  --fp-brand-strong-1: rgba(226,195,90,0.95);
  --fp-brand-strong-2: rgba(207,162,74,0.72);
  --fp-brand-strong-3: rgba(166,124,33,0.95);

  --fp-border-light: rgba(255,255,255,.12);
  --fp-border-soft: rgba(255,255,255,.08);
  --fp-border-soft-strong: rgba(207,162,74,.45);
  --fp-border-invert: rgba(255,255,255,.18);

  --fp-shadow-dark-soft: rgba(0,0,0,0.45);
  --fp-shadow-dark-strong: rgba(0,0,0,0.60);
  --fp-glow-brand-soft: rgba(207,162,74,0.18);
  --fp-glow-brand-strong: rgba(207,162,74,0.30);

  --fp-gradient-brand: linear-gradient(
    90deg,
    var(--fp-primary) 0%,
    var(--fp-primary-dark) 100%
  );
  --fp-gradient-brand-reverse: linear-gradient(
    90deg,
    var(--fp-primary-dark) 0%,
    var(--fp-primary) 100%
  );
  --fp-gradient-dark-diagonal: linear-gradient(
    129deg,
    var(--fp-text) 21%,
    var(--fp-primary) 130%
  );
  --fp-gradient-brand-radial: radial-gradient(
    at center,
    var(--fp-primary) -50%,
    var(--fp-text) 100%
  );
  --fp-gradient-surface-dark: radial-gradient(
    circle at top left,
    var(--fp-surface-dark-1) 0%,
    var(--fp-surface-dark-2) 60%,
    var(--fp-surface-dark-3) 100%
  );
  --fp-gradient-brand-surface: radial-gradient(
    circle at top left,
    var(--fp-brand-1) 0%,
    var(--fp-brand-2) 65%,
    var(--fp-brand-3) 100%
  );
  --fp-gradient-brand-surface-strong: radial-gradient(
    circle at top left,
    var(--fp-brand-strong-1) 0%,
    var(--fp-brand-strong-2) 55%,
    var(--fp-brand-strong-3) 100%
  );

  --wcs-accent: var(--fp-primary);
  --wcs-accent-dark: var(--fp-primary-dark);
  --wcs-text: var(--fp-text-invert);
  --wcs-bg: var(--fp-surface-dark-2);
  --wcs-bg-light: var(--fp-surface-dark-1);
  --wcs-border: var(--fp-border-light);
  --wcs-border-soft: var(--fp-border-soft);
  --wcs-radius: var(--fp-radius-soft);

  --mf-wa-btn-bg: var(--fp-primary);
  --mf-wa-btn-bg-hover: var(--fp-primary-dark);
  --mf-wa-btn-text: var(--fp-text-on-brand);

  --mf-wa-panel-bg: var(--fp-surface-dark-2);
  --mf-wa-panel-text: var(--fp-text-invert);
  --mf-wa-panel-muted: rgba(255,255,255,.72);
  --mf-wa-panel-border: var(--fp-border-light);

  --mf-wa-header-bg: var(--fp-primary);
  --mf-wa-header-text: var(--fp-text-on-brand);

  --mf-wa-card-bg: var(--fp-surface-dark-1);
  --mf-wa-card-text: var(--fp-text-invert);
}

/* =========================================================
   SURFACE SYSTEM (SYSTEMISCH)
   ========================================================= */

:root{
  /* ========================================
     HIGHLIGHT BUTTON TOKENS
  ======================================== */
  --fp-highlight-button-bg: var(--fp-accent);
  --fp-highlight-button-bg-hover: var(--fp-primary-dark);
  --fp-highlight-button-text: var(--fp-text-invert);
  --fp-highlight-button-shadow: 0 8px 20px rgba(0,0,0,.25);

  --fp-surface-1: var(--fp-bg-white);
  --fp-surface-2: var(--fp-bg-light);
  --fp-surface-1-text: var(--fp-text);
  --fp-surface-2-text: var(--fp-text);
}

.fp-section-light{
  background-color: var(--fp-surface-1) !important;
  color: var(--fp-surface-1-text) !important;
}

.fp-section-soft{
  background-color: var(--fp-surface-2) !important;
  color: var(--fp-surface-2-text) !important;
}

@media (max-width: 767px){
  :root{ --fp-header-h: 92px; }
}


/* =========================================================
   BRAND SURFACES (SOFT / HOVER SYSTEM)
   ========================================================= */

:root{

  /* Leise Brand-Fläche (ersetzt #FFF3E8) */
  --fp-surface-soft: color-mix(in srgb, var(--fp-primary) 8%, white);

  /* Etwas stärkere Variante (optional) */
  --fp-surface-soft-strong: color-mix(in srgb, var(--fp-primary) 14%, white);

  /* Border passend zur Fläche */
  --fp-surface-border: color-mix(in srgb, var(--fp-primary) 18%, white);

  /* Hover: voller Brand */
  --fp-surface-hover: var(--fp-gradient-brand);

}


/* =========================================================
   B) ÄNDERBAR – STANDARD-ABSTÄNDE
   ========================================================= */

.pad-l{
  padding: 3em 1.25em 2.5em;
}

@media (min-width: 576px){
  .pad-l{ padding: 4em; }
}
@media (min-width: 992px){
  .pad-l{ padding: 5em; }
}
@media (min-width: 1200px){
  .pad-l{ padding: 9em 5em; }
}
@media (min-width: 1920px){
  .pad-l{ padding: 11em 8em; }
}

@media (max-width: 767px){
  .pad-l-boxed{
    padding: 3em 1.25em 2.5em !important;
  }

  .pad-l-boxed.e-con{
    width: 100% !important;
    max-width: 100% !important;
    --container-max-width: 100% !important;
    --content-width: 100% !important;
  }

  .pad-l-boxed.e-con.e-con-boxed > .e-con-inner,
  .pad-l-boxed.e-con > .e-con-inner{
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   C) ÄNDERBAR – BUTTONS
   ========================================================= */

.elementor-button{
  transition:
    transform .25s ease,
    filter .25s ease,
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease;

  background-image: var(--fp-gradient-brand) !important;
  border: 0 !important;
}

.elementor-button:hover,
.elementor-button:focus,
.elementor-button:active{
  background-image: var(--fp-gradient-brand-reverse) !important;

  transform: translateY(-1px);
  filter: brightness(97%);
}

.button-outline-dark .elementor-button{
  background: transparent;
  color: var(--fp-primary);
  box-shadow: inset 0 0 0 1px var(--fp-primary);
}

.button-outline-dark .elementor-button:hover{
  background: var(--fp-primary);
  color: var(--fp-text-invert);
}

.button-outline-light .elementor-button{
  background: transparent;
  color: var(--fp-text-invert);
  box-shadow: inset 0 0 0 1px var(--fp-text-invert);
}

.button-outline-light .elementor-button:hover{
  background: var(--fp-text-invert);
  color: var(--fp-text);
}

/* =========================================================
   D) SYSTEM – BASIS / HEADER / HERO
   ========================================================= */

html,
body{
  overflow-x: hidden;
}

html:not(.fp-header-ready) #hide-header-2{
  transition: none !important;
}

#hide-header-2{
  height: var(--fp-header-h) !important;
}

body{
  padding-top: var(--fp-header-h);
}

/* 404-Seite: erste Sektion unter den transparenten Header ziehen. Die 404-Vorlage
   verschiebt sich nur über 1366 px nach oben, darunter blieb der body-Abstand
   als weißer Balken stehen. */
@media (max-width: 1366px){
  body.error404 .elementor-location-single > .e-con:first-child{
    --margin-top: calc(-1 * var(--fp-header-h));
  }
}

.hero-wrap{
  --min-height: 100vh !important;
  min-height: 100vh !important;
  overflow: visible !important;
  position: relative;
}

@media (max-width: 1536px) and (min-width: 992px){
  .hero-wrap{
    --min-height: calc(100vh + 180px) !important;
    min-height: calc(100vh + 180px) !important;
  }
}

@media (max-height: 820px) and (min-width: 992px){
  .hero-wrap{
    --min-height: calc(100vh + 220px) !important;
    min-height: calc(100vh + 220px) !important;
    padding-top: 120px !important;
  }
}

@media (max-height: 500px) and (max-width: 991px) and (orientation: landscape){
  .hero-wrap{
    --min-height: 100vh !important;
    min-height: 100vh !important;
    padding-top: 100px !important;
  }
}

h2,
.elementor-widget-heading h2.elementor-heading-title{
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--fp-text) !important;
}

h2{
  padding-bottom: 20px !important;
}

@media (max-width: 767px){
  h2{
    padding-bottom: 10px !important;
  }
}

main.hero-wrap{
  min-height: 100vh;
}

@media (max-height: 820px){
  main.hero-wrap{
    padding-bottom: 180px !important;
    padding-top: 120px !important;
  }
}

@media (max-height: 500px) and (orientation: landscape){
  main.hero-wrap{
    padding-bottom: 220px !important;
    padding-top: 100px !important;
  }
}

.fp-hero-h1 .elementor-heading-title{
  margin: 0 !important;
  text-wrap: balance;
}

@media (max-width: 991px){
  .fp-hero-h1 .elementor-heading-title{
    font-size: 48px !important;
    line-height: 1.05 !important;
  }
}

@media (max-height: 500px) and (orientation: landscape){
  .fp-hero-h1 .elementor-heading-title{
    font-size: 34px !important;
    line-height: 1.05 !important;
  }
}

@media (max-width: 1536px) and (min-width: 992px){
  .fp-hero-h1 .elementor-heading-title{ font-size: 6.1em !important; }
  .fp-hero-h1.is-2l .elementor-heading-title{ font-size: 5.5em !important; }
}
@media (max-width: 1366px) and (min-width: 992px){
  .fp-hero-h1 .elementor-heading-title{ font-size: 5.7em !important; }
  .fp-hero-h1.is-2l .elementor-heading-title{ font-size: 5.1em !important; }
}

/* =========================================================
   E) SYSTEM – ICONS / ICON BOXEN / SOCIAL ICONS
   ========================================================= */

/* ========================================
   ICON SYSTEM
======================================== */

/* Standard Icons (Primary) – NUR ICON, NICHT TEXT */
.fp-icon-default .elementor-icon,
.fp-icon-default i{
  color: var(--fp-primary) !important;
}

.fp-icon-default:hover .elementor-icon,
.fp-icon-default:hover i{
  color: var(--fp-primary-dark) !important;
}

/* White Icons (für dunkle / blaue Hintergründe) */
.fp-icon-white .elementor-icon,
.fp-icon-white i{
  color: var(--fp-text-invert) !important;
}

/* Accent Icons (optional / Kontrastfarbe) */
.fp-icon-accent .elementor-icon,
.fp-icon-accent i{
  color: var(--fp-accent) !important;
}

.fp-icon-accent:hover .elementor-icon,
.fp-icon-accent:hover i{
  color: var(--fp-primary) !important;
}

/* ----------------------------------------
   CUSTOM SVG / CANVA ICON SAFETY
   ----------------------------------------
   System-Icons mit currentColor bleiben steuerbar.
   Mehrfarbige eigene SVGs behalten ihre internen Farben.
---------------------------------------- */
.elementor-icon svg,
.elementor-icon-box-icon svg,
.elementor-icon-list-icon svg{
  color: inherit !important;
}

.elementor-icon svg [fill="currentColor"],
.elementor-icon-box-icon svg [fill="currentColor"],
.elementor-icon-list-icon svg [fill="currentColor"]{
  fill: currentColor !important;
}

.elementor-icon svg [stroke="currentColor"],
.elementor-icon-box-icon svg [stroke="currentColor"],
.elementor-icon-list-icon svg [stroke="currentColor"]{
  stroke: currentColor !important;
}

/* Icon-Listen */

.elementor-icon-list-icon{
  height: var(--e-icon-list-icon-size,1em);
  width: var(--e-icon-list-icon-size,1em);
  margin: var(--e-icon-list-icon-margin,0 calc(var(--e-icon-list-icon-size, 1em) * .25) 0 0);
}

.elementor-icon-list-icon i{
  color: currentColor;
}

:not(.fp-icon-original) /* Original-SVG-Fills mit festen Attributen bleiben unangetastet */

:not(.fp-icon-original) /* Original-SVG-Strokes mit festen Attributen bleiben unangetastet */

/* Mehrfarbige Custom-SVGs niemals pauschal über Wrapper-Fill übermalen */
.elementor-icon svg,
.elementor-icon-box-icon svg,
.elementor-icon-list-icon svg,
.elementor-icon svg *,
.elementor-icon-box-icon svg *,
.elementor-icon-list-icon svg *{
  vector-effect: non-scaling-stroke;
}

/* ========================================
   ICON BOX SYSTEM
======================================== */

.fp-icon-box{
  display: block;
}

.fp-icon-box .elementor-icon-box-title,
.fp-icon-box .elementor-icon-box-title a,
.fp-icon-box .elementor-icon-box-description,
.fp-icon-box .elementor-icon-box-description p{
  color: var(--fp-text) !important;
}

.fp-icon-box:not(.fp-icon-white):not(.fp-icon-default):not(.fp-icon-accent) .elementor-icon,
.fp-icon-box:not(.fp-icon-white):not(.fp-icon-default):not(.fp-icon-accent) .elementor-icon i{
  color: var(--fp-primary) !important;
}

.fp-icon-box:not(.fp-icon-white):not(.fp-icon-default):not(.fp-icon-accent):hover .elementor-icon,
.fp-icon-box:not(.fp-icon-white):not(.fp-icon-default):not(.fp-icon-accent):hover .elementor-icon i{
  color: var(--fp-primary-dark) !important;
}

.fp-icon-box.fp-icon-default .elementor-icon,
.fp-icon-box.fp-icon-default .elementor-icon i{
  color: var(--fp-primary) !important;
}

.fp-icon-box.fp-icon-default:hover .elementor-icon,
.fp-icon-box.fp-icon-default:hover .elementor-icon i{
  color: var(--fp-primary-dark) !important;
}

.fp-icon-box.fp-icon-white .elementor-icon,
.fp-icon-box.fp-icon-white .elementor-icon i{
  color: var(--fp-text-invert) !important;
}

.fp-icon-box.fp-icon-white:hover .elementor-icon,
.fp-icon-box.fp-icon-white:hover .elementor-icon i{
  color: var(--fp-text-invert) !important;
}

.fp-icon-box.fp-icon-accent .elementor-icon,
.fp-icon-box.fp-icon-accent .elementor-icon i{
  color: var(--fp-accent) !important;
}

.fp-icon-box.fp-icon-accent:hover .elementor-icon,
.fp-icon-box.fp-icon-accent:hover .elementor-icon i{
  color: var(--fp-primary) !important;
}

.fp-icon-box .elementor-icon,
.fp-icon-box .elementor-icon i{
  transition:
    color .25s ease,
    transform .25s ease !important;
}

.fp-icon-box:hover .elementor-icon{
  transform: scale(1.04);
}

.dark-section .fp-icon-box .elementor-icon-box-title,
.dark-section .fp-icon-box .elementor-icon-box-title a,
.dark-section .fp-icon-box .elementor-icon-box-description,
.dark-section .fp-icon-box .elementor-icon-box-description p,
.fp-bg-dark .fp-icon-box .elementor-icon-box-title,
.fp-bg-dark .fp-icon-box .elementor-icon-box-title a,
.fp-bg-dark .fp-icon-box .elementor-icon-box-description,
.fp-bg-dark .fp-icon-box .elementor-icon-box-description p,
.fp-dark-gradient .fp-icon-box .elementor-icon-box-title,
.fp-dark-gradient .fp-icon-box .elementor-icon-box-title a,
.fp-dark-gradient .fp-icon-box .elementor-icon-box-description,
.fp-dark-gradient .fp-icon-box .elementor-icon-box-description p,
.dark-gradient-primary .fp-icon-box .elementor-icon-box-title,
.dark-gradient-primary .fp-icon-box .elementor-icon-box-title a,
.dark-gradient-primary .fp-icon-box .elementor-icon-box-description,
.fp-footer-gradient .fp-icon-box .elementor-icon-box-title,
.fp-footer-gradient .fp-icon-box .elementor-icon-box-title a,
.fp-footer-gradient .fp-icon-box .elementor-icon-box-description,
.fp-footer-gradient .fp-icon-box .elementor-icon-box-description p{
  color: var(--fp-text-invert) !important;
}

.dark-section .fp-icon-box:not(.fp-icon-default):not(.fp-icon-white):not(.fp-icon-accent) .elementor-icon,
.dark-section .fp-icon-box:not(.fp-icon-default):not(.fp-icon-white):not(.fp-icon-accent) .elementor-icon i,
.fp-bg-dark .fp-icon-box:not(.fp-icon-default):not(.fp-icon-white):not(.fp-icon-accent) .elementor-icon,
.fp-bg-dark .fp-icon-box:not(.fp-icon-default):not(.fp-icon-white):not(.fp-icon-accent) .elementor-icon i,
.fp-dark-gradient .fp-icon-box:not(.fp-icon-default):not(.fp-icon-white):not(.fp-icon-accent) .elementor-icon,
.fp-dark-gradient .fp-icon-box:not(.fp-icon-default):not(.fp-icon-white):not(.fp-icon-accent) .elementor-icon i,
.dark-gradient-primary .fp-icon-box:not(.fp-icon-default):not(.fp-icon-white):not(.fp-icon-accent) .elementor-icon,
.dark-gradient-primary .fp-icon-box:not(.fp-icon-default):not(.fp-icon-white):not(.fp-icon-accent) .elementor-icon i,
.fp-footer-gradient .fp-icon-box:not(.fp-icon-default):not(.fp-icon-white):not(.fp-icon-accent) .elementor-icon,
.fp-footer-gradient .fp-icon-box:not(.fp-icon-default):not(.fp-icon-white):not(.fp-icon-accent) .elementor-icon i{
  color: var(--fp-text-invert) !important;
}

.dark-section .fp-icon-box:not(.fp-icon-default):not(.fp-icon-white):not(.fp-icon-accent):hover .elementor-icon,
.dark-section .fp-icon-box:not(.fp-icon-default):not(.fp-icon-white):not(.fp-icon-accent):hover .elementor-icon i,
.fp-bg-dark .fp-icon-box:not(.fp-icon-default):not(.fp-icon-white):not(.fp-icon-accent):hover .elementor-icon,
.fp-bg-dark .fp-icon-box:not(.fp-icon-default):not(.fp-icon-white):not(.fp-icon-accent):hover .elementor-icon i,
.fp-dark-gradient .fp-icon-box:not(.fp-icon-default):not(.fp-icon-white):not(.fp-icon-accent):hover .elementor-icon,
.fp-dark-gradient .fp-icon-box:not(.fp-icon-default):not(.fp-icon-white):not(.fp-icon-accent):hover .elementor-icon i,
.dark-gradient-primary .fp-icon-box:not(.fp-icon-default):not(.fp-icon-white):not(.fp-icon-accent):hover .elementor-icon,
.dark-gradient-primary .fp-icon-box:not(.fp-icon-default):not(.fp-icon-white):not(.fp-icon-accent):hover .elementor-icon i,
.fp-footer-gradient .fp-icon-box:not(.fp-icon-default):not(.fp-icon-white):not(.fp-icon-accent):hover .elementor-icon,
.fp-footer-gradient .fp-icon-box:not(.fp-icon-default):not(.fp-icon-white):not(.fp-icon-accent):hover .elementor-icon i{
  color: var(--fp-text-invert) !important;
}

/* ========================================
   SOCIAL ICONS – FINAL LOGIK
   Standard und Premium bewusst getrennt
======================================== */

/* Standard Theme:
   Kreis = feste Icon-Farbe
   Symbol = weiß */
body.fp-theme-standard .fp-social-primary .elementor-social-icon{
  background-color: var(--fp-accent) !important;
  color: var(--fp-text-invert) !important;
}

body.fp-theme-standard .fp-social-primary .elementor-social-icon i,
body.fp-theme-standard .fp-social-primary .elementor-social-icon svg,
body.fp-theme-standard .fp-social-primary .elementor-social-icon svg *{
  color: var(--fp-text-invert) !important;
  fill: var(--fp-text-invert) !important;
  stroke: var(--fp-text-invert) !important;
}

body.fp-theme-standard .fp-social-primary .elementor-social-icon:hover{
  background-color: var(--fp-accent) !important;
  color: var(--fp-text-invert) !important;
}

/* Premium Theme:
   Kreis = primary
   Symbol = text_on_brand */
body.fp-theme-premium .fp-social-primary .elementor-social-icon{
  background-color: var(--fp-primary) !important;
  color: var(--fp-text-on-brand) !important;
}

body.fp-theme-premium .fp-social-primary .elementor-social-icon i,
body.fp-theme-premium .fp-social-primary .elementor-social-icon svg,
body.fp-theme-premium .fp-social-primary .elementor-social-icon svg *{
  color: var(--fp-text-on-brand) !important;
  fill: var(--fp-text-on-brand) !important;
  stroke: var(--fp-text-on-brand) !important;
}

body.fp-theme-premium .fp-social-primary .elementor-social-icon:hover{
  background-color: var(--fp-primary) !important;
  color: var(--fp-text-on-brand) !important;
}

/* =========================================================
   F) SYSTEM – DARK SURFACES / UTILITIES / ACCORDION / PORTFOLIO / LOGO
   ========================================================= */

/* ========================================
   DARK SECTION + SURFACES
======================================== */

.dark-section{
  color: var(--fp-text-invert);
  --heading-on-dark: var(--fp-text-on-dark);
}

.dark-section .elementor-widget-heading h1.elementor-heading-title,
.dark-section .elementor-widget-heading h2.elementor-heading-title,
.dark-section .elementor-widget-heading h3.elementor-heading-title,
.dark-section .elementor-widget-heading h4.elementor-heading-title,
.dark-section .elementor-widget-heading h5.elementor-heading-title,
.dark-section .elementor-widget-heading h6.elementor-heading-title{
  color: var(--heading-on-dark) !important;
}

.fp-bg-dark{
  background-color: var(--fp-text) !important;
  background-image: none !important;
}

.fp-dark-gradient{
  background-color: var(--fp-text) !important;
  background-image: var(--fp-gradient-dark-diagonal) !important;
}

.dark-gradient-primary{
  background-color: var(--fp-text) !important;
  background-image: var(--fp-gradient-brand-radial) !important;
}

.fp-footer-gradient{
  background-color: var(--fp-text) !important;
  background-image: var(--fp-gradient-dark-diagonal) !important;
}

.bg-white{ background-color: var(--fp-bg-white); }
.bg-light{ background-color: var(--fp-bg-light); }

.elementor-widget-accordion .elementor-accordion .elementor-tab-title{
  background: var(--fp-gradient-brand) !important;

  color: var(--fp-text-invert) !important;
  border-radius: 6px !important;
  margin-bottom: 10px !important;
  transition: background .35s ease !important;
}

@media (hover:hover){
  .elementor-widget-accordion .elementor-accordion .elementor-tab-title:hover{
      background: var(--fp-gradient-brand-reverse) !important;
  }
}

.elementor-widget-accordion .elementor-accordion .elementor-tab-title.elementor-active{
  background: var(--fp-gradient-brand-reverse) !important;
}

/* =========================================================
   PREMIUM – ACCORDION H3 ON BRAND FIX
   ---------------------------------------------------------
   H3-Titel im goldenen Accordion wieder dunkel ziehen.
   ========================================================= */
body.fp-theme-premium .elementor-widget-accordion .elementor-accordion .elementor-tab-title h3,
body.fp-theme-premium .elementor-widget-accordion .elementor-accordion .elementor-tab-title h3 a,
body.fp-theme-premium .elementor-widget-accordion .elementor-accordion .elementor-tab-title .elementor-accordion-title{
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  background-clip: border-box !important;
  color: var(--fp-text-on-brand) !important;
  text-shadow: none !important;
}

/* =========================================================
   PREMIUM – ACCORDION ICON COLOR FIX
   ---------------------------------------------------------
   Icons auf goldenen Accordion-Titeln wieder dunkel ziehen.
   ========================================================= */
body.fp-theme-premium .elementor-widget-accordion .elementor-accordion .elementor-tab-title .elementor-accordion-icon,
body.fp-theme-premium .elementor-widget-accordion .elementor-accordion .elementor-tab-title .elementor-accordion-icon i,
body.fp-theme-premium .elementor-widget-accordion .elementor-accordion .elementor-tab-title .elementor-accordion-icon svg{
  color: var(--fp-text-on-brand) !important;
  fill: var(--fp-text-on-brand) !important;
  stroke: var(--fp-text-on-brand) !important;
}

.elementor-widget-accordion .elementor-accordion .elementor-accordion-icon svg{
  width: 1.4em !important;
  height: 1.4em !important;
  fill: currentColor;
}

.elementor-widget-accordion .elementor-accordion .elementor-tab-content p{
  margin-bottom: 15px !important;
}

.elementor-widget-accordion .elementor-accordion .elementor-tab-content ul + p,
.elementor-widget-accordion .elementor-accordion .elementor-tab-content ol + p{
  margin-top: 15px !important;
}

.elementor-widget-accordion .elementor-accordion .elementor-tab-content li{
  margin-left: -20px !important;
}

.elementor-widget-accordion .elementor-accordion .elementor-tab-content{
  background-color: var(--fp-bg-light) !important;
}

.offcanvas-trigger{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.elementor-portfolio-item__overlay{
  padding: 50px;
  hyphens: auto;
}

a .elementor-portfolio-item__overlay{
  background-image: var(--fp-gradient-brand-radial);
}

.d-logo {
  display: block;
}
.l-logo {
  display: none;
}

.elementor-sticky--effects .l-logo {
  display: block;
}
.elementor-sticky--effects .d-logo {
  display: none;
}

body.header-dark-bg .d-logo {
  display: none !important;
}
body.header-dark-bg .l-logo {
  display: block !important;
}

body.header-light-bg .d-logo {
  display: block !important;
}
body.header-light-bg .l-logo {
  display: none !important;
}

.loop-card__content{
  background: var(--fp-gradient-brand) !important;
}

/* =========================================================
   G) SYSTEM – FLIPBOXEN / TABELLEN / EINZELSEITEN / TABS / NAV
   ========================================================= */

/* =========================================================
   STANDARD THEME – FLIPBOX CLEAN VARIANTE (KONSOLIDIERT)
   ---------------------------------------------------------
   Aktiv nur in:
   body.fp-theme-standard .fp-flipgrid.is-clean

   Ziel:
   - Standard / Premium unangetastet lassen
   - Flipbox funktional behalten
   - Vorder- und Rückseiten als ruhige, helle Cards führen
   - farbige Glow-/Effektlogik im Clean-Modus entfernen
   - fp-a / fp-b nur noch subtil über die Icon-Farbe unterscheiden
   ========================================================= */

/* äußerer Träger neutral, damit keine weißen Ecken / kein Träger sichtbar wird */
body.fp-theme-standard .fp-flipgrid.is-clean .fp-flip,
body.fp-theme-standard .fp-flipgrid.is-clean .fp-flip .elementor-flip-box{
  background: transparent !important;
  box-shadow: none !important;
}

/* Front- und Back-Flächen werden zu ruhigen Info-Cards */
body.fp-theme-standard .fp-flipgrid.is-clean .fp-flip.fp-a .elementor-flip-box__front,
body.fp-theme-standard .fp-flipgrid.is-clean .fp-flip.fp-a .elementor-flip-box__back,
body.fp-theme-standard .fp-flipgrid.is-clean .fp-flip.fp-b .elementor-flip-box__front,
body.fp-theme-standard .fp-flipgrid.is-clean .fp-flip.fp-b .elementor-flip-box__back{
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: var(--fp-text) !important;
  border: 1px solid var(--fp-border-light) !important;
  box-shadow: var(--fp-shadow-soft) !important;
  background-clip: padding-box !important;
}

/* Hover/Focus nur noch als ruhiger Tiefeneffekt, kein Brand-Glow */
body.fp-theme-standard .fp-flipgrid.is-clean .elementor-widget-flip-box.fp-flip:hover .elementor-flip-box,
body.fp-theme-standard .fp-flipgrid.is-clean .elementor-widget-flip-box.fp-flip:focus-within .elementor-flip-box{
  box-shadow: none !important;
}

body.fp-theme-standard .fp-flipgrid.is-clean .fp-flip:hover .elementor-flip-box__front,
body.fp-theme-standard .fp-flipgrid.is-clean .fp-flip:hover .elementor-flip-box__back,
body.fp-theme-standard .fp-flipgrid.is-clean .fp-flip:focus-within .elementor-flip-box__front,
body.fp-theme-standard .fp-flipgrid.is-clean .fp-flip:focus-within .elementor-flip-box__back{
  box-shadow: var(--fp-shadow-medium) !important;
}

/* Alle Texte / Headlines auf beiden Seiten dunkel */
body.fp-theme-standard .fp-flipgrid.is-clean .fp-flip .elementor-flip-box__front,
body.fp-theme-standard .fp-flipgrid.is-clean .fp-flip .elementor-flip-box__front *,
body.fp-theme-standard .fp-flipgrid.is-clean .fp-flip .elementor-flip-box__back,
body.fp-theme-standard .fp-flipgrid.is-clean .fp-flip .elementor-flip-box__back *{
  color: var(--fp-text) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Gradient-/Sonderheadline neutralisieren */
body.fp-theme-standard .fp-flipgrid.is-clean .fp-flip .elementor-flip-box__layer__title,
body.fp-theme-standard .fp-flipgrid.is-clean .fp-flip .elementor-heading-title{
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--fp-text) !important;
  text-shadow: none !important;
}

/* fp-a und fp-b bleiben technisch erhalten, unterscheiden sich im Clean nur subtil */
body.fp-theme-standard .fp-flipgrid.is-clean .fp-flip.fp-a .elementor-icon,
body.fp-theme-standard .fp-flipgrid.is-clean .fp-flip.fp-a .elementor-icon i,
body.fp-theme-standard .fp-flipgrid.is-clean .fp-flip.fp-a .elementor-icon svg{
  color: var(--fp-primary) !important;
  fill: var(--fp-primary) !important;
  stroke: var(--fp-primary) !important;
}

body.fp-theme-standard .fp-flipgrid.is-clean .fp-flip.fp-b .elementor-icon,
body.fp-theme-standard .fp-flipgrid.is-clean .fp-flip.fp-b .elementor-icon i,
body.fp-theme-standard .fp-flipgrid.is-clean .fp-flip.fp-b .elementor-icon svg{
  color: var(--fp-accent) !important;
  fill: var(--fp-accent) !important;
  stroke: var(--fp-accent) !important;
}

/* =========================================================
   FLIPBOX A – CTA AUF BRAND-RÜCKSEITE
   ---------------------------------------------------------
   Rückseite = Primary
   Button = Textfarbe / dunkel
   Buttontext = invertiert / weiß
   ========================================================= */

.elementor-widget-flip-box.fp-flip.fp-a
.elementor-flip-box__back .elementor-button,
.elementor-widget-flip-box.fp-flip.fp-a
.elementor-flip-box__back .elementor-button:visited{
  background: var(--fp-text) !important;
  background-color: var(--fp-text) !important;
  background-image: none !important;
  color: var(--fp-text-invert) !important;
  border-color: var(--fp-text) !important;
}

.elementor-widget-flip-box.fp-flip.fp-a
.elementor-flip-box__back .elementor-button:hover,
.elementor-widget-flip-box.fp-flip.fp-a
.elementor-flip-box__back .elementor-button:focus,
.elementor-widget-flip-box.fp-flip.fp-a
.elementor-flip-box__back .elementor-button:active{
  background: var(--fp-text) !important;
  background-color: var(--fp-text) !important;
  background-image: none !important;
  color: var(--fp-text-invert) !important;
  border-color: var(--fp-text) !important;
  filter: brightness(115%) !important;
}

.elementor-widget-flip-box.fp-flip.fp-a
.elementor-flip-box__back .elementor-button *{
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}


@media (max-width: 767px){

  /* Flipbox – Abstand zwischen Text und Button */
  .elementor-widget-flip-box.fp-flip
  .elementor-flip-box__back .elementor-flip-box__button,
  .elementor-widget-flip-box.fp-flip
  .elementor-flip-box__back .elementor-button{
    margin-top: 20px !important;
  }

}

/* =========================================================
   ACCORDION – CLEAN VARIANTE
   ---------------------------------------------------------
   Aktiv nur in .fp-accordion.is-clean
   Ziel:
   - deutlich ruhiger als die Default-Variante
   - keine CTA-Optik
   ========================================================= */

.fp-accordion.is-clean .elementor-widget-accordion .elementor-accordion .elementor-tab-title{
  background: transparent !important;
  color: var(--fp-text) !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--fp-primary) 55%, transparent) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  padding: 26px 56px 26px 0 !important;
  box-shadow: none !important;
  transition:
    color .25s ease,
    border-color .25s ease,
    background-color .25s ease !important;
}

.fp-accordion.is-clean .elementor-widget-accordion .elementor-accordion .elementor-tab-title:hover{
  background: transparent !important;
  color: var(--fp-text) !important;
  border-bottom-color: color-mix(in srgb, var(--fp-primary) 85%, transparent) !important;
}

.fp-accordion.is-clean .elementor-widget-accordion .elementor-accordion .elementor-tab-title.elementor-active{
  background: transparent !important;
  color: var(--fp-text) !important;
  border-bottom-color: color-mix(in srgb, var(--fp-primary) 85%, transparent) !important;
}

.fp-accordion.is-clean .elementor-widget-accordion .elementor-accordion .elementor-tab-title a,
.fp-accordion.is-clean .elementor-widget-accordion .elementor-accordion .elementor-tab-title .elementor-accordion-title,
.fp-accordion.is-clean .elementor-widget-accordion .elementor-accordion .elementor-tab-title h3{
  color: var(--fp-text) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

.fp-accordion.is-clean .elementor-widget-accordion .elementor-accordion .elementor-accordion-icon,
.fp-accordion.is-clean .elementor-widget-accordion .elementor-accordion .elementor-accordion-icon i,
.fp-accordion.is-clean .elementor-widget-accordion .elementor-accordion .elementor-accordion-icon svg{
  color: color-mix(in srgb, var(--fp-primary) 22%, white) !important;
  fill: color-mix(in srgb, var(--fp-primary) 22%, white) !important;
  stroke: color-mix(in srgb, var(--fp-primary) 22%, white) !important;
  transition: color .25s ease, fill .25s ease, stroke .25s ease !important;
}

.fp-accordion.is-clean .elementor-widget-accordion .elementor-accordion .elementor-tab-title:hover .elementor-accordion-icon,
.fp-accordion.is-clean .elementor-widget-accordion .elementor-accordion .elementor-tab-title:hover .elementor-accordion-icon i,
.fp-accordion.is-clean .elementor-widget-accordion .elementor-accordion .elementor-tab-title:hover .elementor-accordion-icon svg,
.fp-accordion.is-clean .elementor-widget-accordion .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon,
.fp-accordion.is-clean .elementor-widget-accordion .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon i,
.fp-accordion.is-clean .elementor-widget-accordion .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon svg{
  color: var(--fp-primary) !important;
  fill: var(--fp-primary) !important;
  stroke: var(--fp-primary) !important;
}

.fp-accordion.is-clean .elementor-widget-accordion .elementor-accordion .elementor-tab-content{
  background: transparent !important;
  color: var(--fp-text) !important;
  border: 0 !important;
  padding: 18px 0 26px !important;
}

.fp-accordion.is-clean .elementor-widget-accordion .elementor-accordion .elementor-tab-content,
.fp-accordion.is-clean .elementor-widget-accordion .elementor-accordion .elementor-tab-content p,
.fp-accordion.is-clean .elementor-widget-accordion .elementor-accordion .elementor-tab-content li,
.fp-accordion.is-clean .elementor-widget-accordion .elementor-accordion .elementor-tab-content span{
  color: var(--fp-text) !important;
}

.fp-accordion.is-clean .elementor-widget-accordion .elementor-accordion .elementor-tab-content a{
  color: var(--fp-primary) !important;
}

.fp-accordion.is-clean .elementor-widget-accordion .elementor-accordion .elementor-tab-content a:hover{
  color: var(--fp-primary-dark) !important;
}

.fp-accordion.is-clean .elementor-widget-accordion .elementor-accordion .elementor-accordion-item{
  border: 0 !important;
}

@media (max-width: 767px){
  .fp-accordion.is-clean .elementor-widget-accordion .elementor-accordion .elementor-tab-title{
    padding: 20px 46px 20px 0 !important;
  }

  .fp-accordion.is-clean .elementor-widget-accordion .elementor-accordion .elementor-tab-content{
    padding: 14px 0 22px !important;
  }
}

/* =========================================================
   ACCORDION – CLEAN WRAPPER LOGIK
   ---------------------------------------------------------
   Light und Soft bewusst getrennt
   ========================================================= */

/* LIGHT WRAPPER:
   Clean darf hier eine ganz leichte Fläche behalten */
.fp-section-light .fp-accordion.is-clean .elementor-widget-accordion .elementor-accordion .elementor-tab-title{
  background: transparent !important;
}

.fp-section-light .fp-accordion.is-clean .elementor-widget-accordion .elementor-accordion .elementor-tab-content{
  background: transparent !important;
}

/* SOFT WRAPPER:
   Hier wirklich maximal clean / transparent, damit keine Box-in-Box Wirkung entsteht */
.fp-section-soft .fp-accordion.is-clean .elementor-widget-accordion .elementor-accordion .elementor-tab-title{
  background: transparent !important;
  border-bottom: 1px solid var(--fp-border-light) !important;
}

.fp-section-soft .fp-accordion.is-clean .elementor-widget-accordion .elementor-accordion .elementor-tab-title:hover{
  background: transparent !important;
  border-bottom-color: color-mix(in srgb, var(--fp-primary) 85%, transparent) !important;
}

.fp-section-soft .fp-accordion.is-clean .elementor-widget-accordion .elementor-accordion .elementor-tab-title.elementor-active{
  background: transparent !important;
  border-bottom-color: color-mix(in srgb, var(--fp-primary) 85%, transparent) !important;
}

.fp-section-soft .fp-accordion.is-clean .elementor-widget-accordion .elementor-accordion .elementor-tab-content{
  background: transparent !important;
}






.elementor-widget-flip-box.fp-flip{
  --fp-gray-1: var(--fp-surface-dark-1);
  --fp-gray-2: var(--fp-surface-dark-2);
  --fp-gray-3: var(--fp-surface-dark-3);
  --fp-text-dark: var(--fp-text-on-brand);
}

.elementor-widget-flip-box.fp-flip .elementor-flip-box,
.elementor-widget-flip-box.fp-flip .elementor-flip-box__layer,
.elementor-widget-flip-box.fp-flip .elementor-flip-box__front,
.elementor-widget-flip-box.fp-flip .elementor-flip-box__back{
  border-radius: 22px;
  overflow: hidden;
}

.elementor-widget-flip-box.fp-flip:hover .elementor-flip-box{
  box-shadow:
    0 18px 60px var(--fp-shadow-dark-strong),
    0 0 30px var(--fp-glow-brand-strong);
}

.elementor-widget-flip-box.fp-flip .elementor-flip-box__front,
.elementor-widget-flip-box.fp-flip .elementor-flip-box__back,
.elementor-widget-flip-box.fp-flip .elementor-flip-box__layer{
  transition: transform 0.8s ease !important;
}

/* 1.0.3-D: Vorderseite – der Titel hält immer Platz für zwei Zeilen frei. So steht das Symbol auf allen Kacheln
   gleich hoch; ein zweizeiliger Titel weicht nach unten aus, statt das Symbol hochzuschieben (Danny, 09.10.2026). */
.elementor-widget-flip-box.fp-flip .elementor-flip-box__front .elementor-flip-box__layer__title{
  min-height: 2.4em;  /* Ersatz für ältere Browser */
  min-height: 2lh;    /* genau zwei Zeilen der tatsächlichen Zeilenhöhe */
}

/* 1.0.4-D: Klassen-Karten (Loop „fsklasse“) – Fotos einheitlich 3:2, zugeschnitten statt verzerrt. Vorher bestimmte
   jedes Foto seine eigene Höhe (173–282 px auf dem Handy), die Karten wirkten unruhig (Danny, 09.10.2026). */
.e-loop-item.fsklasse .elementor-widget-image img:not([src$=".svg"]){
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (max-width: 767px){
  .elementor-widget-flip-box.fp-flip .elementor-flip-box__front,
  .elementor-widget-flip-box.fp-flip .elementor-flip-box__back{
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
  }

  .elementor-widget-flip-box.fp-flip .elementor-flip-box__layer__inner{
    position: static !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 18px 18px 20px !important;
  }

  .elementor-widget-flip-box.fp-flip .elementor-flip-box__layer__title{
    margin: 0 0 10px !important;
  }

  .elementor-widget-flip-box.fp-flip .elementor-flip-box__layer__description{
    margin: 0 !important;
  }
}

@media (max-width: 767px){
  .fullwidth_fix{
    background: var(--fp-text) !important;
  }
}

body.single-class .fp-termin-carousel{
  --padding-left: 0px !important;
  --padding-right: 0px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.single-class .fp-termin-carousel > .e-con-inner{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.single-class a.wcs-btn--action.wcs-btn{
  transition: transform .2s ease, filter .2s ease;
}

body.single-class a.wcs-btn--action.wcs-btn:hover{
  transform: translateX(7px);
  filter: brightness(95%);
}

@media (max-width: 767px){
  body.single-class a.wcs-btn--action.wcs-btn,
  body.single-class a.elementor-button-link,
  body.single-class a.elementor-button-link .elementor-button{
    display: inline-flex !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 300px !important;
    max-width: calc(100% - 40px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 767px) {
  body.single-class .bkf-detail-buttons .elementor-widget-shortcode .elementor-widget-container {
    display: flex;
    justify-content: center;
  }
}

.fahrplan-simple{
  list-style: none;
  padding: 0;
  margin: 0;
}

.fahrplan-simple li{
  margin: 0;
  padding: 0;
}

.fahrplan-simple li:not(.sub){
  display: grid;
  grid-template-columns: 4rem 1fr;
  align-items: start;
}

.fahrplan-simple .nr{ font-weight: 800; }
.fahrplan-simple .txt{ font-weight: 600; }

.fahrplan-simple li.sub{
  padding-left: 4rem;
  font-weight: 400;
}

@media (max-width: 767px){
  .fahrplan-simple li:not(.sub){
    grid-template-columns: 3rem 1fr;
  }
  .fahrplan-simple li.sub{
    padding-left: 3rem;
  }
}

.fahrplan-toggle .sub{ display:none; }
.fahrplan-toggle.open .sub{ display:list-item; }
.fahrplan-simple li br{ display:none !important; }

.fahrplan-toggle .elementor-button{
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-weight: 700 !important;
  color: var(--fp-primary) !important;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  box-shadow: none !important;
}

.fahrplan-toggle .elementor-button:hover{
  text-decoration: underline;
}

.fahrplan-toggle .elementor-button::after{
  content: "↓";
  transition: transform .2s ease;
}

.fahrplan-toggle.open .elementor-button::after{
  content: "↑";
}

/* Tabellen für Sonderfahrten */
.fs-table.fs-table-sonderfahrten thead,
.fs-table.fs-table-sonderfahrten thead tr,
.fs-table.fs-table-sonderfahrten thead th {
  background: var(--fp-primary) !important;
  color: var(--fp-text-invert) !important;
}

.fs-table.fs-table-sonderfahrten tbody td {
  color: var(--fp-text) !important;
}

.fs-table.fs-table-sonderfahrten tbody tr:nth-child(odd) td {
  background: var(--fp-bg-white) !important;
}

.fs-table.fs-table-sonderfahrten tbody tr:nth-child(even) td {
  background: var(--fp-bg-light) !important;
}

@media (max-width: 767px) {
  .fs-table.fs-table-sonderfahrten,
  .fs-table.fs-table-sonderfahrten thead,
  .fs-table.fs-table-sonderfahrten tbody,
  .fs-table.fs-table-sonderfahrten th,
  .fs-table.fs-table-sonderfahrten td,
  .fs-table.fs-table-sonderfahrten tr {
    display: block;
    width: 100%;
  }

  .fs-table.fs-table-sonderfahrten thead {
    display: none;
  }

  .fs-table.fs-table-sonderfahrten tr {
    margin-bottom: 16px;
    border: 1px solid var(--fp-border-light);
    border-radius: 8px;
    overflow: hidden;
    background: var(--fp-bg-white);
  }

  .fs-table.fs-table-sonderfahrten td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    text-align: right;
    border: none !important;
    border-bottom: 1px solid var(--fp-border-soft) !important;
    background: var(--fp-bg-white) !important;
    color: var(--fp-text) !important;
  }

  .fs-table.fs-table-sonderfahrten td:last-child {
    border-bottom: none !important;
  }

  .fs-table.fs-table-sonderfahrten td::before {
    content: attr(data-label);
    font-weight: 700;
    text-align: left;
    color: var(--fp-text);
    flex: 1 1 auto;
  }

  .fs-table.fs-table-sonderfahrten tbody tr:first-child td {
    border-bottom: 2px solid var(--fp-border-soft-strong) !important;
  }
}

/* Loop Carousel Navigation */
.elementor-swiper-button,
.swiper-button-prev,
.swiper-button-next{
  background-color: var(--fp-primary) !important;
  color: var(--fp-text-invert) !important;
  opacity: 1 !important;
}

.elementor-swiper-button svg,
.swiper-button-prev svg,
.swiper-button-next svg{
  fill: var(--fp-text-invert) !important;
  stroke: var(--fp-text-invert) !important;
  color: var(--fp-text-invert) !important;
}

.elementor-swiper-button:hover,
.swiper-button-prev:hover,
.swiper-button-next:hover{
  background-color: var(--fp-primary-dark) !important;
  color: var(--fp-text-invert) !important;
}

.elementor-swiper-button:hover svg,
.swiper-button-prev:hover svg,
.swiper-button-next:hover svg{
  fill: var(--fp-text-invert) !important;
  stroke: var(--fp-text-invert) !important;
  color: var(--fp-text-invert) !important;
}

/* 1.0.11-D: Pfeile, die ihren Kreis schon mitbringen (Font-Awesome „arrow-alt-circle“), brauchen
   keine eigene Hintergrundfläche. Die Regel darüber legte sonst ein rotes Viereck um den Kreis.
   Hier wird stattdessen der Kreis selbst rot; der Pfeil darin bleibt ausgespart, das Bild scheint
   durch. Pfeile ohne eigenen Kreis (Chevron, Elementor-Vorgabe) behalten die Fläche – ohne sie
   wären sie als dünne Linien auf einem Foto kaum zu sehen. */
.elementor-swiper-button:has(.e-fas-arrow-alt-circle-left),
.elementor-swiper-button:has(.e-fas-arrow-alt-circle-right),
.elementor-swiper-button:has(.fa-arrow-alt-circle-left),
.elementor-swiper-button:has(.fa-arrow-alt-circle-right),
.swiper-button-prev:has(.fa-arrow-alt-circle-left),
.swiper-button-next:has(.fa-arrow-alt-circle-right){
  background-color: transparent !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); /* hebt den Kreis von hellen Fotos ab */
}

.elementor-swiper-button:has(.e-fas-arrow-alt-circle-left) svg,
.elementor-swiper-button:has(.e-fas-arrow-alt-circle-right) svg,
.elementor-swiper-button:has(.fa-arrow-alt-circle-left) svg,
.elementor-swiper-button:has(.fa-arrow-alt-circle-right) svg,
.swiper-button-prev:has(.fa-arrow-alt-circle-left) svg,
.swiper-button-next:has(.fa-arrow-alt-circle-right) svg,
.elementor-swiper-button .fa-arrow-alt-circle-left,
.elementor-swiper-button .fa-arrow-alt-circle-right{
  fill: var(--fp-primary) !important;
  stroke: none !important;
  color: var(--fp-primary) !important;
}

.elementor-swiper-button:has(.e-fas-arrow-alt-circle-left):hover,
.elementor-swiper-button:has(.e-fas-arrow-alt-circle-right):hover,
.elementor-swiper-button:has(.fa-arrow-alt-circle-left):hover,
.elementor-swiper-button:has(.fa-arrow-alt-circle-right):hover{
  background-color: transparent !important;
}

.elementor-swiper-button:has(.e-fas-arrow-alt-circle-left):hover svg,
.elementor-swiper-button:has(.e-fas-arrow-alt-circle-right):hover svg,
.elementor-swiper-button:has(.fa-arrow-alt-circle-left):hover svg,
.elementor-swiper-button:has(.fa-arrow-alt-circle-right):hover svg{
  fill: var(--fp-primary-dark) !important;
  color: var(--fp-primary-dark) !important;
}

.swiper-pagination-bullet{
  background-color: var(--fp-primary) !important;
  opacity: 0.4;
}

.swiper-pagination-bullet-active{
  background-color: var(--fp-primary) !important;
  opacity: 1;
}

/* 1.0.14-D: Handy-Menü 2,5-mal so groß (Danny, 21.10.2026: „sehr klein … mach 2,5 mal so groß").
   Die Punkte standen in 24 px League Gothic – eine schmale Schrift, die kleiner wirkt, als sie ist.
   Gilt nur im ausklappbaren Menü (Off-Canvas), nicht in der Desktop-Leiste. Token, damit ein Kunde
   abweichen kann, ohne die Regel anzufassen. */
/* 1.0.19-D (Danny, 22.10.2026): Die festen 60 px passten auf dem Handy nicht – „Führerscheinklassen“ war bei
   375 px Breite 383 px lang in einem 303 px breiten Menü, der Aufklapp-Pfeil stand bei 398 px und damit
   außerhalb des Fensters. Jetzt wächst die Schrift mit der Fensterbreite (11,5 % davon) und bleibt zwischen
   32 px und 60 px: 375 px → 43 px, 320 px → 37 px, Tablet/Desktop → 60 px. Mit 19 Zeichen plus Pfeil
   bleibt so bis 320 px Luft. Längere Punkte dürfen notfalls mit Trennstrich umbrechen (hyphens). */
:root{ --fp-offcanvas-menu-size: clamp(32px, 11.5vw, 60px); }
.e-off-canvas .elementor-nav-menu .elementor-item{
  font-size: var(--fp-offcanvas-menu-size) !important;
  line-height: 1.15 !important;
  white-space: nowrap; /* 1.0.20-D: nie umbrechen – passt ein Punkt nicht, verkleinert das Theme-Skript die Schrift (Danny, 22.10.2026) */
}
.e-off-canvas .elementor-nav-menu .elementor-sub-item{
  font-size: calc(var(--fp-offcanvas-menu-size) * .6) !important;
  line-height: 1.2 !important;
}
.e-off-canvas .elementor-nav-menu .sub-arrow{ font-size: calc(var(--fp-offcanvas-menu-size) * .45) !important; }
/* 1.0.15-D: Mit 60 px waren die Punkte durch Elementors Polster (19 px oben/unten) 107 px hoch – auf dem
   Desktop musste das Menü scrollen (Danny, 21.10.2026). Polster schmal, Zeilen dicht; und das Menü rückt an
   das Logo heran statt in die Mitte, damit unten Luft für das WhatsApp-Symbol bleibt. */
.e-off-canvas .elementor-nav-menu--main > li > a,
.e-off-canvas .elementor-nav-menu--main > li > .elementor-item{
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
.e-off-canvas .elementor-nav-menu--dropdown a,
.e-off-canvas .elementor-nav-menu--main .elementor-nav-menu--dropdown .elementor-sub-item{
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}
.e-off-canvas .e-con > .elementor-widget-nav-menu{
  margin-top: 16px !important;
}

/* Off-Canvas Navigation – Farben */
.elementor-nav-menu .elementor-item,
.elementor-nav-menu .elementor-sub-item{
  background-color: var(--fp-text) !important;
  color: var(--fp-text-invert) !important;
}

.elementor-nav-menu .sub-arrow,
.elementor-nav-menu .sub-arrow i,
.elementor-nav-menu .sub-arrow svg{
  color: var(--fp-text-invert) !important;
  fill: var(--fp-text-invert) !important;
  stroke: var(--fp-text-invert) !important;
}

.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item:focus,
.elementor-nav-menu .elementor-item.elementor-item-active,
.elementor-nav-menu .elementor-sub-item:hover,
.elementor-nav-menu .elementor-sub-item:focus,
.elementor-nav-menu .elementor-sub-item.elementor-item-active{
  background-color: var(--fp-text) !important;
  color: var(--fp-primary) !important;
}

.elementor-nav-menu .elementor-item:hover .sub-arrow,
.elementor-nav-menu .elementor-item:focus .sub-arrow,
.elementor-nav-menu .elementor-item.elementor-item-active .sub-arrow,
.elementor-nav-menu .elementor-sub-item:hover .sub-arrow,
.elementor-nav-menu .elementor-sub-item:focus .sub-arrow,
.elementor-nav-menu .elementor-sub-item.elementor-item-active .sub-arrow,
.elementor-nav-menu .elementor-item:hover .sub-arrow i,
.elementor-nav-menu .elementor-item:focus .sub-arrow i,
.elementor-nav-menu .elementor-item.elementor-item-active .sub-arrow i,
.elementor-nav-menu .elementor-sub-item:hover .sub-arrow i,
.elementor-nav-menu .elementor-sub-item:focus .sub-arrow i,
.elementor-nav-menu .elementor-sub-item.elementor-item-active .sub-arrow i,
.elementor-nav-menu .elementor-item:hover .sub-arrow svg,
.elementor-nav-menu .elementor-item:focus .sub-arrow svg,
.elementor-nav-menu .elementor-item.elementor-item-active .sub-arrow svg,
.elementor-nav-menu .elementor-sub-item:hover .sub-arrow svg,
.elementor-nav-menu .elementor-sub-item:focus .sub-arrow svg,
.elementor-nav-menu .elementor-sub-item.elementor-item-active .sub-arrow svg{
  color: var(--fp-primary) !important;
  fill: var(--fp-primary) !important;
  stroke: var(--fp-primary) !important;
}

.elementor-sticky--effects .stickyheader-section{
  background-color: var(--fp-text) !important;
}

/* Tabs */
.fp-tabs-primary .e-n-tab-title{
  background: var(--fp-primary) !important;
  color: var(--fp-text-invert) !important;
  transition: background .25s ease;
}

.fp-tabs-primary .e-n-tab-title:hover,
.fp-tabs-primary .e-n-tab-title[aria-selected="true"],
.fp-tabs-primary .e-n-tab-title:focus{
  background: var(--fp-text) !important;
  color: var(--fp-text-invert) !important;
}

.fp-tabs-classes .e-n-tab-title{
  background: var(--fp-bg-light) !important;
  color: var(--fp-accent) !important;
  transition: background .25s ease, color .25s ease;
}

.fp-tabs-classes .e-n-tab-title:hover,
.fp-tabs-classes .e-n-tab-title[aria-selected="true"],
.fp-tabs-classes .e-n-tab-title:focus{
  background: var(--fp-text) !important;
  color: var(--fp-text-invert) !important;
}

/* =========================================================
   H) GESCHÜTZT – PLUGIN OVERRIDES
   ========================================================= */

.ti-date{ color: var(--fp-text) !important; }

.ti-read-more span.ti-read-more-active{
  color: var(--fp-primary) !important;
}
.ti-read-more span.ti-read-more-active:hover{
  color: var(--fp-primary-dark) !important;
}

/* ========================================
   WHATSAPP PLUGIN – SYSTEM INTEGRATION
   Marketing Fahrschule
   ------------------------------------------------
   Ziel:
   - Plugin-Funktion im Backend
   - Optik über zentrales Designsystem
   - skalierbar für Klone / Mehrseitenbetrieb
======================================== */

/* Floating Button */
body #wa .wa__btn_popup,
body #wa .wa__btn_popup_icon,
body #wa .wa__btn_el{
  background: var(--mf-wa-btn-bg) !important;
  color: var(--mf-wa-btn-text) !important;
  border: 0 !important;
  border-radius:50% !important;
  box-shadow: var(--mf-wa-shadow) !important;
}

body #wa .wa__btn_popup:hover,
body #wa .wa__btn_popup:focus,
body #wa .wa__btn_el:hover,
body #wa .wa__btn_el:focus{
  background: var(--mf-wa-btn-bg-hover) !important;
  color: var(--mf-wa-btn-text) !important;
}

/* Button-Label / Text */
body #wa .wa__btn_popup_txt,
body #wa .wa__btn_txt,
body #wa .wa__btn_txt .wa__btn_title{
  color: var(--mf-wa-panel-text) !important;
  font-family: inherit !important;
}

body #wa .wa__btn_popup_txt{
  background: var(--mf-wa-panel-bg) !important;
  border: 1px solid var(--mf-wa-panel-border) !important;
  border-radius: var(--fp-radius) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.10) !important;
  padding: 10px 14px !important;
}

/* SVG / Icon-Farbe */
body #wa svg,
body #wa .wa__btn_popup_icon svg,
body #wa .wa__btn_el svg{
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Chat-Fenster / Popup */
body #wa .wa__popup_chat_box,
body #wa .wa__popup_content,
body #wa .wa__popup_whatsapp,
body #wa .wa__popup_chat_box .wa__popup_content{
  background: var(--mf-wa-panel-bg) !important;
  color: var(--mf-wa-panel-text) !important;
  border: 1px solid var(--mf-wa-panel-border) !important;
  border-radius: var(--mf-wa-radius) !important;
  box-shadow: var(--mf-wa-shadow) !important;
}

/* Header / Kopfbereich */
body #wa .wa__popup_heading,
body #wa .wa__popup_header,
body #wa .wa__popup_head{
  background: var(--mf-wa-header-bg) !important;
  color: var(--mf-wa-header-text) !important;
  border-top-left-radius: var(--mf-wa-radius) !important;
  border-top-right-radius: var(--mf-wa-radius) !important;
}

body #wa .wa__popup_heading *,
body #wa .wa__popup_header *,
body #wa .wa__popup_head *{
  color: var(--mf-wa-header-text) !important;
}

/* Titel / Intro / Hinweise */
body #wa .wa__popup_title{
  color: var(--mf-wa-header-text) !important;
  font-family: inherit !important;
  font-weight: 700 !important;
}

body #wa .wa__popup_intro,
body #wa .wa__popup_notice{
  color: var(--mf-wa-panel-muted) !important;
  font-family: inherit !important;
}

/* Agenten / Karten */
body #wa .wa__member,
body #wa .wa__cs_info,
body #wa .wa__popup_content .wa__member{
  background: var(--mf-wa-card-bg) !important;
  color: var(--mf-wa-card-text) !important;
  border: 1px solid var(--mf-wa-panel-border) !important;
  border-radius: var(--fp-radius) !important;
}

body #wa .wa__member:hover,
body #wa .wa__member:focus{
  background: var(--fp-bg-soft) !important;
}

/* Namen / Status */
body #wa .wa__member_name,
body #wa .wa__cs_info .wa__cs_name{
  color: var(--mf-wa-panel-text) !important;
  font-weight: 600 !important;
}

body #wa .wa__member_duty,
body #wa .wa__cs_info .wa__cs_status{
  color: var(--mf-wa-panel-muted) !important;
}

/* Typografie */
body #wa,
body #wa *{
  font-family: inherit !important;
}

/* Mobile */
@media (max-width: 767px){
  body #wa .wa__popup_chat_box,
  body #wa .wa__popup_content,
  body #wa .wa__popup_whatsapp{
    border-radius: 16px !important;
  }

  body #wa .wa__btn_popup_txt{
    max-width: 220px !important;
  }
}

.wcs-timetable--countdown.wcs-timetable--countdown-without-image{
  background: radial-gradient(
    at center,
    var(--fp-primary),
    var(--fp-primary-dark)
  ) !important;
}

/* Footer – Links in Icon List immer weiß */
.elementor-location-footer .elementor-icon-list-item a {
  color: var(--fp-bg-white) !important;
  text-decoration: none;
}

.elementor-location-footer .elementor-icon-list-item a:hover {
  color: var(--fp-bg-white) !important;
}

.elementor-location-footer .elementor-widget-icon-list .elementor-icon-list-item a {
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
}

/* Kontaktblock – Links weiß */
.fs-contact-block a {
  color: var(--fp-bg-white) !important;
  text-decoration: none;
}

.fs-contact-block a:hover {
  color: var(--fp-bg-white) !important;
  text-decoration: underline;
}

/* =========================================================
   PREMIUM – CONTACT SECTION LINK FIX
   ---------------------------------------------------------
   Links / Tel-Links in der dunklen Kontaktsektion:
   - normal weiß
   - Hover gold
   ========================================================= */
body.fp-theme-premium .dark-section.fp-dark-gradient .elementor-widget-icon-list .elementor-icon-list-item a,
body.fp-theme-premium .dark-section.fp-dark-gradient .elementor-widget-text-editor a,
body.fp-theme-premium .dark-section.fp-dark-gradient .fs-contact-block a{
  color: var(--fp-text-invert) !important;
}

body.fp-theme-premium .dark-section.fp-dark-gradient .elementor-widget-icon-list .elementor-icon-list-item a:hover,
body.fp-theme-premium .dark-section.fp-dark-gradient .elementor-widget-text-editor a:hover,
body.fp-theme-premium .dark-section.fp-dark-gradient .fs-contact-block a:hover{
  color: var(--fp-primary) !important;
}

/* =========================================================
   I) GESCHÜTZT – WCS SYSTEM
   ========================================================= */

/* =========================================================
   WCS – COLORS & TEXT FIX (GLOBAL / PREMIUM SAFE)
   ========================================================= */

/* Filter / States – ohne harte Farben */
.wcs-filters__title,
.wcs-filters__filter-wrapper:hover,
.wcs-filter:checked{
  color: var(--fp-primary) !important;
}

/* Terminliste – Lesbarkeit (Premium Dark Mode) */
body.fp-theme-premium [id^="wcs-app-"] .wcs-class__time-duration,
body.fp-theme-premium [id^="wcs-app-"] .wcs-class__time-duration *{
  color: var(--fp-text-invert) !important;
}

/* Zeit hervorheben (optional) */
body.fp-theme-premium [id^="wcs-app-"] .wcs-class__time-duration > span:first-child{
  color: var(--fp-primary) !important;
  font-weight: 600;
}

[id^="wcs-app-"]{
  min-width: 0 !important;
}

[id^="wcs-app-"] .wcs-timetable{
  min-width: 0 !important;
}

[id^="wcs-app-"] .wcs-timetable__list{
  min-width: 0 !important;
}

[id^="wcs-app-"] .wcs-timetable__list .wcs-class{
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 28px 0 !important;
  border-top: 1px solid var(--wcs-border-soft) !important;
}

[id^="wcs-app-"] .wcs-timetable__list .wcs-class__image,
[id^="wcs-app-"] .wcs-timetable__list .wcs-class__time,
[id^="wcs-app-"] .wcs-timetable__list .wcs-class__meta,
[id^="wcs-app-"] .wcs-timetable__list .wcs-class__action{
  margin: 0 !important;
  min-width: 0 !important;
}

[id^="wcs-app-"] .wcs-class__image{
  aspect-ratio: 1 / 1 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-radius: var(--wcs-radius) !important;
  overflow: hidden !important;
}

[id^="wcs-app-"] .wcs-class__time{
  align-self: center !important;
  color: var(--wcs-accent) !important;
}

[id^="wcs-app-"] .wcs-class__time .wcs-class__inner-flex{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

[id^="wcs-app-"] .wcs-class__meta{
  min-width: 0 !important;
  width: 100% !important;
}

[id^="wcs-app-"] .wcs-class__title{
  margin: 0 0 12px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: initial !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  line-height: 1.14 !important;
  max-width: 100% !important;
}

[id^="wcs-app-"] .wcs-class__time-duration{
  line-height: 1.35 !important;
}

[id^="wcs-app-"] .wcs-class__time-duration span{
  white-space: normal !important;
}

[id^="wcs-app-"] .wcs-class__action{
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

[id^="wcs-app-"] .wcs-class__action .wcs-class__inner-flex{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

[id^="wcs-app-"] .wcs-class__action .wcs-btn{
  white-space: nowrap !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ========================================
   WCS – ZENTRALE DESIGNANBINDUNG
   ------------------------------------------------
   Ersetzt instanzgebundene Altregeln wie:
   .wcs-timetable--XX { color: #... }
   Ziel: keine projektbezogenen Farb-Leaks mehr
======================================== */

[id^="wcs-app-"] .wcs-class__title,
[id^="wcs-app-"] .wcs-class__time,
[id^="wcs-app-"] .wcs-class__date,
[id^="wcs-app-"] .wcs-class__date-time,
[id^="wcs-app-"] .wcs-timetable__list .wcs-class__title a{
  color: var(--wcs-text) !important;
}

[id^="wcs-app-"] .wcs-class__time{
  color: var(--wcs-accent) !important;
}

[id^="wcs-app-"] .wcs-class__action .wcs-btn,
[id^="wcs-app-"] a.wcs-btn--action.wcs-btn{
  background: var(--wcs-accent) !important;
  color: var(--fp-text-invert) !important;
  border-radius: var(--fp-radius) !important;
}

[id^="wcs-app-"] .wcs-class__action .wcs-btn:hover,
[id^="wcs-app-"] .wcs-class__action .wcs-btn:focus,
[id^="wcs-app-"] a.wcs-btn--action.wcs-btn:hover,
[id^="wcs-app-"] a.wcs-btn--action.wcs-btn:focus{
  background: var(--wcs-accent-dark) !important;
  color: var(--fp-text-invert) !important;
}

[id^="wcs-app-"] .wcs-timetable--carousel .ti-time,
[id^="wcs-app-"] .wcs-timetable--carousel .wcs-class__title,
[id^="wcs-app-"] .wcs-timetable--carousel .wcs-class__title a{
  color: var(--wcs-accent) !important;
}

[id^="wcs-app-"] .wcs-timetable--carousel .owl-dots .active,
[id^="wcs-app-"] .wcs-timetable--carousel .owl-dot.active span{
  background-color: var(--wcs-accent) !important;
  color: var(--wcs-accent) !important;
}

[id^="wcs-app-"] .wcs-timetable--carousel .owl-nav .owl-prev:hover,
[id^="wcs-app-"] .wcs-timetable--carousel .owl-nav .owl-next:hover{
  color: var(--wcs-accent) !important;
}

[id^="wcs-app-"] .wcs-filters__filter-column,
[id^="wcs-app-"] .wcs-filters__filter-wrapper{
  color: var(--wcs-text) !important;
}

[id^="wcs-app-"] .wcs-filters__filter-wrapper select,
[id^="wcs-app-"] .wcs-filters__filter-wrapper input,
[id^="wcs-app-"] .wcs-filters__filter-wrapper .select2-selection{
  background: var(--wcs-bg) !important;
  color: var(--wcs-text) !important;
  border-color: var(--wcs-border) !important;
  border-radius: var(--wcs-radius) !important;
}

[id^="wcs-app-"] .wcs-filters__filter-wrapper span:last-child{
  white-space: nowrap !important;
}

.wcs-layout--two-filters [id^="wcs-app-"].wcs-timetable--filters-left,
.wcs-layout--one-filter [id^="wcs-app-"].wcs-timetable--filters-left{
  display: grid !important;
  grid-template-columns: 300px minmax(0, 1fr) !important;
  column-gap: 32px !important;
  align-items: start !important;
}

.wcs-layout--two-filters [id^="wcs-app-"] .wcs-filters__container,
.wcs-layout--one-filter [id^="wcs-app-"] .wcs-filters__container{
  width: 300px !important;
  max-width: 300px !important;
  min-width: 300px !important;
}

.wcs-layout--no-filters [id^="wcs-app-"]{
  display: block !important;
}

.wcs-layout--no-filters [id^="wcs-app-"].wcs-timetable--filters-left{
  display: block !important;
  grid-template-columns: none !important;
}

.wcs-layout--no-filters [id^="wcs-app-"] .wcs-filters__container{
  display: none !important;
}

.wcs-layout--no-filters [id^="wcs-app-"] .wcs-timetable__list{
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.wcs-list--centered [id^="wcs-app-"] .wcs-timetable__list{
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 1340px){
  .wcs-layout--two-filters [id^="wcs-app-"] .wcs-filters,
  .wcs-layout--one-filter [id^="wcs-app-"] .wcs-filters{
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }

  .wcs-layout--two-filters [id^="wcs-app-"] .wcs-filters__filter-column,
  .wcs-layout--one-filter [id^="wcs-app-"] .wcs-filters__filter-column{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

@media (min-width: 1800px){
  [id^="wcs-app-"] .wcs-timetable__list .wcs-class{
    display: grid !important;
    grid-template-columns: 170px 130px minmax(0, 1fr) 320px !important;
    column-gap: 28px !important;
    align-items: center !important;
  }

  [id^="wcs-app-"] .wcs-class__image{
    width: 170px !important;
    height: 170px !important;
  }

  [id^="wcs-app-"] .wcs-class__time{
    width: 130px !important;
    justify-self: center !important;
    text-align: center !important;
  }

  [id^="wcs-app-"] .wcs-class__action{
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
    justify-self: end !important;
  }

  [id^="wcs-app-"] .wcs-class__action .wcs-class__inner-flex{
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .wcs-layout--two-filters [id^="wcs-app-"].wcs-timetable--filters-left,
  .wcs-layout--one-filter [id^="wcs-app-"].wcs-timetable--filters-left{
    grid-template-columns: 260px minmax(0, 1fr) !important;
    column-gap: 28px !important;
  }

  .wcs-layout--two-filters [id^="wcs-app-"] .wcs-filters__container,
  .wcs-layout--one-filter [id^="wcs-app-"] .wcs-filters__container{
    width: 260px !important;
    max-width: 260px !important;
    min-width: 260px !important;
  }

  .wcs-layout--no-filters [id^="wcs-app-"] .wcs-timetable__list{
    max-width: 1300px !important;
  }

  .wcs-layout--no-filters [id^="wcs-app-"] .wcs-timetable__list .wcs-class{
    grid-template-columns: 170px 120px minmax(0, 1fr) 340px !important;
    column-gap: 24px !important;
  }

  .wcs-layout--no-filters [id^="wcs-app-"] .wcs-class__action{
    width: 340px !important;
    min-width: 340px !important;
    max-width: 340px !important;
  }
}

.wcs-addons--blink{
  animation: none !important;
  -webkit-animation: none !important;
}

@media (min-width: 1340px) and (max-width: 1799px){
  .wcs-layout--two-filters [id^="wcs-app-"].wcs-timetable--filters-left,
  .wcs-layout--one-filter [id^="wcs-app-"].wcs-timetable--filters-left{
    grid-template-columns: 220px minmax(0, 1fr) !important;
    column-gap: 22px !important;
  }

  .wcs-layout--two-filters [id^="wcs-app-"] .wcs-filters__container,
  .wcs-layout--one-filter [id^="wcs-app-"] .wcs-filters__container{
    width: 220px !important;
    max-width: 220px !important;
    min-width: 220px !important;
  }

  [id^="wcs-app-"] .wcs-timetable__list .wcs-class{
    display: grid !important;
    grid-template-columns: 140px 110px minmax(0, 1fr) 240px !important;
    column-gap: 20px !important;
    align-items: center !important;
  }

  [id^="wcs-app-"] .wcs-class__image{
    width: 140px !important;
    height: 140px !important;
  }

  [id^="wcs-app-"] .wcs-class__time{
    width: 110px !important;
    justify-self: center !important;
    text-align: center !important;
  }

  [id^="wcs-app-"] .wcs-class__action{
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    justify-self: end !important;
  }

  [id^="wcs-app-"] .wcs-class__action .wcs-class__inner-flex{
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }

  .wcs-layout--no-filters [id^="wcs-app-"] .wcs-timetable__list .wcs-class{
    grid-template-columns: 170px 110px minmax(0, 1fr) 320px !important;
    column-gap: 24px !important;
  }

  .wcs-layout--no-filters [id^="wcs-app-"] .wcs-class__action{
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
  }
}

@media (min-width: 1120px) and (max-width: 1339px){
  [id^="wcs-app-"] .wcs-timetable__list .wcs-class{
    display: grid !important;
    grid-template-columns: 128px 90px minmax(0, 1fr) 220px !important;
    grid-template-areas: "img time meta action" !important;
    column-gap: 18px !important;
    row-gap: 0 !important;
    align-items: center !important;
  }

  [id^="wcs-app-"] .wcs-class__image{
    grid-area: img !important;
    width: 128px !important;
    height: 128px !important;
    align-self: center !important;
  }

  [id^="wcs-app-"] .wcs-class__time{
    grid-area: time !important;
    width: 90px !important;
    justify-self: center !important;
    text-align: center !important;
    align-self: center !important;
  }

  [id^="wcs-app-"] .wcs-class__meta{
    grid-area: meta !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  [id^="wcs-app-"] .wcs-class__action{
    grid-area: action !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    justify-self: end !important;
    align-self: center !important;
  }

  [id^="wcs-app-"] .wcs-class__action .wcs-class__inner-flex{
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .wcs-layout--two-filters [id^="wcs-app-"] .wcs-class__action,
  .wcs-layout--one-filter [id^="wcs-app-"] .wcs-class__action{
    width: 170px !important;
    min-width: 170px !important;
    max-width: 170px !important;
  }

  .wcs-layout--two-filters [id^="wcs-app-"] .wcs-class__action .wcs-class__inner-flex,
  .wcs-layout--one-filter [id^="wcs-app-"] .wcs-class__action .wcs-class__inner-flex{
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .wcs-layout--two-filters [id^="wcs-app-"] .wcs-class__action .wcs-btn,
  .wcs-layout--one-filter [id^="wcs-app-"] .wcs-class__action .wcs-btn{
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
    margin: 0 !important;
  }
}

@media (min-width: 768px) and (max-width: 1119px){
  .wcs-layout--two-filters [id^="wcs-app-"].wcs-timetable--filters-left,
  .wcs-layout--one-filter [id^="wcs-app-"].wcs-timetable--filters-left{
    display: grid !important;
    grid-template-columns: 190px minmax(0, 1fr) !important;
    column-gap: 18px !important;
    align-items: start !important;
  }

  .wcs-layout--two-filters [id^="wcs-app-"] .wcs-filters__container,
  .wcs-layout--one-filter [id^="wcs-app-"] .wcs-filters__container{
    width: 190px !important;
    max-width: 190px !important;
    min-width: 190px !important;
  }

  .wcs-layout--two-filters [id^="wcs-app-"] .wcs-filters,
  .wcs-layout--one-filter [id^="wcs-app-"] .wcs-filters{
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  .wcs-layout--two-filters [id^="wcs-app-"] .wcs-filters__filter-column,
  .wcs-layout--one-filter [id^="wcs-app-"] .wcs-filters__filter-column{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 1.2vh 0 !important;
    margin-bottom: 0 !important;
  }

  [id^="wcs-app-"] .wcs-timetable__list .wcs-class{
    display: grid !important;
    grid-template-columns: 128px 80px minmax(0, 1fr) 170px !important;
    grid-template-areas: "img time meta action" !important;
    column-gap: 16px !important;
    row-gap: 0 !important;
    align-items: center !important;
  }

  [id^="wcs-app-"] .wcs-class__image{
    grid-area: img !important;
    width: 128px !important;
    height: 128px !important;
    align-self: center !important;
  }

  [id^="wcs-app-"] .wcs-class__time{
    grid-area: time !important;
    width: 80px !important;
    justify-self: center !important;
    text-align: center !important;
    align-self: center !important;
  }

  [id^="wcs-app-"] .wcs-class__meta{
    grid-area: meta !important;
    width: 100% !important;
  }

  [id^="wcs-app-"] .wcs-class__action{
    grid-area: action !important;
    width: 170px !important;
    min-width: 170px !important;
    max-width: 170px !important;
    justify-self: end !important;
    align-self: center !important;
  }

  [id^="wcs-app-"] .wcs-class__action .wcs-class__inner-flex{
    width: 100% !important;
    gap: 8px !important;
  }

  .wcs-layout--two-filters [id^="wcs-app-"] .wcs-class__action .wcs-class__inner-flex,
  .wcs-layout--one-filter [id^="wcs-app-"] .wcs-class__action .wcs-class__inner-flex{
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
  }

  .wcs-layout--two-filters [id^="wcs-app-"] .wcs-class__action .wcs-btn,
  .wcs-layout--one-filter [id^="wcs-app-"] .wcs-class__action .wcs-btn{
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
  }
}

@media (max-width: 767px){
  .wcs-layout--two-filters [id^="wcs-app-"].wcs-timetable--filters-left,
  .wcs-layout--one-filter [id^="wcs-app-"].wcs-timetable--filters-left{
    display: block !important;
  }

  .wcs-layout--two-filters [id^="wcs-app-"] .wcs-filters__container,
  .wcs-layout--one-filter [id^="wcs-app-"] .wcs-filters__container{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 24px !important;
  }

  .wcs-layout--two-filters [id^="wcs-app-"] .wcs-filters{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    align-items: start !important;
    width: 100% !important;
  }

  .wcs-layout--two-filters [id^="wcs-app-"] .wcs-filters__filter-column{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 2vh 0 !important;
    margin-bottom: 1.5vh !important;
  }

  .wcs-layout--one-filter [id^="wcs-app-"] .wcs-filters{
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .wcs-layout--one-filter [id^="wcs-app-"] .wcs-filters__filter-column{
    flex: 0 1 100% !important;
    width: 100% !important;
    max-width: 320px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 2vh 0 !important;
    text-align: left !important;
  }

  .wcs-layout--one-filter [id^="wcs-app-"] .wcs-filters__filter-wrapper{
    width: 100% !important;
    justify-content: flex-start !important;
  }

  [id^="wcs-app-"] .wcs-timetable__list .wcs-class{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "time"
      "meta"
      "action" !important;
    row-gap: 8px !important;
    column-gap: 0 !important;
    align-items: start !important;
    padding: 18px 0 !important;
  }

  [id^="wcs-app-"] .wcs-class__image{
    display: none !important;
  }

  [id^="wcs-app-"] .wcs-class__time{
    grid-area: time !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    justify-self: start !important;
    align-self: start !important;
  }

  [id^="wcs-app-"] .wcs-class__time .wcs-class__inner-flex{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  [id^="wcs-app-"] .wcs-class__time .wcs-class__inner-flex > span{
    display: inline !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
    flex: 0 0 auto !important;
    font-size: 16px !important;
    font-weight: 400 !important;
  }

  [id^="wcs-app-"] .wcs-class__meta{
    grid-area: meta !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  [id^="wcs-app-"] .wcs-class__meta .wcs-class__inner-flex{
    display: block !important;
  }

  [id^="wcs-app-"] .wcs-class__title{
    margin: 0 0 6px !important;
    max-width: none !important;
    font-size: 24px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
  }

  [id^="wcs-app-"] .wcs-class__time-duration{
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  [id^="wcs-app-"] .wcs-class__action{
    grid-area: action !important;
    width: 100% !important;
    margin: 2px 0 0 !important;
  }

  [id^="wcs-app-"] .wcs-class__action .wcs-class__inner-flex{
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  [id^="wcs-app-"] .wcs-class__action .wcs-btn{
    padding: 8px 14px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
}

[id^="wcs-app-"] li.wcs-class.wcs-timetable__zero-data{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 180px !important;
  padding: 0 !important;
  text-align: center !important;
}

[id^="wcs-app-"] li.wcs-class.wcs-timetable__zero-data .wcs-class__image,
[id^="wcs-app-"] li.wcs-class.wcs-timetable__zero-data .wcs-class__time,
[id^="wcs-app-"] li.wcs-class.wcs-timetable__zero-data .wcs-class__action{
  display: none !important;
}

[id^="wcs-app-"] li.wcs-class.wcs-timetable__zero-data .wcs-class__meta{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
}

[id^="wcs-app-"] li.wcs-class.wcs-timetable__zero-data .wcs-class__meta .wcs-class__inner-flex{
  display: block !important;
  width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
}

[id^="wcs-app-"] li.wcs-class.wcs-timetable__zero-data .wcs-class__meta h3{
  display: inline-block !important;
  margin: 0 auto !important;
  white-space: nowrap !important;
  text-align: center !important;
}

/* WCS Carousel */
[id^="wcs-app-"] .wcs-timetable--carousel .wcs-class{
  display: block !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 20px !important;
  border-top: 0 !important;
  box-sizing: border-box !important;
}

[id^="wcs-app-"] .wcs-timetable--carousel .wcs-class__image{
  display: block !important;
  width: auto !important;
  height: auto !important;
  aspect-ratio: auto !important;
  margin: 0 0 16px !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

[id^="wcs-app-"] .wcs-timetable--carousel .wcs-class__image img{
  border-radius: 0 !important;
  overflow: visible !important;
}

[id^="wcs-app-"] .wcs-timetable--carousel .wcs-class__time{
  width: auto !important;
  text-align: left !important;
  justify-self: auto !important;
  align-self: auto !important;
}

[id^="wcs-app-"] .wcs-timetable--carousel .wcs-class__time .wcs-class__inner-flex{
  display: block !important;
  flex-direction: initial !important;
  align-items: initial !important;
  gap: 0 !important;
}

[id^="wcs-app-"] .wcs-timetable--carousel .wcs-class__meta,
[id^="wcs-app-"] .wcs-timetable--carousel .wcs-class__title,
[id^="wcs-app-"] .wcs-timetable--carousel .wcs-class__date-time{
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

[id^="wcs-app-"] .wcs-timetable--carousel .wcs-spacer{
  display: block !important;
}

[id^="wcs-app-"] .wcs-timetable--carousel .wcs-class__action{
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

[id^="wcs-app-"] .wcs-timetable--carousel .wcs-class .wcs-class__meta,
[id^="wcs-app-"] .wcs-timetable--carousel .wcs-class > .wcs-class__meta{
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

[id^="wcs-app-"] .wcs-timetable--carousel .wcs-class .wcs-class__meta > span,
[id^="wcs-app-"] .wcs-timetable--carousel .wcs-class > .wcs-class__meta > span{
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
}

[id^="wcs-app-"] .wcs-timetable--carousel .wcs-class .wcs-class__meta > span:last-child,
[id^="wcs-app-"] .wcs-timetable--carousel .wcs-class > .wcs-class__meta > span:last-child{
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.single-class [id^="wcs-app-"] .wcs-timetable--carousel .wcs-class__date-time{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

body.single-class [id^="wcs-app-"] .wcs-timetable--carousel .wcs-class__time,
body.single-class [id^="wcs-app-"] .wcs-timetable--carousel .wcs-class__date{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}

body.single-class [id^="wcs-app-"] .wcs-timetable--carousel .wcs-class__time,
body.single-class [id^="wcs-app-"] .wcs-timetable--carousel .wcs-class__time > span:last-child,
body.single-class [id^="wcs-app-"] .wcs-timetable--carousel .wcs-class__date span,
body.single-class [id^="wcs-app-"] .wcs-timetable--carousel .wcs-class__time span{
  white-space: nowrap !important;
}

@media (max-width: 767px){
  [id^="wcs-app-"] .wcs-timetable--carousel .wcs-class{
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
  }

  [id^="wcs-app-"] .wcs-timetable--carousel .wcs-class__image{
    display: block !important;
  }
}

[id^="wcs-app-"] .wcs-timetable--carousel .owl-stage{
  padding-left: 0 !important;
}

[id^="wcs-app-"].wcs-timetable__container:has(.wcs-timetable--carousel){
  padding: 0 !important;
}

.fp-text-primary{
  color: var(--fp-primary) !important;
}

.fp-text-white{
  color: var(--fp-text-invert) !important;
}

.fp-text-accent{
  color: var(--fp-accent) !important;
}

/* ========================================
   TEXT HIGHLIGHTS FIX (ELEMENTOR HEADLINES)
======================================== */
.elementor-widget-heading .elementor-heading-title .fp-text-primary{
  color: var(--fp-primary) !important;
  -webkit-text-fill-color: var(--fp-primary) !important;
}
.elementor-widget-heading .elementor-heading-title .fp-text-white{
  color: var(--fp-text-invert) !important;
  -webkit-text-fill-color: var(--fp-text-invert) !important;
}
.elementor-widget-heading .elementor-heading-title .fp-text-accent{
  color: var(--fp-accent) !important;
  -webkit-text-fill-color: var(--fp-accent) !important;
}

body.single-class h1,
body.single-class .elementor-widget-heading h1.elementor-heading-title{
  color: var(--fp-primary) !important;
}

.wcs-btn--action {
  background-color: var(--fp-primary) !important;
  color: var(--fp-text-invert) !important;
  border-radius: var(--fp-radius);
}

.wcs-btn--action:hover {
  background-color: var(--fp-primary-dark) !important;
}

.bkf-detail-buttons a.wcs-btn--action{
  background: var(--fp-primary) !important;
  color: var(--fp-text-invert) !important;
  box-shadow: 0 0 12px rgba(0,0,0,0.15) !important;
}

.fp-footer-dark{
  background: var(--fp-text) !important;
  color: var(--fp-text-invert) !important;
}

.fp-footer-dark a{
  color: var(--fp-text-invert) !important;
  opacity: 0.85;
}

.fp-footer-dark a:hover{
  opacity: 1;
}

/* WCS Carousel auf dunklem Hintergrund – Text weiß */
body.single-class [id^="wcs-app-"] .wcs-timetable--carousel .wcs-class__date span,
body.single-class [id^="wcs-app-"] .wcs-timetable--carousel .wcs-class__time span,
body.single-class [id^="wcs-app-"] .wcs-timetable--carousel .wcs-class__time > span:last-child{
  color: var(--fp-text-invert) !important;
}

/* WCS Carousel auf dunklem Hintergrund – Kalender/Icon weiß */
body.single-class [id^="wcs-app-"] .wcs-timetable--carousel .ti-calendar:before,
body.single-class [id^="wcs-app-"] .wcs-timetable--carousel .ti-time:before,
body.single-class [id^="wcs-app-"] .wcs-timetable--carousel .ti-location-pin:before{
  color: var(--fp-text-invert) !important;
}

/* =========================================================
   WhatsApp Button – FIX (Form + Hover sauber)
========================================================= */

/* Button selbst */
[id*="wa"], 
[class*="whatsapp"], 
[class*="wa-button"]{
  overflow: hidden !important;
}

/* Hintergrund korrekt setzen */
[id*="wa"], 
[class*="whatsapp"], 
[class*="wa-button"]{
  background: var(--mf-wa-btn-bg) !important;
  color: var(--mf-wa-btn-text) !important;
}

/* Hover NUR leicht verändern (kein Overlay!) */
[id*="wa"]:hover, 
[class*="whatsapp"]:hover, 
[class*="wa-button"]:hover{
  background: var(--mf-wa-btn-bg-hover) !important;
}

/* WICHTIG: Pseudo-Overlay killen */
[id*="wa"]::before,
[id*="wa"]::after,
[class*="whatsapp"]::before,
[class*="whatsapp"]::after,
[class*="wa-button"]::before,
[class*="wa-button"]::after{
  display: none !important;
  content: none !important;
}

/* Falls Plugin ein inneres DIV für Hover nutzt */
[id*="wa"] div,
[class*="whatsapp"] div{
  background: transparent !important;
}

/* =========================================================
   EYEBROW SYSTEM
   ========================================================= */

.fp-eyebrow,
.fp-eyebrow .elementor-heading-title{
  font-family: var(--fp-eyebrow-font-family) !important;
  font-size: var(--fp-eyebrow-font-size) !important;
  line-height: var(--fp-eyebrow-line-height) !important;
  letter-spacing: var(--fp-eyebrow-letter-spacing) !important;
  text-transform: var(--fp-eyebrow-text-transform) !important;
  color: var(--fp-eyebrow-color) !important;
  margin: 0 !important;
}

/* Invertierte Variante auf dunklem Hintergrund */
.dark-section .fp-eyebrow,
.dark-section .fp-eyebrow .elementor-heading-title,
.fp-bg-dark .fp-eyebrow,
.fp-bg-dark .fp-eyebrow .elementor-heading-title,
.fp-dark-gradient .fp-eyebrow,
.fp-dark-gradient .fp-eyebrow .elementor-heading-title,
.dark-gradient-primary .fp-eyebrow,
.dark-gradient-primary .fp-eyebrow .elementor-heading-title,
.fp-footer-gradient .fp-eyebrow,
.fp-footer-gradient .fp-eyebrow .elementor-heading-title{
  color: var(--fp-eyebrow-color-invert) !important;
}

/* WhatsApp Icon (Pseudo-Element) – gezielt weiß */
body #wa .wa__btn_popup_icon::before{
  color: var(--mf-wa-btn-text) !important;
}

/* ========================================
   WCS BUTTON SYSTEM FIX
   ======================================== */

/* Default Button (Details) */
.wcs-btn{
  background: transparent !important;
  color: var(--fp-text) !important;
  border: 1px solid var(--fp-border-light) !important;
}

/* Hover für Details */
.wcs-btn:hover{
  background: var(--fp-bg-light) !important;
  color: var(--fp-text) !important;
}

/* Action Button bleibt Primary */
.wcs-btn.wcs-btn--action{
  background: var(--fp-primary) !important;
  color: var(--fp-text-invert) !important;
  border: none !important;
}

/* Hover Action */
.wcs-btn.wcs-btn--action:hover{
  background: var(--fp-primary-dark) !important;
}

/* ========================================
   WCS BUTTON SYSTEM FIX – spezifisch
   ======================================== */

/* Default Button (Details) */
[id^="wcs-app-"] .wcs-class__action .wcs-btn:not(.wcs-btn--action){
  background: var(--fp-bg-light) !important;
  color: var(--fp-text) !important;
  border: 1px solid var(--fp-border-light) !important;
  box-shadow: none !important;
}

/* Hover für Details */
[id^="wcs-app-"] .wcs-class__action .wcs-btn:not(.wcs-btn--action):hover,
[id^="wcs-app-"] .wcs-class__action .wcs-btn:not(.wcs-btn--action):focus{
  background: var(--fp-bg-soft) !important;
  color: var(--fp-text) !important;
  border-color: var(--fp-border-light) !important;
}

/* Action Button bleibt Primary */
[id^="wcs-app-"] .wcs-class__action .wcs-btn.wcs-btn--action,
[id^="wcs-app-"] a.wcs-btn.wcs-btn--action{
  background: var(--fp-primary) !important;
  color: var(--fp-text-invert) !important;
  border: none !important;
}

/* Hover Action */
[id^="wcs-app-"] .wcs-class__action .wcs-btn.wcs-btn--action:hover,
[id^="wcs-app-"] .wcs-class__action .wcs-btn.wcs-btn--action:focus,
[id^="wcs-app-"] a.wcs-btn.wcs-btn--action:hover,
[id^="wcs-app-"] a.wcs-btn.wcs-btn--action:focus{
  background: var(--fp-primary-dark) !important;
  color: var(--fp-text-invert) !important;
}

/* =========================================================
   FONT SYSTEM (Marketing Fahrschule)
   ========================================================= */

:root{
  /* ========================================
     HIGHLIGHT BUTTON TOKENS
  ======================================== */
  --fp-highlight-button-bg: var(--fp-accent);
  --fp-highlight-button-bg-hover: var(--fp-primary-dark);
  --fp-highlight-button-text: var(--fp-text-invert);
  --fp-highlight-button-shadow: 0 8px 20px rgba(0,0,0,.25);

  --fp-font-headline: "League Gothic", sans-serif;
  /* 1.0.13-D: PT Sans statt Tahoma. Tahoma fehlt auf iPhone, iPad und Mac - dort sah jeder eine Ersatzschrift.
     PT Sans (SIL Open Font License, lizenzfrei) ist ihr nächster freier Verwandter und liegt als eigene
     Schrift im Font-Manager; Tahoma bleibt als Rückfall für Rechner, die die Datei nicht laden. */
  --fp-font-body: "PT Sans", "Tahoma", sans-serif;

  /* EYEBROW SYSTEM – TOKENS */
  --fp-eyebrow-font-family: "Saira Condensed", sans-serif;
  --fp-eyebrow-font-size: 1.2em;
  --fp-eyebrow-font-size-mobile: 1em;
  --fp-eyebrow-line-height: 1.2;
  --fp-eyebrow-letter-spacing: 0;
  --fp-eyebrow-text-transform: uppercase;
  --fp-eyebrow-color: var(--fp-text);
  --fp-eyebrow-color-invert: var(--fp-text-invert);
}

/* =========================================================
   GLOBAL HEADLINES FIX
   ========================================================= */

h1, h2,
.elementor-widget-heading h1,
.elementor-widget-heading h2{
  font-family: var(--fp-font-headline) !important;
  line-height: 1 !important;
}

/* =========================================================
   HERO H1
   ========================================================= */

.fp-hero-h1 .elementor-heading-title{
  font-size: 6.9em !important;
}

@media (min-width: 2400px){
  .fp-hero-h1 .elementor-heading-title{
    font-size: 9.5em !important;
  }
}

@media (max-width: 1200px){
  .fp-hero-h1 .elementor-heading-title{
    font-size: 5.4em !important;
  }
}

@media (max-width: 1024px){
  .fp-hero-h1 .elementor-heading-title{
    font-size: 5em !important;
  }
}

@media (max-width: 880px){
  .fp-hero-h1 .elementor-heading-title{
    font-size: 4.6em !important;
  }
}

@media (max-width: 767px){
  .fp-hero-h1 .elementor-heading-title{
    font-size: 48px !important;
  }
}

/* =========================================================
   H1 – TERMINSEITEN
   ========================================================= */

body.single-class h1,
body.single-class .elementor-widget-heading h1{
  font-size: 3.2em !important;
}

@media (max-width: 1200px){
  body.single-class h1,
  body.single-class .elementor-widget-heading h1{
    font-size: 2.9em !important;
  }
}

@media (max-width: 880px){
  body.single-class h1,
  body.single-class .elementor-widget-heading h1{
    font-size: 2.6em !important;
  }
}

@media (max-width: 767px){
  body.single-class h1,
  body.single-class .elementor-widget-heading h1{
    font-size: 30px !important;
  }
}

/* =========================================================
   H2 SYSTEM
   ========================================================= */

h2,
.elementor-widget-heading h2{
  font-family: var(--fp-font-headline) !important;
  line-height: 1 !important;
}

/* =========================================================
   H2 – TERMINSEITEN
   ========================================================= */

body.single-class h2,
body.single-class .elementor-widget-heading h2{
  font-size: 2.1em !important;
}

@media (max-width: 767px){
  body.single-class h2,
  body.single-class .elementor-widget-heading h2{
    font-size: 2em !important;
  }
}

/* =========================================================
   GLOBAL LINK COLORS – SYSTEM OVERRIDE
   ========================================================= */

a{
  color: var(--fp-primary);
  text-decoration: none;
}

a:hover,
a:focus{
  color: var(--fp-primary-dark);
  text-decoration: none;
}

/* Elementor spezifisch (verhindert globale Farben-Leaks) */
.elementor a{
  color: var(--fp-primary);
}

.elementor a:hover,
.elementor a:focus{
  color: var(--fp-primary-dark);
}

/* =========================================================
   TABS (SYSTEM)
   ========================================================= */

:root{
  /* ========================================
     HIGHLIGHT BUTTON TOKENS
  ======================================== */
  --fp-highlight-button-bg: var(--fp-accent);
  --fp-highlight-button-bg-hover: var(--fp-primary-dark);
  --fp-highlight-button-text: var(--fp-text-invert);
  --fp-highlight-button-shadow: 0 8px 20px rgba(0,0,0,.25);

  --fp-tab-bg: var(--fp-bg-light);
  --fp-tab-bg-hover: var(--fp-bg-soft);
  --fp-tab-bg-active: var(--fp-text);
  --fp-tab-text: var(--fp-primary);
  --fp-tab-text-hover: var(--fp-primary-dark);
  --fp-tab-text-active: var(--fp-text-invert);
  --fp-tab-border: var(--fp-border-light);
  --fp-tab-radius: var(--fp-radius);
}

.fp-tabs .e-n-tab-title{
  background: var(--fp-tab-bg) !important;
  color: var(--fp-tab-text) !important;
  border: 1px solid var(--fp-tab-border) !important;
  border-radius: var(--fp-tab-radius) !important;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.fp-tabs .e-n-tab-title:hover,
.fp-tabs .e-n-tab-title:focus{
  background: var(--fp-tab-bg-hover) !important;
  color: var(--fp-tab-text-hover) !important;
}

.fp-tabs .e-n-tab-title[aria-selected="true"],
.fp-tabs .e-n-tab-title.elementor-active{
  background: var(--fp-tab-bg-active) !important;
  color: var(--fp-tab-text-active) !important;
  border-color: var(--fp-tab-bg-active) !important;
}

.fp-tabs .e-n-tab-title[aria-selected="true"] *,
.fp-tabs .e-n-tab-title.elementor-active *{
  color: var(--fp-tab-text-active) !important;
}

.fp-tabs .e-n-tabs-content{
  border-top: 0 !important;
}

@media (max-width: 767px){
  .fp-tabs .e-n-tab-title{
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* =========================================================
   TABS – SAFE INITIAL STATE FIX
   ========================================================= */

.fp-tabs .e-n-tabs-heading .e-n-tab-title,
.fp-tabs .e-n-tabs-heading .e-n-tab-title span,
.fp-tabs .e-n-tabs-heading .e-n-tab-title .e-n-tab-title-text{
  color: var(--fp-tab-text) !important;
}

.fp-tabs .e-n-tabs-heading .e-n-tab-title{
  background: var(--fp-tab-bg) !important;
  border-color: var(--fp-tab-border) !important;
}

.fp-tabs .e-n-tabs-heading .e-n-tab-title[aria-selected="true"],
.fp-tabs .e-n-tabs-heading .e-n-tab-title[aria-selected="true"] span,
.fp-tabs .e-n-tabs-heading .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text{
  color: var(--fp-tab-text-active) !important;
}

.fp-tabs .e-n-tabs-heading .e-n-tab-title[aria-selected="true"]{
  background: var(--fp-tab-bg-active) !important;
  border-color: var(--fp-tab-bg-active) !important;
}

/* =========================================================
   SURFACE SYSTEM (ROBUST – HIERARCHIE-UNABHÄNGIG)
   ========================================================= */

.fp-surface{
  background: var(--fp-bg-white);
  color: var(--fp-text);
}

/* Wenn irgendwo im Elternbereich ein Dark-Kontext existiert */
.fp-bg-dark .fp-surface{
  background: var(--fp-bg-soft);
  color: var(--fp-text-invert);
}

/* FALLBACK: Wenn Elementor die Struktur "kaputt" macht */
.fp-bg-dark.fp-surface{
  background: var(--fp-bg-soft);
  color: var(--fp-text-invert);
}

/* =========================================================
   THEME: PREMIUM – DARK MODE OVERRIDES
   ========================================================= */

body.fp-theme-premium{
  background: var(--fp-surface-dark-3);
  color: var(--fp-text-invert);
}

body.fp-theme-premium h2,
body.fp-theme-premium .elementor-widget-heading h2.elementor-heading-title,
body.fp-theme-premium .elementor-widget-heading h3.elementor-heading-title,
body.fp-theme-premium .elementor-widget-heading h4.elementor-heading-title,
body.fp-theme-premium .elementor-widget-heading h5.elementor-heading-title,
body.fp-theme-premium .elementor-widget-heading h6.elementor-heading-title{
  color: var(--fp-text-invert) !important;
}

body.fp-theme-premium .fp-section-light,
body.fp-theme-premium .fp-section-soft,
body.fp-theme-premium .fp-surface{
  background: var(--fp-surface-dark-2) !important;
  color: var(--fp-text-invert) !important;
}

body.fp-theme-premium .fp-bg-white{
  background: var(--fp-surface-dark-3) !important;
}

body.fp-theme-premium .fp-bg-light,
body.fp-theme-premium .bg-light{
  background: var(--fp-surface-dark-2) !important;
}

body.fp-theme-premium .bg-white{
  background: var(--fp-surface-dark-3) !important;
}

body.fp-theme-premium .elementor-widget-accordion .elementor-accordion .elementor-tab-content{
  background-color: var(--fp-surface-dark-2) !important;
  color: var(--fp-text-invert) !important;
}

body.fp-theme-premium .elementor-button{
  color: var(--fp-text-on-brand) !important;
}

body.fp-theme-premium .button-outline-dark .elementor-button{
  background: transparent !important;
  color: var(--fp-primary) !important;
  box-shadow: inset 0 0 0 1px var(--fp-primary) !important;
}

body.fp-theme-premium .button-outline-dark .elementor-button:hover{
  background: var(--fp-primary) !important;
  color: var(--fp-text-on-brand) !important;
}

body.fp-theme-premium .button-outline-light .elementor-button{
  background: transparent !important;
  color: var(--fp-text-invert) !important;
  box-shadow: inset 0 0 0 1px var(--fp-text-invert) !important;
}

body.fp-theme-premium .button-outline-light .elementor-button:hover{
  background: var(--fp-text-invert) !important;
  color: var(--fp-text) !important;
}

body.fp-theme-premium .fp-tabs .e-n-tab-title{
  background: var(--fp-surface-dark-1) !important;
  color: var(--fp-primary) !important;
  border-color: var(--fp-border-light) !important;
}

body.fp-theme-premium .fp-tabs .e-n-tab-title:hover,
body.fp-theme-premium .fp-tabs .e-n-tab-title:focus{
  background: var(--fp-surface-dark-2) !important;
  color: var(--fp-primary) !important;
}

body.fp-theme-premium .fp-tabs .e-n-tab-title[aria-selected="true"],
body.fp-theme-premium .fp-tabs .e-n-tab-title.elementor-active{
  background: var(--fp-primary) !important;
  color: var(--fp-text-on-brand) !important;
  border-color: var(--fp-primary) !important;
}

body.fp-theme-premium .fp-tabs .e-n-tab-title[aria-selected="true"] *,
body.fp-theme-premium .fp-tabs .e-n-tab-title.elementor-active *{
  color: var(--fp-text-on-brand) !important;
}

body.fp-theme-premium a{
  color: var(--fp-primary);
}

body.fp-theme-premium a:hover,
body.fp-theme-premium a:focus{
  color: var(--fp-primary-dark);
}

body.fp-theme-premium .elementor-nav-menu .elementor-item:hover,
body.fp-theme-premium .elementor-nav-menu .elementor-item:focus,
body.fp-theme-premium .elementor-nav-menu .elementor-item.elementor-item-active,
body.fp-theme-premium .elementor-nav-menu .elementor-sub-item:hover,
body.fp-theme-premium .elementor-nav-menu .elementor-sub-item:focus,
body.fp-theme-premium .elementor-nav-menu .elementor-sub-item.elementor-item-active{
  color: var(--fp-primary) !important;
}

body.fp-theme-premium .fp-footer-dark{
  background: var(--fp-surface-dark-3) !important;
  color: var(--fp-text-invert) !important;
}

/* =========================================================
   TRUSTINDEX – PREMIUM THEME
   Premium-spezifische Aufhellung entfernen:
   Trustindex-Inhalte sollen wie im Standard dunkel bleiben.
   ========================================================= */

/* Sterne/Branding bleiben unberührt; nur Text auf dunkel zurückholen. */

/* =========================================================
   THEME: PREMIUM – FINISH FIXES
   ========================================================= */

/* Icon List Links in dunklen Premium-Bereichen */
body.fp-theme-premium .elementor-widget-icon-list .elementor-icon-list-item a{
  color: var(--fp-text-invert) !important;
}

body.fp-theme-premium .elementor-widget-icon-list .elementor-icon-list-item a:hover,
body.fp-theme-premium .elementor-widget-icon-list .elementor-icon-list-item a:focus{
  color: var(--fp-primary) !important;
}

body.fp-theme-premium .elementor-widget-icon-list .elementor-icon-list-icon i,
body.fp-theme-premium .elementor-widget-icon-list .elementor-icon-list-icon svg{
  color: var(--fp-primary) !important;
  fill: var(--fp-primary) !important;
  stroke: var(--fp-primary) !important;
}

/* Globaler Page Background im Premium-Mode */
body.fp-theme-premium{
  background-color: var(--fp-surface-dark-3) !important;
}

body.fp-theme-premium .elementor[data-elementor-type="wp-page"],
body.fp-theme-premium .elementor[data-elementor-type="single-page"],
body.fp-theme-premium .elementor-section-wrap,
body.fp-theme-premium .e-con{
  background-color: transparent;
}

/* Divider / Übergang Hero -> Soft */
body.fp-theme-premium .hero-wrap.to-soft{
  border-bottom-color: var(--fp-surface-dark-2) !important;
  background-image: linear-gradient(
    to bottom,
    transparent 0%,
    var(--fp-surface-dark-2) 100%
  ) !important;
}

body.fp-theme-premium .hero-wrap.to-soft::before,
body.fp-theme-premium .hero-wrap.to-soft::after{
  border-color: var(--fp-surface-dark-2) !important;
  background-color: var(--fp-surface-dark-2) !important;
}

/* =========================================================
   THEME: PREMIUM – V5 CONTRAST / LOOP / DIVIDER FIXES
   ========================================================= */

/* Globaler Seitenhintergrund wie fp-bg-dark */
body.fp-theme-premium{
  background-color: var(--fp-text) !important;
}

/* Eyebrows auf dunklen Premium-Flächen sicher invertieren */
body.fp-theme-premium .fp-eyebrow,
body.fp-theme-premium .fp-eyebrow .elementor-heading-title,
body.fp-theme-premium .dark-section .fp-eyebrow,
body.fp-theme-premium .dark-section .fp-eyebrow .elementor-heading-title,
body.fp-theme-premium .fp-bg-dark .fp-eyebrow,
body.fp-theme-premium .fp-bg-dark .fp-eyebrow .elementor-heading-title,
body.fp-theme-premium .fp-dark-gradient .fp-eyebrow,
body.fp-theme-premium .fp-dark-gradient .fp-eyebrow .elementor-heading-title,
body.fp-theme-premium .dark-gradient-primary .fp-eyebrow,
body.fp-theme-premium .dark-gradient-primary .fp-eyebrow .elementor-heading-title,
body.fp-theme-premium .fp-footer-gradient .fp-eyebrow,
body.fp-theme-premium .fp-footer-gradient .fp-eyebrow .elementor-heading-title{
  color: var(--fp-text-invert) !important;
}

/* Übergang / Divider wirklich dunkel ziehen */
body.fp-theme-premium .hero-wrap.to-soft,
body.fp-theme-premium .to-soft{
  border-bottom-color: var(--fp-text) !important;
  background-image: linear-gradient(
    to bottom,
    transparent 0%,
    var(--fp-text) 100%
  ) !important;
}

body.fp-theme-premium .hero-wrap.to-soft::before,
body.fp-theme-premium .hero-wrap.to-soft::after,
body.fp-theme-premium .to-soft::before,
body.fp-theme-premium .to-soft::after{
  border-color: var(--fp-text) !important;
  background-color: var(--fp-text) !important;
}

/* Loop-/Card-Hintergründe: weiße Ecken und helle Restflächen beseitigen */
body.fp-theme-premium .elementor-loop-container,
body.fp-theme-premium .elementor-posts-container,
body.fp-theme-premium .loop-card,
body.fp-theme-premium .loop-card__inner,
body.fp-theme-premium .loop-card__content,
body.fp-theme-premium .elementor-loop-item,
body.fp-theme-premium .elementor-loop-item > *{
  background-color: transparent;
}

body.fp-theme-premium .loop-card__content,
body.fp-theme-premium .elementor-loop-item .loop-card__content{
  background: var(--fp-gradient-brand) !important;
  color: var(--fp-text-on-brand) !important;
}

/* Text auf goldenen Loop-/Highlight-Flächen dunkel ziehen */
body.fp-theme-premium .loop-card__content,
body.fp-theme-premium .loop-card__content *,
body.fp-theme-premium .fp-surface-highlight,
body.fp-theme-premium .fp-surface-highlight *,
body.fp-theme-premium .fp-theme-premium-on-brand,
body.fp-theme-premium .fp-theme-premium-on-brand *{
  color: var(--fp-text-on-brand) !important;
}

/* Goldene Flächen / Container mit abgerundeten Ecken sauber füllen */
body.fp-theme-premium .fp-surface,
body.fp-theme-premium .fp-reviews,
body.fp-theme-premium .fp-reviews-white{
  background: var(--fp-surface-dark-2) !important;
  color: var(--fp-text-invert) !important;
}

/* Premium Buttons: auf Goldflächen dunkler Button mit weißer Schrift */
body.fp-theme-premium .elementor-button{
  color: var(--fp-text-on-brand) !important;
}

body.fp-theme-premium .fp-surface-highlight .elementor-button,
body.fp-theme-premium .loop-card__content .elementor-button,
body.fp-theme-premium .fp-theme-premium-on-brand .elementor-button,
body.fp-theme-premium .fp-surface-premium.fp-b .elementor-button,
body.fp-theme-premium .fp-surface-premium.fp-a:hover .elementor-button{
  background: var(--fp-text) !important;
  background-image: none !important;
  color: var(--fp-text-invert) !important;
  border: 0 !important;
}

body.fp-theme-premium .fp-surface-highlight .elementor-button:hover,
body.fp-theme-premium .loop-card__content .elementor-button:hover,
body.fp-theme-premium .fp-theme-premium-on-brand .elementor-button:hover,
body.fp-theme-premium .fp-surface-premium.fp-b .elementor-button:hover,
body.fp-theme-premium .fp-surface-premium.fp-a:hover .elementor-button:hover{
  background: var(--fp-surface-dark-2) !important;
  background-image: none !important;
  color: var(--fp-text-invert) !important;
  filter: none !important;
}

/* Normale Buttons auf dunklen Flächen weiter gold mit dunklem Text */
body.fp-theme-premium .fp-bg-dark .elementor-button,
body.fp-theme-premium .fp-dark-gradient .elementor-button,
body.fp-theme-premium .dark-gradient-primary .elementor-button,
body.fp-theme-premium .fp-footer-gradient .elementor-button{
  color: var(--fp-text-on-brand) !important;
}

/* Icon-List-Text in goldenen Karten dunkel */
body.fp-theme-premium .loop-card__content .elementor-widget-icon-list .elementor-icon-list-item a,
body.fp-theme-premium .fp-surface-highlight .elementor-widget-icon-list .elementor-icon-list-item a{
  color: var(--fp-text-on-brand) !important;
}

body.fp-theme-premium .loop-card__content .elementor-widget-icon-list .elementor-icon-list-icon i,
body.fp-theme-premium .loop-card__content .elementor-widget-icon-list .elementor-icon-list-icon svg,
body.fp-theme-premium .fp-surface-highlight .elementor-widget-icon-list .elementor-icon-list-icon i,
body.fp-theme-premium .fp-surface-highlight .elementor-widget-icon-list .elementor-icon-list-icon svg{
  color: var(--fp-text-on-brand) !important;
  fill: var(--fp-text-on-brand) !important;
  stroke: var(--fp-text-on-brand) !important;
}

/* =========================================================
   G) SYSTEM – PLUGIN OVERRIDES (WCS / SWIPER)
   ========================================================= */

/* WCS Carousel – Pfeile */
body.fp-theme-premium .wcs-carousel .swiper-button-next,
body.fp-theme-premium .wcs-carousel .swiper-button-prev{
  color: var(--fp-primary) !important;
}

body.fp-theme-premium .wcs-carousel .swiper-button-next:hover,
body.fp-theme-premium .wcs-carousel .swiper-button-prev:hover{
  color: var(--fp-primary-dark) !important;
}

/* Dots */
body.fp-theme-premium .wcs-carousel .swiper-pagination-bullet{
  background: rgba(255,255,255,0.2) !important;
  opacity: 1 !important;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transition: all 0.2s ease;
}

body.fp-theme-premium .wcs-carousel .swiper-pagination-bullet-active{
  background: var(--fp-primary) !important;
  transform: scale(1.2);
}

/* =========================================================
   PREMIUM CONTACT GRADIENT (SOFT GLOW)
========================================================= */
body.fp-theme-premium .dark-section.fp-dark-gradient{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 50% 78%,
      color-mix(in srgb, var(--fp-primary) 22%, transparent) 0%,
      color-mix(in srgb, var(--fp-primary) 14%, transparent) 18%,
      color-mix(in srgb, var(--fp-primary) 8%, transparent) 34%,
      transparent 62%
    ),
    radial-gradient(
      circle at 18% 16%,
      color-mix(in srgb, var(--fp-primary) 10%, transparent) 0%,
      transparent 42%
    ),
    radial-gradient(
      circle at 82% 12%,
      color-mix(in srgb, var(--fp-primary) 8%, transparent) 0%,
      transparent 38%
    ),
    var(--fp-gradient-surface-dark) !important;
  color: var(--fp-text-invert);
}

body.fp-theme-premium .dark-section.fp-dark-gradient::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 50% 76%,
      color-mix(in srgb, var(--fp-primary) 16%, transparent) 0%,
      transparent 52%
    );
  opacity: 1;
}

/* =========================================================
   PREMIUM GOLD H2 (NO ANIMATION)
========================================================= */
body.fp-theme-premium .dark-section.fp-dark-gradient h2{
  background: var(--fp-gradient-brand) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: none !important;
}

/* =========================================================
   PREMIUM – fp-tabs FINAL POLISH (TOKEN CLEAN)
   ========================================================= */

body.fp-theme-premium .elementor-widget-n-tabs.fp-tabs .e-n-tab-title{
  background: var(--fp-bg-white) !important;
  color: var(--fp-text-invert) !important;
  border: 1px solid var(--fp-primary) !important;
  border-radius: 10px !important;
  transition: all .25s ease;
}

/* Hover = dunkler Zustand + helle Schrift */
body.fp-theme-premium .elementor-widget-n-tabs.fp-tabs .e-n-tab-title:hover{
  background: var(--fp-surface-dark-2) !important;
  color: var(--fp-text-invert) !important;
  border-color: var(--fp-primary) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px var(--fp-glow-brand-soft);
}

/* Active = Gold + dunkle Schrift */
body.fp-theme-premium .elementor-widget-n-tabs.fp-tabs .e-n-tab-title[aria-selected="true"]{
  background: var(--fp-primary) !important;
  color: var(--fp-text-on-brand) !important;
  border-color: var(--fp-primary) !important;
  box-shadow: 0 4px 14px var(--fp-glow-brand-soft);
}

/* Text immer korrekt */
body.fp-theme-premium .elementor-widget-n-tabs.fp-tabs .e-n-tab-title *,
body.fp-theme-premium .elementor-widget-n-tabs.fp-tabs .e-n-tab-title:hover *,
body.fp-theme-premium .elementor-widget-n-tabs.fp-tabs .e-n-tab-title[aria-selected="true"] *{
  color: inherit !important;
}

/* =========================================================
   WCS Design
   ========================================================= */

  body.fp-theme-premium [id^="wcs-app-"] .wcs-class__action a.wcs-btn.wcs-btn--action{
  background: var(--fp-primary) !important;
  color: var(--fp-text-on-brand) !important;
  border: none !important;
}

body.fp-theme-premium [id^="wcs-app-"] .wcs-class__action a.wcs-btn:not(.wcs-btn--action){
  background: transparent !important;
  color: var(--fp-text-invert) !important;
  border: 1px solid var(--fp-border-soft-strong) !important;
}

body.fp-theme-premium [id^="wcs-app-"] .wcs-class__action a.wcs-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px var(--fp-glow-brand-soft);
}

body.fp-theme-premium [id^="wcs-app-"] .wcs-class__action a.wcs-btn.wcs-btn--action:hover{
  background: var(--fp-primary-dark) !important;
  color: var(--fp-text-on-brand) !important;
}
   
/* =========================================================
   PREMIUM – Browser Scrollbar
   ========================================================= */

/* Firefox */
body.fp-theme-premium{
  scrollbar-color: var(--fp-primary) var(--fp-bg-light);
  scrollbar-width: auto;
}

/* WebKit */
body.fp-theme-premium::-webkit-scrollbar{
  width: 12px;
}

body.fp-theme-premium::-webkit-scrollbar-track{
  background: var(--fp-bg-light);
}

body.fp-theme-premium::-webkit-scrollbar-thumb{
  background: var(--fp-primary);
  border-radius: 999px;
  border: 2px solid var(--fp-bg-light);
}

body.fp-theme-premium::-webkit-scrollbar-thumb:hover{
  background: var(--fp-primary-dark);
}

/* =========================================================
   PREMIUM – WCS Detailseiten Background Fix
   ========================================================= */

/* kompletter Body */
body.fp-theme-premium[class*="wcs"]{
  background: var(--fp-gradient-surface-dark) !important;
  color: var(--fp-text-invert);
}

/* Hauptcontainer vom WCS */
body.fp-theme-premium [id^="wcs-app-"]{
  background: transparent !important;
}

/* einzelne Karten / Inhalte */
body.fp-theme-premium .wcs-class,
body.fp-theme-premium .wcs-single-class{
  background: var(--fp-surface-dark-1) !important;
  border: 1px solid var(--fp-border-soft) !important;
  border-radius: var(--fp-radius-soft);
}

/* =========================================================
   PREMIUM – Fahrplan "Mehr lesen" (fahrplan-btn)
   ========================================================= */

body.fp-theme-premium .fahrplan-btn{
  color: var(--fp-primary) !important;
}

/* optional: Hover etwas edler */
body.fp-theme-premium .fahrplan-btn:hover{
  color: var(--fp-primary-dark) !important;
}

/* =========================================================
   PREMIUM – WCS Shortcode Button (Termin Detail)
   ========================================================= */

body.fp-theme-premium .wcs-btn.wcs-btn--action{
  color: var(--fp-text-on-brand) !important;
}

/* =========================================================
   PREMIUM – GOLD HEADLINES FIX
   ---------------------------------------------------------
   Gilt nur im Premium Theme:
   - H2 auf dunklen Flächen
   - H3 auf dunklen Flächen
   - H1 auf Termin-Detailseiten
========================================================= */
body.fp-theme-premium .fp-section-light h2,
body.fp-theme-premium .fp-section-soft h2,
body.fp-theme-premium .dark-section h2,
body.fp-theme-premium .fp-section-light h3,
body.fp-theme-premium .fp-section-soft h3,
body.fp-theme-premium .dark-section h3,
body.fp-theme-premium.single-class h1,
body.fp-theme-premium.single-class .elementor-widget-heading h1.elementor-heading-title{
  background: var(--fp-gradient-brand) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: none !important;
}

/* =========================================================
   PREMIUM – LOOP CARD CONTENT SPECIAL CASE
   ---------------------------------------------------------
   Für goldene Loop-Flächen im Premium Theme:
   - Headlines wieder dunkel
   - Fließtext dunkel
   - Buttons invertiert für sauberen Kontrast
   ========================================================= */
body.fp-theme-premium .loop-card__content h1,
body.fp-theme-premium .loop-card__content h2,
body.fp-theme-premium .loop-card__content h3,
body.fp-theme-premium .loop-card__content .elementor-widget-heading h1.elementor-heading-title,
body.fp-theme-premium .loop-card__content .elementor-widget-heading h2.elementor-heading-title,
body.fp-theme-premium .loop-card__content .elementor-widget-heading h3.elementor-heading-title{
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  background-clip: border-box !important;
  color: var(--fp-text-on-brand) !important;
  text-shadow: none !important;
}

body.fp-theme-premium .loop-card__content,
body.fp-theme-premium .loop-card__content p,
body.fp-theme-premium .loop-card__content .elementor-widget-text-editor,
body.fp-theme-premium .loop-card__content .elementor-widget-text-editor p,
body.fp-theme-premium .loop-card__content .elementor-widget-text-editor span,
body.fp-theme-premium .loop-card__content .elementor-icon-list-item,
body.fp-theme-premium .loop-card__content .elementor-icon-list-item a{
  color: var(--fp-text-on-brand) !important;
}

body.fp-theme-premium .loop-card__content .elementor-button,
body.fp-theme-premium .loop-card__content .elementor-button:visited{
  background: var(--fp-text) !important;
  background-image: none !important;
  color: var(--fp-text-invert) !important;
  border: 0 !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.18) !important;
}

body.fp-theme-premium .loop-card__content .elementor-button:hover,
body.fp-theme-premium .loop-card__content .elementor-button:focus,
body.fp-theme-premium .loop-card__content .elementor-button:active{
  background: var(--fp-surface-dark-2) !important;
  background-image: none !important;
  color: var(--fp-text-invert) !important;
  filter: none !important;
}

body.fp-theme-premium .loop-card__content .elementor-button *,
body.fp-theme-premium .loop-card__content .elementor-button:hover *,
body.fp-theme-premium .loop-card__content .elementor-button:focus *{
  color: inherit !important;
}

/* Premium – fp-section surfaces match body */
body.fp-theme-premium .fp-section-light,
body.fp-theme-premium .fp-section-soft,
body.fp-theme-premium .fp-surface{
  background: var(--fp-surface-dark-3) !important;
}

/* Premium – Elementor Shape Divider unten deaktivieren */
body.fp-theme-premium .elementor-shape-bottom{
  display: none !important;
}

/* =========================================================
   PREMIUM – CONTENT BOXES (Führerscheinklassen)
   ---------------------------------------------------------
   Alle Info-Boxen automatisch auf Premium (Gold Border + Glow)
   ========================================================= */

body.fp-theme-premium 
.theorie-ausbildung,
body.fp-theme-premium 
.ausbildung-pruefung,
body.fp-theme-premium 
.wissenswertes,
body.fp-theme-premium 
.du-darfst-fahren,
body.fp-theme-premium 
.praktische-ausbildung,
body.fp-theme-premium 
.voraussetzungen,
body.fp-theme-premium 
.einsatz-moeglichkeiten {

    border: 1px solid var(--fp-primary) !important;
    box-shadow: 0 0 0 1px var(--fp-glow-brand-soft);
}

/* =========================================================
   PREMIUM – KONTAKT GLOW (FOCUSED / NICHT FLÄCHIG)
   ========================================================= */

body.fp-theme-premium .fp-contact-glow-inner{
  position: relative;
  isolation: isolate;
}

body.fp-theme-premium .fp-contact-glow-inner::before{
  content: "";
  position: absolute;

  /* 🔥 WICHTIG: kleiner & zentral */
  width: 420px;
  height: 420px;

  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);

  pointer-events: none;
  z-index: 0;

  background:
    radial-gradient(
      circle,
      rgba(226,195,90,0.28) 0%,
      rgba(226,195,90,0.18) 18%,
      rgba(226,195,90,0.10) 32%,
      rgba(226,195,90,0.05) 45%,
      transparent 60%
    );

  /* 🔥 weniger blur → mehr Fokus */
  filter: blur(28px);
}

/* Content bleibt darüber */
body.fp-theme-premium .fp-contact-glow-inner > *{
  position: relative;
  z-index: 1;
}

/* Tablet */
@media (max-width: 1024px){
  body.fp-theme-premium .fp-contact-glow-inner::before{
    width: 340px;
    height: 340px;
    filter: blur(24px);
  }
}

/* Mobile */
@media (max-width: 767px){
  body.fp-theme-premium .fp-contact-glow-inner::before{
    width: 260px;
    height: 260px;
    filter: blur(20px);
  }
}

/* =========================================================
   PREMIUM – KONTAKT GLOW (WIDER / SAME POWER)
   ========================================================= */

/* =========================================================
   PREMIUM – KONTAKT GLOW (HIGH IMPACT / STRONG CORE)
   ========================================================= */

body.fp-theme-premium .fp-contact-glow-inner{
  position: relative;
  isolation: isolate;
  z-index: 0;
}

body.fp-theme-premium .fp-contact-glow-inner::before{
  content: "";
  position: absolute;

  width: 700px;
  height: 700px;

  top: 62%;
  left: 50%;
  transform: translate(-50%, -50%);

  pointer-events: none;
  z-index: -1;

  background:
    radial-gradient(
      circle,
      rgba(255,220,120,0.75) 0%,   /* 🔥 harter Lichtkern */
      rgba(255,210,100,0.55) 12%,
      rgba(226,195,90,0.32) 26%,
      rgba(226,195,90,0.16) 42%,
      rgba(226,195,90,0.08) 56%,
      transparent 72%
    );

  filter: blur(38px);
}

body.fp-theme-premium .fp-contact-glow-inner::after{
  content: "";
  position: absolute;

  width: 320px;
  height: 320px;

  top: 55%;
  left: 70%;
  transform: translate(-50%, -50%);

  pointer-events: none;
  z-index: -1;

  background: radial-gradient(
    circle,
    rgba(255,220,120,0.45) 0%,
    rgba(226,195,90,0.18) 30%,
    transparent 65%
  );

  filter: blur(26px);
}

/* Mobile */
@media (max-width: 767px){
  body.fp-theme-premium .fp-contact-glow-inner::before{
    width: 360px;
    height: 360px;
    filter: blur(22px);
  }
}

/* =========================================================
   KONTAKTFORMULAR – BUTTON FONT SIZE
   ========================================================= */

.contact-consult .elementor-button{
  font-size: 26px !important;
}

@media (max-width: 1366px){
  .contact-consult .elementor-button{
    font-size: 20px !important;
  }
}

/* =========================================================
   PREMIUM – HOTSPOT TOOLTIPS ONLY
   ========================================================= */

body.fp-theme-premium .e-hotspot__tooltip{
  background: var(--fp-surface-dark-3) !important;
  color: var(--fp-text-invert) !important;
  border: 1px solid var(--fp-border-soft-strong) !important;
  border-radius: var(--fp-radius-xl) !important;
  box-shadow:
    0 18px 60px var(--fp-shadow-dark-strong),
    0 0 24px var(--fp-glow-brand-soft) !important;
}

/* Headline im Tooltip */
body.fp-theme-premium .e-hotspot__tooltip h1,
body.fp-theme-premium .e-hotspot__tooltip h2,
body.fp-theme-premium .e-hotspot__tooltip h3,
body.fp-theme-premium .e-hotspot__tooltip h4,
body.fp-theme-premium .e-hotspot__tooltip h5,
body.fp-theme-premium .e-hotspot__tooltip h6{
  color: var(--fp-primary) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

/* Fließtext */
body.fp-theme-premium .e-hotspot__tooltip,
body.fp-theme-premium .e-hotspot__tooltip p,
body.fp-theme-premium .e-hotspot__tooltip li,
body.fp-theme-premium .e-hotspot__tooltip span,
body.fp-theme-premium .e-hotspot__tooltip a{
  color: var(--fp-text-invert) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Links im Tooltip */
body.fp-theme-premium .e-hotspot__tooltip a:hover{
  color: var(--fp-primary) !important;
}

/* =========================================================
   VERLAUF FOOTER GRADIENT PREMIUM
   ========================================================= */

body.fp-theme-premium .fp-footer-gradient{
  background-color: var(--fp-surface-dark-3) !important;
  background-image: linear-gradient(
    115deg,
    var(--fp-surface-dark-3) 0%,
    var(--fp-surface-dark-3) 48%,
    color-mix(in srgb, var(--fp-surface-dark-3) 88%, var(--fp-primary)) 64%,
    color-mix(in srgb, var(--fp-surface-dark-3) 72%, var(--fp-primary)) 78%,
    color-mix(in srgb, var(--fp-surface-dark-3) 48%, var(--fp-primary)) 90%,
    color-mix(in srgb, var(--fp-surface-dark-3) 18%, var(--fp-primary)) 100%
  ) !important;
}

/* =========================================================
   TRUSTINDEX – RESET / BASIS
   ========================================================= */

.ti-widget{
  font-family: inherit !important;
}

.ti-widget *{
  color: inherit !important;
}

/* =========================================================
   TRUSTINDEX – STANDARD THEME
   ========================================================= */

body.fp-theme-standard .ti-widget{
  background: var(--fp-bg-white) !important;
  color: var(--fp-text) !important;
  border-radius: var(--fp-radius) !important;
  border: 1px solid var(--fp-border-light) !important;
  padding: 16px !important;
}

body.fp-theme-standard .ti-widget .ti-rating-text{
  color: var(--fp-text) !important;
}

/* =========================================================
   TRUSTINDEX – PREMIUM THEME
   ========================================================= */

/* Text */
/* Sterne (wichtig!) */
body.fp-theme-premium .ti-widget svg{
  fill: var(--fp-primary) !important;
}

/* Google Logo NICHT zerstören */
body.fp-theme-premium .ti-widget img{
  filter: none !important;
}

.ti-widget .ti-review-content{
  color: var(--fp-text) !important;
}

.ti-widget .ti-review-content *{
  color: var(--fp-text) !important;
  background: none !important;
}

/* =========================================================
   J) SYSTEM – DESIGN TOOL CONTRAST / PREMIUM HEADING FIX
   ---------------------------------------------------------
   Zweck:
   1) Premium-Headlines nicht mehr fest in Gold erzwingen
   2) Containerbasierte Kontrastsicherung für CTAs auf
      Brand-/Highlight-Flächen
   WICHTIG:
   - Kontrastlogik bewusst auf CONTAINER-Ebene
   - geeignet für Loop Cards und manuelle Wrapper (.fp-on-brand)
   ========================================================= */

/* ---------------------------------------------------------
   Premium Headings: feste Gold-HEX durch Systemtokens ersetzen
   --------------------------------------------------------- */
body.fp-theme-premium .fp-section-light h2,
body.fp-theme-premium .fp-section-soft h2,
body.fp-theme-premium .dark-section h2,
body.fp-theme-premium .fp-section-light h3,
body.fp-theme-premium .fp-section-soft h3,
body.fp-theme-premium .dark-section h3,
body.fp-theme-premium.single-class h1,
body.fp-theme-premium.single-class .elementor-widget-heading h1.elementor-heading-title{
  background: var(--fp-gradient-brand) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: none !important;
}

/* ---------------------------------------------------------
   Kontrast-Sicherheitszonen
   Nutzung:
   - automatisch in .loop-card__content
   - manuell über Wrapper-Klasse .fp-on-brand
   - optional für bestehende Highlight-Flächen
   --------------------------------------------------------- */
.fp-on-brand,
.fp-surface-highlight,
.loop-card__content{
  --fp-on-brand-button-bg: var(--fp-text);
  --fp-on-brand-button-bg-hover: var(--fp-surface-dark-2, var(--fp-primary-dark));
  --fp-on-brand-button-text: var(--fp-text-invert);
  --fp-on-brand-button-shadow: 0 8px 22px rgba(0,0,0,.18);
}

/* Buttons innerhalb von Brand-Flächen automatisch invertieren */
.fp-on-brand .elementor-button,
.fp-on-brand .elementor-button:visited,
.fp-surface-highlight .elementor-button,
.fp-surface-highlight .elementor-button:visited,
.loop-card__content .elementor-button,
.loop-card__content .elementor-button:visited{
  background: var(--fp-on-brand-button-bg) !important;
  background-image: none !important;
  color: var(--fp-on-brand-button-text) !important;
  border: 0 !important;
  box-shadow: var(--fp-on-brand-button-shadow) !important;
}

.fp-on-brand .elementor-button:hover,
.fp-on-brand .elementor-button:focus,
.fp-on-brand .elementor-button:active,
.fp-surface-highlight .elementor-button:hover,
.fp-surface-highlight .elementor-button:focus,
.fp-surface-highlight .elementor-button:active,
.loop-card__content .elementor-button:hover,
.loop-card__content .elementor-button:focus,
.loop-card__content .elementor-button:active{
  background: var(--fp-on-brand-button-bg-hover) !important;
  background-image: none !important;
  color: var(--fp-on-brand-button-text) !important;
  filter: none !important;
}

.fp-on-brand .elementor-button *,
.fp-on-brand .elementor-button:hover *,
.fp-on-brand .elementor-button:focus *,
.fp-surface-highlight .elementor-button *,
.fp-surface-highlight .elementor-button:hover *,
.fp-surface-highlight .elementor-button:focus *,
.loop-card__content .elementor-button *,
.loop-card__content .elementor-button:hover *,
.loop-card__content .elementor-button:focus *{
  color: inherit !important;
}

/* Outline-Buttons in Sicherheitszonen ebenfalls lesbar halten */
.fp-on-brand .button-outline-dark .elementor-button,
.fp-surface-highlight .button-outline-dark .elementor-button,
.loop-card__content .button-outline-dark .elementor-button{
  background: transparent !important;
  color: var(--fp-on-brand-button-text) !important;
  box-shadow: inset 0 0 0 1px var(--fp-on-brand-button-text) !important;
}

.fp-on-brand .button-outline-dark .elementor-button:hover,
.fp-surface-highlight .button-outline-dark .elementor-button:hover,
.loop-card__content .button-outline-dark .elementor-button:hover{
  background: var(--fp-on-brand-button-text) !important;
  color: var(--fp-on-brand-button-bg) !important;
}

/* Premium: Links/Buttons auf Highlight-Flächen sauber mitziehen */
body.fp-theme-premium .fp-on-brand .fahrplan-btn,
body.fp-theme-premium .fp-surface-highlight .fahrplan-btn,
body.fp-theme-premium .loop-card__content .fahrplan-btn{
  color: var(--fp-on-brand-button-text) !important;
}

body.fp-theme-premium .fp-on-brand .fahrplan-btn:hover,
body.fp-theme-premium .fp-surface-highlight .fahrplan-btn:hover,
body.fp-theme-premium .loop-card__content .fahrplan-btn:hover{
  color: var(--fp-on-brand-button-text) !important;
  opacity: .88;
}

/* ========================================
   CUSTOM SVG SAFETY – FINAL OVERRIDE
   Mehrfarbige SVGs (z. B. Canva) dürfen NICHT
   über globale SVG-Regeln voll eingefärbt werden.
   Standard-Icons mit currentColor bleiben steuerbar.
======================================== */
.fp-icon-default .elementor-icon svg,
.fp-icon-white .elementor-icon svg,
.fp-icon-accent .elementor-icon svg,
.fp-icon-box .elementor-icon svg,
.dark-section .fp-icon-box .elementor-icon svg,
.fp-bg-dark .fp-icon-box .elementor-icon svg,
.fp-dark-gradient .fp-icon-box .elementor-icon svg,
.dark-gradient-primary .fp-icon-box .elementor-icon svg,
.fp-footer-gradient .fp-icon-box .elementor-icon svg{
  fill: initial !important;
  stroke: initial !important;
}

.fp-icon-default .elementor-icon svg [fill="currentColor"],
.fp-icon-white .elementor-icon svg [fill="currentColor"],
.fp-icon-accent .elementor-icon svg [fill="currentColor"],
.fp-icon-box .elementor-icon svg [fill="currentColor"],
.dark-section .fp-icon-box .elementor-icon svg [fill="currentColor"],
.fp-bg-dark .fp-icon-box .elementor-icon svg [fill="currentColor"],
.fp-dark-gradient .fp-icon-box .elementor-icon svg [fill="currentColor"],
.dark-gradient-primary .fp-icon-box .elementor-icon svg [fill="currentColor"],
.fp-footer-gradient .fp-icon-box .elementor-icon svg [fill="currentColor"]{
  fill: currentColor !important;
}

.fp-icon-default .elementor-icon svg [stroke="currentColor"],
.fp-icon-white .elementor-icon svg [stroke="currentColor"],
.fp-icon-accent .elementor-icon svg [stroke="currentColor"],
.fp-icon-box .elementor-icon svg [stroke="currentColor"],
.dark-section .fp-icon-box .elementor-icon svg [stroke="currentColor"],
.fp-bg-dark .fp-icon-box .elementor-icon svg [stroke="currentColor"],
.fp-dark-gradient .fp-icon-box .elementor-icon svg [stroke="currentColor"],
.dark-gradient-primary .fp-icon-box .elementor-icon svg [stroke="currentColor"],
.fp-footer-gradient .fp-icon-box .elementor-icon svg [stroke="currentColor"]{
  stroke: currentColor !important;
}

.fp-icon-default :not(.fp-icon-original) .elementor-icon svg [fill]:not([fill="none"]):not([fill="currentColor"]),
.fp-icon-white :not(.fp-icon-original) .elementor-icon svg [fill]:not([fill="none"]):not([fill="currentColor"]),
.fp-icon-accent :not(.fp-icon-original) .elementor-icon svg [fill]:not([fill="none"]):not([fill="currentColor"]),
.fp-icon-box :not(.fp-icon-original) .elementor-icon svg [fill]:not([fill="none"]):not([fill="currentColor"]),
.dark-section .fp-icon-box :not(.fp-icon-original) .elementor-icon svg [fill]:not([fill="none"]):not([fill="currentColor"]),
.fp-bg-dark .fp-icon-box :not(.fp-icon-original) .elementor-icon svg [fill]:not([fill="none"]):not([fill="currentColor"]),
.fp-dark-gradient .fp-icon-box :not(.fp-icon-original) .elementor-icon svg [fill]:not([fill="none"]):not([fill="currentColor"]),
.dark-gradient-primary .fp-icon-box :not(.fp-icon-original) .elementor-icon svg [fill]:not([fill="none"]):not([fill="currentColor"]),
.fp-footer-gradient .fp-icon-box :not(.fp-icon-original) .elementor-icon svg [fill]:not([fill="none"]):not([fill="currentColor"]){
  fill: revert !important;
}

.fp-icon-default :not(.fp-icon-original) .elementor-icon svg [stroke]:not([stroke="none"]):not([stroke="currentColor"]),
.fp-icon-white :not(.fp-icon-original) .elementor-icon svg [stroke]:not([stroke="none"]):not([stroke="currentColor"]),
.fp-icon-accent :not(.fp-icon-original) .elementor-icon svg [stroke]:not([stroke="none"]):not([stroke="currentColor"]),
.fp-icon-box :not(.fp-icon-original) .elementor-icon svg [stroke]:not([stroke="none"]):not([stroke="currentColor"]),
.dark-section .fp-icon-box :not(.fp-icon-original) .elementor-icon svg [stroke]:not([stroke="none"]):not([stroke="currentColor"]),
.fp-bg-dark .fp-icon-box :not(.fp-icon-original) .elementor-icon svg [stroke]:not([stroke="none"]):not([stroke="currentColor"]),
.fp-dark-gradient .fp-icon-box :not(.fp-icon-original) .elementor-icon svg [stroke]:not([stroke="none"]):not([stroke="currentColor"]),
.dark-gradient-primary .fp-icon-box :not(.fp-icon-original) .elementor-icon svg [stroke]:not([stroke="none"]):not([stroke="currentColor"]),
.fp-footer-gradient .fp-icon-box :not(.fp-icon-original) .elementor-icon svg [stroke]:not([stroke="none"]):not([stroke="currentColor"]){
  stroke: revert !important;
}

/* TRUSTINDEX – Premium: Name & Datum korrekt färben */
body.fp-theme-premium .ti-widget .ti-name,
body.fp-theme-premium .ti-widget .ti-date{
  color: var(--fp-text) !important;
}

/* =========================================================
   FIX: fp-icon-white NUR im Standard Theme weiß
========================================================= */
body.fp-theme-standard .fp-icon-white .elementor-icon,
body.fp-theme-standard .fp-icon-white .elementor-icon i,
body.fp-theme-standard .fp-icon-white .elementor-icon svg,
body.fp-theme-standard .fp-icon-white .elementor-icon svg *,
body.fp-theme-standard .fp-icon-white .elementor-icon-box-icon,
body.fp-theme-standard .fp-icon-white .elementor-icon-box-icon i,
body.fp-theme-standard .fp-icon-white .elementor-icon-box-icon svg,
body.fp-theme-standard .fp-icon-white .elementor-icon-box-icon svg *{
  color: var(--fp-text-invert) !important;
  fill: var(--fp-text-invert) !important;
  stroke: var(--fp-text-invert) !important;
}

/* ========================================
   BUTTON – HIGHLIGHT VARIANT
======================================== */
.elementor-button.button-highlight{
  background: var(--fp-highlight-button-bg) !important;
  background-image: none !important;
  color: var(--fp-highlight-button-text) !important;
  box-shadow: var(--fp-highlight-button-shadow);
}

.elementor-button.button-highlight:hover,
.elementor-button.button-highlight:focus{
  background: var(--fp-highlight-button-bg-hover) !important;
  background-image: none !important;
  color: var(--fp-highlight-button-text) !important;
}

/* =========================================================
   ORIGINAL SVG ICONS – CONTAINER OPT-OUT
   ---------------------------------------------------------
   Wenn ein übergeordneter Container die Klasse
   .fp-icon-original trägt, bleiben enthaltene Custom-/Canva-
   SVGs farblich unangetastet.
   ========================================================= */

.fp-icon-original .elementor-icon svg [fill]:not([fill="none"]):not([fill="currentColor"]),
.fp-icon-original .elementor-icon-box-icon svg [fill]:not([fill="none"]):not([fill="currentColor"]),
.fp-icon-original .elementor-icon-list-icon svg [fill]:not([fill="none"]):not([fill="currentColor"]){
  fill: unset !important;
}

.fp-icon-original .elementor-icon svg [stroke]:not([stroke="none"]):not([stroke="currentColor"]),
.fp-icon-original .elementor-icon-box-icon svg [stroke]:not([stroke="none"]):not([stroke="currentColor"]),
.fp-icon-original .elementor-icon-list-icon svg [stroke]:not([stroke="none"]):not([stroke="currentColor"]){
  stroke: unset !important;
}

/* =========================================================
   ORIGINAL SVG ICONS – CONTAINER OPT-OUT FINAL
   ---------------------------------------------------------
   Für Container mit .fp-icon-original werden auch Icon-Box-
   Wrapper-Farben neutralisiert, damit Canva-/Custom-SVGs in
   Icon-Widgets, Icon-Boxen und Icon-Listen wirklich ihre
   Originaldarstellung behalten.
   ========================================================= */

.fp-icon-original .elementor-icon,
.fp-icon-original .elementor-icon i,
.fp-icon-original .elementor-icon-box-icon,
.fp-icon-original .elementor-icon-box-icon i,
.fp-icon-original .elementor-icon-list-icon,
.fp-icon-original .elementor-icon-list-icon i{
  color: initial !important;
}

.fp-icon-original .elementor-icon svg,
.fp-icon-original .elementor-icon-box-icon svg,
.fp-icon-original .elementor-icon-list-icon svg,
.fp-icon-original .elementor-icon svg *,
.fp-icon-original .elementor-icon-box-icon svg *,
.fp-icon-original .elementor-icon-list-icon svg *{
  color: initial !important;
}



/* =========================================================
   LOOP CLEAN (is-clean)
   ========================================================= */

.loop-card.is-clean {
  background: #ffffff !important;
  border-radius: var(--fp-radius);
  box-shadow: var(--fp-shadow-soft) !important;
  overflow: hidden;
  transition: all 0.25s ease;
}

.loop-card.is-clean:hover {
  transform: translateY(-4px);
  box-shadow: var(--fp-shadow-medium) !important;
}

/* Bild (Option B) */
.loop-card.is-clean img {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0.95);
}

/* Content */
.loop-card.is-clean .loop-card__content {
  padding: 28px 24px 30px;
}

/* Headline */
.loop-card.is-clean h2,
.loop-card.is-clean h3 {
  color: var(--fp-text) !important;
}

/* Text */
.loop-card.is-clean p {
  color: var(--fp-text) !important;
  opacity: 0.85;
}

/* alter Glow killen */
.loop-card.is-clean,
.loop-card.is-clean * {
  box-shadow: none;
}

.loop-card.is-clean {
  box-shadow: var(--fp-shadow-soft);
}

.loop-card.is-clean:hover {
  box-shadow: var(--fp-shadow-medium);
}


/* =========================================================
   ACCORDION CLEAN (is-clean)
   ========================================================= */

/* 

.is-clean .elementor-accordion .elementor-tab-title {
  background: transparent;
  border-bottom: 1px solid var(--fp-border-light);
  padding: 18px 0;
}

.is-clean .elementor-accordion .elementor-tab-title a {
  color: var(--fp-text);
}

.is-clean .elementor-accordion .elementor-tab-content {
  background: transparent;
  padding: 10px 0 20px;
  color: var(--fp-text);
}



/* Hover leicht */

/*
.is-clean .elementor-accordion .elementor-tab-title:hover {
  opacity: 0.7;
}

*/

/* =========================================================
   LOOP CLEAN – CONTENT OVERRIDE
   ========================================================= */

.loop-card.is-clean .loop-highlight.loop-card__content{
  background: #ffffff !important;
  background-image: none !important;
  color: var(--fp-text) !important;
  padding: 28px 24px 30px !important;
}

/* Headline */
.loop-card.is-clean .loop-highlight.loop-card__content h1,
.loop-card.is-clean .loop-highlight.loop-card__content h2,
.loop-card.is-clean .loop-highlight.loop-card__content h3,
.loop-card.is-clean .loop-highlight.loop-card__content .elementor-heading-title{
  color: var(--fp-text) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

/* Text */
.loop-card.is-clean .loop-highlight.loop-card__content,
.loop-card.is-clean .loop-highlight.loop-card__content p,
.loop-card.is-clean .loop-highlight.loop-card__content span,
.loop-card.is-clean .loop-highlight.loop-card__content li{
  color: var(--fp-text) !important;
}

/* Button bewusst beibehalten, aber sauber */
.loop-card.is-clean .loop-highlight.loop-card__content .elementor-button{
  background: var(--fp-text) !important;
  background-image: none !important;
  color: var(--fp-text-invert) !important;
  border: 0 !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.14) !important;
}

.loop-card.is-clean .loop-highlight.loop-card__content .elementor-button:hover{
  background: var(--fp-primary-dark) !important;
  background-image: none !important;
  color: var(--fp-text-invert) !important;
}

/* Alten Glow / alte Schatten im Content killen */
.loop-card.is-clean .loop-highlight.loop-card__content,
.loop-card.is-clean .loop-highlight.loop-card__content *{
  box-shadow: none;
}

/* Bild weiter leicht beruhigen */
.loop-card.is-clean img{
  filter: brightness(0.95);
}

/* =========================================================
   FINAL OVERRIDES – LOOP CLEAN (GEWINNT GANZ AM ENDE)
   ---------------------------------------------------------
   Zweck:
   - überschreibt späte globale Brand-/On-Brand-Regeln
   - nur aktiv auf .loop-card.is-clean
   - Bild bleibt leicht beruhigt
   - Content wird neutral/weiß
   - Text dunkel
   - Button dunkel mit weißer Schrift
   ========================================================= */

.loop-card.is-clean{
  background: #ffffff !important;
  border-radius: var(--fp-radius-soft) !important;
  overflow: hidden !important;
  box-shadow: var(--fp-shadow-soft) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}

.loop-card.is-clean:hover{
  transform: translateY(-4px) !important;
  box-shadow: var(--fp-shadow-medium) !important;
}

.loop-card.is-clean,
.loop-card.is-clean *{
  background-image: none !important;
}

.loop-card.is-clean img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  filter: brightness(.95) !important;
}

/* WICHTIG: alter Highlight-Content wird hier wirklich neutralisiert */
.loop-card.is-clean .loop-highlight.loop-card__content,
.loop-card.is-clean .loop-card__content.loop-highlight{
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: var(--fp-text) !important;
  padding: 28px 24px 30px !important;
  box-shadow: none !important;
}

/* Headline wirklich dunkel */
.loop-card.is-clean .loop-highlight.loop-card__content h1,
.loop-card.is-clean .loop-highlight.loop-card__content h2,
.loop-card.is-clean .loop-highlight.loop-card__content h3,
.loop-card.is-clean .loop-highlight.loop-card__content h4,
.loop-card.is-clean .loop-highlight.loop-card__content .elementor-heading-title,
.loop-card.is-clean .loop-card__content.loop-highlight h1,
.loop-card.is-clean .loop-card__content.loop-highlight h2,
.loop-card.is-clean .loop-card__content.loop-highlight h3,
.loop-card.is-clean .loop-card__content.loop-highlight h4,
.loop-card.is-clean .loop-card__content.loop-highlight .elementor-heading-title{
  color: var(--fp-text) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

/* Fließtext wirklich dunkel */
.loop-card.is-clean .loop-highlight.loop-card__content,
.loop-card.is-clean .loop-highlight.loop-card__content p,
.loop-card.is-clean .loop-highlight.loop-card__content span,
.loop-card.is-clean .loop-highlight.loop-card__content li,
.loop-card.is-clean .loop-highlight.loop-card__content a:not(.elementor-button),
.loop-card.is-clean .loop-card__content.loop-highlight,
.loop-card.is-clean .loop-card__content.loop-highlight p,
.loop-card.is-clean .loop-card__content.loop-highlight span,
.loop-card.is-clean .loop-card__content.loop-highlight li,
.loop-card.is-clean .loop-card__content.loop-highlight a:not(.elementor-button){
  color: var(--fp-text) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Button dunkel + weiße Schrift */
.loop-card.is-clean .loop-highlight.loop-card__content .elementor-button,
.loop-card.is-clean .loop-card__content.loop-highlight .elementor-button{
  background: var(--fp-text) !important;
  background-color: var(--fp-text) !important;
  background-image: none !important;
  color: var(--fp-text-invert) !important;
  border: 0 !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.14) !important;
}

.loop-card.is-clean .loop-highlight.loop-card__content .elementor-button *,
.loop-card.is-clean .loop-card__content.loop-highlight .elementor-button *{
  color: var(--fp-text-invert) !important;
  -webkit-text-fill-color: currentColor !important;
}

.loop-card.is-clean .loop-highlight.loop-card__content .elementor-button:hover,
.loop-card.is-clean .loop-highlight.loop-card__content .elementor-button:focus,
.loop-card.is-clean .loop-card__content.loop-highlight .elementor-button:hover,
.loop-card.is-clean .loop-card__content.loop-highlight .elementor-button:focus{
  background: var(--fp-primary-dark) !important;
  background-color: var(--fp-primary-dark) !important;
  background-image: none !important;
  color: var(--fp-text-invert) !important;
}

.loop-card.is-clean .loop-highlight.loop-card__content .elementor-button:hover *,
.loop-card.is-clean .loop-highlight.loop-card__content .elementor-button:focus *,
.loop-card.is-clean .loop-card__content.loop-highlight .elementor-button:hover *,
.loop-card.is-clean .loop-card__content.loop-highlight .elementor-button:focus *{
  color: var(--fp-text-invert) !important;
}

/* alte Schatten/Glows im Content killen */
.loop-card.is-clean .loop-highlight.loop-card__content,
.loop-card.is-clean .loop-highlight.loop-card__content *,
.loop-card.is-clean .loop-card__content.loop-highlight,
.loop-card.is-clean .loop-card__content.loop-highlight *{
  box-shadow: none !important;
}

/* =========================================================
   FINAL OVERRIDES – FLIPBOX + CONTACT CLEAN
   ---------------------------------------------------------
   Zweck:
   1) Flipbox-Außenwrapper in is-clean transparent setzen
      -> keine weißen Ecken / kein weißer Träger
   2) Kontaktsektion im Clean Mode auf helle, ruhige Surface
      umstellen, ohne dark-section / fp-dark-gradient aus dem
      bestehenden System zu entfernen
   ========================================================= */


/* =========================================================
   CONTACT SECTION – CLEAN MODE
   Klassen am Wrapper:
   pad-l dark-section fp-dark-gradient fp-contact-section is-clean
   ========================================================= */

body.fp-theme-standard .fp-contact-section.is-clean{
  background: var(--fp-bg-soft) !important;
  background-color: var(--fp-bg-soft) !important;
  background-image: none !important;
  color: var(--fp-text) !important;
}

/* Dark-/Gradient-Overlays neutralisieren */
body.fp-theme-standard .fp-contact-section.is-clean::before,
body.fp-theme-standard .fp-contact-section.is-clean::after,
body.fp-theme-standard .fp-contact-section.is-clean .elementor-background-overlay{
  background: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* Headlines / Text / Links dunkel */
body.fp-theme-standard .fp-contact-section.is-clean,
body.fp-theme-standard .fp-contact-section.is-clean p,
body.fp-theme-standard .fp-contact-section.is-clean li,
body.fp-theme-standard .fp-contact-section.is-clean span,
body.fp-theme-standard .fp-contact-section.is-clean .elementor-widget-text-editor,
body.fp-theme-standard .fp-contact-section.is-clean .elementor-widget-text-editor p,
body.fp-theme-standard .fp-contact-section.is-clean .elementor-widget-text-editor span,
body.fp-theme-standard .fp-contact-section.is-clean .elementor-widget-icon-list .elementor-icon-list-item,
body.fp-theme-standard .fp-contact-section.is-clean .elementor-widget-icon-list .elementor-icon-list-item a,
body.fp-theme-standard .fp-contact-section.is-clean .fs-contact-block,
body.fp-theme-standard .fp-contact-section.is-clean .fs-contact-block a{
  color: var(--fp-text) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.fp-theme-standard .fp-contact-section.is-clean h1,
body.fp-theme-standard .fp-contact-section.is-clean h2,
body.fp-theme-standard .fp-contact-section.is-clean h3,
body.fp-theme-standard .fp-contact-section.is-clean h4,
body.fp-theme-standard .fp-contact-section.is-clean h5,
body.fp-theme-standard .fp-contact-section.is-clean h6,
body.fp-theme-standard .fp-contact-section.is-clean .elementor-widget-heading .elementor-heading-title{
  color: var(--fp-text) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

/* Icons in Kontaktinfos leicht akzentuieren */
body.fp-theme-standard .fp-contact-section.is-clean .elementor-widget-icon-list .elementor-icon-list-icon i,
body.fp-theme-standard .fp-contact-section.is-clean .elementor-widget-icon-list .elementor-icon-list-icon svg,
body.fp-theme-standard .fp-contact-section.is-clean .elementor-widget-icon-box .elementor-icon,
body.fp-theme-standard .fp-contact-section.is-clean .elementor-widget-icon-box .elementor-icon i,
body.fp-theme-standard .fp-contact-section.is-clean .elementor-widget-icon-box .elementor-icon svg{
  color: var(--fp-primary) !important;
  fill: var(--fp-primary) !important;
  stroke: var(--fp-primary) !important;
}

/* Formularfelder hell / ruhig */
body.fp-theme-standard .fp-contact-section.is-clean input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]),
body.fp-theme-standard .fp-contact-section.is-clean select,
body.fp-theme-standard .fp-contact-section.is-clean textarea{
  background: #ffffff !important;
  color: var(--fp-text) !important;
  border: 1px solid var(--fp-border-light) !important;
  box-shadow: none !important;
}

body.fp-theme-standard .fp-contact-section.is-clean input::placeholder,
body.fp-theme-standard .fp-contact-section.is-clean textarea::placeholder{
  color: rgba(7,8,12,.55) !important;
}

body.fp-theme-standard .fp-contact-section.is-clean input:focus,
body.fp-theme-standard .fp-contact-section.is-clean select:focus,
body.fp-theme-standard .fp-contact-section.is-clean textarea:focus{
  border-color: color-mix(in srgb, var(--fp-primary) 55%, white) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fp-primary) 12%, transparent) !important;
  outline: none !important;
}

/* Google/Trust/Bewertungsboxen in der Sektion ebenfalls hell */
body.fp-theme-standard .fp-contact-section.is-clean .ti-widget,
body.fp-theme-standard .fp-contact-section.is-clean .google-rating,
body.fp-theme-standard .fp-contact-section.is-clean .fp-contact-card,
body.fp-theme-standard .fp-contact-section.is-clean .elementor-widget-google_maps,
body.fp-theme-standard .fp-contact-section.is-clean .elementor-widget-shortcode{
  color: var(--fp-text) !important;
}

/* Button bewusst stark lassen */
body.fp-theme-standard .fp-contact-section.is-clean .elementor-button,
body.fp-theme-standard .fp-contact-section.is-clean .elementor-button:visited{
  color: var(--fp-text-invert) !important;
}

body.fp-theme-standard .fp-contact-section.is-clean .elementor-button *,
body.fp-theme-standard .fp-contact-section.is-clean .elementor-button:hover *,
body.fp-theme-standard .fp-contact-section.is-clean .elementor-button:focus *{
  color: inherit !important;
}

/* =========================================================
   CONTACT CLEAN – OVERRIDE DARK GRADIENT (SAFE)
   ========================================================= */

body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean{
  background: var(--fp-bg-soft) !important;
  background-color: var(--fp-bg-soft) !important;
  background-image: none !important;
  color: var(--fp-text) !important;
}

body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean::before,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean::after,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .elementor-background-overlay{
  background: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* =========================================================
   CONTACT CLEAN – COLLISION FIX PACKAGE
   ---------------------------------------------------------
   Aktiv nur in:
   body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean

   Zweck:
   - fp-gradient-headline neutralisieren
   - fp-icon-white im Kontaktbereich auf dunkel/primär ziehen
   - Trustindex-Wrapper neutralisieren
   - Acceptance-/Link-/Message-Farben im Formular korrigieren
   - bestehende Theme-/Widget-Varianten NICHT global anfassen
   ========================================================= */

/* Headline im Clean-Kontaktbereich: kein weißer Gradient */
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .fp-gradient-headline,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .fp-gradient-headline .elementor-heading-title,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .fp-gradient-headline h1,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .fp-gradient-headline h2,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .fp-gradient-headline h3{
  color: var(--fp-text) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

/* Icon-Widgets mit fp-icon-white in Clean-Kontaktbereich neutralisieren */
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .fp-icon-white,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .fp-icon-white .elementor-heading-title,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .fp-icon-white .elementor-icon-box-title,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .fp-icon-white .elementor-icon-box-title a,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .fp-icon-white .elementor-icon-box-description,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .fp-icon-white .elementor-icon-box-description p,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .fp-icon-white .elementor-widget-container,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .fp-icon-white .elementor-icon-list-item,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .fp-icon-white .elementor-icon-list-item a{
  color: var(--fp-text) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .fp-icon-white .elementor-icon,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .fp-icon-white .elementor-icon i,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .fp-icon-white .elementor-icon svg,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .fp-icon-white .elementor-icon-box-icon,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .fp-icon-white .elementor-icon-box-icon i,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .fp-icon-white .elementor-icon-box-icon svg,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .fp-icon-white .elementor-icon-list-icon i,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .fp-icon-white .elementor-icon-list-icon svg{
  color: var(--fp-primary) !important;
  fill: var(--fp-primary) !important;
  stroke: var(--fp-primary) !important;
}

/* Trustindex / Badge-Umfeld neutralisieren */
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .ti-widget-container,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .ti-widget,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .ti-widget-container *{
  color: var(--fp-text) !important;
}

body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .ti-widget-container{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Falls der Badge selbst einen Kasten behalten soll: sehr neutral */
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .ti-widget{
  background: var(--fp-bg-white) !important;
  border: 1px solid var(--fp-border-light) !important;
  box-shadow: none !important;
}

/* Formular – Acceptance / Links / Messages dunkel ziehen */
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .elementor-widget-twbb_form .elementor-field-type-acceptance .elementor-field-subgroup .elementor-field-option label,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .elementor-widget-twbb_form .elementor-field-type-acceptance .elementor-field-subgroup .elementor-field-option,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .elementor-widget-twbb_form .elementor-field-type-acceptance .elementor-field-subgroup .elementor-field-option *{
  color: var(--fp-text) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .elementor-widget-twbb_form a{
  color: var(--fp-text) !important;
  -webkit-text-fill-color: currentColor !important;
  text-decoration: underline !important;
}

body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .elementor-widget-twbb_form a:hover,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .elementor-widget-twbb_form a:focus{
  color: var(--fp-primary-dark) !important;
}

body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .elementor-widget-twbb_form .elementor-message,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .elementor-widget-twbb_form .elementor-message *{
  color: var(--fp-text) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .elementor-widget-twbb_form .elementor-message:before{
  display: none !important;
}

/* Checkbox selbst besser sichtbar */
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .elementor-widget-twbb_form input[type="checkbox"]{
  accent-color: var(--fp-primary);
}

/* Button bewusst NICHT neutralisieren – nur Textvererbung absichern */
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .elementor-widget-twbb_form .elementor-button,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .elementor-widget-twbb_form .elementor-button *,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .elementor-widget-twbb_form .elementor-button:hover,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .elementor-widget-twbb_form .elementor-button:hover *{
  color: var(--fp-text-invert) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* =========================================================
   FORM SYSTEM – BASELINE
   ---------------------------------------------------------
   Ziel:
   - Formular-Widgets von lokalen Einzel-Styles entkoppeln
   - Theme / Section-Kontext steuert Darstellung
   - Basis funktioniert für Standard, Dark und Clean
   ========================================================= */

/* ---------------------------------------------------------
   Formular – neutrale Basis
   --------------------------------------------------------- */
.elementor-widget-twbb_form{
  --fp-form-text: var(--fp-text);
  --fp-form-text-muted: rgba(7,8,12,.58);
  --fp-form-bg: #ffffff;
  --fp-form-border: var(--fp-border-light);
  --fp-form-link: var(--fp-primary);
  --fp-form-link-hover: var(--fp-primary-dark);
  --fp-form-message: var(--fp-text);
  --fp-form-button-text: var(--fp-text-invert);
}

.elementor-widget-twbb_form .elementor-field,
.elementor-widget-twbb_form input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]),
.elementor-widget-twbb_form select,
.elementor-widget-twbb_form textarea{
  background: var(--fp-form-bg) !important;
  color: var(--fp-form-text) !important;
  border: 1px solid var(--fp-form-border) !important;
  box-shadow: none !important;
}

.elementor-widget-twbb_form input::placeholder,
.elementor-widget-twbb_form textarea::placeholder{
  color: var(--fp-form-text-muted) !important;
}

.elementor-widget-twbb_form input:focus,
.elementor-widget-twbb_form select:focus,
.elementor-widget-twbb_form textarea:focus{
  outline: none !important;
  border-color: color-mix(in srgb, var(--fp-primary) 55%, white) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fp-primary) 12%, transparent) !important;
}

.elementor-widget-twbb_form select,
.elementor-widget-twbb_form select option{
  color: var(--fp-form-text) !important;
}

.elementor-widget-twbb_form a{
  color: var(--fp-form-link) !important;
  text-decoration: underline !important;
}

.elementor-widget-twbb_form a:hover,
.elementor-widget-twbb_form a:focus{
  color: var(--fp-form-link-hover) !important;
}

.elementor-widget-twbb_form .elementor-field-type-acceptance .elementor-field-subgroup .elementor-field-option,
.elementor-widget-twbb_form .elementor-field-type-acceptance .elementor-field-subgroup .elementor-field-option label,
.elementor-widget-twbb_form .elementor-field-type-acceptance .elementor-field-subgroup .elementor-field-option *{
  color: var(--fp-form-text) !important;
  -webkit-text-fill-color: currentColor !important;
}

.elementor-widget-twbb_form .elementor-field-type-acceptance .elementor-field-subgroup .elementor-field-option label{
  font-size: 15px;
}

.elementor-widget-twbb_form .elementor-message,
.elementor-widget-twbb_form .elementor-message *{
  color: var(--fp-form-message) !important;
  -webkit-text-fill-color: currentColor !important;
}

.elementor-widget-twbb_form .elementor-message:before{
  display: none !important;
}

.elementor-widget-twbb_form input[type="checkbox"]{
  accent-color: var(--fp-primary);
}

.elementor-widget-twbb_form .elementor-button{
  color: var(--fp-form-button-text) !important;
  fill: var(--fp-form-button-text) !important;
}

.elementor-widget-twbb_form .elementor-button *,
.elementor-widget-twbb_form .elementor-button:hover *,
.elementor-widget-twbb_form .elementor-button:focus *{
  color: inherit !important;
  fill: currentColor !important;
}

/* ---------------------------------------------------------
   Dark-Kontext für Formulare
   --------------------------------------------------------- */
body.fp-theme-standard .dark-section .elementor-widget-twbb_form,
body.fp-theme-standard .fp-bg-dark .elementor-widget-twbb_form,
body.fp-theme-standard .fp-dark-gradient .elementor-widget-twbb_form{
  --fp-form-text: var(--fp-text-invert);
  --fp-form-text-muted: rgba(255,255,255,.62);
  --fp-form-bg: rgba(255,255,255,.08);
  --fp-form-border: rgba(255,255,255,.16);
  --fp-form-link: var(--fp-text-invert);
  --fp-form-link-hover: var(--fp-text-invert);
  --fp-form-message: var(--fp-text-invert);
  --fp-form-button-text: var(--fp-text-invert);
}

/* ---------------------------------------------------------
   Clean-Kontaktbereich schlägt Dark-Kontext wieder sauber
   --------------------------------------------------------- */
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .elementor-widget-twbb_form{
  --fp-form-text: var(--fp-text);
  --fp-form-text-muted: rgba(7,8,12,.58);
  --fp-form-bg: #ffffff;
  --fp-form-border: var(--fp-border-light);
  --fp-form-link: var(--fp-text);
  --fp-form-link-hover: var(--fp-primary-dark);
  --fp-form-message: var(--fp-text);
  --fp-form-button-text: var(--fp-text-invert);
}

/* CONTACT CLEAN – ICON FIX (sauber) */

.fp-contact-section.is-clean .fp-icon-white,
.fp-contact-section.is-clean .fp-icon-white .elementor-widget-container,
.fp-contact-section.is-clean .fp-icon-white .elementor-icon-box-title,
.fp-contact-section.is-clean .fp-icon-white .elementor-icon-box-description{
  color: var(--fp-text) !important;
}

.fp-contact-section.is-clean .fp-icon-white .elementor-icon,
.fp-contact-section.is-clean .fp-icon-white .elementor-icon svg{
  color: var(--fp-primary) !important;
  fill: var(--fp-primary) !important;
}

/* CONTACT CLEAN – OPENING HOURS */

.fp-contact-section.is-clean .footer-opening-hours,
.fp-contact-section.is-clean .footer-opening-hours tr,
.fp-contact-section.is-clean .footer-opening-hours td,
.fp-contact-section.is-clean .footer-opening-hours th{
  color: var(--fp-text) !important;
  border: none !important;
}

/* =========================================================
   CONTACT CLEAN – ICON LIST WHITE FIX (FINAL)
   ========================================================= */

body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .elementor-widget-icon-list.fp-icon-white .elementor-icon-list-item,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .elementor-widget-icon-list.fp-icon-white .elementor-icon-list-item a,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .elementor-widget-icon-list.fp-icon-white .elementor-icon-list-text{
  color: var(--fp-text) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .elementor-widget-icon-list.fp-icon-white .elementor-icon-list-icon,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .elementor-widget-icon-list.fp-icon-white .elementor-icon-list-icon i,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .elementor-widget-icon-list.fp-icon-white .elementor-icon-list-icon svg{
  color: var(--fp-primary) !important;
  fill: var(--fp-primary) !important;
  stroke: var(--fp-primary) !important;
}

/* =========================================================
   CONTACT CLEAN – TRUSTINDEX RESET
   ========================================================= */

body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .ti-widget-container,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .ti-widget,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .ti-inner{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* =========================================================
   CONTACT CLEAN – TRUSTINDEX RATING TEXT FINAL
   ========================================================= */

body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean 
.ti-widget[data-layout-id='23'][data-set-id='dark-minimal'] 
.ti-widget-container .ti-header .ti-rating-text,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean 
.ti-widget[data-layout-id='23'][data-set-id='dark-minimal'] 
.ti-widget-container .ti-header .ti-rating-text *{
  color: var(--fp-text) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* =========================================================
   CONTACT CLEAN – ICON LIST SVG FINAL FIX
   ========================================================= */

body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .elementor-widget-icon-list.fp-icon-white .elementor-icon-list-icon,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .elementor-widget-icon-list.fp-icon-white .elementor-icon-list-icon i,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .elementor-widget-icon-list.fp-icon-white .elementor-icon-list-icon svg,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .elementor-widget-icon-list.fp-icon-white .elementor-icon-list-icon svg *,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .elementor-widget-icon-list.fp-icon-white .elementor-icon-list-icon path,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .elementor-widget-icon-list.fp-icon-white .elementor-icon-list-icon circle,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .elementor-widget-icon-list.fp-icon-white .elementor-icon-list-icon rect{
  color: var(--fp-primary) !important;
  fill: var(--fp-primary) !important;
  stroke: var(--fp-primary) !important;
}

/* =========================================================
   FOOTER – CLEAN VARIANTE
   Voraussetzung am Footer-Wrapper:
   fp-footer-gradient is-clean
   ========================================================= */

.fp-footer-gradient.is-clean{
  background: linear-gradient(
    164deg,
    #07080c 21%,
    #08132C 56%
  ) !important;
}

/* Grundtext */
.fp-footer-gradient.is-clean,
.fp-footer-gradient.is-clean p,
.fp-footer-gradient.is-clean span,
.fp-footer-gradient.is-clean li,
.fp-footer-gradient.is-clean strong,
.fp-footer-gradient.is-clean small{
  color: var(--fp-text-invert) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Links */
.fp-footer-gradient.is-clean a{
  color: var(--fp-text-invert) !important;
  text-decoration: none;
}

.fp-footer-gradient.is-clean a:hover,
.fp-footer-gradient.is-clean a:focus{
  color: var(--fp-text-invert) !important;
  opacity: .86;
  text-decoration: none;
}

/* Headlines – bei dir vor allem h3 */
.fp-footer-gradient.is-clean h1,
.fp-footer-gradient.is-clean h2,
.fp-footer-gradient.is-clean h3,
.fp-footer-gradient.is-clean h4,
.fp-footer-gradient.is-clean h5,
.fp-footer-gradient.is-clean h6,
.fp-footer-gradient.is-clean .elementor-widget-heading .elementor-heading-title{
  color: var(--fp-text-invert) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

/* Eyebrows im Footer */
.fp-footer-gradient.is-clean .fp-eyebrow,
.fp-footer-gradient.is-clean .fp-eyebrow .elementor-heading-title{
  color: rgba(255,255,255,.72) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Icon Lists – fp-icon-white darf hier bewusst weiß bleiben */
.fp-footer-gradient.is-clean .fp-icon-white,
.fp-footer-gradient.is-clean .fp-icon-white .elementor-widget-container,
.fp-footer-gradient.is-clean .fp-icon-white .elementor-icon-list-item,
.fp-footer-gradient.is-clean .fp-icon-white .elementor-icon-list-item a,
.fp-footer-gradient.is-clean .fp-icon-white .elementor-icon-list-text{
  color: var(--fp-text-invert) !important;
  -webkit-text-fill-color: currentColor !important;
}

.fp-footer-gradient.is-clean .fp-icon-white .elementor-icon,
.fp-footer-gradient.is-clean .fp-icon-white .elementor-icon i,
.fp-footer-gradient.is-clean .fp-icon-white .elementor-icon svg,
.fp-footer-gradient.is-clean .fp-icon-white .elementor-icon svg *,
.fp-footer-gradient.is-clean .fp-icon-white .elementor-icon-box-icon,
.fp-footer-gradient.is-clean .fp-icon-white .elementor-icon-box-icon i,
.fp-footer-gradient.is-clean .fp-icon-white .elementor-icon-box-icon svg,
.fp-footer-gradient.is-clean .fp-icon-white .elementor-icon-box-icon svg *,
.fp-footer-gradient.is-clean .fp-icon-white .elementor-icon-list-icon,
.fp-footer-gradient.is-clean .fp-icon-white .elementor-icon-list-icon i,
.fp-footer-gradient.is-clean .fp-icon-white .elementor-icon-list-icon svg,
.fp-footer-gradient.is-clean .fp-icon-white .elementor-icon-list-icon svg *{
  color: var(--fp-text-invert) !important;
  fill: var(--fp-text-invert) !important;
  stroke: var(--fp-text-invert) !important;
}

/* Öffnungszeiten-Tabelle */
.fp-footer-gradient.is-clean .footer-opening-hours,
.fp-footer-gradient.is-clean .footer-opening-hours table,
.fp-footer-gradient.is-clean .footer-opening-hours tbody,
.fp-footer-gradient.is-clean .footer-opening-hours tr,
.fp-footer-gradient.is-clean .footer-opening-hours td,
.fp-footer-gradient.is-clean .footer-opening-hours th{
  color: var(--fp-text-invert) !important;
  border: none !important;
  background: transparent !important;
}

/* Trustindex im Footer ruhig integrieren */
.fp-footer-gradient.is-clean .ti-widget-container{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

.fp-footer-gradient.is-clean .ti-widget{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

.fp-footer-gradient.is-clean .ti-widget,
.fp-footer-gradient.is-clean .ti-widget *{
  color: var(--fp-text-invert) !important;
}

/* Google-Logo im Trustindex nicht verfälschen */
.fp-footer-gradient.is-clean .ti-widget img{
  filter: none !important;
}

/* Buttons im Footer */
.fp-footer-gradient.is-clean .elementor-button{
  color: var(--fp-text-invert) !important;
}

.fp-footer-gradient.is-clean .elementor-button *,
.fp-footer-gradient.is-clean .elementor-button:hover *,
.fp-footer-gradient.is-clean .elementor-button:focus *{
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Divider / Trenner / Linien */
.fp-footer-gradient.is-clean hr,
.fp-footer-gradient.is-clean .elementor-divider-separator,
.fp-footer-gradient.is-clean .elementor-widget-divider{
  border-color: rgba(255,255,255,.14) !important;
}

/* Listen-Markierungen */
.fp-footer-gradient.is-clean ul,
.fp-footer-gradient.is-clean ol{
  color: var(--fp-text-invert) !important;
}

/* SVGs allgemein im Footer */
.fp-footer-gradient.is-clean svg{
  color: inherit;
}

/* Footer-Logo-Bereich */
.fp-footer-gradient.is-clean .d-logo,
.fp-footer-gradient.is-clean .l-logo{
  opacity: 1;
}

/* Optional: etwas ruhigere Sekundärinfos */
.fp-footer-gradient.is-clean .is-muted,
.fp-footer-gradient.is-clean .footer-meta,
.fp-footer-gradient.is-clean .copyright{
  color: rgba(255,255,255,.72) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* =========================================================
   CONTACT CLEAN – TRUSTINDEX TEXT FINAL OVERRIDE
   ========================================================= */

body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .ti-widget .ti-rating-text,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .ti-widget .ti-rating-text *,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .ti-widget .ti-footer,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .ti-widget .ti-footer *,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .ti-widget .ti-header,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean .ti-widget .ti-header *{
   color: var(--fp-text) !important;
  -webkit-text-fill-color: currentColor !important;
}


/* =========================================================
   CLEAN MODE – CONTACT SECTION FIXES
   ========================================================= */

/* -----------------------------------------
   TRUSTINDEX – FULL CLEAN OVERRIDE
----------------------------------------- */

body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean 
.ti-widget[data-layout-id='23'][data-set-id='dark-minimal'],
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean 
.ti-widget[data-layout-id='23'][data-set-id='dark-minimal'] .ti-widget-container{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ALLE TEXTE IM TRUSTINDEX WEISS */
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean 
.ti-widget[data-layout-id='23'][data-set-id='dark-minimal'],
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean 
.ti-widget[data-layout-id='23'][data-set-id='dark-minimal'] *,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean 
.ti-widget[data-layout-id='23'][data-set-id='dark-minimal'] .ti-rating-text,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean 
.ti-widget[data-layout-id='23'][data-set-id='dark-minimal'] .ti-rating-text *,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean 
.ti-widget[data-layout-id='23'][data-set-id='dark-minimal'] .ti-header,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean 
.ti-widget[data-layout-id='23'][data-set-id='dark-minimal'] .ti-header *,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean 
.ti-widget[data-layout-id='23'][data-set-id='dark-minimal'] .ti-footer,
body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean 
.ti-widget[data-layout-id='23'][data-set-id='dark-minimal'] .ti-footer *{
  color: #ffffff !important;
  -webkit-text-fill-color: currentColor !important;
}


/* -----------------------------------------
   ICON INNER CIRCLE → CLEAN (WEISS)
----------------------------------------- */

body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean 
.fp-icon-white .elementor-icon::before{
  background: #ffffff !important;
}


/* -----------------------------------------
   OPTIONAL: GENERIC ICON CLEAN FALLBACK
----------------------------------------- */
/* Falls irgendwo kein fp-icon-white gesetzt ist */

body.fp-theme-standard .dark-section.fp-dark-gradient.fp-contact-section.is-clean 
.elementor-widget-icon .elementor-icon::before{
  background: #ffffff !important;
}


/* =========================================================
   CLEAN MODE – FOOTER
   ========================================================= */

body.fp-theme-standard .fp-footer-gradient.is-clean{
  background: linear-gradient(
    164deg,
    #07080c 21%,
    #08132C 56%
  ) !important;
}

/* TEXT & HEADLINES */
body.fp-theme-standard .fp-footer-gradient.is-clean,
body.fp-theme-standard .fp-footer-gradient.is-clean p,
body.fp-theme-standard .fp-footer-gradient.is-clean span,
body.fp-theme-standard .fp-footer-gradient.is-clean a,
body.fp-theme-standard .fp-footer-gradient.is-clean li{
  color: #ffffff !important;
}

/* H3 im Footer */
body.fp-theme-standard .fp-footer-gradient.is-clean h3{
  color: #ffffff !important;
}

/* ICON LISTEN */
body.fp-theme-standard .fp-footer-gradient.is-clean .fp-icon-white .elementor-icon-list-text{
  color: #ffffff !important;
}

body.fp-theme-standard .fp-footer-gradient.is-clean .fp-icon-white .elementor-icon-list-icon i,
body.fp-theme-standard .fp-footer-gradient.is-clean .fp-icon-white .elementor-icon-list-icon svg{
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* LINKS */
body.fp-theme-standard .fp-footer-gradient.is-clean a:hover{
  opacity: 0.8;
}

/* KEINE CARDS / BOXEN */
body.fp-theme-standard .fp-footer-gradient.is-clean .elementor-widget{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}


.herospan {
  font-size: clamp(2em, 1.2em + 3vw, 4em);
  font-family: var(--fp-font-headline) !important;
}


/* =========================================================
   ICON BOX SURFACES / HOVER BRAND
   ========================================================= */

:root{
  --fp-iconbox-bg: color-mix(in srgb, var(--fp-primary) 10%, white);
  --fp-iconbox-border: color-mix(in srgb, var(--fp-primary) 18%, white);
  --fp-iconbox-hover-bg: var(--fp-gradient-brand);
  --fp-iconbox-text: var(--fp-text);
  --fp-iconbox-text-hover: var(--fp-text-invert);
  --fp-iconbox-icon: var(--fp-text);
  --fp-iconbox-icon-hover: var(--fp-text-invert);
}

/* =========================================================
   ICON BOX – SOFT TO BRAND HOVER
   ========================================================= */

.fp-iconbox-brand{
  background: var(--fp-iconbox-bg) !important;
  border: 1px solid var(--fp-iconbox-border) !important;
  border-radius: var(--fp-radius-xl) !important;
  box-shadow: var(--fp-shadow-soft) !important;
  transition:
    background .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    transform .28s ease;
}

.fp-iconbox-brand .elementor-widget-container{
  padding: 24px;
}

.fp-iconbox-brand,
.fp-iconbox-brand .elementor-icon-box-title,
.fp-iconbox-brand .elementor-icon-box-title a,
.fp-iconbox-brand .elementor-icon-box-description,
.fp-iconbox-brand .elementor-icon-box-description p{
  color: var(--fp-iconbox-text) !important;
}

.fp-iconbox-brand .elementor-icon,
.fp-iconbox-brand .elementor-icon i,
.fp-iconbox-brand .elementor-icon svg{
  color: var(--fp-iconbox-icon) !important;
  fill: var(--fp-iconbox-icon) !important;
  stroke: var(--fp-iconbox-icon) !important;
}

.fp-iconbox-brand:hover{
  background: var(--fp-iconbox-hover-bg) !important;
  border-color: transparent !important;
  box-shadow: var(--fp-shadow-medium) !important;
  transform: translateY(-2px);
}

.fp-iconbox-brand:hover,
.fp-iconbox-brand:hover .elementor-icon-box-title,
.fp-iconbox-brand:hover .elementor-icon-box-title a,
.fp-iconbox-brand:hover .elementor-icon-box-description,
.fp-iconbox-brand:hover .elementor-icon-box-description p{
  color: var(--fp-iconbox-text-hover) !important;
}

.fp-iconbox-brand:hover .elementor-icon,
.fp-iconbox-brand:hover .elementor-icon i,
.fp-iconbox-brand:hover .elementor-icon svg{
  color: var(--fp-iconbox-icon-hover) !important;
  fill: var(--fp-iconbox-icon-hover) !important;
  stroke: var(--fp-iconbox-icon-hover) !important;
}


/* =========================================================
   SOFT BRAND SURFACE (ICONBOX / CONTAINER)
   ========================================================= */

.fp-surface-soft{
  background: var(--fp-surface-soft) !important;
  border: 1px solid var(--fp-surface-border) !important;
  border-radius: var(--fp-radius-xl) !important;

  box-shadow: var(--fp-shadow-soft);

  transition:
    background .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    transform .28s ease;
}

/* Hover Zustand */
.fp-surface-soft:hover{
  background: var(--fp-surface-hover) !important;
  border-color: transparent !important;
  box-shadow: var(--fp-shadow-medium);
  transform: translateY(-2px);
}

/* Text + Inhalte im Hover anpassen */
.fp-surface-soft:hover,
.fp-surface-soft:hover *{
  color: var(--fp-text-invert) !important;
}

/* Icons im Hover korrekt einfärben */
.fp-surface-soft:hover svg,
.fp-surface-soft:hover i{
  fill: var(--fp-text-invert) !important;
  stroke: var(--fp-text-invert) !important;
}


/* =========================================================
   ROADMAP – ALTERNIEREND (LINKS / RECHTS)
   ========================================================= */

.fp-roadmap{
  display: flex;
  flex-direction: column;
  gap: 36px;
  position: relative;
}

/* MITTLERE LINIE */
.fp-roadmap::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: color-mix(in srgb, var(--fp-primary) 20%, white);
  transition: background .4s ease;
}

/* EIN STEP */
.fp-roadmap-step{
  display: grid;
  grid-template-columns: minmax(0, 520px) 80px minmax(0, 520px);
  justify-content: center;
  align-items: center;
  position: relative;
}

/* SEITEN */
.fp-roadmap-side{
  display: flex;
}

.fp-roadmap-side-left{
  justify-content: flex-end;
  text-align: right;
}

.fp-roadmap-side-right{
  justify-content: flex-start;
  text-align: left;
}

/* CONTENT BOX */
.fp-roadmap-content{
  max-width: 520px;
  width: 100%;
  background: var(--fp-bg-white);
  border: 1px solid var(--fp-border-light);
  border-radius: var(--fp-radius-soft);
  box-shadow: var(--fp-shadow-soft);
  padding: 22px 24px 24px;
  transition: all 0.3s ease;
}

/* TYPO */
.fp-roadmap-content h3{
  font-size: clamp(1.5rem, 1.35rem + 0.6vw, 2rem) !important;
  line-height: 1.2;
}

/* MITTLERE SPALTE */
.fp-roadmap-line{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* DOT */
.fp-roadmap-dot{
  width: clamp(34px, 3.2vw, 44px);
  height: clamp(34px, 3.2vw, 44px);
  border-radius: 50%;
  background: var(--fp-bg-white);
  border: 2px solid var(--fp-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--fp-primary) 8%, white);
  transition: all 0.3s ease;
  font-size: clamp(0.95rem, 0.85rem + 0.2vw, 1.15rem);
  font-weight: 600;
  line-height: 1;
}

/* Texteditor / Zahl im Dot sauber resetten */
.fp-roadmap-dot .elementor-widget-text-editor,
.fp-roadmap-dot .elementor-widget-container,
.fp-roadmap-dot p{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  color: var(--fp-primary) !important;
}

/* HOVER */
.fp-roadmap-step:hover .fp-roadmap-content{
  box-shadow: var(--fp-shadow-medium);
  border-color: color-mix(in srgb, var(--fp-primary) 20%, white);
}

.fp-roadmap-step:hover .fp-roadmap-dot{
  background: var(--fp-primary);
}

.fp-roadmap-step:hover .fp-roadmap-dot,
.fp-roadmap-step:hover .fp-roadmap-dot .elementor-widget-text-editor,
.fp-roadmap-step:hover .fp-roadmap-dot .elementor-widget-container,
.fp-roadmap-step:hover .fp-roadmap-dot p{
  color: var(--fp-text-invert) !important;
}

/* ABSTAND ZUR LINIE */
.fp-roadmap-side-left .fp-roadmap-content{
  margin-right: 20px;
}

.fp-roadmap-side-right .fp-roadmap-content{
  margin-left: 20px;
}

/* =========================================================
   DOT POSITION – ALTERNIEREND LINKS / RECHTS
   ========================================================= */

/* Wenn Content links sitzt -> Dot links der Linie */
.fp-roadmap-step:has(.fp-roadmap-side-left .fp-roadmap-content) .fp-roadmap-dot{
  transform: translateX(-40px);
}

/* Wenn Content rechts sitzt -> Dot rechts der Linie */
.fp-roadmap-step:has(.fp-roadmap-side-right .fp-roadmap-content) .fp-roadmap-dot{
  transform: translateX(40px);
}

/* =========================================================
   ROADMAP – SCROLL REVEAL (EDITOR SAFE)
   ========================================================= */

/* Nur im Frontend aktiv (nicht im Elementor Editor) */
body:not(.elementor-editor-active) .fp-roadmap-step{
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity .7s ease,
    transform .7s ease;
  will-change: opacity, transform;
}

/* Sichtbar */
body:not(.elementor-editor-active) .fp-roadmap-step.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Box bekommt etwas mehr Präsenz */
body:not(.elementor-editor-active) .fp-roadmap-step.is-visible .fp-roadmap-content{
  box-shadow: var(--fp-shadow-medium);
  border-color: color-mix(in srgb, var(--fp-primary) 18%, white);
}

/* Dot wird aktiv */
body:not(.elementor-editor-active) .fp-roadmap-step.is-visible .fp-roadmap-dot{
  background: var(--fp-primary);
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--fp-primary) 10%, white),
    0 0 18px color-mix(in srgb, var(--fp-primary) 26%, transparent);
}

/* aktive Dot-Schrift weiß */
body:not(.elementor-editor-active) .fp-roadmap-step.is-visible .fp-roadmap-dot,
body:not(.elementor-editor-active) .fp-roadmap-step.is-visible .fp-roadmap-dot .elementor-widget-text-editor,
body:not(.elementor-editor-active) .fp-roadmap-step.is-visible .fp-roadmap-dot .elementor-widget-container,
body:not(.elementor-editor-active) .fp-roadmap-step.is-visible .fp-roadmap-dot p{
  color: var(--fp-text-invert) !important;
}

/* Leichter Stagger */
body:not(.elementor-editor-active) .fp-roadmap-step:nth-child(1){ transition-delay: .00s; }
body:not(.elementor-editor-active) .fp-roadmap-step:nth-child(2){ transition-delay: .06s; }
body:not(.elementor-editor-active) .fp-roadmap-step:nth-child(3){ transition-delay: .12s; }
body:not(.elementor-editor-active) .fp-roadmap-step:nth-child(4){ transition-delay: .18s; }

/* Safety: Im Elementor Editor IMMER sichtbar */
body.elementor-editor-active .fp-roadmap-step{
  opacity: 1 !important;
  transform: none !important;
}

/* =========================================================
   MOBILE – WIEDER UNTEREINANDER / ZENTRIERT
   ========================================================= */

@media (max-width: 767px){

  .fp-roadmap-step{
    display: grid !important;
    grid-template-columns: 40px 1fr !important;
    align-items: center !important;
    column-gap: 12px !important;
  }

  .fp-roadmap::before{
    left: 20px !important;
    transform: translateX(-50%) !important;
  }

  /* Linie immer links in Spalte 1 */
  .fp-roadmap-line{
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-content: center !important;
    align-self: center !important;
  }

  /* Beide möglichen Seiten auf dieselbe Content-Spalte legen */
  .fp-roadmap-side-left,
  .fp-roadmap-side-right{
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  /* Leere Gegenseite auf Mobile ausblenden */
  .fp-roadmap-side:empty{
    display: none !important;
  }

  .fp-roadmap-content{
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Dot auf Mobile wieder neutral auf der Linie */
  .fp-roadmap-dot{
    transform: none !important;
  }

  /* Reveal etwas softer */
  body:not(.elementor-editor-active) .fp-roadmap-step{
    transform: translateY(24px);
    transition:
      opacity .55s ease,
      transform .55s ease;
  }
}

@media (min-width: 768px){
  .fp-roadmap-line{
    transform: translateX(20px);
  }
}


/* =========================================================
   INFO CARD – THEME SAFE SURFACE
   ---------------------------------------------------------
   Nutzung:
   - Klasse auf den Container der Box legen: fp-info-card
   - ersetzt lokale Elementor-Hintergrundfarben
   - Standard: weiße Card mit dunklem Text
   - Premium: dunkle Card mit hellem Text
   ========================================================= */

.fp-info-card{
  background: var(--fp-bg-white) !important;
  color: var(--fp-text) !important;
  border: 1px solid var(--fp-border-light) !important;
  border-radius: var(--fp-radius-soft) !important;
  box-shadow: var(--fp-shadow-soft) !important;
  background-image: none !important;
}

.fp-info-card,
.fp-info-card p,
.fp-info-card li,
.fp-info-card span,
.fp-info-card strong,
.fp-info-card .elementor-widget-text-editor,
.fp-info-card .elementor-widget-text-editor p,
.fp-info-card .elementor-widget-icon-list .elementor-icon-list-item,
.fp-info-card .elementor-widget-icon-list .elementor-icon-list-item a,
.fp-info-card .elementor-widget-icon-box .elementor-icon-box-title,
.fp-info-card .elementor-widget-icon-box .elementor-icon-box-title a,
.fp-info-card .elementor-widget-icon-box .elementor-icon-box-description,
.fp-info-card .elementor-widget-icon-box .elementor-icon-box-description p{
  color: var(--fp-text) !important;
  -webkit-text-fill-color: currentColor !important;
}

.fp-info-card h1,
.fp-info-card h2,
.fp-info-card h3,
.fp-info-card h4,
.fp-info-card h5,
.fp-info-card h6,
.fp-info-card .elementor-widget-heading .elementor-heading-title{
  color: var(--fp-text) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

.fp-info-card .elementor-icon,
.fp-info-card .elementor-icon i,
.fp-info-card .elementor-icon svg,
.fp-info-card .elementor-icon-list-icon i,
.fp-info-card .elementor-icon-list-icon svg,
.fp-info-card .elementor-icon-box-icon i,
.fp-info-card .elementor-icon-box-icon svg{
  color: var(--fp-primary) !important;
  fill: var(--fp-primary) !important;
  stroke: var(--fp-primary) !important;
}

body.fp-theme-premium .fp-info-card{
  color: var(--fp-text-invert) !important;
}

body.fp-theme-premium .fp-info-card,
body.fp-theme-premium .fp-info-card p,
body.fp-theme-premium .fp-info-card li,
body.fp-theme-premium .fp-info-card span,
body.fp-theme-premium .fp-info-card strong,
body.fp-theme-premium .fp-info-card .elementor-widget-text-editor,
body.fp-theme-premium .fp-info-card .elementor-widget-text-editor p,
body.fp-theme-premium .fp-info-card .elementor-widget-icon-list .elementor-icon-list-item,
body.fp-theme-premium .fp-info-card .elementor-widget-icon-list .elementor-icon-list-item a,
body.fp-theme-premium .fp-info-card .elementor-widget-icon-box .elementor-icon-box-title,
body.fp-theme-premium .fp-info-card .elementor-widget-icon-box .elementor-icon-box-title a,
body.fp-theme-premium .fp-info-card .elementor-widget-icon-box .elementor-icon-box-description,
body.fp-theme-premium .fp-info-card .elementor-widget-icon-box .elementor-icon-box-description p{
  color: var(--fp-text-invert) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.fp-theme-premium .fp-info-card h1,
body.fp-theme-premium .fp-info-card h2,
body.fp-theme-premium .fp-info-card h3,
body.fp-theme-premium .fp-info-card h4,
body.fp-theme-premium .fp-info-card h5,
body.fp-theme-premium .fp-info-card h6,
body.fp-theme-premium .fp-info-card .elementor-widget-heading .elementor-heading-title{
  color: var(--fp-text-invert) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

/* =========================================================
   INFO BOX (STATIC / NO HOVER)
   ========================================================= */

.fp-info-box{
  background: var(--fp-surface-soft);
  border: 1px solid var(--fp-border-light);
  border-radius: var(--fp-radius);
  box-shadow: var(--fp-shadow-soft);

  padding: clamp(20px, 2vw, 28px);
  height: 100%;
}

/* Typography sauber halten */
.fp-info-box h3{
  margin-bottom: 10px;
}

.fp-info-box p{
  margin-bottom: 0;
}

/* Wichtig: KEINE Hover-Effekte */
.fp-info-box:hover{
  transform: none;
  box-shadow: var(--fp-shadow-soft);
}

/* =========================================================
   RELATED PAGES
   ========================================================= */

.fp-text-default{
  color: var(--fp-text) !important;
  -webkit-text-fill-color: currentColor !important;
}


/* =========================================================
   TRUSTINDEX – CLEAN FINAL
   ========================================================= */

.is-clean .ti-widget,
.is-clean .ti-widget-container,
.is-clean .ti-widget-container *,
.is-clean .ti-widget .ti-rating-text,
.is-clean .ti-widget .ti-rating-text *,
.is-clean .ti-widget .ti-header,
.is-clean .ti-widget .ti-header *,
.is-clean .ti-widget .ti-footer,
.is-clean .ti-widget .ti-footer *,
.is-clean .ti-widget .ti-review-content,
.is-clean .ti-widget .ti-review-content *,
.is-clean .ti-widget .ti-name,
.is-clean .ti-widget .ti-date{
  color: var(--fp-text) !important;
  -webkit-text-fill-color: currentColor !important;
}


/* =========================================================
   CLEAN MODE – PORTFOLIO OVERLAY
   ========================================================= */

.is-clean .elementor-portfolio-item__overlay{
  background: rgba(0,0,0,0.5) !important;
  background-image: none !important;
}

.is-clean .elementor-portfolio-item__overlay *{
  color: #ffffff !important;
}

/* =========================================
   CLEAN LOOP KARUSSELL – PFEILE OHNE BOX
========================================= */

.is-clean .elementor-swiper-button,
.is-clean .swiper-button-prev,
.is-clean .swiper-button-next {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Elementor / Swiper Pfeil-Icons */
.is-clean .elementor-swiper-button i,
.is-clean .elementor-swiper-button svg,
.is-clean .swiper-button-prev::after,
.is-clean .swiper-button-next::after {
  color: var(--fp-primary) !important;
  fill: var(--fp-primary) !important;
}

/* Falls Elementor Icons statt ::after nutzt */
.is-clean .elementor-swiper-button {
  color: var(--fp-primary) !important;
}


/* =========================================
   CLEAN MODE – EYEBROW COLOR
========================================= */

.is-clean{
  --fp-eyebrow-color: var(--fp-primary);
}

/* =========================================================
   FEATURE POINT – EDITORIAL USP / WHY-US BLOCK
   ========================================================= */


/* =========================================================
   OLD FEATURE LIST (DEAKTIVIERT)
   ---------------------------------------------------------
   Alte 1-Spalten-Logik – ersetzt durch Grid
   ========================================================= */

/*
.fp-feature-list{
  display: flex;
  flex-direction: column;
  gap: 72px;
}
*/


/* =========================================================
   NEW FEATURE LIST (2-SPALTEN GRID)
   ========================================================= */

.fp-feature-list{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 80px;
  row-gap: 80px;
}

.fp-feature-list > .e-con{
  width: calc(50% - 40px);
  max-width: calc(50% - 40px);
  flex: 0 0 calc(50% - 40px);
}


/* =========================================================
   FEATURE POINT (CONTENT BLOCK)
   ========================================================= */

.fp-feature-point{
  display: flex;
  flex-direction: column;
  gap: 0;
  color: var(--fp-text);
}

.fp-feature-point__icon{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transform: translateY(2px);
}

.fp-feature-point__icon{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.fp-feature-point__icon .elementor-icon,
.fp-feature-point__icon i,
.fp-feature-point__icon svg{
  color: var(--fp-primary) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  font-size: 38px;
}

.fp-feature-point__title,
.fp-feature-point__title .elementor-heading-title{
  margin: 0 !important;
  color: var(--fp-text) !important;
  line-height: 1.08;
}

.fp-feature-point__text{
  margin: 0;
  max-width: 520px;
}

.fp-feature-point__text,
.fp-feature-point__text p,
.fp-feature-point__text span,
.fp-feature-point__text li{
  color: var(--fp-text) !important;
}

.fp-feature-point__text p:last-child{
  margin-bottom: 0 !important;
}

.fp-feature-point__benefit{
  margin-top: 20px; /* leicht erhöht für bessere Trennung */
  max-width: 520px;
}

.fp-feature-point__benefit,
.fp-feature-point__benefit p,
.fp-feature-point__benefit span{
  color: var(--fp-text) !important;
  font-weight: 700;
}

.fp-feature-point__benefit p:last-child{
  margin-bottom: 0 !important;
}


/* =========================================================
   LINKS
   ========================================================= */

.fp-feature-point__text a,
.fp-feature-point__benefit a{
  color: var(--fp-primary) !important;
  text-decoration: none;
}

.fp-feature-point__text a:hover,
.fp-feature-point__benefit a:hover{
  color: var(--fp-primary-dark) !important;
  text-decoration: underline;
}


/* =========================================================
   THEME: PREMIUM
   ========================================================= */

body.fp-theme-premium .fp-feature-point{
  color: var(--fp-text-invert);
}

body.fp-theme-premium .fp-feature-point__title,
body.fp-theme-premium .fp-feature-point__title .elementor-heading-title,
body.fp-theme-premium .fp-feature-point__text,
body.fp-theme-premium .fp-feature-point__text p,
body.fp-theme-premium .fp-feature-point__text span,
body.fp-theme-premium .fp-feature-point__text li,
body.fp-theme-premium .fp-feature-point__benefit,
body.fp-theme-premium .fp-feature-point__benefit p,
body.fp-theme-premium .fp-feature-point__benefit span{
  color: var(--fp-text-invert) !important;
}

body.fp-theme-premium .fp-feature-point__text a,
body.fp-theme-premium .fp-feature-point__benefit a{
  color: var(--fp-primary) !important;
}

body.fp-theme-premium .fp-feature-point__text a:hover,
body.fp-theme-premium .fp-feature-point__benefit a:hover{
  color: var(--fp-primary-dark) !important;
}


/* =========================================================
   OPTIONAL: DIVIDER
   ========================================================= */

.fp-feature-list.has-divider > .e-con{
  padding-bottom: 32px;
  border-bottom: 1px solid var(--fp-border-soft);
}

.fp-feature-list.has-divider > .e-con:last-child{
  border-bottom: none;
  padding-bottom: 0;
}


/* =========================================================
   OPTIONAL: COMPACT
   ========================================================= */

.fp-feature-point.is-compact .fp-feature-point__head{
  gap: 14px;
  margin-bottom: 14px;
}

.fp-feature-point.is-compact .fp-feature-point__icon .elementor-icon,
.fp-feature-point.is-compact .fp-feature-point__icon i,
.fp-feature-point.is-compact .fp-feature-point__icon svg{
  font-size: 32px;
}

.fp-feature-point.is-compact .fp-feature-point__benefit{
  margin-top: 14px;
}


/* =========================================================
   FEATURE POINT – VISUAL UPGRADE (SCAN + RHYTHM)
   ADDON – KONSOLIDIERT
   ========================================================= */

/* Alle Boxen bekommen eine saubere Grundform */
.fp-feature-list > .e-con .fp-feature-point{
  padding: 28px;
  border-radius: 14px;
}

/* Zebra nur über Hintergrund */
.fp-feature-list > .e-con:nth-child(odd) .fp-feature-point{
  background: transparent;
}

.fp-feature-list > .e-con:nth-child(even) .fp-feature-point{
  background: var(--fp-bg-soft);
}

/* Head sauber führen */
.fp-feature-point__head{
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin: 0 0 26px;
}

/* Benefit klar trennen */
.fp-feature-point__benefit{
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--fp-border-soft);
}

/* Hover (Desktop) */
@media (hover: hover){
  .fp-feature-list .fp-feature-point{
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .fp-feature-list .fp-feature-point:hover{
    transform: translateY(-2px);
  }
}

/* Premium */
body.fp-theme-premium .fp-feature-list > .e-con:nth-child(even) .fp-feature-point{
  background: var(--fp-surface-dark-2);
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px){

  .fp-feature-list{
    column-gap: 0;
    row-gap: 44px;
  }

  .fp-feature-list > .e-con{
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

  /* Head-Bereich mobile sauber mittig führen */
  .fp-feature-point__head{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 0;
    text-align: center;
  }

  /* Icon mittig und größer */
  .fp-feature-point__icon{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    transform: none;
    margin: 0 auto;
  }

  .fp-feature-point__icon .elementor-icon,
  .fp-feature-point__icon i,
  .fp-feature-point__icon svg{
    font-size: 100px !important;
    width: 100px !important;
    height: 100px !important;
  }

  /* Headline mittig */
  .fp-feature-point__title,
  .fp-feature-point__title .elementor-heading-title{
    width: 100%;
    text-align: center !important;
  }

  .fp-feature-point__text,
  .fp-feature-point__benefit{
    max-width: 100%;
  }

  .fp-feature-point__benefit{
    margin-top: 16px;
  }

  .fp-feature-list.has-divider > .e-con{
    padding-bottom: 24px;
  }
}


/* =========================================================
   LIGHTBOX / GALLERY – SWIPER BUTTON FIX
   ---------------------------------------------------------
   Verhindert orange Flächen in der Elementor-Lightbox
   ========================================================= */

.dialog-lightbox .swiper-button-prev,
.dialog-lightbox .swiper-button-next,
.elementor-lightbox .swiper-button-prev,
.elementor-lightbox .swiper-button-next,
.dialog-lightbox .elementor-swiper-button,
.elementor-lightbox .elementor-swiper-button{
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.dialog-lightbox .swiper-button-prev:hover,
.dialog-lightbox .swiper-button-next:hover,
.elementor-lightbox .swiper-button-prev:hover,
.elementor-lightbox .swiper-button-next:hover,
.dialog-lightbox .elementor-swiper-button:hover,
.elementor-lightbox .elementor-swiper-button:hover{
  background: transparent !important;
  background-color: transparent !important;
}

/* =========================================================
   UMSCHREIBUNG – STEP BOXEN
   ========================================================= */

/* Step-Box Basis */
.fp-step{
  background: var(--fp-bg-soft);
  border: 1px solid var(--fp-border-soft);
  border-radius: 16px;
  padding: 28px;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.fp-step:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  border-color: var(--fp-primary);
}

/* Wrapper als echter Kopfbereich */
.fp-step .elementor-icon-box-wrapper{
  display: block;
}

/* Icon-Bereich als Zahl-Badge nutzen */
.fp-step .elementor-icon-box-icon{
  display: inline-flex !important;
  vertical-align: top;
  margin-right: 14px;
  margin-bottom: 18px;
}

.fp-step .elementor-icon{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(243,146,0,.12);
  color: var(--fp-primary) !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

/* Zahl per CSS einsetzen */
.fp-step-1 .elementor-icon::before{ content: "1"; }
.fp-step-2 .elementor-icon::before{ content: "2"; }
.fp-step-3 .elementor-icon::before{ content: "3"; }

/* Headline direkt neben dem Badge */
.fp-step .elementor-icon-box-title{
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 32px);
  margin: 0 0 20px !important;
  line-height: 1.08;
}

/* Content normal darunter */
.fp-step .elementor-icon-box-content{
  padding-left: 0 !important;
  padding-top: 0 !important;
}

/* Liste */
.fp-step .elementor-icon-box-description ul{
  margin: 0 !important;
  padding-left: 20px !important;
}

.fp-step .elementor-icon-box-description li,
.fp-step li{
  margin-left: -20px !important;
  margin-bottom: 15px;
}

.fp-step .elementor-icon-box-description li:last-child,
.fp-step li:last-child{
  margin-bottom: 0 !important;
}

/* Leere / störende Paragraphen ausblenden */
.fp-step p{
  display: none !important;
}

/* Mobile */
@media (max-width: 767px){
  .fp-step{
    padding: 10px;
  }

  .fp-step .elementor-icon-box-icon{
    margin-right: 12px;
    margin-bottom: 16px;
  }

  .fp-step .elementor-icon{
    width: 38px;
    height: 38px;
    font-size: 17px;
  }

  .fp-step .elementor-icon-box-title{
    width: calc(100% - 58px);
    margin-bottom: 20px !important;
  }
}

/* =========================================================
   STEP SECONDARY BOXEN (HINWEISE / NACHGELAGERTE INFOS)
   ========================================================= */

.fp-step-secondary{
  background: var(--fp-bg-white);
  border: 1px solid var(--fp-border-soft);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
  /* bewusst ruhiger als Haupt-Boxen */
  transition: none;
}

/* Kein Hover-Effekt */
.fp-step-secondary:hover{
  transform: none;
  box-shadow: none;
  border-color: var(--fp-border-soft);
}

/* Icon/Zahl komplett entfernen */
.fp-step-secondary .elementor-icon-box-icon{
  display: none !important;
}

/* Wrapper */
.fp-step-secondary .elementor-icon-box-wrapper{
  display: block;
}

/* Content ohne Einrückung */
.fp-step-secondary .elementor-icon-box-content{
  padding-left: 0 !important;
  padding-top: 0 !important;
}

/* Headline wieder full width */
.fp-step-secondary .elementor-icon-box-title{
  width: 100%;
  margin: 0 0 18px !important;
  line-height: 1.15;
}

/* Liste sauber */
.fp-step-secondary .elementor-icon-box-description ul{
  margin: 0 !important;
  padding-left: 20px !important;
}

.fp-step-secondary .elementor-icon-box-description li{
  margin-left: -20px !important;
  margin-bottom: 12px;
}

.fp-step-secondary .elementor-icon-box-description li:last-child{
  margin-bottom: 0;
}

/* Elementor-Müll entfernen */
.fp-step-secondary p{
  display: none !important;
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */
@media (max-width: 767px){
  .fp-step-secondary{
    padding: 20px;
  }

  .fp-step-secondary .elementor-icon-box-title{
    margin-bottom: 18px !important;
  }
}


/* =========================================================
   COST CALCULATOR – SYSTEM STYLE
   ========================================================= */

.fp-cost-calculator{
  width: 100%;
}

/* =========================
   FIXPREIS GRID
   ========================= */

.fp-cost-calculator .fs-price-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.fp-cost-calculator .fs-price-card{
  background: var(--fp-bg-soft);
  border: 1px solid var(--fp-border-soft);
  border-radius: 16px;

  padding: 24px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  transition: transform .2s ease, box-shadow .2s ease;
}

.fp-cost-calculator .fs-price-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

/* =========================
   TEXT IN CARDS
   ========================= */

.fp-cost-calculator .fs-price-card-title{
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--fp-text);
}

.fp-cost-calculator .fs-price-card-price{
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--fp-primary);
}

.fp-cost-calculator .fs-price-card-description{
  font-size: 15px;
  line-height: 1.5;
  color: var(--fp-text);
}

/* =========================
   CALCULATOR BOX
   ========================= */

.fp-cost-calculator .fs-calculator-container{
  background: var(--fp-bg-light);
  border: 1px solid var(--fp-border-soft);
  border-radius: 16px;

  padding: 24px;

  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

/* =========================
   TITLES
   ========================= */

.fp-cost-calculator .fs-calculator-title{
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 10px;
  color: var(--fp-primary);
}

/* =========================
   INPUT BOX
   ========================= */

.fp-cost-calculator .fs-calculator-input-box{
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 180px;
  min-height: 50px;

  padding: 6px 48px;

  border: 1px solid var(--fp-border-soft);
  border-radius: 999px;

  background: var(--fp-bg-white);
}

/* =========================
   PLUS / MINUS BUTTONS
   ========================= */

.fp-cost-calculator .fs-calculator-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;

  aspect-ratio: 1 / 1;
  border-radius: 50%;

  border: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
  font-weight: 700;

  background: var(--fp-bg-soft);
  color: var(--fp-text);

  transition: all .2s ease;
}

.fp-cost-calculator .fs-calculator-btn:hover{
  background: var(--fp-primary);
  color: var(--fp-text-invert);
}

.fp-cost-calculator .fs-calculator-minus{
  left: 8px;
}

.fp-cost-calculator .fs-calculator-plus{
  right: 8px;
}

/* =========================
   INPUT
   ========================= */

.fp-cost-calculator .fs-calculator-hours-input{
  width: 100%;
  border: none;
  outline: none;
  background: transparent;

  text-align: center;

  font-size: 18px;
  font-weight: 700;

  color: var(--fp-text);
}

/* =========================
   SUBTEXT
   ========================= */

.fp-cost-calculator .fs-calculator-subtext{
  margin-top: 10px;
  font-size: 14px;
  color: var(--fp-text);
}


/* =========================
   TOTAL
   ========================= */

.fp-cost-calculator .fs-calculator-price{
  text-align: right;
}

.fp-cost-calculator .fs-calculator-total{
  display: block;
  margin-top: 6px;

  font-size: 32px;
  font-weight: 700;

  color: var(--fp-text);
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 1024px){
  .fp-cost-calculator .fs-price-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px){
  .fp-cost-calculator .fs-price-grid{
    grid-template-columns: 1fr;
  }

  .fp-cost-calculator .fs-calculator-container{
    flex-direction: column;
    align-items: flex-start;
  }

  .fp-cost-calculator .fs-calculator-price{
    text-align: left;
  }
}

.fp-cost-calculator .fs-calculator-btn{
  background: var(--fp-bg-soft) !important;
  color: var(--fp-text) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  aspect-ratio: 1 / 1;
  border-radius: 50% !important;
}

.fp-cost-calculator .fs-calculator-btn:hover,
.fp-cost-calculator .fs-calculator-btn:focus,
.fp-cost-calculator .fs-calculator-btn:active{
  background: var(--fp-primary) !important;
  color: var(--fp-text-invert) !important;
}

.fp-cost-calculator .fs-extra-costs-item,
.fp-cost-calculator .fs-extra-costs-item-title,
.fp-cost-calculator .fs-extra-costs-list li{
  font-size: 18px !important;
  line-height: 1.4;
  font-weight: 600;
}

#<?php echo esc_attr($widget_id); ?>-additional-costs .fs-additional-costs-title {
    font-size: 18px;
    font-weight: 600;
}

#<?php echo esc_attr($widget_id); ?>-additional-costs .fs-additional-costs-price {
    font-size: 18px;
    font-weight: 600;
}

#<?php echo esc_attr($widget_id); ?>-additional-costs .fs-additional-costs-description {
    font-size: 16px;
}

.fp-cost-calculator .fs-variant-switch{
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.fp-cost-calculator .fs-variant-btn{
  background: transparent;
  border: 1px solid var(--fp-border-soft);
  color: var(--fp-text);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
}

.fp-cost-calculator .fs-variant-btn:hover{
  border-color: var(--fp-primary);
  color: var(--fp-primary);
}

.fp-cost-calculator .fs-variant-btn.is-active{
  background: var(--fp-primary);
  color: #fff;
  border-color: var(--fp-primary);
}

.fp-cost-calculator .fs-additional-costs-title{
  font-weight: 500;
}

.fp-cost-calculator .fs-additional-costs-price{
  font-weight: 500;
}

.fp-cost-calculator .fs-additional-costs-total{
  font-weight: 700;
}

.fp-cost-calculator .fs-variant-btn:hover{
  background: var(--fp-text);
  color: #fff;
  border-color: var(--fp-text);
}

.fp-cost-calculator .fs-variant-btn.is-active{
  background: var(--fp-primary);
  color: #fff;
  border-color: var(--fp-primary);
}

/* =========================================================
   COST CALCULATOR – ELEMENTOR NESTED TABS
   Nur für den Rechner-Bereich
   Voraussetzung: Klasse "fp-cost-tabs" am Tabs-Widget
   ========================================================= */

/* Grundzustand */
.fp-cost-tabs .e-n-tabs-heading .e-n-tab-title{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: transparent !important;
  background-image: none !important;
  border: 1px solid #d6d6d6 !important;
  border-radius: 10px !important;
  padding: 12px 20px !important;
  color: var(--fp-text) !important;
  font-weight: 600 !important;
  transition: all .2s ease;
  box-sizing: border-box !important;
}

/* Hover */
.fp-cost-tabs .e-n-tabs-heading .e-n-tab-title[aria-selected="false"]:hover{
  background: var(--fp-text) !important;
  background-image: none !important;
  border-color: var(--fp-text) !important;
  color: var(--fp-text-invert) !important;
}

/* Aktiver Tab */
.fp-cost-tabs .e-n-tabs-heading .e-n-tab-title[aria-selected="true"]{
  background: var(--fp-primary) !important;
  background-image: none !important;
  border-color: var(--fp-primary) !important;
  color: var(--fp-text-invert) !important;
}

/* Fokus / Klickzustände ruhig halten */
.fp-cost-tabs .e-n-tabs-heading .e-n-tab-title:focus,
.fp-cost-tabs .e-n-tabs-heading .e-n-tab-title:active{
  background-image: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Tabs untereinander etwas sauberer */
.fp-cost-tabs .e-n-tabs-heading{
  gap: 12px;
  overflow: visible !important;
}

/* Content-Bereich neutral halten */
.fp-cost-tabs .e-n-tabs-content,
.fp-cost-tabs .e-n-tabs-content > .e-con{
  border: none !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Mobile */
@media (max-width: 767px){
  .fp-cost-tabs .e-n-tabs-heading{
    gap: 8px;
    overflow: visible !important;
  }

  .fp-cost-tabs .e-n-tabs-heading .e-n-tab-title{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   UNLIMITED ELEMENTS – CONTENT REVEAL ON HOVER
   FINAL SYSTEM VERSION
   Voraussetzung: Klasse "fp-ue-hover-card"
   ========================================================= */

.fp-ue-hover-card.uc_long_content_box{
  overflow: hidden;
  border-radius: var(--fp-radius-xl);
}

.fp-ue-hover-card .uc_long_content_box_holder{
  position: relative;
  overflow: hidden;
  border-radius: var(--fp-radius-xl);
}

.fp-ue-hover-card .uc_long_content_box_box{
  position: relative;
  border-radius: var(--fp-radius-xl);
  overflow: hidden;
}

/* Bild */
.fp-ue-hover-card .uc_image_box{
  position: relative;
  width: 100%;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* =========================================================
   OVERLAY – CLEAN (KEIN GRADIENT)
   ========================================================= */

.fp-ue-hover-card .uc_overlay{
  position: absolute;
  inset: 0;
  z-index: 2;

  background: color-mix(in srgb, var(--fp-primary) 78%, transparent);

  transition: .3s ease;
}

/* leichter dunkler Film für Lesbarkeit */
.fp-ue-hover-card .uc_overlay::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.15);
  pointer-events: none;
}

/* Hover minimal stärker */
.fp-ue-hover-card .uc_long_content_box_holder:hover .uc_overlay{
  background: color-mix(in srgb, var(--fp-primary) 85%, transparent);
}

/* =========================================================
   CONTENT
   ========================================================= */

.fp-ue-hover-card .uc_box_content{
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  padding:
    clamp(22px, 2.4vw, 30px)
    clamp(16px, 2.2vw, 28px)
    clamp(22px, 2.8vw, 34px);
  box-sizing: border-box;
}

.fp-ue-hover-card .uc_box_content_open{
  transition: .3s ease;
}

/* =========================================================
   TITLE
   ========================================================= */

.fp-ue-hover-card .uc_title,
.fp-ue-hover-card .uc_title a{
  margin: 0 !important;
  color: var(--fp-text-invert) !important;
  text-decoration: none !important;
  font-size: clamp(2rem, 1.75rem + 1.3vw, 3.3rem);
  line-height: 1.05;
  font-weight: 700;
}

/* Icons */
.fp-ue-hover-card .ue-icon,
.fp-ue-hover-card .ue-icon *{
  color: var(--fp-text-invert) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* =========================================================
   HIDDEN CONTENT
   ========================================================= */

.fp-ue-hover-card .uc_hidden_content{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(10px);
  transition:
    max-height .35s ease,
    opacity .25s ease,
    transform .25s ease;
}

.fp-ue-hover-card .uc_long_content_box_holder:hover .uc_hidden_content,
.fp-ue-hover-card .uc_long_content_box_holder.ue_debug_true .uc_hidden_content{
  max-height: 420px;
  opacity: 1;
  transform: translateY(0);
  overflow: visible;
}

/* =========================================================
   TEXT
   ========================================================= */

.fp-ue-hover-card .uc_description,
.fp-ue-hover-card .uc_description p{
  color: var(--fp-text-invert) !important;
  font-size: clamp(1.1rem, 1.02rem + 0.25vw, 1.25rem) !important;
  line-height: 1.5;
  margin: 0 !important;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.fp-ue-hover-card .ue_btn_container{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.fp-ue-hover-card .uc_btn{
  text-decoration: none !important;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 46px;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 700;
  transition: .25s ease;
  text-transform: uppercase;
}

/* 🔥 DEFAULT: transparent + weiß */
.fp-ue-hover-card .ue_btn_1{
  background: transparent !important;
  color: var(--fp-text-invert) !important;
  border: 1px solid var(--fp-text-invert) !important;
}

/* 🔥 HOVER: bleibt "gefüllt" */
.fp-ue-hover-card .ue_btn_1:hover{
  background: var(--fp-bg-white) !important;
  color: var(--fp-text) !important;
  border: 1px solid var(--fp-bg-white) !important;
}

/* Secondary */
.fp-ue-hover-card .ue_btn_2{
  background: transparent !important;
  color: var(--fp-text-invert) !important;
  border: 1px solid color-mix(in srgb, var(--fp-text-invert) 55%, transparent) !important;
}

.fp-ue-hover-card .ue_btn_2:hover{
  background: var(--fp-text-invert) !important;
  color: var(--fp-text) !important;
  border-color: var(--fp-text-invert) !important;
}

/* =========================================================
   BADGE
   ========================================================= */

.fp-ue-hover-card .ue-badge{
  background: var(--fp-primary);
  color: var(--fp-text-invert);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px){

  .fp-ue-hover-card .uc_box_content{
    padding:
      20px
      clamp(14px, 4vw, 20px)
      22px;
  }

  .fp-ue-hover-card .uc_title,
  .fp-ue-hover-card .uc_title a{
    font-size: clamp(1.8rem, 1.55rem + 1vw, 2.5rem);
  }

  .fp-ue-hover-card .uc_description,
  .fp-ue-hover-card .uc_description p{
    font-size: clamp(1.05rem, 1rem + 0.2vw, 1.12rem) !important;
    line-height: 1.45;
  }

  .fp-ue-hover-card .uc_long_content_box_holder:hover .uc_hidden_content,
  .fp-ue-hover-card .uc_long_content_box_holder.ue_debug_true .uc_hidden_content{
    max-height: 360px;
  }
}


/* =========================================================
   SIMPLE PREMIUM CARD – FINAL
   ========================================================= */

.fp-card{
  position: relative;
  overflow: hidden;
  border-radius: var(--fp-radius-xl);
  min-height: clamp(320px, 42vw, 420px);
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  transition: none;
}

/* optionale Bildberuhigung */
.fp-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.12);
  pointer-events: none;
  z-index: 0;
}

/* =========================================================
   PANEL
   ========================================================= */

.fp-card__panel{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 12px;

  padding: 22px 24px 6px;
  background: color-mix(in srgb, var(--fp-primary) 84%, transparent);
  height: 100px;

  transition:
    height .35s ease,
    background .3s ease,
    padding .3s ease;
}

/* Hover: vollflächig */
@media (hover: hover){ /* 1.0.20-D: Hover nur mit Mauszeiger */
.fp-card:hover .fp-card__panel{
  height: 100%;
  background: color-mix(in srgb, var(--fp-primary-dark) 88%, transparent);
  padding: 24px 24px 26px;
}
}

/* =========================================================
   TYPO
   ========================================================= */

.fp-card__title,
.fp-card__title .elementor-heading-title{
  margin: 0 !important;
  color: var(--fp-text-invert) !important;
  line-height: 1.05;
  font-size: clamp(2rem, 1.75rem + 1.3vw, 3.3rem);
}

.fp-card__text,
.fp-card__text p{
  margin: 0 !important;
  color: var(--fp-text-invert) !important;
  font-size: clamp(1.05rem, 1rem + 0.25vw, 1.18rem) !important;
  line-height: 1.48;
}

/* =========================================================
   CONTENT LOGIK
   ========================================================= */

/* Text + Button im Startzustand verborgen */
.fp-card__text,
.fp-card__button{
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(10px);
  transition:
    opacity .25s ease,
    max-height .3s ease,
    transform .25s ease;
}

/* Hover: Text + Button kommen rein */
@media (hover: hover){ /* 1.0.20-D: Hover nur mit Mauszeiger */
.fp-card:hover .fp-card__text,
.fp-card:hover .fp-card__button{
  opacity: 1;
  max-height: 220px;
  transform: translateY(0);
}
}

/* =========================================================
   BUTTON
   ========================================================= */

/* Default (wenn sichtbar gemacht wird): transparent */
.fp-card .fp-card__button .elementor-button{
  margin-top: 20px !important;
  background: transparent !important;
  background-image: none !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  border-radius: 999px !important;
  padding: 14px 26px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition: all .25s ease !important;
}

/* Hover der Card: orange Button */
@media (hover: hover){ /* 1.0.20-D: Hover nur mit Mauszeiger */
.fp-card:hover .fp-card__button .elementor-button{
  background: var(--fp-primary) !important;
  background-image: none !important;
  color: #fff !important;
  border: 2px solid var(--fp-primary) !important;
}
}

/* Wenn direkt auf dem Button gehovert wird */
.fp-card .fp-card__button .elementor-button:hover{
  background: var(--fp-primary) !important;
  color: #fff !important;
  border-color: var(--fp-primary) !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px){

  .fp-card{
    min-height: clamp(360px, 110vw, 560px);
  }

  .fp-card__panel{
    height: 84px;
    padding: 16px 16px 6px;
  }

  @media (hover: hover){ /* 1.0.20-D: Hover nur mit Mauszeiger */
  .fp-card:hover .fp-card__panel{
    height: 100%;
    padding: 18px 16px 18px;
  }
  }

  .fp-card__title,
  .fp-card__title .elementor-heading-title{
    font-size: clamp(1.8rem, 1.55rem + 1vw, 2.5rem);
  }

  .fp-card__text,
  .fp-card__text p{
    font-size: clamp(1rem, 0.98rem + 0.18vw, 1.08rem) !important;
    line-height: 1.44;
  }
}

/* =========================================================
   FP CARD – MID BREAKPOINT HEIGHT FIX
   ---------------------------------------------------------
   Verhindert abgeschnittenen Content zwischen Desktop und Mobile
   ========================================================= */

@media (max-width: 1340px) and (min-width: 768px){
  @media (max-width: 1340px) and (min-width: 768px){
  .fp-card{
    min-height: 560px;
  }
}

  .fp-card__panel{
    height: 120px;
  }

  @media (hover: hover){ /* 1.0.20-D: Hover nur mit Mauszeiger */
  .fp-card:hover .fp-card__panel{
    height: 100%;
    padding: 24px 24px 28px;
  }
  }
}

@media (max-width: 767px){
  .eyebrow,
  .fp-eyebrow,
  .elementor-widget-heading .eyebrow,
  .elementor-widget-heading .fp-eyebrow{
    font-size: 1.08em !important;
  }
}


/* CONTACT CLEAN – EYEBROW FIX */
/* CONTACT CLEAN – EYEBROW FARBE NICHT VON HEADING-RESET ÜBERSCHREIBEN */
body.fp-theme-standard .fp-contact-section.is-clean .fp-eyebrow,
body.fp-theme-standard .fp-contact-section.is-clean .fp-eyebrow .elementor-heading-title{
  color: var(--fp-eyebrow-color) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.fp-theme-premium footer .ti-widget,
body.fp-theme-premium footer .ti-widget *{
  color: var(--fp-text-invert) !important;
}

.fs-calculator-text {
  width: 100%;
}

/* Laptop */
@media (min-width: 1367px) and (max-width: 1919px) {
  .fs-calculator-text {
    max-width: 75%;
  }
}

/* Desktop */
@media (min-width: 1920px) {
  .fs-calculator-text {
    max-width: 65%;
  }
}

/* =========================================================
   Cost Calculator – Title Fix (Desktop no-wrap)
   ========================================================= */

/* Nur Desktop */
@media (min-width: 1367px) {

  /* rechter Bereich darf sich nicht „zusammendrücken“ */
  .fp-cost-calculator .fp-cost-total-wrap {
    flex: 0 0 auto;
    min-width: 340px; /* ggf. feinjustieren */
  }

  /* Titel in einer Zeile halten */
  .fp-cost-calculator .fs-calculator-title-right {
    white-space: nowrap;
  }

}

/* =========================================================
   Hover Cards – iPhone Stabilitäts-Fix
   ========================================================= */

:root{
  --fp-primary-rgb: 243, 146, 0;
  --fp-primary-dark-rgb: 194, 116, 0;
}

.fp-card,
.fp-card__panel,
.fp-card__text,
.fp-card__button{
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.fp-card__panel{
  will-change: height, padding, background;
}

.fp-card__text,
.fp-card__button{
  will-change: opacity, max-height, transform;
}


/* =========================================================
   FP CARD PANEL – STANDARD (Android / Desktop / normale Browser)
   ---------------------------------------------------------
   Ursprüngliche color-mix Logik bleibt global erhalten
   ========================================================= */

.fp-card__panel{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 12px;

  padding: 22px 24px 6px;
  background: color-mix(in srgb, var(--fp-primary) 84%, transparent);
  height: 100px;

  transition:
    height .35s ease,
    background .3s ease,
    padding .3s ease;
}

@media (hover: hover){ /* 1.0.20-D: Hover nur mit Mauszeiger */
.fp-card:hover .fp-card__panel{
  height: 100%;
  background: color-mix(in srgb, var(--fp-primary-dark) 88%, transparent);
  padding: 24px 24px 26px;
}
}


/* =========================================================
   iOS FIX – ersetzt color-mix nur auf iPhone / iOS Safari
   ---------------------------------------------------------
   Android / Chrome bleibt unangetastet
   ========================================================= */

@supports (-webkit-touch-callout: none) {
  .fp-card__panel{
    background: linear-gradient(
      to top,
      rgba(var(--fp-primary-rgb), 0.88) 0%,
      rgba(var(--fp-primary-rgb), 0.65) 40%,
      rgba(var(--fp-primary-rgb), 0.0) 100%
    ) !important;
  }

  @media (hover: hover){ /* 1.0.20-D: Hover nur mit Mauszeiger */
  .fp-card:hover .fp-card__panel{
    background: linear-gradient(
      to top,
      rgba(var(--fp-primary-dark-rgb), 0.92) 0%,
      rgba(var(--fp-primary-dark-rgb), 0.7) 40%,
      rgba(var(--fp-primary-dark-rgb), 0.1) 100%
    ) !important;
  }
  }
}


/* =========================================================================
   ▼▼▼  FS TYPE SCALE — integriert (Schriftgrößen-System)  ▼▼▼
   ========================================================================= */

/* =========================================================================
   FS Type Scale – fluid & automatisch responsive
   -------------------------------------------------------------------------
   Ziel: Keine manuellen Pixel-Größen mehr in Elementor. Headlines skalieren
   AUTOMATISCH nach ihrem Tag (h1–h6) — ganz ohne Klasse. Größe kommt per
   clamp() fluid zwischen Mobil und Desktop.

   Aufbau:
   1) Font-Size-Tokens (--fp-fs-*) im House-Style clamp(min, base + vw, max)
   2) Line-Height-Tokens
   3) OVERRIDE-Klassen (.fp-h1…h6, .fp-hero) für Ausnahmen (Tag ≠ Größe)
   4) GLOBALE TAG-REGELN (aktiv) — greifen automatisch, Footer/Header ausgeschlossen

   Größen kalibriert auf die echten DriveX-Werte
   (Section-Headline 40→86px, 2. Headline 38→48px, Eyebrow 20→25px).
   ========================================================================= */

:root{
  /* --- Schriftarten --- */
  --fp-font-subline: "Saira Condensed", sans-serif; /* Subline-Schrift */

  /* --- Eyebrow = Subline: EIN System (globale Token-Angleichung) ---
     Wirkt auf .fp-eyebrow UND .fp-subline gleichermaßen. */
  --fp-eyebrow-font-family: var(--fp-font-subline); /* Saira Condensed          */
  --fp-eyebrow-color:       var(--fp-accent);       /* hell: Akzentfarbe        */
  --fp-eyebrow-font-size:   clamp(1.25rem, 1.1949rem + 0.2451vw, 1.5625rem); /* 20 → 25 px (dein Original) */
  /* --fp-eyebrow-color-invert bleibt = --fp-text-invert (#fff) → dunkel: weiß  */

  /* --- Schriftgrößen (fluid) – kalibriert auf deine echten DriveX-Werte --- */
  --fp-fs-hero:    clamp(2.875rem, 1.70rem + 5.5vw, 6.5rem);         /* 46 → 104 px (Page-Hero)        */
  --fp-fs-h1:      clamp(2.625rem, 1.85rem + 3.2vw, 5.75rem);        /* 42 →  92 px (großes Display)   */
  --fp-fs-h2:      clamp(2.5rem, 1.9926rem + 2.2549vw, 5.375rem);    /* 40 →  86 px ← DEINE Section-Headline */
  --fp-fs-h3:      clamp(2.4rem, 2.1231rem + 1.2308vw, 3rem);        /* 38 →  48 px ← DEINE 2. Headline */
  --fp-fs-h4:      clamp(1.75rem, 1.50rem + 1.0vw, 2.25rem);         /* 28 →  36 px */
  --fp-fs-h5:      clamp(1.375rem, 1.25rem + 0.55vw, 1.75rem);       /* 22 →  28 px */
  --fp-fs-h6:      clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);       /* 18 →  20 px */

  /* Lead-/Fließtexte (Intro-Absätze). Subline-Größe kommt aus den Eyebrow-Tokens. */
  --fp-fs-lead:    clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);/*  18 → 22 px */
  --fp-fs-body:    clamp(1.0625rem, 1.02rem + 0.2vw, 1.25rem);/*  17 → 20 px */

  /* --- Zeilenhöhen --- */
  --fp-lh-hero: 1.00;
  --fp-lh-h1:   1.03;
  --fp-lh-h2:   1.05;
  --fp-lh-h3:   1.12;
  --fp-lh-h4:   1.20;
  --fp-lh-h5:   1.25;
  --fp-lh-h6:   1.30;
  --fp-lh-lead: 1.45;
  --fp-lh-body: 1.65;
}

/* =========================================================================
   OVERRIDE-KLASSEN (Ausnahmen)
   Für den seltenen Fall „Tag ≠ gewünschte Größe": in Elementor unter
   „Erweitert → CSS-Klassen" z. B. fp-h2 setzen. Mit !important überschreiben
   sie die globalen Tag-Regeln (weiter unten) UND jede manuelle Elementor-Größe.
   Im Normalfall brauchst du sie NICHT — die Tag-Regeln greifen automatisch.
   (fp-hero ist bewusst nur als Klasse verfügbar, nicht als Tag.)
   ========================================================================= */

.fp-hero .elementor-heading-title, .fp-hero.elementor-heading-title, .fp-hero{
  font-size: var(--fp-fs-hero) !important; line-height: var(--fp-lh-hero) !important;
  font-family: var(--fp-font-headline); text-wrap: balance;
}
.fp-h1 .elementor-heading-title, .fp-h1.elementor-heading-title, .fp-h1{
  font-size: var(--fp-fs-h1) !important; line-height: var(--fp-lh-h1) !important;
  font-family: var(--fp-font-headline); text-wrap: balance;
}
.fp-h2 .elementor-heading-title, .fp-h2.elementor-heading-title, .fp-h2{
  font-size: var(--fp-fs-h2) !important; line-height: var(--fp-lh-h2) !important;
  font-family: var(--fp-font-headline); text-wrap: balance;
}
.fp-h3 .elementor-heading-title, .fp-h3.elementor-heading-title, .fp-h3{
  font-size: var(--fp-fs-h3) !important; line-height: var(--fp-lh-h3) !important;
  font-family: var(--fp-font-headline);
}
.fp-h4 .elementor-heading-title, .fp-h4.elementor-heading-title, .fp-h4{
  font-size: var(--fp-fs-h4) !important; line-height: var(--fp-lh-h4) !important;
  font-family: var(--fp-font-headline);
}
.fp-h5 .elementor-heading-title, .fp-h5.elementor-heading-title, .fp-h5{
  font-size: var(--fp-fs-h5) !important; line-height: var(--fp-lh-h5) !important;
}
.fp-h6 .elementor-heading-title, .fp-h6.elementor-heading-title, .fp-h6{
  font-size: var(--fp-fs-h6) !important; line-height: var(--fp-lh-h6) !important;
}

/* Sub-/Lead-Texte (z. B. Untertitel oder Intro-Absatz) */
/* .fp-subline = Alias von .fp-eyebrow: identische Optik über beide Klassennamen.
   Farbe/Font/Transform kommen aus den (oben angeglichenen) Eyebrow-Tokens. */
.fp-subline, .fp-subline .elementor-heading-title{
  font-family: var(--fp-eyebrow-font-family) !important;
  font-size: var(--fp-eyebrow-font-size) !important;
  line-height: var(--fp-eyebrow-line-height) !important;
  letter-spacing: var(--fp-eyebrow-letter-spacing) !important;
  text-transform: var(--fp-eyebrow-text-transform) !important;
  color: var(--fp-eyebrow-color) !important;
}
/* invertiert auf dunklen Flächen → konstant weiß (gleiche Selektoren wie Eyebrow) */
.dark-section .fp-subline, .dark-section .fp-subline .elementor-heading-title,
.fp-bg-dark .fp-subline, .fp-bg-dark .fp-subline .elementor-heading-title,
.fp-dark-gradient .fp-subline, .fp-dark-gradient .fp-subline .elementor-heading-title,
.dark-gradient-primary .fp-subline, .dark-gradient-primary .fp-subline .elementor-heading-title,
.fp-footer-gradient .fp-subline, .fp-footer-gradient .fp-subline .elementor-heading-title{
  color: var(--fp-eyebrow-color-invert) !important;
}
.fp-lead, .fp-lead .elementor-widget-container, .fp-lead p{
  font-size: var(--fp-fs-lead) !important; line-height: var(--fp-lh-lead) !important;
}

/* =========================================================================
   GLOBALE TAG-REGELN (AKTIV) — der Normalfall
   Greifen automatisch auf ALLE Elementor-Headlines nach ihrem Tag (h1–h6) —
   ganz OHNE Klasse. Footer & Header sind ausgeschlossen (behalten ihre
   eigenen Größen). Bewusst OHNE !important, damit die Override-Klassen oben
   (mit !important) im Ausnahmefall jederzeit gewinnen. Die hohe Spezifität
   (doppeltes :not) überschreibt manuelle Elementor-Widget-Größen — die Skala
   ist damit die einzige Quelle der Wahrheit im Seiteninhalt.
   Eyebrows als <span> werden NICHT getroffen (kein h-Tag).
   ========================================================================= */
.elementor-widget-heading:not(.elementor-location-footer *):not(.elementor-location-header *) h1.elementor-heading-title{ font-size: var(--fp-fs-h1); line-height: var(--fp-lh-h1); }
.elementor-widget-heading:not(.elementor-location-footer *):not(.elementor-location-header *) h2.elementor-heading-title{ font-size: var(--fp-fs-h2); line-height: var(--fp-lh-h2); }
.elementor-widget-heading:not(.elementor-location-footer *):not(.elementor-location-header *) h3.elementor-heading-title{ font-size: var(--fp-fs-h3); line-height: var(--fp-lh-h3); }
.elementor-widget-heading:not(.elementor-location-footer *):not(.elementor-location-header *) h4.elementor-heading-title{ font-size: var(--fp-fs-h4); line-height: var(--fp-lh-h4); }
.elementor-widget-heading:not(.elementor-location-footer *):not(.elementor-location-header *) h5.elementor-heading-title{ font-size: var(--fp-fs-h5); line-height: var(--fp-lh-h5); }
.elementor-widget-heading:not(.elementor-location-footer *):not(.elementor-location-header *) h6.elementor-heading-title{ font-size: var(--fp-fs-h6); line-height: var(--fp-lh-h6); }



/* =========================================================
   HEADER-KONTRAST-SCRIM
   Dezenter dunkler Verlauf hinter dem transparenten Sticky-Header,
   damit das (helle) Logo + Nav auf JEDEM Hintergrund lesbar sind
   – hell, dunkel, Bild, gemischt. Blendet sich aus, sobald der
   Header beim Scrollen seinen eigenen Hintergrund bekommt.
   ========================================================= */
.elementor-location-header .stickyheadersection::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
              rgba(10, 8, 16, 0.55) 0%,
              rgba(10, 8, 16, 0.30) 55%,
              rgba(10, 8, 16, 0) 100%);
  pointer-events: none;
  z-index: 0;
}
/* Header-Inhalt über den Scrim heben */
.elementor-location-header .stickyheadersection > *{
  position: relative;
  z-index: 1;
}
/* Beim Scrollen (eigener Header-Hintergrund) ist der Scrim überflüssig */
.elementor-location-header .stickyheadersection.elementor-sticky--active::before{
  opacity: 0;
}

/* =====================================================================
   Hero-Headline-Lesbarkeit (Scrim + Textschatten) – GEZIELT pro Hero
   ---------------------------------------------------------------------
   Zweck: Nur auf Heros mit belebtem Hintergrund (z.B. Menschenmenge),
   wo die Headline sonst "in ein Gesicht schneidet". KEIN globaler Effekt.

   AKTIVIEREN pro Seite:
   In Elementor den betreffenden Hero-Container anklicken ->
   Erweitert -> CSS-Klassen -> dort "hero-crowd" ergänzen
   (zusätzlich zu "hero-wrap", mit Leerzeichen getrennt: "hero-wrap hero-crowd").
   Nur wo diese Klasse gesetzt ist, wird der Verlauf sichtbar.

   Einbau der CSS: ans Ende der style.css eures CHILD-Themes (update-sicher).
   Rückgängig: Klasse "hero-crowd" am Hero wieder entfernen ODER diesen
   Block löschen. Am Bild selbst wird nichts verändert.
   ===================================================================== */

/* 1) Positionsanker + weicher, links betonter Verlauf.
      Dunkel links (dort steht die linksbündige Headline), nach rechts
      transparent -> Gesichter in Bildmitte/rechts bleiben sichtbar.
      Greift NUR, wenn der Hero zusätzlich die Klasse .hero-crowd trägt. */
.hero-wrap.hero-crowd {
	position: relative;
}
.hero-wrap.hero-crowd::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none; /* Klicks/Buttons gehen ungehindert durch */
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.55) 0%,
		rgba(0, 0, 0, 0.32) 30%,
		rgba(0, 0, 0, 0) 60%
	);
	z-index: 1;
}

/* 2) Inhalte über den Verlauf heben (Text, Buttons bleiben oben & klickbar).
      Deckt klassische Sektionen (.elementor-container) und neue
      Flex-Container (.e-con-inner) ab. */
.hero-wrap.hero-crowd > .elementor-container,
.hero-wrap.hero-crowd > .e-con-inner,
.hero-wrap.hero-crowd .elementor-element {
	position: relative;
	z-index: 2;
}

/* 3) Weicher Textschatten auf Eyebrow & Headline (nur auf dem markierten Hero),
      als zusätzliche Absicherung bei hellen Bild-Flecken. */
.hero-wrap.hero-crowd h1,
.hero-wrap.hero-crowd .elementor-heading-title,
.hero-wrap.hero-crowd .elementor-widget-animated-headline .elementor-headline {
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

/* ---------------------------------------------------------------------
   Variante B (optional): Text steht mittig/unten statt links?
   Dann obige linke Verlaufs-Regel auskommentieren und diese nutzen –
   dunkel unten, nach oben transparent (responsive-sicher, da Crop unten bleibt):

   .hero-wrap.hero-crowd::after {
       background: linear-gradient(
           0deg,
           rgba(0,0,0,.55) 0%,
           rgba(0,0,0,.30) 28%,
           rgba(0,0,0,0) 60%
       );
   }

   Variante GLOBAL (falls du es doch auf ALLEN Heros willst):
   In allen Selektoren oben ".hero-wrap.hero-crowd" durch ".hero-wrap"
   ersetzen – dann brauchst du keine Marker-Klasse.
   --------------------------------------------------------------------- */





[id="wa"], [class*="whatsapp"], [class*="wa-button"] {
    background: transparent !important;     
    color: var(--mf-wa-btn-text) !important;
}



.price-badge-wrap{
  position: relative;
}
.price-badge{
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 260px;
  height: 70px;
  padding: 0 24px;
  border-radius: 18px;
  /* Accent-Token statt hartcodiertem Orange-Verlauf */
  background: var(--fp-accent);
  /* Textfarbe auf Markenfläche über Token */
  color: var(--fp-text-on-brand);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.22),
    0 3px 8px rgba(0,0,0,0.14);
  z-index: 5;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 1;
}
.price-badge p,
.price-badge .elementor-heading-title,
.price-badge .elementor-icon-box-title,
.price-badge .elementor-widget-container{
  margin: 0 !important;
  line-height: 1 !important;
}
.price-badge .elementor-widget-container{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.price-badge p{
  display: block;
  margin: 0 !important;
}
@media (max-width: 767px){
  .price-badge{
    left: 50%;
    right: auto;
    top: auto;
    bottom: 0;
    transform: translate(-50%, 50%);
    min-width: auto;
    width: max-content;
    max-width: calc(100% - 32px);
    height: 52px;
    padding: 0 18px;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 1px;
  }
  .price-badge p,
  .price-badge .elementor-heading-title,
  .price-badge .elementor-widget-container{
    margin: 0 !important;
    line-height: 1 !important;
  }
  .price-badge .elementor-widget-container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
}


/* =========================================================
   INTENSIVBOX – Ferienkurs Cards (Layout-Fix)
   ========================================================= */
/* 1) Schwarzen Hintergrund entfernen */
.intensivbox{
  background-color: transparent !important;
  background-image: none !important;
}

/* 2) Headline (h3) kleiner + fluid responsive */
.intensivbox .elementor-widget-heading h3.elementor-heading-title{
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem) !important; /* ~20 → 25,6px */
  line-height: 1.25 !important;
  color: var(--fp-text) !important;   /* dunkel, auf hellem Grund lesbar */
  text-align: center;
  margin-top: 14px;
}

/* 3) Verlinkte Headline (Sommer) in gleicher Farbe */
.intensivbox .elementor-heading-title a{
  color: inherit !important;
  text-decoration: none;
}


/* =========================================================
   Logo-Wechsel nach Hintergrund
   ========================================================= */

/* Standard: dunkler Hero hinter dem Header -> helles Logo */
.d-logo { display: none !important; }

/* Ausnahme: Seiten mit hellem/weißem Hintergrund */
body.header-light-bg .l-logo { display: none !important; }
body.header-light-bg .d-logo { display: block !important; }

/* =========================================================
   1.0.5-D: Lesbarkeits-Schleier für Kopfbild-Überschriften (nur Handy)
   Weißer Text auf hellem oder unruhigem Bildgrund: weicher dunkler Schleier nur hinter dem Textblock plus leichter
   Textschatten. Die Klasse fp-hero-scrim setzt `wp fs-ai kopfbild` am Textblock, wo der Kopfbild-Scan hellen bzw.
   unruhigen Grund misst – nie von Hand. Desktop bleibt unberührt. (Grundidee: Michas hero-headline-scrim.css; dort
   lag der Verlauf auf der Hero-Überlagerung ::after, die hier schon belegt ist – darum hinter dem Textblock.)
   ========================================================= */
@media (max-width: 767px){
  .fp-hero-scrim{
    position: relative;
    isolation: isolate;
  }
  .fp-hero-scrim::before{
    content: "";
    position: absolute;
    inset: -28px -36px;
    background: radial-gradient(ellipse at 35% 50%, rgb(0 0 0 / .50) 0%, rgb(0 0 0 / .30) 45%, rgb(0 0 0 / 0) 72%);
    z-index: -1;
    pointer-events: none;
  }
  .fp-hero-scrim h1,
  .fp-hero-scrim .elementor-heading-title{
    text-shadow: 0 2px 12px rgb(0 0 0 / .55);
  }
}

/* 1.0.6-D: Knöpfe im Kopfbild auf dem Handy kompakter – die Textspalte bleibt schmal, das Motiv daneben frei, und der
   Textbereich kann tiefer sitzen, ohne in die Köpfe zu ragen (Danny, 10.10.2026). Desktop unverändert.
   1.0.9-D (15.10.2026): noch einmal schmaler. Danny wollte die beiden Knöpfe zusammen so breit wie die längste
   Überschriftenzeile. Gemessen auf einem 412 px breiten Handy: Zeile „in Hattorf am Harz" 191 px, Knöpfe 264 px.
   Ganz auf 191 px kämen wir nur mit 9 px Schrift – das wäre zu klein zum Antippen und zum Lesen. Mit 11 px Schrift
   und schmalerem Innenabstand liegen sie bei rund 220 px und damit nah an der Textkante. */
@media (max-width: 767px){
  .hero-wrap .elementor-widget-button .elementor-button{
    padding: 8px 6px !important;
    font-size: 9.5px !important;
    letter-spacing: 0 !important;
  }
}

/* 1.0.10-D (15.10.2026): Auf schmalen Handys (iPhone SE/13 mini, 375-399 px) noch einmal kleiner.
   Dort reichten die Knöpfe bis an das Gesicht im Kopfbild heran – Danny: „hängt immer noch bei der
   Frau da im Gesicht". Je schmaler das Fenster, desto mehr schneidet der Browser seitlich vom Bild
   weg, desto weiter rückt das Motiv unter den Text.

   1.0.12-D (15.10.2026): Gemessen statt geschätzt. Die Vorgabe lautet: Die Knopfzeile soll etwa so
   breit sein wie die längste Zeile der Überschrift. Auf 375 px sind das 174 px; die Knöpfe standen
   bei 215 px. Im Browser durchprobiert ergibt 8,5 px Schrift mit 5 px seitlichem Polster 176 px –
   das passt. Die Knopfhöhe sinkt dabei auf 29 px; weiter herunter geht es nicht, ohne dass die
   Fläche zum Antippen zu klein wird. */
@media (max-width: 399px){
  .hero-wrap .elementor-widget-button .elementor-button{
    padding: 7px 5px !important;
    font-size: 8.5px !important;
    letter-spacing: 0 !important;
  }
}

/* 1.0.7-D: Kopfbild-Überschriften – ausgeglichene Zeilenumbrüche (alle Geräte): der Browser verteilt die Wörter
   gleichmäßig auf die Zeilen statt einer langen und einer kurzen Zeile (Danny: „das mit den Umbrüchen“). */
.hero-wrap .elementor-heading-title,
.hero-wrap .elementor-headline{
  text-wrap: balance;
}
/* Handy: kompaktere Schrift, die mit der Bildschirmhöhe mitwächst – hohe Handys mit viel freier Fläche bekommen
   größere Überschriften, kleine Handys kompaktere (Danny, 10.10.2026: „nicht so riesig, größer nur wenn Platz ist“). */
@media (max-width: 767px){
  /* 1.0.20-D (Danny, 22.10.2026): Nur noch die Startseite behält die kompakte Größe. Alle anderen Kopfbilder
     bekommen eine deutlich größere Überschrift, die mit der Fensterbreite wächst – 375 px → 52 px, 430 px → 60 px
     (vorher 44 px Deckel bzw. 48 px fest auf den Klassenseiten, „deutlich zu klein“). Greift über das erste
     Element der Seite, damit auch Kopfbilder ohne die Klasse hero-wrap (Klassenseiten) dabei sind. */
  body.home .hero-wrap h1.elementor-heading-title{
    font-size: clamp(32px, min(9.5vw, 4.6vh), 44px) !important;
    line-height: 1.08 !important;
  }
  body:not(.home) .hero-wrap h1.elementor-heading-title,
  body:not(.home) [data-elementor-type="wp-page"] > .e-con:first-child h1.elementor-heading-title{
    font-size: clamp(40px, 14vw, 64px) !important;
    line-height: 1.05 !important;
  }
  body:not(.home) [data-elementor-type="wp-page"] > .e-con:first-child h2.elementor-heading-title{
    font-size: clamp(22px, 6.8vw, 32px) !important;
    line-height: 1.15 !important;
  }
  /* Reserve unter dem Kopfbild: Das Bewertungs-Widget darunter ragt 84 px ins Kopfbild hinein. Wird der
     Textblock länger (größere Schrift, längere Überschrift), wuchs das Kopfbild zwar mit, der Text lief aber
     unter das Widget (Auto-Führerschein auf dem iPhone). Mit 120 px Polster unten endet der Text immer darüber.
     Rechtsseiten (pad-l) haben kein Kopfbild und bleiben außen vor. */
  body:not(.home) [data-elementor-type="wp-page"] > .e-con:first-child:not(.pad-l){
    padding-bottom: 120px !important;
  }
  .hero-wrap h2.elementor-heading-title{
    font-size: clamp(21px, min(6.2vw, 3vh), 27px) !important;
    line-height: 1.15 !important;
  }
  /* 1.0.23-D (Danny, 22.10.2026): Dachzeile mobil auf allen Unterseiten gleich groß wie auf der Anhänger-Seite
     (deren Kopfbild trägt kein hero-wrap und bekam deshalb die vollen 1,6 rem = 25,6 px, die anderen waren auf
     21 px gedeckelt und gingen im Bild unter). Startseite behält die kompakte Dachzeile. */
  body.home .hero-wrap .elementor-widget-animated-headline .elementor-headline{
    font-size: clamp(16px, min(4.8vw, 2.3vh), 21px) !important;
    line-height: 1.25 !important;
  }
  body:not(.home) .hero-wrap .elementor-widget-animated-headline .elementor-headline,
  body:not(.home) [data-elementor-type="wp-page"] > .e-con:first-child .elementor-widget-animated-headline .elementor-headline{
    font-size: clamp(22px, 6.8vw, 28px) !important;
    line-height: 1.2 !important;
  }
}

/* 1.0.8-D: Absende-Knopf der Formulare („Ab die Post“) gut ein Drittel größer – vom Zuwachs gehen 70 % auf die Schrift,
   30 % auf den Balken (Danny, 10.10.2026). Vorher 20 px Schrift, Rand 10/30 px, 127 px breit; jetzt ca. 169 px. */
.elementor-widget-form .elementor-field-type-submit .elementor-button{
  font-size: 29px !important;
  padding: 12px 36px !important;
}
/* 1.0.8-D: Titel im Balken der Kacheln „Das könnte Dich auch interessieren“ (Loop-Vorlage 14752) doppelt so groß
   (28 → 56 px); auf schmalen Handys etwas kleiner, damit der Titel in eine Zeile passt. */
.e-loop-item.elementor-14752 h4.elementor-heading-title{
  font-size: var(--fp-fs-loop-titel, 30px) /* 1.0.21-D: Token statt fester Formel, Danny will 30 px auf allen Geräten */ !important;
  line-height: 1.05 !important;
}

/* 1.0.18-D (22.10.2026): H1 auf Rechtsseiten in Textfarbe – per Klasse am Widget, nicht global.
   1.0.17-D hatte jede H1 außerhalb von .hero-wrap dunkel gemacht; die Kopfbilder der Klassenseiten
   tragen diese Klasse aber nicht (fs-ai-host-rel), ihre Überschriften wurden schwarz (Danny).
   Jetzt: Der Kit färbt h1 weiß wie bisher; nur Widgets mit fp-h1-dunkel (Impressum, Datenschutz) werden dunkel. */
.elementor-widget-heading.fp-h1-dunkel h1.elementor-heading-title{
  color: var(--fp-text, #14121a);
}

/* 1.0.19-D (22.10.2026): Handy-Menü richtet seine Schriftgröße an der Fensterbreite aus – siehe Token
   --fp-offcanvas-menu-size oben (clamp statt feste 60 px), Pfeile der Unterpunkte bleiben sichtbar. */

/* 1.0.20-D (22.10.2026): Reiter (Elementor Tabs) auf dem Handy untereinander statt als Akkordeon – alle Titel
   zusammen oben, darunter der Inhalt des gewählten Reiters (Danny: „alle drei Kategorien oben zusammenhängend“).
   Greift nur, wenn das Widget seinen Akkordeon-Umbruch abgeschaltet hat (breakpoint_selector = none);
   im Akkordeon-Modus rendert Elementor die Titelleiste nicht. */
@media (max-width: 767px){
  .elementor-widget-n-tabs .e-n-tabs-heading{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .elementor-widget-n-tabs .e-n-tab-title{
    justify-content: center !important;
  }
}
/* 1.0.20-D (22.10.2026): Alle .fp-card:hover-Regeln stehen in @media (hover: hover) – auf Touch-Geräten bleibt die
   Karte in ihrer Grundvariante, der Hover-Zustand gilt nur für Mauszeiger (Danny). 7 Blöcke umschlossen. */

/* 1.0.21-D (Danny, 22.10.2026): Kacheln „Das könnte Dich auch noch interessieren“ (Loop-Vorlage „Related Loop“) –
   Titel fest 30 px auf allen Geräten. Die globale Überschriften-Skala (h4 → --fp-fs-h4) würde die Widget-Größe
   überschreiben, deshalb eine Override-Klasse mit !important wie bei .fp-h1. Token, damit ein Kunde abweichen kann. */
:root{ --fp-fs-loop-titel: 30px; }
.fp-loop-titel .elementor-heading-title,
.fp-loop-titel.elementor-heading-title{
  font-size: var(--fp-fs-loop-titel) !important;
  line-height: 1.1 !important;
}

/* 1.0.24-D (Danny, 22.10.2026): Symbol-Listen mit großen Symbolen (BF17 „Voraussetzungen an die Begleitperson“,
   56 px Haken): Elementor zentriert den Text senkrecht im Eintrag – bei einer Zeile rutscht der Text unter die
   Symbolmitte, bei mehreren Zeilen sitzt das Symbol in der Blockmitte. Mit der Klasse fp-liste-oben beginnt der
   Text oben, das Symbol wird per Versatz auf die erste Zeile gelegt – gleiches Bild für ein- und mehrzeilige Einträge. */
.fp-liste-oben .elementor-icon-list-items .elementor-icon-list-item{
  align-items: flex-start !important;
}
.fp-liste-oben .elementor-icon-list-items .elementor-icon-list-item > .elementor-icon-list-text{
  align-self: flex-start;
}

/* 1.0.25-D (Danny, 22.10.2026): Kopfzeile am Desktop auffälliger – Burger-Symbol 15 % größer (30 → 35 px), Knopf
   „Jetzt anfragen“ eine Stufe größer (23 → 25 px, Polster mit). Nur ab 1025 px; Handy und Tablet behalten die
   Widget-Werte. Tokens, damit ein Kunde abweichen kann. */
:root{ --fp-header-burger-size: 35px; --fp-header-burger-box: 71px; --fp-header-cta-fs: 25px; --fp-header-cta-pad: 16px 32px; }
@media (min-width: 1025px){
  /* Die Kopfzeilen-Vorlage setzt Symbol (30 px !important) und Kreis (62 px) per eigenem CSS mit vier Klassen
     Gewichtung – deshalb hier fünf Klassen, sonst greift die Regel nicht. */
  header .elementor-element.offcanvas-trigger.elementor-widget-icon .elementor-icon-wrapper .elementor-icon svg,
  header .elementor-element.offcanvas-trigger.elementor-widget-icon .elementor-icon-wrapper .elementor-icon i{
    width: var(--fp-header-burger-size) !important;
    height: var(--fp-header-burger-size) !important;
    font-size: var(--fp-header-burger-size) !important;
  }
  header .elementor-element.offcanvas-trigger.elementor-widget-icon{
    width: var(--fp-header-burger-box) !important;
    height: var(--fp-header-burger-box) !important;
    min-width: var(--fp-header-burger-box) !important;
    min-height: var(--fp-header-burger-box) !important;
  }
  header .elementor-widget-button .elementor-button{
    font-size: var(--fp-header-cta-fs) !important;
    padding: var(--fp-header-cta-pad) !important;
  }
}

/* 1.0.25-D (Danny, 22.10.2026): Überschrift und Schlusssatz der Galerie-Abschnitte („Unsere Fahrschule“, Klassen-
   Galerien fs-klassengalerie) 5 % größer – auf allen Geräten, relativ zur jeweiligen Widget-Größe. zoom skaliert
   Schrift und Zeilenabstand gemeinsam, ohne die Widget-Werte je Gerät zu kennen. */
:root{ --fp-galerie-text-zoom: 1.05; }
.e-con.e-parent:has(.elementor-widget-gallery, .elementor-widget-image-gallery) .elementor-widget-heading,
.e-con.e-parent:has(.elementor-widget-gallery, .elementor-widget-image-gallery) .elementor-widget-text-editor{
  zoom: var(--fp-galerie-text-zoom);
}