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

/* Grundlegende Schrift */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fdfdfd;
    padding: 0;
    margin: 0;
}

/* Header */
header {
    background-color: #ffffff;
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid #ccc;
}

header img {
    max-width: 250px;
    height: auto;
}

header p {
    margin-top: 0.5rem;
    font-size: 0.95rem;
}

/* Content Container */
.content-container {
    max-width: 960px; /* Passen Sie diese Breite an die gewünschte Breite des Fließtextes an */
    margin: 0 auto; /* Zentriert den Container */
}

/* Navigation Container */
.navigation-container {
    background-color: #444;
    width: 100%;
    overflow-x: auto;
    padding: 1rem 0;
}

/* Navigation Wrapper */
.navigation-wrapper {
    display: flex;
    justify-content: center;
    min-width: max-content;
}

/* Navigation */
.navigation {
    display: flex;
    gap: 0.1rem; /* Reduzierter Abstand zwischen den Navigationselementen */
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
}

.navigation li a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    padding: 1rem;
    transition: background-color 0.3s ease;
    border-radius: 0.5rem;
    white-space: nowrap;
}

.navigation li a:hover {
    background-color: #666;
}

/* Text Content */
.text-content {
    padding: 1rem;
}



/* Abschnitts-Layout */
section {
    padding: 2rem;
    max-width: 960px;
    margin: auto;
}

/* Notizzettel */
.notepaper {
    background-color: #fff9c4;
    border: 1px solid #f0e68c;
    padding: 1rem;
    margin: 1.5rem 0;
    font-style: italic;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

/* Blockquote */
blockquote.curly-quotes {
    quotes: "„" "“" "‚" "‘";
}

blockquote.curly-quotes::before {
    content: open-quote;
}

blockquote.curly-quotes::after {
    content: close-quote;
}

/* Footer */
footer {
    background-color: #eee;
    color: #555;
    text-align: center;
    padding: 1.5rem;
    font-size: 0.9rem;
    border-top: 1px solid #ccc;
}

footer a {
    color: #333;
    text-decoration: underline;
}

/* Bildergrößen beschränken */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1rem auto;
    max-height: 500px; /* optional: maximale Höhe */
}

/* Container für Bild mit Button */
.image-overlay-container {
    position: relative;
    display: inline-block;
    max-width: 100%; /* Stellen Sie sicher, dass der Container nicht breiter als der verfügbare Platz ist */
}

/* Bild */
.image-overlay-container img {
    display: block;
    max-width: 100%; /* Stellen Sie sicher, dass das Bild nicht breiter als der Container ist */
    height: auto; /* Erhalten Sie das Seitenverhältnis des Bildes */
    margin: 0 auto; /* Zentrieren Sie das Bild im Container */
}

/* Button */
.cta-button {
    position: relative;
    bottom: 50px; /* Positionieren Sie den Button 20px vom unteren Rand des Containers */
    left: 50%;
    transform: translateX(-50%); /* Zentrieren Sie den Button horizontal */
    background-color: #a93226;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

.cta-button:hover {
    background-color: #8a2a1f;
}

/* Formular Eingabefelder */
form input[type="text"],
form input[type="email"] {
    width: 100%; /* Volle Breite des Containers */
    padding: 12px; /* Erhöhter Innenabstand für bessere Lesbarkeit */
    margin-bottom: 20px; /* Erhöhter Abstand zwischen den Eingabefeldern */
    border: 1px solid #ccc; /* Rahmen für die Eingabefelder */
    border-radius: 5px; /* Abgerundete Ecken */
    font-size: 18px; /* Erhöhte Schriftgröße */
    box-sizing: border-box; /* Padding und Border in die Breite einbeziehen */
}

/* Textbereich */
form textarea {
    width: 100%; /* Volle Breite des Containers */
    padding: 12px; /* Erhöhter Innenabstand für bessere Lesbarkeit */
    margin-bottom: 20px; /* Erhöhter Abstand zwischen den Eingabefeldern */
    border: 1px solid #ccc; /* Rahmen für die Eingabefelder */
    border-radius: 5px; /* Abgerundete Ecken */
    font-size: 18px; /* Erhöhte Schriftgröße */
    box-sizing: border-box; /* Padding und Border in die Breite einbeziehen */
    height: 200px; /* Erhöhte Höhe des Textbereichs */
    resize: vertical; /* Erlaubt das vertikale Ändern der Größe */
}

/* Absenden-Button */
form button[type="submit"] {
    background-color: #4CAF50; /* Hintergrundfarbe */
    color: white; /* Textfarbe */
    padding: 12px 24px; /* Erhöhter Innenabstand */
    border: none; /* Kein Rahmen */
    border-radius: 5px; /* Abgerundete Ecken */
    cursor: pointer; /* Zeiger bei Hover */
    font-size: 18px; /* Erhöhte Schriftgröße */
}

form button[type="submit"]:hover {
    background-color: #45a049; /* Hintergrundfarbe bei Hover */
}

/* === Cookie-Banner === */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #222;
    color: #fff;
    padding: 1rem 1.5rem;
    font-size: 0.95rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 9999;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
    flex-wrap: wrap;
}

.cookie-banner p {
    margin: 0;
    flex: 1 1 auto;
}

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

.cookie-buttons {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.cookie-buttons button {
    background-color: #ffd700;
    color: #222;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.3rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.cookie-buttons button:hover {
    background-color: #e0c200;
}

#cookie-decline {
    background-color: #aaa;
    color: #222;
}

#cookie-decline:hover {
    background-color: #888;
}

@media (max-width: 600px) {
    .cookie-banner {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    .cookie-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }
}