/* css/components.modal.css - v2.2.7 (Galerie Update 2) */

.modal { 
    display: none; 
    position: fixed; 
    z-index: 100; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.7); /* Etwas dunkler für besseren Kontrast */
    backdrop-filter: blur(8px); /* Etwas stärkerer Blur */
    align-items: center; 
    justify-content: center; 
    padding: 1rem; 
    box-sizing: border-box; /* Padding berücksichtigen */
}
.modal-content { 
    background-color: var(--surface-primary); 
    margin: auto; 
    padding: 2rem; 
    border: 1px solid var(--border-primary); 
    width: 90%; 
    max-width: 600px; 
    border-radius: var(--radius); 
    position: relative; 
    box-shadow: var(--shadow-lg); 
}
#anfrage-form-modal .modal-content { display: flex; flex-direction: column; }
.close-btn { 
    color: var(--text-secondary); 
    position: absolute; 
    top: 10px; 
    right: 20px; 
    font-size: 28px; 
    font-weight: bold; 
    cursor: pointer; 
    transition: color 0.2s; 
    z-index: 102; /* Über den Pfeilen */
}
.close-btn:hover { color: var(--text-primary); }

/* Project Form Modal Layout */
#project-form { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 600px) { #project-form { grid-template-columns: 1fr 1fr; } }
#project-form button, #anfrage-form button[type="submit"] { grid-column: 1 / -1; margin-top: auto; }
#edit-project-btn { margin-top: 1.5rem; width: 100%; }

/* Anfrage Form Modal Layout */
#anfrage-form { flex-grow: 1; display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem;}

/* Confirm Modal */
#confirm-modal .modal-content { max-width: 450px; text-align: center; }
.modal-buttons { display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; }

/* Termin Auswahl (in Anfrage & Terminwunsch Modals) */
#termin-auswahl-container, #termin-wunsch-auswahl-container { 
    flex-shrink: 1; 
    overflow-y: auto; 
    margin-bottom: 1rem; 
    display: flex;
    flex-direction: column;
    gap: 8px; 
    max-height: 250px;
}
.termin-accordion-item {
    border: 1px solid var(--border-primary);
    border-radius: var(--radius);
    overflow: hidden;
    background-color: var(--surface-primary);
}
.termin-group.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: var(--surface-secondary);
    cursor: pointer;
    transition: background-color 0.2s;
}
.termin-group.accordion-header:hover {
    background-color: var(--background-secondary);
}
.termin-group.accordion-header h4 { margin: 0; font-size: 1.1em; }
.accordion-arrow {
    font-size: 1.2em;
    font-weight: bold;
    transition: transform 0.2s;
    color: var(--text-secondary);
}
.termin-group.accordion-header:hover .accordion-arrow { color: var(--text-primary); }
.termin-button-container.accordion-content { 
    display: none; 
    flex-wrap: wrap; 
    gap: 0.5rem; 
    margin-bottom: 0;
    padding: 15px;
    border-top: 1px solid var(--border-primary);
    background-color: var(--surface-primary);
}
.btn-termin-auswahl { 
    background-color: var(--surface-secondary); 
    color: var(--text-primary); 
    border: 1px solid var(--border-primary); 
    padding: 0.5rem 1rem; 
    font-size: 0.9rem; 
}
.btn-termin-auswahl.selected { 
    background-color: var(--accent-color); 
    color: white; 
    border-color: var(--accent-color); 
    transform: none; 
}
.btn-termin-auswahl.selected:hover { background-color: var(--accent-color); }

/* ===== V2.2.7 Gallery Modal Update 2 ===== */
#gallery-modal .modal-content { 
    /* Basis-Layout bleibt Flexbox zentriert */
    padding: 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    /* Größe entfernt, da das Bild die Größe steuert */
    width: auto; /* Passt sich dem Bild an */
    height: auto; /* Passt sich dem Bild an */
    max-width: 95vw; /* Sicherheit, falls Bild zu breit */
    max-height: 95vh; /* Sicherheit, falls Bild zu hoch */
    background-color: transparent; 
    border: none; 
    box-shadow: none; 
    position: relative; /* Wichtig für Pfeil-Positionierung */
}

#gallery-image { 
    display: block; /* Verhindert extra Leerraum unter dem Bild */
    /* Neue Größenbeschränkungen - vergrößert von 60 auf 70 */
    max-width: 70vw; 
    max-height: 70vh; 
    /* Fallback/Responsivität innerhalb des Containers */
    width: auto;
    height: auto; 
    object-fit: contain; /* Bild wird skaliert, Seitenverhältnis bleibt erhalten */
    
    border-radius: var(--radius); 
    box-shadow: var(--shadow-lg); 
    border: 3px solid white; 
}

.gallery-nav-btn { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    background-color: rgba(30, 30, 30, 0.6); /* Dunklerer Hintergrund */
    color: white; 
    border: none; 
    /* Größere, ansehnlichere Pfeile */
    font-size: 2.8rem;  
    font-weight: bold; /* Macht die Pfeile dicker */
    width: 55px; /* Etwas größer */
    height: 55px; /* Etwas größer */
    line-height: 55px; /* Vertikale Zentrierung des Zeichens */
    text-align: center; /* Horizontale Zentrierung */
    border-radius: 50%; 
    z-index: 101; 
    cursor: pointer; 
    transition: background-color 0.2s, transform 0.1s; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Leichter Schatten */
    padding: 0; /* Entfernt Standard-Padding */
}
.gallery-nav-btn:hover { 
    background-color: rgba(0, 0, 0, 0.8); 
    transform: translateY(-50%) scale(1.05); /* Leichter Hover-Effekt */
}
.gallery-nav-btn:active {
     transform: translateY(-50%) scale(1); /* Klick-Effekt */
}

/* Neue Positionierung näher am Bild (relative Werte) */
.gallery-nav-btn.prev { 
    left: 2vw; /* Abstand vom linken Rand des Viewports */
}
.gallery-nav-btn.next { 
    right: 2vw; /* Abstand vom rechten Rand des Viewports */
}

/* Anpassung für kleinere Bildschirme (optional, falls Pfeile überlagern) */
@media (max-width: 768px) {
    /* Auf kleinen Bildschirmen das Bild größer machen (z.B. 85vw) */
    #gallery-image {
        max-width: 85vw;
        max-height: 85vh;
    }
    
    .gallery-nav-btn {
        width: 45px;
        height: 45px;
        line-height: 45px;
        font-size: 2.2rem;
    }
    .gallery-nav-btn.prev { left: 1vw; }
    .gallery-nav-btn.next { right: 1vw; }
}


#gallery-modal .close-btn { 
    /* Position relativ zum Viewport, nicht zum Bild */
    position: fixed; /* Bleibt beim Scrollen (falls nötig) */
    right: 1.5rem; 
    top: 1.5rem; 
    color: white; 
    background-color: rgba(30, 30, 30, 0.6); 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    line-height: 1; 
    font-size: 24px; 
    z-index: 102; /* Über den Pfeilen */
     box-shadow: 0 1px 3px rgba(0,0,0,0.3);
     transition: background-color 0.2s;
}
#gallery-modal .close-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}
/* ===== ENDE V2.2.7 Gallery Modal Update ===== */


/* Erfolgs-Overlay (unverändert) */
.success-overlay-content {
    background-color: var(--surface-primary); 
    margin: auto; 
    padding: 2rem; 
    border: 1px solid var(--border-primary); 
    width: 90%; 
    max-width: 450px; 
    border-radius: var(--radius); 
    position: relative; 
    box-shadow: var(--shadow-lg);
    text-align: center;
    transform: scale(0.9);
    opacity: 0;
    animation: success-modal-fadein 0.3s ease-out forwards;
}
#success-overlay.modal {
    z-index: 1001; 
}
@keyframes success-modal-fadein {
    to {
        transform: scale(1);
        opacity: 1;
    }
}
.success-overlay-content h2 {
    color: var(--success-color);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
.success-overlay-content p {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.5;
}
.success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem auto;
}
.success-icon-circle {
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
    stroke-width: 3;
    stroke: var(--success-color);
    fill: none;
    animation: success-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) 0.3s forwards;
}
.success-icon-check {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    stroke-width: 4;
    stroke: var(--success-color);
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    animation: success-stroke 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
@keyframes success-stroke {
    to {
        stroke-dashoffset: 0;
    }
}

/* ===== Stile für Termin-Schnellerstellung im Modal (unverändert) ===== */
.modal-divider {
    border: none;
    border-top: 1px solid var(--border-primary);
    margin: 1.5rem 0;
}
#toggle-quick-create-btn.btn-full-width {
    width: 100%;
    margin-bottom: 0; 
}
#quick-termin-form-container {
    padding-top: 1.5rem;
    margin-top: 1.5rem; 
    border-radius: var(--radius);
    background-color: var(--surface-secondary);
    padding: 1rem;
    border: 1px solid var(--border-primary);
}
#quick-termin-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.quick-termin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
/* ===== ENDE Stile für Termin-Schnellerstellung ===== */

/* ===== Stile für Bild-Metadaten Modal (V2.2.3, unverändert) ===== */
#image-metadata-modal .modal-content {
    max-width: 500px; /* Etwas schmaler als Standard */
}
.metadata-image-preview {
    display: block;
    max-width: 100%;
    max-height: 250px; /* Begrenzte Höhe für die Vorschau */
    margin: 0 auto 1.5rem auto; /* Zentriert mit Abstand nach unten */
    border-radius: var(--radius);
    border: 1px solid var(--border-secondary);
    object-fit: contain;
}
#image-metadata-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
#save-metadata-btn {
    margin-top: 0.5rem; /* Weniger Abstand nach oben */
}
.status-message { /* Für Speicher-Feedback */
    margin-top: 1rem;
    font-size: 0.9rem;
    min-height: 1.2em; /* Platz reservieren */
}
.status-message.success { color: var(--success-color); }
.status-message.error { color: var(--error-color); }
/* ===== ENDE Stile für Bild-Metadaten Modal ===== */