/* styles.css - Bereinigt: Native Slider-Styles entfernt, Custom Slider fix (Thumb sichtbar, kein Konflikt) */

/* Reset & Box-Sizing */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body-Grundeinstellungen - Mintgrün-Hintergrund */
body {
    background-color: #dfefe5; /* #b4e7cd Mintgrün für dominanten, frischen Look */
    color: #333;
    font-family: Arial, sans-serif;
    line-height: 1.5;
}

/* Login- und RSVP-Seiten - Mintgrün-Hintergrund */
body.login-page,
body.rsvp-page {
    background-color: #dfefe5; /* #b4e7cd */
}

/* Zentrierter Container für Login */
.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding: 0 15px;
}

/* Login-Formular - Mint-Akzente, Weiß-Buttons */
.login-container input[type="text"] {
    padding: 10px;
    width: 200px;
    border: 1px solid #2c8a6a; /* Dunkleres Mint für Border */
    border-radius: 4px;
    margin-bottom: 10px;
}

/* Login-Input: Grüner Fokus-Rahmen (überschreibt Browser-Blau) */
.login-container input[type="text"]:focus {
    outline: 2px solid #2c8a6a;  /* Grüner Rahmen, dick für Sichtbarkeit */
    outline-offset: 0;  /* Leichter Abstand zum Border */
    border-color: #2c8a6a;  /* Verstärkt bestehenden Border */
}

@media (max-width: 768px) {
    .login-container input[type="text"]:focus {
        outline: 2px solid #2c8a6a;
		outline-offset: 0;  /* FIX: Auch mobil kein Abstand */
        border: 2px solid #2c8a6a;  /* Einheitlich dick */
	}
}

.login-container button {
    padding: 10px 20px;
    background: #fff; /* Weiß für Kontrast */
    color: #333;
    border: 1px solid #2c8a6a;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.login-container button:hover {
    background: #2c8a6a; /* Dunkles Mint-Hover */
    color: #fff;
    border-color: #2c8a6a;
}

.login-container .error {
    color: #ff6b6b;
    margin-top: 10px;
}

.login-container p {
    margin-top: 20px;
    font-size: 0.9rem;
    color: #333; /* Dunkler für Mint-Hintergrund */
}

/* Zentrierter Hauptcontainer */
.main-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px 15px;
}

/* Überschriften - Schwarz für Lesbarkeit */
h1, h2 {
    text-align: center;
}

h1 {
    margin-bottom: 10px;
    font-size: 1.8rem;
    color: #000; /* Schwarz auf Mint */
}

h2 {
    color: #000; /* Konsistent schwarz */
}

/* Untertitel-Text vor/nach Frist */
.subtitle-text {
    display: block;
    max-width: 500px;
    margin: 20px auto 30px;
    padding: 0 15px;
    text-align: center;
    color: #333; /* Dunkler für Kontrast */
    font-size: 1rem;
    line-height: 1.4;
}

/* Erfolgsmeldung - Weiß mit dunklem Mint */
.success {
    background: #fff;
    color: #006d5b;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 20px;
    border: 2px solid #2c8a6a;
}

/* Gast-Karte - Weiß mit dunklem Mint-Rahmen, uniform Padding */
.guest {
    background: #fff;
    color: #333;
    border: 2px solid #2c8a6a;
    border-radius: 6px;
    padding: 15px; /* Uniform 15px */
    margin-bottom: 20px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 2px 4px rgba(44, 138, 106, 0.2); /* Dunkler Mint-Schatten */
    text-align: center;
}

.guest.expired {
    background: #f8f9fa;
    border-color: #ccc;
}

.guest.expired .guest-name {
    color: #999;
}

/* Name & Slider mit Label */
.guest-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    margin-bottom: 8px;
}

.guest-name {
    flex: 1;
    font-size: 1.1rem;
    margin-right: 10px;
    margin-top: -40px; /* Deine Anpassung: Höher positioniert, nur für den Namen */
    text-align: left;
}

/* Slider- und Label-Wrapper - Vertikal gestapelt und zentriert */
.slider-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
}

.slider-wrapper {
    position: relative;
    width: 90px;
    min-width: 90px;  /* NEU: Verhindert Shrink unter 90px (auch mobil in Flex) */
    height: 30px;
    cursor: pointer;
    /* ::before entfernt – war alter native Bar-Hintergrund, verursacht "leeren Balken" */
}

/* Status-Label - Zentriert unter Slider, erhöhte Breite für volle Sichtbarkeit von "Unentschieden" */
.status-label {
    font-size: 0.9rem;
    font-weight: bold;
    width: 110px; /* Erhöht auf 110px für Puffer, damit "Unentschieden" vollständig sichtbar ist */
    min-width: 110px;
    text-align: center;
    color: #555;
    white-space: nowrap; /* Kein Umbruch */
}

/* ALTE NATIVE SLIDER-STYLES KOMMENTIERT/ENTFERTN – VERURSACHEN KONFLIKT MIT CUSTOM DIV */
/*
.status-slider {
    -webkit-appearance: none;
    width: 100%; height: 100%;
    background: transparent;
    position: absolute; top: 0; left: 0;
    margin: 0; cursor: pointer;
    --thumb-color: #ff6b6b;
}

.status-slider[readonly],
.status-slider[disabled] {
    cursor: default;
    opacity: 0.7;
}

.status-slider::-webkit-slider-thumb { ... }  // etc. – alle ::-webkit- und ::-moz- Styles weglassen
/* ENDE KOMMENTAR – Für Custom: Neue Styles unten */

/* Custom Slider – Sichtbarer Thumb/Bar, passt zu Mint-Design */
.status-slider {
    position: relative;
    width: 90px;  /* Passe an deine Breite */
    min-width: 90px;  /* NEU: Fix Breite, Balken immer 90px (100% davon) */
    height: 30px;
    cursor: pointer;
    user-select: none;
    border: 1px solid #2c8a6a;  /* Mint-Border für Konsistenz */
    border-radius: 4px;
    background: #fff;  /* Weißer BG für Sichtbarkeit */
}

.status-slider.readonly {
    cursor: default;
    opacity: 0.7;
    background: #f8f9fa;
}

.slider-track {
    position: relative;
    width: 100%;
    height: 12px;  /* Etwas höher für bessere Sichtbarkeit */
    background: #e0e0e0;  /* Graue Track-Bar */
    border-radius: 6px;
    margin: 9px auto;  /* Zentriert im Container */
}

.slider-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;  /* Full Width, aber Thumb over */
    background: linear-gradient(to right, #ff6b6b 33%, #ffd93d 33%, #ffd93d 66%, #6bcf7f 66%);  /* Discrete Gradient für 3 Positionen */
    border-radius: 3px;
    opacity: 0.8;  /* Leicht transparent für Layering */
}

.slider-thumb {
    position: absolute;
    top: 50%;
    left: var(--position, 50%);
    width: 24px;  /* Größer für Touch */
    height: 24px;
    background: var(--thumb-color, #ddd);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 6px rgba(44, 138, 106, 0.3);  /* Mint-Schatten */
    border: 2px solid #fff;
    z-index: 10;  /* Über Bar */
    transition: left 0.2s ease;  /* Smooth */
}

.status-slider.status-0 .slider-thumb { --thumb-color: #ff6b6b; }
.status-slider.status-1 .slider-thumb { --thumb-color: #ffd93d; }
.status-slider.status-2 .slider-thumb { --thumb-color: #6bcf7f; }

/* Mobile: Touch-friendly, aber konsistente Höhe */
@media (max-width: 768px) {
    .status-slider { 
        height: 30px;  /* FIX: Standard-Höhe behalten (kein Wachstum) */
        width: 90px;   /* Optional: Auch Breite auf Standard (min-width sorgt eh dafür) */
    }
    .slider-thumb { 
        width: 24px;   /* FIX: Standard-Thumb (reicht für Touch, kein Vergrößern) */
        height: 24px;
    }
    .slider-track { 
        height: 6px;   /* FIX: Standard-Bar-Dicke (kein Verdicken) */
    }
}

/* Ernährungsfeld - Zentriert */
.diet-label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.9rem;
    color: #555;
    text-align: center;
}

input[type="text"][name*="diet"] {
    width: 100%;
    max-width: 300px;
    margin: 4px auto 0;
    display: block;
    padding: 6px;
    border: 1px solid #2c8a6a;
    border-radius: 4px;
    text-align: center;
}

input[type="text"][readonly] {
    background-color: #f8f9fa;
    color: #999;
    cursor: default;
}

/* Speichern-Button - Weiß mit dunklem Mint-Hover */
button[type="submit"] {
    display: block;
    margin: 40px auto 0;
    padding: 10px 20px;
    background: #fff;
    color: #333;
    border: 2px solid #2c8a6a;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

button[type="submit"]:hover {
    background: #2c8a6a; /* Dunkles Mint-Hover */
    color: #fff;
    border-color: #2c8a6a;
}

/* Info-Bereich - Weiß mit dunklem Mint */
.info {
    background: #fff;
    color: #333;
    border: 2px solid #2c8a6a;
    border-radius: 6px;
    padding: 15px;
    max-width: 500px;
    margin: 40px auto 20px;
    text-align: left;
    box-shadow: 0 2px 4px rgba(44, 138, 106, 0.2);
}

.info h2:first-child {
    text-align: center;  /* <h2> zentriert lassen (für Balance bei Blöcken) */
    margin: 10px 0 15px 0;  /* NEU: Abstand für Trennung (angepasst an dein padding:15px) */
    color: #2c8a6a;  /* NEU: Mint-Farbe für <h2> (passt zu Rahmen) */
    font-size: 1.4em;  /* Etwas größer für Modularität */
}

.info h2 {
    text-align: center;  /* <h2> zentriert lassen (für Balance bei Blöcken) */
    margin: 35px 0 15px 0;  /* NEU: Abstand für Trennung (angepasst an dein padding:15px) */
    color: #2c8a6a;  /* NEU: Mint-Farbe für <h2> (passt zu Rahmen) */
    font-size: 1.4em;  /* Etwas größer für Modularität */
}

.info p {
    line-height: 1.6;  /* NEU: Luftiger Zeilenabstand (vermeidet Gequetscht) */
    margin-bottom: 12px;  /* NEU: Abstand unter Absätzen (im Rahmen) */
    text-align: left;  /* Explizit links (falls center durchdringt) */
}

.info ul {
    line-height: 1.5;  /* NEU: Abstand in Listen */
    margin: 10px 0 15px 20px;  /* NEU: Einrückung + Abstände (links-bündig) */
    padding-left: 0;   /* Kein extra */
    text-align: left;  /* Liste links */
    list-style-type: disc;  /* Bullets sichtbar */
}

.info li {
    margin-bottom: 8px;  /* NEU: Abstand zwischen Items */
    text-align: left;
}

.info a {
    color: #2c8a6a;  /* NEU: Mint für Links (passt zum Rahmen) */
    text-decoration: underline;
    text-align: left;
}

.info a:hover {
    color: #1a5d4b;  /* Dunkler Mint beim Hover */
}

.info img {  /* Bleibt unverändert */
    width: 100%; height: auto;
    border-radius: 4px;
    margin-bottom: 10px;
}

/* Logout-Button - Rot, Hover mit dunklem Mint */
a.logout {
    display: block;
    width: max-content;
    margin: 20px auto 0;
    padding: 8px 16px;
    background: #ff6b6b;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
    transition: background 0.2s, color 0.2s;
}

a.logout:hover {
    background: #2c8a6a; /* Dunkles Mint-Hover */
    color: #fff;
}

/* Kontaktgruppen: Flex-Layout mit Wrapper (Namen horizontal, Num stacked, Mintgrün-Theme) */
.info .contact-group {
    margin-bottom: 20px;  /* Abstand zwischen Gruppen, wie .info ul */
    text-align: center;   /* Gruppe zentriert in .info (gilt für h3) */
}

.info .contact-group h3 {
    text-align: center !important;  /* Immer zentriert (überschreibt globale/Mobil) */
    margin: 35px 0 15px 0; /* Genau wie .info h2 */
    color: #2c8a6a !important;  /* Immer Mint (überschreibt global #000) */
    font-size: 1.1em;     /* Kleiner als .info h2 (1.4em) für Hierarchie */
    line-height: 1.4;     /* Luftiger wie .info p */
    font-weight: bold;    /* Explizit fett für Klarheit */
}

.info .contact-list {
    display: flex;        /* Row für Personen nebeneinander */
    flex-direction: row;  /* Horizontal auf Desktop */
    justify-content: center; /* Symmetrisch zentriert */
    align-items: flex-start; /* Top-align Personen */
    gap: 15px;  /* Abstand zwischen Personen */
    margin: 0 0 12px 0;  /* Bottom-Margin wie .info p */
    max-width: 100%;  /* Passt in .info (500px) */
    line-height: 1.6;  /* Luftiger wie .info p */
}

.info .person {
    display: flex;
    flex-direction: column;  /* Column: Name oben, Num darunter */
    align-items: center;     /* Zentriert Name/Num in Person */
    gap: 2px;  /* Minimaler Abstand Name zu Num */
    min-width: 150px;  /* Min-Breite pro Person */
    flex: 1;             /* Gleichmäßig verteilt */
}

.info .name {
    font-weight: bold;  /* Namen fett */
    color: #333;  /* Grau wie .info-Text */
    font-size: 1rem;  /* Standard */
    text-align: center; /* Zentriert */
    white-space: nowrap;  /* Kein Wrap */
}

.info .number {
    font-weight: normal;
    color: #333;  /* Grau */
    text-align: center; /* Zentriert unter Name */
    margin: 0;
}

.info .number a {
    color: #2c8a6a;  /* Mint wie .info a */
    text-decoration: underline;
    word-wrap: break-word;
}

.info .number a:hover {
    color: #1a5d4b;  /* Dunkler Mint */
}

/* Mobil: Personen stacked vertikal, aber h3 bleibt center/grün */
@media (max-width: 768px) {
    .info .contact-group h3 {
        text-align: center !important;  /* Explizit center auf Mobil (kein left-Override) */
        font-size: 1.1em;  /* Etwas kleiner auf Mobil für Kompaktheit */
    }
    
    .info .contact-list {
        flex-direction: column;  /* Vertikal: Person1 > Person2 */
        gap: 12px;  /* Mehr Abstand zwischen Personen */
        align-items: center;  /* Zentriert stacked */
    }
    
    .info .person {
        gap: 4px;  /* Etwas mehr Name-Num auf Mobil */
        min-width: auto;  /* Full-width */
        width: 100%;  /* Nutzt volle Breite */
    }
    
    .info .name,
    .info .number {
        text-align: left;  /* Links auf Mobil (nur für Namen/Num, nicht h3) */
    }
}

/* Responsive */
@media (max-width: 480px) {
    .guest-header {
        flex-wrap: wrap;
        justify-content: center;
    }

    .guest-name {
        flex: 1 1 100%;
        margin-right: 0;
        margin-bottom: 10px; /* Erhöht auf 10px für mehr Abstand zum Slider */
        text-align: center;
        margin-top: -40px; /* Beibehalten, aber Box-Platz kompensiert */
    }

    .slider-container {
        flex: 1 1 100%;
    }

    .status-label {
        font-size: 0.8rem;
        width: 90px; /* Erhöht mobil auf 90px für volle Sichtbarkeit von "Unentschieden" */
        min-width: 90px;
    }

    input[type="text"][name*="diet"] {
        max-width: 250px;
    }

    .subtitle-text {
        font-size: 0.9rem;
        padding: 0 10px;
        margin: 20px auto 30px;
    }

    .login-container input[type="text"] {
        width: 100%;
        max-width: 200px;
    }

    /* Guest Padding für Mobile – Name passt in Box */
    .guest {
        padding-top: 50px; /* Erhöht auf 50px, um Platz für margin-top: -40px zu schaffen */
        padding-bottom: 15px; /* Standard unten */
    }
}

/* Galerie: Carousel + Modal (in .info, Mint-Style) */
.gallery {
    background: #fff;
    border: 2px solid #2c8a6a;
    border-radius: 6px;
    padding: 15px;
    margin: 20px 0;
    box-shadow: 0 2px 4px rgba(44, 138, 106, 0.2);
    text-align: center;
    max-width: 100%;  /* Passt an .info (500px) */
}

.carousel-container {
    overflow: hidden;  /* Clipping für sichere Ränder */
    position: relative;  /* Enthält absolute Slides */
    width: 100%;
    max-width: 600px;  /* Passe an deine Galerie-Breite an */
    margin: 20px auto;  /* Zentriert */
}

.carousel-slides {
    position: relative;  /* Parent für absolute .slide */
    height: 350px;  /* Feste Höhe für Thumbs (anpassen: 300-400px) – passt Ratios */
    width: 100%;  /* Vollbreite, kein Multi-Slide */
}

.slide {
    position: absolute;  /* Überlappend: Alle an gleicher Stelle */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;  /* Standard: Unsichtbar */
    transition: opacity 0.4s ease-in-out;  /* Fade-Animation */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
}

.slide.active {
    opacity: 1;  /* Sichtbar: Fade in */
    z-index: 1;  /* Oben für Übergang */
}

.slide img {
    max-width: 100%;
    max-height: 280px;  /* Passt in Container-Höhe */
    object-fit: cover;  /* Croppt Ratios (Landscape/Portrait → fillt ohne Dehnung) */
    object-position: center;
    border-radius: 4px;
    cursor: pointer;
    display: block;
}

.slide img:hover {
    transform: scale(1.02);
}

.caption {
    margin-top: 8px;
    font-size: 0.9rem;
    text-align: center;
    color: #333;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Buttons (deine Originale) – überlappend */
.carousel-prev, .carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(44, 138, 106, 0.8);  /* Mint */
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    z-index: 2;
    transition: background 0.3s;
}

.carousel-prev {
    left: 10px;
}

.carousel-next {
    right: 10px;
}

.carousel-prev:hover, .carousel-next:hover {
    background: rgba(44, 138, 106, 1);
}

.modal {
    display: none;  /* Kritisch: Versteckt Modal (Standard) */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;  /* Vollbild für Overlay */
    background: rgba(0,0,0,0.9);
    overflow: auto;  /* Scroll bei Bedarf */
    /* Flex für Zentrierung des gesamten Modals (wird via JS aktiviert) */
    align-items: center;
    justify-content: center;
    flex-direction: column;  /* Vertikal: Img + Caption */
}

.modal-content {
    margin: auto;
    display: flex;  /* Flex für Stack-Zentrierung */
    flex-direction: column;  /* Kritisch: Vertikal (Bild oben, Caption unten) – nicht row! */
    align-items: center;  /* Zentriert alles horizontal (Bild + Text) */
    justify-content: center;  /* Vertikale Symmetrie (gleich Freiraum oben/unten) */
    max-width: 90%;
    max-height: 95vh;  /* Deine Einstellung: Bleibt */
    /* FIX: Entfernt kollidierendes relative Position/Transform – Parent-Flex zentriert */
    border-radius: 8px;
}

.modal-img {
    max-width: 100%;    /* Bleibt für breite Bilder */
    max-height: 85vh;
    width: auto;       /* Auto: Höhenbasiert, ohne Streckung */
    height: auto;
    border-radius: 4px;
    display: block;
    margin: 0 auto;    /* Zentriert */
    object-fit: contain;  /* Keine Verzerrung, passt proportional */
}

.modal-caption {
    color: #fff;
    text-align: center;  /* Text innerhalb zentriert */
    padding: 15px;
    font-size: 1rem;
    background: rgba(0,0,0,0.5);
    margin: 10px auto 20px;  /* Auto: Zentriert den Caption-Block unter Bild */
    margin-top: 10px;
    max-width: 90%;  /* Passt an Bild */
    border-radius: 4px;
    word-wrap: break-word;
    line-height: 1.4;
    flex-shrink: 0;  /* Verhindert Quetschen durch Flex */
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 3;
}

.close-modal:hover {
    color: #2c8a6a;
}

.modal-prev, .modal-next {
    position: absolute;
    top: 50%;
    color: #fff;  /* FIX: #fff statt #white (ungültig) */
    background: rgba(44, 138, 106, 0.7);
    border: none;
    width: 50px;  /* Kleiner auf Mobile */
    height: 50px;
    /* FIX: Padding entfernt – verursacht Überlauf in 50px-Box */
    cursor: pointer;
    border-radius: 50%;
    font-size: 20px;
    z-index: 2;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
}

.modal-prev { left: 10px; }
.modal-next { right: 10px; }

.modal-prev:hover, .modal-next:hover {
    background: rgba(44, 138, 106, 0.9);
}

/* Responsive: Mobil Pfeile/Modus anpassen */
@media (max-width: 768px) {
    .carousel-slides {
        height: 250px;
    }
    .slide img {
        max-height: 200px;
    }
    .carousel-prev, .carousel-next {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }
    
    /* FIX: Mobile Modal – Symmetrisches Padding für Zentrierung, Pfeile-Overlay */
    .modal {
        align-items: center;
        justify-content: center;
    }
    
    .modal-content {
        max-width: 95vw;  /* Etwas breiter für Mobile */
        max-height: 95vh;
        padding: 0 30px;  /* Symmetrisch: Platz für Pfeile, zentriert Content */
        align-items: center;  /* Verstärkt Horizontal-Zentrierung */
    }
    
    .modal-img {
        max-height: 70vh;  /* Mehr Platz, aber zentriert */
        margin: 0 auto;  /* Explizit auto-Margin für Bild */
    }
    
    .modal-caption {
        font-size: 0.85rem;  /* Etwas größer für Lesbarkeit (war 0.8) */
        line-height: 1.3;  /* Leicht mehr Abstand (war 1.2) – reduziert Clipping */
        overflow: visible;
        display: block;
        max-height: none;
        padding-bottom: 5px;  /* Unterer Puffer gegen Abschneiden */
        margin-top: 8px;  /* Weniger Padding oben */
        padding: 0 20px;  /* Seitlicher Abstand zu Pfeilen */
        word-break: break-word;  /* Besserer Umbruch auf Mobile */
        max-width: 90%;  /* Verhindert Rechts-Ragen bei langen Zeilen */
    }
    
    .modal-prev, .modal-next {
        width: 45px;  /* Kleiner für Touch */
        height: 45px;
        font-size: 18px;
    }
    
    .modal-prev {
        left: 5px;  /* Symmetrisch zu Padding */
    }
    
    .modal-next {
        right: 5px;
    }
    
    .close-modal {
        top: 10px;
        right: 20px;
        font-size: 30px;
    }
}

@media (max-width: 480px) {
    .gallery { padding: 10px; margin: 10px 0; }
    .slide img { height: 180px; }
    .caption { font-size: 0.8rem; }
    
    /* Zusätzlich Mobile: Engeres Padding */
    .modal-content {
        padding: 0 20px;
    }
}