/* Grundlegende Resets & Schriftarten */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ROOT-Variablen für Farben */
:root {
    --primary-blue: #0d1b2a; /* Dunkles, sattes Blau */
    --light-blue: #1a2a3e; /* Etwas helleres Blau für Verläufe */
    --accent-orange: #FF6B00; /* Leuchtendes Orange */
    --dark-orange: #E65A00; /* Dunkleres Orange für Hover */
    --white: #ffffff; /* Weiß für Text und Icons */
    --text-dark: #333333; /* Dunkler Text für weißen Hintergrund */
    --text-light-translucent: rgba(255, 255, 255, 0.9); /* Leicht transparenter Weiß-Ton */
    --bg-translucent: rgba(255, 255, 255, 0.1); /* Transparenter Weiß-Ton für Hintergründe */
    --border-translucent: rgba(255, 255, 255, 0.2); /* Transparenter Weiß-Ton für Ränder */
    --card-bg-white: #ffffff; /* Hintergrundfarbe für Karten */
    --card-border: #e0e0e0; /* Randfarbe für Karten */
    --icon-circle-bg: #e6f0ff; /* Hintergrund für Icon-Kreis */
    --success-green: #28a745; /* Ein schönes, klares Grün für Icons */


    /* Schatten-Variablen für hellen Header */
    --shadow-header-start: 0 4px 15px rgba(0, 0, 0, 0.1); /* Deutlicher Startschatten */
    --shadow-header-scrolled: 0 8px 25px rgba(0, 0, 0, 0.2); /* Stärkerer Schatten beim Scrollen */

    /* Schatten-Variablen für dunkle Bereiche */
    --shadow-dark: rgba(0, 0, 0, 0.2); /* Standard dunkler Schatten */
    --shadow-darker: rgba(0, 0, 0, 0.3); /* Stärkerer dunkler Schatten */
    --card-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* Schatten für Karten */
    --card-hover-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* Stärkerer Schatten beim Hover */
}

html, body {
  overflow-x: hidden;
}


body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: var(--white); /* Standardtextfarbe für dunkle Bereiche */
    background-color: var(--primary-blue); /* Dunkles Blau als Haupt-Hintergrund */
    overflow-x: hidden; /* Verhindert horizontales Scrollen */
    scroll-behavior: smooth;
}

/* Verhindert Scrollen, wenn Mobile Nav offen ist */
body.mobile-nav-open {
    overflow: hidden;
}

.container {
    max-width: 1200px; /* Standard-Containerbreite für Inhalte */
    margin: 0 auto;
    padding: 0 20px;
}

/* Neuer Full-Width Container */
.full-width-container {
    max-width: 1600px; /* Standard-Containerbreite für Inhalte */
    margin: 0 auto;
}

/* Spezifische Container-Breite für den Header auf großen Bildschirmen */
.header-content {
    max-width: 1440px; /* Breiterer Container für den Header */
    margin: 0 auto;
    padding: 0 40px; /* Mehr Padding an den Seiten für größere Bildschirme */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Visually hidden but accessible to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

a {
    text-decoration: none;
    color: inherit; /* Links erben Farbe vom Elternelement */
}

ul {
    list-style: none;
}

/* Skiplink für Barrierefreiheit */
.skip-link {
    position: absolute;
    top: -40px; /* Standardmäßig außerhalb des sichtbaren Bereichs */
    left: 0;
    background-color: var(--primary-blue); /* Hintergrundfarbe des Links */
    color: var(--white); /* Textfarbe */
    padding: 8px 12px;
    z-index: 9999; /* Stellt sicher, dass er über allem liegt */
    font-size: 1em;
    text-decoration: none;
    transition: top 0.3s ease-in-out;
    border-radius: 0 0 5px 5px;
}

.skip-link:focus {
    top: 0; /* Bei Fokus sichtbar machen */
    outline: 2px solid var(--accent-orange); /* Deutlicher Fokusindikator */
    outline-offset: 2px;
}

/* Allgemeine Button-Styles */
.btn-primary {
    display: inline-flex;
    align-items: center;
    background-color: var(--accent-orange);
    color: var(--white);
    padding: 12px 25px;
    border-radius: 20px;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease, padding-right 0.3s ease;
    border: none;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.btn-primary:hover {
    background-color: var(--dark-orange);
    transform: translateY(-2px);
    padding-right: 40px;
}

/* Pfeil-Effekt für Buttons */
.btn-primary::after {
    content: '\2192';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 15px;
    opacity: 0;
    transform: translateX(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-size: 1.2em;
}

.btn-primary:hover::after {
    opacity: 1;
    transform: translateX(0);
}


/* ============================ */
/* HEADER STYLES */
/* ============================ */
#main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--white);
    padding: 15px 0;
    box-shadow: var(--shadow-header-start);
    z-index: 1000;
    transition: padding 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Header beim Scrollen (JavaScript fügt 'scrolled' Klasse hinzu) */
#main-header.scrolled {
    padding: 10px 0;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: var(--shadow-header-scrolled);
}

.logo img {
    height: 50px;
    transition: height 0.3s ease;
    padding-top: 10px;
}

#main-header.scrolled .logo img {
    height: 40px;
}

.main-nav ul {
    display: flex;
    gap: 30px;
}

.main-nav a {
    color: var(--primary-blue);
    font-weight: 600;
    transition: color 0.3s ease;
    position: relative;
}

.main-nav a:hover {
    color: var(--accent-orange);
}

.main-nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: var(--accent-orange);
    bottom: -5px;
    left: 0;
    transition: width 0.3s ease;
}

.main-nav a:hover::after {
    width: 100%;
}

.header-cta {
    font-size: 0.9em;
    padding: 10px 20px;
}

.hamburger-menu {
    background: none;
    border: none;
    font-size: 1.8em;
    cursor: pointer;
    display: none;
    color: var(--primary-blue);
}

/* ============================ */
/* MOBILE NAVIGATION OVERLAY */
/* ============================ */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background-color: var(--primary-blue);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: right 0.4s ease-in-out;
    box-shadow: -5px 0 15px var(--shadow-darker);
}

.mobile-nav-overlay.open {
    right: 0;
}

.mobile-nav-overlay .close-btn {
    background: none;
    border: none;
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 2em;
    cursor: pointer;
    color: var(--white);
    transition: transform 0.3s ease;
}

.mobile-nav-overlay .close-btn:hover {
    transform: rotate(90deg);
}

.mobile-nav-overlay ul {
    display: flex;
    flex-direction: column;
    gap: 30px;
    text-align: center;
    margin-bottom: 40px;
}

.mobile-nav-overlay ul li a {
    color: var(--white);
    font-size: 1.8em;
    font-weight: 600;
    transition: color 0.3s ease;
}

.mobile-nav-overlay ul li a:hover {
    color: var(--accent-orange);
}

.mobile-nav-overlay .mobile-cta {
    font-size: 1.1em;
    padding: 15px 30px;
}


/* ============================ */
/* HERO SECTION STYLES */
/* ============================ */
#hero-section {
    background: linear-gradient(180deg, var(--primary-blue) 0%, var(--light-blue) 100%);
    min-height: 80vh; /* Anpassung: Hero-Sektion kleiner */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 230px 0;
    position: relative;
    overflow: hidden;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
    margin-top: -60px;
    padding: 0 20px;
}

#hero-section h1 {
    font-size: 3.5em;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
    text-shadow: 0 4px 10px var(--shadow-darker);
}

#hero-section p {
    font-size: 1.3em;
    margin-bottom: 40px;
    color: var(--text-light-translucent);
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

.hero-cta {
    font-size: 1.1em;
    padding: 15px 35px;
    margin-bottom: 30px;
}

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

.usp-item {
    background-color: var(--bg-translucent);
    padding: 10px 25px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95em;
    font-weight: 500;
    border: 1px solid var(--border-translucent);
    backdrop-filter: blur(5px);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.usp-item:hover {
    transform: translateY(-5px);
    background-color: rgba(255, 255, 255, 0.15);
}

.usp-item i {
    color: var(--accent-orange);
    font-size: 1.2em;
}

/* ============================ */
/* CONTENT BLOCK GENERAL STYLES */
/* ============================ */
.content-block {
    background-color: var(--white);
    color: var(--text-dark);
    padding: 80px 0;
    text-align: center;
}

/* Entfernt das Padding vom inneren Container, da das äußere Element das Padding übernimmt */
.full-width-container .container {
    padding-top: 0;
    padding-bottom: 0;
}

.section-badge {
    display: inline-block;
    background-color: var(--accent-orange);
    color: var(--white);
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.section-title {
    font-size: 2.5em;
    font-weight: 700;
    margin-bottom: 50px;
    color: var(--primary-blue);
}


/* ============================ */
/* LEISTUNGEN (SERVICES) SECTION STYLES */
/* ============================ */
.leistung-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.leistung-card {
    background-color: var(--card-bg-white);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.leistung-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--card-hover-shadow);
}

.card-icon-wrapper {
    background-color: var(--icon-circle-bg);
    border-radius: 50%;
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
}

.card-icon-wrapper i {
    font-size: 2.5em;
    color: var(--primary-blue);
}

.leistung-card h3 {
    font-size: 1.4em;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--primary-blue);
}

.leistung-card p {
    font-size: 0.95em;
    line-height: 1.7;
    color: var(--text-dark);
    margin-bottom: 25px;
    flex-grow: 1;
}

/* Spezifische Button-Styles für Karten */
.btn-card {
    width: 100%;
    padding: 12px 0;
    font-size: 0.9em;
}

.btn-blue {
    background-color: var(--primary-blue);
    color: var(--white);
}

.btn-blue:hover {
    background-color: var(--light-blue);
}

.btn-orange {
    background-color: var(--accent-orange);
    color: var(--white);
}

.btn-orange:hover {
    background-color: var(--dark-orange);
}

/* All Leistungen Button (btn-secondary) */
.all-leistungen-cta {
    margin-top: 20px;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    background-color: var(--primary-blue);
    color: var(--white);
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease, gap 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1.1em;
    gap: 10px;
}

.btn-secondary:hover {
    background-color: var(--light-blue);
    transform: translateY(-2px);
    gap: 15px;
}

.btn-secondary i {
    font-size: 1.1em;
    color: var(--white);
}

.btn-secondary-arrow {
    transition: transform 0.3s ease;
    font-size: 1.2em;
    margin-left: 5px;
}

.btn-secondary:hover .btn-secondary-arrow {
    transform: translateX(5px);
}


/* ============================ */
/* PRELOADER STYLES */
/* ============================ */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-blue);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

#preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.spinner {
    border: 8px solid rgba(255, 255, 255, 0.3);
    border-top: 8px solid var(--accent-orange);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

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

/* ============================ */
/* BACK TO TOP BUTTON STYLES */
/* ============================ */
#backToTopBtn {
    display: block; /* Behält die Anzeige als Block, aber Kontrolle über Sichtbarkeit/Transparenz */
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99;
    background-color: var(--accent-orange);
    color: var(--white);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 1.5em;
    line-height: 50px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; /* Übergang für Opacity und Visibility hinzugefügt */
    outline: none;

    /* Für sanftes Ein-/Ausblenden */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Verhindert Klicks, wenn unsichtbar */
}

/* Klasse, die per JavaScript hinzugefügt wird, um den Button anzuzeigen */
#backToTopBtn.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Erlaubt Klicks, wenn sichtbar */
}


#backToTopBtn:hover {
    background-color: var(--dark-orange);
    transform: translateY(-3px);
}

#backToTopBtn:active {
    transform: translateY(0);
}

/* ============================ */
/* RESPONSIVE DESIGN (MEDIA QUERIES) */
/* ============================ */
/* Anpassung der Container-Breite für große Bildschirme */
@media (min-width: 1441px) {
    .container {
        max-width: 1200px;
    }
    .header-content {
        max-width: 1600px;
        padding: 0 60px;
    }
}


@media (max-width: 992px) {
    .main-nav, .header-cta {
        display: none;
    }

    .hamburger-menu {
        display: block;
    }
    .logo img {
    height: 42px;
    transition: height 0.3s ease;
    padding-top: 10px;
}

    #main-header.scrolled .logo img {
        height: 35px;
    }

    #hero-section {
        min-height: 80vh; /* Anpassung für kleinere Bildschirme */
        padding: 220px 0 90px 0; /* Etwas weniger Padding */
    }

    #hero-section h1 {
        font-size: 2.8em;
    }

    #hero-section p {
        font-size: 1.1em;
    }

    .hero-cta {
        font-size: 1.1em;
        padding: 15px 35px;
    }

    .usp-row {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .usp-item {
        width: 60%;
        justify-content: center;
    }

    /* Padding für den Header auf kleineren Bildschirmen anpassen */
    .header-content {
        padding: 0 20px;
        max-width: 960px;
    }

    /* Back to Top Button auf Mobil kleiner */
    #backToTopBtn {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 1.3em;
        line-height: 45px;
    }

    /* Leistungen Sektion auf Mobil */
    .section-title {
        font-size: 2em;
        margin-bottom: 30px;
    }

    .leistung-card {
        padding: 25px;
    }

    .card-icon-wrapper {
        width: 60px;
        height: 60px;
        margin-bottom: 20px;
    }

    .card-icon-wrapper i {
        font-size: 2em;
    }

    .leistung-card h3 {
        font-size: 1.2em;
    }

    .leistung-card p {
        font-size: 0.9em;
    }

    .btn-card {
        font-size: 0.85em;
        padding: 10px 0;
    }

    .btn-secondary {
        font-size: 1em;
        padding: 10px 20px;
    }
}

@media (max-width: 768px) {
    #hero-section {
        min-height: 80vh; /* Anpassung für kleinere Bildschirme */
        padding: 220px 0 90px 0; /* Etwas weniger Padding */
    }
    #hero-section h1 {
        font-size: 2.2em;
    }

    #hero-section p {
        font-size: 1em;
    }

    .hero-cta {
        font-size: 1em;
        padding: 12px 25px;
    }

    .header-content {
        padding: 0 15px;
    }

    .leistung-cards-grid {
        gap: 20px;
    }
    .usp-row{
        align-items: center;
    }

    /* NEU: USP-Items für Handyversion anpassen */
    .usp-item {
        padding: 10px 18px; /* Kleinerer Innenabstand */
        font-size: 0.85em; /* Kleinere Textgröße */
        border-radius: 25px; /* Stärker abgerundet (fast pillenförmig) */
        width: 70%;
    }

    .usp-item i {
        font-size: 1em; /* Kleinere Icon-Größe */
    }
}

@media (max-width: 576px) {
    .header-content, .hero-content {
        padding: 0 15px;
    }

    .mobile-nav-overlay ul li a {
        font-size: 1.5em;
    }

    .mobile-nav-overlay .mobile-cta {
        font-size: 1em;
        padding: 12px 25px;
    }

    .section-title {
        font-size: 1.8em;
    }
}















/* ============================ */
/* DIGITALISIERUNGSTHEMEN SECTION STYLES */
/* ============================ */
.bg-light-blue-gradient {
    background: linear-gradient(180deg, #f0f8ff 0%, #e0efff 100%); /* Sehr heller blauer Verlauf */
    color: var(--text-dark); /* Dunkler Text auf hellem Hintergrund */
}

/* Spezifisches Badge-Styling für Blau */
.section-badge.badge-blue {
    background-color: var(--primary-blue); /* Dunkelblau für das Badge */
    color: var(--white);
}

.themen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 3 Spalten auf großen Bildschirmen */
    gap: 30px; /* Mehr Abstand zwischen den Grid-Elementen */
    margin-top: 50px; /* Mehr Abstand zur Überschrift */
    margin-bottom: 70px; /* Mehr Abstand zur CTA-Box */
    text-align: left; /* Text in den Elementen linksbündig */
}

.thema-item {
    display: flex;
    align-items: flex-start; /* Icons oben ausrichten, Text kann umbrechen */
    gap: 15px;
    font-size: 1.15em; /* Etwas größere Schrift */
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.4; /* Bessere Zeilenhöhe */
    padding: 10px 0; /* Leichtes vertikales Padding für jeden Punkt */
}

.thema-item i {
    color: var(--accent-orange); /* Check-Circle in Orange */
    font-size: 1.6em; /* Etwas größeres Icon */
    flex-shrink: 0; /* Verhindert, dass das Icon schrumpft */
    margin-top: 2px; /* Feinjustierung für die vertikale Ausrichtung des Icons */
}

.thema-item span {
    flex-grow: 1; /* Lässt den Text den restlichen Platz einnehmen */
}

.call-to-action-box {
    background-color: var(--white); /* Weißer Hintergrund für die Box */
    border-radius: 12px; /* Etwas runder */
    padding: 50px 40px; /* Mehr Padding in der Box */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Deutlicherer Schatten */
    max-width: 850px; /* Etwas breiter */
    margin: 0 auto; /* Zentriert die Box */
    text-align: center;
}

.call-to-action-box h3 {
    font-size: 2em; /* Etwas größer */
    color: var(--primary-blue);
    margin-bottom: 18px; /* Etwas mehr Abstand */
    line-height: 1.2;
}

.call-to-action-box p {
    font-size: 1.15em; /* Etwas größer */
    color: var(--text-dark);
    margin-bottom: 35px; /* Mehr Abstand zum Button */
    max-width: 650px; /* Text begrenzen */
    margin-left: auto;
    margin-right: auto;
}

.cta-box-buttons {
    display: flex;
    flex-direction: row; /* Buttons nebeneinander auf Desktop */
    justify-content: center; /* Horizontale Zentrierung */
    align-items: center;
    gap: 30px; /* Mehr Abstand zwischen den Buttons/Text */
}

.cta-box-buttons .btn-primary {
    padding: 15px 40px; /* Etwas größerer Button */
    font-size: 1.05em;
    background-color: var(--primary-blue);
    color: var(--white);
    transition: background-color 0.3s ease, transform 0.2s ease, padding-right 0.3s ease;
}

.cta-box-buttons .btn-primary:hover {
    background-color: var(--light-blue);
}

.cta-box-buttons .btn-primary i {
    margin-right: 8px; /* Abstand zum Icon im Button */
    font-size: 1em; /* Standardgröße für Icons im Button */
}

.cta-box-buttons .btn-primary::after {
    content: '\2192';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 15px;
    opacity: 0;
    transform: translateX(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-size: 1.2em;
}

.cta-box-buttons .btn-primary:hover::after {
    opacity: 1;
    transform: translateX(0);
}

.cta-box-buttons .info-text {
    font-size: 0.95em;
    color: var(--text-dark);
    font-weight: 500;
    white-space: nowrap; /* Verhindert Umbruch von "Unverbindlich anfragen" */
}


/* ============================ */
/* RESPONSIVE DESIGN für neuen Block (Verfeinert) */
/* ============================ */
@media (max-width: 992px) {
    .themen-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 2 Spalten auf Tablets */
        gap: 25px;
        margin-top: 40px;
        margin-bottom: 50px;
    }

    .thema-item {
        font-size: 1.05em;
        padding: 8px 0;
    }

    .thema-item i {
        font-size: 1.4em;
    }

    .call-to-action-box {
        padding: 40px 30px;
    }

    .call-to-action-box h3 {
        font-size: 1.8em;
    }

    .call-to-action-box p {
        font-size: 1.05em;
    }

    .cta-box-buttons .btn-primary {
        padding: 14px 35px;
        font-size: 1em;
    }

    .cta-box-buttons .info-text {
        font-size: 0.9em;
    }
}

@media (max-width: 768px) {
    .themen-grid {
        grid-template-columns: 1fr; /* Eine Spalte auf kleineren Mobilgeräten */
        text-align: left; /* Wichtig: Text bleibt linksbündig */
        max-width: 450px; /* Maximale Breite für die Liste, für bessere Lesbarkeit */
        margin-left: auto;
        margin-right: auto;
        gap: 20px;
    }

    .thema-item {
        justify-content: flex-start; /* Wichtig: Inhalt bleibt linksbündig */
        font-size: 1.05em; /* Wieder auf 1.05em setzen, da Lesbarkeit wichtiger ist */
        padding: 12px 15px; /* Etwas mehr Padding um jeden Punkt */
        background-color: var(--white); /* Hintergrund für die Punkte */
        border-radius: 8px; /* Leichte Rundung */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Leichter Schatten für Trennung */
        border: 1px solid var(--card-border); /* Leichter Rand */
    }

    .thema-item i {
        font-size: 1.5em; /* Icon wieder etwas größer */
        margin-top: 0; /* Zurücksetzen der Feinjustierung */
    }

    .call-to-action-box h3 {
        font-size: 1.6em;
    }

    .call-to-action-box p {
        font-size: 1em;
    }

    .cta-box-buttons {
        flex-direction: column; /* Buttons untereinander auf Mobil */
        gap: 15px;
    }

    .cta-box-buttons .btn-primary {
        width: 100%; /* Button nimmt volle Breite ein */
        max-width: 300px; /* Begrenzte Breite für den Button */
        padding: 15px 25px;
        text-align: center; /* Text im Button zentrieren */
        justify-content: center; /* Icon und Text zentrieren */
    }

    .cta-box-buttons .btn-primary::after {
        display: none; /* Pfeil auf Mobil ausblenden, wenn Button volle Breite hat und zentriert ist */
    }

    .cta-box-buttons .info-text {
        margin-top: -5px; /* Näher an den Button rücken */
    }
}

@media (max-width: 576px) {
    .section-title {
        font-size: 2em; /* Titel auch auf kleinen Geräten groß genug lassen */
    }
    .call-to-action-box {
        padding: 30px 20px;
    }
    .call-to-action-box h3 {
        font-size: 1.4em;
    }
    .call-to-action-box p {
        font-size: 0.95em;
    }
}























/* Overall Section Styling (Hintergrundfarbe und Padding) */
.recruitment-section {
    background-color: var(--primary-blue); /* Hintergrund in Primärblau */
    padding: 80px 0;
}

/* Bereich für den zentrierten Header */
.recruitment-header-centered {
    text-align: center;
    margin-bottom: 60px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Überschrift im zentrierten Header */
.recruitment-title {
    font-size: 2.8em;
    font-weight: 700;
    color: var(--white); /* Textfarbe auf Weiß geändert */
    margin-bottom: 30px;
    display: flex;
    flex-direction: column; /* Icon und Text untereinander stapeln */
    align-items: center; /* Horizontale Zentrierung der gestapelten Elemente */
    line-height: 1.2;
    justify-content: center;
}

/* Icon-Stil in der Überschrift */
.recruitment-title .icon-prefix {
    font-size: 1.4em;
    margin-bottom: 15px;
    margin-right: 0;
    color: var(--accent-orange); /* Bleibt Orange als Akzentfarbe */
}

/* Intro-Absatz im zentrierten Header */
.recruitment-info-text.intro-paragraph {
    font-size: 1.15em;
    line-height: 1.8;
    color: var(--white); /* Textfarbe auf Weiß geändert */
}

/* Grid/Flexbox für die zwei Spalten */
.recruitment-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    align-items: flex-start;
}

/* Linker Bereich des zweispaltigen Layouts */
.recruitment-left-content {
    flex: 2;
    min-width: 300px;
    text-align: left; /* Standardmäßig linksbündig */
}

/* Überschrift für den linken Textblock */
.left-content-heading {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 15px;
    line-height: 1.3;
}


/* Verbleibender Infotext im linken Bereich */
.recruitment-left-content .recruitment-info-text {
    font-size: 1.1em;
    line-height: 1.7;
    color: var(--white);
    margin-bottom: 25px;
}

/* Bulletpoints mit Font Awesome Icons */
.recruitment-features {
    list-style: none;
    padding: 0;
    margin-top: 0;
}

.recruitment-features li {
    font-size: 1.05em;
    line-height: 1.6;
    margin-bottom: 15px;
    position: relative;
    padding-left: 35px; /* Platz für das absolut positionierte Icon im Desktop-Layout */
    color: var(--white);
}

/* Stil für die Font Awesome Icons in der Liste */
.recruitment-features li .feature-icon {
    position: absolute;
    left: 0;
    top: 3px;
    color: var(--success-green);
    font-size: 1.2em;
}

/* CTA Box Inhalte */
.recruitment-cta-box {
    flex: 1;
    min-width: 280px;
    background-color: var(--white);
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.recruitment-cta-box .cta-heading {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.recruitment-cta-box .cta-description {
    font-size: 1.1em;
    line-height: 1.6;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.recruitment-cta-box .recruitment-button {
    font-size: 1.1em;
    padding: 8px 40px;
    padding-top: 5px;
}

/* Responsive Anpassungen */
@media (max-width: 992px) {
    .recruitment-header-centered {
        margin-bottom: 40px;
    }
    .recruitment-grid {
        flex-direction: column;
        gap: 40px;
        align-items: center; /* Zentriert die gesamt-Spalten (left-content und cta-box) */
    }
    .recruitment-left-content,
    .recruitment-cta-box {
        flex: none;
        width: 100%;
        max-width: 500px; /* Begrenzt die Breite, damit die Elemente zentriert werden können */
    }
    .recruitment-cta-box {
        padding: 25px;
    }
    .recruitment-title {
        font-size: 2.4em;
    }
    .recruitment-title .icon-prefix {
        font-size: 1.6em;
    }

    /* Zentrierung aller Inhalte innerhalb des linken Blocks */
    .recruitment-left-content {
        text-align: center; /* Zentriert inline-level Inhalte im linken Block */
    }
    .left-content-heading {
        font-size: 1.4em;
        margin-bottom: 10px; /* Leichterer Abstand */
        text-align: center; /* Stellt sicher, dass die Überschrift zentriert ist */
    }
    .recruitment-left-content .recruitment-info-text {
        font-size: 1em;
        margin-bottom: 15px;
        text-align: center; /* Stellt sicher, dass der Text zentriert ist */
    }

    /* Zentrierung und Anpassung der Listenelemente */
    .recruitment-features li {
        display: flex; /* Machen Sie jedes Listenelement zu einem Flex-Container */
        justify-content: center; /* Zentriert den Inhalt (Icon + Text) horizontal */
        align-items: center; /* Zentriert vertikal */
        padding-left: 0; /* Entfernen Sie das ursprüngliche Padding für das Icon */
        margin-bottom: 10px; /* Abstand anpassen */
    }
    .recruitment-features li .feature-icon {
        position: static; /* Icon ist nicht mehr absolut positioniert */
        margin-right: 8px; /* Abstand zwischen Icon und Text */
        top: auto; /* Absolute Positionierung entfernen */
        left: auto; /* Absolute Positionierung entfernen */
        font-size: 1.1em;
    }
}

@media (max-width: 768px) {
    .recruitment-section {
        padding: 60px 0;
    }
    .recruitment-header-centered {
        margin-bottom: 30px;
    }
    .recruitment-title {
        font-size: 2em;
        margin-bottom: 25px;
    }
    .recruitment-title .icon-prefix {
        font-size: 1.2em;
        margin-bottom: 10px;
    }
    /* `recruitment-info-text` und `left-content-heading` sind bereits durch 992px zentriert */
    /* `recruitment-features li` und `feature-icon` sind bereits durch 992px angepasst */

    .recruitment-cta-box .cta-heading {
        font-size: 1.3em;
        margin-bottom: 10px;
    }
    .recruitment-cta-box .cta-description {
        font-size: 1.0em;
        margin-bottom: 10px;
    }
    .recruitment-cta-box .recruitment-button {
        font-size: 1em;
        padding: 12px 25px;
    }
}

@media (max-width: 576px) {
    .recruitment-section {
        padding: 40px 0;
    }
    .recruitment-header-centered {
        margin-bottom: 20px;
    }
    .recruitment-cta-box {
        padding: 20px;
    }
    .recruitment-title {
        font-size: 1.8em;
    }
    .recruitment-title .icon-prefix {
        font-size: 1.5em;
        margin-bottom: 8px;
    }
    /* Alle Inhalte sind bereits durch 992px zentriert */
}






/* ============================ */
/* ZIELGRUPPE SECTION STYLES */
/* ============================ */
.bg-white {
    background-color: var(--white); /* Einfacher weißer Hintergrund */
}

/* Spezifisches Badge-Styling für Orange (falls noch nicht vorhanden) */
.section-badge.badge-orange {
    background-color: var(--accent-orange);
    color: var(--white);
}

.section-description {
    font-size: 1.2em;
    color: var(--text-dark);
    margin-bottom: 50px; /* Abstand zum Grid */
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.target-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* 5 Spalten auf großen Bildschirmen, flexibel */
    gap: 30px; /* Abstand zwischen den Karten */
    margin-bottom: 60px; /* Abstand zum Abschlusssatz */
    justify-content: center; /* Zentriert die Grid-Items horizontal, wenn sie nicht die volle Breite einnehmen */
    align-items: flex-start; /* Items oben ausrichten, falls Höhen variieren */
}

.target-group-item {
    background-color: var(--card-bg-white); /* Weißer Hintergrund für die Karten */
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 25px;
    text-align: center;
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; /* Flexbox für Inhalt, um Zentrierung zu erleichtern */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px; /* Mindesthöhe für Einheitlichkeit */
}

.target-group-item:hover {
    transform: translateY(-8px); /* Leichter Hover-Effekt */
    box-shadow: var(--card-hover-shadow);
}

.item-icon-wrapper {
    background-color: var(--icon-circle-bg); /* Hintergrundfarbe für den Icon-Kreis */
    border-radius: 50%;
    width: 65px;
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.item-icon-wrapper i {
    font-size: 2.3em;
    color: var(--primary-blue); /* Icon-Farbe */
}

.target-group-item h4 {
    font-size: 1.15em;
    font-weight: 600;
    color: var(--primary-blue);
    line-height: 1.3;
}

.final-statement {
    font-size: 1.25em;
    font-weight: 600;
    color: var(--primary-blue); /* Dunkelblau für den finalen Satz */
    margin-top: 20px; /* Abstand zum Grid */
    padding-bottom: 20px; /* Zusätzliches Padding für diese Sektion */
}


/* ============================ */
/* RESPONSIVE DESIGN für ZIELGRUPPE Block */
/* ============================ */
@media (max-width: 1200px) {
    .target-group-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); /* Anpassung für etwas kleinere Breiten */
    }
}

@media (max-width: 992px) {
    .section-description {
        font-size: 1.1em;
        margin-bottom: 40px;
    }
    .target-group-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Mehr Spalten auf Tablets, aber flexibel */
        gap: 20px;
        margin-bottom: 50px;
    }
    .target-group-item {
        padding: 20px;
        min-height: 160px;
    }
    .item-icon-wrapper {
        width: 60px;
        height: 60px;
        margin-bottom: 15px;
    }
    .item-icon-wrapper i {
        font-size: 2.1em;
    }
    .target-group-item h4 {
        font-size: 1.05em;
    }
    .final-statement {
        font-size: 1.15em;
    }
}

@media (max-width: 768px) {
    .target-group-grid {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); /* Anpassung auf kleinere Tablets */
        gap: 15px;
    }
    .target-group-item {
        padding: 15px;
        min-height: 140px;
    }
    .item-icon-wrapper {
        width: 55px;
        height: 55px;
        margin-bottom: 10px;
    }
    .item-icon-wrapper i {
        font-size: 2em;
    }
    .target-group-item h4 {
        font-size: 1em;
    }
    .final-statement {
        font-size: 1.05em;
    }
}

@media (max-width: 576px) {
    .section-description {
        font-size: 1em;
        margin-bottom: 30px;
    }
    .target-group-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* 2 oder 3 Spalten auf sehr kleinen Geräten, je nach Platz */
        gap: 10px;
        max-width: 400px; /* Begrenzt die Breite auf sehr kleinen Geräten für bessere Optik */
        margin-left: auto;
        margin-right: auto;
    }
    .target-group-item {
        padding: 15px 10px; /* Weniger horizontaler Padding */
        min-height: 130px;
    }
    .item-icon-wrapper {
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
    }
    .item-icon-wrapper i {
        font-size: 1.8em;
    }
    .target-group-item h4 {
        font-size: 0.9em; /* Kleinere Schriftgröße für den Titel */
    }
    .final-statement {
        font-size: 1em;
        padding-bottom: 10px;
    }
}

/* Feinjustierung für den Fall, dass nur 2 oder 1 Element pro Reihe passt */
@media (max-width: 400px) {
    .target-group-grid {
        grid-template-columns: repeat(2, 1fr); /* Erzwingt 2 Spalten auf sehr schmalen Bildschirmen */
    }
}















/* ============================ */
/* PROZESS SECTION STYLES */
/* ============================ */
.process-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 4 Spalten auf großen Bildschirmen */
    gap: 30px;
    margin-top: 50px;
    margin-bottom: 70px;
}

.process-step-item {
    background-color: var(--card-bg-white);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative; /* Für die absolute Positionierung der Nummer */
}

.process-step-item:hover {
    transform: translateY(-8px);
    box-shadow: var(--card-hover-shadow);
}

.step-icon-wrapper {
    background-color: var(--icon-circle-bg); /* Hintergrundfarbe für den Icon-Kreis */
    border-radius: 50%;
    width: 80px; /* Größerer Kreis */
    height: 80px; /* Größerer Kreis */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    position: relative; /* Für die Nummer */
}

.step-icon-wrapper i {
    font-size: 3em; /* Größeres Icon */
    color: var(--primary-blue);
}

.step-number {
    position: absolute;
    top: -10px; /* Oben links im Kreis */
    left: -10px; /* Oben links im Kreis */
    background-color: var(--accent-orange); /* Orange Kreis */
    color: var(--white);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9em;
    font-weight: 700;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Kleiner Schatten für die Nummer */
}

.process-step-item h3 {
    font-size: 1.3em;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--primary-blue);
}

.process-step-item p {
    font-size: 0.95em;
    line-height: 1.7;
    color: var(--text-dark);
    margin-bottom: 25px;
    flex-grow: 1; /* Lässt den Text den verfügbaren Platz einnehmen */
}

/* Spezifische Button-Styles für Prozessschritte (ähnlich btn-card) */
.btn-step {
    width: 100%; /* Button nimmt volle Breite der Karte ein */
    padding: 10px 0;
    font-size: 0.9em;
    border-radius: 5px; /* Angleichung an die anderen Buttons */
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Wiederverwendung der Farben von btn-blue und btn-orange */
.btn-step.btn-blue {
    background-color: var(--primary-blue);
    color: var(--white);
}

.btn-step.btn-blue:hover {
    background-color: var(--light-blue);
}

.btn-step.btn-orange {
    background-color: var(--accent-orange);
    color: var(--white);
}

.btn-step.btn-orange:hover {
    background-color: var(--dark-orange);
}

.process-cta-bottom {
    margin-top: 50px;
    padding-bottom: 20px; /* Zusätzliches Padding für diese Sektion */
}

.btn-process-start {
    font-size: 1.15em;
    padding: 15px 40px;
    /* Nutzt die vorhandenen btn-primary Stile inkl. Pfeil-Effekt */
    background-color: var(--primary-blue); /* Blauer Hintergrund wie im Design */
    color: var(--white);
}

.btn-process-start i {
    margin-right: 10px; /* Abstand zwischen Icon und Text */
}

.btn-process-start:hover {
    background-color: var(--light-blue); /* Helleres Blau beim Hover */
}


/* ============================ */
/* RESPONSIVE DESIGN für PROZESS Block */
/* ============================ */
@media (max-width: 992px) {
    .process-steps-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* 2 oder 3 Spalten auf Tablets */
        gap: 25px;
        margin-top: 40px;
        margin-bottom: 60px;
    }

    .process-step-item {
        padding: 25px;
    }

    .step-icon-wrapper {
        width: 70px;
        height: 70px;
        margin-bottom: 20px;
    }

    .step-icon-wrapper i {
        font-size: 2.5em;
    }

    .step-number {
        width: 28px;
        height: 28px;
        font-size: 0.85em;
    }

    .process-step-item h3 {
        font-size: 1.2em;
    }

    .process-step-item p {
        font-size: 0.9em;
    }

    .btn-step {
        padding: 9px 0;
        font-size: 0.85em;
    }

    .btn-process-start {
        font-size: 1.05em;
        padding: 12px 30px;
    }
}

@media (max-width: 768px) {
    .process-steps-grid {
        grid-template-columns: 1fr; /* Eine Spalte auf kleineren Mobilgeräten */
        max-width: 400px; /* Max Breite für die einzelnen Karten */
        margin-left: auto;
        margin-right: auto;
        gap: 20px;
    }

    .process-step-item {
        padding: 20px;
    }

    .step-icon-wrapper {
        width: 65px;
        height: 65px;
        margin-bottom: 15px;
    }

    .step-icon-wrapper i {
        font-size: 2.2em;
    }

    .step-number {
        width: 26px;
        height: 26px;
        font-size: 0.8em;
        top: -8px;
        left: -8px;
    }

    .process-step-item h3 {
        font-size: 1.1em;
    }

    .process-step-item p {
        font-size: 0.85em;
    }

    .btn-process-start {
        width: 100%; /* Button auf volle Breite auf Mobil */
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        justify-content: center; /* Icon und Text zentrieren */
        padding: 12px 25px;
        font-size: 1em;
    }

    .btn-process-start::after {
        display: none; /* Pfeil auf Mobil ausblenden */
    }
}

@media (max-width: 576px) {
    .section-title {
        font-size: 2em;
    }
}































/* ============================ */
/* TESTIMONIAL SECTION STYLES */
/* ============================ */
#testimonial-section {
    padding: 100px 0; /* Mehr Padding */
}

.testimonial-quote {
    font-size: 2.2em; /* Größerer Font */
    font-weight: 600;
    line-height: 1.4;
    color: var(--primary-blue); /* Dunkelblauer Text */
    max-width: 800px;
    margin: 40px auto 20px auto; /* Abstand von Badge und zum Autor */
    font-style: italic; /* Kursiv wie im Bild */
}

.testimonial-author {
    font-size: 1.1em;
    color: var(--text-dark);
    margin-bottom: 40px; /* Abstand zum Button */
}

.testimonial-cta {
    font-size: 1.05em;
    padding: 15px 35px;
    background-color: var(--accent-orange); /* Orange wie im Bild */
}

.testimonial-cta:hover {
    background-color: var(--dark-orange);
}

/* ============================ */
/* ABSCHLUSS-CTA SECTION STYLES */
/* ============================ */
.cta-bottom-section {
    background: linear-gradient(180deg, var(--primary-blue) 0%, var(--light-blue) 100%); /* Blauer Verlauf */
    color: var(--white);
    padding: 80px 0; /* Vertikales Padding */
    text-align: center;
}

.cta-bottom-section h2 {
    font-size: 2.8em; /* Großer Titel */
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
    text-shadow: 0 4px 10px var(--shadow-darker);
}

.cta-bottom-section p {
    font-size: 1.3em;
    margin-bottom: 40px;
    color: var(--text-light-translucent);
}

.cta-bottom-form {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Abstand zwischen den Elementen */
    margin-bottom: 20px;
    flex-wrap: wrap; /* Erlaubt Umbruch auf kleineren Bildschirmen */
}

.cta-form-btn {
    font-size: 1.1em;
    padding: 15px 35px;
    /* Nutzt btn-primary Standard-Stil */
}

.cta-form-btn i {
    margin-left: 10px; /* Abstand zum Pfeil */
    font-size: 1em;
}

.cta-form-input {
    padding: 15px 20px;
    border: 1px solid var(--border-translucent);
    border-radius: 8px;
    background-color: var(--bg-translucent);
    color: var(--white);
    font-size: 1em;
    width: 250px; /* Feste Breite für Input-Felder */
    max-width: 100%; /* Stellt sicher, dass sie nicht überlaufen */
    outline: none;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.cta-form-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.cta-form-input:focus {
    border-color: var(--accent-orange);
    background-color: rgba(255, 255, 255, 0.2);
}

.cta-form-info {
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 10px;
}

/* ============================ */
/* FOOTER STYLES */
/* ============================ */
#main-footer {
    background-color: var(--primary-blue); /* Dunkles Blau für den Footer */
    color: var(--white);
    padding: 50px 0;
    text-align: center;
}

.footer-content {
    display: flex;
    flex-direction: column; /* Standardmäßig untereinander */
    align-items: center;
    gap: 30px;
}

.footer-logo img {
    height: 40px; /* Größe des Logos */
    filter: brightness(0) invert(1); /* Macht das Logo weiß, falls es farbig ist */
}

/* Optional: Wenn du eine separate weiße Logo-Datei hast, kannst du den Filter weglassen */
/* Wenn deine logo.png bereits weiß ist, entferne den filter-Befehl oben.
   Wenn du eine neue weiße Logo-Datei hast (z.B. logo-white.png), stelle sicher, dass der Pfad stimmt. */


.footer-links ul {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-links a {
    color: var(--white);
    font-size: 0.9em;
    transition: color 0.3s ease;
    white-space: nowrap; /* Verhindert Umbruch */
}

.footer-links a:hover {
    color: var(--accent-orange);
}

.footer-text p {
    font-size: 0.85em;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
}


/* ============================ */
/* RESPONSIVE DESIGN für neue Blöcke */
/* ============================ */
@media (max-width: 992px) {
    #testimonial-section {
        padding: 80px 0;
    }
    .testimonial-quote {
        font-size: 1.8em;
    }
    .testimonial-author {
        font-size: 1em;
    }
    .testimonial-cta {
        padding: 12px 30px;
        font-size: 1em;
    }

    .cta-bottom-section {
        padding: 60px 0;
    }
    .cta-bottom-section h2 {
        font-size: 2.2em;
    }
    .cta-bottom-section p {
        font-size: 1.1em;
    }
    .cta-bottom-form {
        flex-direction: column; /* Buttons und Inputs untereinander */
        gap: 15px;
    }
    .cta-form-btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
        padding: 12px 25px;
        font-size: 1em;
    }
    .cta-form-btn i {
        display: none; /* Pfeil ausblenden */
    }
    .cta-form-input {
        width: 100%;
        max-width: 300px;
    }
    .cta-form-info {
        font-size: 0.85em;
    }

    #main-footer {
        padding: 40px 0;
    }
    .footer-content {
        gap: 20px;
    }
    .footer-links ul {
        gap: 20px;
    }
    .footer-links a {
        font-size: 0.85em;
    }
    .footer-text p {
        font-size: 0.8em;
    }
}

@media (max-width: 768px) {
    #testimonial-section {
        padding: 60px 0;
    }
    .testimonial-quote {
        font-size: 1.6em;
        margin: 30px auto 15px auto;
    }
    .testimonial-author {
        font-size: 0.9em;
        margin-bottom: 30px;
    }

    .cta-bottom-section h2 {
        font-size: 1.8em;
    }
    .cta-bottom-section p {
        font-size: 1em;
    }
    .cta-bottom-form {
        max-width: 300px; /* Für Zentrierung auf sehr kleinen Geräten */
        margin-left: auto;
        margin-right: auto;
    }

    #main-footer {
        padding: 30px 0;
    }
    .footer-links ul {
        flex-direction: column; /* Links untereinander im Footer auf Mobil */
        gap: 10px;
    }
    .footer-text p {
        font-size: 0.75em;
    }
}

@media (max-width: 576px) {
    .testimonial-quote {
        font-size: 1.4em;
    }
    .cta-bottom-section h2 {
        font-size: 1.6em;
    }
}















/* --- ANIMATION STYLES (fade-in, scale-in, delays) --- */

/* Grundzustand für alle animate-on-scroll Elemente */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    transform: translateY(30px); /* Standardmäßig leicht nach unten verschoben */
}

/* Zustand, wenn das Element sichtbar ist */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Spezifische Fade-In-Effekte */
.fade-in-left {
    transform: translateX(-100px); /* Startet links außerhalb des Viewports */
}

.fade-in-left.is-visible {
    transform: translateX(0);
}

.fade-in-right {
    transform: translateX(100px); /* Startet rechts außerhalb des Viewports */
}

.fade-in-right.is-visible {
    transform: translateX(0);
}

/* Spezifischer Fade-In-Up Effekt (für Hero und andere) */
.fade-in-up {
    transform: translateY(30px); /* Startet leicht unterhalb */
}

.fade-in-up.is-visible {
    transform: translateY(0);
}


/* Scale-In Effekt */
.scale-in {
    transform: scale(0.8); /* Startet kleiner */
    opacity: 0;
}

.scale-in.is-visible {
    transform: scale(1);
    opacity: 1;
}

/* Animationsverzögerungen */
/* Die eigentliche Verzögerung wird durch JS via setTimeout gesetzt,
   aber diese Klassen können verwendet werden, um die Intention im CSS zu zeigen. */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }
.delay-7 { transition-delay: 0.7s; }
.delay-8 { transition-delay: 0.8s; }
.delay-9 { transition-delay: 0.9s; }
.delay-10 { transition-delay: 1.0s; }



/* Animation Keyframes für den initialen Bounce-Effekt (bounceIn) */
@keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

/* Basisklasse für Elemente, die initial reinspringen sollen */
.bounce-in {
    opacity: 0; /* Anfangs unsichtbar */
    transform: scale3d(0.3, 0.3, 0.3); /* Startet klein */
    visibility: hidden; /* Versteckt bis zur Animation */
}

/* Wenn 'is-visible' durch JS hinzugefügt wird, die initiale Bounce-Animation anwenden */
.bounce-in.is-visible {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
    -webkit-animation-duration: 1s; /* Dauer der Animation */
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    visibility: visible; /* Während der Animation sichtbar machen */
}

/* Keyframes für den sanften, periodischen Bounce (nicht dauerhaft) */
@keyframes gentleBounce {
    0% {
        transform: translateY(0); /* Startposition */
    }
    10% { /* Nach 10% der Gesamtzeit (0.3s bei 3s Dauer) am höchsten Punkt */
        transform: translateY(-8px); /* Leicht nach oben bewegen */
    }
    20% { /* Nach 20% der Gesamtzeit (0.6s bei 3s Dauer) zurück auf Startposition */
        transform: translateY(0);
    }
    100% { /* Verbleibt auf der Startposition für den Rest des 3-Sekunden-Zyklus */
        transform: translateY(0);
    }
}

/* Die Klasse, die den sanften Bounce nach der initialen Animation anwendet */
.hero-cta.is-bouncing-idle {
    animation: gentleBounce 3s ease-in-out infinite; /* Gesamter Zyklus ist 3 Sekunden lang, unendlich wiederholend */
}







/* --- Kontaktseite Spezifische Styles (aktualisiert) --- */

/* Anpassung des Paddings für den Inhalt, da kein fixer Header mehr */
main {
    padding-top: 0; /* Kein fester Header mehr, daher kein Top-Padding */
}

#contact-section.contact-page-layout {
    padding-top: 60px; /* Zusätzliches Padding oben für die Kontaktseite */
}

.contact-page-layout .contact-header-content {
    text-align: center;
    margin-bottom: 50px;
}

.contact-page-layout .logo {
    margin-bottom: 30px; /* Abstand zum Badge */
    display: inline-block; /* Für Zentrierung */
}

.contact-page-layout .logo img {
    height: 70px; /* Größeres Logo auf der Kontaktseite */
    transition: none; /* Keine Höhenänderung beim Scrollen */
}

/* Anpassung des Badges für die Zentrierung */
.contact-page-layout .section-badge {
    display: block; /* Macht das Badge zu einem Block-Element */
    margin: 0 auto 20px; /* Zentriert es horizontal und gibt Abstand nach unten */
    position: static; /* Stellt sicher, dass keine absolute Positionierung stört */
    transform: none; /* Stellt sicher, dass keine Transformation stört */
}

.contact-form-wrapper {
    max-width: 700px; /* Maximale Breite für das Formular */
    margin: 0 auto; /* Zentriert das Formular */
    background-color: var(--light-blue);
    padding: 40px;
    border-radius: var(--border-radius-medium);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.contact-form-wrapper h3 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.8rem;
    color: var(--white);
}

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--white);
}

/* Verbesserte Input-Feld Styles */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    width: calc(100% - 24px); /* Platz für Padding berücksichtigen */
    padding: 14px 12px; /* Etwas mehr Padding */
    border: 1px solid #ddd; /* Etwas dunklerer Standard-Rand */
    border-radius: var(--border-radius-small);
    font-family: var(--font-primary);
    font-size: 1rem;
    color: var(--color-dark-grey);
    transition: border-color var(--transition-speed-normal) ease, box-shadow var(--transition-speed-normal) ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--color-accent-blue); /* Blauer Rand beim Fokus */
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.2); /* Sanfterer, aber deutlicherer Schatten */
}

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

.contact-form button[type="submit"] {
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
    margin-top: 20px;
    /* Bestehende Button-Styles vom btn-primary werden hier angewendet */
}

/* Responsive Anpassung für Logo auf Kontaktseite */
@media (max-width: 992px) {
    #contact-section.contact-page-layout {
        padding-top: 40px;
    }
    .contact-page-layout .logo img {
        height: 60px;
    }
    .contact-form-wrapper {
        /* Angepasstes Padding: oben/unten 30px, links/rechts 20px für etwas mehr Breite */
        padding: 30px 20px;
    }
}

@media (max-width: 768px) {
    .contact-form-wrapper {
        /* Maximale Breite für kleinere Bildschirme aufheben */
        max-width: none;
        /* Standardbreite annehmen */
        width: auto;
        /* Angepasstes Padding für mobile: oben/unten 20px, links/rechts 15px für maximale Breite */
        padding: 20px 15px;
    }
}







/* --- Captcha & Popup Styles --- */

.captcha-group {
    margin-top: 30px;
    margin-bottom: 25px; /* Abstand nach dem Captcha-Feld */
}

.captcha-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
}

#captcha {
    background-color: var(--color-lightest-grey);
    border: 1px solid #ddd;
    border-radius: var(--border-radius-small);
    padding: 10px 15px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
    min-width: 100px;
    text-align: center;
    user-select: none; /* Verhindert Auswahl des Textes */
    letter-spacing: 2px;
}

.btn-captcha-refresh {
    background-color: var(--color-blue);
    color: var(--white);
    border: none;
    border-radius: var(--border-radius-small);
    padding: 10px 15px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background-color var(--transition-speed-normal) ease, transform var(--transition-speed-normal) ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-captcha-refresh:hover {
    background-color: var(--color-orange);
    transform: rotate(15deg); /* Leichte Rotation beim Hover */
}

/* Stil für das Popup */
.popup-message {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-blue); /* Grundfarbe des Popups */
    color: var(--color-white);
    padding: 15px 25px;
    border-radius: var(--border-radius-medium);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out, bottom 0.5s ease-out;
    z-index: 10000;
    font-size: 1.1rem;
    text-align: center;
    min-width: 250px;
}

.popup-message.show {
    opacity: 1;
    visibility: visible;
    bottom: 50px; /* Rutscht leicht nach oben, wenn sichtbar */
}

/* Zusätzlicher Stil für Fehlermeldungen im Popup, falls gewünscht */
.popup-message.error {
    background-color: #dc3545; /* Rot für Fehlermeldungen */
}

/* Zusätzlicher Stil für Erfolgsmeldungen im Popup, falls gewünscht */
.popup-message.success {
    background-color: #28a745; /* Grün für Erfolgsmeldungen */
}




/* Custom styles for the submit button with icon */
.btn-submit-with-icon {
    /* Base styles für den Button */
    background-color: var(--accent-orange); /* Hintergrundfarbe aus deinen Variablen */
    color: var(--color-white); /* Textfarbe aus deinen Variablen */
    border: none;
    border-radius: 5px; /* Abgerundete Ecken aus deinen Variablen */
    padding: 15px 30px; /* Innenabstand für die Buttongröße */
    font-size: 1.1rem;
    font-weight: 600; /* Textgewicht */
    font-family: var(--font-primary, 'Poppins', sans-serif); /* Schriftart */
    cursor: pointer;
    text-decoration: none; /* Keine Unterstreichung */
    width: 100%; /* Button über die volle Breite des Elternelements */
    box-sizing: border-box; /* Padding in die Breitenberechnung einbeziehen */

    /* Flexbox für die Ausrichtung von Text und Icon */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Abstand zwischen Text und Icon */
    
    /* Animationen und Effekte */
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-submit-with-icon i {
    transition: transform 0.3s ease; /* Transition für die Icon-Bewegung */
}

.btn-submit-with-icon:hover {
    background-color: var(--dark-orange); /* Orange beim Hover, aus deinen Variablen */
    transform: translateY(-2px); /* Leichter Hochhebe-Effekt */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Dezenter Schatten für den "Lift"-Effekt */
}

.btn-submit-with-icon:hover i {
    transform: translateX(5px); /* Icon bewegt sich beim Hover leicht nach rechts */
}



/* ============================ */
/* MODAL BEWERBUNGSFORMULAR STYLES */
/* ============================ */

/* Overlay */
.modal {
    /* display: none; <-- DIESE ZEILE ENTFERNEN */
    position: fixed; /* Bleibt über allem */
    z-index: 1000; /* Höher als andere Inhalte, aber unter dem Preloader */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Aktiviert Scrollen, wenn Inhalt zu groß ist */
    background-color: rgba(0, 0, 0, 0.6); /* Dunkles Overlay */
    opacity: 0; /* Standardmäßig komplett transparent */
    visibility: hidden; /* Standardmäßig unsichtbar und nicht interaktiv */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Übergang für das Overlay selbst */
}

.modal.show {
    /* display: block; <-- DIESE ZEILE ENTFERNEN */
    opacity: 1; /* Blendet das Overlay ein */
    visibility: visible; /* Macht das Overlay sichtbar */
}

/* Modal-Inhalt */
.modal-content {
    background-color: var(--job-white);
    margin: 50px auto; /* Zentriert horizontal und gibt 50px Abstand nach oben im sichtbaren Zustand */
    padding: 30px 40px;
    border-radius: 15px;
    position: relative;
    width: 90%; /* Standardbreite */
    max-width: 700px; /* Maximale Breite */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

    /* Anpassungen für smooth slide-in */
    transform: translateY(-120%); /* Startet 120% der eigenen Höhe außerhalb des Bildschirms oben */
    opacity: 0; /* Startet komplett transparent */
    /* Längere und sanftere Transition für das Hereinfahren und Einblenden */
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease-in;
}

.modal.show .modal-content {
    transform: translateY(0); /* Fährt in die Endposition (50px vom oberen Rand) */
    opacity: 1; /* Blendet vollständig ein */
}


/* Header im Modal */
.modal-header {
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--job-light-grey);
}

.modal-header .modal-logo {
    max-height: 40px;
    margin-bottom: 15px;
}

.modal-header h2 {
    font-size: 2em;
    color: var(--job-primary-blue);
    margin-bottom: 10px;
    padding-top: 20px;
}

.modal-header p {
    font-size: 1.1em;
    color: var(--job-dark-text);
    opacity: 0.8;
}

/* Schließen-Button */
.close-button {
    color: var(--color-dark-grey);
    font-size: 2.5em;
    font-weight: bold;
    position: absolute;
    top: 15px;
    right: 25px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-button:hover,
.close-button:focus {
    color: var(--job-accent-orange);
    text-decoration: none;
    cursor: pointer;
}

/* Formular-Stile im Modal (ähnlich wie Kontaktformular) */
.modal-form .form-group {
    margin-bottom: 20px;
}

.modal-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--job-dark-text);
}

.modal-form input[type="text"],
.modal-form input[type="email"],
.modal-form input[type="tel"],
.modal-form input[type="file"],
.modal-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--job-light-grey);
    border-radius: var(--border-radius-small);
    font-size: 1em;
    font-family: 'Montserrat', sans-serif;
    color: var(--job-dark-text);
    box-sizing: border-box; /* Stellt sicher, dass Padding und Border in der Breite enthalten sind */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.modal-form input[type="text"]:focus,
.modal-form input[type="email"]:focus,
.modal-form input[type="tel"]:focus,
.modal-form textarea:focus {
    border-color: var(--job-primary-blue);
    box-shadow: 0 0 0 3px rgba(0, 77, 153, 0.2); /* Sanfter blauer Schatten */
    outline: none;
}

.modal-form textarea {
    resize: vertical; /* Nur vertikale Größenänderung zulassen */
    min-height: 100px;
}

/* Captcha-Stile (ähnlich zur Kontaktseite) */
.modal-form .captcha-group {
    margin-bottom: 25px;
}

.modal-form .captcha-container {
    display: flex;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 10px;
    background-color: var(--job-light-grey);
    border-radius: var(--border-radius-small);
    padding: 5px 10px;
}

.modal-form #modal-captcha {
    font-size: 1.4em;
    font-weight: bold;
    color: var(--job-primary-blue);
    flex-grow: 1;
    text-align: center;
    padding: 5px 0;
}

.modal-form .btn-captcha-refresh {
    background: none;
    border: none;
    color: var(--job-primary-blue);
    cursor: pointer;
    font-size: 1.2em;
    padding: 5px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.modal-form .btn-captcha-refresh:hover {
    color: var(--job-accent-orange);
    transform: rotate(30deg);
}

.modal-form input#modal-captcha-input {
    margin-top: 0; /* Wichtig, um Abstand zum Label zu kontrollieren */
}

/* Submit Button im Modal */
.btn-submit-form {
    display: block;
    width: 100%;
    padding: 15px 25px;
    background-color: var(--job-accent-orange);
    color: var(--job-white);
    border: none;
    border-radius: var(--border-radius-pill);
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    margin-top: 20px;
}

.btn-submit-form:hover {
    background-color: #E67A00;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.btn-submit-form i {
    margin-left: 10px;
}

.modal-form .form-note {
    font-size: 0.95em; /* Textgröße einen kleinen Tick größer (von 0.85em auf 0.95em, können Sie anpassen) */
    color: #666; /* Dezente Farbe */
    margin-top: 15px; /* Abstand zum Button */
    
    display: flex; /* Aktiviert Flexbox für die Anordnung der Kinder */
    flex-direction: column; /* Ordnet Icon und Text untereinander an */
    align-items: center; /* Zentriert Icon und Text horizontal */
    text-align: center; /* Stellt sicher, dass auch mehrzeiliger Text zentriert ist */
}

/* Styling für das Info-Icon innerhalb des Hinweises */
.modal-form .form-note i.fas {
    font-size: 1.8em; /* Größe des Icons (können Sie anpassen) */
    margin-bottom: 8px; /* Abstand zwischen Icon und dem Text darunter */
    color: var(--accent-orange); /* Farbe des Icons (nutzt Ihre Akzentfarbe) */
}

/* Styling für den Text innerhalb des Hinweises */
.modal-form .form-note .form-note-text {
    line-height: 1.4; /* Verbessert die Lesbarkeit bei längeren Texten */
}

/* Styling für den Link im Hinweis */
.modal-form .form-note a {
    color: var(--accent-orange); /* Linkfarbe, passend zu Ihrem Design */
    text-decoration: underline;
}

/* Mobile Anpassungen für Modal */
@media (max-width: 600px) {
    .modal-content {
        width: 95%;
        padding: 20px;
        margin-top: 20px; /* Reduzierter Abstand oben auf kleinen Bildschirmen */
    }

    .close-button {
        font-size: 2em;
        top: 10px;
        right: 15px;
    }

    .modal-header h2 {
        font-size: 1.6em;
    }

    .modal-header p {
        font-size: 1em;
    }

    .modal-form input,
    .modal-form textarea,
    .btn-submit-form {
        font-size: 0.9em;
        padding: 10px 15px;
    }
}

























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

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

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

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

.toast-buttons button,
.popup-actions button {
    padding: 15px 30px; /* Größere, klickfreundlichere Buttons */
    border: none;
    cursor: pointer;
    font-size: 1.05em; /* Deutlichere Schriftgröße auf Buttons */
    font-weight: 500;
    border-radius: 10px; /* Angepasst an deine anderen Button-Styles */
    transition: all 0.3s ease; /* Angepasst von --animation-ease */
    flex-grow: 1; /* Buttons dürfen wachsen */
    min-width: 180px; /* Mindestbreite, damit Buttons nicht zu klein werden */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Angepasst von --dark-overlay-rgb */
    color: var(--white); /* Angepasst von --primary-text */
    /* font-family: var(--font-primary); -- Entfernt, da keine Entsprechung in Root-Variablen */
}

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

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

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

/* Die Einstellungen/Speichern-Buttons nutzen Secondary-Text für einen subtileren Look */
.open-settings-toast-btn,
.save-btn {
    background-color: var(--light-blue); /* Angepasst von --secondary-bg-darker */
}

/* Hover-Effekt für die Hintergrundfarbe */
.accept-all-toast-btn:hover,
.accept-all-popup-btn:hover {
    background-color: var(--dark-orange); /* Angepasst von --accent-color-darker */
}
.decline-all-toast-btn:hover,
.decline-all-popup-btn:hover {
    background-color: var(--primary-blue); /* Angepasst von --background-dark */
}
.open-settings-toast-btn:hover,
.save-btn:hover {
    background-color: var(--accent-orange); /* Angepasst von --accent-color */
}


/* --- 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); /* Angepasst von --dark-overlay-rgb */
    justify-content: center;
    align-items: center;
    padding: 20px;
}

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

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

/* Styling für den Popup-Inhalt */
.popup-content {
    background-color: var(--light-blue); /* Angepasst von --secondary-bg-darker */
    margin: auto;
    padding: 50px; /* Deutlich mehr Padding im Popup */
    border-radius: 15px; /* Stärker abgerundete Ecken */
    width: 95%;
    max-width: 850px; /* Maximale Breite des Popups erhöhen */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6); /* Angepasst von --dark-overlay-rgb */
    position: relative;
    color: var(--white); /* Angepasst von --primary-text */
    animation: slideInFromTop 0.6s ease forwards; /* Angepasst von --animation-ease */
    display: flex;
    flex-direction: column;
    gap: 30px; /* Gleichmäßiger Abstand zwischen den Hauptsektionen */
    /* font-family: var(--font-primary); -- Entfernt, da keine Entsprechung in Root-Variablen */
}

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

.close-btn2 {
    background: none;
    border: none;
    color: var(--text-light-translucent); /* Angepasst von --secondary-text */
    font-size: 36px; /* Größer und prominenter */
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    top: 20px; /* Position anpassen */
    right: 25px;
    z-index: 10001;
    transition: all 0.3s ease; /* Angepasst von --animation-ease */
}

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

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

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

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

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

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

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

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

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

.toggle-item input[type="checkbox"]:checked {
    background-color: var(--accent-orange); /* Angepasst von --accent-color */
}

.toggle-item input[type="checkbox"]::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px; /* Größerer Kreis */
    height: 24px; /* Größerer Kreis */
    background-color: var(--white); /* Angepasst von --primary-text */
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), background-color 0.2s ease; /* Angepasst von --animation-ease */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); /* Angepasst von --dark-overlay-rgb */
}

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

.toggle-item input[type="checkbox"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--border-translucent); /* Angepasst von --border-divider */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* Angepasst von --dark-overlay-rgb */
}
.toggle-item input[type="checkbox"]:disabled::before {
    background-color: var(--text-light-translucent); /* Angepasst von --secondary-text */
}


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

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

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

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

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

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


































/* Impressum Anpassungen */
#impressum-section {
    padding-top: 80px; /* Passen Sie den oberen Abstand an */
    padding-bottom: 80px; /* Passen Sie den unteren Abstand an */
    background-color: var(--card-bg-white); /* Oder eine andere passende Hintergrundfarbe */
}

#impressum-section .container {
    max-width: 1200px; /* Maximale Breite für den Inhalt, um die Lesbarkeit zu verbessern */
    margin: 0 auto; /* Zentriert den Container */
    padding: 0 20px; /* Innenabstand links und rechts für kleinere Bildschirme */
    text-align: left; /* Stellt sicher, dass der Text linksbündig ist */
}

#impressum-section h1 {
    text-align: center; /* Überschrift linksbündig */
    margin-bottom: 40px; /* Abstand nach der Hauptüberschrift */
    color: var(--text-dark); /* Passende Textfarbe */
}

.impressum-content {
    line-height: 1.8; /* Verbesserter Zeilenabstand für bessere Lesbarkeit */
    font-size: 1.05em; /* Leicht größere Schriftgröße */
    color: var(--text-dark); /* Textfarbe */
}

.impressum-content h3 {
    margin-top: 30px; /* Abstand vor Unterüberschriften */
    margin-bottom: 10px; /* Abstand nach Unterüberschriften */
    color: var(--primary-blue); /* Passende Farbe für die Unterüberschriften */
}

.impressum-content p {
    margin-bottom: 15px; /* Abstand zwischen Absätzen */
}

.impressum-content a {
    color: var(--accent-orange); /* Linkfarbe */
    text-decoration: none; /* Keine Unterstreichung standardmäßig */
}

.impressum-content a:hover {
    text-decoration: underline; /* Unterstreichung beim Hover */
}

/* Anpassung für kleinere Bildschirme */
@media (max-width: 768px) {
    #impressum-section .container {
        padding: 0 15px;
    }

    #impressum-section h1 {
        margin-bottom: 30px;
    }

    .impressum-content h3 {
        margin-top: 25px;
    }
}



























/* ===================================== */
/* Datenschutz Seite Styling */
/* ===================================== */

/* Anpassungen für den Hauptinhaltsbereich der Datenschutzseite */
main#datenschutz-section {
    background-color: var(--card-bg-white); /* Heller Hintergrund für den Inhalt */
    color: var(--text-dark); /* Dunkler Text für gute Lesbarkeit */
}

/* Container für den Datenschutzinhalt */
.datenschutz-container {
    max-width: 960px; /* Maximale Breite des Inhalts */
    margin: 0 auto; /* Zentrierung des Containers */
    padding: 20px; /* Innenabstand */
}

/* Allgemeine Formatierung für den Textblock der Datenschutzerklärung */
.datenschutz-content {
    line-height: 1.8; /* Verbesserte Zeilenhöhe für Lesbarkeit */
    font-size: 1.05em; /* Etwas größere Grundschrift */
}

/* Überschriften-Hierarchie */
.datenschutz-content h1.section-title {
    color: var(--primary-blue); /* Haupttitel in Primärblau */
    font-size: 2.8em;
    margin-bottom: 40px;
    text-align: center; /* Haupttitel bleibt zentriert */
    padding-top: 60px; /* Mehr Abstand oben */
}

.datenschutz-content h2 {
    color: var(--primary-blue); /* Hauptabschnittsüberschriften */
    font-size: 2em;
    margin-top: 50px;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px; /* Linie unter H2 */
    text-align: left; /* Links ausgerichtet */
}

.datenschutz-content h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px; /* Kurze Linie unter der Überschrift */
    height: 4px;
    background-color: var(--accent-orange); /* Akzentfarbe für die Linie */
    border-radius: var(--border-radius-pill);
}

.datenschutz-content h3 {
    color: var(--light-blue); /* Unterabschnittsüberschriften */
    font-size: 1.5em;
    margin-top: 35px;
    margin-bottom: 15px;
    text-align: left; /* Links ausgerichtet */
}

.datenschutz-content h4 {
    color: var(--text-dark); /* Kleinere Überschriften, z.B. für Funktionsweise */
    font-size: 1.2em;
    margin-top: 25px;
    margin-bottom: 10px;
    font-weight: 600;
    text-align: left; /* Links ausgerichtet */
}

/* Absätze */
.datenschutz-content p {
    margin-bottom: 1.2em; /* Abstand zwischen Absätzen */
    text-align: left; /* Texte linksbündig */
}

/* Links innerhalb des Datenschutztextes */
.datenschutz-content a {
    color: var(--accent-orange); /* Akzentfarbe für Links */
    text-decoration: none; /* Keine Unterstreichung standardmäßig */
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

.datenschutz-content a:hover {
    color: var(--dark-orange); /* Dunkleres Orange beim Hover */
    text-decoration: underline; /* Unterstreichung beim Hover */
}

/* Listen */
.datenschutz-content ul {
    list-style-type: disc; /* Standard-Listenpunkte */
    margin-left: 25px; /* Einzug für Listen */
    margin-bottom: 1.5em;
    text-align: left; /* Listenpunkte linksbündig */
}

.datenschutz-content ul li {
    margin-bottom: 0.8em; /* Abstand zwischen Listenelementen */
}

/* Adressformatierung */
.datenschutz-content address {
    font-style: normal; /* Normale Schrift für die Adresse */
    margin-top: 15px;
    margin-bottom: 15px;
    line-height: 1.6;
    text-align: left; /* Links ausgerichtet */
}

/* Trennlinien */
.datenschutz-content hr[role="separator"] {
    border: 0;
    height: 1px;
    background-color: var(--border-translucent); /* Dezente Trennlinie */
    margin: 60px 0; /* Großer Abstand um Trennlinien */
}

/* Besondere Hervorhebungen (z.B. für Widerspruchsrecht) */
.datenschutz-content strong {
    color: var(--accent-orange); /* Hervorgehobener Text in Akzentfarbe */
    font-weight: 700;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .datenschutz-content h1.section-title {
        font-size: 2.2em;
        margin-bottom: 30px;
        padding-top: 40px;
    }

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

    .datenschutz-content h3 {
        font-size: 1.3em;
        margin-top: 30px;
        margin-bottom: 10px;
    }

    .datenschutz-content p {
        font-size: 1em;
    }

    .datenschutz-container {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .datenschutz-content h1.section-title {
        font-size: 1.8em;
        margin-bottom: 25px;
        padding-top: 30px;
    }

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

    .datenschutz-content h3 {
        font-size: 1.1em;
        margin-top: 20px;
    }

    .datenschutz-content hr[role="separator"] {
        margin: 40px 0;
    }
}