.elementor-kit-6{--e-global-color-primary:#585854;--e-global-color-secondary:#8FA89A;--e-global-color-text:#6F6F6A;--e-global-color-accent:#C7A1A1;--e-global-color-d4416d4:#F5F2ED;--e-global-color-8145323:#E3E9E6;--e-global-color-0d94ef4:#F1E7E7;--e-global-typography-primary-font-family:"Libre Baskerville";--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Libre Baskerville";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"DM Sans";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"DM Sans";--e-global-typography-accent-font-weight:500;background-color:var( --e-global-color-d4416d4 );color:var( --e-global-color-text );font-family:"DM Sans", Sans-serif;font-size:18px;line-height:1.6em;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 h1{color:var( --e-global-color-primary );font-family:"Libre Baskerville", Sans-serif;font-size:60px;line-height:1.2em;letter-spacing:-0.03em;}.elementor-kit-6 h2{color:var( --e-global-color-primary );font-family:"Libre Baskerville", Sans-serif;font-size:40px;font-weight:400;line-height:1.2em;letter-spacing:-0.03em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1600px;}.e-con{--container-max-width:1600px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1366px){.elementor-kit-6 h1{font-size:52px;line-height:1.2em;letter-spacing:-0.03em;}}@media(max-width:1024px){.elementor-kit-6 h1{font-size:48px;}.elementor-kit-6 h2{font-size:32px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6 h1{font-size:32px;}.elementor-kit-6 h2{font-size:28px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --small-radius:20px; --abstand-abschnitt-vertikal-desktop:75px; --abstand-abschnitt-horizontal:5%; --abstand-abschnitt-vertikal-tablet:60px; --abstand-abschnitt-vertikal-mobile:50px; --max-laufweite:1600px; --big-card-abstand-vertikal-desktop:70px; --big-card-abstand-horizontal-desktop:50px; --big-card-abstand-vertikal-tablet:60px; --big-card-abstand-horizontal-mobile:20px; --dark-grey:#585854; --grey:#6F6F6A; --sand:#F5F2ED; --green:#8FA89A; --red:#C7A1A1; --light-green:#E3E9E6; --light-red:#F1E7E7; --light-grey:#E2E2DD; --h2-desktop:40px; --zeilenhoehe-headline:1.2em; --zeichenabstand-headline:-0.03em; --h2-tablet:32px; --h2-mobile:28px; --card-abstand-desktop:50px; --card-abstand-mobile:30px; --elemente-abstand-big:40px; --elemente-abstand-normal:30px; --body-mobile:16px; --body:18px; --white:#ffffff; --font-main:Libre Baskerville; --body-desktop:18px; --h1-desktop:60px; --h1-tablet:48px; --h1-mobile:32px; --full-viewport-height:calc(100dvh - 90px); --zeichenabstand-einleser:0.1em; --full-viewport-height-mobile:calc(100dvh - 90px); --body-extra-small:14px; --elemente-abstand-mini:10px; --body-mini:12px; --Kachel-Abstand-Small:20px; }
/* Start custom CSS */.elementor-icon {
vertical-align:middle;
}


.elementor-kit-6 a:focus,
.elementor-kit-6 a:active {
  outline: none;
}



/* --- Globale Klasse für den Atomic Button: .info-btn-animiert --- */

.info-btn-animiert {
    /* Variablen für die perfekte Mathematik */
    --arrow-size: 18px;
    --arrow-gap: 12px;

    display: inline-flex !important;
    align-items: center !important;
    gap: var(--arrow-gap) !important;
    background-color: transparent !important;
    
    /* HIER GEÄNDERT: Padding von 8px auf 4px reduziert, Linie rückt näher an den Text */
    padding: 0 0 0px 0 !important; 
    
    color: var(--e-global-color-primary) !important;
    font-family: inherit !important;
    border: none !important;
    border-radius: 0 !important; 
    box-shadow: none !important;
    text-decoration: none !important;
    position: relative !important;
    cursor: pointer;
    overflow: visible !important;
}

/* ==========================================
   1. DER PFEIL VOR DEM TEXT (::before)
   ========================================== */
.info-btn-animiert::before {
    content: '';
    display: block;
    width: var(--arrow-size);
    height: var(--arrow-size);
    
    /* HIER GEÄNDERT: Sichert ab, dass der Pfeil die Textfarbe hat */
    background-color: currentColor; 
    
    /* Die 1px SVG-Maske für den Pfeil */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='0' y1='12' x2='22' y2='12'/%3E%3Cpolyline points='14 5 22 12 14 19'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='0' y1='12' x2='22' y2='12'/%3E%3Cpolyline points='14 5 22 12 14 19'/%3E%3C/svg%3E");
    
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover-Effekt: Pfeil gleitet auf das Wort zu */
.info-btn-animiert:hover::before {
    transform: translateX(6px);
}

/* ==========================================
   2. DER UNTERSTRICH NUR UNTER DEM TEXT (::after)
   ========================================== */
.info-btn-animiert::after {
    content: '';
    position: absolute;
    
    /* Der Magie-Trick für die Breite: Gesamtbreite minus Pfeil minus Lücke */
    width: calc(100% - var(--arrow-size) - var(--arrow-gap));
    height: 1px;
    bottom: 0;
    right: 0; 
    
    /* HIER GEÄNDERT: Sichert ab, dass die Linie die Textfarbe hat */
    background-color: currentColor; 
    
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover-Effekt: Unterstrich fährt aus */
.info-btn-animiert:hover::after {
    transform: scaleX(1);
}


/* --- Modifier für den weißen Button auf dunklem Grund (Atomic Version) --- */

.info-btn-animiert.info-btn-weiss {
    color: #FFFFFF !important;
}


.scroll-radius {
    /* Optimiert die Performance und macht den Effekt flüssig */
    transition: border-radius 0.1s ease-out;
    will-change: border-radius;
}


/* Eine Klasse für ein weiches Einblenden beim Scrollen (Premium Version) */
.reveal-on-scroll {
    opacity: 0;
    translate: 0 50px; 
    view-timeline-name: --reveal;
    view-timeline-axis: block;
    animation: reveal-anim both cubic-bezier(0.2, 0.8, 0.2, 1);
    animation-timeline: --reveal;
    
    /* HIER GEÄNDERT: Nutzt "cover" statt "entry", um den Startpunkt sicher in den sichtbaren Bereich zu schieben */
    animation-range: cover 20% cover 50%; 
}

@keyframes reveal-anim {
    to {
        opacity: 1;
        translate: 0 0;
    }
}


.center-all {
    display: flex !important;
    flex-direction: column !important; /* Zwingt die Elemente sauber untereinander */
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important; /* Zentriert auch mehrzeiligen Text in sich selbst */
    width: 100% !important; /* Stellt sicher, dass das Div den ganzen Platz nutzt */
}

/* Abstand nach dem gesamten FAQ-Bereich */
#rank-math-faq {
    margin-bottom: 40px; 
}

/* Abstand und Positionierung der einzelnen FAQ-Boxen */
#rank-math-faq .rank-math-list-item {
    position: relative;
    margin-bottom: 15px; 
}

/* Versteckt das Input-Feld */
#rank-math-faq .rank-math-list-item input {
    display: none; 
}

/* Das Aussehen der anklickbaren Frage (h3) */
#rank-math-faq .rank-math-list-item h3 {
    background: #ffffff; 
    border-radius: 12px; 
    padding: 15px 20px; 
    cursor: pointer;
    font-size: 18px !important;
    font-weight: normal !important;
    margin-bottom: 0;
    
    display: flex; 
    align-items: center; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.03); 
}

/* Das Plus-Zeichen vor der Frage */
#rank-math-faq .rank-math-list-item h3:before {
    content: "+"; 
    display: inline-block;
    font-size: 26px; 
    font-weight: 300; 
    color: #555555;
    margin-right: 15px; 
    line-height: 1;
    transition: transform 0.3s ease; 
}

/* Plus in ein "X" drehen, wenn die FAQ geöffnet ist */
#rank-math-faq .rank-math-list-item.faq-open h3:before {
    transform: rotate(45deg); 
}

/* --- NEU: Die animierte Antwort-Box --- */

/* Modernes CSS Grid für ein exaktes, weiches Aufklappen */
#rank-math-faq .rank-math-answer {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    padding: 0 20px; 
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.4s ease-out, 
                padding 0.4s ease-out;
}

/* Das innere Element versteckt überstehende Inhalte beim Zuklappen */
#rank-math-faq .rank-math-answer > * {
    overflow: hidden;
    min-height: 0; /* Wichtig für die korrekte Grid-Animation */
    margin-bottom: 0; /* Verhindert springende Abstände durch Absatz-Tags */
}

/* Antwort-Box weich einblenden und auf volle Höhe aufziehen */
#rank-math-faq .rank-math-list-item.faq-open .rank-math-answer {
    grid-template-rows: 1fr;
    opacity: 1;
    padding: 5px 20px 20px 20px; /* Optisch sauberer Freiraum für den Text */
}

/* Der Glassmorphism-Effekt für die Kachel */
.glass-card {
    /* 1. Die Hintergrundfarbe: Ein extrem helles Off-White mit 15% Deckkraft */
    background: rgba(255, 255, 255, 0.15);
    
    /* 2. Der eigentliche Unschärfe-Effekt (Blur) für den Hintergrund */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Wichtig für Safari-Browser */
    
    /* 3. Eine ganz zarte weiße Kontur simuliert die Lichtbrechung an der Glaskante */
    border: 1px solid rgba(255, 255, 255, 0.3);
    
    /* 4. Abgerundete Ecken und ein weicher Schatten für räumliche Tiefe */
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
    
    /* Optional: Falls Text oder Bilder im Container sind, brauchen sie etwas Abstand zum Rand */
    padding: 30px;
}

/* 1. Zwingt das spezifische Dropdown-Feld, den System-Pfeil abzuwerfen und unseren neuen zu nutzen */
#erlebnis-dropdown {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: 18px !important;
    background-position: right 20px center !important;
    padding-right: 50px !important;
}

/* 2. KILL-SWITCH: Falls Elementor ein eigenes SVG als Pfeil hartcodiert darüberlegt, schalten wir es ab */
.e-form-select-base ~ svg,
#erlebnis-dropdown ~ svg {
    display: none !important;
}

/* Basis-Setup für Links (a) und markierte Wörter (u) innerhalb des Containers */
.hover-effect-container a,
.hover-effect-container u {
    position: relative;
    display: inline-block;
    text-decoration: none !important; /* Entfernt die plumpe Standard-Unterstreichung vom Browser */
    padding-bottom: 2px;
    color: inherit;
}

/* Die unsichtbare Linie im Ruhezustand */
.hover-effect-container a::after,
.hover-effect-container u::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Die Linie fährt beim Hovern aus */
.hover-effect-container a:hover::after,
.hover-effect-container u:hover::after {
    transform: scaleX(1);
    transform-origin: left; 
}



/* 1. Mache die Bewegung absolut flüssig (linear), ohne Beschleunigen oder Abbremsen */
.infinite-logo-slider .swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
}

/* 2. Deaktiviere jegliche Interaktion (kein Ziehen, kein Wischen, kein Klicken) */
.infinite-logo-slider .swiper {
    pointer-events: none !important;
}

/* 3. OPTIONAL: Logos dezent grau färben (passt perfekt zum cleanen Design) */
.infinite-logo-slider img {
    filter: grayscale(100%) opacity(60%);
    transition: all 0.3s ease;
}


/* Der äußere Rahmen, der alles abschneidet */
.marquee-wrapper {
  display: flex;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

/* Die Textelemente selbst */
.marquee-text {
  flex-shrink: 0; /* Verhindert Stauchen */
  padding-right: 30px; /* Der Abstand zum nächsten Durchlauf */
  margin: 0 !important;
  
  /* Die Animation liegt jetzt direkt auf dem Text! */
  animation: marquee-scroll 20s linear infinite;
}

/* Die Magie: Jeder Text verschiebt sich um exakt 100% seiner eigenen Breite nach links. 
Wenn Text 1 komplett aus dem Bild gefahren ist, steht Text 2 exakt an seiner Startposition.
Der Reset auf 0% ist dadurch physisch unsichtbar.
*/
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}


/* Erzwingt Cover und Zentrierung für den Seifenkistenbau-Header */
.elementor-element-514e112 {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Fallback, falls Elementor das ACF-Bild in ein Overlay rendert */
.elementor-element-514e112 > .elementor-background-overlay {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}/* End custom CSS */