/* test/public_html/css/style.css */
/* Globale Stile und Basis-Layout-Elemente */

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif; /* Standard-Schriftart aus main.html */
}

body {
    background-color: #f4f4f4; /* Standard-Hintergrund, kann von Sektionen überschrieben werden */
    color: #333;
    display: flex;
    flex-direction: column;
}

#page-container { /* Wrapper für die gesamte Seite, um Footer unten zu halten */
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Anpassung für alle Seiten außer der Startseite, um Platz für den fixierten Header zu schaffen */
body:not(.home-body) #page-container { 
    padding-top: 70px; /* Höhe der Navigationsleiste + etwas Puffer */
}

.container { /* Haupt-Inhaltscontainer für Seiten wie Event-Details, Formulare etc. */
    width: 80%;     /* Standard-Container-Breite aus altem Design */
    max-width: 1200px; /* Maximale Breite für größere Bildschirme */
    margin: 0 auto;  /* Zentrierung */
    padding: 20px;
    background-color: #fff; /* Standard-Hintergrund für Inhaltsbereiche */
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    flex: 1; /* Nimmt verfügbaren Platz ein */
}

/* Header (Navigationsleiste oben im alten Design) */
/* Diese Stile werden jetzt in home.css und calendar.css über .site-header-main-html .general-site-navigation definiert
   oder sollten hierher verschoben werden, wenn sie wirklich global sein sollen.
   Für jetzt lasse ich die Platzhalter, um keine Regressionen zu verursachen,
   aber sie sollten im Idealfall konsolidiert werden.
*/
header {
    /* Hintergrund und Farben werden jetzt direkt von .site-header-main-html gesteuert */
    /* padding: 10px 0; */
    /* text-align: center; */
}

header h1 a { /* Für das Hauptlogo/Titel im alten Header */
    color: #fff;
    text-decoration: none;
    font-size: 1.8em; /* Angepasst */
}

nav ul {
    padding: 0;
    list-style: none;
    text-align: center;
    margin: 5px 0 0 0;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav a { /* Alte Nav-Links */
    color: #fff;
    text-decoration: none;
    font-size: 18px;
}

nav a:hover { /* Alte Nav-Links Hover */
    color: #77aaff;
}

/* Main Content Area */
main {
    padding-top: 0; /* Das padding-top kommt jetzt vom body:not(.home-body) #page-container */
    flex: 1; /* Sorgt dafür, dass main den verfügbaren Platz ausfüllt */
}

/* Footer */
footer {
    text-align: center;
    padding: 20px;
    background: #333;
    color: #fff;
    margin-top: auto; /* Stellt sicher, dass der Footer unten ist */
}


/* Allgemeine Formular-Stile (bleiben für Event-Formulare etc.) */
.form-group {
    margin-bottom: 15px;
}
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500; /* Etwas fetter */
}
.form-group input[type="text"],
.form-group input[type="date"],
.form-group input[type="datetime-local"],
.form-group input[type="password"], /* Hinzugefügt für Passwortfelder */
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px; /* Etwas mehr Padding */
    border: 1px solid #ddd;
    border-radius: 6px; /* Etwas mehr Rundung */
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif; /* Konsistente Schriftart */
    font-size: 1em;
}
.form-group input[type="file"] { /* Styling für File-Inputs */
    padding: 5px;
}
.form-group textarea {
    resize: vertical;
    min-height: 100px; /* Etwas höher */
}

fieldset.form-section-spacing {
    margin-bottom: 30px;
    padding: 20px; /* Innenabstand für Fieldsets */
    border: 1px solid #e0e0e0; /* Sichtbarere Umrandung */
    border-radius: 8px;
}
fieldset.form-section-spacing legend {
    font-size: 1.2em;
    font-weight: 600;
    padding: 0 10px; /* Abstand für die Legende */
    color: #333;
}
fieldset.form-section-spacing:last-of-type {
    margin-bottom: 15px;
    /* border-bottom: none; /* Kann bleiben oder durch die Fieldset-Border ersetzt werden */
}

/* Allgemeine Button-Stile */
.btn {
    display: inline-block;
    background: #007bff; /* Standard-Blau für Buttons */
    color: #fff;
    padding: 10px 18px; /* Angepasstes Padding */
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    font-size: 1em;
    font-weight: 500;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.btn:hover {
    background: #0056b3; /* Dunkleres Blau im Hover */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.btn-primary { /* Wird oft synonym mit .btn verwendet, kann aber spezifischer sein */
    background-color: #007bff;
}
.btn-primary:hover {
    background-color: #0056b3;
}

.btn-danger {
    background-color: #dc3545; /* Rot für Gefahr/Löschen */
}
.btn-danger:hover {
    background-color: #c82333;
}

.btn-secondary {
     background-color: #6c757d; /* Grau für sekundäre Aktionen */
}
.btn-secondary:hover {
     background-color: #545b62;
}

.btn-sm { /* Kleinere Buttons */
    padding: 6px 12px;
    font-size: 0.875em;
}

/* Generische Modal-Stile (bleiben für Upload-Modals, Lösch-Bestätigungen etc.) */
.modal {
    display: none; /* Standardmäßig versteckt */
    position: fixed;
    z-index: 1050; /* Hoher z-index, über dem neuen Header */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6); /* Dunklerer Overlay */
    justify-content: center;
    align-items: center;
}

.modal-dialog-centered { /* Hilfsklasse für vertikale Zentrierung (obwohl .modal schon flex ist) */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    width: 100%;
    padding: 20px; /* Damit das Modal nicht am Rand klebt */
    box-sizing: border-box;
}

.modal-content { /* Der eigentliche Modal-Inhalt */
    background-color: #fefefe;
    padding: 25px 30px; /* Mehr Padding */
    border: 1px solid #bbb; /* Hellerer Rand */
    border-radius: 8px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    animation-name: animatemodal;
    animation-duration: 0.3s;
    display: flex;
    flex-direction: column;
    max-width: 550px; /* Etwas breiter */
    width: 90%;
}

.photo-upload-modal-content { /* Spezifisch für Foto-Upload, wenn Text zentriert sein soll */
    text-align: center;
}

.close-button {
    color: #888; /* Heller */
    position: absolute;
    top: 12px; /* Angepasst */
    right: 15px;
    font-size: 30px; /* Etwas größer */
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}
.close-button:hover,
.close-button:focus {
    color: #333; /* Dunkler im Hover */
    text-decoration: none;
}

@-webkit-keyframes animatemodal {
    from {transform: translateY(-50px); opacity: 0}
    to {transform: translateY(0); opacity: 1}
}

@keyframes animatemodal {
    from {transform: translateY(-50px); opacity: 0}
    to {transform: translateY(0); opacity: 1}
}

/* Nachrichten-Boxen (Fehler, Erfolg etc.) */
.message {
    padding: 12px 18px; /* Angepasst */
    margin-bottom: 20px; /* Mehr Abstand */
    border: 1px solid;
    border-radius: 6px;
    text-align: left;
    font-size: 0.95em;
    line-height: 1.5;
}
.error-message {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.success-message {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.info-message {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
}
.warning-message {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

/* Dropzone und Preview für Foto-Uploads (generisch für Modals) */
.modal-section {
    margin-bottom: 20px;
}
.drop-zone {
    border: 2px dashed #ced4da;
    background-color: #f8f9fa;
    color: #495057;
    padding: 30px 20px; /* Etwas weniger Padding */
    text-align: center;
    cursor: pointer;
    border-radius: 8px;
    margin-bottom: 15px;
    min-height: 100px; /* Etwas kleiner */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.drop-zone.dragover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}
.drop-zone-text {
    margin: 0 0 10px 0;
    font-weight: 500;
    color: #333;
}
.custom-file-upload-label { /* Button-ähnliches Label für File-Input */
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
}
.custom-file-upload-label:hover {
    background-color: #0056b3;
}
/* Versteckter aktueller File-Input */
/* #photoFileInput { display: none; } /* In main.html wird es anders gehandhabt */

.photo-preview-container {
    display: flex;
    flex-wrap: nowrap; /* Verhindert Umbruch, scrollbar wenn nötig */
    overflow-x: auto; /* Horizontales Scrollen für viele Bilder */
    padding: 10px;
    border: 1px dashed #ccc;
    border-radius: 5px;
    min-height: 110px; /* Höhe für Previews */
    box-sizing: border-box;
    align-items: center;
    background-color: #f8f8f8;
    margin-top: 10px;
}
.photo-preview-item {
    position: relative;
    flex-shrink: 0; /* Verhindert Schrumpfen der Items */
    width: 90px; /* Kleinere Previews */
    height: 90px;
    margin-right: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}
.photo-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.photo-preview-item .remove-btn {
    position: absolute;
    top: -1px; /* Leicht angepasst für bessere Klickbarkeit */
    right: -1px;
    background-color: rgba(220, 53, 69, 0.75);
    color: white;
    border: none;
    border-radius: 0 0 0 4px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 18px; /* Angepasst */
    font-size: 1.2em;
    cursor: pointer;
    z-index: 10;
}
.photo-preview-item .remove-btn:hover {
    background-color: #dc3545;
}

/* Fortschrittsbalken für Uploads */
.progress-container {
    width: 100%;
    background-color: #e0e0e0;
    border-radius: 5px;
    margin-top: 15px;
    position: relative;
    height: 22px; /* Etwas flacher */
    overflow: hidden;
}
.progress-bar {
    width: 0%;
    height: 100%;
    background-color: #28a745; /* Grün für Erfolg */
    border-radius: 5px;
    transition: width 0.3s ease-in-out;
}
.progress-text {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    line-height: 22px;
    color: #333;
    font-weight: bold;
    font-size: 0.85em;
}

/* Die Stile für das alte Protagonisten-Karussell (.protagonists-section, .protagonists-carousel etc. ohne "new-" oder "song-" Präfix)
   wurden entfernt, da es durch das neue Design ersetzt wird. */

/* Stile für die Foto-Galerie auf der Event-Detailseite (show.php) könnten hier sein oder in event_show.css */
.photo-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Etwas mehr Abstand */
    margin-top: 20px;
    margin-bottom: 20px;
}
.photo-gallery .photo-item {
    text-align: center;
    max-width: 170px; /* Etwas größer */
}
.photo-gallery .photo-item img {
    width: 160px; /* Angepasst */
    height: 160px;
    object-fit: cover;
    border: 1px solid #ccc; /* Hellerer Rand */
    border-radius: 6px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.photo-gallery .photo-item img:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.photo-gallery .photo-item p { /* Bildunterschrift */
    font-size: 0.9em;
    margin-top: 0;
    color: #555;
    max-width: 160px;
    word-wrap: break-word;
    line-height: 1.3;
}

/* Stile für die Foto-Verwaltung im Formular (form.php) könnten hier sein oder in event_form.css */
.photo-manage-grid {
    display: grid; /* Grid für bessere Kontrolle */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* Responsive Spalten */
    gap: 20px;
    margin-bottom: 20px;
}
.photo-manage-item-wrapper {
    /* Breite wird durch Grid gesteuert */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Abstand zwischen Bild und Details */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px;
    background-color: #f9f9f9;
}
.photo-background-container {
    position: relative;
    width: 100%;
    padding-top: 75%; /* Seitenverhältnis für das Bild (z.B. 4:3) */
    background-size: cover; /* Cover statt contain für bessere Füllung */
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #f0f0f0;
}
.photo-background-container img { /* Falls du ein <img> statt background-image nutzt */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}
.photo-background-container .photo-delete-checkbox {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    width: 20px; /* Etwas größer */
    height: 20px;
    cursor: pointer;
}
.photo-details-area {
    display: flex;
    flex-direction: column; /* Untereinander für Caption und Checkbox */
    gap: 8px;
    width: 100%;
}
.photo-details-area textarea.caption-input {
    width: 100%; /* Volle Breite */
    padding: 8px 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.9em;
    min-height: 40px; /* Angepasst */
    line-height: 1.4;
    resize: vertical;
}
.photo-details-area .important-checkbox-wrapper {
    display: flex;
    align-items: center;
    padding: 5px 0; /* Nur oben/unten Padding */
}
.photo-details-area input[type="checkbox"].important-photo-checkbox {
    width: 18px;
    height: 18px;
    margin-right: 8px; /* Mehr Abstand */
    cursor: pointer;
}
.photo-details-area label.important-label {
    font-size: 0.85em;
    color: #333;
    cursor: pointer;
    user-select: none;
}
.photo-background-container.selected-for-delete {
    outline: 3px solid #dc3545; /* Statt border, um Layout nicht zu verschieben */
    outline-offset: -3px;
    box-shadow: 0 0 8px rgba(220, 53, 69, 0.6);
}