:root {
    --bs-primary: #3490dc;    /* Beispiel: ein kräftiges Blau */
    --bs-secondary: #6c757d; /* Beispiel: ein gedämpftes Grau */
    --bs-success: #28a745;   /* Beispiel: Grün für Erfolg */
    --bs-danger: #dc3545;    /* Beispiel: Rot für Fehler */
    /* und so weiter... */
}

.error-message {
    display: none;
}

/* Wrapper für das Formular */
.fg-bb-form-container {
    display: flex;
    flex-wrap: wrap; /* Für mobile Ansicht */
    gap: 20px; /* Abstand zwischen den Spalten */
}

/* Linke Spalte: Formular */
.fg-bb-form-left {
    flex: 1 1 100%; /* Standard: einspaltig */
}

.fg-bb-form-block {
    flex: 1 1 100%; /* Standard: einspaltig */
}

@media (min-width: 1024px) {
    .fg-bb-form-left {
        flex: 1 1 60%; /* 60% Breite für das Formular */
    }
}

/* Rechte Spalte: Dropzone */
.fg-bb-form-right {
    flex: 1 1 100%; /* Standard: einspaltig */
}

@media (min-width: 1024px) {
    .fg-bb-form-right {
        flex: 1 1 35%; /* 35% Breite für die Dropzone */
    }
}

/* Styling für die Dropzone */
#fg-bb-dropzone {
    width: 100%;
    height: 200px;
    border: 2px dashed #0073aa;
    background-color: #f1f1f1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0073aa;
    font-size: 16px;
    cursor: pointer;
}

#fg-bb-dropzone:hover {
    background-color: #e9e9e9;
}

#fg-bb-beitrags-formular label {
    display: block;
    margin-top: 15px;
    margin-bottom:5px;
    font-weight: bold;
}

#fg-bb-beitrags-formular input[type="text"],
#fg-bb-beitrags-formular input[type="email"],
#fg-bb-beitrags-formular input[type="date"],
#fg-bb-beitrags-formular textarea {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #363636;
    outline: none;
    transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;

}

form input:focus, form textarea:focus, form select:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(0, 115, 230, 0.5);
}

/* Valid */
form input:user-valid, form textarea:user-valid, form select:user-valid {
    border-color: #28a745; /* Grün für gültige Eingaben */
    background-color: #e6f4ea; /* Helles Grün für gültige Eingaben */
    box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
}

/* Invalid */
form input:user-invalid, form textarea:user-invalid, form select:user-invalid {
    border-color: #dc3545; /* Rot für ungültige Eingaben */
    background-color: #f8d7da; /* Helles Rot für ungültige Eingaben */
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.5);
}

/* Fehlermeldung für ungültige Eingaben */
form input:user-invalid + .error-message,
form textarea:user-invalid + .error-message {
    display: block;
    color: #dc3545;
    font-size: 10px;
    margin-top: -10px;
    margin-left: 4px;
    margin-bottom: 15px;
}

#fg-bb-dropzone {
    border: 2px dashed #ccc;
    padding: 20px;
    margin-top: 10px;
}

#fg-bb-beitrags-formular button {
    margin-top: 20px;
    padding: 7px 15px;
}

#fg-bb-beitrags-formular button[type="submit"] {
    border: 1px solid #000;
    transition: all 0.5s ease;
}

#fg-bb-beitrags-formular button[type="submit"]:hover {
    background: #111;
    color: #fff;
}

#total-progress-container {
    width: 100%;
    background-color: #f3f3f3;
    margin-bottom: 15px;
}

#total-progress {
    height: 20px;
    background-color: #4caf50;
    width: 0%;
}

#formular-spinner {
    margin-top: 20px;
    display: inline-block;
}

.svg-spinners--180-ring-with-bg {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z' opacity='0.25'/%3E%3Cpath fill='%23000' d='M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z'%3E%3CanimateTransform attributeName='transform' dur='0.75s' repeatCount='indefinite' type='rotate' values='0 12 12;360 12 12'/%3E%3C/path%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  @media (min-width: 1024px) {
    #fg-bb-dropzone {
        height: 450px;
    }
}

.entry-meta .meta-item {
    display: block;
    margin: 5px 0;
    color: #555;
}

.post-images {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
}

.post-image {
    max-width: 150px;
    height: auto;
    border: 1px solid #ccc;
    padding: 5px;
    background: #f9f9f9;
}

.sort-form {
    margin-bottom: 20px;
}

.sort-form label {
    font-weight: bold;
    margin-right: 10px;
}

.sort-form select {
    padding: 5px;
    font-size: 14px;
}