/* Theme Name: Fahrschule Henninges Theme URI: https://fahrschule-henninges.de Description: Individuelles Child Theme der Fahrschule Henninges Author: Marketing Fahrschule Template: hello-elementor Version: 1.0.0 */ /* ========================================================= HENNINGES – Ü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 --------------------------------------------------------- Diese Ebene ist nur eine KOMPATIBILITÄTSSCHICHT für bestehende Elementor-Projekte. WICHTIG: - Das führende Design-System sind die --fp-* Tokens. - Elementor darf optisch mitsynchronisiert werden, ist aber nicht mehr die Quelle der Wahrheit. - Projektbezogene Random-IDs sollten perspektivisch nicht mehr manuell gepflegt, sondern automatisch durch Tool-Sync / Overrides geschrieben werden. Solange ein bestehendes Projekt diese IDs bereits nutzt, dürfen sie zur Stabilität erhalten bleiben. ========================================================= */ :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); } /* HINWEIS FÜR DIE ZUKUNFT: Diese Ebene ist NICHT systemkritisch. Zielzustand ist: - --fp-* Tokens führen - Elementor wird optional mitgefüttert - keine manuelle Clone-Nachpflege mehr */ /* ========================================================= 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); } .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-/Font-Icons dürfen weiter über currentColor laufen. Eigene SVGs mit festen Farben sollen NICHT pauschal über den Wrapper mit fill/stroke eingefärbt werden. */ .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; } /* ========================================================= 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; } @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; } .swiper-pagination-bullet{ background-color: var(--fp-primary) !important; opacity: 0.4; } .swiper-pagination-bullet-active{ background-color: var(--fp-primary) !important; opacity: 1; } /* 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; --fp-font-body: "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; } #-additional-costs .fs-additional-costs-title { font-size: 18px; font-weight: 600; } #-additional-costs .fs-additional-costs-price { font-size: 18px; font-weight: 600; } #-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{ background: transparent !important; background-image: none !important; border: 1px solid var(--fp-border-soft) !important; border-radius: 10px !important; padding: 12px 20px !important; color: var(--fp-text) !important; font-weight: 600 !important; transition: all .2s ease; } /* 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; } /* 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 .e-n-tab-title{ padding: 10px 14px !important; font-size: 14px !important; } .fp-cost-tabs .e-n-tabs-heading{ gap: 8px; } } /* ========================================================= 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 */ .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 */ .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 */ .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; } .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; } .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; }