/* Grundlegende Einstellungen */
:root {
    --main-bg-color: #FFFFFF; /* Weiß bleibt, wie ursprünglich */
    --sec-bg-color: #8ea1a6;
    --third-bg-color: rgb(17, 24, 39);
    --accent-color: #0077b6; /* Akzentfarbton (etwas dunkleres Blau aus dem Bild) */
    --text-color: #333333; /* Dunkles Grau für Standardtext */
    --light-text-color: #555555; /* Etwas helleres Grau für Subtitle/Beschreibung */
    --box-bg-color: #ffffff; /* Hintergrundfarbe der Infobox */
    --box-shadow-light: 0 4px 15px rgba(0,0,0,0.08); /* Leichter Schatten für Box */
    --circle-color-1: rgba(0, 119, 182, 0.05); /* Sehr helle Akzentfarbe für Kreise (5% Deckkraft) */
    --circle-color-2: rgba(0, 119, 182, 0.03); /* Noch hellere Akzentfarbe für Kreise (3% Deckkraft) */
    --header-height: 80px;
    --font-heading: 'Roboto', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    --font-accent: 'Playfair Display', serif; /* Neue Schriftart für "Moderne" */
    --active-bg-color: #f0f0f0; /* Leicht grauer Hintergrund für aktiven Zustand */
    --focus-outline-color: var(--accent-color); /* Akzentfarbe für Fokus-Outline */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--main-bg-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.no-scroll {
    overflow: hidden;
}

/* --- Barrierefreiheit: Skip Link --- */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--accent-color);
    color: white;
    padding: 8px 12px;
    z-index: 9999;
    transition: top 0.3s ease-in-out;
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid var(--focus-outline-color);
    outline-offset: 2px;
}

/* --- Allgemeine Barrierefreiheit: Fokus-Indikatoren --- */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 3px solid var(--focus-outline-color);
    outline-offset: 2px;
}

/* Optional: Entfernt den Fokus-Indikator, wenn der Benutzer mit der Maus navigiert. */
/* Für maximale Barrierefreiheit oft besser weglassen. */
*:focus:not(:focus-visible) {
    outline: none;
}


.container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Typografie */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-color);
    line-height: 1.2;
}

/* Titel für andere Sektionen */
.section-title {
    font-family: var(--font-accent);
    font-size: 2.5em;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 40px;
    text-align: center;
}

/* Links & Buttons */
a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover {
    color: var(--accent-color);
    opacity: 0.8;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: 600;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    border: none;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 0.9em;
    text-align: center;
    white-space: nowrap;
}

.btn-primary {
    background-color: var(--accent-color);
    color: var(--main-bg-color);
}
.btn-primary:hover {
    background-color: #006096; /* Etwas dunkler beim Hover */
    opacity: 1;
    color: var(--main-bg-color);
}

.btn-secondary {
    background-color: transparent;
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
}
.btn-secondary:hover {
    background-color: var(--accent-color);
    color: var(--main-bg-color);
}

/* Pfeil-Icon für Buttons */
.btn-arrow::after {
    content: '\2192';
    margin-left: 8px;
    font-size: 1.2em;
    line-height: 1;
    transition: margin-left 0.3s ease;
}
.btn-arrow:hover::after {
    margin-left: 12px;
}











/* --- Preloader --- */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(17, 24, 39); /* Hintergrundfarbe des Footers oder eine andere passende Farbe */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Stellt sicher, dass der Preloader über allem liegt */
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out; /* Sanfter Ausblenden-Effekt */
}

#preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Verhindert Interaktionen nach dem Ausblenden */
}

/* Optional: Spinner-Animation */
.spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid #3498db; /* Akzentfarbe des Spinners */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite; /* Spinner-Animation */
}

/* Optional: Logo im Preloader, falls verwendet */
.preloader-logo {
    max-width: 150px; /* Größe des Logos anpassen */
    height: auto;
    animation: pulse 1.5s infinite ease-in-out; /* Sanfte Puls-Animation */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulse {
    0% { transform: scale(0.9); opacity: 0.7; }
    50% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.7; }
}












/* --- Back to Top Button Styling --- */
#backToTopBtn {
    position: fixed;
    bottom: 30px;
    right: 30px; /* Startposition: 30px vom rechten Rand */
    z-index: 99;
    background-color: var(--accent-color);
    color: white;
    width: 50px; /* Breite des Buttons */
    height: 50px; /* Höhe des Buttons (für runden Button) */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.5em; /* Icon-Größe */
    box-shadow: var(--box-shadow-light);
    opacity: 0; /* Anfangszustand: komplett transparent */
    transform: translateY(-100px); /* Startet 100px oberhalb seiner Endposition */
    visibility: hidden; /* Versteckt den Button komplett, wenn nicht sichtbar */
    /* Transition für Opazität (Herabfallen), Transform (Herabfallen) und Right (nach links fahren) */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out, right 0.4s ease-in-out, visibility 0.5s;
}

/* Wenn die Klasse 'show' hinzugefügt wird, erscheint der Button von oben fallend */
#backToTopBtn.show {
    opacity: 1; /* Vollständig sichtbar */
    transform: translateY(0); /* Fällt in seine Endposition */
    visibility: visible; /* Macht den Button sichtbar */
}

/* Neue Klasse für den Effekt, wenn der Button nach links in den Container fährt */
#backToTopBtn.tucked-in {
    /* Diese Berechnung richtet den rechten Rand des Buttons mit dem rechten Innenrand
       des '.container' Elements aus, plus einem kleinen Abstand (15px).
       'calc(50% - 650px)' ist die linke Kante des 1300px breiten Containers.
       '+ 1300px - 20px - 50px - 15px' bewegt es zum rechten Rand des Containers,
       minus Button-Breite (50px) und Wunschabstand (15px).
       Dies funktioniert am besten, wenn der Bildschirm breiter als 1300px ist. */
    right: calc(50% - 650px + 20px + 15px);
}

/* Media Query: Auf kleineren Bildschirmen (<= 1300px), die tucked-in Position zurücksetzen */
/* Dies stellt sicher, dass der Button nicht zu weit nach links rutscht, wenn der Container sich anpasst */
@media (max-width: 1300px) {
    #backToTopBtn.tucked-in {
        right: 30px; /* Button bleibt 30px vom rechten Rand entfernt */
    }
}











/* --- Header Styling --- */
.header {
    background-color: var(--main-bg-color);
    padding: 15px 0; /* Einheitliches Padding, damit nichts springt */
    min-height: var(--header-height); /* Höhe reservieren, damit der Inhalt nicht springt */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Standard Schatten */
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out; /* Smooth transition */
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header .logo img {
    max-height: 120px; /* Larger default logo */
    max-width: 260px;
    width: auto; /* Behält das Seitenverhältnis bei */
    display: block; /* Entfernt zusätzlichen Platz unter dem Bild */
    padding: 5px 0; /* Optional: etwas vertikaler Abstand */
}
.header .logo a {
    color: var(--text-color);
}
.header .logo span {
    font-size: 0.7em;
    display: block;
    color: var(--light-text-color);
}

.header-right-elements {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* --- Hauptnavigation (Standard: Desktop) --- */
.main-nav ul {
    list-style: none;
    display: flex;
}
.main-nav ul li {
    margin-left: 30px;
}
.main-nav ul li a {
    color: var(--text-color);
    font-weight: 600;
    padding: 5px 0;
    position: relative;
    white-space: nowrap;
    transition: color 0.3s ease, background-color 0.3s ease;
}
.main-nav ul li a:hover {
    color: var(--accent-color);
}

/* Active Zustand für Desktop-Navigation */
.main-nav ul li a.active {
    color: var(--accent-color);
    background-color: transparent;
}
.main-nav ul li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 3px;
    background-color: var(--accent-color);
    transition: width 0.3s ease;
}
.main-nav ul li a.active::after,
.main-nav ul li a:hover::after {
    width: 100%;
}

.header-contact {
    display: flex;
    align-items: center;
    gap: 20px;
}
.header-contact .phone-number {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--accent-color);
    white-space: nowrap;
}

/* Button-Sichtbarkeit für Desktop und Mobile */
.mobile-only-btn {
    display: none;
}
.desktop-only-btn {
    display: block;
}


/* --- Hamburger-Menü Icon (Standard: Ausgeblendet) --- */
.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 20px;
    z-index: 1001;
}
.hamburger-menu span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: rgba(51, 51, 51, 0.6);
    border-radius: 1px;
    transition: all 0.3s ease-in-out;
    transform-origin: 1px;
}

/* Hamburger-Animation */
.hamburger-menu.active span:nth-child(1) {
    transform: rotate(45deg);
}
.hamburger-menu.active span:nth-child(2) {
    opacity: 0;
    transform: translateX(20px);
}
.hamburger-menu.active span:nth-child(3) {
    transform: rotate(-45deg);
}

/* --- Hero Sektion Styling (Angepasst an Bildstil) --- */
/* Keyframes für das Einfaden und leichte Hochgleiten */
@keyframes fadeInSlideUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Klasse für Elemente, die beim Laden animiert werden sollen */
.animate-onload {
    opacity: 0; /* Standardmäßig ausgeblendet */
    transform: translateY(20px); /* Leicht nach unten verschoben */
    animation: fadeInSlideUp 0.8s ease-out forwards; /* Standardanimation */
}

/* Utility-Klassen für unterschiedliche Verzögerungen */
.animation-delay-1 { animation-delay: 0.2s; }
.animation-delay-2 { animation-delay: 0.4s; }
.animation-delay-3 { animation-delay: 0.6s; }
.animation-delay-4 { animation-delay: 0.8s; }
.animation-delay-5 { animation-delay: 1.0s; } /* Oder mehr, je nach Bedarf */
.animation-delay-6 { animation-delay: 1.2s; }

/* Optional: Stoppt Animationen, wenn der Benutzer 'prefers-reduced-motion' aktiviert hat */
@media (prefers-reduced-motion: reduce) {
    .animate-onload,
    .animate-on-scroll { /* Auch für Scroll-Animationen deaktivieren */
        animation: none !important; /* Deaktiviert alle Keyframe-Animationen */
        opacity: 1 !important; /* Stellt sicher, dass die Elemente sichtbar sind */
        transform: none !important; /* Keine Verschiebung */
        transition: none !important; /* Deaktiviert alle Transitions */
    }
}


.hero-section {
    position: relative;
    width: 100%;
    /* Höhe flexibel halten, damit Inhalte nicht abgeschnitten werden */
    height: auto;
    min-height: 60vh;
    max-height: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    color: var(--text-color);
    text-align: left;
    background: var(--sec-bg-color); /* Leicht graueres Weiß für den Hero-Bereich */
    padding: 60px 0;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7); /* Weiß mit 70% Deckkraft */
    z-index: 2;
}

/* Wrapper für das zweispaltige Layout */
.hero-content-wrapper {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 80px; /* ANGEPASST: Größerer Abstand zwischen den Spalten für breiteren Inhalt */
    padding-top: 5px;
    padding-bottom: 5px;
    /* BREITEN-ANPASSUNGEN FÜR "CONTAINER BREITE GRÖSSER" / "INHALT BREITER" */
    max-width: 1300px; /* ANGEPASST: Höhere maximale Breite für den Content-Wrapper */
    margin: 0 auto; /* Zentriert den Content-Wrapper */
    width: 100%; /* Stellt sicher, dass es die max-width ausnutzen kann */
    padding-left: 20px; /* Optional: Seitliches Padding, falls kein globaler Container verwendet wird */
    padding-right: 20px; /* Optional: Seitliches Padding */
}

.hero-text-column {
    flex: 3; /* ANGEPASST: Textspalte bekommt relativ mehr Platz */
    max-width: 800px; /* ANGEPASST: Max. Breite für die Textspalte erhöht */
}

.subtitle {
    font-size: 1.1em;
    color: var(--accent-color);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 10px;

    background-color: rgba(173, 216, 230, 0.6);
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

.hero-title {
    font-family: var(--font-accent);
    font-size: 3.8em;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-color);
}

.hero-title .accent-font {
    color: var(--accent-color);
}

.hero-description {
    font-size: 1.1em;
    line-height: 1.8;
    color: var(--light-text-color);
    margin-bottom: 30px;
    max-width: 600px; /* ANGEPASST: Max. Breite der Beschreibung erhöht */
}

.hero-buttons {
    display: flex;
    gap: 15px;
    justify-content: flex-start;
}

/* Info-Box Styling mit Kreisen */
.hero-info-box {
    flex: 1.5; /* ANGEPASST: Info-Box bekommt relativ mehr Platz als Standard (z.B. 1.5 statt 1) */
    background-color: var(--box-bg-color);
    margin-top: 50px;
    padding: 30px;
    border-radius: 8px;
    box-shadow: var(--box-shadow-light);
    max-width: 500px; /* ANGEPASST: Höhere maximale Breite für die Info-Box */
    align-self: flex-start;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Kreise hinter der Info-Box */
.hero-info-box::before,
.hero-info-box::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background-color: var(--circle-color-1);
    z-index: -1;
    filter: blur(20px);
}

.hero-info-box::before {
    width: 150px;
    height: 150px;
    top: -50px;
    left: -70px;
    background-color: var(--circle-color-1);
}

.hero-info-box::after {
    width: 120px;
    height: 120px;
    bottom: -40px;
    right: -60px;
    background-color: var(--circle-color-2);
    transform: rotate(45deg);
}


.hero-info-box .box-title {
    font-family: var(--font-heading);
    font-size: 1.3em;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 20px;
    text-align: center;
}

.hero-info-box ul {
    list-style: none;
    margin-bottom: 25px;
}

.hero-info-box ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    color: var(--light-text-color);
    font-size: 0.95em;
}

.hero-info-box ul li::before {
    content: '\2713';
    color: var(--accent-color);
    position: absolute;
    left: 0;
    font-weight: bold;
}

.hero-info-box .box-link {
    display: block;
    text-align: center;
    color: var(--accent-color);
    font-weight: 600;
    margin-top: 20px;
}


/* --- Responsives Verhalten (Anpassung des Hero-Bereichs) --- */
@media (max-width: 1200px) { /* NEU: Füge eine Stufe für größere Tablets/kleinere Laptops hinzu */
    .hero-content-wrapper {
        max-width: 1000px; /* ANGEPASST: Reduziert für diesen Breakpoint */
        gap: 40px; /* ANGEPASST: Reduziert den Gap wieder */
    }
    .hero-title {
        font-size: 3.5em; /* Etwas kleiner für diesen Breakpoint */
    }
    .hero-description {
        font-size: 1.05em; /* Etwas kleiner */
    }
    .hero-info-box {
        max-width: 450px; /* Anpassung der Info-Box für diesen Breakpoint */
    }
}


@media (max-width: 1024px) {
    .hero-section {
        height: auto;
        min-height: 500px; /* ANGEPASST: Mindesthöhe für Tablets */
        padding: 60px 0; /* Vertikales Padding angepasst */
    }
    .hero-content-wrapper {
        flex-direction: column;
        gap: 40px;
        padding-top: 0;
        padding-bottom: 0;
        max-width: 600px; /* ANGEPASST: Reduziere die max-width für kleinere Bildschirme */
    }
    .hero-text-column {
        flex: auto;
        max-width: 90%;
        text-align: center;
    }
    .hero-buttons {
        justify-content: center; /* Zentriert die Buttons selbst */
        width: 100%; /* Fügt width: 100% hinzu, damit justify-content wirkt */
        margin-left: auto;
        margin-right: auto;
    }
    .hero-info-box {
        flex: auto;
        max-width: 400px; /* ANGEPASST: max-width für Tablets beibehalten oder anpassen */
        width: 90%;
        align-self: center;
        margin-top: 0px;
    }
    .hero-title {
        font-size: 3em;
    }
    .hero-description {
        font-size: 1em;
    }
    /* Kreise im Responsive anpassen oder ausblenden, wenn sie stören */
    .hero-info-box::before,
    .hero-info-box::after {
        display: none; /* Kreise auf kleineren Bildschirmen ausblenden, um Überlagerungen zu vermeiden */
    }

    /* ... Bestehende responsive Regeln für Header und Menü ... */
    .header .container {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .main-nav {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: var(--header-height);
        left: 0;
        width: 100%;
        height: 0;
        overflow: hidden;
        background-color: var(--main-bg-color);
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        padding: 0;
        transition: height 0.4s ease-out, padding 0.4s ease-out;
        z-index: 999;
    }

    .main-nav.active {
        height: auto;
        padding: 20px 0;
    }

    .main-nav ul {
        flex-direction: column;
        width: 100%;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .main-nav ul li {
        margin: 15px 0;
        width: 100%;
        text-align: center;
    }
    .main-nav ul li a {
        display: inline-block;
        padding: 10px 20px;
        font-size: 1.1em;
        border-radius: 5px;
    }
    .main-nav ul li a.active {
        background-color: var(--active-bg-color);
        color: var(--text-color);
    }
    .main-nav ul li a.active::after {
        width: 0;
    }

    .mobile-only-btn {
        display: block;
        margin-top: 20px;
    }
    .mobile-only-btn .btn {
        width: 80%;
        max-width: 250px;
        padding: 12px 20px;
        font-size: 1em;
    }
    .desktop-only-btn {
        display: none;
    }

    .header-contact {
        display: flex;
        gap: 10px;
    }

    .hamburger-menu {
        display: flex;
        margin-left: 15px;
    }
}

@media (max-width: 768px) {
    .hero-section {
        min-height: 480px; /* Beibehalten oder anpassen */
        padding: 50px 0; /* Beibehalten oder anpassen */
    }
    .hero-title {
        font-size: 2.5em;
    }
    .hero-description {
        font-size: 0.95em;
    }
    .hero-info-box {
        padding: 25px;
        margin-top: 0px;
        max-width: 90%; /* Macht die Box fast volle Breite auf mobilen Geräten */
    }

    /* ... Bestehende responsive Regeln für Header und Menü ... */
    .header .container {
        padding: 0 15px;
    }
    .header .logo {
        font-size: 1.3em;
    }
    .header-contact {
        display: none;
    }
    .hamburger-menu {
        display: flex;
        margin-left: 0;
    }

    /* Subtitle Anpassungen für kleinere Bildschirme, falls nötig */
    .subtitle {
        padding: 4px 8px;
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .hero-section {
        min-height: 0px; /* Beibehalten oder anpassen */
        padding: 50px 0; /* Beibehalten oder anpassen */
    }
    .hero-title {
        font-size: 2em;
        line-height: 1.1;
    }
    .hero-description {
        font-size: 0.9em;
    }
    .hero-text-column {
        margin-top: 0; /* **WICHTIG:** Entfernt den problematischen margin-top */
        padding: 0 15px; /* Fügt seitliches Padding hinzu */
    }

    .btn-arrow {
        padding: 10px 20px;
        font-size: 0.85em;
        width: 90%;
        max-width: 280px;
    }
    .hero-info-box {
        padding: 20px; /* Weniger Padding auf sehr kleinen Bildschirmen */
        margin-top: 0px; /* Stellt sicher, dass kein unerwünschter Top-Margin vorhanden ist */
        margin-bottom: 0px; /* **WICHTIG:** Entfernt den problematischen margin-bottom */
        max-width: 95%; /* Noch breiter auf sehr kleinen Bildschirmen */
    }
}




























/* --- Leistungen Sektion --- */
.leistungen-section {
    padding: 80px 0;
    background-color: var(--main-bg-color);
    text-align: center;
}

.leistungen-section .section-title {
    margin-bottom: 20px;
}

.section-description {
    font-size: 1.1em;
    color: var(--light-text-color);
    max-width: 800px;
    margin: 0 auto 60px auto;
    line-height: 1.6;
}

.leistungen-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    justify-content: center;
    align-items: stretch;
}

.leistung-item {
    background-color: var(--box-bg-color);
    border-radius: 8px;
    box-shadow: var(--box-shadow-light);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* >>> HIER IST DIE ANPASSUNG <<< */
    /* Nur noch transition für transform (für hover) und box-shadow hier lassen */
    /* Die transition für opacity und transform (y-Achse) wird von .animate-on-scroll übernommen */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.leistung-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.leistung-image-wrapper {
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}

.leistung-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.leistung-item:hover .leistung-main-image {
    transform: scale(1.05);
}

.leistung-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    text-align: left;
    flex-grow: 1;
}

.leistung-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    width: 100%;
}

.leistung-icon {
    width: 40px;
    height: 40px;
    background-color: rgba(0, 119, 182, 0.08);
    border-radius: 50%;
    color: var(--accent-color);
    font-size: 1.6em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.leistung-item:hover .leistung-icon {
    background-color: var(--accent-color);
    color: var(--main-bg-color);
    transform: rotate(10deg);
}

.leistung-title {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 0;
    line-height: 1.2;
}

.leistung-description {
    font-size: 0.95em;
    color: var(--light-text-color);
    line-height: 1.7;
    margin-bottom: 20px;
    flex-grow: 1;
    text-align: left;
}

.leistung-link {
    color: var(--accent-color);
    font-weight: 600;
    font-size: 0.95em;
    display: flex;
    align-items: center;
    margin-top: auto;
    align-self: flex-start;

    transition: color 0.3s ease, margin-left 0.3s ease, background-color 0.3s ease, outline 0.3s ease;
    padding: 5px 8px;
    border-radius: 4px;
}

.leistung-link:hover {
    color: #006096;
}

.leistung-link:focus {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
    background-color: var(--active-bg-color);
    color: var(--text-color);
}

.leistung-link::after {
    content: '\2192';
    margin-left: 5px;
    transition: margin-left 0.3s ease;
}

.leistung-link:hover::after,
.leistung-link:focus::after {
    margin-left: 10px;
}

/* --- Responsive Anpassungen für Leistungen Sektion --- */
@media (max-width: 1200px) {
    .leistungen-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 25px;
    }
}

@media (max-width: 992px) {
    .leistungen-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    .leistung-title-wrapper {
        gap: 8px;
        justify-content: center;
    }
    .leistung-icon {
        width: 35px;
        height: 35px;
        font-size: 1.4em;
    }
    .leistung-title {
        font-size: 1.2em;
    }
    .leistung-content {
        text-align: center;
    }
    .leistung-description {
        text-align: center;
    }
    .leistung-link {
        align-self: center;
    }
}

@media (max-width: 768px) {
    .leistungen-section {
        padding: 60px 0;
    }
    .section-description {
        margin-bottom: 40px;
    }
    .leistungen-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    .leistung-item {
        max-width: 320px;
        margin: 0 auto;
    }
    .leistung-image-wrapper {
        height: 160px;
    }
    .leistung-content {
        padding: 20px;
    }
    .leistung-title-wrapper {
        flex-direction: column;
        gap: 5px;
        margin-bottom: 15px;
        justify-content: center;
    }
    .leistung-icon {
        margin-top: 0;
        width: 50px;
        height: 50px;
        font-size: 2em;
    }
    .leistung-title {
        font-size: 1.4em;
    }
    .leistung-description {
        font-size: 0.9em;
        text-align: center;
    }
    .leistung-link {
        align-self: center;
    }
}

@media (max-width: 480px) {
    .leistungen-section {
        padding: 40px 0;
    }
    .section-description {
        font-size: 1em;
        margin-bottom: 30px;
    }
    .leistung-item {
        max-width: 280px;
    }
    .leistung-image-wrapper {
        height: 140px;
    }
    .leistung-title {
        font-size: 1.3em;
    }
    .leistung-icon {
        width: 45px;
        height: 45px;
        font-size: 1.8em;
    }
}

/* --- Animation für Leistungen Sektion (CSS für animate-on-scroll) --- */
/* Diesen Teil hattest du bereits. Er ist korrekt, wenn die leistung-item-Transition angepasst wird. */
/* Keyframes für das Einfaden und leichte Hochgleiten der Leistungs-Items */
@keyframes fadeInSlideUpLeistung {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Basisklasse für Elemente, die beim Scrollen animiert werden sollen */
.animate-on-scroll {
    opacity: 0; /* Anfangszustand: unsichtbar */
    transform: translateY(30px); /* Anfangszustand: leicht nach unten versetzt */
    /* Transition HIER NICHT DEFINIEREN, damit der initial state sofort da ist */
}

/* Klasse, die per JavaScript hinzugefügt wird, wenn das Element sichtbar ist */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
    /* Transition HIER DEFINIEREN, damit die Animation ausgelöst wird, wenn die Klasse hinzugefügt wird */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Standardübergang */
}

/* Optional: Stoppt Animationen, wenn der Benutzer 'prefers-reduced-motion' aktiviert hat */
@media (prefers-reduced-motion: reduce) {
    .animate-onload,
    .animate-on-scroll,
    .animate-on-scroll.is-visible { /* Auch für Scroll-Animationen deaktivieren */
        animation: none !important; /* Deaktiviert alle Keyframe-Animationen */
        opacity: 1 !important; /* Stellt sicher, dass die Elemente sichtbar sind */
        transform: none !important; /* Keine Verschiebung */
        transition: none !important; /* Deaktiviert alle Transitions */
    }
}






















/* --- About Section / Content Block (Handwerk mit Erfahrung) --- */
.about-section {
    padding: 100px 0; /* Vertikales Padding für die Sektion */
    background-color: var(--main-bg-color); /* Oder eine andere Hintergrundfarbe */
}

.about-content-wrapper {
    display: flex;
    align-items: center; /* Zentriert die Spalten vertikal */
    gap: 70px; /* Abstand zwischen Bild und Text leicht reduziert */
    max-width: 1700px; /* Gesamtbreite des Inhalts etwas reduziert, aber immer noch breit */
    margin: 0 auto; /* Zentriert den Inhalt im Container */
    padding: 0 50px; /* Seitliches Padding für den Container auf Desktops */
}

.about-image-column {
    flex: 1.2; /* Bildspalte nimmt etwas weniger Raum ein, um das Bild zu verkleinern */
    min-width: 400px; /* Minimale Breite für das Bild reduziert */
    position: relative; /* WICHTIG: Für die Positionierung der Pseudoelemente */
    border-radius: 8px; /* Abgerundete Ecken für das Bild */
    overflow: visible; /* Bleibt "visible", damit die Pseudo-Elemente außerhalb des Bildes sichtbar sind */
    box-shadow: var(--box-shadow-light); /* Leichter Schatten für das Bild */
    z-index: 1; /* Sicherstellen, dass das Bild über den dekorativen Elementen ist */
}

.about-main-image {
    width: 100%;
    height: auto;
    display: block; /* Entfernt zusätzlichen Platz unter dem Bild */
    border-radius: 8px; /* Auch dem Bild selbst abgerundete Ecken geben */
}

/* NEUE REGELN: Dekorative Formen HINTER dem Bild (als Linien/Rahmen) */
.about-image-column::before,
.about-image-column::after {
    content: '';
    position: absolute;
    z-index: -1; /* Hinter dem Bild */
    border: 2px solid; /* Für sichtbare Linien */
    opacity: 0.3; /* Opazität leicht erhöht für bessere Sichtbarkeit der Linien */
    border-radius: 8px; /* Passend zu den Bildrändern */
}

/* Obere LINKE Rahmen-Form (Viereck) */
.about-image-column::before {
    width: 100px; /* Feste Breite für das Viereck */
    height: 100px; /* Feste Höhe für das Viereck */
    top: -20px; /* Position relativ zum Bild */
    left: -20px; /* Positionierung von links */
    right: auto; /* WICHTIG: right-Eigenschaft zurücksetzen, damit left greift */
    border-color: var(--accent-color); /* Blaue Farbe */
    transform: rotate(-3deg); /* Leichte negative Rotation für oben links */
}

/* Untere rechte Rahmen-Form (Kreis) */
.about-image-column::after {
    width: 120px; /* Feste Breite für kleinere Form */
    height: 120px; /* Feste Höhe für kleinere Form */
    bottom: -30px; /* Abstand vom Bild */
    right: -30px; /* Abstand vom Bild */
    border-color: rgba(255, 120, 100, 0.5); /* Rosa/Orange Farbe, noch etwas kräftiger */
    border-radius: 50%; /* Macht es zu einem Kreis */
    background-color: rgba(255, 120, 100, 0.08); /* Optional: Leichte Füllung für den Kreis, leicht erhöht */
    transform: rotate(10deg); /* Leichte Rotation */
}


.about-text-column {
    flex: 1; /* Textspalte nimmt den restlichen Raum ein */
    padding-right: 0; /* KEIN zusätzlicher rechter Abstand */
}

/* Sicherstellen, dass Text (Titel, Beschreibung, Liste) und Button linksbündig SIND FÜR DIE ABOUT SECTION */
.about-section .section-title, /* Jetzt nur Titel in About */
.about-section .section-description, /* Nur Beschreibung in About */
.about-subtitle,
.about-checklist,
.about-checklist li,
.about-section .btn { /* Nur Buttons in About */
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Spezifische Anpassung für den Button */
.about-text-column .btn {
    display: inline-block;
    margin-left: 0 !important;
}

/* Deine bestehenden Styles für Überschriften, Beschreibungen, Checkliste und Button */
.section-title {
    margin-bottom: 20px; /* Abstand unter dem Haupttitel reduziert */
}

.section-description {
    margin-bottom: 25px; /* Abstand unter der Beschreibung reduziert */
}

.about-subtitle {
    font-family: var(--font-heading);
    font-size: 1.4em;
    font-weight: 700;
    color: var(--text-color);
    margin-top: 25px; /* Abstand über dem Untertitel reduziert */
    margin-bottom: 15px; /* Abstand unter dem Untertitel reduziert */
}

.about-checklist {
    list-style: none;
    padding: 0;
    margin-bottom: 25px; /* Abstand unter der Checkliste reduziert */
}

.about-checklist li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 8px; /* Abstand zwischen den Listenpunkten reduziert */
    font-size: 1em;
    color: var(--light-text-color);
    line-height: 1.5;
}

.about-checklist li::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f058'; /* Unicode für fa-check-circle */
    color: var(--accent-color);
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 1.2em;
}

.btn {
    position: relative;
    padding-right: 45px;
    margin-top: 0; /* Sicherstellen, dass hier kein unnötiger Abstand ist, da der Button direkt nach der Checkliste kommt */
}

.btn::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f061'; /* Unicode für fa-arrow-right */
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9em;
    transition: transform 0.3s ease;
}

.btn:hover::after {
    transform: translateY(-50%) translateX(5px);
}


/* --- Responsive Anpassungen für About Section --- */
@media (max-width: 1600px) {
    .about-content-wrapper {
        gap: 60px;
        padding: 0 40px;
    }
    .about-image-column {
        min-width: 400px;
    }
    .about-image-column::before {
        width: 80px;
        height: 80px;
        top: -15px;
        left: -15px;
        right: auto;
    }
    .about-image-column::after {
        width: 100px;
        height: 100px;
        bottom: -25px;
        right: -25px;
    }
}

@media (max-width: 1400px) {
    .about-content-wrapper {
        gap: 50px;
        padding: 0 30px;
    }
    .about-image-column {
        min-width: 350px;
    }
    .about-image-column::before {
        width: 70px;
        height: 70px;
        top: -10px;
        left: -10px;
        right: auto;
    }
    .about-image-column::after {
        width: 80px;
        height: 80px;
        bottom: -20px;
        right: -20px;
    }
}

@media (max-width: 1200px) {
    .about-content-wrapper {
        gap: 40px;
        padding: 0 25px;
    }
    .about-image-column {
        min-width: 300px;
    }
    .about-image-column::before {
        width: 60px;
        height: 60px;
        top: -8px;
        left: -8px;
        right: auto;
    }
    .about-image-column::after {
        width: 60px;
        height: 60px;
        bottom: -15px;
        right: -15px;
    }
}

@media (max-width: 1024px) {
    .about-section {
        padding: 80px 0;
    }
    .about-content-wrapper {
        flex-direction: column;
        gap: 40px;
        padding: 0 20px; /* ANGEPASST: Seitliches Padding reduziert */
        max-width: 95%; /* ANGEPASST: Max-Breite für den Wrapper */
    }
    .about-image-column {
        max-width: 600px;
        min-width: unset;
        width: 90%; /* ANGEPASST: Bildbreite, damit der Rahmen mehr Platz hat */
        margin: 0 auto;
    }
    .about-main-image {
        border-radius: 8px;
    }
    .about-text-column {
        padding-right: 0;
        max-width: 85%; /* ANGEPASST: Breite der Textbox erhöht */
        margin: 0 auto;
    }
    /* Rahmen-Formen auf Tablets */
    .about-image-column::before {
        width: 50px;
        height: 50px;
        top: -15px;
        left: -15px;
        right: auto;
        transform: rotate(-2deg);
        opacity: 0.25;
    }
    .about-image-column::after {
        width: 60px;
        height: 60px;
        bottom: -25px;
        right: -25px;
        transform: rotate(8deg);
        opacity: 0.25;
    }
}

@media (max-width: 768px) {
    .about-section {
        padding: 60px 0;
    }
    .about-content-wrapper {
        gap: 30px;
        padding: 0 15px; /* ANGEPASST: Seitliches Padding weiter reduziert */
        max-width: 100%; /* ANGEPASST: Wrapper soll die volle Breite nutzen */
    }
    .about-image-column {
        max-width: 90%; /* ANGEPASST: Bildbreite, damit der Rahmen mehr Platz hat */
        width: 90%; /* ANGEPASST */
    }
    .about-text-column {
        padding: 0 10px; /* ANGEPASST: Seitliches Padding der Textspalte weiter reduziert */
        max-width: 95%; /* ANGEPASST: Breite der Textbox erhöht für Mobilgeräte */
    }
    .section-title {
        font-size: 2.2em;
    }
    .section-description {
        font-size: 0.95em;
    }
    .about-subtitle {
        font-size: 1.2em;
        margin-top: 20px;
        margin-bottom: 10px;
    }
    .about-checklist li {
        font-size: 0.9em;
        padding-left: 25px;
        margin-bottom: 6px;
    }
    .about-checklist li::before {
        font-size: 1em;
        top: 2px;
    }
    /* Formen auf kleineren Geräten weiter anpassen */
    .about-image-column::before {
        width: 45px;
        height: 45px;
        top: -10px;
        left: -10px;
        opacity: 0.2;
    }
    .about-image-column::after {
        width: 55px;
        height: 55px;
        bottom: -15px;
        right: -15px;
        opacity: 0.2;
    }
}

@media (max-width: 480px) {
    .about-section {
        padding: 40px 0;
    }
    .about-content-wrapper {
        padding: 0 8px; /* ANGEPASST: Minimales seitliches Padding für volle Breite */
        max-width: 100%; /* ANGEPASST: Wrapper soll die volle Breite nutzen */
    }
    .section-title {
        font-size: 1.8em;
    }
    .about-checklist {
        margin-bottom: 20px;
    }
    .about-checklist li {
        font-size: 0.85em;
        margin-bottom: 5px;
    }
    .about-checklist li::before {
        font-size: 0.9em;
        top: 3px;
    }
    /* Formen auf sehr kleinen Geräten (Handy) sichtbar lassen */
    .about-image-column::before {
        display: block;
        width: 35px;
        height: 35px;
        top: -8px;
        left: -8px;
        opacity: 0.15;
    }
    .about-image-column::after {
        display: block;
        width: 45px;
        height: 45px;
        bottom: -12px;
        right: -12px;
        opacity: 0.15;
    }
    .about-text-column {
        padding: 0 5px; /* ANGEPASST: Minimales Padding der Textspalte */
        max-width: 98%; /* ANGEPASST: Maximale Breite der Textbox für sehr kleine Handys */
    }
    .about-image-column {
        max-width: 95%; /* ANGEPASST: Bildbreite, damit der Rahmen mehr Platz hat */
        width: 95%; /* ANGEPASST */
    }
}


























/* --- Kontakt Section --- */
.contact-section {
    padding: 80px 0;
    background-color: #f8f8f8;
    font-family: Arial, sans-serif;
    color: #333;
}

.contact-header {
    margin-bottom: 50px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

.contact-header .section-title {
    text-align: center;
    font-size: 2.5em;
    color: #2c3e50;
    margin-bottom: 15px;
    font-weight: 700;
}

.contact-header .section-description {
    text-align: center;
    font-size: 1.1em;
    line-height: 1.6;
    color: #666;
}

.contact-content-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* only size columns to their content */
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Allgemeine Karten-Styles für die Spalten */
.contact-info-column,
.contact-form-column {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.contact-info-column {
    flex: 1;
    min-width: 300px;
    max-width: 400px;
    /* allow the card to grow with its content so nothing overflows */
    max-height: none;
}

.contact-form-column {
    flex: 2;
    min-width: 450px;
    max-width: 700px;
}

/* Überschriften der Spalten (Kontaktdaten, Anfrage senden) */
.contact-info-column h3,
.contact-form-column h3 {
    font-size: 1.5em;
    color: #2c3e50;
    margin-bottom: 25px;
    font-weight: 600;
}

/* Kontaktdaten-Elemente (Adresse, Telefon, E-Mail) */
.contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.contact-item i {
    font-size: 1.4em;
    color: #3498db;
    margin-right: 15px;
    width: 25px;
    text-align: center;
    padding-top: 2px;
}

.contact-item .contact-details {
    flex-grow: 1;
}

.contact-details p {
    margin: 0;
    font-size: 0.95em;
    line-height: 1.4;
    color: #555;
}

.contact-details p.contact-label {
    font-weight: 600;
    margin-bottom: 2px;
    color: #333;
}

.contact-details a {
    color: #3498db;
    text-decoration: none;
}

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

/* --- Öffnungszeiten Styling --- */

/* Öffnungszeiten Titel */
.opening-hours-title {
    margin-top: 30px;
    margin-bottom: 15px;
    padding-left: 0;
}

/* Öffnungszeiten Container (das div mit class="contact-item no-icon opening-hours") */
.contact-item.opening-hours {
    padding-left: 0;
    margin-bottom: 0;
    display: block;
}

/* Öffnungszeiten Textzeile (das p-Tag mit den Spans) */
.contact-item.opening-hours p {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    line-height: 1.4;
    padding-left: 0;
}

.contact-item.opening-hours .days {
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.contact-item.opening-hours .time {
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 20px;
}

/* --- Formular-Styling bleibt unverändert --- */
.contact-form .form-group-inline {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.contact-form .form-field {
    flex: 1;
    margin-bottom: 20px;
}

.contact-form .form-group-inline .form-field {
    margin-bottom: 0;
}

.contact-form label {
    display: block;
    font-size: 0.9em;
    color: #444;
    margin-bottom: 8px;
    font-weight: 600;
}

.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 #ddd;
    border-radius: 5px;
    font-size: 1em;
    color: #333;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #3498db;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
    outline: none;
}

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

.contact-form .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #3498db;
    color: #fff;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
}

.contact-form .btn:hover {
    background-color: #2980b9;
}

.contact-form .btn i {
    margin-left: 10px;
    font-size: 0.9em;
    transition: transform 0.3s ease;
}

.contact-form .btn:hover i {
    transform: translateX(5px);
}


/* --- Responsive Anpassungen für Kontakt Section --- */

@media (max-width: 1024px) {
    .contact-header {
        /* Wichtig: Auf Desktop ist es linksbündig, hier wird es zentriert */
        text-align: center; /* Zentriert den Text im Header-Block */
        margin-bottom: 40px;
        padding: 0 20px;
    }
    .contact-content-wrapper {
        flex-direction: column;
        align-items: center; /* Zentriert die beiden Spalten untereinander */
        gap: 30px;
    }
    .contact-info-column,
    .contact-form-column {
        min-width: unset;
        max-width: 600px;
        width: 90%;
    }

    .contact-item.opening-hours p {
        justify-content: space-between;
        padding-left: 0;
    }
    .contact-item.opening-hours .days,
    .contact-item.opening-hours .time {
        white-space: normal;
        margin-left: 0;
        flex-shrink: 1;
    }
    .opening-hours-title {
        padding-left: 0;
    }
}

@media (max-width: 768px) {
    .contact-section {
        padding: 60px 0;
    }
    .contact-header {
        text-align: center; /* Zentriert den Text im Header-Block */
    }
    .contact-header .section-title {
        font-size: 2em;
    }
    .contact-header .section-description {
        font-size: 1em;
    }
    .contact-info-column,
    .contact-form-column {
        padding: 25px;
        width: 95%;
    }
    .contact-info-column h3,
    .contact-form-column h3 {
        font-size: 1.3em;
        margin-bottom: 20px;
    }
    .contact-form .form-group-inline {
        flex-direction: column;
        gap: 0;
    }
    .contact-form .form-field {
        margin-bottom: 15px;
    }
    .contact-form input,
    .contact-form textarea {
        padding: 10px 12px;
        font-size: 0.95em;
    }
    .contact-item.opening-hours p,
    .opening-hours-title {
        padding-left: 0;
    }
}

@media (max-width: 480px) {
    .contact-section {
        padding: 40px 0;
    }
    .contact-header {
        text-align: center; /* Zentriert den Text im Header-Block */
    }
    .contact-header .section-title {
        font-size: 1.8em;
    }
    .contact-header .section-description {
        font-size: 0.9em;
    }
    .contact-content-wrapper {
        padding: 0 10px;
        gap: 25px;
    }
    .contact-info-column,
    .contact-form-column {
        padding: 20px;
        width: calc(100% - 20px);
        box-sizing: border-box;
    }
    .contact-item {
        margin-bottom: 15px;
    }
    .contact-item i {
        font-size: 1.2em;
        margin-right: 10px;
        width: 20px;
    }
    .contact-details p {
        font-size: 0.9em;
    }
    .contact-form textarea {
        min-height: 100px;
    }
    .contact-form .btn {
        padding: 10px 20px;
        font-size: 0.9em;
    }
    .contact-item.opening-hours p {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 0;
    }
    .contact-item.opening-hours .days {
        margin-bottom: 3px;
        padding-right: 0;
    }
    .contact-item.opening-hours .time {
        margin-left: 0;
    }
    .opening-hours-title {
        padding-left: 0;
    }
}



















































/* --- Footer Section --- */
.site-footer {
    background-color: rgb(17, 24, 39); /* Hintergrundfarbe */
    color: #ecf0f1; /* Helle Textfarbe für Kontrast */
    padding: 60px 0 30px; /* Vertikales Padding oben und unten */
    font-family: Arial, sans-serif; /* Einheitliche Schriftart */
}

.site-footer a {
    color: #ecf0f1; /* Linkfarbe, passend zur Textfarbe */
    text-decoration: none; /* Keine Unterstreichung standardmäßig */
    transition: color 0.3s ease; /* Sanfter Farbwechsel beim Hover */
}

.site-footer a:hover {
    color: #3498db; /* Akzentfarbe beim Hover */
}

.footer-content {
    display: flex;
    flex-wrap: wrap; /* Erlaubt Umbruch auf kleineren Bildschirmen */
    justify-content: space-between; /* Verteilt Spalten gleichmäßig */
    max-width: 1200px; /* Maximale Breite des Footers */
    margin: 0 auto; /* Zentriert den Footer */
    padding: 0 20px; /* Seitliches Padding */
}

.footer-col {
    flex: 1; /* Gleichmäßige Verteilung des Platzes */
    min-width: 280px; /* Minimale Breite pro Spalte */
    margin-bottom: 30px; /* Abstand zwischen Spalten auf kleineren Bildschirmen */
    padding: 0 15px; /* Innenabstand für Spalteninhalt */
    box-sizing: border-box; /* Padding in der Breite berücksichtigen */
}

/* Footer About Spalte (Logo und Beschreibung) */
.footer-about {
    flex: 1.2; /* Nimmt etwas mehr Platz ein */
    min-width: 320px;
    text-align: left; /* Standardmäßig links */
}

.footer-logo {
    max-width: 200px; /* Maximale Breite für das Logo */
    height: auto; /* Höhe automatisch anpassen */
    margin-bottom: 20px; /* Abstand unter dem Logo */
    filter: brightness(0) invert(1); /* Macht ein dunkles Logo weiß, falls es nicht schon weiß ist */
    display: block; /* Für Ausrichtung */
    margin-left: 0;
    margin-right: auto;
}

.footer-about p {
    font-size: 0.95em;
    line-height: 1.6;
    margin-bottom: 0; /* Kein zusätzlicher Abstand hier */
    text-align: left;
}

/* Social Spalte */
.social-col {
    text-align: center; /* Inhalt zentrieren */
    display: flex; /* Für vertikale Zentrierung */
    flex-direction: column;
    justify-content: center; /* Vertikal zentrieren */
    align-items: center; /* Horizontal zentrieren */
}

.social-col h3 {
    font-size: 1.3em;
    color: #ecf0f1;
    margin-bottom: 25px;
    font-weight: 600;
}

.social-links {
    margin-bottom: 0; /* Kein Abstand hier */
}

.social-links a {
    display: inline-flex; /* Für Zentrierung des Icons */
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Runde Buttons */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Heller Rand */
    margin-right: 10px;
    font-size: 1.2em;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.social-links a:last-child {
    margin-right: 0; /* Kein Rand rechts vom letzten Icon */
}

.social-links a:hover {
    background-color: #3498db; /* Akzentfarbe beim Hover */
    border-color: #3498db;
    color: #fff; /* Weiße Icons beim Hover */
}

/* Kontakt-Spalte */
.footer-contact {
    text-align: right; /* Gesamten Inhalt rechtsbündig ausrichten */
}

.footer-contact h3 {
    font-size: 1.3em;
    color: #ecf0f1;
    margin-bottom: 25px;
    font-weight: 600;
    text-align: right; /* Überschrift rechtsbündig */
}

.footer-contact .contact-item {
    display: flex;
    align-items: flex-start; /* Icons oben ausrichten */
    margin-bottom: 15px;
    font-size: 0.95em;
    justify-content: flex-end; /* Elemente des Flex-Containers nach rechts schieben */
}

.footer-contact .contact-item i {
    font-size: 1.2em;
    color: #3498db; /* Akzentfarbe für Icons */
    margin-right: 15px; /* Abstand rechts vom Icon */
    margin-left: 0; /* Sicherstellen, dass kein linker Margin vorhanden ist */
    flex-shrink: 0; /* Icon nicht schrumpfen lassen */
    width: 20px; /* Feste Breite für Icons */
    text-align: center;
}

.footer-contact .contact-item p {
    margin: 0;
    line-height: 1.5;
    text-align: right; /* Textinhalt rechtsbündig */
}

/* Untere Leiste für Copyright und rechtliche Links */
.footer-bottom-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Trennlinie */
    margin-top: 40px;
    padding-top: 25px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    display: flex; /* Flexbox für Copyright und Links */
    justify-content: space-between; /* Abstand zwischen den Elementen */
    align-items: center; /* Vertikale Zentrierung */
    flex-wrap: wrap; /* Erlaubt Umbruch auf kleineren Bildschirmen */
}

.footer-copyright {
    flex: 1; /* Nimmt verfügbaren Platz ein */
    min-width: 250px; /* Mindestbreite, bevor Umbruch */
    text-align: left; /* Copyright linksbündig */
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 10px; /* Abstand im Umbruchfall */
}

.footer-copyright p {
    margin: 0; /* Standard-Margin entfernen */
}

.footer-credit {
    flex: 1;
    min-width: 260px;
    text-align: center;
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.footer-credit a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(52, 152, 219, 0.55);
    background-color: rgba(52, 152, 219, 0.12);
    color: #ecf0f1;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.footer-credit a:hover {
    background-color: #3498db;
    border-color: #3498db;
    color: #fff;
}

.footer-legal-links {
    flex: 1; /* Nimmt verfügbaren Platz ein */
    min-width: 300px; /* Mindestbreite, bevor Umbruch */
    text-align: right; /* Links rechtsbündig */
    margin-bottom: 10px; /* Abstand im Umbruchfall */
}

.footer-legal-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-legal-links ul li {
    display: inline-block; /* Links nebeneinander */
    margin-left: 20px; /* Abstand zwischen den Links */
}

.footer-legal-links ul li:first-child {
    margin-left: 0; /* Kein Abstand links vom ersten Link */
}

.footer-legal-links ul li a {
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.8);
}

/* --- Responsive Anpassungen für Footer --- */

/* Für Bildschirme bis 1024px (Tablets im Querformat) */
@media (max-width: 1024px) {
    .footer-content {
        padding: 0 30px;
    }
    .footer-col {
        min-width: 250px;
    }
    .footer-about {
        flex: 1 1 30%;
        min-width: 280px;
    }
    .social-col {
        flex: 1 1 30%;
        min-width: 200px;
    }
    .footer-contact {
        flex: 1 1 30%;
        min-width: 280px;
        text-align: right; /* Rechtsbündig beibehalten */
    }
    .social-col,
    .social-col h3 {
        text-align: center;
    }
    .footer-contact h3 {
        text-align: right; /* Überschrift rechtsbündig halten */
    }
    .footer-contact .contact-item {
        justify-content: flex-end; /* Elemente rechts ausrichten */
    }
    .footer-contact .contact-item i {
        margin-right: 15px; /* Abstand anpassen */
        margin-left: 0;
    }
    .footer-contact .contact-item p {
        text-align: right;
    }
    /* Anpassungen für die untere Leiste */
    .footer-bottom-bar {
        padding: 25px 30px 0;
        flex-direction: column;
        align-items: center;
    }
    .footer-copyright,
    .footer-credit,
    .footer-legal-links {
        text-align: center;
        width: 100%;
        margin-bottom: 15px;
    }
    .footer-legal-links ul li {
        margin: 0 10px;
    }
}

/* Für Bildschirme bis 768px (Tablets im Hochformat, größere Smartphones) */
@media (max-width: 768px) {
    .site-footer {
        padding: 40px 0 20px;
    }
    .footer-content {
        flex-direction: column;
        align-items: center;
        padding: 0 20px;
    }
    .footer-col {
        width: 100%;
        min-width: unset;
        text-align: center;
        margin-bottom: 30px;
        padding: 0;
    }

    .footer-logo {
        margin-left: auto;
        margin-right: auto;
    }

    .footer-about p {
        padding: 0 10px;
        text-align: center;
    }

    .social-col h3 {
        text-align: center;
    }
    .social-links {
        text-align: center;
    }

    /* Kontaktfeld in mobiler Ansicht zentrieren */
    .footer-contact {
        text-align: center; /* Kontaktfeld zentrieren */
    }
    .footer-contact h3 {
        text-align: center; /* Überschrift zentrieren */
    }
    .footer-contact .contact-item {
        justify-content: center; /* Kontakt-Items zentrieren */
        margin-bottom: 10px;
        flex-direction: row; /* Icons links, Text rechts (Standard) */
    }
    .footer-contact .contact-item i {
        margin-right: 10px; /* Abstand nach rechts */
        margin-left: 0; /* Linken Abstand entfernen */
    }
    .footer-contact .contact-item p {
        text-align: left; /* Text linksbündig (innerhalb des zentrierten Blocks) */
    }

    /* Anpassungen für die untere Leiste in mobiler Ansicht */
    .footer-bottom-bar {
        padding: 20px 20px 0;
        margin-top: 30px;
        flex-direction: column;
        align-items: center;
    }
    .footer-copyright {
        order: 3; /* Copyright als Letztes anzeigen */
        margin-top: 15px;
    }
    .footer-credit {
        order: 2;
    }
    .footer-legal-links {
        order: 1; /* Links vor Copyright anzeigen */
        margin-bottom: 15px;
    }
    .footer-copyright,
    .footer-credit,
    .footer-legal-links {
        text-align: center;
        width: 100%;
    }
    .footer-legal-links ul li {
        margin: 0 8px;
    }
}

/* Für Bildschirme bis 480px (Typische Smartphone-Ansicht) */
@media (max-width: 480px) {
    .site-footer {
        padding: 30px 0 15px;
    }
    .footer-logo {
        max-width: 150px;
    }
    .footer-about p {
        font-size: 0.9em;
    }
    .social-col h3,
    .footer-contact h3 {
        font-size: 1.2em;
    }
    .footer-contact .contact-item {
        font-size: 0.85em;
    }
    .footer-contact .contact-item i {
        font-size: 1.1em;
        margin-right: 8px;
    }
    .footer-legal-links ul li {
        display: block;
        margin: 8px 0;
    }
}

















































/* --- SEITE: Unsere Leistungen (leistungen.html) - NEU AUFGEBAUTES ALTERNIERENDES LAYOUT --- */

/* Hero Section (Helle Hintergrundfarbe mit dunklem Text und Unterstreichung) */
.page-hero {
    position: relative;
    width: 100%;
    min-height: 350px; /* Etwas mehr Höhe für den Hero */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--active-bg-color); /* Helle Hintergrundfarbe wie im Stilbild */
    color: var(--text-color); /* Dunkler Text für Kontrast */
    padding-top: var(--header-height);
    padding-bottom: 50px; /* Zusätzlicher Padding unten */
    overflow: hidden;
}

.page-hero .container {
    position: relative;
    z-index: 2;
    max-width: 1000px; /* Etwas breiterer Container */
    padding-left: 20px;
    padding-right: 20px;
}

.page-hero .page-title { /* Spezifischer Selektor: page-title innerhalb von page-hero */
    font-family: var(--font-heading); /* Roboto für knackige, moderne Sans-Serif */
    font-size: 3.8em;
    font-weight: 700;
    margin-bottom: 20px; /* Platz für Unterstreichung */
    color: var(--text-color);
    line-height: 1.2;
    position: relative; /* Für das Pseudo-Element der Unterstreichung */
    padding-bottom: 15px; /* Abstand für die Unterstreichung */
    display: inline-block; /* Wichtig, damit ::after sich auf den Text bezieht */
}

.page-hero .page-title::after { /* Unterstreichung nur für den Hero-Titel */
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 80px; /* Längere Unterstreichung */
    height: 4px; /* Dickerer Strich */
    background-color: var(--accent-color);
    border-radius: 5px;
}

.page-hero .page-subtitle {
    font-family: var(--font-body); /* Open Sans */
    font-size: 1.3em; /* Etwas größerer Subtitle */
    color: var(--light-text-color);
    line-height: 1.7;
    max-width: 800px;
    margin: 0 auto;
}

/* --- Hauptsektion für detaillierte Leistungen --- */
.main-services-section {
    padding: 100px 0;
    background-color: var(--active-bg-color); /* Leichter Hintergrund */
}

.service-detail-section {
    display: flex;
    /* Standardmäßig auf mobilen Geräten oder kleineren Bildschirmen stapeln */
    flex-direction: column;
    align-items: center;
    margin-bottom: 80px; /* Abstand zwischen den Sektionen */
    gap: 30px; /* Abstand zwischen Bild und Text auf mobilen Geräten */
    padding: 0 20px; /* Innenabstand für den Container */
    max-width: 1200px; /* Maximale Breite für die Sektionen */
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* Text zentrieren auf mobilen Geräten */
}

.service-detail-section:last-child {
    margin-bottom: 0;
}

.service-image-column {
    flex: 1; /* Nimmt den verfügbaren Platz ein */
    min-width: 100%; /* Volle Breite auf mobilen Geräten */
    position: relative;
    display: flex; /* Für Zentrierung des Bildes im Rahmen */
    justify-content: center;
    align-items: center;
    order: 1; /* Bild zuerst auf mobilen Geräten */
}

.service-text-column {
    flex: 1; /* Nimmt den verfügbaren Platz ein */
    min-width: 100%; /* Volle Breite auf mobilen Geräten */
    padding: 20px 0; /* Etwas vertikaler Padding für den Textinhalt */
    order: 2; /* Text danach auf mobilen Geräten */
}

.image-frame-wrapper {
    position: relative;
    display: inline-block; /* Wichtig für die korrekte Größe */
    line-height: 0; /* Entfernt zusätzlichen Platz unter dem Bild */
    padding: 30px; /* Mehr Platz für erweiterte Rahmen */
}

.image-frame-wrapper img {
    max-width: 100%;
    height: auto;
    display: block; /* Entfernt zusätzlichen Platz unter dem Bild */
    border-radius: 5px; /* Leichte Abrundung der Bildecken */
    box-shadow: var(--box-shadow-light); /* Leichter Schatten für das Bild */
}

/* Verbessertes Design für den Rahmen in den Ecken */
.image-frame-wrapper::before,
.image-frame-wrapper::after {
    content: '';
    position: absolute;
    width: 60px; /* Längere Linien für den Rahmen */
    height: 60px; /* Längere Linien für den Rahmen */
    border-color: var(--accent-color); /* Farbe des Rahmens */
    border-style: solid;
    border-width: 0; /* Standardmäßig keine Border */
    z-index: 1;
    transition: transform 0.3s ease; /* Übergang für Hover-Effekt */
}

/* Obere linke Ecke */
.image-frame-wrapper::before {
    top: 0;
    left: 0;
    border-top: 3px solid var(--accent-color);
    border-left: 3px solid var(--accent-color);
    border-radius: 5px 0 0 0;
    transform: translate(-10px, -10px); /* Leichter Versatz */
}

/* Untere rechte Ecke */
.image-frame-wrapper::after {
    bottom: 0;
    right: 0;
    border-bottom: 3px solid var(--accent-color);
    border-right: 3px solid var(--accent-color);
    border-radius: 0 0 5px 0;
    transform: translate(10px, 10px); /* Leichter Versatz */
}

/* Hover-Effekt für den Rahmen */
.image-frame-wrapper:hover::before {
    transform: translate(-15px, -15px);
}

.image-frame-wrapper:hover::after {
    transform: translate(15px, 15px);
}


.service-detail-title {
    font-family: var(--font-heading);
    font-size: 2.8em; /* Größerer Titel */
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 15px; /* Platz für die Unterstreichung */
    display: inline-block; /* Damit die Unterstreichung nur unter dem Text ist */
}

.service-detail-title::after {
    content: '';
    position: absolute;
    left: 50%; /* Zentriert auf mobilen Geräten */
    transform: translateX(-50%); /* Zentriert auf mobilen Geräten */
    bottom: 0;
    width: 70px; /* Länge der Unterstreichung */
    height: 4px; /* Dicke der Unterstreichung */
    background-color: var(--accent-color);
    border-radius: 5px;
}

.service-detail-description {
    font-family: var(--font-body);
    font-size: 1.1em;
    color: var(--light-text-color);
    line-height: 1.7;
    margin-bottom: 30px;
}

.service-detail-heading {
    font-family: var(--font-heading);
    font-size: 1.3em;
    font-weight: 600;
    color: var(--accent-color);
    margin-bottom: 15px;
}

.service-detail-list {
    list-style: none;
    padding: 0;
    margin: 0 auto; /* Zentriert die Liste auf mobilen Geräten */
    max-width: 400px; /* Begrenzt die Breite der Liste auf mobilen Geräten */
    text-align: left; /* Stellt sicher, dass die Listenelemente linksbündig bleiben */
}

.service-detail-list li {
    font-family: var(--font-body);
    font-size: 1em;
    color: var(--text-color);
    line-height: 1.6;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0,0,0,0.08); /* Leichter Trennstrich */
    display: flex;
    align-items: flex-start;
}

.service-detail-list li:last-child {
    border-bottom: none;
}

.service-detail-list li::before {
    content: '\2713'; /* Häkchen-Symbol */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--accent-color);
    margin-right: 10px;
    font-size: 0.9em;
    position: relative;
    top: 3px;
    flex-shrink: 0;
}

/* Call To Action am unteren Seitenende (unverändert) */
.cta-bottom {
    background-color: var(--accent-color);
    color: #FFFFFF;
    padding: 80px 0;
    text-align: center;
}

.cta-bottom .container {
    padding-left: 20px;
    padding-right: 20px;
}

.cta-bottom .cta-title {
    font-family: var(--font-accent);
    font-size: 2.8em;
    font-weight: 700;
    margin-bottom: 15px;
    color: #FFFFFF;
}

.cta-bottom .cta-description {
    font-family: var(--font-body);
    font-size: 1.1em;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto 30px;
}

.cta-bottom .btn-primary {
    background-color: var(--main-bg-color);
    color: var(--accent-color);
    border: 2px solid var(--main-bg-color);
    padding: 15px 30px;
    font-size: 1.1em;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.cta-bottom .btn-primary:hover {
    background-color: transparent;
    color: var(--main-bg-color);
}

/* --- Responsive Anpassungen für die LEISTUNGEN Seite --- */

@media (min-width: 769px) { /* Desktop-Ansicht */
    .service-detail-section {
        /* Setzt die flex-direction für Desktop explizit */
        flex-direction: row;
        text-align: left; /* Text linksbündig auf Desktop */
        gap: 60px; /* Standardabstand auf Desktop */
    }

    .service-detail-section.layout-image-right {
        flex-direction: row-reverse; /* Bild auf die rechte Seite verschieben */
    }

    .service-image-column {
        min-width: 45%; /* Mindestbreite für das Bild auf Desktop */
        order: unset; /* Setzt die Reihenfolge zurück auf Standard */
    }

    .service-text-column {
        min-width: 55%; /* Mindestbreite für den Text auf Desktop */
        order: unset; /* Setzt die Reihenfolge zurück auf Standard */
    }

    .service-detail-title::after { /* Unterstreichung linksbündig auf Desktop */
        left: 0;
        transform: translateX(0);
    }

    .service-detail-list {
        margin: 0; /* Entfernt die Zentrierung der Liste auf Desktop */
        max-width: none; /* Entfernt die maximale Breite der Liste auf Desktop */
    }
}


@media (max-width: 1200px) {
    .page-hero .page-title {
        font-size: 3.5em;
    }
    .main-services-section {
        padding: 80px 0;
    }
    .service-detail-section {
        margin-bottom: 60px;
    }
    .service-detail-title {
        font-size: 2.5em;
    }
    .service-detail-heading {
        font-size: 1.25em;
    }
    .image-frame-wrapper {
        padding: 25px; /* Angepasstes Padding für den Rahmen */
    }
    .image-frame-wrapper::before,
    .image-frame-wrapper::after {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 1024px) {
    .page-hero {
        min-height: 300px;
        padding-top: var(--header-height);
        padding-bottom: 40px;
    }
    .page-hero .page-title {
        font-size: 3em;
        padding-bottom: 12px;
        margin-bottom: 15px;
    }
    .page-hero .page-title::after {
        width: 70px;
        height: 3px;
    }
    .page-hero .page-subtitle {
        font-size: 1.1em;
    }

    .main-services-section {
        padding: 60px 0;
    }
    .service-detail-section {
        margin-bottom: 50px;
        padding: 0 15px;
    }
    .image-frame-wrapper {
        padding: 20px; /* Angepasstes Padding für den Rahmen */
    }
    .image-frame-wrapper::before,
    .image-frame-wrapper::after {
        width: 40px;
        height: 40px;
        border-width: 2px; /* Dünnere Linien */
    }
    .image-frame-wrapper::before {
        border-top: 2px solid var(--accent-color);
        border-left: 2px solid var(--accent-color);
        transform: translate(-8px, -8px); /* Angepasster Versatz */
    }
    .image-frame-wrapper::after {
        border-bottom: 2px solid var(--accent-color);
        border-right: 2px solid var(--accent-color);
        transform: translate(8px, 8px); /* Angepasster Versatz */
    }
    .image-frame-wrapper:hover::before {
        transform: translate(-12px, -12px); /* Angepasster Hover-Versatz */
    }
    .image-frame-wrapper:hover::after {
        transform: translate(12px, 12px); /* Angepasster Hover-Versatz */
    }
    .service-detail-title {
        font-size: 2.2em;
        padding-bottom: 12px;
        margin-bottom: 15px;
    }
    .service-detail-title::after {
        width: 60px;
        height: 3px;
    }
    .service-detail-description {
        font-size: 1em;
        margin-bottom: 25px;
    }
    .service-detail-heading {
        font-size: 1.2em;
    }
    .service-detail-list li {
        font-size: 0.95em;
        padding: 6px 0;
    }

    .cta-bottom {
        padding: 60px 0;
    }
    .cta-bottom .cta-title {
        font-size: 2.4em;
    }
    .cta-bottom .cta-description {
        font-size: 1em;
        margin-bottom: 25px;
    }
}

@media (max-width: 768px) {
    .page-hero {
        min-height: 250px;
        padding-bottom: 30px;
    }
    .page-hero .page-title {
        font-size: 2.5em;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    .page-hero .page-title::after {
        width: 60px;
    }
    .page-hero .page-subtitle {
        font-size: 1em;
    }

    .main-services-section {
        padding: 50px 0;
    }
    .service-detail-section {
        gap: 30px;
        margin-bottom: 50px;
    }
    .service-image-column,
    .service-text-column {
        min-width: 100%; /* Bild und Text nehmen volle Breite ein */
    }
    /* `order` für mobile ist bereits im Basis-CSS der service-detail-section gesetzt */

    .service-detail-title {
        font-size: 2em;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    .service-detail-description {
        font-size: 0.95em;
        margin-bottom: 20px;
    }
    .service-detail-heading {
        font-size: 1.15em;
        margin-bottom: 10px;
    }
    .service-detail-list li {
        font-size: 0.9em;
        padding: 5px 0;
    }
    .service-detail-list li::before {
        font-size: 0.8em;
        top: 2px;
    }
    .image-frame-wrapper {
        padding: 15px; /* Angepasstes Padding für den Rahmen */
    }
    .image-frame-wrapper::before,
    .image-frame-wrapper::after {
        width: 30px;
        height: 30px;
    }
    .image-frame-wrapper::before {
        transform: translate(-5px, -5px);
    }
    .image-frame-wrapper::after {
        transform: translate(5px, 5px);
    }
    .image-frame-wrapper:hover::before {
        transform: translate(-8px, -8px);
    }
    .image-frame-wrapper:hover::after {
        transform: translate(8px, 8px);
    }

    .cta-bottom {
        padding: 50px 0;
    }
    .cta-bottom .cta-title {
        font-size: 2em;
    }
    .cta-bottom .cta-description {
        font-size: 0.95em;
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .page-hero {
        min-height: 200px;
        padding-bottom: 25px;
    }
    .page-hero .page-title {
        font-size: 2em;
        margin-bottom: 8px;
    }
    .page-hero .page-title::after {
        width: 50px;
        height: 2px;
    }
    .page-hero .page-subtitle {
        font-size: 0.9em;
    }

    .main-services-section {
        padding: 40px 0;
    }
    .service-detail-section {
        gap: 20px;
        margin-bottom: 40px;
        padding: 0 15px;
    }
    .image-frame-wrapper {
        padding: 10px; /* Angepasstes Padding für den Rahmen */
    }
    .image-frame-wrapper::before,
    .image-frame-wrapper::after {
        width: 25px;
        height: 25px;
    }
    .image-frame-wrapper::before {
        transform: translate(-3px, -3px);
    }
    .image-frame-wrapper::after {
        transform: translate(3px, 3px);
    }
    .image-frame-wrapper:hover::before {
        transform: translate(-5px, -5px);
    }
    .image-frame-wrapper:hover::after {
        transform: translate(5px, 5px);
    }
    .service-detail-title {
        font-size: 1.8em;
        margin-bottom: 8px;
        padding-bottom: 8px;
    }
    .service-detail-title::after {
        width: 40px;
    }
    .service-detail-description {
        font-size: 0.85em;
        margin-bottom: 15px;
    }
    .service-detail-heading {
        font-size: 1.05em;
        margin-bottom: 8px;
    }
    .service-detail-list li {
        font-size: 0.85em;
        padding: 4px 0;
    }

    .cta-bottom {
        padding: 40px 0;
    }
    .cta-bottom .cta-title {
        font-size: 1.8em;
    }
}


























/* --- Vorteile Sektion (Benefits Section) --- */
.benefits-section {
    background-color: var(--active-bg-color); /* Nutzt eine bereits definierte, helle Hintergrundfarbe */
    text-align: center; /* Zentriert den Titel */
    padding: 100px 0; /* Erhöhter Abstand nach oben und unten */
}

.benefits-grid {
    display: flex;
    flex-wrap: wrap; /* Ermöglicht Umbruch der Karten auf kleineren Bildschirmen */
    justify-content: center; /* Zentriert die Karten horizontal */
    gap: 30px; /* Abstand zwischen den Karten */
    margin-top: 40px; /* Abstand zum Titel */
}

.benefit-card {
    background-color: var(--box-bg-color); /* Weißer Hintergrund für die Karten */
    padding: 30px;
    border-radius: 8px;
    box-shadow: var(--box-shadow-light); /* Weicher Schatten */
    text-align: center;
    flex: 1; /* Ermöglicht das Wachsen und Schrumpfen der Karten */
    min-width: 280px; /* Minimale Breite, bevor die Karte umbricht */
    max-width: 350px; /* Maximale Breite, um sie nicht zu breit werden zu lassen */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Sanfte Übergänge für Hover-Effekt */
}

.benefit-card:hover {
    transform: translateY(-5px); /* Karte bewegt sich leicht nach oben */
    box-shadow: 0 8px 25px rgba(0,0,0,0.15); /* Schatten wird stärker */
}

.benefit-icon {
    font-size: 48px; /* Größe der Icons */
    color: var(--accent-color); /* Akzentfarbe für Icons */
    margin-bottom: 20px; /* Abstand zum Titel der Karte */
}

.benefit-title {
    font-size: 24px;
    color: var(--text-color);
    margin-bottom: 10px;
    font-family: var(--font-heading);
    font-weight: 700;
}

.benefit-description {
    font-size: 16px;
    color: var(--light-text-color);
    line-height: 1.6;
}

/* Responsive Anpassungen für kleinere Bildschirme */
@media (max-width: 768px) {
    .benefits-grid {
        flex-direction: column; /* Stapelt die Karten vertikal */
        align-items: center; /* Zentriert die gestapelten Karten */
    }
    .benefit-card {
        width: 90%; /* Die Karten nehmen mehr Breite ein */
        max-width: 400px; /* Begrenzung der maximalen Breite für Lesbarkeit */
    }
}

@media (max-width: 480px) {
    .benefit-card {
        padding: 25px; /* Etwas weniger Padding auf sehr kleinen Bildschirmen */
    }
    .benefit-icon {
        font-size: 40px; /* Icons etwas kleiner */
    }
    .benefit-title {
        font-size: 22px; /* Titel etwas kleiner */
    }
}
































/* --- Team Sektion (Team Section) --- */
.team-section {
    background-color: var(--main-bg-color); /* Hintergrundfarbe (Standard: Weiß) */
    text-align: center;
    padding: 80px 0; /* Standard Innenabstand oben und unten */
}

.team-section .section-description {
    max-width: 800px; /* Begrenzt die Breite der Beschreibung für bessere Lesbarkeit */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px; /* Abstand zwischen Beschreibung und Team-Grid */
}

.team-grid {
    display: grid;
    /* Responsive Grid: Karten passen sich an, Mindestbreite 280px */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px; /* Abstand zwischen den Karten */
    justify-content: center; /* Zentriert die Karten, wenn sie die Reihe nicht komplett füllen */
    margin-top: 40px;
}

.team-member-card {
    background-color: var(--box-bg-color); /* Hintergrundfarbe der Karten (Standard: Weiß) */
    padding: 30px;
    border-radius: 8px;
    box-shadow: var(--box-shadow-light); /* Weicher Schatten */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Sanfte Übergänge für Hover-Effekt */
}

.team-member-card:hover {
    transform: translateY(-5px); /* Karte bewegt sich leicht nach oben */
    box-shadow: 0 8px 25px rgba(0,0,0,0.15); /* Schatten wird stärker */
}

.team-member-card img {
    width: 150px; /* Größe des Teammember-Bildes */
    height: 150px;
    border-radius: 50%; /* Bild rund machen */
    object-fit: cover; /* Sicherstellen, dass das Bild den Bereich ausfüllt */
    margin-bottom: 20px;
    border: 4px solid var(--accent-color); /* Optional: dünner Rahmen um das Bild */
}

.team-member-card h3 {
    font-size: 22px;
    color: var(--text-color);
    margin-bottom: 5px;
    font-family: var(--font-heading);
    font-weight: 700;
}

.team-member-card p {
    font-size: 16px;
    color: var(--light-text-color);
    margin-bottom: 0;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .team-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
    }
    .team-member-card img {
        width: 120px;
        height: 120px;
    }
    .team-member-card h3 {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .team-section {
        padding: 60px 0;
    }
    .team-grid {
        grid-template-columns: 1fr; /* Karten vertikal stapeln */
        padding: 0 20px; /* Etwas Seiten-Padding hinzufügen */
    }
    .team-member-card {
        padding: 25px;
    }
}




































/* --- Hero-Sektion mit Text links unten --- */
.hero-bottom-left-section {
    position: relative; /* Für die Positionierung des Overlays und des Inhalts */
    background-image: url('../images/content/wasserhahn.jpg'); /* Pfad zu deinem Bild */
    background-size: cover; /* Bild soll den gesamten Bereich abdecken */
    background-position: center center; /* Bild im Zentrum positionieren */
    background-repeat: no-repeat; /* Bild nicht wiederholen */
    color: #ffffff; /* Textfarbe Weiß */
    min-height: 500px; /* Mindesthöhe der Sektion, passe sie bei Bedarf an */
    display: flex; /* Für die vertikale Ausrichtung des Inhalts */
    align-items: flex-end; /* Inhalt am unteren Rand ausrichten */
    padding-bottom: 80px; /* Innenabstand vom unteren Rand des Bildes */
    padding-top: 80px; /* Innenabstand vom oberen Rand, um den gesamten Bereich abzudecken */
}

/* Overlay für bessere Lesbarkeit des Textes */
.hero-bottom-left-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Verlauf von unten dunkel zu oben transparent */
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 100%);
    z-index: 1; /* Overlay unter dem Inhalt */
}

.hero-bottom-left-section .container {
    position: relative; /* Stellt sicher, dass der Container über dem Overlay liegt */
    z-index: 2; /* Inhaltsebene über dem Overlay */
    text-align: center; /* Text linksbündig */
}

.hero-bottom-left-section .text-content {
    max-width: 600px; /* Begrenzt die Breite des Textes für bessere Lesbarkeit */
    /* Keine zusätzlichen Flex- oder Grid-Eigenschaften hier, damit es sich natürlich anpasst */
}

.hero-bottom-left-section .main-heading {
    font-size: 52px;
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #ffffff;
}

.hero-bottom-left-section .description-text {
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 0;
    color: #f0f0f0; /* Leicht gebrochenes Weiß für die Beschreibung */
}

/* Responsive Anpassungen */
@media (max-width: 992px) {
    .hero-bottom-left-section .main-heading {
        font-size: 44px;
    }
    .hero-bottom-left-section .description-text {
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    .hero-bottom-left-section {
        min-height: 400px;
        padding-bottom: 60px;
    }
    .hero-bottom-left-section .main-heading {
        font-size: 36px;
    }
    .hero-bottom-left-section .description-text {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .hero-bottom-left-section {
        min-height: 350px;
        padding-bottom: 40px;
    }
    .hero-bottom-left-section .main-heading {
        font-size: 28px;
    }
    .hero-bottom-left-section .description-text {
        font-size: 15px;
    }
    .hero-bottom-left-section .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}




































/* --- Kontaktinformations-Block (Drei Karten) --- */
.contact-info-block {
    background-color: var(--box-bg-color); /* Leicht grauer Hintergrund für die Sektion */
    padding: 80px 0; /* Innenabstand oben und unten */
}

.contact-info-block .section-title,
.contact-info-block .section-description {
    margin-bottom: 50px; /* Abstand nach der Überschrift und Beschreibung */
}

.contact-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Drei gleichbreite Spalten */
    gap: 30px; /* Abstand zwischen den Karten */
    margin-top: 50px; /* Abstand zu den oberen Texten */
}

.contact-card {
    background-color: var(--box-bg-color); /* Weißer Hintergrund für jede Karte */
    padding: 40px 30px; /* Innenabstand der Karten */
    border-radius: 8px; /* Abgerundete Ecken */
    box-shadow: var(--box-shadow-light); /* Dezenter Schatten */
    text-align: center; /* Text in der Karte zentrieren */
    display: flex;
    flex-direction: column;
    align-items: center; /* Icons und Text zentral ausrichten */
}

.contact-card-icon {
    font-size: 48px; /* Größe der Icons */
    color: var(--accent-color); /* Akzentfarbe für Icons */
    margin-bottom: 25px; /* Abstand zum Titel */
    min-height: 48px; /* Sicherstellen, dass Icons genug Platz haben */
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-card-title {
    font-size: 24px; /* Größe der Kartentitel */
    color: var(--text-color);
    margin-bottom: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.contact-card p {
    font-size: 17px;
    color: var(--light-text-color);
    line-height: 1.6;
    margin-bottom: 8px; /* Abstand zwischen den Detailzeilen */
}

.contact-card p:last-child {
    margin-bottom: 0; /* Kein zusätzlicher Abstand nach dem letzten Absatz */
}

.contact-card a {
    color: var(--accent-color); /* Linkfarbe für E-Mail */
    text-decoration: none;
}

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

/* Responsive Anpassungen für Kontaktkarten */
@media (max-width: 992px) {
    .contact-cards-grid {
        grid-template-columns: repeat(2, 1fr); /* Zwei Spalten auf mittelgroßen Bildschirmen */
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .contact-info-block {
        padding: 60px 0;
    }
    .contact-cards-grid {
        grid-template-columns: 1fr; /* Eine Spalte auf kleinen Bildschirmen */
        gap: 20px;
        margin-top: 30px;
    }
    .contact-info-block .section-title,
    .contact-info-block .section-description {
        margin-bottom: 30px;
    }
    .contact-card {
        padding: 30px 20px;
    }
    .contact-card-icon {
        font-size: 40px;
        margin-bottom: 20px;
    }
    .contact-card-title {
        font-size: 22px;
    }
    .contact-card p {
        font-size: 16px;
    }
}















































/* --- Wo Sie uns finden & Kontaktformular Block --- */
.location-contact-section {
    background-color: var(--main-bg-color); /* Weißer Hintergrund für die Sektion */
    padding: 80px 0; /* Innenabstand oben und unten */
}

.location-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Zwei gleichbreite Spalten */
    gap: 60px; /* Abstand zwischen den Spalten */
    align-items: flex-start; /* Spalteninhalte oben ausrichten */
}

.location-details .section-subtitle,
.contact-form-wrapper .section-subtitle {
    font-size: 28px; /* Größe der Unterüberschriften */
    color: var(--text-color);
    margin-bottom: 30px;
    font-weight: 600;
}

.location-details .contact-item {
    display: flex;
    align-items: flex-start; /* Icon und Text oben ausrichten */
    margin-bottom: 25px; /* Abstand zur Karte */
}

.location-details .contact-item i {
    font-size: 24px; /* Größe des Icons */
    color: var(--accent-color); /* Akzentfarbe für Icon */
    margin-right: 15px; /* Abstand zwischen Icon und Text */
    min-width: 24px; /* Sicherstellen, dass das Icon genug Platz hat */
}

.location-details .contact-item p {
    font-size: 17px;
    color: var(--text-color);
    line-height: 1.5;
    margin-bottom: 0;
}

.map-container {
    border-radius: 8px; /* Abgerundete Ecken für die Karte */
    overflow: hidden; /* Sicherstellen, dass die Rundung angewendet wird */
    box-shadow: var(--box-shadow-light); /* Dezenter Schatten für die Karte */
    margin-bottom: 30px; /* Abstand zur Anfahrt */
}

.map-container iframe {
    width: 100%;
    height: 400px; /* Höhe der Karte */
    display: block; /* Entfernt zusätzlichen Platz unter dem iframe */
}

.directions-title {
    font-size: 24px; /* Größe der Anfahrts-Überschrift */
    color: var(--text-color);
    margin-bottom: 15px;
    font-weight: 600;
}

.location-details p {
    font-size: 17px;
    color: var(--light-text-color);
    line-height: 1.6;
}

.contact-form {
    padding: 40px; /* Innenabstand des Formulars */
    background-color: var(--box-bg-color); /* Weißer Hintergrund für das Formular */
    border-radius: 8px; /* Abgerundete Ecken */
    box-shadow: 0 8px 30px rgba(0,0,0,0.12); /* Stärkerer Schatten, damit es hervorsticht */
}

.contact-form .form-group {
    margin-bottom: 20px; /* Abstand zwischen Formulargruppen */
}

.contact-form label {
    display: block; /* Label über dem Eingabefeld */
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-color);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    color: var(--text-color);
    background-color: #f9f9f9; /* Leicht grauer Hintergrund für Eingabefelder */
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: var(--accent-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 119, 182, 0.2); /* Blauer Fokus-Schatten */
}

.contact-form textarea {
    resize: vertical; /* Nur vertikale Größenänderung erlauben */
}

.contact-form .form-checkbox {
    display: flex;
    align-items: flex-start; /* Checkbox und Text oben ausrichten */
    margin-top: 25px;
    margin-bottom: 25px;
}

.contact-form .form-checkbox input[type="checkbox"] {
    width: auto; /* Standardbreite für Checkbox */
    margin-right: 10px; /* Abstand zur Checkbox */
    position: relative; /* Für Ausrichtung */
    top: 3px; /* Leichte vertikale Anpassung */
}

.contact-form .form-checkbox label {
    margin-bottom: 0;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
}

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

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

.contact-form .btn-block {
    width: 100%; /* Button über die volle Breite */
    padding: 15px 20px;
    font-size: 18px;
}
.form-popup {
    margin-top: 10px;
    font-size: 0.95em;
    color: var(--text-color);
}
.form-popup.error {
    color: #c0392b;
}

/* Responsive Anpassungen */
@media (max-width: 992px) {
    .location-contact-grid {
        grid-template-columns: 1fr; /* Eine Spalte auf mittelgroßen Bildschirmen */
        gap: 40px; /* Abstand zwischen den gestapelten Blöcken */
    }
    .location-details .section-subtitle,
    .contact-form-wrapper .section-subtitle {
        text-align: center; /* Überschriften zentrieren */
    }
    .location-details .contact-item {
        justify-content: center; /* Adresse zentrieren */
    }
    .location-details .contact-item i {
        margin-right: 10px; /* Kleinerer Abstand für Icon */
    }
}

@media (max-width: 768px) {
    .location-contact-section {
        padding: 60px 0;
    }
    .location-details .section-subtitle,
    .contact-form-wrapper .section-subtitle {
        font-size: 24px;
        margin-bottom: 20px;
    }
    .map-container iframe {
        height: 350px;
    }
    .directions-title {
        font-size: 22px;
    }
    .location-details p {
        font-size: 16px;
    }
    .contact-form {
        padding: 30px;
    }
    .contact-form .btn-block {
        font-size: 16px;
        padding: 12px 15px;
    }
}

@media (max-width: 480px) {
    .location-contact-section {
        padding: 40px 0;
    }
    .map-container iframe {
        height: 280px;
    }
    .contact-form {
        padding: 20px;
    }
    .location-details .contact-item {
        flex-direction: column; /* Icon über Text stapeln */
        align-items: center;
        text-align: center;
    }
    .location-details .contact-item i {
        margin-right: 0;
        margin-bottom: 8px;
    }
}

/* --- Impressum --- */
.legal-section {
    background-color: var(--main-bg-color);
    padding: 80px 0;
}

.legal-wrapper {
    max-width: 960px;
    margin: 0 auto;
}

.legal-card {
    background-color: var(--box-bg-color);
    border-radius: 8px;
    box-shadow: var(--box-shadow-light);
    padding: 40px;
    line-height: 1.7;
}

.legal-card h2 {
    font-size: 28px;
    margin-bottom: 20px;
}

.legal-card h3 {
    font-size: 20px;
    margin-top: 28px;
    margin-bottom: 10px;
}

.legal-card p {
    margin: 0 0 12px 0;
    color: var(--text-color);
}

.legal-card a {
    color: var(--accent-color);
}

.legal-card ul {
    margin: 0 0 16px 0;
    padding-left: 18px;
}

@media (max-width: 600px) {
    .legal-section {
        padding: 60px 0;
    }
    .legal-card {
        padding: 28px;
    }
    .legal-card h2 {
        font-size: 24px;
    }
}


/* --- Captcha Styling --- */
.captcha-group {
    margin-bottom: 25px; /* Abstand zur nächsten Formulargruppe */
}

.captcha-display {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Abstand zum Input-Feld */
    background-color: #e9e9e9; /* Heller Hintergrund für das Captcha-Feld */
    border-radius: 5px;
    padding: 10px;
    justify-content: space-between;
    border: 1px solid #ddd;
}

#captcha {
    font-size: 22px;
    font-weight: bold;
    color: var(--text-color);
    flex-grow: 1; /* Nimmt den verfügbaren Platz ein */
    text-align: center;
}

#refresh-captcha {
    background-color: var(--accent-color); /* Akzentfarbe für den Button */
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

#refresh-captcha:hover {
    background-color: darken(var(--accent-color), 10%); /* Dunkler beim Hover */
    /* Hinweis: `darken()` ist eine SASS/LESS Funktion. In reinem CSS müssten Sie eine spezifische dunklere Farbe definieren, z.B. #005a92 */
    background-color: #005a92; /* Konkreter Wert für Hover, wenn kein SASS/LESS */
}


/* --- Pop-up Styling --- */
.popup {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 15px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    z-index: 1000; /* Stellt sicher, dass das Pop-up über allem liegt */
    text-align: center;
    min-width: 250px;
}

.popup.show {
    opacity: 1;
    visibility: visible;
}



/* --- 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(--third-bg-color); /* Angepasst auf --third-bg-color */
    color: var(--main-bg-color); /* Weißer Text auf dunklem Hintergrund */
    padding: 30px 20px; /* Mehr vertikales Padding für Luftigkeit */
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Helle, transparente Linie */
    box-shadow: 0px -8px 25px rgba(0, 0, 0, 0.4);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    animation: fadeInBottom 0.7s ease forwards;
}

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

.initial-cookie-toast p {
    font-size: 1.05em;
    margin-bottom: 25px;
    max-width: 960px;
    width: 100%;
    font-weight: 400;
    line-height: 1.6;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-family: var(--font-body);
}

.toast-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.toast-buttons button,
.popup-actions button {
    padding: 15px 30px;
    border: none;
    cursor: pointer;
    font-size: 1.05em;
    font-weight: 500;
    border-radius: 10px;
    transition: all 0.3s ease;
    flex-grow: 1;
    min-width: 180px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    color: var(--main-bg-color); /* Weißer Text auf Buttons */
    font-family: var(--font-body);
}

.toast-buttons button:hover,
.popup-actions button:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    filter: brightness(1.2);
}

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

/* Die Decline-Buttons nutzen die Second-BG-Color für eine neutralere Optik */
.decline-all-toast-btn,
.decline-all-popup-btn {
    background-color: var(--sec-bg-color); /* Ihr Grau als sekundäre Farbe */
}

/* Die Einstellungen/Speichern-Buttons nutzen eine hellere Textfarbe für einen subtileren Look */
.open-settings-toast-btn,
.save-btn {
    background-color: var(--light-text-color); /* Etwas helleres Grau für dezentere Buttons */
}

/* Hover-Effekt für die Hintergrundfarbe */
.accept-all-toast-btn:hover,
.accept-all-popup-btn:hover {
    background-color: #005f9e; /* Eine leicht dunklere Variante von --accent-color */
}
.decline-all-toast-btn:hover,
.decline-all-popup-btn:hover {
    background-color: #798a8f; /* Eine leicht dunklere Variante von --sec-bg-color */
}
.open-settings-toast-btn:hover,
.save-btn:hover {
    background-color: var(--accent-color); /* Akzentfarbe beim Hover für Einstellungen */
}


/* --- 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(0, 0, 0, 0.75);
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.cookie-details-popup.show {
    display: flex;
    animation: fadeInBackground 0.5s ease forwards;
}

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

/* Styling für den Popup-Inhalt */
.popup-content {
    background-color: var(--third-bg-color); /* Angepasst auf --third-bg-color */
    margin: auto;
    padding: 50px;
    border-radius: 15px;
    width: 95%;
    max-width: 850px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
    position: relative;
    color: var(--main-bg-color); /* Weißer Text im Popup */
    animation: slideInFromTop 0.6s ease forwards;
    display: flex;
    flex-direction: column;
    gap: 30px;
    font-family: var(--font-body);
}

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

.close-btn2 {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7); /* Leicht transparenter weißer Close-Button */
    font-size: 36px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 25px;
    z-index: 10001;
    transition: all 0.3s ease;
}

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

.popup-content h2 {
    text-align: center;
    margin-bottom: 20px;
    color: var(--accent-color); /* Akzentfarbe für Überschrift */
    font-size: 32px;
    font-weight: 700;
}

.popup-content p {
    font-size: 1em;
    margin-bottom: 15px;
    text-align: justify;
    line-height: 1.8;
    color: var(--main-bg-color); /* Weißer Text für Absätze */
}

.toggle-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

.toggle-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Sehr helle, transparente Trennlinie */
}

.toggle-item:last-child {
    border-bottom: none;
}

.toggle-item label {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--main-bg-color); /* Weißes Label */
    flex: 1 1 auto;
    min-width: 180px;
    align-self: center;
}

.toggle-item .description {
    font-size: 0.95em;
    color: rgba(255, 255, 255, 0.8); /* Leicht transparenter weißer Beschreibungstext */
    flex: 1 1 100%;
    margin-top: 5px;
    line-height: 1.6;
    padding-left: 0;
}

/* Stil für den Toggle-Schalter */
.toggle-item input[type="checkbox"] {
    position: relative;
    width: 55px;
    height: 30px;
    -webkit-appearance: none;
    appearance: none;
    background-color: rgba(255, 255, 255, 0.3); /* Heller, transparenter Hintergrund für Toggle */
    border-radius: 30px;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
    margin-left: auto;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
}

.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;
    height: 24px;
    background-color: var(--main-bg-color); /* Weißer Kreis */
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), background-color 0.2s ease;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}

.toggle-item input[type="checkbox"]:checked::before {
    transform: translateX(25px);
}

.toggle-item input[type="checkbox"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: rgba(255, 255, 255, 0.15); /* Heller, transparenter Hintergrund für deaktivierten Toggle */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
.toggle-item input[type="checkbox"]:disabled::before {
    background-color: rgba(255, 255, 255, 0.5); /* Heller, transparenter Kreis für deaktivierten Toggle */
}


.popup-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}

/* --- 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;
        gap: 15px;
        max-width: none;
    }
    .toast-buttons button {
        width: 100%;
        font-size: 0.9em;
        padding: 12px 15px;
        min-width: unset;
    }

    .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;
        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);
    }
}