/* ==========================================================================
   Login-Hintergründe (Verwaltung): Themenliste, Datumsfelder, Ablagefläche, Bildraster. Baut auf app.css auf.
   Keine Inline-Styles (CSP).
   ========================================================================== */

.login-erzwingen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 12px 0 4px; }
.login-erzwingen .input { width: auto; min-width: 240px; }

.login-themen { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }
.login-thema { display: flex; flex-direction: column; }
.login-thema .card-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.login-thema--inaktiv { opacity: 0.7; }
/* Der Zeitraum belegt immer Platz für zwei Zeilen, die Vorschau steht am unteren Rand der Karte: bei allen Karten auf gleicher Höhe */
.login-thema-zeit { margin: 0; min-height: calc(2 * 1.45em); line-height: 1.45; color: var(--text-muted); }
.login-thema-zahlen { margin: 0; }
.login-vorschau { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: auto; padding-top: 12px; }
.login-vorschau img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; background: var(--surface-2); }

.login-datum { display: flex; gap: 8px; }
.login-datum .input { width: auto; flex: 1 1 0; }

/* Ablagefläche: das echte Dateifeld liegt unsichtbar über der ganzen Fläche, so bleibt sie per Tastatur und ohne JavaScript bedienbar */
.login-dropzone {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
    padding: 26px 20px; border: 2px dashed var(--border-strong); border-radius: var(--radius, 10px);
    background: var(--surface-2); cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.login-dropzone:hover, .login-dropzone:focus-within, .login-dropzone.is-ueber { border-color: var(--accent, #0f766e); background: var(--accent-soft, #e6f4f2); }
.login-dropzone-symbol { color: var(--accent, #0f766e); }
.login-dropzone-auswahl { font-weight: 560; }
.login-dropzone-feld { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.login-dropzone + .formular-aktionen { margin-top: 12px; }

.login-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 20px; }
.login-bild { margin: 0; border: 1px solid var(--border); border-radius: var(--radius, 10px); overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.login-bild a { display: block; }
.login-bild img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--surface-2); }
.login-bild figcaption { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; align-items: flex-start; }
.login-bild-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 560; }