:root {
    /* Color Variables */
    --background-dark: #1C1C1C;
    --secondary-bg-darker: #2b2b2b;
    --primary-text: #FFFFFF;
    --secondary-text: #CCCCCC;
    --border-divider: #3A3A3A;
    --accent-color: #FB4848;
    --accent-color-rgb: 251, 72, 72; /* RGB-Werte für #FB4848 */
    --accent-color-darker: #d13a3a;
    --light-text: #fff; /* Für Texte auf dunklen Hintergründen */
    --dark-overlay-rgb: 0, 0, 0; /* Die RGB-Werte für ein reines Schwarz-Overlay */

    /* Font Family */
    --font-primary: 'Inter', sans-serif;

    /* Animation Variables */
    --animation-duration: 1.0s; /* Standarddauer aller Scroll-Trigger-Animationen (z.B. 1.0 Sekunden) */
    --animation-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Eine angenehme Ease-Out-Kurve für Animationen */
    --stagger-delay-increment: 0.1s; /* Inkrememt für gestaffelte Animationen (z.B. 0.1s pro Element) */
}

html {
    box-sizing: border-box;
    overflow-x: hidden; /* Zusätzlich zu body auch html */
    width: 100%;
    position: relative;
}

*, *::before, *::after {
    box-sizing: inherit;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100vw; /* Verhindert dass Elemente breiter als Viewport werden */
}

body {
    font-family: var(--font-primary);
    background-color: var(--background-dark);
    color: var(--primary-text);
    line-height: 1.6;
    position: relative; /* Zusätzlich für bessere Kontrolle */
    width: 100%;
    max-width: 100vw;
}
body.no-scroll {
    overflow: hidden; /* Verhindert Scrollen, wenn das mobile Menü geöffnet ist */
}

/* General Link Styles */
a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-text);
}

.container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%; /* Sicherstellen dass Container nicht zu breit wird */
    box-sizing: border-box;
}

.anim-fade-in-desktop {
    opacity: 0;
    /* Optional: Füge hier eine Standard-Transform-Eigenschaft hinzu,
       wenn du möchtest, dass Elemente, die diese Klasse haben, 
       auf Mobilgeräten trotzdem ihre Endposition einnehmen, 
       aber ohne Animation. */
    /* transform: translateY(0); */ 
}

/* Definition der Fade-in Keyframe-Animation */
@keyframes fadeInDesktop {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (min-width: 769px) { 
    .anim-fade-in-desktop {
        /* Aktiviere die Animation nur auf Desktop */
        animation: fadeInDesktop var(--animation-duration, 1s) var(--animation-ease, ease-out) forwards;
        /* Wenn du gestaffelte Verzögerungen möchtest: */
        animation-delay: var(--animation-delay, 0s); 
    }
}

/* Grundzustand: unsichtbar und verschoben */
.anim-fade-in {
    opacity: 0;
    /* Default transform, wird von spezifischeren Klassen überschrieben */
    transform: translateY(0); /* Hier als Basiswert, damit es von den anderen überschrieben werden kann */
    transition: opacity var(--animation-duration) var(--animation-ease), 
                transform var(--animation-duration) var(--animation-ease);
    transition-delay: var(--animation-delay, 0s); /* Für gestaffelte Delays */
}

/* Zustand sichtbar: animiert */
.anim-fade-in.is-visible {
    opacity: 1;
    transform: translate(0, 0); /* Endposition ist die Originalposition */
}


/* --- Spezifische Fade-In-Effekte (Startpositionen) --- */
/* Diese überschreiben den 'transform' Wert von .anim-fade-in */

/* Effekt: Element fliegt von UNTEN ein */
.anim-fade-in-bottom {
    transform: translateY(50px); /* Startposition: 50px unter der finalen Position */
}

/* Effekt: Element fliegt von RECHTS ein */
.anim-fade-in-right {
    transform: translateX(50px); /* Startposition: 50px rechts von der finalen Position */
}

/* Effekt: Element fliegt von LINKS ein */
.anim-fade-in-left {
    transform: translateX(-50px); /* Startposition: 50px links von der finalen Position */
}


/* --- Verzögerungen für gestaffelte Animationen --- */
/* Nutze diese Klassen auf Kindelementen, um sie zeitversetzt erscheinen zu lassen.
   Die Verzögerung wird über eine CSS-Variable --animation-delay gesetzt, die vom JS dynamisch vergeben wird. */
.anim-delay-1 { transition-delay: calc(var(--animation-delay, 0s) + var(--stagger-delay-increment) * 1); }
.anim-delay-2 { transition-delay: calc(var(--animation-delay, 0s) + var(--stagger-delay-increment) * 2); }
.anim-delay-3 { transition-delay: calc(var(--animation-delay, 0s) + var(--stagger-delay-increment) * 3); }
.anim-delay-4 { transition-delay: calc(var(--animation-delay, 0s) + var(--stagger-delay-increment) * 4); }
.anim-delay-5 { transition-delay: calc(var(--animation-delay, 0s) + var(--stagger-delay-increment) * 5); }
/* Füge weitere .anim-delay-X Klassen hinzu, falls du mehr Stufen benötigst */

/* Es gibt keinen @media (max-width: 992px) Block mehr, der die Animationen deaktiviert! */

/* 3. ANIMATION FIXES FÜR MOBILE GERÄTE */
@media (max-width: 768px) {
    /* Alle Animationen, die horizontal bewegen, begrenzen */
    .anim-fade-in-right {
        transform: translateX(30px); /* Reduziert von 50px auf 30px */
    }
    
    .anim-fade-in-left {
        transform: translateX(-30px); /* Reduziert von 50px auf 30px */
    }
}
@media (max-width: 480px) {


    /* Noch konservativere Animation-Distanzen */
    .anim-fade-in-right {
        transform: translateX(20px);
    }
    
    .anim-fade-in-left {
        transform: translateX(-20px);
    }
}



/* --- Preloader Styles --- */
#preloader {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--background-dark); /* Schwarzer Hintergrund */
    z-index: 9999; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    opacity: 1; 
    visibility: visible; 
    transition: opacity 0.6s ease-out, visibility 0.6s ease-out; 
}

#preloader.fade-out {
    opacity: 0;
    visibility: hidden;
}

/* Spinner Styles - Drehendes Autorad als GIF-Bild */
.spinner {
    width: 100px; /* Breite des Rades. Passe dies ggf. an die Größe deines GIFs an */
    height: 100px; /* Höhe des Rades. Sollte gleich der Breite sein, wenn es rund ist */
    
    background-image: url('../icons/preloader.gif'); /* <--- DIESER PFAD IST JETZT BESTÄTIGT UND KORREKT */
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center; 
    
    animation: spin 1.5s linear infinite; 
}

/* --- Media Queries für den Slider (Anpassung für kleinere Bildschirme) --- */
@media (max-width: 768px) {
    .spinner {
        width: 50px; /* Breite des Rades. Passe dies ggf. an die Größe deines GIFs an */
        height: 50px; /* Höhe des Rades. Sollte gleich der Breite sein, wenn es rund ist */
}
}

@media (max-width: 480px) {
    .spinner {
        width: 75px; /* Breite des Rades. Passe dies ggf. an die Größe deines GIFs an */
        height: 75px; /* Höhe des Rades. Sollte gleich der Breite sein, wenn es rund ist */
}
}










/* Header Styles */
.main-header {
    position: fixed; /* Makes the header sticky */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Adjusted z-index for the header */
    background-color: transparent; /* Initially transparent */
    transition: background-color 0.3s ease, padding 0.3s ease;
    padding: 30px 0; /* **VERGRÖSSERT:** Default padding für größeren Header */}

.main-header.scrolled {
    background-color: var(--secondary-bg-darker); /* Darker background when scrolled */
    padding: 15px 0; /* **ANGEPASST:** Reduced padding when scrolled */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px; /* Max width for content alignment */
    margin: 0 auto;
    padding: 0 20px;
}

.main-nav .logo img {
    height: 80px; /* **VERGRÖSSERT:** Default Logo Größe */
    transition: height 0.3s ease;
}

.main-header.scrolled .main-nav .logo img {
    height: 50px; /* **ANGEPASST:** Smaller logo when scrolled */
}

/* Desktop Navigation */
.desktop-nav {
    list-style: none;
    display: flex;
    margin: 0;
}

.desktop-nav li {
    margin-left: 40px; /* Abstand zwischen den Menüpunkten */
}

.desktop-nav li a {
    color: var(--primary-text);
    font-weight: 600;
    padding: 10px 0; /* Padding beibehalten, damit die Linie Platz hat */
    position: relative;
    white-space: nowrap;
    font-size: 1.1em;
    display: block; /* Wichtig für Dimensionen und Positionierung der Linien */
    overflow: hidden; /* Sicherstellen, dass Linien nicht über den Bereich hinausragen */
    transition: color 0.3s ease; /* Nur noch Farb-Übergang */
}

.desktop-nav li a::before,
.desktop-nav li a::after {
    content: '';
    position: absolute;
    background-color: var(--accent-color); /* Deine Akzentfarbe für die Linie */
    transition: all 0.3s ease-in-out; /* Eine universelle Übergangseigenschaft für alle Linien */
}

/* Obere Linie */
.desktop-nav li a::before {
    top: 0;
    left: 0;
    width: 0; /* Startet unsichtbar */
    height: 2px;
}

/* Rechte Linie */
.desktop-nav li a::after {
    top: 0;
    right: 0;
    width: 2px;
    height: 0; /* Startet unsichtbar */
}

.desktop-nav li a::before { /* Obere Linie */
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    transition: width 0.3s ease-in-out;
}

.desktop-nav li a::after { /* Untere Linie */
    bottom: 0;
    right: 0;
    width: 0;
    height: 2px;
    transition: width 0.3s ease-in-out;
}

.desktop-nav li a:hover::before { /* Obere Linie fährt von links nach rechts ein */
    width: 100%;
}

.desktop-nav li a:hover::after { /* Untere Linie fährt von rechts nach links ein */
    width: 100%;
}

/* Oder Vorschlag 2: Eine Linie, die von einer Seite startet und um den Text herumgeht */
/* Das ist optisch am nächsten an "Linie um den Kasten" ohne zu komplex zu werden */

.desktop-nav li a::before { /* Simuliert die obere und rechte Linie */
    top: 0;
    left: 0;
    width: 0;
    height: 2px; /* Für die obere Linie */
    background-color: var(--accent-color);
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out 0.3s; /* Breite zuerst, dann Höhe */
    transform-origin: left;
}

.desktop-nav li a::after { /* Simuliert die untere und linke Linie */
    bottom: 0;
    right: 0;
    width: 0;
    height: 2px; /* Für die untere Linie */
    background-color: var(--accent-color);
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out 0.3s; /* Breite zuerst, dann Höhe */
    transform-origin: right;
}

.desktop-nav li a:hover::before { /* Obere Linie wird voll und fährt dann nach unten (rechte Linie) */
    width: 100%; /* Obere Linie fährt ein */
    /* Nächster Schritt: Rechte Linie animieren. Hier wird's mit nur einem Pseudoelement schwierig */
    /* Ohne ein drittes/viertes Pseudoelement oder komplexere CSS-Variablen/JS ist eine *echt* umlaufende Linie kaum möglich */
    /* Ich schlage vor, wir machen eine effektive Simulation, die sehr gut aussieht. */
    /* Die ::after Linie bleibt wie gehabt unter dem Text. */
}

/* LASS UNS DIESEN ANSATZ WÄHLEN: EINFACHE OBERE UND UNTERE LINIE, DIE REINSTROMPT */
/* Das ist der Stil, der am ehesten "eine Linie" ist und nicht zu komplex wird */

.desktop-nav li a {
    color: var(--primary-text);
    font-weight: 600;
    padding: 10px 0;
    position: relative;
    white-space: nowrap;
    font-size: 1.1em;
    display: block;
    overflow: hidden; /* Wichtig für den Effekt */
    transition: color 0.3s ease;
}

.desktop-nav li a::before { /* Obere Linie */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--accent-color);
    transform: translateX(-100%); /* Startet außerhalb des Sichtfeldes links */
    transition: transform 0.4s ease-out; /* Sanftes Einfliegen */
}

.desktop-nav li a::after { /* Untere Linie */
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background-color: var(--accent-color);
    transform: translateX(100%); /* Startet außerhalb des Sichtfeldes rechts */
    transition: transform 0.4s ease-out; /* Sanftes Einfliegen */
}

.desktop-nav li a:hover {
    color: var(--accent-color); /* Textfarbe beim Hover zur Akzentfarbe ändern */
}

.desktop-nav li a:hover::before { /* Obere Linie fährt von links rein */
    transform: translateX(0);
}

.desktop-nav li a:hover::after { /* Untere Linie fährt von rechts rein */
    transform: translateX(0);
}

/* Optionale zusätzliche Effekte für die Links beim Hover */
.desktop-nav li a:hover {
    color: var(--accent-color); /* Text wird rot beim Hover */
    transform: translateY(-2px); /* Text gleitet leicht nach oben */
    text-shadow: 0 0 5px rgba(255,255,255,0.3); /* Leichter Textschatten für Glüheffekt */
}

/* WICHTIG: Die Übergänge für die Linien und den Text müssen harmonieren. */
/* Der vorherige transform auf dem Link selbst (translateY) hat gut gepasst */

/* Lass uns dies als finale Version nehmen, die zwei Linien von den Seiten einfahren lässt */
/* Dies ist eine effektive und sauber umsetzbare "um den Kasten"-Simulation mit nur zwei Pseudoelementen. */

.desktop-nav li a {
    color: var(--primary-text);
    font-weight: 600;
    padding: 10px 0;
    position: relative;
    white-space: nowrap;
    font-size: 1.1em;
    display: block;
    /* transition auf den Link selbst für Textfarbe und optionalen leichten Shift */
    transition: color 0.3s ease, transform 0.3s ease;
    overflow: hidden; /* Ganz wichtig, damit die Linien außerhalb starten können */
}

/* Das ::before Element wird die obere Linie */
.desktop-nav li a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Die Linie ist immer 100% breit */
    height: 2px;
    background-color: var(--accent-color);
    transform: translateX(-100%); /* Startet komplett links außerhalb des sichtbaren Bereichs */
    transition: transform 0.3s ease-out; /* Sanfteres Einfahren der Linie */
    z-index: 1; /* Über dem Text, wenn gewünscht, oder 0 für unter dem Text */
}

/* Das ::after Element wird die untere Linie */
.desktop-nav li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%; /* Die Linie ist immer 100% breit */
    height: 2px;
    background-color: var(--accent-color);
    transform: translateX(100%); /* Startet komplett rechts außerhalb des sichtbaren Bereichs */
    transition: transform 0.3s ease-out; /* Sanfteres Einfahren der Linie */
    z-index: 1; /* Über dem Text, wenn gewünscht, oder 0 für unter dem Text */
}

.desktop-nav li a:hover {
    color: var(--accent-color); /* Textfarbe ändert sich beim Hover */
    transform: translateY(-3px); /* Text gleitet leicht nach oben */
}

.desktop-nav li a:hover::before {
    transform: translateX(0); /* Obere Linie fährt von links nach rechts ein */
}

.desktop-nav li a:hover::after {
    transform: translateX(0); /* Untere Linie fährt von rechts nach links ein */
}
/* Hamburger Menu */
.hamburger-menu {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 10px;
    z-index: 1002;
}

.hamburger-menu .bar {
    width: 25px; /* Hamburger-Balken etwas breiter */
    height: 4px; /* Hamburger-Balken etwas dicker */
    background-color: var(--primary-text);
    margin: 3px 0; /* Etwas mehr Abstand zwischen den Balken */
    transition: 0.4s;
}

/* Hamburger menu animation (for cross effect) */
.hamburger-menu.active .bar:nth-child(1) {
    transform: rotate(-45deg) translate(-7px, 7px); /* Anpassung für größere Balken */
}
.hamburger-menu.active .bar:nth-child(2) {
    opacity: 0;
}
.hamburger-menu.active .bar:nth-child(3) {
    transform: rotate(45deg) translate(-7px, -7px); /* Anpassung für größere Balken */
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1001;
    transition: right 0.5s cubic-bezier(0.7, 0, 0.3, 1); /* Krassere Animation */
    display: flex;
    justify-content: flex-end;
}

.mobile-menu-overlay.active {
    right: 0;
}

.mobile-menu-content {
    background-color: var(--background-dark);
    width: 50%;
    height: 100%;
    padding: 40px 20px;
    box-shadow: -5px 0 15px rgba(0,0,0,0.3);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
}

/* Styles for the Close Button */
.mobile-menu-content .close-btn {
    position: absolute;
    top: 25px; /* Etwas nach unten verschoben */
    right: 25px; /* Etwas vom Rand weg */
    font-size: 3em; /* **VERGRÖSSERT:** Noch größerer Schließen-Button */
    color: var(--primary-text);
    cursor: pointer;
    line-height: 1;
    z-index: 1003;
    transition: color 0.3s ease, transform 0.2s ease; /* Übergang für Hover-Effekt */
}

.mobile-menu-content .close-btn:hover {
    color: var(--accent-color);
    transform: scale(1.1); /* Kleiner Scale-Effekt beim Hover */
}

.mobile-menu-content ul {
    list-style: none;
    padding-top: 50px;
    flex-grow: 1;
}

.mobile-menu-content ul li {
    margin-bottom: 25px; /* Etwas mehr Abstand */
}

.mobile-menu-content ul li a {
    color: var(--primary-text);
    font-size: 1.6em; /* Menüschrift im Overlay größer */
    font-weight: 600;
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-divider);
    transition: color 0.3s ease, transform 0.2s ease; /* Übergang für Hover-Effekt */
}

.mobile-menu-content ul li a:hover {
    color: var(--accent-color);
    transform: translateX(5px); /* Kleiner Slide-Effekt */
}

/* Styles for Mobile Menu Contact Info */
.mobile-menu-contact {
    color: var(--secondary-text);
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--border-divider);
    text-align: left;
}

.mobile-menu-contact h3 {
    color: var(--primary-text);
    margin-bottom: 10px;
    font-size: 1.2em;
}

.mobile-menu-contact p {
    margin-bottom: 5px;
    font-size: 0.95em;
}

.mobile-menu-contact a {
    color: var(--secondary-text);
    text-decoration: underline;
}

.mobile-menu-contact a:hover {
    color: var(--accent-color);
}

.mobile-menu-contact .opening-hours {
    font-style: italic;
    margin-top: 10px;
}

/* Button Styles - KRASSERE ANIMATIONEN */
.btn-primary {
    display: inline-block;
    background-color: var(--accent-color);
    color: var(--primary-text);
    padding: 15px 35px; /* Etwas größere Buttons */
    border-radius: 5px;
    font-weight: 700;
    text-transform: uppercase;
    position: relative; /* Für den Pseudoelement-Effekt */
    overflow: hidden; /* Wichtig, damit der Hover-Effekt im Button bleibt */
    z-index: 1; /* Um über dem Pseudoelement zu sein */
    transition: color 0.4s ease-in-out; /* Übergang für Textfarbe */
    border: none; /* Keine Border, da wir den Background wechseln */
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--accent-color-darker); /* Dunklerer Akzent als Hintergrund */
    transform: scaleX(0); /* Startet unsichtbar */
    transform-origin: left; /* Wächst von links */
    transition: transform 0.4s ease-in-out; /* Animation */
    z-index: -1; /* Hinter dem Button-Text */
}

.btn-primary:hover::before {
    transform: scaleX(1); /* Fährt beim Hover von links ein */
}

/* Secondary Button - Krassere Animation */
.btn-secondary {
    display: inline-block;
    background-color: transparent;
    color: var(--accent-color);
    padding: 15px 35px; /* Etwas größere Buttons */
    border: 2px solid var(--accent-color);
    border-radius: 5px;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color 0.4s ease-in-out; /* Übergang für Textfarbe */
}

.btn-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--accent-color); /* Akzentfarbe als Hintergrund */
    transform: scale(0); /* Startet als Punkt in der Mitte */
    border-radius: 50%; /* Rund, für einen "Pulse"-Effekt */
    transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1); /* Krassere Animation */
    z-index: -1;
}

.btn-secondary:hover {
    color: var(--primary-text); /* Text wird weiß beim Hover */
}

.btn-secondary:hover::before {
    transform: scale(1.5); /* Wächst über den Button hinaus */
    border-radius: 0; /* Wird quadratisch, um den Button zu füllen */
}




/* --- Hero Slider Styles --- */
.hero-slider {
    position: relative;
    width: 100%;
    height: 850px;
    overflow: hidden;
    margin-top: -100px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Optional: Füge hier einen Z-Index hinzu, falls der Slider von anderen Elementen überdeckt wird */
    z-index: 10; /* Höher als andere Section-Elemente, aber niedriger als Header (z.B. 1000) */
}

.slider-container {
    position: absolute;
    width: 100%;
    height: 100%;
    /* ANPASSUNG: Schatten etwas dunkler und weicher für mehr Präsenz */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4); /* Höherer Versatz, mehr Blur, stärkere Deckkraft */
    /* Optional: Füge hier einen Z-Index hinzu, falls nötig, aber der z-index des .hero-slider sollte reichen */
    z-index: 2; /* Höher als slide-item (z-index:1), aber darunterliegende Elemente sollten einen niedrigeren z-index haben */
}

.slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.slide-item.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
    animation: imageZoom 10s linear forwards; /* Bild-Animation bleibt */
}

/* Image Animation for slides */
.slide-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Leichter Overlay für Lesbarkeit */
    z-index: 1;
    opacity: 1;
}

@keyframes imageZoom {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}


.slide-content {
    position: relative;
    z-index: 3;
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
}

.text-bar {
    background-color: rgba(var(--accent-color-rgb), 0.85); /* **Wieder nur roter Balken** */
    color: var(--primary-text);
    padding: 15px 30px; /* **Padding zurückgesetzt** */
    margin: 10px 0;
    font-size: 2em;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    display: inline-block; /* Für die Textanimationen */
    box-shadow: none; /* **Schatten entfernt** */
    /* Die ::before und ::after Regeln für die weißen/grauen Balken wurden entfernt */
}

.text-bar .slide-text {
    display: inline-block;
    opacity: 0;
    position: relative;
    z-index: 1; /* Sicherstellen, dass der Text über dem Balken liegt */
}

/* Animationen für Slide Type 1 (Text von links/rechts auf Balken) */
/* Diese Animationen bleiben, da sie die roten Balken selbst betreffen */
.slide-item.active .slide-content.type-1 .left-bar {
    transform: translateX(0);
    animation: fadeInLeftBar 1s ease-out forwards;
}
.slide-item.active .slide-content.type-1 .right-bar {
    transform: translateX(0);
    animation: fadeInRightBar 1s ease-out forwards;
}
.slide-item.active .slide-content.type-1 .left-bar .slide-text {
    animation: fadeInText 0.8s ease-out 0.5s forwards;
}
.slide-item.active .slide-content.type-1 .right-bar .slide-text {
    animation: fadeInText 0.8s ease-out 0.5s forwards;
}

@keyframes fadeInLeftBar {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
}
@keyframes fadeInRightBar {
    0% { transform: translateX(100%); }
    100% { transform: translateX(0); }
}

/* Animationen für Slide Type 2 (Text von oben/unten auf Balken) */
/* Diese Animationen bleiben bestehen */
.slide-item.active .slide-content.type-2 .top-bar {
    transform: translateY(0);
    animation: fadeInTopBar 1s ease-out forwards;
}
.slide-item.active .slide-content.type-2 .bottom-bar {
    transform: translateY(0);
    animation: fadeInBottomBar 1s ease-out forwards;
}
.slide-item.active .slide-content.type-2 .top-bar .slide-text {
    animation: fadeInText 0.8s ease-out 0.5s forwards;
}
.slide-item.active .slide-content.type-2 .bottom-bar .slide-text {
    animation: fadeInText 0.8s ease-out 0.5s forwards;
}

@keyframes fadeInTopBar {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(0); }
}
@keyframes fadeInBottomBar {
    0% { transform: translateY(100%); }
    100% { transform: translateY(0); }
}

/* Allgemeine Text-Animation */
@keyframes fadeInText {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Loading Bar - Unverändert (bleibt vollbreit unten) */
.loading-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 7px;
    background-color: transparent;
    border-radius: 0;
    overflow: hidden;
    z-index: 4;
}

.loading-bar .progress {
    height: 100%;
    width: 0;
    background-color: var(--accent-color);
    border-radius: 0;
    transition: width 0.1s linear;
}

/* --- Slider Navigaton Buttons (Optional) --- */
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: var(--primary-text);
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1.5em;
    z-index: 5;
    transition: background-color 0.3s ease;
    user-select: none; /* Verhindert ungewolltes Markieren beim Klicken */
}
.slider-nav:hover {
    background-color: var(--accent-color);
}
.slider-nav.prev {
    left: 20px;
}
.slider-nav.next {
    right: 20px;
}

/* --- Media Queries für den Slider (Anpassung für kleinere Bildschirme) --- */
@media (max-width: 768px) {
    .hero-slider {
        height: 650px;
        margin-top: -90px;
    }
    .text-bar {
        padding: 10px 20px;
        font-size: 1.2em;
    }
    .slider-nav {
        display: none; /* **NEU:** Blendet die Navigationspfeile auf Mobilgeräten aus */
    }
}

@media (max-width: 480px) {
    .hero-slider {
        height: 550px;
        margin-top: -70px;
    }
    .text-bar {
        padding: 8px 15px;
        font-size: 0.9em;
    }
}










/* --- Section: Services & About Block (Obere Sektion) --- */
.services-about-block {
    padding: 80px 0;
    background-color: var(--secondary-bg-darker);
    position: relative;
    z-index: 1;
    box-shadow: inset 0 15px 23px rgba(0, 0, 0, 0.2), /* Schatten von oben nach innen */
                inset 0 15px 25px rgba(0, 0, 0, 0.2); 
}

.services-about-block .container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.about-intro {
    flex: 1;
    min-width: 300px;
    padding-right: 20px;
}

.about-intro h1 {
    font-size: 2.8em;
    color: var(--primary-text);
    margin-bottom: 10px;
}

.about-intro h2 {
    font-size: 2.8em;
    color: var(--primary-text);
    margin-bottom: 10px;
}

.about-intro h3 {
    font-size: 1.2em;
    color: var(--secondary-text);
    margin-bottom: 30px;
    font-weight: 400;
}

.about-intro p {
    font-size: 1em;
    color: var(--secondary-text);
    line-height: 1.8;
}

.services-grid {
    flex: 1.2;
    display: grid;
    /* ANPASSUNG 1: Karten breiter und ggf. feste Spalten auf Desktop */
    /* Versuche eine feste Anzahl von Spalten oder eine größere Mindestbreite */
    /* Option A: Wenn du immer 2 Spalten auf Desktop willst, die sich gleichmäßig verteilen: */
    grid-template-columns: repeat(2, 1fr); 
    /* Option B: Flexibler, aber mit größerer Mindestbreite, so dass weniger Spalten entstehen */
    /* grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); */ /* Beispiel für breitere Karten */
    gap: 20px;
    justify-content: center; /* Zentriert das gesamte Grid innerhalb seines flex-Containers */
}

/* ANPASSUNG 2: Auf kleineren Bildschirmen ggf. flexibler Umbruch */
@media (max-width: 992px) { /* Oder dein gewünschter Tablet-Breakpoint */
    /* This rule now correctly applies to the .services-grid container */
    .services-grid { /* <--- Added the selector here */
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Hier wieder auf auto-fit für Responsivität */
    }

    /* These rules ensure fade-in animations are disabled for the specific elements on screens <= 992px */
    .services-about-block.fade-in-element {
        opacity: 1 !important; /* Force visibility */
        transform: translateY(0) !important; /* No initial offset */
        transition: none !important; /* No animation on mobile devices */
    }

    /* Optional: Falls es fade-in-child Elemente darin gibt und diese auch sofort sichtbar sein sollen */
    .services-about-block.fade-in-element .fade-in-child {
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition: none !important;
    }
}

@media (max-width: 768px) { /* Für kleine Mobilgeräte */
    /* This rule now correctly applies to the .services-grid container */
    .services-grid { /* <--- Added the selector here */
        grid-template-columns: 1fr; /* Eine Spalte */
    }

    /* These rules ensure fade-in animations are disabled for the specific elements on screens <= 768px */
    .services-about-block.fade-in-element {
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition: none !important;
    }
    .services-about-block.fade-in-element .fade-in-child {
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition: none !important;
    }
}
@media (max-width: 480px) {
    /* If you want .services-grid to remain 1fr on 480px, you don't need to repeat it,
       as the 768px rule will still apply. However, if you want to explicitly define it: */
    /* .services-grid {
        grid-template-columns: 1fr;
    } */

    /* These rules ensure fade-in animations are disabled for the specific elements on screens <= 480px */
    .services-about-block.fade-in-element {
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition: none !important;
    }
    .services-about-block.fade-in-element .fade-in-child {
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition: none !important;
    }
}

.service-card {
    background-color: var(--secondary-bg-darker);
    padding: 20px 25px; /* ANPASSUNG 3: Vertikales Padding reduzieren für "dünner" */
    border-radius: 8px;
    display: flex;
    align-items: center; /* Vertikalen Inhalt zentrieren */
    gap: 15px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    text-decoration: none;
    border: 1px solid var(--border-divider);
    /* ANPASSUNG 4: explizite Höhe entfernen, Inhalt soll Höhe bestimmen, aber mit weniger Padding */
    /* min-height und max-height können hier eher hinderlich sein für "cleaner" */
    /* height: auto; ist der Standard, aber wir nutzen Padding zur Kontrolle */
}


.service-card:hover {
    background-color: #2a2a2a;
    transform: translateY(-5px);
}

.service-icon {
    font-size: 2.2em;
    color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    flex-shrink: 0; /* Verhindert, dass das Icon schrumpft */
}

.service-info {
    flex-grow: 1;
    /* ANPASSUNG 5: Text-Align für cleaner Look (kann auch in .service-card mit text-align center für den gesamten Inhalt sein) */
    text-align: left; /* Standardmäßig linksbündig */
}

.service-info h4 {
    font-size: 1.1em;
    color: var(--primary-text);
    margin-bottom: 3px; /* ANPASSUNG 6: Abstand zum Text reduzieren */
}

.service-info p {
    font-size: 0.9em;
    color: var(--secondary-text);
    line-height: 1.4; /* ANPASSUNG 7: Zeilenhöhe für kompaktere Darstellung */
}

.service-arrow {
    font-size: 1.5em;
    color: var(--secondary-text);
    transition: transform 0.3s ease, color 0.3s ease;
    flex-shrink: 0; /* Verhindert, dass der Pfeil schrumpft */
}

.service-card:hover .service-arrow {
    transform: translateX(5px);
    color: var(--accent-color);
}












/* --- Section: Our Offerings (Unterer Block mit Flip Cards) --- */
.our-offerings {
    /* Deine vorhandenen Stile für die Sektion */
    padding: 80px 0;
    background-color: var(--background-dark);
    position: relative;
    z-index: 2;
}

.our-offerings .container h2 {
    font-size: 2.5em;
    color: var(--primary-text);
    text-align: center; /* NEU: IMMER mittig für "Unsere Dienstleistungen" */
    margin-bottom: 25px;
    position: relative;
    padding-top: 20px; /* Platz für den HR */
}

/* HR-Stil für die Überschrift in "Our Offerings" - IMMER mittig */
.our-offerings .container h2::before {
    content: '';
    display: block;
    width: 60px; /* Breite der Linie */
    height: 2px; /* Dünne Linie */
    background-color: var(--accent-color); /* Deine Akzentfarbe */
    margin: 0 auto 15px auto; /* NEU: IMMER zentriert für diese Linie */
    position: absolute;
    top: 0;
    left: 50%; /* NEU: IMMER zentriert für diese Linie */
    transform: translateX(-50%); /* NEU: IMMER zentriert für diese Linie */
}

.offering-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* --- Flip Card Styles --- */
.flip-card {
    background-color: transparent;
    min-height: 380px;
    perspective: 1000px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transition: box-shadow 0.3s ease, outline 0.3s ease;
    outline: 2px solid transparent;
    outline-offset: 4px;
    position: relative;
    /* Hardwarebeschleunigung erzwingen */
    transform: translateZ(0); /* HINZUGEFÜGT */
    -webkit-transform: translateZ(0); /* HINZUGEFÜGT für WebKit */
}

/* Neuer Fokus-Zustand für Barrierefreiheit */
.flip-card:hover,
.flip-card:focus-within {
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
    outline-color: var(--accent-color);
}

/* WICHTIG: Die Rotation wird jetzt durch die Klasse .is-flipped gesteuert */
.flip-card-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform-style: preserve-3d;
    border-radius: 8px;
    /* Hardwarebeschleunigung erzwingen */
    transform: translateZ(0); /* HINZUGEFÜGT */
    -webkit-transform: translateZ(0); /* HINZUGEFÜGT für WebKit */
}

/* Rotation, wenn die Klasse 'is-flipped' vorhanden ist */
.flip-card-inner.is-flipped {
    transform: rotateY(180deg) translateZ(0); /* translateZ(0) auch hier hinzufügen */
    -webkit-transform: rotateY(180deg) translateZ(0); /* HINZUGEFÜGT für WebKit */
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 8px;
    overflow: hidden;
    /* Hardwarebeschleunigung erzwingen */
    transform: translateZ(0); /* HINZUGEFÜGT */
    -webkit-transform: translateZ(0); /* HINZUGEFÜGT für WebKit */
}

/* Add these lines to ensure images cover the space */
.flip-card-front {
    background-size: cover;
    background-position: center;
}

.flip-card-front::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.overlay-text-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(var(--accent-color-rgb), 0.85);
    color: var(--primary-text);
    padding: 15px 20px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    z-index: 2;
    /* Die Negation der Drehung wurde hier entfernt, da das Element mit der Front
       unsichtbar werden sollte. Wenn es dennoch sichtbar bleibt, ist die Hardwarebeschleunigung wichtig. */
}

/* Die vorherige Regel für .flip-card-inner.is-flipped .overlay-text-wrapper wurde entfernt.
   Sie ist nicht nötig, wenn backface-visibility korrekt funktioniert und das Element
   mit der Vorderseite unsichtbar wird. */

.card-title {
    font-size: 1.4em;
    margin: 0;
}

/* Pfeil neben der Überschrift der Front */
.card-title::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f054";
    font-size: 0.8em;
    color: #fff;
    margin-left: 5px;
    display: inline-block;
    transform: translateX(0);
    transition: transform 0.3s ease;
}

/* Optional: Pfeil-Animation beim Hover über die Karte */
.flip-card:hover .card-title::after {
    transform: translateX(5px);
}

.flip-card-back {
    background-color: var(--secondary-bg-darker);
    color: var(--primary-text);
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px;
    text-align: center;
    /* Hardwarebeschleunigung erzwingen */
    transform: rotateY(180deg) translateZ(0); /* Hier auch hinzufügen */
    -webkit-transform: rotateY(180deg) translateZ(0); /* HINZUGEFÜGT für WebKit */
}

.flip-card-back .back-content {
    max-width: 90%;
}

.flip-card-back h3 {
    font-size: 1.5em;
    margin-bottom: 15px;
    color: var(--accent-color);
}

.flip-card-back p {
    font-size: 0.95em;
    line-height: 1.6;
    margin-bottom: 25px;
    color: var(--secondary-text);
}

.btn-flip-card {
    display: inline-block;
    background-color: var(--accent-color);
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-flip-card:hover {
    background-color: var(--accent-color-darker);
    transform: translateY(-2px);
}

/* Zusätzliche Klasse für Screenreader versteckten Text */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Media Queries für Responsivität --- */
@media (max-width: 992px) {
    .services-about-block .container {
        flex-direction: column;
        gap: 60px;
    }
    .about-intro {
        padding-right: 0;
        text-align: center;
    }
    /* Zentrierung für die about-intro Überschriften auf Tablets/kleinen Desktops */
    .about-intro h2,
    .about-intro h3 {
        text-align: center;
    }
    .about-intro h2 {
        font-size: 2.4em;
        line-height: 1.15;
    }
        .about-intro h1 {
        font-size: 2.4em;
        line-height: 1.15;
    }
    .about-intro h3 {
        font-size: 1.1em;
    }
    /* Zentrierung für die HR-Linie im about-intro auf Tablets/kleinen Desktops */
    .about-intro h2::before {
        margin: 0 auto 10px auto; /* Zentriert die Linie */
        left: 50%;
        transform: translateX(-50%);
        width: 50px;
    }

    .services-grid {
        justify-content: center;
    }

    /* Beibehalten: Zentrierung für "Our Offerings" auf Tablets/kleinen Desktops */
    .our-offerings .container h2 {
        text-align: center;
        font-size: 2em;
        margin-bottom: 20px;
    }
    .our-offerings .container h2::before {
        margin: 0 auto 10px auto; /* Zentriert die Linie */
        left: 50%;
        transform: translateX(-50%);
        width: 50px;
        height: 2px;
    }

    .flip-card {
        /* Angepasst: Gib der Karte auch auf Tablets etwas mehr Höhe, da die Schrift noch relativ groß ist */
        height: 320px; /* Von 280px auf 320px erhöht */
    }
    .card-title {
        font-size: 1.2em;
    }
    .flip-card-back h3 {
        font-size: 1.3em;
    }
    .flip-card-back p {
        font-size: 0.9em;
    }
    .btn-flip-card {
        padding: 8px 18px;
        font-size: 0.9em;
    }
}

@media (max-width: 768px) {
    .about-intro h2 {
        font-size: 2em;
        line-height: 1.1;
        text-align: center;
    }
        .about-intro h1 {
        font-size: 2em;
        line-height: 1.1;
        text-align: center;
    }
    .about-intro h3 {
        font-size: 1.05em;
        text-align: center;
    }
    .about-intro h2::before {
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 1px;
    }

    /* Beibehalten: Zentrierung für "Our Offerings" auf Mobiles */
    .our-offerings .container h2 {
        text-align: center;
        font-size: 1.8em;
        margin-bottom: 15px;
    }
    .our-offerings .container h2::before {
        margin: 0 auto 8px auto;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 1px;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }
    .service-card {
        padding: 20px;
    }
    .service-icon {
        font-size: 1.8em;
    }
    .service-info h4 {
        font-size: 1em;
    }
    .service-info p {
        font-size: 0.85em;
    }
    .service-arrow {
        font-size: 1.2em;
    }
    .flip-card {
        height: 300px;
    }
    .card-title {
        font-size: 1.1em;
    }
    .flip-card-back h3 {
        font-size: 1.2em;
    }
    .flip-card-back p {
        font-size: 0.85em;
    }
    .btn-flip-card {
        padding: 7px 15px;
        font-size: 0.85em;
    }
}

@media (max-width: 480px) {
    .services-about-block, .our-offerings {
        padding: 50px 0;
    }
    .about-intro h2 {
        font-size: 1.8em;
        line-height: 1.05;
        text-align: center;
    }
        .about-intro h1 {
        font-size: 1.8em;
        line-height: 1.05;
        text-align: center;
    }
    .about-intro h3 {
        font-size: 1em;
        text-align: center;
    }
    .offering-grid {
        gap: 20px;
    }
    .flip-card {
        height: 200px;
    }
    .card-title {
        font-size: 1em;
    }
    .flip-card-back h3 {
        font-size: 1.1em;
    }
    .flip-card-back p {
        font-size: 0.8em;
    }
}





/* --- Section: Contact & Opening Hours --- */
.contact-hours {
    /* Deine vorhandenen Stile für die Sektion */
    padding: 80px 0; /* Beispiel-Padding */
    background-color: var(--secondary-bg-darker); /* Oder welche Hintergrundfarbe diese Sektion hat */
    position: relative; /* Gut, um die Z-Achse zu kontrollieren, falls nötig */
    z-index: 1; /* Stellt sicher, dass die Sektion über dem vorherigen Inhalt liegt */
}

.contact-hours .container {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    justify-content: space-between;
    align-items: flex-start;
}

.contact-info-block,
.opening-hours-block {
    flex: 1;
    min-width: 300px; /* Beibehalten: Mindestbreite für größere Screens, bevor sie umbrechen */
    background-color: var(--background-darker);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    border: 1px solid var(--border-divider);
    position: relative;
    overflow: hidden;
}

/* Optional: Ein subtiler Hintergrundeffekt für die Karten, um sie noch mehr hervorzuheben */
.contact-info-block::before,
.opening-hours-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(var(--secondary-bg-darker-rgb), 0.5) 0%, rgba(var(--background-darker-rgb), 0) 100%);
    opacity: 0.1;
    z-index: 0;
    pointer-events: none;
}

.contact-info-block *,
.opening-hours-block * {
    position: relative;
    z-index: 1;
}

.contact-hours h2 {
    font-size: 2.2em;
    color: var(--primary-text);
    margin-bottom: 10px;
    text-align: left;
    position: relative;
    padding-top: 20px;
}

.contact-hours .heading-line {
    width: 60px;
    height: 2px;
    background-color: var(--accent-color);
    margin-bottom: 25px;
    margin-left: 0;
}

.contact-hours p {
    font-size: 1em;
    color: var(--secondary-text);
    line-height: 1.7;
    margin-bottom: 30px;
}

.contact-details,
.hours-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-details li,
.hours-list li {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    color: var(--primary-text);
    font-size: 1.05em;
}

.contact-details li i {
    color: var(--accent-color);
    font-size: 1.3em;
    width: 30px;
    text-align: center;
    margin-right: 10px;
}

.contact-details li span {
    color: var(--secondary-text);
}

.hours-list li span:first-child {
    font-weight: 600;
    color: var(--primary-text);
    flex-basis: 180px;
    flex-shrink: 0;
}

.hours-list li span:last-child {
    color: var(--secondary-text);
    flex-grow: 1;
}

.btn-contact-block {
    display: inline-block;
    background-color: var(--accent-color);
    color: #fff;
    padding: 15px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1em;
    margin-top: 30px;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.btn-contact-block:hover {
    background-color: var(--accent-color-darker);
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.4);
}


.map-container {
    margin-top: 30px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.map-container iframe {
    width: 100%;
    height: 300px;
    border: 0;
}


/* --- Media Queries für Responsivität (Kontakt & Öffnungszeiten) --- */
@media (max-width: 992px) {
    .contact-hours .container {
        flex-direction: column; /* Stapelt die Blöcke untereinander */
        gap: 40px;
    }
    .contact-info-block,
    .opening-hours-block {
        padding: 30px; /* Etwas weniger Padding auf Tablets */
        width: 100%; /* NEU: Stellt sicher, dass beide 100% Breite einnehmen, wenn gestapelt */
        flex: none; /* NEU: Deaktiviert flex-Verhalten, damit width: 100% wirkt */
    }
    .contact-hours h2 {
        font-size: 2em;
        text-align: center;
    }
    .contact-hours .heading-line {
        margin: 0 auto 20px auto;
    }
    .contact-hours p {
        text-align: center;
    }
    .contact-details li,
    .hours-list li {
        justify-content: center;
        text-align: center;
    }
    .hours-list li span:first-child {
        flex-basis: auto;
        margin-right: 10px;
    }
    .btn-contact-block {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
    }
    /* Beibehalten: Zentrierung für "Our Offerings" auf Tablets/kleinen Desktops */
    .our-offerings .container h2 {
        text-align: center;
        font-size: 2em;
        margin-bottom: 20px;
    }
    .our-offerings .container h2::before {
        margin: 0 auto 10px auto;
        left: 50%;
        transform: translateX(-50%);
        width: 50px;
        height: 2px;
    }

    .flip-card {
        height: 280px;
    }
    .card-title {
        font-size: 1.2em;
    }
    .flip-card-back h3 {
        font-size: 1.3em;
    }
    .flip-card-back p {
        font-size: 0.9em;
    }
    .btn-flip-card {
        padding: 8px 18px;
        font-size: 0.9em;
    }
}

@media (max-width: 768px) {
    .contact-hours {
        padding: 60px 0;
    }
    .contact-info-block,
    .opening-hours-block {
        padding: 25px;
        /* width: 100%; und flex: none; sind hier schon von 992px geerbt */
    }
    .contact-hours h2 {
        font-size: 1.8em;
    }
    .contact-hours .heading-line {
        width: 50px;
        margin-bottom: 15px;
    }
    .contact-hours p {
        font-size: 0.95em;
        margin-bottom: 25px;
    }

    /* Standard-Regeln für alle li in contact-details (Telefon & Email) */
    .contact-details li {
        font-size: 0.95em;
        display: flex; /* Stellt sicher, dass die Elemente nebeneinander bleiben */
        align-items: flex-start; /* Icons oben ausrichten */
        margin-bottom: 15px; /* Abstand zwischen den Listenelementen */
    }
    .contact-details li i {
        font-size: 1.2em;
        margin-right: 10px; /* Abstand zwischen Icon und Text */
    }
    /* Setze den span zurück auf inline-block oder ähnliches, um keine Blockbreite zu erzwingen */
    .contact-details li span {
        display: inline-block;
    }


    /* SPEZIELLE REGELN FÜR DEN STANDORT (location-item) */
    .contact-details .location-item {
        flex-direction: column; /* Stapelt Icon und Text vertikal */
        align-items: center; /* Zentriert die Elemente horizontal */
        text-align: center; /* Zentriert den Text unter dem Icon */
        margin-bottom: 20px; /* Mehr Abstand für das Standort-Element */
    }
    .contact-details .location-item i {
        margin-right: 0; /* Entfernt den rechten Margin des Icons */
        margin-bottom: 10px; /* Fügt Abstand zwischen Icon und Text hinzu */
        font-size: 1.8em; /* Macht das Icon größer */
    }
    .contact-details .location-item span {
        display: block; /* Stellt sicher, dass der Text einen eigenen Block einnimmt */
    }


    .hours-list li {
        font-size: 0.95em;
    }
    .map-container iframe {
        height: 250px;
    }
    .hours-list li span:first-child {
        flex-basis: auto;
        margin-right: 8px;
    }
    /* Beibehalten: Zentrierung für "Our Offerings" auf Mobiles */
    .our-offerings .container h2 {
        text-align: center;
        font-size: 1.8em;
        margin-bottom: 15px;
    }
    .our-offerings .container h2::before {
        margin: 0 auto 8px auto;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 1px;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }
    .service-card {
        padding: 20px;
    }
    .service-icon {
        font-size: 1.8em;
    }
    .service-info h4 {
        font-size: 1em;
    }
    .service-info p {
        font-size: 0.85em;
    }
    .service-arrow {
        font-size: 1.2em;
    }
    .flip-card {
        height: 240px;
    }
    .card-title {
        font-size: 1.1em;
    }
    .flip-card-back h3 {
        font-size: 1.2em;
    }
    .flip-card-back p {
        font-size: 0.85em;
    }
    .btn-flip-card {
        padding: 7px 15px;
        font-size: 0.85em;
    }
}

@media (max-width: 480px) {
    .contact-hours {
        padding: 40px 0;
    }
    .contact-info-block,
    .opening-hours-block {
        padding: 20px;
        /* width: 100%; und flex: none; sind hier schon von 992px geerbt */
    }
    .contact-hours h2 {
        font-size: 1.6em;
    }
    .contact-hours .heading-line {
        width: 40px;
        margin-bottom: 10px;
    }

    /* Standard-Regeln für alle li in contact-details (Telefon & Email) auf sehr kleinen Screens */
    .contact-details li {
        margin-bottom: 15px; /* Etwas weniger Abstand auf sehr kleinen Geräten */
    }
    .contact-details li i {
        font-size: 1.1em; /* Icons etwas kleiner für sehr kleine Bildschirme */
        margin-right: 8px;
    }

    /* SPEZIELLE REGELN FÜR DEN STANDORT (location-item) auf sehr kleinen Screens */
    .contact-details .location-item {
        margin-bottom: 20px; /* Behält den größeren Abstand bei */
    }
    .contact-details .location-item i {
        font-size: 1.6em; /* Standort-Icon bleibt größer */
        margin-bottom: 5px; /* Etwas weniger Abstand unter dem Icon */
    }

    .hours-list li span:first-child {
        margin-bottom: 5px;
    }
    .map-container iframe {
        height: 200px;
    }
}









/* --- Latest News Section --- */
.latest-news {
    padding: 80px 0;
    background-color: var(--primary-bg); /* Aus Root */
    text-align: center;
}

.latest-news h2 {
    font-size: 2.8em;
    color: var(--heading-color); /* Aus Root */
    margin-bottom: 10px;
    position: relative;
    padding-bottom: 20px;
}

.latest-news .heading-line {
    width: 60px;
    height: 3px;
    background-color: var(--accent-color); /* Aus Root */
    margin: 0 auto 40px auto;
}

.news-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    justify-content: center;
}

.news-card {
    background-color: var(--secondary-bg); /* Aus Root */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, outline 0.3s ease; /* outline transition hinzugefügt */
    display: flex;
    flex-direction: column;
    outline: 2px solid transparent; /* Für den Fokus-Rahmen */
    outline-offset: 4px; /* Abstand zum Rahmen */
}

/* Hover- und Fokus-Zustand für die gesamte Karte */
.news-card:hover,
.news-card:focus-within { /* Wichtig für Tastatur-Navigation */
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    outline-color: var(--accent-color); /* Fokus-Farbe aus Root */
}

.news-card-image {
    width: 100%;
    height: 200px; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Overlay-Farbe aus Root, 0.7 ist die Transparenz */
    background-color: rgba(var(--dark-overlay-rgb, 0, 0, 0), 0.7); 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    text-align: center;
}

.news-card:hover .news-card-overlay,
.news-card:focus-within .news-card-overlay { /* Fokus-Zustand hinzugefügt */
    opacity: 1;
    visibility: visible;
}

.news-teaser-text {
    color: var(--light-text); /* Aus Root */
    font-size: 1em;
    margin-bottom: 15px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    transition-delay: 0.1s;
}

.news-card:hover .news-teaser-text,
.news-card:focus-within .news-teaser-text { /* Fokus-Zustand hinzugefügt */
    opacity: 1;
    transform: translateY(0);
}

.news-info-link {
    color: var(--accent-color); /* Aus Root */
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95em;
    display: inline-flex;
    align-items: center;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    transition-delay: 0.2s;
}

.news-card:hover .news-info-link,
.news-card:focus-within .news-info-link { /* Fokus-Zustand hinzugefügt */
    opacity: 1;
    transform: translateY(0);
}

.news-info-link::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f054";
    margin-left: 8px;
    font-size: 0.8em;
    transition: transform 0.3s ease;
}

/* Optional: Pfeil-Animation beim Hover oder Fokus über den Link selbst */
.news-info-link:hover::after,
.news-info-link:focus::after { /* Fokus-Zustand hinzugefügt */
    transform: translateX(5px);
}

.news-card h3 {
    font-size: 1.4em;
    color: var(--heading-color); /* Aus Root */
    padding: 15px 20px;
    margin: 0;
    text-align: left;
}

/* --- Responsivität für Latest News --- */
/* ... (Die Media Queries bleiben unverändert, da sie keine direkten Farbanpassungen benötigen, aber die Größen-Anpassungen sind wichtig) ... */

@media (max-width: 992px) {
    /* ... */
}

@media (max-width: 768px) {
    /* ... */
}

@media (max-width: 480px) {
    /* ... */
}














/* --- Section: Image-Text Block --- */
.image-text-block {
    /* Deine vorhandenen Stile für die Sektion */
    padding: 80px 0;
    background-color: var(--background-dark); /* Oder welche Hintergrundfarbe diese Sektion hat */
    position: relative;
    z-index: 1;

    }

.image-text-block .container {
    display: flex;
    align-items: center;
    gap: 40px; /* Abstand zwischen Bild und Text */
}

.image-text-block .image-wrapper {
    flex: 1; /* Nimmt den verbleibenden Platz ein */
    min-width: 50%; /* Bild nimmt mindestens die Hälfte des Platzes ein */
    display: flex;
    justify-content: center; /* Bild zentrieren, falls kleiner */
}

.image-text-block .image-wrapper img {
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* Leicht abgerundete Ecken */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Subtiler Schatten */
    display: block; /* Entfernt unerwünschten Leerraum unter dem Bild */
}

.image-text-block .text-wrapper {
    flex: 1;
    min-width: 50%;
    padding-right: 20px; /* Kleiner Innenabstand zum rechten Rand */
}

.image-text-block .text-wrapper h2 {
    font-size: 2.5em;
    color: var(--primary-text);
    margin-bottom: 10px;
    line-height: 1.2;
}

.image-text-block .text-wrapper .heading-line {
    width: 80px;
    height: 3px;
    background-color: var(--accent-color);
    margin-bottom: 25px;
}

.image-text-block .text-wrapper p {
    font-size: 1.1em;
    color: var(--secondary-text);
    line-height: 1.6;
    margin-bottom: 20px;
}

.image-text-block .text-wrapper .btn-primary {
    display: inline-block;
    background-color: var(--accent-color);
    color: #fff;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 15px; /* Abstand zum Text darüber */
}

.image-text-block .text-wrapper .btn-primary:hover {
    background-color: var(--accent-color-darker);
    transform: translateY(-2px); /* Leichter Hover-Effekt */
}

/* Responsivität für den neuen Content Block */
@media (max-width: 992px) {
    .image-text-block .container {
        flex-direction: column; /* Stapelt Bild und Text untereinander */
        gap: 30px;
    }

    .image-text-block .image-wrapper,
    .image-text-block .text-wrapper {
        min-width: 100%; /* Nehmen volle Breite ein */
        padding-right: 0;
    }

    .image-text-block .text-wrapper {
        text-align: center; /* Text zentrieren, wenn gestapelt */
    }
    
    .image-text-block .text-wrapper .heading-line {
        margin-left: auto;
        margin-right: auto; /* Linie zentrieren */
    }

    .image-text-block .text-wrapper h2 {
        font-size: 2.2em;
    }
}

@media (max-width: 768px) {
    .image-text-block {
        padding: 60px 0;
    }
    .image-text-block .text-wrapper h2 {
        font-size: 2em;
    }
    .image-text-block .text-wrapper p {
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .image-text-block {
        padding: 40px 0;
    }
    .image-text-block .text-wrapper h2 {
        font-size: 1.8em;
    }
}










/* --- Section: Partners --- */
.partners-section {
    background-color: var(--secondary-bg); /* Hintergrundfarbe, passend zu deinem Design */
    padding: 80px 0;
    text-align: center;
}

.partners-section h2 {
    font-size: 2.5em;
    color: var(--primary-text);
    margin-bottom: 10px;
}

.partners-section .heading-line {
    width: 80px;
    height: 3px;
    background-color: var(--accent-color);
    margin: 0 auto 50px auto;
}

.partner-slider-container {
    position: relative;
    max-width: 1200px; /* Max-Breite des Sliders */
    margin: 0 auto;
    padding: 0 40px; /* Platz für Pfeile */
    overflow: hidden; /* Wichtig, damit nur die sichtbaren Logos angezeigt werden */
}

.partner-slider {
    display: flex; /* Logos nebeneinander */
    transition: transform 0.5s ease-in-out; /* Sanfte Übergänge beim Sliden */
    will-change: transform; /* Performance-Optimierung */
}

.partner-item {
    flex: 0 0 25%; /* Zeigt 4 Logos gleichzeitig (100% / 4) */
    max-width: 25%; /* Wichtig für konsistente Breite */
    box-sizing: border-box;
    padding: 20px; /* Innenabstand für jedes Logo */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--background-light); /* Hintergrund für die Partner-Items */
    border-radius: 8px;
    /* Angepasst: Stärkerer Box-Shadow und eine subtile Border */
    box-shadow: 0 6px 15px rgba(0,0,0,0.15); /* Etwas stärkerer Schatten */
    border: 1px solid rgba(0,0,0,0.05); /* Leichte Border zur Abgrenzung */
    margin: 0 10px; /* Abstand zwischen den Logos */
    opacity: 0.9;
    transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; /* Transition für Border-Color hinzugefügt */
}

.partner-item:hover {
    transform: translateY(-5px);
    opacity: 1;
    /* Angepasst: Noch stärkerer Box-Shadow und eine deutlichere Border beim Hover */
    box-shadow: 0 10px 25px rgba(0,0,0,0.25); /* Deutlich stärkerer Schatten beim Hover */
    border-color: var(--accent-color); /* Akzentfarbe für die Border beim Hover */
}

.partner-item img {
    max-width: 120px; /* Größe der Logos */
    height: auto;
    display: block; /* Entfernt zusätzlichen Platz unter dem Bild */
    margin: 0 auto 15px auto;
    filter: grayscale(0%); /* Logos immer farbig */
    opacity: 1; /* Logos immer voll sichtbar */
    transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease; /* Transition behalten */
}

.partner-text {
    margin-top: 10px;
    text-align: center;
}

.partner-text h3 {
    font-size: 1.2em;
    color: var(--primary-text);
    margin-bottom: 5px;
}

.partner-text p {
    font-size: 0.9em;
    color: var(--secondary-text);
    margin-bottom: 15px;
    line-height: 1.4;
}

.btn-partner-link {
    display: inline-block;
    background-color: var(--accent-color);
    color: #fff;
    padding: 8px 18px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.btn-partner-link:hover {
    background-color: var(--accent-color-darker);
}

/* Slider Pfeile */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 15px 10px;
    cursor: pointer;
    z-index: 10;
    font-size: 1.5em;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.slider-arrow:hover {
    background-color: rgba(0,0,0,0.7);
}

.prev-partner {
    left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.next-partner {
    right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Responsivität für Partner-Slider */
@media (max-width: 1200px) {
    .partner-item {
        flex: 0 0 33.33%; /* 3 Logos */
        max-width: 33.33%;
    }
}

@media (max-width: 992px) {
    .partners-section {
        padding: 60px 0;
    }
    .partners-section h2 {
        font-size: 2.2em;
    }
    .partners-section .heading-line {
        margin-bottom: 40px;
    }
    .partner-item {
        flex: 0 0 50%; /* 2 Logos */
        max-width: 50%;
        margin: 0 8px;
    }
    .partner-item img {
        max-width: 100px;
    }
    .slider-arrow {
        padding: 12px 8px;
        font-size: 1.3em;
    }
}

@media (max-width: 768px) {
    .partners-section {
        padding: 50px 0;
    }
    .partners-section h2 {
        font-size: 2em;
    }
    .partners-section .heading-line {
        margin-bottom: 30px;
    }
    .partner-item {
        flex: 0 0 100%; /* 1 Logo */
        max-width: 100%;
        margin: 0 0; /* Kein Seitenabstand mehr, nur durch Padding des Containers */
    }
    .partner-slider-container {
        padding: 0; /* KEIN Padding mehr, da die Pfeile weg sind */
    }
    /* Logos in diesem Modus etwas kleiner, da sie jetzt einzeln sind und mehr Raum haben */
    .partner-item img {
        max-width: 150px; 
    }
    .slider-arrow {
        display: none; /* Pfeile auf Handys und kleineren Tablets ausblenden */
    }
}

@media (max-width: 480px) {
    .partners-section {
        padding: 40px 0;
    }
    .partners-section h2 {
        font-size: 1.8em;
    }
    .partners-section .heading-line {
        margin-bottom: 25px;
    }
    .partner-item {
        padding: 15px;
    }
    .partner-item img {
        max-width: 120px; /* Nochmals etwas kleiner */
    }
}







/* --- Promo Banner Section --- */
.promo-banner {
    background-color: var(--secondary-bg);
    padding: 0;
    margin: 40px auto;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    outline: 2px solid transparent;
    outline-offset: 6px;
    max-width: 1100px;
    z-index: 10;
    box-shadow: 0 4px 10px var(--shadow-color),
                inset 0 15px 30px rgba(0, 0, 0, 0.4);
    transition: transform 0.4s ease-in-out, outline 0.3s ease;
}

/* Hover- und Fokus-Effekte für den gesamten Banner */
.promo-banner:hover,
.promo-banner:focus-within {
    transform: translateY(-5px);
    outline-color: white;
}

.promo-banner .container.promo-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* ANPASSUNG: Deutlich weniger vertikales Padding für einen schlankeren Banner */
    padding: 15px 60px; /* <--- Hier stark reduziert */
    gap: 30px;
    position: relative;
    z-index: 2;
    min-height: 140px; /* <--- Optional: Mindesthöhe weiter reduziert */
}

.promo-text-block {
    flex-grow: 1;
    text-align: left;
    max-width: 650px;
    z-index: 10;
}

.promo-logo {
    width: 300px;
    height: auto;
    display: block;
    transform: rotate(15deg);
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    margin: 0;
}

.promo-banner:hover .promo-logo,
.promo-banner:focus-within .promo-logo {
    transform: rotate(0deg) scale(1.1);
}

.promo-text-block h2 {
    font-size: 2.8em;
    color: var(--heading-color);
    margin-bottom: 15px;
    line-height: 1.2;
}

.promo-text-block p {
    font-size: 1.1em;
    color: var(--primary-text);
    line-height: 1.6;
}

/* --- Scroll Down Arrow (Mobile Only) --- */
.scroll-down-arrow {
    display: none;
    font-size: 1.8em;
    color: var(--accent-color);
    margin: 30px auto 0 auto;
    animation: bounce 1.5s infinite;
    cursor: pointer;
    position: relative;
    width: 1em;
    height: 1em;
    text-align: center;
}

.scroll-down-arrow::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f078";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.promo-svg-wrapper {
    position: relative;
    width: 300px;
    height: 200px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

/* --- Link Overlay (Zur Webseite) --- */
.promo-link-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: white;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 1.3em;
    font-weight: 700;
    opacity: 0;
    visibility: hidden;
    transition: height 0.3s ease-out, opacity 0.3s ease, visibility 0.3s ease;
    z-index: 15;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.promo-banner:hover .promo-link-overlay,
.promo-banner:focus-within .promo-link-overlay {
    height: 40px;
    opacity: 1;
    visibility: visible;
    background-color: white;
    color: black;
}

.promo-link-overlay span {
    display: flex;
    align-items: center;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.promo-banner:hover .promo-link-overlay span,
.promo-banner:focus-within .promo-link-overlay span {
    transform: translateY(0);
    transition-delay: 0.1s;
}

.promo-link-overlay span .promo-arrow {
    margin-left: 15px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f054";
    font-size: 0.7em;
    transform: translateX(0);
    transition: transform 0.3s ease;
    display: inline-block;
    color: inherit;
}

.promo-link-overlay:hover .promo-arrow,
.promo-link-overlay:focus .promo-arrow {
    transform: translateX(8px);
}

/* --- Responsivität für Promo Banner --- */
@media (max-width: 992px) {
    .promo-banner {
        margin: 30px auto;
        max-width: 700px;
    }
    .promo-banner .container.promo-content {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        /* ANPASSUNG: Padding für Handy/Tablet weiter reduziert */
        padding: 10px 30px; /* <--- Hier stark reduziert */
        min-height: auto;
    }

    .promo-svg-wrapper {
        order: -1;
        width: auto;
        height: auto;
        display: block;
        margin-bottom: 20px; /* <--- Hier anpassen: Abstand unter dem SVG-Wrapper (der das Logo enthält) */
    }

    .promo-text-block {
        order: 0;
        max-width: 100%;
        text-align: center;
    }

    .promo-text-block h2 {
        font-size: 2.2em;
    }
    .promo-text-block p {
        font-size: 1em;
    }
    .promo-logo {
        width: 280px;
        margin: 0 auto; /* <--- Hier ist kein margin-bottom spezifisch gesetzt, es wird vom promo-svg-wrapper geerbt */
        transform: none;
        transition: none;
    }
    .promo-banner:hover .promo-logo,
    .promo-banner:focus-within .promo-logo {
        transform: none;
    }

    .scroll-down-arrow {
        display: block;
    }
    .promo-link-overlay {
        font-size: 1.1em;
    }
    .promo-banner:hover .promo-link-overlay,
    .promo-banner:focus-within .promo-link-overlay {
        height: 60px;
        background-color: white;
        color: black;
    }
    .promo-link-overlay span .promo-arrow {
        color: inherit;
    }
}

@media (max-width: 768px) {
    .promo-banner {
        margin: 20px auto;
        border-radius: 8px;
    }
    .promo-banner .container.promo-content {
        /* ANPASSUNG: Padding für kleinere Bildschirme weiter reduziert */
        padding: 8px 20px; /* <--- Hier stark reduziert */
    }
    .promo-text-block h2 {
        font-size: 1.8em;
    }
    .promo-text-block p {
        font-size: 0.95em;
    }
    .promo-logo {
        width: 250px;
        margin: 0 auto 6px auto; /* <--- Hier anpassen: Letzter Wert (15px) ist margin-bottom */
    }
    .promo-svg-wrapper {
        margin-bottom: 6px; /* <--- Hier anpassen: Abstand unter dem SVG-Wrapper */
    }
    .promo-link-overlay {
        font-size: 1em;
    }
    .promo-banner:hover .promo-link-overlay,
    .promo-banner:focus-within .promo-link-overlay {
        height: 50px;
    }
}

@media (max-width: 480px) {
    .promo-banner {
        margin: 15px auto;
        max-width: 90%;
    }
    .promo-banner .container.promo-content {
        /* ANPASSUNG: Padding für sehr kleine Bildschirme weiter reduziert */
        padding: 5px 15px; /* <--- Hier stark reduziert */
    }
    .promo-text-block h2 {
        font-size: 1.5em;
    }
    .promo-text-block p {
        font-size: 0.9em;
    }
    .promo-logo {
        width: 250px;
        margin: 10px auto 0px auto; /* <--- Hier anpassen: Letzter Wert (10px) ist margin-bottom */
    }
    .promo-svg-wrapper {
        margin-bottom: 3px; /* <--- Hier anpassen: Abstand unter dem SVG-Wrapper */
    }
    .scroll-down-arrow {
        font-size: 1.5em;
        margin-top: 20px;
    }
    .promo-link-overlay {
        font-size: 0.9em;
    }
    .promo-banner:hover .promo-link-overlay,
    .promo-banner:focus-within .promo-link-overlay {
        height: 45px;
    }
}


















/* --- Partner Block Styles (Banner-Version) --- */
.our-partners {
    padding: 60px 0;
    background-color: var(--primary-bg); 
    text-align: center;
}

.our-partners .heading-line {
    margin-bottom: 40px;
}

.partner-grid {
    display: grid;
    grid-template-columns: minmax(auto, 1100px); 
    justify-content: center;
    gap: 30px;
}

.partner-card {
    background: var(--secondary-bg-darker);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    padding: 40px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    min-height: 250px; 
    transition: box-shadow 0.3s ease, transform 0.3s ease, outline 0.3s ease, background-color 0.3s ease;
    outline: 2px solid transparent;
    outline-offset: 4px;
}

/* ANPASSUNG: Hintergrund-Icon - Font Awesome 6 */
.partner-card::before {
    content: "\f5ee"; /* Unicode für fa-hand-sparkles */
    font-family: "Font Awesome 6 Free"; /* <--- HIER ANGEPASST FÜR FA6 */
    font-weight: 900; /* Für Solid-Icons (fas) */
    
    position: absolute;
    bottom: -60px; 
    right: -60px; 
    transform: rotate(15deg); 
    font-size: 300px; 
    color: #fff; 
    opacity: 0.05; 
    z-index: 1; 
    transition: opacity 0.3s ease, font-size 0.3s ease, transform 0.3s ease; 
}

/* Icon wird beim Hover etwas sichtbarer, größer und dreht sich vielleicht noch etwas */
.partner-card:hover::before,
.partner-card:focus-within::before {
    opacity: 0.08; 
    font-size: 320px; 
    transform: rotate(18deg); 
}

.partner-card:hover,
.partner-card:focus-within {
    box-shadow: 0 20px 45px rgba(0,0,0,0.8); 
    transform: translateY(-12px); 
    outline-color: var(--accent-color);
    background-color: #050505; 
}

.partner-name {
    font-size: 1.8em; 
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-bottom: 30px; 
    line-height: 1.3;
    z-index: 10; 
    flex-shrink: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); 
    max-width: 800px; 
    padding: 0 20px; 
}

.partner-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px;
    flex-shrink: 0;
}

.partner-logo-wrapper img {
    max-width: 350px; 
    max-height: 180px; 
    height: auto;
    object-fit: contain;
    transition: filter 0.3s ease, opacity 0.3s ease;
    z-index: 10; 
}

/* Hover-Overlay für Verdunkelung und Text/Pfeil */
.partner-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(28, 28, 28, 0.9); 
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    opacity: 0; 
    transition: opacity 0.3s ease;
    z-index: 12; 
    border-radius: 8px;
}

.partner-card:hover .partner-hover-overlay,
.partner-card:focus-within .partner-hover-overlay {
    opacity: 1;
}

.partner-hover-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    transform: translateY(15px); 
    opacity: 0; 
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.partner-card:hover .partner-hover-content,
.partner-card:focus-within .partner-hover-content {
    transform: translateY(0); 
    opacity: 1; 
}

.partner-link-text {
    font-size: 1.2em; 
    font-weight: 700;
    margin-bottom: 8px; 
    text-transform: uppercase;
}

.partner-arrow {
    font-size: 1.8em; 
}

/* Unsichtbarer Link für Barrierefreiheit */
.partner-link {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 15;
    text-decoration: none;
    color: transparent;
    display: block;
    cursor: pointer;
}

/* Media Query für kleinere Bildschirme */
@media (max-width: 850px) {
    .partner-name {
        max-width: 100%; 
        padding: 0 15px; 
        font-size: 1.6em; 
    }
}


/* --- Footer Styling --- */
footer {
    background-color: var(--secondary-bg-darker); /* Dunklerer Hintergrund für den Footer */
    color: var(--light-text);
    padding-top: 60px; /* Padding oben */
    position: relative; /* Beibehalten für zukünftige Erweiterungen, falls gewünscht */
    overflow: hidden; /* Beibehalten */
    display: flex; /* Flexbox für Hauptinhalt und Copyright */
    flex-direction: column; /* Stapelt Inhalt und Copyright */
    min-height: 200px; /* Mindesthöhe für den Footer */
    z-index: 1; /* Sicherstellen, dass der Footer über dem restlichen Inhalt liegt */
}

/* Entferne das ::before Pseudo-Element, da wir das Hintergrundbild weglassen */
footer::before {
    content: none; /* Deaktiviert das Pseudo-Element */
}

footer .container {
    display: flex;
    justify-content: space-between; /* Abstand zwischen den Spalten */
    flex-wrap: wrap; /* Ermöglicht Umbruch auf kleineren Bildschirmen */
    gap: 100px; /* Abstand zwischen den Spalten - Hier angepasst */
    padding-bottom: 40px; /* Abstand zwischen Spalten und Copyright-Bereich */
}

.footer-column {
    flex: 1; /* Gleichmäßige Verteilung des Platzes */
    min-width: 250px; /* Mindestbreite, bevor Spalten umbrechen */
    /* Standardmäßig linksbündig */
    text-align: left;
}

/* Spezifische Ausrichtung für die mittlere Social-Media-Spalte */
.footer-column.footer-social-centered {
    text-align: center;
}

/* Spezifische Ausrichtung für die rechte Datenschutz-Spalte */
.footer-column.footer-legal {
    text-align: right;
}

.footer-column h3 {
    font-size: 1.4em;
    color: var(--accent-color); /* Akzentfarbe für Überschriften */
    margin-bottom: 25px;
    position: relative;
}

/* Unterstreichung für Footer-Überschriften */
.footer-column h3::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background-color: var(--light-text); /* Helle Linie unter Überschrift */
    margin-top: 8px;
    /* Angepasst für Ausrichtung der Linie */
    margin-left: 0; /* Standard linksbündig */
}

/* Linie der zentrierten Spalte zentrieren */
.footer-column.footer-social-centered h3::after {
    margin-left: auto;
    margin-right: auto;
}

/* Linie der rechtsbündigen Spalte rechts ausrichten */
.footer-column.footer-legal h3::after {
    margin-left: auto;
    margin-right: 0;
}


/* Kontaktinformationen */
.footer-contact ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact ul li {
    display: flex; /* Für Icon und Text nebeneinander */
    align-items: flex-start; /* Beibehalten für Desktop-Ansicht */
    margin-bottom: 15px;
    line-height: 1.5;
}

.footer-contact ul li i {
    color: var(--accent-color);
    font-size: 1.1em;
    margin-right: 10px;
    flex-shrink: 0;
    padding-top: 2px;
}

.footer-contact ul li a {
    color: var(--light-text);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-contact ul li a:hover {
    color: var(--accent-color);
}

/* Social Media Icons */
.footer-social-centered .social-icons {
    margin-top: 15px;
    display: flex; /* Icons nebeneinander */
    justify-content: center; /* Icons zentrieren */
    gap: 15px;
}

.footer-social-centered .social-icons a {
    color: var(--light-text);
    font-size: 1.8em;
    width: 45px;
    height: 45px;
    border: 1px solid var(--light-text-transparent);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.footer-social-centered .social-icons a:hover {
    background-color: var(--accent-color);
    color: var(--primary-dark-bg);
    border-color: var(--accent-color);
}

/* Datenschutz / Impressum Links */
.footer-legal .legal-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-legal .legal-links li {
    margin-bottom: 12px;
}

.footer-legal .legal-links li a {
    color: var(--light-text);
    text-decoration: none;
    font-weight: 300;
    transition: color 0.3s ease, transform 0.2s ease;
    display: inline-block;
}

.footer-legal .legal-links li a:hover {
    color: var(--accent-color);
    transform: translateX(-5px); /* Rechtsbündig: Slide nach links */
}


/* Unterer Bereich des Footers (Copyright) */
.footer-bottom {
    text-align: center;
    padding: 30px 0; /* Padding für den Copyright-Bereich */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Dezente Trennlinie */
    flex-shrink: 0; /* Verhindert, dass dieser Bereich schrumpft */
    z-index: 1; /* Sicherstellen, dass es über dem Hintergrund liegt */
    position: relative; /* Für den Z-Index im Flex-Kontext */
}

.footer-bottom p {
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

@media (max-width: 980px) { /* WICHTIG: Breakpoint auf 980px geändert */
    footer {
        padding-top: 40px;
        width: 100%;
        display: flex;
        flex-direction: column; /* Auch den Footer selbst als Spalte behandeln, um alles zu zentrieren */
        align-items: center; /* Zentriert den Inhalt des Footers horizontal */
    }

    footer .container {
        flex-direction: column;
        align-items: center; /* Zentriert die gestapelten Spalten im Container */
        padding-bottom: 30px;
        gap: 40px; /* Reduzierter Abstand zwischen den gestapelten Spalten für Mobilgeräte */
        width: 100%; /* Stellt sicher, dass der Container die volle Breite nutzt für Zentrierung */
        max-width: 500px; /* Optional: Setze eine maximale Breite für den Container, um ihn auf größeren Tablets lesbar zu halten */
    }

    .footer-column {
        min-width: 100%; /* Jede Spalte volle Breite */
        max-width: 300px; /* Optional: Maximale Breite für die Lesbarkeit der einzelnen Spalten */
        margin-left: auto; /* Zentriert die Spalte selbst */
        margin-right: auto; /* Zentriert die Spalte selbst */
        margin-bottom: 0; /* Abstand wird nun durch gap auf container geregelt */
        text-align: center; /* Alle Spalten zentriert auf kleineren Bildschirmen */
    }
    
    /* WICHTIGE ÄNDERUNG: Überschriften und deren Unterstriche in der mobilen Ansicht zentrieren */
    .footer-column h3 {
        text-align: center; /* Überschrift zentrieren */
    }
    .footer-column h3::after {
        margin-left: auto;
        margin-right: auto; /* Linie unter der Überschrift zentrieren */
    }

    /* *************************************************************** */
    /* HIER IST DIE WICHTIGE ZUSÄTZLICHE REGEL ODER ANPASSUNG */
    /* Überschreibe die rechtsbündige Ausrichtung der Linie für mobile Ansichten */
    .footer-column.footer-legal h3::after {
        margin-left: auto; /* Stellt sicher, dass es auf auto zurückgesetzt wird */
        margin-right: auto; /* Stellt sicher, dass es auf auto zurückgesetzt wird */
    }
    /* *************************************************************** */


    /* Anpassung für Footer Kontakt-Icons und Text */
    .footer-contact ul li {
        flex-direction: column; /* Icon und Text untereinander */
        align-items: center; /* Horizontale Zentrierung des gesamten Blocks */
        text-align: center; /* Text zentrieren */
        margin-bottom: 15px; /* Abstand zwischen den Kontakt-Items */
    }

    .footer-contact ul li i {
        margin-right: 0; /* Entfernt den seitlichen Abstand des Icons */
        margin-bottom: 8px; /* Abstand zwischen Icon und Text */
        font-size: 1.8em; /* Macht die Icons etwas größer für bessere Sichtbarkeit */
    }

    .footer-contact ul li span {
        display: block; /* Stellt sicher, dass der Text einen eigenen Block einnimmt */
    }
    
    /* Inhalt der Datenschutz-Links zentrieren */
    .footer-legal .legal-links {
        display: flex; /* Liste zu Flexbox machen */
        flex-direction: column; /* Elemente untereinander anordnen */
        align-items: center;    /* Listenelemente zentrieren */
    }

    .footer-legal .legal-links li a:hover {
        transform: translateX(0); /* Auf Mobilgeräten kein Slide-Effekt */
    }
}

@media (max-width: 480px) {
    footer {
        padding-top: 30px;
    }
    .footer-column h3 {
        font-size: 1.2em;
    }

    /* Anpassung für Footer Kontakt-Icons auf sehr kleinen Bildschirmen */
    .footer-contact ul li i {
        font-size: 1.6em; /* Icons auf sehr kleinen Geräten etwas kleiner */
        margin-bottom: 5px; /* Etwas weniger Abstand unter dem Icon */
    }

    .footer-social-centered .social-icons a {
        font-size: 1.5em;
        width: 40px;
        height: 40px;
    }
    .footer-bottom {
        padding: 20px 0;
    }
}






/* Media Queries for Responsiveness */
    /* Optional: Feinabstimmung für noch größere Bildschirme, z.B. über 1600px */
@media (min-width: 1600px) {
    .container {
        max-width: 1600px; /* Etwas breiter für sehr große Monitore, aber immer noch kontrolliert */
    }
}

@media (min-width: 993px) { /* Greift ab typischer Desktop-Breite aufwärts */
    .container {
        max-width: 1300px; /* Setze hier deine gewünschte Maximalbreite ein */
        /* Beispiel: Wenn es jetzt 1400px sind, versuche 1200px oder 1100px. */
        /* Wenn es bisher keine max-width auf Desktop gab, füge sie hier ein. */
        width: 100%; /* Stellt sicher, dass es sich anpasst, wenn kleiner als max-width */
        margin: 0 auto; /* Zentriert den Container */
        padding: 0 20px; /* Optional: Fügt etwas horizontalen Innenabstand hinzu */
    }
    }

@media (max-width: 768px) {

    .main-header {
        padding: 20px 0;
    }
    .main-nav .logo img {
        height: 60px; /* Logo auch mobil etwas größer */
    }
    .main-header.scrolled .main-nav .logo img {
        height: 40px;
    }
    .desktop-nav {
        display: none;
    }

    .hamburger-menu {
        display: flex;
    }

    .mobile-menu-content {
        width: 70%;
    }

    .hero-section {
        padding: 120px 20px 80px; /* Für mobil anpassen */
    }
    .hero-section h1 {
        font-size: 2.5em;
    }
    .hero-section p {
        font-size: 1.1em;
    }
    .mobile-menu-content .close-btn {
        font-size: 2em; /* Schließen-Button mobil kleiner */
        top: 20px;
        right: 20px;
    }
}

@media (max-width: 480px) {

    .main-header {
        padding: 15px 0;
    }
    .main-nav .logo img {
        height: 45px;
    }
    .mobile-menu-content {
        width: 85%;
    }

    .hero-section {
        padding: 90px 20px 60px;
    }
    .hero-section h1 {
        font-size: 2em;
    }
    .hero-section p {
        font-size: 0.9em;
    }
    .btn-primary, .btn-secondary {
        padding: 12px 25px; /* Buttons mobil kleiner */
        font-size: 0.9em;
    }
    .mobile-menu-content ul li a {
        font-size: 1.3em;
    }
}


/* Back to Top Button */
.back-to-top {
    position: fixed; /* Fixiert die Position im Viewport */
    bottom: 30px; /* Abstand vom unteren Rand */
    right: 30px; /* Abstand vom rechten Rand */
    background-color: var(--accent-color); /* Deine Akzentfarbe */
    color: var(--light-text); /* Helle Textfarbe für den Pfeil */
    width: 50px; /* Breite des Kreises */
    height: 50px; /* Höhe des Kreises */
    border-radius: 50%; /* Macht das Element rund */
    display: flex; /* Für die Zentrierung des Pfeils */
    align-items: center; /* Zentriert den Pfeil vertikal */
    justify-content: center; /* Zentriert den Pfeil horizontal */
    font-size: 1.5em; /* Größe des Pfeil-Icons */
    text-decoration: none; /* Entfernt die Unterstreichung des Links */
    opacity: 0; /* Standardmäßig unsichtbar */
    visibility: hidden; /* Standardmäßig nicht interaktiv */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, background-color 0.3s ease; /* Sanfte Übergänge */
    z-index: 1000; /* Stellt sicher, dass der Button über anderen Inhalten liegt */
    box-shadow: 0 4px 10px rgba(var(--dark-overlay-rgb), 0.3); /* Leichter Schatten */
}

.back-to-top:hover {
    background-color: var(--accent-color-darker); /* Dunklere Akzentfarbe beim Hover */
    transform: translateY(-3px); /* Leichter Hoch-Effekt beim Hover */
    box-shadow: 0 6px 15px rgba(var(--dark-overlay-rgb), 0.4); /* Stärkerer Schatten beim Hover */
}

/* Klasse, die per JavaScript hinzugefügt wird, um den Button anzuzeigen */
.back-to-top.show {
    opacity: 1;
    visibility: visible;
}














/* Custom Styles for Contact Page & About Us Page Hero */

/* Hero Section specific to contact/about pages */
.page-hero {
    background-size: cover;
    background-position: center;
    min-height: 40vh; /* Adjust as needed */
    display: flex;
    align-items: center; /* Vertically centers content */
    justify-content: center; /* Horizontally centers content */
    color: var(--light-text);
    text-align: center;
    position: relative;
    /* Remove padding here, we'll control it with responsive padding below */
    padding: 80px 20px; /* Default padding for desktop. Adjust '80px' as needed. */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4);
}

.page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--dark-overlay-rgb), 0.5);
    z-index: 1;
}

.page-hero .hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    width: 100%; /* Ensure it takes full width within padding */
    padding-top: 0; /* Reset specific padding from earlier attempts */
    padding-bottom: 0; /* Reset specific padding from earlier attempts */
}

.page-hero h1 {
    font-size: 3.8em; /* Slightly larger heading */
    margin-bottom: 15px;
    color: var(--primary-text);
    text-shadow: 2px 2px 4px rgba(var(--dark-overlay-rgb), 0.6);
}

.page-hero p {
    font-size: 1.4em; /* Slightly larger text */
    line-height: 1.5;
    text-shadow: 1px 1px 3px rgba(var(--dark-overlay-rgb), 0.5);
}

/* General contact section styling (no changes here as per your request, just including for context) */
.contact-section {
    padding: 60px 0;
    background: var(--background-dark);
}

.contact-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
}

/* Standard (Desktop) Layout für die inneren Wrapper */
.contact-form-map-wrapper {
    display: flex; /* Flex-Container für Formular und Map */
    flex-direction: column; /* Stapelt Formular und Map vertikal */
    gap: 40px; /* Abstand zwischen Formular und Map */
}

.contact-info-wrapper {
    display: flex; /* Flex-Container für Kontaktdaten und Öffnungszeiten */
    flex-direction: column; /* Stapelt Kontaktdaten und Öffnungszeiten vertikal */
    gap: 40px; /* Abstand zwischen Kontaktdaten und Öffnungszeiten */
}

/* --- Media Queries --- */

@media (min-width: 992px) {
    .contact-grid {
        grid-template-columns: 2fr 1fr;
    }
    .contact-info-map-wrapper {
        grid-template-columns: 1fr; /* Stack info and map on large screens again, but within their 1/3 column */
        gap: 40px;
    }
    /* Desktop hero h1 size remains at 3.8em, no override needed here */
}

@media (max-width: 991px) { /* Applies to screens smaller than 992px (tablets down) */
    .page-hero {
        /* Reduce min-height or adjust padding for mobile hero to look less "empty" */
        min-height: 30vh; /* Adjust as needed for tablets/mobiles */
        padding: 60px 20px; /* **IMPORTANT:** Control top/bottom padding for mobile hero */
    }
    .page-hero h1 {
        font-size: 2.8em; /* Adjusted size for tablets */
    }
    .page-hero p {
        font-size: 1.2em; /* Adjusted size for tablets */
    }
}

@media (max-width: 767px) { /* Applies to screens smaller than 768px (smaller tablets/phones) */
    .contact-info-map-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Info and map side by side on medium screens */
        gap: 40px;
    }
    .page-hero {
        min-height: 25vh; /* Potentially even shorter for smaller devices */
        padding: 50px 15px; /* Further adjust padding for mobile */
    }
    .page-hero h1 {
        font-size: 2em; /* Smaller heading for phones */
    }
    .page-hero p {
        font-size: 1em; /* Smaller text for phones */
    }
}

@media (max-width: 461px) { /* Applies to screens smaller than 462px (most phones) */
    .contact-info-map-wrapper {
        grid-template-columns: 1fr; /* Stack info and map on small phones */
        gap: 30px;
    }
    .page-hero {
        min-height: 40vh; /* Very small height for small phones */
        padding: 40px 10px; /* Minimal padding for very small screens */
    }
    .page-hero h1 {
        font-size: 1.8em; /* Even smaller heading for very small phones */
    }
    .page-hero p {
        font-size: 0.9em; /* Even smaller text for very small phones */
    }
}

@media (max-width: 768px) { /* Dies ist ein typischer Breakpoint für Handys */

    /* 1. Haupt-Grid in eine vertikale Flexbox umwandeln */
    .contact-grid {
        display: flex;
        flex-direction: column; /* Stapelt die beiden Haupt-Wrapper untereinander */
        gap: 50px; /* Etwas mehr Platz zwischen den Hauptblöcken auf Mobil */
    }

    /* 2. Reihenfolge der Haupt-Wrapper im .contact-grid für Mobil */
    /* Die .contact-info-wrapper kommt zuerst (enthält Kontaktdaten & Öffnungszeiten) */
    .contact-info-wrapper {
        order: 1;
    }

    /* Die .contact-form-map-wrapper kommt danach (enthält Formular & Map) */
    .contact-form-map-wrapper {
        order: 2;
    }

    /* 3. Reihenfolge der Elemente innerhalb von .contact-info-wrapper für Mobil */
    /* (Kontaktdaten und Öffnungszeiten) */
    .contact-info-wrapper > .contact-card:first-of-type {
        order: 1; /* Macht 'Direkter Kontakt' (Kontaktdaten) zum ersten Element */
    }

    .contact-info-wrapper > .contact-card:last-of-type {
        order: 2; /* Macht 'Unsere Öffnungszeiten' zum zweiten Element */
    }

    /* 4. Reihenfolge der Elemente innerhalb von .contact-form-map-wrapper für Mobil */
    /* (Kontaktformular und Map) */
    .contact-form-wrapper {
        order: 1; /* Macht 'Senden Sie uns eine Nachricht' (Formular) zum ersten Element */
    }

    .map-container {
        order: 2; /* Macht die Map zum zweiten Element */
    }
}

/* Styling for the form wrapper and contact cards */
.contact-form-wrapper,
.contact-card {
    background: var(--secondary-bg-darker);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(var(--dark-overlay-rgb), 0.2); /* Using dark-overlay-rgb for consistency */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-form-wrapper:hover,
.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(var(--dark-overlay-rgb), 0.3); /* Using dark-overlay-rgb */
}

.contact-form-wrapper h2,
.contact-card h2 {
    color: var(--accent-color); /* Changed from accent-color-darker to accent-color for headings */
    margin-top: 0;
    font-size: 2em;
    font-weight: 600;
}

.contact-card h3.opening-hours-title { /* Specific style for opening hours title */
    margin-top: 30px;
    margin-bottom: 15px;
    color: var(--accent-color); /* Changed from accent-color-darker to accent-color */
    font-size: 1.5em;
    font-weight: 500;
}

/* Form specific styles */
.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--primary-text);
    font-size: 0.95em;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-divider); /* Changed from #ddd to border-divider */
    background-color: var(--background-dark); /* Ensure background is dark for contrast */
    border-radius: 6px;
    font-size: 1em;
    color: var(--light-text);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form textarea:focus {
    border-color: var(--accent-color); /* Changed from accent-color-darker to accent-color */
    /* Improved focus outline for accessibility */
    outline: 2px solid var(--accent-color); /* Stronger, more visible outline */
    outline-offset: 2px; /* Small gap between element and outline */
    box-shadow: 0 0 0 4px rgba(var(--accent-color-rgb), 0.4); /* Larger, more prominent glow */
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-form .required {
    color: var(--accent-color); /* Changed from #dc3545 to accent-color */
    margin-left: 3px;
}

.contact-form .privacy-checkbox {
    display: flex;
    align-items: flex-start;
    margin-top: 25px;
    margin-bottom: 25px;
}

.contact-form .privacy-checkbox input[type="checkbox"] {
    margin-top: 5px;
    margin-right: 10px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--accent-color); /* Ensures checkbox itself takes accent color if browser supports */
}

.contact-form .privacy-checkbox label {
    font-weight: normal;
    font-size: 0.9em;
    color: var(--secondary-text); /* Changed from #666 to secondary-text */
    margin-bottom: 0;
}

.contact-form .privacy-checkbox label a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
}

.contact-form .privacy-checkbox label a:hover {
    text-decoration: underline;
}

/* Captcha specific styling */
.captcha-group {
    background-color: var(--secondary-bg-darker); /* Changed from #f0f0f0 to secondary-bg-darker */
    padding: 15px;
    border-radius: 6px;
    border: 1px dashed var(--border-divider); /* Changed from #ccc to border-divider */
}

.captcha-group label {
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--primary-text); /* Ensure good contrast for label */
}

.captcha-group input {
    max-width: 150px;
    background-color: var(--background-dark); /* Ensure input background is dark */
    color: var(--light-text); /* Ensure input text is light */
    border: 1px solid var(--border-divider); /* Consistent border */
}

.error-message {
    color: var(--accent-color); /* Changed from #dc3545 to accent-color */
    font-size: 0.85em;
    margin-top: 5px;
    display: none;
}

.form-message {
    margin-top: 20px;
    padding: 10px 15px;
    border-radius: 5px;
    font-weight: 600;
    text-align: center;
    display: none;
}

.form-message.success {
    background-color: rgba(60, 179, 113, 0.2); /* Kept as green for success, semi-transparent */
    color: #3cb371; /* Kept as mediumseagreen for success */
    border: 1px solid #3cb371;
}

.form-message.error {
    background-color: rgba(var(--accent-color-rgb), 0.2); /* Using accent-color-rgb with transparency */
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
}

.btn-primary2 {
    display: inline-block;
    background-color: var(--accent-color);
    color: var(--light-text);
    padding: 12px 25px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 100%;
    margin-top: 15px;
}

.btn-primary2:hover {
    background-color: var(--accent-color-darker);
    transform: translateY(-2px);
}

/* Contact information list styling */
.contact-details {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-details li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    line-height: 1.6;
    color: var(--secondary-text); /* Changed from #444 to secondary-text */
}

.contact-details li i {
    color: var(--accent-color);
    font-size: 1.2em;
    margin-right: 15px;
    flex-shrink: 0;
    padding-top: 2px;
}

.contact-details li a {
    color: var(--accent-color);
    text-decoration: none;
}

.contact-details li a:hover {
    text-decoration: underline;
}

.contact-details .social-links-item {
    display: flex;
    margin-top: 20px;
    gap: 15px;
}

.contact-details .social-links-item i {
    font-size: 1.8em;
    color: var(--secondary-text); /* Changed from #666 to secondary-text */
    transition: color 0.3s ease;
    margin-right: 0;
}

.contact-details .social-links-item a:hover i {
    color: var(--accent-color);
}

/* Opening hours list styling */
.hours-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hours-list li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--border-divider); /* Changed from #eee to border-divider */
    color: var(--secondary-text); /* Changed from #444 to secondary-text */
}

.hours-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.hours-list li span:first-child {
    font-weight: 500;
    color: var(--primary-text); /* Changed from var(--secondary-text) to primary-text for better visibility */
}

/* Map container styling */
.map-container {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(var(--dark-overlay-rgb), 0.2); /* Using dark-overlay-rgb */
    margin-top: 40px;
}

.map-container iframe {
    width: 100%;
    height: 400px;
    display: block;
}





/* Über Uns Seite*/
.section-padding {
    padding: 80px 0;
}

.section-description {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px auto;
    font-size: 1.1em;
    color: var(--light-text-secondary);
}

/* Über Uns Einführung */
.about-intro-section {
    background-color: var(--dark-bg);
}

.about-intro-section .about-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Zwei gleich breite Spalten */
    gap: 50px; /* Abstand zwischen Text und Bild */
    align-items: center; /* Vertikale Zentrierung des Inhalts */
}

.about-intro-section .about-text {
    text-align: left; /* Text standardmäßig linksbündig auf Desktop */
}

.about-intro-section h2 {
    font-size: 2.3em; /* Beispielgröße, passen Sie an Ihre Präferenz an */
    margin-bottom: 20px;
}

.about-intro-section .heading-line {
    width: 60px; /* Beispielbreite der Linie */
    height: 4px;
    background-color: var(--accent-color); /* Ihre Akzentfarbe */
    margin-bottom: 30px;
}

.about-intro-section p {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 15px; /* Abstand zwischen den Absätzen */
}

.about-intro-section .about-image img {
    max-width: 100%;
    height: auto;
    display: block; /* Entfernt zusätzlichen Platz unter dem Bild */
    border-radius: 8px; /* Optional: Abgerundete Ecken */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Optional: Leichter Schatten */
}

@media (max-width: 992px) { /* Beispiel für Tablet-Breakpunkt (typisch) */
    .about-intro-section .about-content-grid {
        grid-template-columns: 1fr; /* Eine einzelne Spalte auf Tablets */
        gap: 30px; /* Reduzierter Abstand, wenn untereinander gestapelt */
    }

    .about-intro-section .about-text {
        text-align: center; /* **Text mittig zentrieren auf Tablet** */
    }

    .about-intro-section h2 {
        font-size: 2.2em; /* Kleinere Überschrift auf Tablets */
    }
        .our-values-section h2{
        font-size: 2.2em;
    }

    .about-intro-section .heading-line {
        margin-left: auto; /* **Linie zentrieren** */
        margin-right: auto; /* **Linie zentrieren** */
    }

    .about-intro-section p {
        font-size: 1em; /* Kleinere Schriftgröße auf Tablets */
        max-width: 600px; /* Optional: Textbreite begrenzen, auch wenn zentriert */
        margin-left: auto; /* **Absatz zentrieren** */
        margin-right: auto; /* **Absatz zentrieren** */
    }

    .about-intro-section .about-image {
        text-align: center; /* Bild-Container zentrieren, falls das Bild nicht 100% Breite hat */
    }
}

@media (max-width: 768px) { /* Spezifisch für kleinere Tablets / größere Handys */
    .about-intro-section h2 {
        font-size: 1.8em;
    }
        .our-values-section h2{
        font-size: 1.8em;
    }

    .about-intro-section p {
        font-size: 0.95em;
    }
}

@media (max-width: 480px) { /* Für Mobiltelefone */
    .about-intro-section h2 {
        font-size: 1.5em;
    }
    .our-values-section h2{
        font-size: 1.5em;
    }
    .about-intro-section .heading-line {
        width: 40px; /* Kürzere Linie auf sehr kleinen Bildschirmen */
    }
}

.about-intro-section p {
    font-size: 1.1em;
    line-height: 1.7;
    margin-bottom: 15px;
    color: var(--light-text-secondary);
}

.about-intro-section p strong {
    color: var(--accent-color); /* Akzentfarbe für wichtige Namen/Worte */
}

.about-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(var(--dark-overlay-rgb), 0.4);
}

/* Unsere Werte Sektion */
.our-values-section {
    background-color: var(--secondary-bg-darker); /* Etwas hellerer Hintergrund */
    background-image: url('../assets/images/pattern-bg.png'); /* Ein subtiles Muster, falls vorhanden */
    background-repeat: repeat;
}

.our-values-section h2 {
    text-align: center;
    color: var(--primary-color);
    font-size: 2.8em;
    margin-bottom: 20px;
}

.our-values-section .heading-line {
    margin: 0 auto 40px auto; /* Zentriert die Linie */
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    padding-top: 20px;
}

.value-card {
    background-color: var(--dark-bg);
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(var(--dark-overlay-rgb), 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.value-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(var(--dark-overlay-rgb), 0.3);
}

.value-icon {
    font-size: 3em;
    color: var(--accent-color);
    margin-bottom: 20px;
}

.value-card h3 {
    font-size: 1.6em;
    color: var(--light-text);
    margin-bottom: 15px;
}

.value-card p {
    font-size: 1em;
    line-height: 1.6;
    color: var(--light-text-secondary);
}


/* Team Slider Sektion */
.team-section {
    background-color: var(--dark-bg);
}

.team-section h2 {
    text-align: center;
    color: var(--primary-color);
    font-size: 2.8em;
    margin-bottom: 20px;
}

.team-section .heading-line {
    margin: 0 auto 40px auto;
}

.team-slider {
    padding: 20px 0; /* Platz für Pfeile und Punkte */
}

.team-member-card {
    background-color: var(--dark-bg-light);
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 4px 15px rgba(var(--dark-overlay-rgb), 0.2);
    margin: 15px; /* Abstand zwischen den Slider-Karten */
    padding-bottom: 20px; /* Platz für Text unten */
}

.team-member-card img {
    width: 100%;
    height: 300px; /* Feste Höhe für Teamfotos */
    object-fit: cover; /* Bildausschnitt anpassen */
    object-position: center top; /* Fokus auf den oberen Teil des Bildes (Gesicht) */
    display: block;
    border-bottom: 3px solid var(--accent-color); /* Akzentlinie unter Bild */
}

.team-member-card h3 {
    font-size: 1.8em;
    color: var(--primary-color);
    margin-top: 20px;
    margin-bottom: 5px;
}

.team-member-card .role {
    font-size: 1.1em;
    color: var(--accent-color);
    font-weight: 600;
    margin-bottom: 15px;
}

.team-member-card .description {
    font-size: 0.95em;
    line-height: 1.6;
    color: var(--light-text-secondary);
    padding: 0 20px;
}

/* Slick Slider Pfeile und Dots anpassen */
.slick-prev:before, .slick-next:before {
    color: var(--primary-color) !important;
    font-size: 30px !important;
}

.slick-dots li button:before {
    font-size: 12px !important;
    color: var(--light-text-secondary) !important;
}

.slick-dots li.slick-active button:before {
    color: var(--accent-color) !important;
}

@media (max-width: 992px) { /* Beispiel für Tablet-Breakpunkt (typisch) */

    .our-values-section h2{
        font-size: 2.5em;
}
    .team-section h2 {
        font-size: 2.5em;
}



}

@media (max-width: 768px) { /* Spezifisch für kleinere Tablets / größere Handys */
        .our-values-section h2{
        font-size: 2.2em;
    }
        .team-section h2 {
        font-size: 2.2em;
}


}

@media (max-width: 480px) { /* Für Mobiltelefone */

    .our-values-section h2{
        font-size: 1.9em;
    }
        .team-section h2 {
        font-size: 2.2em;
}

}







.section-divider {
    border: none;
    border-top: 1px solid var(--border-color); /* Eine feine Linie */
    margin: 80px auto; /* Abstand oben und unten, zentriert */
    width: 80%; /* Breite der Linie */
    max-width: 600px; /* Maximale Breite */
}







/* --- Service Page Specific Styles (Updates) --- */

/* Service Intro Grid Section */
.services-intro-grid-section {
    background: linear-gradient(135deg, var(--background-dark), var(--secondary-bg-darker)); /* Verlauf mit neuen Variablen */
    padding-top: 80px;
    padding-bottom: 80px;
    position: relative;
    overflow: hidden;
    font-family: var(--font-primary); /* Schriftart anwenden */
}

.services-intro-grid-section::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(var(--accent-color-rgb), 0.1) 0%, transparent 70%); /* Akzentfarbe */
    border-radius: 50%;
    filter: blur(50px);
    z-index: 0;
}

.services-intro-grid-section::after {
    content: '';
    position: absolute;
    bottom: -70px;
    right: -70px;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(var(--accent-color-rgb), 0.08) 0%, transparent 70%); /* Leicht abgeschwächte Akzentfarbe */
    border-radius: 50%;
    filter: blur(60px);
    z-index: 0;
}

.services-intro-grid-section .about-intro {
    text-align: center;
    margin-bottom: 60px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    color: var(--primary-text); /* Primärer Text */
    position: relative;
    z-index: 1;
}

.services-intro-grid-section h2{
    color: var(--primary-text); /* Akzentfarbe */
    text-shadow: 0 0 10px rgba(var(--accent-color-rgb), 0.4); /* Akzentfarbe für Glow */
    position: relative;
    z-index: 1;
}
.services-intro-grid-section h3 {
    color: var(--accent-color); /* Akzentfarbe */
    text-shadow: 0 0 10px rgba(var(--accent-color-rgb), 0.4); /* Akzentfarbe für Glow */
    position: relative;
    z-index: 1;
}

.services-grid-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
    align-items: stretch;
    position: relative;
    z-index: 1;
}

.services-grid-overview .service-card {
    background-color: var(--secondary-bg-darker); /* Sekundärer Hintergrund */
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(var(--dark-overlay-rgb), 0.4); /* Schatten mit Dark Overlay RGB */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
    color: var(--secondary-text); /* Sekundärer Text */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s ease, border-color 0.4s ease;
    border: 1px solid var(--border-divider); /* Border Divider */
    height: 100%;
    min-height: 200px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
}

.services-grid-overview .service-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 10% 10%, rgba(var(--accent-color-rgb), 0.05) 0%, transparent 50%); /* Akzentfarbe */
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
}

.services-grid-overview .service-card:hover::after {
    opacity: 1;
}

.services-grid-overview .service-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 15px 35px rgba(var(--dark-overlay-rgb), 0.7); /* Schatten mit Dark Overlay RGB */
    background-color: var(--accent-color-darker); /* Dunklere Akzentfarbe */
    color: var(--primary-text); /* Primärer Text */
    border-color: var(--accent-color); /* Akzentfarbe */
}

/* Akzent-Border beim Hover */
.services-grid-overview .service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    background: linear-gradient(to bottom, var(--accent-color), var(--accent-color-darker)); /* Verlauf mit Akzentfarben */
    height: 100%;
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    pointer-events: none;
    z-index: 2;
}

.services-grid-overview .service-card:hover::before {
    transform: translateX(0);
}

/* Inhalte der Karte für z-index */
.services-grid-overview .service-card > div {
    position: relative;
    z-index: 3;
}
.service-icon img {
    width: 100%; /* Oder eine feste Größe, z.B. 60px */
    height: auto; /* Behält das Seitenverhältnis bei */
    max-width: 60px; /* Beispiel: Maximale Breite für das Icon */
    display: block; /* Entfernt zusätzlichen Leerraum unter dem Bild */
    margin: 0 auto; /* Zentriert das Icon horizontal */
}
.services-grid-overview .service-icon {
    font-size: 3.5em;
    color: var(--accent-color); /* Akzentfarbe */
    margin-bottom: 20px;
    width: 100%;
    text-align: left;
    transition: color 0.3s ease, transform 0.3s ease;
}

.services-grid-overview .service-card:hover .service-icon {
    color: var(--primary-text); /* Primärer Text beim Hover */
    transform: scale(1.1);
}

.services-grid-overview .service-info {
    flex-grow: 1;
    margin-bottom: 15px;
}

.services-grid-overview .service-info h4 {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: var(--primary-text); /* Primärer Text */
    transition: color 0.3s ease;
}

.services-grid-overview .service-card:hover .service-info h4 {
    color: var(--primary-text); /* Primärer Text beim Hover */
}

.services-grid-overview .service-info p {
    font-size: 1.05em;
    line-height: 1.6;
    color: var(--secondary-text); /* Sekundärer Text */
}

.services-grid-overview .service-arrow {
    margin-top: auto;
    align-self: flex-end;
    font-size: 1.8em;
    color: var(--accent-color); /* Akzentfarbe */
    transition: transform 0.3s ease, color 0.3s ease;
}

.services-grid-overview .service-card:hover .service-arrow {
    transform: translateX(12px);
    color: var(--primary-text); /* Primärer Text beim Hover */
}

/* --- Detaillierte Service-Sektionen (WICHTIG für Sichtbarkeit) --- */

.detailed-service-section {
    display: none;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.6s ease-out, max-height 0.8s ease-out, padding 0.8s ease-out;
    padding: 0 20px;
    background: var(--secondary-bg-darker); /* Hintergrundfarbe */
    color: var(--primary-text); /* Primärer Text */
    position: relative;
    font-family: var(--font-primary); /* Schriftart anwenden */
}

.detailed-service-section.active-service {
    display: block;
    opacity: 1;
    max-height: 3000px; /* Eine ausreichend große Höhe, um den Inhalt anzuzeigen */
    padding: 80px 20px;
}

/* Anpassungen für den Inhalt der detaillierten Sektionen */
.detailed-service-section .container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0; /* Vertikales Padding, horizontales Padding wird von der Sektion gehandhabt */
}

.detailed-service-section h2 {
    color: var(--primary-text); /* Primärer Text */
    text-align: center; /* Zentriert den Textinhalt */
    margin-bottom: 30px;
    font-size: 2.8em;
    letter-spacing: 1.5px;
    position: relative;
    padding-bottom: 15px;

    /* **NEU: Flexbox für Icon über Text (Desktop)** */
    display: flex;
    flex-direction: column; /* Stapelt das Icon und den Text vertikal */
    align-items: center; /* Zentriert das Icon und den Text horizontal */
    justify-content: center; /* Vertikale Zentrierung (falls h2 eine feste Höhe hätte) */
}

.detailed-service-section h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: var(--accent-color-darker); /* Dunklere Akzentfarbe für den Unterstrich */
    border-radius: 2px;
}

.detailed-service-section h2 .service-heading-icon {
    /* **ANPASSUNG für SVG: Positionierung und Größe** */
    margin-right: 0; /* Icon sitzt nicht mehr rechts neben dem Text */
    margin-bottom: 10px; /* Abstand zwischen Icon und Text */
    
    /* Eigenschaften für SVG-Größe */
    width: 60px; /* Feste Breite für das Icon, passen Sie diese nach Bedarf an */
    height: auto; /* Behält das Seitenverhältnis bei */

    /* Farbe des SVG über 'fill' steuern, falls das SVG dies zulässt und keine feste Farbe im SVG definiert ist */
    fill: var(--accent-color-darker); 
    
    /* 'color' und 'font-size' sind für Font Awesome Icons; diese werden für SVGs nicht benötigt */
    color: var(--accent-color-darker);
    font-size: 0.9em;

    transition: transform 0.3s ease;
}

.detailed-service-section h2:hover .service-heading-icon {
    transform: rotate(5deg);
}

.detailed-service-section .heading-line {
    display: none; /* Diese Regel bleibt, da der h2::after das Unterstreichen übernimmt */
}

.detailed-service-section p {
    color: var(--secondary-text); /* Sekundärer Text */
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 1.1em;
}

.detailed-service-section ul {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.detailed-service-section ul li {
    margin-bottom: 12px;
    color: var(--primary-text); /* Primärer Text */
    font-size: 1.05em;
    position: relative;
    padding-left: 30px;
}

.detailed-service-section ul li .fas {
    color: var(--accent-color); /* Akzentfarbe */
    margin-right: 10px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1em;
}

/* Image-Text Block im Detailbereich */
.detailed-service-section .image-text-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 50px;
    gap: 40px;
    background-color: var(--secondary-bg-darker); /* Sekundärer Hintergrund */
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(var(--dark-overlay-rgb), 0.4); /* Schatten mit Dark Overlay RGB */
}

.detailed-service-section .image-text-block .image-wrapper {
    flex: 1;
    min-width: 300px;
}

.detailed-service-section .image-text-block .image-wrapper img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(var(--dark-overlay-rgb), 0.5); /* Schatten mit Dark Overlay RGB */
    transition: transform 0.3s ease;
}

.detailed-service-section .image-text-block .image-wrapper img:hover {
    transform: scale(1.02);
}

.detailed-service-section .image-text-block .text-wrapper {
    flex: 2;
    min-width: 300px;
}

.detailed-service-section .image-text-block h3 {
    color: var(--accent-color); /* Akzentfarbe */
    font-size: 1.5em;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border-divider); /* Border Divider */
    padding-bottom: 10px;
}

/* Reverse Layout für Bild-Text Block */
.detailed-service-section .image-text-block.reverse {
    flex-direction: row-reverse;
}

/* Responsive Anpassungen für detaillierte Sektionen */
@media (max-width: 768px) {
    .detailed-service-section.active-service {
        padding: 60px 20px;
    }
    .detailed-service-section h2 {
        font-size: 2.2em;
        /* Sicherstellen, dass Flexbox-Eigenschaften auch hier aktiv sind */
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .detailed-service-section h2 .service-heading-icon {
        display: block; /* Stellt sicher, dass das Icon ein Blockelement ist */
        margin: 0 auto 10px auto; /* Zentriert das Icon und fügt Abstand nach unten hinzu */
        /* width und height können hier für Mobile angepasst werden, falls gewünscht, z.B. */
        /* width: 30px; */
    }
    .detailed-service-section .image-text-block {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }
    .detailed-service-section .image-text-block.reverse {
        flex-direction: column;
    }
    .detailed-service-section .image-text-block .text-wrapper {
        order: 1;
    }
    .detailed-service-section .image-text-block .image-wrapper {
        order: 2;
    }
    .detailed-service-section .image-text-block h3 {
        font-size: 1.6em;
    }
    .detailed-service-section p {
        font-size: 1em;
    }
    .detailed-service-section ul li {
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .detailed-service-section.active-service {
        padding: 40px 15px;
    }
    .detailed-service-section h2 {
        font-size: 1.8em;
    }
    .detailed-service-section .image-text-block h3 {
        font-size: 1.4em;
    }
}

/* Responsive Anpassungen für service-card (Unverändert, da diese gut sind) */
@media (max-width: 768px) {
    .services-grid-overview .service-card {
        flex-direction: row;
        align-items: center;
        text-align: left;
        min-height: unset;
    }
    .services-grid-overview .service-icon {
        margin-bottom: 0;
        margin-right: 15px;
        width: auto;
        text-align: center;
        font-size: 2.8em; /* Diese font-size wirkt sich auf Font Awesome Icons aus, nicht auf SVGs */
    }
    .services-grid-overview .service-info {
        margin-bottom: 0;
    }
    .services-grid-overview .service-arrow {
        margin-top: 0;
        align-self: center;
        font-size: 1.5em;
        transform: none;
    }
    .services-grid-overview .service-card:hover .service-arrow {
        transform: translateX(8px);
    }
}

@media (max-width: 480px) {
    .services-grid-overview .service-card {
        padding: 20px;
    }
    .services-grid-overview .service-icon {
        font-size: 2.5em; /* Diese font-size wirkt sich auf Font Awesome Icons aus, nicht auf SVGs */
    }
    .services-grid-overview .service-info h4 {
        font-size: 1.3em;
    }
    .services-grid-overview .service-info p {
        font-size: 0.95em;
    }
}

/* --- Neue Sektion: Fahrzeugtypen-Reparatur (Immer sichtbar) --- */

.vehicle-types-repair-section {
    background-color: var(--background-dark); /* Hintergrundfarbe */
    color: var(--primary-text); /* Primärer Text */
    position: relative;
    font-family: var(--font-primary); /* Schriftart anwenden */
    /* Optional: Ein subtiles Hintergrundmuster oder Verlauf */
    /* background: radial-gradient(circle at top left, rgba(var(--accent-color-rgb), 0.05) 0%, transparent 60%),
                radial-gradient(circle at bottom right, rgba(var(--accent-color-rgb), 0.05) 0%, transparent 60%),
                var(--background-dark); */
}

.vehicle-types-repair-section .container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0;
}
.container2 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}


.vehicle-types-repair-section h2 {
    color: var(--primary-text); /* Akzentfarbe */
    text-align: center;
    margin-bottom: 30px;
    font-size: 2.8em;
    letter-spacing: 1.5px;
    position: relative;
    padding-bottom: 15px;
}

.vehicle-types-repair-section h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: var(--accent-color-darker); /* Dunklere Akzentfarbe */
    border-radius: 2px;
}

.vehicle-types-repair-section h2 .section-heading-icon {
    margin-right: 20px;
    color: var(--accent-color-darker); /* Dunklere Akzentfarbe */
    font-size: 0.9em;
    transition: transform 0.3s ease;
}

.vehicle-types-repair-section h2:hover .section-heading-icon {
    transform: rotate(-5deg);
}

.vehicle-types-repair-section .heading-line {
    display: none;
}

.vehicle-types-repair-section p {
    color: var(--secondary-text); /* Sekundärer Text */
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 1.1em;
}

.vehicle-types-repair-section ul {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.vehicle-types-repair-section ul li {
    margin-bottom: 12px;
    color: var(--primary-text); /* Primärer Text */
    font-size: 1.05em;
    position: relative;
    padding-left: 30px;
}

.vehicle-types-repair-section ul li .fas {
    color: var(--accent-color); /* Akzentfarbe */
    margin-right: 10px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1em;
}

/* Bild-Text-Block innerhalb der neuen Sektion */
.vehicle-types-repair-section .section-image-text-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 50px;
    gap: 40px;
    background-color: var(--secondary-bg-darker); /* Sekundärer Hintergrund */
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(var(--dark-overlay-rgb), 0.4); /* Schatten mit Dark Overlay RGB */
}

.vehicle-types-repair-section .section-image-text-block .image-wrapper {
    flex: 1;
    min-width: 300px;
}

.vehicle-types-repair-section .section-image-text-block .image-wrapper img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(var(--dark-overlay-rgb), 0.5); /* Schatten mit Dark Overlay RGB */
    transition: transform 0.3s ease;
}

.vehicle-types-repair-section .section-image-text-block .image-wrapper img:hover {
    transform: scale(1.02);
}

.vehicle-types-repair-section .section-image-text-block .text-wrapper {
    flex: 2;
    min-width: 300px;
}

.vehicle-types-repair-section .section-image-text-block h3 {
    color: var(--accent-color); /* Akzentfarbe */
    font-size: 2em;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border-divider); /* Border Divider */
    padding-bottom: 10px;
}

/* Reverse Layout für Bild-Text-Block in dieser Sektion */
.vehicle-types-repair-section .section-image-text-block.reverse {
    flex-direction: row-reverse;
}

/* Responsive Anpassungen für die neue Sektion (Unverändert, da diese gut sind) */
@media (max-width: 768px) {
    .vehicle-types-repair-section {
        padding: 60px 20px;
    }
    .vehicle-types-repair-section h2 {
        font-size: 2.2em;
    }
    .vehicle-types-repair-section h2 .section-heading-icon {
        display: block;
        margin: 0 auto 10px auto;
    }
    .vehicle-types-repair-section .section-image-text-block {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }
    .vehicle-types-repair-section .section-image-text-block.reverse {
        flex-direction: column;
    }
    .vehicle-types-repair-section .section-image-text-block .text-wrapper {
        order: 1;
    }
    .vehicle-types-repair-section .section-image-text-block .image-wrapper {
        order: 2;
    }
    .vehicle-types-repair-section .section-image-text-block h3 {
        font-size: 1.6em;
    }
    .vehicle-types-repair-section p {
        font-size: 1em;
    }
    .vehicle-types-repair-section ul li {
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .vehicle-types-repair-section {
        padding: 40px 15px;
    }
    .vehicle-types-repair-section h2 {
        font-size: 1.8em;
    }
    .vehicle-types-repair-section .section-image-text-block h3 {
        font-size: 1.4em;
    }
}










/* Styling für den Inhalt der Wohnmobil Checkliste-Seite */

/* Allgemeine Container-Anpassungen für den Hauptinhaltsbereich */
.content-page .main-content {
    max-width: 1000px; /* Begrenzt die Breite für bessere Lesbarkeit auf großen Bildschirmen */
    margin: 0 auto; /* Zentriert den Inhaltsblock */
    padding: 25px 0; /* Zusätzliches vertikales Padding innerhalb des Containers */
    color: var(--primary-text); /* Stellt die Textfarbe sicher */
}

.content-page h2 {
    color: var(--primary-text); /* Primäre Textfarbe */
    text-align: center; /* Zentriert die Überschrift */
    margin-top: 50px; /* Abstand nach oben */
    margin-bottom: 30px; /* Abstand zur "heading-line" */
    font-size: 2.8em; /* Deutliche Schriftgröße */
    letter-spacing: 1.5px; /* Leichter Zeichenabstand */
    position: relative;
    padding-bottom: 15px; /* Platz für den Unterstrich */
}

/* Stil für den Unterstrich der h2-Überschrift */
.content-page h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100px; /* Breite des Unterstrichs */
    height: 4px;
    background-color: var(--accent-color-darker); /* Dunklere Akzentfarbe */
    border-radius: 2px;
}

/* Überschriften der Checklisten-Sektionen (h3) */
.content-page .main-content h3 {
    color: var(--accent-color); /* Akzentfarbe für die Überschrift */
    font-size: 2.0em; /* Deutlichere Schriftgröße für Sub-Headings */
    margin-top: 3.5em; /* Mehr Abstand vor neuen Sektionen */
    margin-bottom: 1.2em; /* Abstand nach der Überschrift */
    padding-bottom: 0.6em; /* Padding für den Unterstrich */
    border-bottom: 2px solid var(--border-divider); /* Dezenter Unterstrich */
    position: relative;
    text-align: left; /* Überschriften linksbündig */
    letter-spacing: 0.5px;
}

/* Absätze im Hauptinhalt */
.content-page .main-content p {
    line-height: 1.8; /* Verbesserte Zeilenhöhe für Lesbarkeit */
    margin-bottom: 1.5em; /* Konsistenterer Abstand zwischen Absätzen */
    font-size: 1.1em; /* Einheitliche Schriftgröße */
}

/* Listen (ul) im Hauptinhalt */
.content-page .main-content ul {
    list-style: none; /* Entfernt die Standard-Listenpunkte */
    padding-left: 0; /* Entfernt das Standard-Padding */
    margin-bottom: 2.5em; /* Abstand nach der Liste */
}

/* Listenpunkte (li) im Hauptinhalt */
.content-page .main-content ul li {
    position: relative;
    padding-left: 35px; /* Platz für das benutzerdefinierte Icon */
    margin-bottom: 0.8em; /* Abstand zwischen den Listenpunkten */
    font-size: 1.05em; /* Schriftgröße der Listenpunkte */
    line-height: 1.6; /* Zeilenhöhe für Listenpunkte */
    color: var(--primary-text); /* Stellt die Textfarbe sicher */
}

/* Benutzerdefinierte Icons für Listenpunkte (z.B. Font Awesome Checkmark) */
.content-page .main-content ul li::before {
    content: "\f058"; /* Font Awesome 'check-circle' Icon (unicode) */
    font-family: "Font Awesome 6 Free"; /* Wichtig: Stellt sicher, dass Font Awesome geladen ist */
    font-weight: 900; /* Für die solide Version des Icons */
    color: var(--accent-color); /* Akzentfarbe für das Icon */
    position: absolute;
    left: 0;
    top: 0.1em; /* Vertikale Ausrichtung des Icons */
    font-size: 1.2em; /* Größe des Icons */
}

/* Bilder im Hauptinhalt */
.content-page .main-content img {
    display: block; /* Stellt sicher, dass das Bild als Blockelement behandelt wird */
    max-width: 100%;
    height: auto;
    border-radius: 10px; /* Etwas runderer Rand für Bilder */
    margin: 40px auto; /* Zentriert das Bild und fügt großzügigen vertikalen Abstand hinzu */
    box-shadow: 0 10px 30px rgba(var(--dark-overlay-rgb), 0.35); /* Auffälligerer Schatten */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Sanfte Übergänge */
}

/* Hover-Effekt für Bilder */
.content-page .main-content img:hover {
    transform: translateY(-8px); /* Das Bild schwebt leicht nach oben */
    box-shadow: 0 15px 40px rgba(var(--dark-overlay-rgb), 0.5); /* Schatten wird intensiver */
}

/* Responsive Anpassungen für den Content-Bereich */
@media (max-width: 768px) {
    .content-page .main-content {
        padding: 15px 10px; /* Reduziertes Padding auf kleineren Bildschirmen */
    }
    .content-page h2 {
        font-size: 2.2em;
        margin-top: 40px;
        margin-bottom: 25px;
    }
    .content-page h2::after {
        width: 80px;
    }

    .content-page .main-content h3 {
        font-size: 1.8em;
        margin-top: 2.5em;
        margin-bottom: 1em;
    }

    .content-page .main-content p {
        font-size: 1em;
        line-height: 1.7;
    }

    .content-page .main-content ul li {
        font-size: 0.95em;
        padding-left: 30px;
    }

    .content-page .main-content ul li::before {
        font-size: 1.1em;
        top: 0.1em;
    }

    .content-page .main-content img {
        margin: 30px auto;
    }
}

@media (max-width: 480px) {
    .content-page .main-content {
        padding: 15px 5px;
    }
    .content-page h2 {
        font-size: 1.8em;
        margin-top: 30px;
        margin-bottom: 20px;
        letter-spacing: 1px;
    }
    .content-page h2::after {
        width: 60px;
    }

    .content-page .main-content h3 {
        font-size: 1.6em;
        margin-top: 2em;
    }

    .content-page .main-content p {
        font-size: 0.95em;
    }
}


/* --- Blog Page Specific Styles --- */

/* Hero Section für den Blog-Artikel */
.blog-hero-section {
    background: linear-gradient(135deg, var(--background-dark), var(--secondary-bg-darker));
    padding: 100px 20px 60px; /* Mehr Platz oben */
    text-align: center;
    color: var(--primary-text);
    position: relative;
    overflow: hidden;
    font-family: var(--font-primary);
}

.blog-hero-section::before,
.blog-hero-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
    z-index: 0;
}

.blog-hero-section::before {
    top: -80px;
    left: -80px;
    width: 250px;
    height: 250px;
    background: var(--accent-color);
}

.blog-hero-section::after {
    bottom: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: var(--accent-color-darker);
}

.blog-hero-section .container {
    position: relative;
    z-index: 1;
    /* Angepasst: Für Desktop kann der Hero-Bereich auch breiter sein */
    max-width: 1100px; /* Erhöht die maximale Breite des Hero-Containers */
    margin: 0 auto;
}

.blog-hero-section h1 {
    font-size: 3.5em;
    color: var(--accent-color);
    margin-bottom: 15px;
    text-shadow: 0 0 15px rgba(var(--accent-color-rgb), 0.6);
    line-height: 1.2;
}

.blog-hero-section .subtitle {
    font-size: 1.5em;
    color: var(--secondary-text);
    margin-bottom: 30px;
    font-weight: 300;
}

.blog-hero-section .author-info {
    font-size: 0.95em;
    color: var(--secondary-text);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.blog-hero-section .author-info span {
    display: flex;
    align-items: center;
}

.blog-hero-section .author-info .fas {
    margin-right: 8px;
    color: var(--accent-color);
}

/* Content Section für den Blog-Artikel */
.blog-content-section {
    background-color: var(--background-dark);
    padding: 60px 20px;
    color: var(--primary-text);
    font-family: var(--font-primary);
}

.blog-content-section .container {
    /* Angepasst: Hauptinhaltscontainer breiter für Desktop */
    max-width: 1200px; /* Ermöglicht ein breiteres Layout */
    margin: 0 auto;
}

.blog-article h2 {
    font-size: 2.2em;
    color: var(--primary-text);
    margin-top: 45px;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

.blog-article h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background-color: var(--accent-color-darker);
    border-radius: 2px;
}

.blog-article p {
    font-size: 1.1em;
    line-height: 1.8;
    margin-bottom: 25px;
    color: var(--secondary-text);
}

/* Anpassung für die einzelnen Bild-Text-Blöcke innerhalb des Artikels */
/* Ein generischer Stil, um die Lesbarkeit des Haupttextes zu erhalten, aber Bilder breiter zu machen */
.blog-article img.blog-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 30px 0;
    box-shadow: 0 8px 25px rgba(var(--dark-overlay-rgb), 0.6);
    display: block; /* Zentrierung erleichtern */
    margin-left: auto;
    margin-right: auto;
    transition: transform 0.3s ease-out;
}

.blog-article img.blog-image:hover {
    transform: translateY(-5px); /* Leichter Schwebeeffekt beim Hover */
}

/* Die .large Klasse wird nicht mehr direkt benötigt, da wir .blog-image-text-block verwenden */
/* .blog-article img.blog-image.large {
    max-width: 90%;
} */

.blog-article ul {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.blog-article ul li {
    font-size: 1.05em;
    line-height: 1.6;
    margin-bottom: 10px;
    color: var(--primary-text);
    display: flex;
    align-items: flex-start;
}

.blog-article ul li .fas {
    color: var(--accent-color);
    margin-right: 15px;
    font-size: 1.1em;
    flex-shrink: 0; /* Verhindert Schrumpfen des Icons */
    padding-top: 3px; /* Optische Ausrichtung mit Text */
}

.blog-article .blog-quote {
    background-color: var(--secondary-bg-darker);
    border-left: 5px solid var(--accent-color);
    padding: 25px 30px;
    margin: 40px 0;
    font-style: italic;
    color: var(--primary-text);
    font-size: 1.2em;
    line-height: 1.7;
    border-radius: 0 8px 8px 0; /* Nur rechts abgerundet */
    box-shadow: 0 2px 10px rgba(var(--dark-overlay-rgb), 0.3);
}

/* --- NEU: Blog Image-Text-Block für versetzte Anordnung --- */
.blog-image-text-block {
    display: flex;
    flex-wrap: wrap; /* Ermöglicht das Umbrechen auf kleineren Bildschirmen */
    align-items: center;
    gap: 40px; /* Abstand zwischen Bild und Text */
    margin: 60px auto; /* Abstand zu anderen Inhalten */
    padding: 30px; /* Innenabstand für den Block */
    background-color: var(--secondary-bg-darker);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(var(--dark-overlay-rgb), 0.5);
}

.blog-image-text-block .image-wrapper {
    flex: 1; /* Nimmt einen Teil der Breite ein */
    min-width: 300px; /* Mindestbreite, bevor es umbricht */
    max-width: 50%; /* Max. 50% der Elternelementbreite */
}

.blog-image-text-block .image-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    box-shadow: 0 4px 15px rgba(var(--dark-overlay-rgb), 0.4);
}

.blog-image-text-block .text-wrapper {
    flex: 1.5; /* Nimmt 1.5 Teile der Breite ein (breiter als Bild) */
    min-width: 350px; /* Mindestbreite des Textes */
}

.blog-image-text-block .text-wrapper h3 {
    font-size: 1.8em;
    color: var(--accent-color);
    margin-bottom: 15px;
}

.blog-image-text-block .text-wrapper p {
    font-size: 1em;
    line-height: 1.7;
    color: var(--secondary-text);
}

.blog-image-text-block .text-wrapper ul {
    margin-top: 20px;
}

/* Spezifische Stil für den REVERSE-Block (Bild rechts, Text links) */
.blog-image-text-block.reverse {
    flex-direction: row-reverse; /* Tauscht die Reihenfolge */
}

/* Responsive Anpassungen */
@media (max-width: 1024px) { /* Anpassung für größere Tablets und kleinere Desktops */
    .blog-hero-section .container,
    .blog-content-section .container {
        max-width: 960px; /* Etwas kleiner für Zwischengrößen */
    }
    .blog-image-text-block {
        flex-direction: column; /* Stapeln der Blöcke */
        text-align: center;
        margin: 40px auto;
        padding: 25px;
    }
    .blog-image-text-block.reverse {
        flex-direction: column; /* Auch im Reverse-Modus stapeln */
    }
    .blog-image-text-block .image-wrapper,
    .blog-image-text-block .text-wrapper {
        flex: none; /* Flex-Verhalten aufheben */
        width: 100%; /* Volle Breite */
        min-width: auto;
        max-width: 100%;
    }
    .blog-image-text-block .image-wrapper img {
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .blog-hero-section {
        padding: 80px 20px 40px;
    }
    .blog-hero-section h1 {
        font-size: 2.5em;
    }
    .blog-hero-section .subtitle {
        font-size: 1.2em;
    }
    .blog-hero-section .author-info {
        flex-direction: column;
        gap: 10px;
    }

    .blog-content-section {
        padding: 40px 15px;
    }
    .blog-article h2 {
        font-size: 1.8em;
        margin-top: 30px;
        margin-bottom: 20px;
    }
    .blog-article p {
        font-size: 1em;
        margin-bottom: 20px;
    }
    .blog-article ul li {
        font-size: 0.95em;
    }
    .blog-article .blog-quote {
        padding: 20px 25px;
        font-size: 1.1em;
        margin: 30px 0;
    }

    /* Für kleinere Bildschirme die Blog-Bilder zentrieren und nicht voll ausfüllen */
    .blog-article img.blog-image {
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 480px) {
    .blog-hero-section h1 {
        font-size: 2em;
    }
    .blog-hero-section .subtitle {
        font-size: 1em;
    }
    .blog-content-section {
        padding: 30px 10px;
    }
    .blog-article h2 {
        font-size: 1.6em;
        margin-top: 25px;
        margin-bottom: 15px;
    }
    .blog-image-text-block {
        padding: 15px;
        gap: 15px;
    }
}







/* --- Initialer Cookie-Toast Styling --- */
.initial-cookie-toast {
    display: none; /* Standardmäßig versteckt, wird von JS angezeigt */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--background-dark); /* Hintergrundfarbe aus deinen Variablen */
    color: var(--primary-text); /* Textfarbe aus deinen Variablen */
    padding: 30px 20px; /* Mehr vertikales Padding für Luftigkeit */
    border-top: 1px solid var(--border-divider); /* Dezente obere Trennlinie aus deinen Variablen */
    box-shadow: 0px -8px 25px rgba(var(--dark-overlay-rgb), 0.4); /* Schatten mit deiner Dark Overlay RGB */
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    animation: fadeInBottom 0.7s var(--animation-ease) forwards; /* Animation mit deiner Ease-Kurve */
}

@keyframes fadeInBottom {
    from { opacity: 0; transform: translateY(100px); }
    to { opacity: 1; transform: translateY(0); }
}

.initial-cookie-toast p {
    font-size: 1.05em; /* Etwas größerer Font, relativer zur Basis-Schrift */
    margin-bottom: 25px; /* Mehr Abstand zu den Buttons */
    max-width: 960px; /* Maximale Breite des Textes erhöhen */
    width: 100%;
    font-weight: 400;
    line-height: 1.6; /* Für bessere Lesbarkeit */
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* Text zentrieren */
    font-family: var(--font-primary); /* Deine Schriftart */
}

.toast-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px; /* Einheitlicher und größerer Abstand */
    width: 100%;
    max-width: 800px; /* Maximale Breite für die Button-Gruppe erhöhen */
    margin-left: auto;
    margin-right: auto;
}

.toast-buttons button,
.popup-actions button {
    padding: 15px 30px; /* Größere, klickfreundlichere Buttons */
    border: none;
    cursor: pointer;
    font-size: 1.05em; /* Deutlichere Schriftgröße auf Buttons */
    font-weight: 500;
    border-radius: 10px; /* Etwas stärker abgerundete Ecken */
    transition: all 0.3s var(--animation-ease); /* Übergang für alle Eigenschaften mit deiner Ease-Kurve */
    flex-grow: 1; /* Buttons dürfen wachsen */
    min-width: 180px; /* Mindestbreite, damit Buttons nicht zu klein werden */
    box-shadow: 0 4px 10px rgba(var(--dark-overlay-rgb), 0.2); /* Subtiler Schatten mit deiner Dark Overlay RGB */
    color: var(--primary-text); /* Button-Texte immer Weiß */
    font-family: var(--font-primary); /* Deine Schriftart */
}

.toast-buttons button:hover,
.popup-actions button:hover {
    transform: translateY(-5px) scale(1.02); /* Deutlicherer Lift und leichter Größenzuwachs */
    box-shadow: 0 8px 20px rgba(var(--dark-overlay-rgb), 0.4); /* Stärkerer Schatten */
    filter: brightness(1.2); /* Leichter Helligkeits-Effekt für zusätzliche Flüssigkeit */
}

/* Farbpalette für Buttons */
/* Die Accept-Buttons nutzen deine Akzentfarbe */
.accept-all-toast-btn,
.accept-all-popup-btn {
    background-color: var(--accent-color); /* Primäre Akzentfarbe */
}

/* Die Decline-Buttons nutzen Secondary-BG-Darker für eine neutralere Optik */
.decline-all-toast-btn,
.decline-all-popup-btn {
    background-color: var(--secondary-bg-darker); /* Neutraler, aber sichtbarer Hintergrund */
}

/* Die Einstellungen/Speichern-Buttons nutzen Secondary-Text für einen subtileren Look */
.open-settings-toast-btn,
.save-btn {
    background-color: var(--secondary-bg-darker); /* Eine hellere Nuance für den "Einstellungen" Button */
}

/* Hover-Effekt für die Hintergrundfarbe */
.accept-all-toast-btn:hover,
.accept-all-popup-btn:hover {
    background-color: var(--accent-color-darker); /* Dunklerer Hover-Effekt für Akzentfarbe */
}
.decline-all-toast-btn:hover,
.decline-all-popup-btn:hover {
    background-color: var(--background-dark); /* Leicht dunkler für den Ablehnen-Button */
}
.open-settings-toast-btn:hover,
.save-btn:hover {
    background-color: var(--accent-color); /* Beim Hover zur Hauptakzentfarbe */
}


/* --- Styling für das Popup Overlay --- */
.cookie-details-popup {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: rgba(var(--dark-overlay-rgb), 0.75); /* Overlay mit deiner Dark Overlay RGB */
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.cookie-details-popup.show {
    display: flex;
    animation: fadeInBackground 0.5s var(--animation-ease) forwards; /* Animation mit deiner Ease-Kurve */
}

@keyframes fadeInBackground {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Styling für den Popup-Inhalt */
.popup-content {
    background-color: var(--secondary-bg-darker); /* Hintergrundfarbe des Popups aus deinen Variablen */
    margin: auto;
    padding: 50px; /* Deutlich mehr Padding im Popup */
    border-radius: 15px; /* Stärker abgerundete Ecken */
    width: 95%;
    max-width: 850px; /* Maximale Breite des Popups erhöhen */
    box-shadow: 0 15px 40px rgba(var(--dark-overlay-rgb), 0.6); /* Prominenterer Schatten */
    position: relative;
    color: var(--primary-text); /* Textfarbe aus deinen Variablen */
    animation: slideInFromTop 0.6s var(--animation-ease) forwards; /* Animation mit deiner Ease-Kurve */
    display: flex;
    flex-direction: column;
    gap: 30px; /* Gleichmäßiger Abstand zwischen den Hauptsektionen */
    font-family: var(--font-primary); /* Deine Schriftart */
}

@keyframes slideInFromTop {
    from { transform: translateY(-100px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.close-btn2 {
    color: var(--secondary-text); /* Schließen-X auf Sekundärtextfarbe aus deinen Variablen */
    font-size: 36px; /* Größer und prominenter */
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    top: 20px; /* Position anpassen */
    right: 25px;
    z-index: 10001;
    transition: all 0.3s var(--animation-ease); /* Übergang für Farbe und Transformation mit deiner Ease-Kurve */
}

.close-btn2:hover,
.close-btn2:focus {
    color: var(--accent-color); /* Akzentfarbe beim Hover */
    transform: rotate(90deg) scale(1.1); /* Deutlichere Drehung und leichte Skalierung */
}

.popup-content h2 {
    text-align: center;
    margin-bottom: 20px; /* Etwas mehr Abstand zum Einleitungstext */
    color: var(--accent-color); /* Titel im Popup auf Akzentfarbe setzen */
    font-size: 32px; /* Größerer Titel */
    font-weight: 700;
}

.popup-content p {
    font-size: 1em; /* Konsistentere Schriftgröße */
    margin-bottom: 15px;
    text-align: justify;
    line-height: 1.8; /* Mehr Zeilenabstand für längere Texte */
    color: var(--secondary-text); /* Textfarbe aus deinen Variablen */
}

.toggle-group {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Mehr Abstand zwischen den Toggle-Elementen */
    margin-bottom: 30px; /* Mehr Abstand zum Button-Bereich */
}

.toggle-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px; /* Abstand zwischen Label/Toggle und Beschreibung */
    padding: 15px 0; /* Mehr Padding */
    border-bottom: 1px solid var(--border-divider); /* Dezente Trennlinie aus deinen Variablen */
}

.toggle-item:last-child {
    border-bottom: none; /* Letztes Element ohne Linie */
}

.toggle-item label {
    font-size: 1.1em;
    font-weight: 600; /* Deutlicher fetter */
    color: var(--primary-text); /* Label-Text aus deinen Variablen */
    flex: 1 1 auto;
    min-width: 180px; /* Mindestbreite für das Label erhöhen */
    align-self: center;
}

.toggle-item .description {
    font-size: 0.95em;
    color: var(--secondary-text); /* Beschreibungstext aus deinen Variablen */
    flex: 1 1 100%; /* Nimmt die volle Breite nach dem Label/Toggle ein */
    margin-top: 5px; /* Kleinerer Abstand zur Checkbox */
    line-height: 1.6;
    padding-left: 0;
}

/* Stil für den Toggle-Schalter */
.toggle-item input[type="checkbox"] {
    position: relative;
    width: 55px; /* Breiterer Toggle */
    height: 30px; /* Höherer Toggle */
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--border-divider); /* Hintergrund im deaktivierten Zustand aus deinen Variablen */
    border-radius: 30px;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s var(--animation-ease), box-shadow 0.2s var(--animation-ease); /* Animation mit deiner Ease-Kurve */
    flex-shrink: 0;
    margin-left: auto; /* Schiebt den Toggle nach rechts */
    box-shadow: inset 0 2px 5px rgba(var(--dark-overlay-rgb), 0.2); /* Leichter innerer Schatten */
}

.toggle-item input[type="checkbox"]:checked {
    background-color: var(--accent-color); /* Akzentfarbe, wenn aktiviert */
}

.toggle-item input[type="checkbox"]::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px; /* Größerer Kreis */
    height: 24px; /* Größerer Kreis */
    background-color: var(--primary-text); /* Kreis immer Weiß aus deinen Variablen */
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), background-color 0.2s var(--animation-ease); /* Bouncier Transition mit deiner Ease-Kurve */
    box-shadow: 0 3px 6px rgba(var(--dark-overlay-rgb), 0.25); /* Subtiler Schatten für den Kreis */
}

.toggle-item input[type="checkbox"]:checked::before {
    transform: translateX(25px); /* Längere Verschiebung */
}

.toggle-item input[type="checkbox"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--border-divider); /* Helleres transparentes Schwarz für Disabled */
    box-shadow: inset 0 1px 3px rgba(var(--dark-overlay-rgb), 0.1);
}
.toggle-item input[type="checkbox"]:disabled::before {
    background-color: var(--secondary-text); /* Grauer Kreis für Disabled aus deinen Variablen */
}


.popup-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px; /* Mehr Abstand von den Toggles */
}

/* --- Responsive Anpassungen --- */
@media (max-width: 992px) {
    .initial-cookie-toast p {
        font-size: 1em;
        margin-bottom: 20px;
    }
    .toast-buttons button {
        font-size: 0.95em;
        padding: 13px 25px;
    }
}

@media (max-width: 768px) {
    .initial-cookie-toast {
        padding: 25px 15px;
    }
    .initial-cookie-toast p {
        font-size: 0.95em;
        margin-bottom: 15px;
    }
    .toast-buttons {
        flex-direction: column; /* Buttons untereinander auf Mobilgeräten */
        gap: 15px;
        max-width: none;
    }
    .toast-buttons button {
        width: 100%;
        font-size: 0.9em;
        padding: 12px 15px;
        min-width: unset; /* Auf Mobilgeräten können sie kleiner werden */
    }

    .cookie-details-popup {
        padding: 15px;
    }
    .popup-content {
        padding: 35px 25px;
        gap: 20px;
        border-radius: 10px;
    }
    .popup-content h2 {
        font-size: 26px;
        margin-bottom: 15px;
    }
    .popup-content p {
        font-size: 0.9em;
        margin-bottom: 10px;
    }
    .close-btn2 {
        font-size: 30px;
        top: 15px;
        right: 20px;
    }
    .toggle-group {
        gap: 18px;
        margin-bottom: 20px;
    }
    .toggle-item {
        flex-direction: column; /* Label, Toggle, Beschreibung untereinander */
        align-items: flex-start;
        gap: 10px;
        padding: 12px 0;
    }
    .toggle-item label {
        width: 100%;
        font-size: 1em;
        min-width: unset;
    }
    input[type="checkbox"] {
        margin-left: 0;
        align-self: flex-start;
        width: 50px;
        height: 28px;
    }
    input[type="checkbox"]::before {
        width: 22px;
        height: 22px;
        top: 3px;
        left: 3px;
    }
    input[type="checkbox"]:checked::before {
        transform: translateX(22px);
    }
    .toggle-item .description {
        margin-top: 0;
        font-size: 0.85em;
    }
    .popup-actions {
        flex-direction: column;
        gap: 15px;
        margin-top: 20px;
    }
    .popup-actions button {
        width: 100%;
        font-size: 0.95em;
        padding: 12px 20px;
    }
}

@media (max-width: 480px) {
    .initial-cookie-toast {
        padding: 20px 10px;
    }
    .initial-cookie-toast p {
        font-size: 0.85em;
    }
    .toast-buttons button {
        font-size: 0.8em;
        padding: 10px 10px;
    }

    .popup-content {
        padding: 25px 15px;
        border-radius: 8px;
    }
    .popup-content h2 {
        font-size: 22px;
    }
    .popup-content p {
        font-size: 0.8em;
    }
    .close-btn2 {
        font-size: 26px;
        top: 10px;
        right: 15px;
    }
    .toggle-item label {
        font-size: 0.9em;
    }
    input[type="checkbox"] {
        width: 46px;
        height: 26px;
    }
    input[type="checkbox"]::before {
        width: 20px;
        height: 20px;
        top: 3px;
        left: 3px;
    }
    input[type="checkbox"]:checked::before {
        transform: translateX(20px);
    }
}


/* --- Impressum Page Specific Styling --- */

.impressum-content {
    padding: 60px 20px; /* Mehr vertikales Padding für mehr Luft */
    max-width: 900px; /* Maximale Breite für bessere Lesbarkeit auf großen Bildschirmen */
    margin: 0 auto; /* Zentrieren des Inhalts */
}

.impressum-content .intro-text,
.impressum-content .conclusion-text {
    font-size: 1.15em; /* Größerer Text für Einleitung/Fazit */
    line-height: 1.8;
    margin-bottom: 40px; /* Mehr Abstand zum nächsten Abschnitt */
    text-align: center; /* Zentrierter Text */
    color: var(--secondary-text); /* Etwas weicher als primärer Text */
}

.impressum-content h2 {
    color: var(--accent-color); /* Akzentfarbe für die Hauptüberschriften */
    font-size: 2em; /* Größer und prominenter */
    margin-top: 50px; /* Abstand zur vorherigen Sektion */
    margin-bottom: 20px;
    padding-bottom: 10px; /* Platz für die Unterstreichung */
    border-bottom: 2px solid var(--border-divider); /* Dezente Unterstreichung */
    text-align: left; /* Links ausgerichtet */
    font-weight: 700;
    letter-spacing: 0.5px; /* Leichter Zeichenabstand */
}

.impressum-section {
    margin-bottom: 40px; /* Abstand zwischen den einzelnen Impressum-Blöcken */
    padding-top: 10px; /* Etwas Padding, falls der Rand oben an einer h2 anliegt */
    padding-bottom: 10px;
}

.impressum-section p,
.impressum-section li {
    font-size: 1.05em; /* Etwas größere Schrift für den Fließtext */
    line-height: 1.7; /* Besseres Zeilenspacing */
    color: var(--primary-text); /* Haupttextfarbe */
    margin-bottom: 10px; /* Abstand zwischen Absätzen */
}

.impressum-section p strong {
    color: var(--secondary-text); /* Starke Texte hervorheben */
}

.impressum-section ul {
    list-style: none; /* Keine Standard-Listenpunkte */
    padding: 0;
    margin: 0;
}

.impressum-section ul li {
    margin-bottom: 8px; /* Kleinerer Abstand zwischen Listenelementen */
}

.impressum-section a {
    color: var(--accent-color); /* Links in Akzentfarbe */
    text-decoration: none;
    transition: color 0.3s ease;
}

.impressum-section a:hover {
    color: var(--accent-color-darker); /* Dunkler beim Hover */
    text-decoration: underline; /* Unterstreichung beim Hover */
}

address p {
    font-style: normal; /* Adresse nicht kursiv */
    margin-bottom: 5px; /* Kleinerer Abstand in der Adresse */
}

/* Responsive Anpassungen für Impressum */
@media (max-width: 768px) {
    .impressum-content {
        padding: 40px 15px; /* Weniger Padding auf kleineren Bildschirmen */
    }

    .impressum-content .intro-text,
    .impressum-content .conclusion-text {
        font-size: 1em;
        margin-bottom: 30px;
    }

    .impressum-content h2 {
        font-size: 1.7em;
        margin-top: 40px;
        margin-bottom: 15px;
    }

    .impressum-section {
        margin-bottom: 30px;
    }

    .impressum-section p,
    .impressum-section li {
        font-size: 0.95em;
        line-height: 1.6;
    }
}

@media (max-width: 480px) {
    .impressum-content {
        padding: 30px 10px;
    }

    .impressum-content h2 {
        font-size: 1.5em;
        margin-top: 30px;
    }

    .impressum-section p,
    .impressum-section li {
        font-size: 0.9em;
    }
}

#holiday-popup {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	max-width: 400px;
	background-color: #b4b2b2;
	border: 1px solid #ddd;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	padding: 20px;
	text-align: center;
	z-index: 1000;
	opacity: 0;
	transition: opacity 0.5s ease;
}

#holiday-popup.show {
	opacity: 1;
}

#holiday-popup button {
	background-color: #1c1c1c;
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: 5px;
	cursor: pointer;
	margin-top: 10px;
}

#holiday-popup button:hover {
	background-color: var(--theme-color2);
	color: #1c1c1c;
}

#holiday-popup img {
	width: 250px;
	height: 250px;
	object-fit: cover;
	margin-bottom: 20px;
}

@media (max-width: 768px) {
	#holiday-popup img {
		width: 200px;
		height: 200px;

	}
}
  .footer-right{
    display: block;
  }
  .mobile-logo{
    margin: 0 auto;
  }

  .cookie-banner {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: #1c1c1c;
      color: #767676;
      text-align: center;
      box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.3);
      z-index: 9999;
      padding-left: 150px;
  	  padding-right: 150px;
	  padding-top: 40px;
	  padding-bottom: 40px;
}

/* Für mobile Geräte (max. 600px Breite) */
@media (max-width: 600px) {
  .cookie-banner {
    padding-left: 10px;
    padding-right: 10px;
  }
}

    .cookie-banner p {
      	color: #fff;
    	width: 100%;
    	margin: 0 0 20px;
    	font-size: 16px;
    	line-height: 1.5;
    }

    .cookie-banner a {
      color: #f5821f;
      text-decoration: underline;
    }

    .cookie-buttons {
      display: flex;
      justify-content: center;
      gap: 10px;
    }

.cookie-accept,
.cookie-decline {
  position: relative;
  padding: 10px 20px;
  font-size: 14px;
  border: none;
  border-radius: 5px;
  background-color: #383838;
  color: white;
  overflow: hidden;
  cursor: pointer;
  transform: scale(1);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.cookie-accept:hover,
.cookie-decline:hover {
  transform: scale(1.05); /* Zoom-In-Effekt */
  background-color: #ffffff; /* optional: hellerer Hintergrund beim Hover */
  color: #1c1c1c;
}

.cookie-accept span,
.cookie-decline span {
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
  color: white;
}

.cookie-accept:hover span,
.cookie-decline:hover span {
  color: #1c1c1c;
}









/* Overlay */
#holiday-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 10999;                 /* liegt über der Cookie-Bar (9999) */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#holiday-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

/* Popup */
#holiday-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 400px;
  background-color: #b4b2b2;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  z-index: 11000;                 /* über Overlay & Cookie-Bar */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
#holiday-popup.show {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

#holiday-popup img {
  width: 350px;
  height: 250px;
  object-fit: cover;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  #holiday-popup img {
    width: 300px;
    height: 200px;
  }
}

#holiday-popup button {
  background-color: #1c1c1c;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
}
#holiday-popup button:hover {
  background-color: var(--theme-color2, #f2f2f2);
  color: #1c1c1c;
}

/* Bewegungsreduzierung respektieren */
@media (prefers-reduced-motion: reduce) {
  #holiday-popup, #holiday-backdrop { transition: none; }
}

/* Deine bestehende Cookie-Bar kann bleiben */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; width: 100%;
  background-color: #1c1c1c;
  color: #767676;
  text-align: center;
  box-shadow: 0px -2px 10px rgba(0,0,0,0.3);
  z-index: 9999;
  padding: 40px 150px;
}