* {
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .container {
        max-width: 1200px;
        /* Oder eine andere maximale Breite für große Bildschirme */
        width: 100%;
        /* Nimmt 100% der verfügbaren Breite ein */
        margin: 0 auto;
        /* Zentriert den Container */
        padding: 0 15px;
        /* Fügt seitliches Padding hinzu */
    }

}


body {
    font-family: Arial, sans-serif;
    background-color: #f8f8f8;
    text-align: center;
}

.container {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 15px;
    /* Fügt seitliches Padding hinzu */
}

.logo {
    margin: 20px 0;
}

.logo img {
    width: 200px;
    margin-bottom: 20px;
}

h1 {
    font-size: 1.5em;
    color: #757251;
    margin-bottom: 20px;
}

h2,
h3 {
    color: #757251;
}

.subheader {
    font-size: 1.2em;
    font-weight: bold;
    color: #757251;
    margin: 20px 0;
}

.location-info {
    color: #666;
    margin: 10px 0 20px;
}

/* Social Media Links */
.social-media {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    /* Abstand nach oben und unten */
}

.social-media a {
    color: #333;
    /* Standardfarbe der Icons */
    margin: 0 15px;
    font-size: 2em;
    /* Größe der Icons */
    transition: color 0.3s, transform 0.3s;
}

.social-media a:hover {
    color: #007BFF;
    /* Farbe beim Hover (z.B. Blau) */
    transform: scale(1.2);
    /* Vergrößert das Icon beim Hover */
}

.question-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
}

.question-buttons button {
    padding: 15px 20px;
    font-size: 1em;
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: 8px;
    flex: 1;
}

/* Gemeinsames Styling für Ja-Button */
button.yes-button,
a.yes-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #28a745;
    /* Grün */
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
}

/* Hover-Effekt für Ja-Button */
button.yes-button:hover,
a.yes-button:hover {
    background-color: #218838;
    /* Dunkleres Grün */
}

/* Gemeinsames Styling für Nein-Button */
button.no-button,
a.no-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #dc3545;
    /* Rot */
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
}

/* Hover-Effekt für Nein-Button */
button.no-button:hover,
a.no-button:hover {
    background-color: #c82333;
    /* Dunkleres Rot */
}

.scroll-arrow {
    font-size: 2em;
    color: #757251;
    margin: 10px 0;
}

.section-title {
    font-size: 1.5em;
    font-weight: bold;
    color: #757251;
    margin: 40px 0 0px;
    margin-top: 40px;
}

.section-text {
    color: #666;
    margin-bottom: 20px;
}

.image-placeholder {
    width: 100%;
    max-width: 100%;
    height: auto;
    /* Adjust height automatically to keep aspect ratio */
    margin: 20px 0;
    border-radius: 8px;
    overflow: hidden;
    /* Ensure any overflow is hidden for round corners */
}

.image-placeholder img {
    width: 100%;
    height: auto;
    display: block;
    /* Remove any extra spacing */
    border-radius: 8px;
    /* Apply rounded corners directly to the image */
    object-fit: cover;
    /* Adjust this as needed */
}

.benefits-list {
    text-align: left;
    padding: 0;
    list-style: none;
    margin-bottom: 20px;
}

.benefits-list li {
    display: flex;
    align-items: center;
    font-size: 1em;
    color: #757251;
    margin: 5px 0;
}

.benefits-list li::before {
    content: "✔";
    margin-right: 10px;
}

.survey-button,
.next-button,
.submit-button {
    display: block;
    width: 100%;
    padding: 15px;
    margin: 10px 0;
    font-size: 1em;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

label {
    display: block;
    margin: 10px 0;
    padding: 10px;
    background-color: #f1f1f1;
    border-radius: 8px;
    cursor: pointer;
}

input[type="radio"] {
    margin-right: 10px;
}

textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 8px;
}

/* Reviews Slider */
.reviews-slider {
    position: relative;
    overflow: hidden;
    max-width: 800px;
    margin: 40px auto;
}

.reviews-slider-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.review {
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0px;
}

.review-text {
    font-size: 1.2em;
    font-style: italic;
    margin-bottom: 10px;
    color: #333;
}

.review-author {
    font-size: 1em;
    font-weight: bold;
    text-align: right;
    color: #555;
}

/* Navigation Buttons */
.slider-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: black;
    border: transparent;
    background-color: transparent;
    padding: 15px;
    cursor: pointer;
    z-index: 1000;
    /* Hoher Wert, um sicherzustellen, dass die Buttons oben liegen */
}

.slider-prev-button {
    left: -10px;
}

.slider-next-button {
    right: -10px;
}

.slider-button:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.footer {
    font-size: 0.9em;
    color: #666;
    margin-top: 30px;
}

.dvag {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important;
}

.quote-container {
    background-color: #fff;
    color: #000;
    padding: 20px;
    margin: 20px;
    margin-bottom: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 600px;
}

.quote {
    font-size: 1.5em;
    font-weight: bold;
}

.author {
    font-size: 1em;
    margin-top: 10px;
}

.container>* {
    margin-bottom: 20px;
}

.btn {
    background-color: #757251;
    border: none
}

.btn:hover {
    background-color: #757251;
}

.btn-primary {
    background-color: #757251;
    --bs-btn-bg: #757251;
    --bs-btn-active-bg: #757251;
}

.leitbild-section {
    margin-top: 40px;
    text-align: center;
}

.leitbild-image {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.leitbild-text {
    margin-top: 20px;
    font-size: 1.2em;
    color: #555;
}

.dvad-svg {
    margin-top: -2px;
}

.text-lightblue {
    color: #40839d;
}

.text-darkblue {
    color: #00587c;
}

.text-gold {
    color: #caaa23;
}

/* Horizontal scrollbarer Container, der die volle Breite einnimmt */
.scroll-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Snap-Effekt */
    -webkit-overflow-scrolling: touch;
    /* Sanftes Scrollen auf Touch-Geräten */
    cursor: grab;
    width: 100%;
    padding: 0;
    /* ggf. entfernen, wenn kein extra Abstand erwünscht ist */
    margin: 0;
    /* sorgt dafür, dass der Container die volle Breite nutzt */
    scrollbar-width: none;
}

/* Jeder Textblock füllt 100% der Breite des Containers */
.scroll-item {
    flex: 0 0 100%;
    /* Nimmt 100% der Containerbreite ein */
    scroll-snap-align: start;
    /* Element soll beim Scrollen an den Startpunkt "einrasten" */
    background: #f9f9f9;
    border: 0px solid #ccc;
    padding: 1rem;
    box-sizing: border-box;
}

.flex-container {
    display: flex;
    gap: 15px;
}

.flex-container input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

.input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.input-group label {
    font-weight: bold;
    margin-bottom: 5px;
}

.input-group input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
}

.instagram-icon {
    margin-top: 6px;
}

.facebook-icon {
    margin-top: -3px;
}

.scroll-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    /* Hintergrund entfernt */
    color: #757251;
    /* Goldene Farbe */
    border: none;
    font-size: 3rem;
    /* Größere Pfeile */
    cursor: pointer;
    padding: 10px 15px;
    z-index: 1000;
}

.scroll-arrow:hover {
    color: #757251;
    /* Dunklere Goldfarbe beim Hover */
}

.scroll-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Damit nichts übersteht */
}

.scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    color: #757251;
    /* Goldene Farbe */
    border: none;
    font-size: 3rem;
    cursor: pointer;
    padding: 10px 15px;
    z-index: 1000;
}

.scroll-arrow.left {
    left: -10px;
    /* Weiter nach außen */
}

.scroll-arrow.right {
    right: -10px;
    /* Weiter nach außen */
}

/* Mobile Anpassung */
@media (max-width: 768px) {
    .scroll-arrow.left {
        left: -15px;
        /* Nicht zu weit außen auf kleineren Geräten */
    }

    .scroll-arrow.right {
        right: -15px;
    }
}

.card {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

/* Dark Mode Styles – passen sich automatisch an das System an */
@media (prefers-color-scheme: dark) {

    /* Grundlegendes Layout */
    body {
        background-color: #2d2d2d;
        /* Dunkles, angenehmes Grau */
        color: #e0e0e0;
        /* Helle Schrift für guten Kontrast */
    }

    /* Überschriften und allgemeiner Text */
    h1,
    h2,
    h3,
    .subheader,
    .location-info,
    .section-title,
    .section-text,
    .benefits-list li {
        color: #e0e0e0;
    }

    /* Formularfelder, Inputs und Labels */
    label,
    textarea,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"] {
        background-color: #3a3a3a;
        /* Etwas helleres Grau für Eingabefelder */
        border: 1px solid #555;
        color: #e0e0e0;
    }

    /* Social-Media-Links */
    .social-media a {
        color: #e0e0e0;
    }

    .social-media a:hover {
        color: #66b3ff;
        /* Helles Blau beim Hover */
    }

    /* Standard-Buttons */
    .survey-button,
    .next-button,
    .submit-button {
        background-color: #444;
        /* Etwas helleres Grau als der Body-Hintergrund */
        color: #fff;
    }

    /* Ja- und Nein-Buttons – die Originalfarben (Grün und Rot) bleiben unverändert,
     falls du sie so beibehalten möchtest. Du kannst sie aber bei Bedarf auch anpassen. */
    .yes-button,
    .no-button,
    a.yes-button,
    a.no-button {
        /* Optional: Hier könntest du alternative Farben definieren */
    }

    /* Alternative Buttons (.btn und .btn-primary) */
    .btn,
    .btn-primary {
        background-color: #555;
        color: #fff;
    }

    .btn:hover,
    .btn-primary:hover {
        background-color: #666;
    }

    /* Scroll-Items (z. B. in horizontal scrollbaren Bereichen) */
    .scroll-item {
        background: #2d2d2d;
    }

    /* Slider-Pfeile und Navigation */
    .scroll-arrow,
    .slider-button {
        color: #e0e0e0;
    }

    .scroll-arrow:hover,
    .slider-button:hover {
        background-color: #2d2d2d;
    }

    /* Reviews Slider */
    .review-text {
        color: #e0e0e0;
    }

    .review-author {
        color: #ccc;
    }

    /* Quote-Container */
    .quote-container {
        background-color: #3a3a3a;
        color: #e0e0e0;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
    }

    /* Footer */
    .footer {
        color: #ccc;
    }

    /* Weitere Anpassungen bei Listen und Texten */
    .benefits-list li {
        color: #e0e0e0;
    }

    .leitbild-text {
        color: #ccc;
    }

    /* Inputs innerhalb eines flex-container */
    .flex-container input {
        background-color: #3a3a3a;
        border: 1px solid #555;
        color: #e0e0e0;
    }

    /* Optional: Falls du farbliche Akzente wie Blau oder Gold anpassen möchtest */
    .text-lightblue {
        color: #7abaff;
    }

    .text-darkblue {
        color: #66aaff;
    }

    .fab {
        color: white;
    }

    .fa-envelope:before {
        color: white;
    }

    .dvag-svg {
        filter: invert(100%);
    }

    .text-gold {
        color: #d4af37;
    }

    .card-body {
        background-color: #3a3a3a;
    }

    .text-muted {
        color: white !important;
    }

    .text-secondary {
        color: white !important;
    }

    ;
}