@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');

/* Grundlegende Stile für in-bag Website */

/* Variablen für Farben (basierend auf den Bildern) */
:root {
    --primary-green: #7CFC00; /* Angepasst an Fassadenfarbe (LawnGreen) */
    --dark-text: #333;
    --light-text: #fff;
    --background-light: #f8f8f8;
    --background-white: #ffffff;
    --border-color: #ddd;
    --leather-bg: url('images/leder-bg.jpg'); /* Platzhalter für Leder-Hintergrund */
}

/* Allgemeine Body-Stile */
body {
    font-family: 'Montserrat', sans-serif; /* Montserrat als Hauptschriftart */
    margin: 0;
    padding: 0;
    color: var(--dark-text);
    background-color: var(--background-light); /* Heller Grundton */
    background-image: linear-gradient(rgba(248, 248, 248, 0.95), rgba(248, 248, 248, 0.95)), var(--leather-bg); /* Leder-BG mit hoher Transparenz überlagert */
    background-attachment: fixed; /* Hintergrund fixieren */
    line-height: 1.6;
    background-color: var(--background-white);
}

/* Container für zentrierten Inhalt (optional) */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header & Navigation */
header {
    background-color: var(--primary-green);
    color: var(--light-text);
    padding: 10px 0;
    position: fixed; /* Header bleibt immer oben sichtbar */
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    min-height: 80px; /* Mindesthöhe, anpassbar je nach Logo */
}

/* Container entfernt */

/* Styling für das Logo im Header */
#logo {
    width: auto; /* Breite automatisch */
    position: absolute;
    left: 0; /* Ganz links */
    top: 50%; /* Vertikal zentrieren */
    transform: translateY(-50%); /* Genaue vertikale Zentrierung */
    max-height: 100%; /* Volle Höhe des Headers nutzen */
    height: auto; /* Höhe automatisch anpassen */
    padding: 0; /* Kein Padding */
    margin: 0; /* Kein Margin */
    box-sizing: border-box; /* Padding berücksichtigen */
    background-color: transparent; /* Transparenter Hintergrund */
}

/* Sicherstellen, dass der Logo-Link klickbar ist und Hover-Effekt */
header > a {
    display: block; /* Stellt sicher, dass der Link den Bereich des Logos einnimmt */
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: auto; /* Passt sich der Logo-Breite an */
    z-index: 101; /* Höher als der Rest des Headers */
}

/* Hover-Effekt für Logo entfernt */
/* header > a:hover #logo { */
    /* box-shadow: inset 0 0 10px 3px rgba(124, 252, 0, 0.6); */ /* Grüner innerer Glow */
    /* transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.3s ease; */ /* Box-shadow zur Transition hinzufügen */
/* } */

#logo {
    /* transition: opacity 0.2s ease, transform 0.2s ease; */ /* Übergang entfernt */
}

/* Auskommentierter h1-Block entfernt, da nicht mehr benötigt */

nav {
    width: 100%; /* Volle Breite für Zentrierung */
    height: 100%; /* Volle Höhe für vertikale Zentrierung */
    display: flex;
    align-items: center; /* Vertikal zentrieren */
    justify-content: center; /* Horizontal zentrieren */
    position: absolute;
    top: 0;
    right: 0;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;        /* Flexbox-Layout */
    align-items: center;  /* Vertikale Zentrierung */
    justify-content: center; /* Horizontale Zentrierung */
    height: 100%;         /* Volle Höhe des Elternelements */
}

nav ul li {
    display: flex;        /* Flexbox für die Listenelemente */
    align-items: center;  /* Vertikale Zentrierung der Listenelemente */
    height: 100%;         /* Volle Höhe */
    margin: 0 15px;
}

nav ul li a {
    color: var(--light-text);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
    display: flex;        /* Flexbox für die Links */
    align-items: center;  /* Vertikale Zentrierung der Links */
    height: 100%;         /* Volle Höhe */
}

nav ul li a:hover {
    color: var(--dark-text); /* Dunklerer Hover-Effekt */
}

/* Abstand für den Hauptinhalt, damit er nicht hinter dem fixierten Header verschwindet */
main {
    margin-top: 100px; /* Entspricht der Höhe des Headers plus etwas Abstand */
}

/* Allgemeine Sektions-Stile */
main section {
    padding: 60px 20px; /* Abstand oben/unten und seitlich */
    border-bottom: 1px solid var(--border-color);
}

main section:last-of-type {
    border-bottom: none;
}

main section h2 {
    text-align: center;
    margin-bottom: 40px;
    color: var(--primary-green);
    font-size: 1.8em;
}

/* Korrektur für Anker-Scrolling bei fixiertem Header */
#ueber-uns, #produkte, #marken, #standort, #kontakt, #besonderheiten {
  scroll-margin-top: 100px; /* Header-Höhe (ca. 80px + Padding) + Puffer */
}


/* Styling für Über Uns Sektion */
#ueber-uns p {
    text-align: center; /* Text zentrieren */
    max-width: 700px; /* Maximale Breite für bessere Lesbarkeit */
    margin-left: auto; /* Zentriert den Absatz-Block selbst */
    margin-right: auto;
    margin-bottom: 1em; /* Abstand zwischen Absätzen */
}

/* Leder-Hintergrund wird jetzt global im Body verwendet, daher hier entfernt */
/* #ueber-uns { ... } */

/* Spezifische Sektionen (Beispiele) */
#hero {
    /* background-color: var(--background-light); */ /* Entfernt, da jetzt Bild */
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('images/innenansicht-bunt.jpg'); /* Dunkler Overlay für Lesbarkeit */
    background-size: cover; /* Bild füllt den Bereich */
    background-position: center center; /* Bild zentrieren */
    /* background-attachment: fixed; */ /* Parallax-Effekt entfernt für bessere Mobilgeräte-Kompatibilität */
    color: var(--light-text); /* Textfarbe auf Hell ändern */
    text-align: center;
    padding: 120px 20px; /* Mehr Padding für größeren Effekt */
    /* border-top: 5px solid var(--primary-green); */ /* Entfernt, da jetzt Bild */
    position: relative; /* Für Overlay */
}

#hero h2, #hero p {
    position: relative; /* Stellt sicher, dass Text über dem Overlay liegt */
    z-index: 2;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6); /* Textschatten für bessere Lesbarkeit */
}

#hero h1 {
    color: var(--primary-green);
    font-size: 2.5em; /* Ggf. Schriftgröße anpassen */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4); /* Leichter Schatten für Lesbarkeit */
}

#hero .motto {
    color: var(--primary-green);
    font-size: 1.8em;
    font-weight: 700;
    margin: 15px 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    letter-spacing: 1px;
    animation: fadeInScale 1s ease-out;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Produkt-Sektion Anpassungen */
#produkte > p:first-of-type {
    text-align: left;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 992px) {
    #produkte > p:first-of-type {
        white-space: normal;
    }
}

#produkte ul {
    max-width: 900px;
    margin: 0 auto 2em auto;
    padding-left: 20px;
    text-align: left;
    list-style-position: inside;
}

#produkte ul li {
    margin-bottom: 0.5em;
    line-height: 1.6;
}

#produkte .treasure-text {
    text-align: center;
    font-style: italic;
    margin: 30px auto;
    font-size: 1.1em;
    color: var(--dark-text);
    max-width: 100%;
    font-weight: 500;
}

/* Slider-Layout */
#produkte .slider-container {
    position: relative; /* Für absolute Positionierung der Pfeile */
    width: 90%; /* Breite des sichtbaren Bereichs */
    margin: 40px auto 0; /* Abstand oben, zentriert */
    overflow: hidden; /* Versteckt Bilder außerhalb des sichtbaren Bereichs */
}

#produkte .slider-track {
    display: flex; /* Bilder nebeneinander */
    transition: transform 0.5s ease-in-out; /* Sanfte Scroll-Animation */
}

#produkte .produkt-galerie { /* Container für die Bilder innerhalb des Tracks */
    display: flex; /* Stellt sicher, dass Bilder nebeneinander sind */
    gap: 15px; /* Abstand zwischen Bildern */
}

/* Styling für die einzelnen Elemente im Slider */
#produkte .galerie-item {
    width: 280px; /* Breite der Vorschau-Box */
    height: 220px; /* Höhe der Vorschau-Box */
    flex-shrink: 0; /* Verhindert Schrumpfen */
    overflow: hidden; /* Schneidet überstehende Bildteile ab */
    border-radius: 4px;
    box-shadow: 3px 3px 8px rgba(0,0,0,0.15);
    border: 1px solid var(--border-color);
}

#produkte .galerie-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Füllt den Container, behält Seitenverhältnis, schneidet ab */
    display: block; /* Verhindert kleinen Abstand unter dem Bild */
}

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

.slider-arrow:hover {
    opacity: 1;
}

.prev-arrow {
    left: 10px;
}

.next-arrow {
    right: 10px;
}

#besonderheiten {
    background-color: var(--background-light);
    text-align: center;
}

#besonderheiten button {
    background-color: var(--primary-green);
    color: var(--light-text);
    border: none;


/* Styling für Standort-Karte entfernt */
    padding: 12px 25px;
    font-size: 1em;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin: 15px 5px 0; /* Etwas Abstand links/rechts, falls nebeneinander */
}

#besonderheiten button:hover {
    background-color: #58a83a; /* Etwas dunkleres Grün */
}

/* Styling für Gag-Bereich */
#besonderheiten .gag-container {
    display: flex;
    flex-direction: column; /* Elemente untereinander */
    align-items: center; /* Horizontal zentrieren */
    justify-content: center;
    gap: 15px;
    margin: 30px auto 0; /* Oben 30px, Links/Rechts auto für Zentrierung des Containers, Unten 0 */
    max-width: 90%; /* Verhindert, dass Container zu breit wird */
}

#offline-message {
    font-style: italic;
    color: var(--dark-text);
    max-width: 400px; /* Etwas breiter erlauben */
    text-align: center; /* Text zentrieren */
}

#besonderheiten .gag-container img { /* Styling für das Gag-Bild */
    max-width: 220px; /* Gag-Bild noch etwas größer */
}


/* Styling für den gesamten Marken-Bereich */
#marken {
    background-color: var(--background-light);
    padding: 40px 20px;
    text-align: center;
}

/* Container für die Top 10 Markenlogos */
.featured-brands-container {
    max-width: 1000px; /* Angepasst für 5 Spalten */
    margin: 30px auto;
    display: flex;
    justify-content: center;
}

/* Grid für die Markenlogos */
.featured-brands {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 Logos pro Reihe */
    gap: 20px; /* Etwas mehr Abstand */
    width: 100%;
    align-items: center; /* Vertikal zentrieren */
}

/* Styling für die einzelnen Logo-Container */
.brand-logo-item {
    background-color: var(--background-white);
    border-radius: 6px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.08);
    padding: 15px; /* Mehr Innenabstand */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #eee; /* Hellerer Rand */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px; /* Mindesthöhe für Konsistenz */
}

.brand-logo-item:hover {
    transform: scale(1.05); /* Leichter Zoom-Effekt */
    box-shadow: 4px 4px 10px rgba(0,0,0,0.12);
}

/* Styling für die Markenlogos selbst */
.brand-logo-item img {
    max-width: 100%;
    max-height: 50px; /* Maximale Höhe für Logos */
    height: auto;
    display: block;
    /* Optional: Graustufen-Effekt, der bei Hover verschwindet */
    /* filter: grayscale(100%); */
    /* transition: filter 0.3s ease; */
}

/* .brand-logo-item:hover img { */
    /* filter: grayscale(0%); */
/* } */

/* Versteckte Markenliste (bleibt für evtl. spätere Nutzung) */
.marken-liste {
    display: none;
}

/* Responsive Anpassungen */
@media (max-width: 1200px) {
    .featured-brands {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 992px) {
    .featured-brands {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .featured-brands {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .featured-brands {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* Styling für Standort-Sektion mit Hintergrundbild */
#standort {
    color: var(--dark-text);
    position: relative;
    padding-bottom: 40px;
    /* Keine Flex-Eigenschaften mehr hier */
}

#standort h2 {
    color: var(--primary-green); /* Zurück zur Standard-Überschriftenfarbe */
    /* text-shadow entfernt */
    width: 100%;
    text-align: center;
    /* padding-top entfernt */
    /* align-self entfernt */
    margin-bottom: 20px; /* Abstand zur Adresse/Karte beibehalten */
}

/* Styling für den Container der Standortdetails */
/* Flex-Container für Details und Karte */
#standort .standort-flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Etwas mehr Abstand */
    align-items: flex-start; /* Oben ausrichten */
    width: 100%;
}

/* Container für den linken Textblock (Einleitung + Details) */
#standort .standort-text-details {
    flex: 1 1 300px; /* Flex-Basis 300px, kann wachsen/schrumpfen */
    min-width: 280px;
    text-align: left; /* Alles linksbündig */
}

/* Styling für den Einleitungssatz innerhalb des linken Blocks */
#standort .standort-intro {
    text-align: center; /* Zentrieren des Einleitungssatzes */
    /* width: 100% entfernt */
    margin-bottom: 15px; /* Abstand zur Adresse */
}

/* Styling für Adressdetails innerhalb des linken Blocks */
#standort .standort-details {
    padding: 0; /* Kein extra Padding nötig */
    /* flex, min-width entfernt, da jetzt im Elternelement .standort-text-details */
    text-align: left; /* Sicherstellen, dass die Details linksbündig bleiben */
    /* text-shadow entfernt */
    color: var(--dark-text); /* Sicherstellen, dass Text dunkel ist */
}

/* Styling für p und address innerhalb von .standort-details */
#standort .standort-details p,
#standort .standort-details address {
   margin-bottom: 10px;
   /* background-color, padding, border-radius, max-width, margin-left, text-shadow entfernt */
   text-align: center; /* Auch hier zentrieren */
}

#standort .standort-details address {
    font-style: normal; /* Normaler Stil für Adresse */
    margin-bottom: 5px; /* Kleinerer Abstand unter Adresse */
}


/* Container für die Karte (rechte Seite) */
#standort .map-container {
    flex: 2 1 400px; /* Nimmt mehr Platz ein */
    min-width: 300px;
}

#standort .map-container iframe {
    display: block;
    width: 100%;
    height: 400px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

/* Spezifische Anpassungen für address entfernt, da jetzt in gemeinsamer Regel */
/* #standort address { ... } */

/* Responsive Anpassung für Standort-Layout */
@media (max-width: 768px) {
    #standort .standort-flex-container {
        flex-direction: column;
        align-items: stretch; /* Elemente sollen volle Breite einnehmen */
    }
    /* Anpassung für den linken Textblock auf kleinen Screens */
    #standort .standort-text-details {
        text-align: center; /* Text zentrieren auf kleinen Screens */
        margin-bottom: 20px; /* Abstand zur Karte */
        flex-basis: auto;
    }
     /* Anpassung für Adressdetails auf kleinen Screens (falls nötig) */
    #standort .standort-details {
         text-align: center; /* Sicherstellen, dass auch dies zentriert ist */
    }
    /* Anpassung für Kartencontainer auf kleinen Screens */
    #standort .map-container {
        flex-basis: auto;
        width: 100%;
    }
}

/* Footer */
footer {
    background-color: var(--dark-text);
    color: var(--light-text);
    text-align: center;
    padding: 20px;
    margin-top: 40px;
}

footer p {
    margin: 5px 0;
}

footer a {
    color: var(--primary-green);
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

/* Styling für Kontakt-Sektion */
#kontakt {
    text-align: center;
}

#kontakt p {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
}

#kontakt p strong {
    font-size: 1.2em;
    color: var(--primary-green);
}

#kontakt a {
    color: var(--primary-green);
    text-decoration: none;
    transition: all 0.3s ease;
}

#kontakt a:hover {
    text-decoration: underline;
    transform: scale(1.05);
    display: inline-block;
}

/* Responsive Design */

/* Anpassungen für Tablets und kleinere Desktops */
@media (max-width: 992px) {
    nav ul li {
        margin: 0 10px; /* Weniger Abstand zwischen Menüpunkten */
    }
    nav ul li a {
        font-size: 0.95em; /* Etwas kleinere Schrift */
    }
}

/* Parallax-Effekt nur für Desktop-Geräte aktivieren */
@media (min-width: 992px) {
    #hero {
        background-attachment: fixed; /* Parallax-Effekt nur für Desktop */
    }
}

/* Anpassungen für Smartphones */
@media (max-width: 768px) {
    header {
        min-height: 60px; /* Kleinere Mindesthöhe für den Header */
        padding: 5px 0;
    }
    #logo {
        max-height: 90%; /* Logo etwas kleiner im Verhältnis */
        left: 5px; /* Kleiner Abstand vom linken Rand */
    }
    nav {
        /* Verschieben der Navigation, um Platz für Logo zu machen */
        width: auto; /* Breite an Inhalt anpassen */
        position: absolute;
        right: 10px; /* Abstand vom rechten Rand */
        left: auto; /* Nicht mehr über die volle Breite zentriert */
        justify-content: flex-end; /* Rechtsbündig */
    }
    nav ul {
       justify-content: flex-end; /* Rechtsbündig */
    }
    nav ul li {
        margin: 0 5px; /* Noch weniger Abstand */
    }
    nav ul li a {
        font-size: 0.8em; /* Deutlich kleinere Schrift */
        padding: 0 5px; /* Weniger horizontales Padding */
    }

    /* Optimierung des Hero-Bereichs für mobile Geräte */
    #hero {
        padding: 80px 15px; /* Weniger Padding für kleinere Bildschirme */
        background-position: center 30%; /* Optimierte Bildposition für mobile Ansicht */
    }
    
    #hero h1 {
        font-size: 2em; /* Kleinere Überschrift auf mobilen Geräten */
    }

    /* Allgemeine Schriftgrößen anpassen */
    header h1 { /* Falls h1 wieder verwendet wird */
        font-size: 1.5em;
    }
    main section h2 {
        font-size: 1.5em;
    }
  #ueber-uns, #produkte, #marken, #standort, #kontakt, #besonderheiten {
    scroll-margin-top: 80px; /* Kleinere Header-Höhe (ca. 60px + Padding) + Puffer */
  }

}

/* Zusätzliche Anpassungen für sehr kleine Bildschirme */


/* Hilfsklasse zum Verstecken von Elementen */
.hidden {
    display: none !important; /* Wichtig, um Inline-Styles zu überschreiben, falls vorhanden */
}

/* Lightbox Styles */
.lightbox {
    display: none;
    position: fixed;
    z-index: 10000;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    animation: fadeIn 0.3s;
}

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

.lightbox-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90vh;
    animation: zoomIn 0.3s;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 45px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
    z-index: 10001;
}

.lightbox-close:hover,
.lightbox-close:focus {
    color: var(--primary-green);
    text-decoration: none;
}

/* Hover-Effekt für Galerie-Bilder */
#produkte .galerie-item {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#produkte .galerie-item:hover {
    transform: scale(1.05);
    box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
}

/* Mobile Anpassung für Lightbox */
@media (max-width: 768px) {
    .lightbox-close {
        top: 15px;
        right: 25px;
        font-size: 35px;
    }
    
    .lightbox-content {
        max-width: 95%;
        max-height: 80vh;
    }
}

/* Cookie-Hinweis Styles */
.cookie-notice {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #333;
    color: #fff;
    padding: 20px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
    z-index: 9999;
    animation: slideUp 0.5s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.cookie-content {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.cookie-content p {
    flex: 1 1 auto;
    margin: 0;
    padding-right: 20px;
    line-height: 1.5;
}

.cookie-buttons {
    display: flex;
    gap: 15px;
    flex-shrink: 0;
}

.cookie-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.cookie-accept {
    background-color: var(--primary-green);
    color: #333;
}

.cookie-accept:hover {
    background-color: #58a83a;
    transform: scale(1.05);
}

.cookie-info {
    background-color: transparent;
    color: var(--primary-green);
    border: 2px solid var(--primary-green);
    display: inline-block;
    line-height: 1.2;
}

.cookie-info:hover {
    background-color: var(--primary-green);
    color: #333;
}

/* Responsive Cookie-Hinweis */
@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        text-align: center;
    }
    
    .cookie-content p {
        padding-right: 0;
        margin-bottom: 15px;
    }
    
    .cookie-buttons {
        width: 100%;
        justify-content: center;
    }
    
    .cookie-btn {
        padding: 12px 25px;
        font-size: 13px;
    }
}
@media (max-width: 480px) {
     nav ul li a {
        font-size: 0.7em; /* Noch kleinere Schrift */
        padding: 0 3px;
     }
     nav ul li {
        margin: 0 2px;
     }
     
     /* Weitere Optimierungen für sehr kleine Bildschirme */
     #hero {
        padding: 60px 10px; /* Noch weniger Padding */
        background-position: center 25%; /* Feinere Anpassung der Bildposition */
     }
     
     #hero h1 {
        font-size: 1.8em; /* Noch kleinere Überschrift */
        margin-bottom: 10px; /* Weniger Abstand nach unten */
     }
     
     #hero p {
        font-size: 0.9em; /* Kleinere Schrift für den Untertitel */
     }
}


/* Styling für Disclaimer im Footer */
footer .disclaimer {
    font-size: 0.8em;
    color: #ccc; /* Helles Grau */
    margin-top: 15px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4;
}
footer .design-credit {
    font-size: 0.75em;
    color: #ccc;
    margin-top: 5px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}


footer a { /* Sicherstellen, dass der Impressumslink gut sichtbar ist */
    color: var(--primary-green);
    text-decoration: none;
    margin: 0 10px; /* Etwas Abstand */
}

footer a:hover {
    text-decoration: underline;
}

/* Spezifische Styles für Impressumsseite */
body.impressum-page {
    background-image: none; /* Kein Leder-Hintergrund im Impressum */
    background-color: var(--background-light);
}

/* Wrapper für das Impressum, um Zentrierung zu gewährleisten */
.impressum-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

main.impressum-content {
    max-width: 800px; /* Breite erhöht für bessere Lesbarkeit */
    width: 100%; /* Volle Breite innerhalb des Wrappers */
    margin: 120px auto 40px; /* Abstand oben wegen fixiertem Header, zentriert */
    padding: 50px; /* Padding erhöht */
    background-color: var(--background-white);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    text-align: left;
    border: 1px solid var(--border-color);
}

main.impressum-content h1 {
    text-align: center;
    color: var(--primary-green);
    margin-bottom: 40px; /* Mehr Abstand unten */
    font-size: 2em; /* Etwas größer */
}

main.impressum-content p {
    margin-bottom: 1.5em; /* Mehr Abstand zwischen Absätzen */
    line-height: 1.7;
    padding: 0 10px; /* Seitlicher Innenabstand für Text */
}

main.impressum-content strong {
    color: var(--dark-text);
}

main.impressum-content a {
    color: var(--primary-green);
    text-decoration: underline;
}

main.impressum-content a:hover {
    text-decoration: none;
}

/* Styling für TODOs (nur zur Entwicklung sichtbar) */
.todo-placeholder {
    color: #e74c3c; /* Rote Farbe für Platzhalter */
    font-style: italic;
    font-weight: bold;
}

/* Footer Anpassung für Impressum */
body.impressum-page footer {
    margin-top: 0; /* Kein extra Abstand oben im Impressum */
}