/* Grundlegendes Styling für das Formular */
.mmarchiv-upload-form {
    max-width: 1200px; /* Maximale Breite des Formulars */
    margin: 0 auto;
    padding: 20px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
}



/* Grundlegendes Styling für das Formular */
.form-group {
    margin-bottom: 15px;
}


.form-group input[type="text"],
.form-group input[type="email"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.form-group textarea {
    min-height: 100px;
}


/* Basisstil für beide Buttons */
#update-location,
#cancel-map {
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Hover-Effekt */
#update-location:hover {
    background-color: #eee;
}

/* Spezieller Stil für Cancel-Button (rot) */
#cancel-map {
    background-color: #ff4d4d;
    color: white;
    border-color: #e60000;
}

#cancel-map:hover {
    background-color: #e60000;
}


#label_media_link {
    margin-top: 1em;
}

/* Container für nebeneinanderliegende Felder */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Abstand zwischen den Feldern */
    margin-bottom: 15px;
}

/* Flexibilität steuern */
.form-group.full-width {
    width: 100%;
}

.form-group.flex-1 {
    flex: 1; /* Nimmt den verfügbaren Platz gleichmäßig auf */
    min-width: 0; /* Verhindert, dass der Inhalt die Flexbox überläuft */
}

.form-group.flex-2 {
    flex: 2; /* Nimmt doppelt so viel Platz wie flex-1 */
}

/* Begrenzte Breite für schmale Felder */
.form-group.narrow-input {
    flex: 0 0 100px; /* Feste Breite für PLZ-Feld */
}

/* Optional: Separate Breite für Datumsfelder */
.form-group.narrow-input input[type="text"][maxlength="4"] {
    width: 100px; /* 4 Zeichen breit (für Jahr) */
}

/* Responsive Design: Unter 768 Pixel einzeilig */
@media (max-width: 768px) {
    .form-row {
        flex-direction: column; /* Felder untereinander anordnen */
        gap: 0; /* Abstand entfernen */
    }

    .form-group.flex-1,
    .form-group.flex-2,
    .form-group.narrow-input {
        width: 100%; /* Volle Breite auf kleinen Bildschirmen */
    }

    .form-group label {
        white-space: normal; /* Erlaubt Zeilenumbruch auf kleinen Bildschirmen */
    }
}




/* Stil für die Erfolgs-/Fehlermeldung */
#mmarchiv-upload-message {
    margin-top: 20px;
    padding: 10px;
    border-radius: 4px;
    display: none;
}

#mmarchiv-upload-message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

#mmarchiv-upload-message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Stil für den roten Stern */
.required {
    color: red;
    font-size: 1.2em;
    vertical-align: middle;
}
/* Stil für die Legende */
.form-legend {
    margin-top: 20px;
    font-size: 0.9em;
    color: #666;
}


#image-preview {
    max-width: 100%;
    height: auto;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px;
    background-color: #f9f9f9;
}


/* Tagify-Stile */
.tagify {
    width: 100%;
    padding: 0px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
}


.tagify__tag {
    padding: 5px 5px;
    margin: 5px;
    background: #68b601;
    color: #fff;
    border-radius: 5px;
    font-size: 15px;
    line-height: 1em;
}

.tagify__tag>div::before {
    box-shadow: none;
}
.tagify__tag>div {
    color:#fff;
}

.tagify__tag__removeBtn {
    color: #fff;
    margin-left: 5px;
    cursor: pointer;
}

.tagify__tag__removeBtn:hover {
    opacity: 0.7;
}

.tagify__input {
    display: inline-block;
    min-width: 100px;
    padding: 5px;
    border: none;
    outline: none;
    font-size: 14px;
}




.form-section {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #68b60110;
}

.form-section h3 {
    margin-top: 0;
    color: #68b601;
    border-bottom: 2px solid #68b601;
    padding-bottom: 10px;
    margin-bottom: 20px;
	display: inline-block;
}

.form-section h4 {
    margin-top: 0;
    color: #68b601;
    border-bottom: 2px solid #68b601;
	display: inline-block;
	margin: 1em 0;
}



.form-group {
    margin-bottom: 15px;
}


.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.required {
    color: red;
    font-size: 1.2em;
    vertical-align: middle;
}



/* Standard-Label-Stil */
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    white-space: nowrap; /* Verhindert den Zeilenumbruch der Labels */
}

.form-group label small {
    font-weight: 400;
}


/* Überschreibe white-space für das Label im Datenschutzhinweis */
.privacy-notice label {
    white-space: normal; /* Erlaubt den Zeilenumbruch */
}

.form-row2 {
	display: flex;
	gap: 10px;
	margin-bottom: 15px;
	flex-direction: column;
	align-items: flex-start;
}

/* Responsive Design: Unter 768 Pixel einzeilig */
@media (max-width: 768px) {
    .form-row2 {
        flex-direction: column; /* Felder untereinander anordnen */
        gap: 0; /* Abstand entfernen */
    }

    .form-row2 .form-group {
        width: 100%; /* Volle Breite auf kleinen Bildschirmen */
        flex: 0 0 auto; /* Flex-Eigenschaften zurücksetzen */
    }
}

/* Styling für den Datenschutzhinweis */
.privacy-notice {
    display: flex;
    align-items: center; /* Vertikal zentrieren */
}

.privacy-notice input[type="checkbox"] {
    width: 20px; /* Breite der Checkbox */
    height: 20px; /* Höhe der Checkbox */
    margin-right: 10px; /* Abstand zwischen Checkbox und Text */
    flex-shrink: 0; /* Verhindert, dass die Checkbox schrumpft */
}

.privacy-notice label {
    font-size: 0.9em; /* Kleinere Schriftgröße */
    color: #555; /* Farbe anpassen */
    margin: 0; /* Abstand zur Checkbox entfernen */
    flex: 1; /* Text nimmt den verfügbaren Platz ein */
}

.privacy-notice a {
    color: #68b601; /* Farbe des Links anpassen */
    text-decoration: underline; /* Unterstrichener Link */
}

.privacy-notice a:hover {
    color: #4a8c00; /* Farbe beim Hover */
}

#media-preview canvas {
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
}













/* ============================
   Haupt-Drag&Drop Container
   ============================ */
.filepond--root {
    background-color: #ffffff; /* Hintergrund des gesamten FilePond-Fensters */
    padding: 2rem;             /* Abstand innen */
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 2rem;       /* Abstand zu anderen Elementen */
}

/* Drag & Drop Bereich */
.filepond--drop-label {
    font-size: 1rem;
    color: #555;
    text-align: center;
    padding: 2.5rem 1rem;        /* größerer Innenabstand */
    border: 2px dashed #ccc;
    border-radius: 12px;
    background-color: #f7f7f7;   /* hellgrauer Hintergrund */
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

/* Hover & Drag-over Effekt */
.filepond--drop-label:hover,
.filepond--drop-label.filepond--drag-over {
    border-color: #0073aa;
    background-color: #e6f0fa;
    color: #0073aa;
}

/* Icon über Text */
.filepond--drop-label::before {
    content: "\f093"; /* FontAwesome Upload-Icon */
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900;
    display: block;
    font-size: 3rem;
    margin: 0.8rem;
    color: #0073aa;
}

.filepond--panel-root {
    background-color: #ffffff !important;
}

/* Hinweistext kleiner */
.filepond--label-action {
    font-size: 0.85rem;
    color: #666;
    margin-top: 0.5rem;
}
.filepond--image-preview-overlay-success {
    color: #68b601 !Important;
}
.filepond--image-preview {
    background: #dfdfdf !important;
}
.filepond--root {
    box-shadow: 0 2px 8px rgb(0 0 0 / 30%) !important;
}