/* ═══════════════════════════════════════════════════════════════
   STYLESHEET FÜR KERSJ.ES — Persönliche Portfolio-Website
   Dunkles Farbschema mit warmen Akzenttönen
   ═══════════════════════════════════════════════════════════════ */

/* ═══════ GOOGLE FONTS IMPORT ═══════ */
/* Inter-Schriftart von Google Fonts laden — Gewichte 300–700 für
   verschiedene Texthierarchien; display=swap sorgt dafür, dass
   Text sofort sichtbar ist, auch wenn die Schrift noch lädt */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ═══════ RESET & CSS CUSTOM PROPERTIES ═══════ */
/* Universeller Box-Sizing-Reset: border-box sorgt dafür, dass
   Padding und Border in die Gesamtbreite/-höhe eingerechnet werden */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* --- Farbpalette und Design-Tokens (Dunkles Thema) --- */
:root {
    --bg:        #0a0a0a;    /* Haupthintergrund — fast Schwarz */
    --surface:   #141414;    /* Erhöhte Flächen (Karten, Panels) */
    --surface-2: #1a1a1a;    /* Zweite Oberflächenebene (Hover-Zustände) */
    --border:    #1f1f1f;    /* Standard-Rahmenfarbe */
    --border-h:  #2a2a2a;    /* Rahmenfarbe bei Hover */
    --muted:     #525252;    /* Gedämpfter Text (Beschriftungen, Metadaten) */
    --text:      #d4d0c8;    /* Standard-Textfarbe — warmes Grau */
    --accent:    #c8b89a;    /* Akzentfarbe — warmes Gold/Beige */
    --accent-dim:#a89878;    /* Abgedunkelte Akzentfarbe für Hover-Effekte */
    --white:     #f0ece4;    /* Helles Weiß mit warmem Unterton */
    --danger:    #c0392b;    /* Rot für Lösch-Aktionen und Fehler */
    --success:   #27ae60;    /* Grün für Erfolgsmeldungen */
    --info:      #3498db;    /* Blau für Informationshinweise */
    --font:      'Inter', system-ui, -apple-system, sans-serif; /* Schriftart-Stack mit Systemfallbacks */
    --radius:    8px;        /* Standard-Eckenradius */
    --radius-lg: 12px;       /* Größerer Eckenradius für Karten */
    --shadow:    0 4px 24px rgba(0,0,0,.35);  /* Standard-Schatten */
    --shadow-lg: 0 12px 48px rgba(0,0,0,.5);  /* Großer Schatten für modale Elemente */
    --transition: .2s cubic-bezier(.4,0,.2,1); /* Standard-Übergangszeit mit Material-Bezier-Kurve */
}

/* ═══════ BASIS-STILE ═══════ */
/* Grundschriftgröße und weiches Scroll-Verhalten für Ankerlinks */
html { font-size: 16px; scroll-behavior: smooth; }

/* --- Körper-Element --- */
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    line-height: 1.65;       /* Großzügiger Zeilenabstand für gute Lesbarkeit */
    min-height: 100vh;       /* Mindesthöhe = volle Bildschirmhöhe */
    -webkit-font-smoothing: antialiased;      /* Glättere Schriftdarstellung auf macOS */
    -moz-osx-font-smoothing: grayscale;       /* Glättere Schriftdarstellung auf Firefox/macOS */
}

/* --- Links — erben die Textfarbe, kein Unterstrich --- */
a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition);
}

/* --- Textauswahl — Akzentfarbe als Hintergrund --- */
::selection {
    background: var(--accent);
    color: var(--bg);
}

/* ═══════ LAYOUT-CONTAINER ═══════ */
/* Zentrierter Inhalts-Container mit maximaler Breite für optimale Lesbarkeit */
.wrap {
    max-width: 720px;        /* Optimale Lesebreite für Fließtext */
    margin: 0 auto;          /* Horizontal zentriert */
    padding: 0 28px;         /* Seitlicher Innenabstand */
}

/* ═══════ EINBLEND-ANIMATION ═══════ */
/* fadeUp: Inhalt gleitet von unten nach oben ein und blendet dabei ein —
   erzeugt einen eleganten Lade-Effekt beim Seitenaufruf */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); } /* Start: unsichtbar, 12px nach unten versetzt */
    to   { opacity: 1; transform: translateY(0); }    /* Ende: voll sichtbar, Ursprungsposition */
}

/* Animation wird auf den Hauptinhalt angewendet */
body > .wrap {
    animation: fadeUp .5s ease-out;
}

/* ═══════ LOGO ═══════ */
/* Logo-Markierung in der Kopfzeile mit dezenter Transparenz */
.logo-mark {
    display: inline-block;
    margin-bottom: 28px;
    opacity: .85;            /* Leicht transparent im Ruhezustand */
    transition: opacity var(--transition), transform var(--transition);
}

/* Hover: volle Deckkraft und leichte Vergrößerung */
.logo-mark:hover {
    opacity: 1;
    transform: scale(1.05);
}

.logo-mark img {
    display: block;          /* Entfernt unteren Abstand von Inline-Bildern */
    border-radius: 4px;
}

/* ═══════ KOPFZEILE (HEADER) ═══════ */
/* Hauptkopfbereich der Seite mit Name und Beschreibung */
header {
    padding: 72px 0 56px;   /* Großzügiger vertikaler Abstand */
}

/* --- Augenbraue (Eyebrow) — kleine Kategorie-Beschriftung über der Überschrift --- */
header .eyebrow {
    font-size: 11px;
    letter-spacing: .14em;   /* Gesperrte Schrift für Versalien */
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 20px;
    font-weight: 500;
}

/* --- Hauptüberschrift h1 --- */
header h1 {
    font-size: clamp(2rem, 6vw, 3rem); /* Responsive Schriftgröße: min 2rem, max 3rem */
    font-weight: 600;
    color: var(--white);
    letter-spacing: -.03em;  /* Negatives Tracking für große Überschriften */
    line-height: 1.1;        /* Enger Zeilenabstand bei großen Schriften */
    margin-bottom: 16px;
}

/* --- Untertitel / Tagline --- */
header .tagline {
    font-size: 1rem;
    color: var(--accent);    /* Akzentfarbe hebt die Tagline hervor */
    font-weight: 400;
}

/* ═══════ NAVIGATIONSLINKS ═══════ */
/* Horizontale Link-Leiste unter dem Header */
.nav-links {
    display: flex;
    gap: 20px;
    margin-top: 32px;
    flex-wrap: wrap;         /* Umbruch auf kleineren Bildschirmen */
}

.nav-links a {
    font-size: 13px;
    color: var(--muted);
    border-bottom: 1px solid transparent; /* Unsichtbarer Rahmen — wird bei Hover sichtbar */
    padding-bottom: 2px;
    transition: color var(--transition), border-color var(--transition);
}

/* Hover: heller Text mit Akzent-Unterstrich */
.nav-links a:hover {
    color: var(--white);
    border-color: var(--accent);
}

/* ═══════ TRENNLINIE ═══════ */
/* Horizontale Trennlinie — dezent und minimal */
hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0;
}

/* ═══════ ABSCHNITTE (SECTIONS) ═══════ */
/* Standard-Abschnitt der Hauptseite */
section {
    padding: 48px 0;
}

/* Trennlinie zwischen aufeinanderfolgenden Abschnitten */
section + section {
    border-top: 1px solid var(--border);
}

/* Abschnitts-Überschrift h2 */
section > h2 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--white);
    letter-spacing: -.02em;
    margin-bottom: 6px;
}

/* --- Abschnitts-Beschriftung — kleine Kategorie über dem Inhalt --- */
.section-label {
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 28px;
    font-weight: 500;
}

/* ═══════ ÜBER-MICH-BEREICH (ABOUT) ═══════ */
/* Fließtext im Über-Mich-Abschnitt — begrenzte Breite für Lesbarkeit */
.about p:not(.section-label) {
    font-size: 1.05rem;
    color: var(--text);
    max-width: 560px;        /* Maximale Zeilenbreite für optimale Lesbarkeit */
    line-height: 1.75;
}

/* ═══════ PROJEKT-LISTE (WORK LIST) ═══════ */
/* Liste der Portfolio-Projekte im Listenformat */
.work-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;                  /* Kein Abstand — wird über Padding der Links gesteuert */
}

/* Einzelner Projekt-Eintrag als klickbare Zeile */
.work-list li a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 16px;
    border-radius: var(--radius);
    transition: background var(--transition), color var(--transition);
}

/* Hover-Hintergrund für Projekt-Einträge */
.work-list li a:hover {
    background: var(--surface);
}

/* Titel wird bei Hover heller */
.work-list li a:hover .work-title {
    color: var(--white);
}

/* --- Projekttitel --- */
.work-title {
    font-size: .95rem;
    font-weight: 500;
    color: var(--text);
    transition: color var(--transition);
}

/* --- Projektbeschreibung --- */
.work-desc {
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.5;
    margin-top: 4px;
}

/* --- Pfeil-Symbol rechts — zeigt Navigation an --- */
.work-arrow {
    font-size: .85rem;
    color: var(--muted);
    flex-shrink: 0;          /* Pfeil wird nicht gestaucht */
    margin-left: auto;       /* Pfeil wird nach rechts geschoben */
    transition: transform var(--transition), color var(--transition);
}

/* Hover: Pfeil bewegt sich nach rechts und wird golden */
.work-list li a:hover .work-arrow {
    transform: translateX(4px);
    color: var(--accent);
}

/* ═══════ KONTAKT-BEREICH ═══════ */
/* Kontakt-Link mit Unterstrich-Effekt */
.contact-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    color: var(--white);
    border-bottom: 1px solid var(--border-h);
    padding-bottom: 3px;
    transition: border-color var(--transition), color var(--transition);
}

.contact-link:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* ═══════ FUSSZEILE (FOOTER) ═══════ */
/* Fußzeile mit Copyright und Links, horizontal verteilt */
footer {
    padding: 28px 0 44px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between; /* Copyright links, Links rechts */
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Copyright-Text */
footer span {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: .02em;
}

/* --- Footer-Link-Gruppe --- */
footer .footer-links {
    display: flex;
    gap: 18px;
}

footer .footer-links a {
    font-size: 12px;
    color: var(--muted);
    transition: color var(--transition);
    position: relative;      /* Für den animierten Unterstrich */
}

/* --- Animierter Unterstrich — wächst von links nach rechts bei Hover --- */
footer .footer-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;                /* Start: unsichtbar */
    height: 1px;
    background: var(--accent);
    transition: width var(--transition);
}

footer .footer-links a:hover {
    color: var(--white);
}

/* Hover: Unterstrich dehnt sich auf volle Breite aus */
footer .footer-links a:hover::after {
    width: 100%;
}

/* ═══════ PDF-BETRACHTER ═══════ */
/* Container für die Bachelorarbeit-PDF-Anzeige */
.pdf-container {
    margin: 32px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: auto;          /* Scrollbar wenn Inhalt überläuft */
    background: var(--surface);
    display: flex;
    justify-content: center;
    max-height: 90vh;        /* Maximal 90% der Bildschirmhöhe */
    box-shadow: var(--shadow);
}

/* PDF wird als Canvas gerendert — responsiv skaliert */
.pdf-container canvas {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* ═══════ RESPONSIVE BREAKPOINTS ═══════ */
/* --- Tablet-Breakpoint: unter 900px --- */
/* Galerie wechselt von 3 auf 2 Spalten */
@media (max-width: 900px) {
    .gallery { columns: 2; }
}

/* --- Mobil-Breakpoint: unter 600px --- */
/* Umfassende Anpassungen für kleine Bildschirme:
   - Weniger Padding und engere Abstände
   - Galerie auf 1 Spalte reduziert
   - Projektbeschreibungen ausgeblendet (nur Titel sichtbar)
   - Suchleiste nimmt volle Breite ein
   - Admin-Formulare werden vertikal gestapelt
   - Lightbox-Navigation verkleinert */
@media (max-width: 600px) {
    .wrap { padding: 0 20px; }
    header { padding: 56px 0 44px; }
    section { padding: 36px 0; }
    .work-desc { display: none; }              /* Beschreibungen auf Mobilgeräten ausblenden */
    .pdf-container { max-height: 70vh; }
    .gallery { columns: 1; column-gap: 0; }   /* Einspaltiges Layout */
    .gallery-header { flex-direction: column; align-items: flex-start; }
    .gallery-search-wrap { width: 100%; flex-direction: column; align-items: stretch; }
    .gallery-search input { width: 100%; }
    .gallery-search input:focus { width: 100%; }
    .search-reset { width: 100%; }
    .image-grid { grid-template-columns: 1fr; }
    .admin-form { flex-direction: column; }
    .admin-form input, .admin-form button { width: 100%; }
    .user-card-row { flex-direction: column; }
    .lightbox-nav { width: 36px; height: 36px; font-size: 1rem; }
    .lightbox-prev { left: 8px; }
    .lightbox-next { right: 8px; }
    .lightbox-img { max-width: 96vw; max-height: 70vh; }
}

/* ═══════ GALERIE — KOPFZEILE ═══════ */
/* Kopfbereich der Galerie mit Titel, Zähler und Suche */
.gallery-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

/* Linke Seite: Überschrift und Bildzähler */
.gallery-header-left {
    display: flex;
    align-items: baseline;   /* An Textbasislinie ausrichten */
    gap: 12px;
}

.gallery-header-left h2 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--white);
    letter-spacing: -.02em;
    margin: 0;
}

/* --- Bildzähler-Badge — zeigt Anzahl der Bilder an --- */
.gallery-count {
    font-size: .72rem;
    font-weight: 600;
    color: var(--accent);
    background: rgba(200,184,154,.1); /* Leicht transparenter Akzent-Hintergrund */
    padding: 3px 10px;
    border-radius: 100px;    /* Perfekt abgerundete Pillenform */
    letter-spacing: .02em;
}

/* ═══════ GALERIE — SUCHBEREICH ═══════ */
/* Container für Such-Toggle und Eingabefeld */
.gallery-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Suchmodus-Umschalter (z.B. Dateiname / OCR-Text) --- */
.gallery-search-toggle {
    display: flex;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 100px;    /* Pillenform */
    padding: 2px;
    gap: 0;
}

/* Einzelner Suchmodus-Button */
.search-mode {
    background: none;
    border: none;
    color: var(--muted);
    font-size: .75rem;
    font-family: var(--font);
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 100px;
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
    white-space: nowrap;     /* Kein Textumbruch */
}

.search-mode:hover {
    color: var(--text);
}

/* Aktiver Suchmodus — hervorgehoben mit Akzentfarbe */
.search-mode.active {
    background: var(--accent);
    color: var(--bg);
}

/* --- Suchfeld-Container mit Lupensymbol --- */
.gallery-search {
    position: relative;      /* Für die absolute Positionierung des Lupensymbols */
}

/* Sucheingabefeld */
.gallery-search input {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 14px 8px 36px; /* Links extra Platz für das Lupensymbol */
    border-radius: 100px;
    font-size: .82rem;
    font-family: var(--font);
    width: 200px;
    transition: border-color var(--transition), width var(--transition), box-shadow var(--transition);
}

/* Fokus: Feld wird breiter mit Akzent-Rahmen und feinem Leuchteffekt */
.gallery-search input:focus {
    outline: none;
    border-color: var(--accent);
    width: 240px;            /* Verbreitert sich bei Fokus */
    box-shadow: 0 0 0 3px rgba(200,184,154,.08); /* Dezenter Leuchtring */
}

/* Lupensymbol als CSS-Pseudo-Element (Inline-SVG) */
.gallery-search::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%); /* Vertikal zentriert */
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23525252' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;    /* Klicks gehen durch das Symbol hindurch */
}

.search-reset {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 8px 12px;
    border-radius: 100px;
    font-size: .78rem;
    font-family: var(--font);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.search-reset:hover {
    color: var(--text);
    border-color: var(--border-h);
    background: rgba(255,255,255,.03);
}

/* ═══════ KEINE ERGEBNISSE ═══════ */
/* Anzeige wenn die Suche keine Treffer ergibt — standardmäßig ausgeblendet */
.gallery-no-results {
    text-align: center;
    padding: 48px 20px;
    color: var(--muted);
    font-size: .88rem;
    display: none;           /* Wird per JavaScript bei Bedarf eingeblendet */
}

/* ═══════ OCR-STATUSLEISTE ═══════ */
/* Statusanzeige während der OCR-Texterkennung mit Spinner und Fortschrittsbalken */
.ocr-status {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
    animation: fadeUp .3s ease-out; /* Einblend-Animation beim Erscheinen */
}

/* Innerer Container für Spinner und Statustext nebeneinander */
.ocr-status-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --- Drehender Spinner — runder Rahmen, bei dem nur die obere Seite farbig ist --- */
.ocr-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-h);
    border-top-color: var(--accent); /* Nur die obere Seite in Akzentfarbe */
    border-radius: 50%;
    animation: ocrSpin .8s linear infinite; /* Endlose Drehung */
}

/* Spinner-Drehanimation — eine volle Umdrehung pro Durchlauf */
@keyframes ocrSpin {
    to { transform: rotate(360deg); }
}

/* Statustext neben dem Spinner */
.ocr-status-text {
    font-size: .8rem;
    color: var(--text);
    font-weight: 500;
}

/* --- Fortschrittsbalken — Hintergrund-Track --- */
.ocr-progress {
    height: 3px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

/* Fortschrittsbalken-Füllung — Breite wird per JavaScript gesetzt */
.ocr-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    width: 0;                /* Startwert, wird dynamisch aktualisiert */
    transition: width .3s ease;
}

/* ═══════ GALERIE — MASONRY-LAYOUT ═══════ */
/* CSS-Spalten-basiertes Masonry-Layout für die Bildergalerie
   (Bilder werden in Spalten angeordnet wie bei Pinterest) */
.gallery {
    display: columns;
    columns: 3;              /* Standard: 3 Spalten auf Desktop */
    column-gap: 12px;
    margin-top: 0;
}

/* ═══════ GALERIE — EINZELNE BILDER ═══════ */
/* Jedes Bild als Karte mit Hover-Effekten und Overlay */
.gallery-item {
    position: relative;      /* Für das absolute Overlay */
    overflow: hidden;        /* Bild-Zoom wird am Kartenrand abgeschnitten */
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    cursor: pointer;
    break-inside: avoid;     /* Verhindert Spaltenumbruch innerhalb eines Elements */
    margin-bottom: 12px;
    opacity: 0;              /* Start: unsichtbar — wird durch Animation sichtbar */
    transform: translateY(16px);
    animation: galleryFadeIn .5s ease-out forwards; /* forwards: behält End-Zustand bei */
    transition: border-color .3s ease, box-shadow .3s ease;
}

/* Einblend-Animation für Galerie-Elemente — gleitet von unten ein */
@keyframes galleryFadeIn {
    to { opacity: 1; transform: translateY(0); }
}

/* Hover: goldener Rahmen und stärkerer Schatten */
.gallery-item:hover {
    border-color: var(--accent-dim);
    box-shadow: 0 8px 32px rgba(0,0,0,.45);
}

/* Bild innerhalb der Karte — responsiv und mit Zoom-Übergang */
.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .5s cubic-bezier(.4,0,.2,1); /* Langsamer, eleganter Zoom */
}

/* Fallback-Hinweis pro Kachel, falls ein Bildformat nicht dekodiert werden kann */
.gallery-item-fallback {
    display: none;
    min-height: 170px;
    padding: 18px 14px;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    flex-direction: column;
    color: var(--text);
    background: linear-gradient(145deg, #1a1a1a 0%, #121212 100%);
    font-size: .78rem;
    line-height: 1.45;
}

.gallery-item-fallback strong {
    color: var(--white);
    font-size: .82rem;
}

.gallery-item-fallback-file {
    color: var(--accent);
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: .72rem;
    word-break: break-all;
}

.gallery-item.gallery-item-unsupported {
    cursor: default;
    border-style: dashed;
    border-color: var(--muted);
}

.gallery-item.gallery-item-unsupported img {
    display: none;
}

.gallery-item.gallery-item-unsupported .gallery-item-fallback {
    display: flex;
}

.gallery-item.gallery-item-unsupported .gallery-item-overlay {
    display: none;
}

/* Hover: leichte Vergrößerung des Bildes */
.gallery-item:hover img {
    transform: scale(1.04);
}

/* --- Overlay mit Bildtitel — erscheint bei Hover über dem Bild --- */
/* Gradient von unten nach oben: dunkel → transparent */
.gallery-item-overlay {
    position: absolute;
    inset: 0;                /* Deckt das gesamte Element ab */
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.15) 40%, transparent 100%);
    opacity: 0;              /* Standardmäßig unsichtbar */
    transition: opacity .35s ease;
    display: flex;
    align-items: flex-end;   /* Text am unteren Rand */
    padding: 20px 16px;
}

/* Hover: Overlay wird sichtbar */
.gallery-item:hover .gallery-item-overlay {
    opacity: 1;
}

/* Bildtitel im Overlay */
.gallery-item-overlay span {
    color: var(--white);
    font-size: .85rem;
    font-weight: 500;
    text-shadow: 0 1px 4px rgba(0,0,0,.5); /* Schatten für bessere Lesbarkeit */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Abschneiden mit „..." bei langem Text */
.search-highlight {
    background: rgba(200,184,154,.26);
    color: var(--white);
    padding: 0 3px;
    border-radius: 4px;
}

/* Verschachtelte Albumstruktur in der Galerie */
.gallery-subalbums {
    margin-top: 14px;
}

.gallery-tree-level-1,
.gallery-tree-level-2,
.gallery-tree-level-3,
.gallery-tree-level-4 {
    margin-top: 10px;
    margin-left: 18px;
    padding-left: 12px;
    border-left: 1px dashed var(--border);
}
    max-width: 100%;
}

/* ═══════ GALERIE — LEERZUSTAND ═══════ */
/* Anzeige wenn die Galerie keine Bilder enthält */
.gallery-empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.8;
}

.gallery-empty svg {
    display: block;
    margin: 0 auto 20px;
    opacity: .3;             /* Dezentes Platzhalter-Symbol */
}

/* ═══════ LIGHTBOX (BILD-VOLLANSICHT) ═══════ */
/* Vollbild-Overlay zum Betrachten einzelner Bilder */
.lightbox {
    display: none;           /* Standardmäßig ausgeblendet */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .96); /* Fast undurchsichtiger schwarzer Hintergrund */
    backdrop-filter: blur(20px);     /* Unscharfer Hintergrund (Glaseffekt) */
    -webkit-backdrop-filter: blur(20px); /* Safari-Präfix */
    z-index: 1000;           /* Über allem anderen */
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;         /* Klick zum Schließen */
    user-select: none;       /* Kein Text auswählbar */
}

/* Aktiver Zustand — Lightbox wird sichtbar */
.lightbox.active {
    display: flex;
}

/* --- Lightbox-Inhalt mit Einblend-Animation --- */
.lightbox-content {
    animation: lightboxIn .3s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 94vw;
    max-height: 92vh;
}

/* Einblend-Animation: leichte Vergrößerung von 95% auf 100% */
@keyframes lightboxIn {
    from { opacity: 0; transform: scale(.95); }
    to   { opacity: 1; transform: scale(1); }
}

/* --- Schließen-Button (X) — oben rechts --- */
.lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: rgba(255,255,255,.08); /* Leicht durchscheinend */
    border: 1px solid rgba(255,255,255,.1);
    color: var(--white);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer;
    opacity: .7;
    transition: opacity var(--transition), background var(--transition), transform var(--transition);
    z-index: 1001;           /* Über dem Lightbox-Inhalt */
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-close:hover {
    opacity: 1;
    background: rgba(255,255,255,.15);
    transform: scale(1.05);
}

/* --- Navigationsbuttons (Vor/Zurück) — vertikal zentriert --- */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    color: var(--white);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: .5;
    transition: opacity var(--transition), background var(--transition), transform var(--transition);
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-nav:hover {
    opacity: 1;
    background: rgba(255,255,255,.12);
}

/* Positionierung: Zurück links, Weiter rechts */
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

/* Hover-Mikroanimation: leichte Verschiebung in Pfeilrichtung */
.lightbox-prev:hover { transform: translateY(-50%) translateX(-2px); }
.lightbox-next:hover { transform: translateY(-50%) translateX(2px); }

/* --- Lightbox-Bild --- */
.lightbox-img {
    max-width: 88vw;
    max-height: 78vh;
    object-fit: contain;     /* Bild wird komplett angezeigt, nicht zugeschnitten */
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,.6); /* Dramatischer Schatten */
    cursor: default;         /* Normaler Cursor über dem Bild */
    transition: opacity .25s ease;
}

/* Überblendeffekt beim Bildwechsel */
.lightbox-img.switching {
    opacity: .3;             /* Kurz ausgeblendet während des Wechsels */
}

/* --- Bildinformationen unter dem Bild --- */
.lightbox-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    cursor: default;
}

/* Bildtitel */
.lightbox-title {
    color: var(--text);
    font-size: .88rem;
    font-weight: 500;
    opacity: .9;
}

/* --- Bildzähler (z.B. „3 / 12") --- */
.lightbox-counter {
    font-size: .72rem;
    color: var(--muted);
    background: rgba(255,255,255,.06);
    padding: 3px 10px;
    border-radius: 100px;
    font-variant-numeric: tabular-nums; /* Gleichmäßige Ziffernbreiten für stabiles Layout */
}

/* ═══════ ADMIN-PANEL — HAUPTBEREICHE ═══════ */
/* Einzelner Admin-Bereich als Karte mit Rahmen */
.admin-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    margin-bottom: 20px;
    transition: border-color var(--transition);
}

/* Dezenter Hover-Effekt auf Admin-Karten */
.admin-section:hover {
    border-color: var(--border-h);
}

/* Überschrift innerhalb einer Admin-Sektion */
.admin-section h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    letter-spacing: -.01em;
}

/* ═══════ EINKLAPPBARE BEREICHE (COLLAPSIBLE) ═══════ */
/* Klickbare Überschrift zum Ein-/Ausklappen von Inhaltsbereichen */
.collapsible-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Chevron-Pfeil rechts */
    user-select: none;       /* Text nicht auswählbar */
    transition: color var(--transition);
}

.collapsible-toggle:hover {
    color: var(--accent);
}

/* --- Chevron-Pfeil (Auf/Zu-Indikator) --- */
/* Inline-SVG als Hintergrundbild — zeigt nach unten wenn geöffnet */
.toggle-chevron {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23525252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform var(--transition);
    flex-shrink: 0;
}

/* Eingeklappter Zustand: Chevron um 90° nach links gedreht */
.collapsible-toggle.collapsed .toggle-chevron {
    transform: rotate(-90deg);
}

/* Eingeklappte Überschrift verliert den unteren Rand */
.collapsible-toggle.collapsed {
    margin-bottom: 0;
    border-bottom-color: transparent;
}

/* --- Einklappbarer Inhaltskörper --- */
/* Nutzt max-height für CSS-Transition (height: auto lässt sich nicht animieren) */
.collapsible-body {
    overflow: hidden;
    max-height: 5000px;      /* Ausreichend großer Wert als Platzhalter für „offen" */
    opacity: 1;
    transition: max-height .4s ease, opacity .3s ease, margin .3s ease;
}

/* Eingeklappter Zustand: Höhe 0, unsichtbar */
.collapsible-body.collapsed {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
}

/* ═══════ ADMIN-UNTERBEREICHE (NACH BENUTZER GRUPPIERT) ═══════ */
/* Verschachtelter Bereich innerhalb einer Admin-Sektion */
.admin-subsection {
    margin-top: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    background: var(--bg);   /* Dunklerer Hintergrund als Eltern-Sektion */
}

/* Unterbereich-Überschrift (h4) */
.admin-subsection h4.collapsible-toggle {
    font-size: .9rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

/* ═══════ GALERIE — BENUTZERGRUPPEN ═══════ */
/* Gruppierung von Galeriebildern nach Benutzer im Admin-Bereich */
.gallery-user-group {
    margin-bottom: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    background: var(--surface);
}

/* Gruppenüberschrift mit eingebettetem Bildzähler */
.gallery-user-group h3.collapsible-toggle {
    font-size: .95rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

/* Bildzähler innerhalb der Gruppenüberschrift */
.gallery-user-group .gallery-count {
    margin-left: 8px;
}

/* ═══════ ADMIN-FORMULARE ═══════ */
/* Horizontales Formular-Layout für Admin-Eingaben */
.admin-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;         /* Umbruch bei wenig Platz */
    align-items: center;
    margin-bottom: 18px;
}

/* --- Eingabefelder im Admin-Formular --- */
.admin-form input[type="text"],
.admin-form input[type="password"],
.admin-form input[type="file"] {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 9px 14px;
    border-radius: var(--radius);
    font-size: .85rem;
    font-family: var(--font);
    transition: border-color var(--transition), box-shadow var(--transition);
}

/* Fokus-Zustand: Akzent-Rahmen mit Leuchtring */
.admin-form input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(200,184,154,.1);
}

/* ═══════ BUTTONS ═══════ */
/* Standard-Button und Admin-Formular-Button teilen sich das gleiche Styling */
.admin-form button,
.btn {
    background: var(--accent);
    color: var(--bg);
    border: none;
    padding: 9px 18px;
    border-radius: var(--radius);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font);
    transition: background var(--transition), transform var(--transition);
}

/* Hover: dunklere Akzentfarbe und leichtes Anheben */
.admin-form button:hover,
.btn:hover {
    background: var(--accent-dim);
    transform: translateY(-1px); /* Subtiler Schwebeeffekt */
}

/* --- Gefahr-Button (Löschen etc.) --- */
.btn-danger {
    background: var(--danger);
    color: #fff;
}

.btn-danger:hover {
    background: #a93226;    /* Dunkleres Rot bei Hover */
}

/* --- Kleiner Button für platzsparende Aktionen --- */
.btn-small {
    padding: 6px 12px;
    font-size: .78rem;
}

/* ═══════ ADMIN-AKTIONSLINKS ═══════ */
/* Horizontale Reihe von Aktions-Links im Admin-Bereich */
.admin-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

/* Einzelner Aktions-Link als umrahmter Button */
.admin-actions a {
    display: inline-block;
    padding: 7px 16px;
    border-radius: var(--radius);
    font-size: .8rem;
    border: 1px solid var(--border);
    color: var(--text);
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.admin-actions a:hover {
    border-color: var(--accent-dim);
    color: var(--white);
    background: var(--surface-2);
}

/* --- Gefährlicher Aktions-Link (z.B. „Alle löschen") --- */
.admin-actions a.danger {
    border-color: rgba(192,57,43,.4);
    color: var(--danger);
}

.admin-actions a.danger:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

/* ═══════ BENUTZERLISTE ═══════ */
/* Liste aller Benutzer im Admin-Bereich */
.user-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Einzelner Benutzer-Eintrag */
.user-list li {
    display: flex;
    justify-content: space-between; /* Name links, Löschen-Link rechts */
    align-items: center;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: .85rem;
}

/* Löschen-Link in der Benutzerliste */
.user-list li a {
    color: var(--danger);
    font-size: .78rem;
    transition: opacity var(--transition);
}

.user-list li a:hover {
    opacity: .7;
}

/* ═══════ BILDER-RASTER UND BILDKARTEN ═══════ */
/* Responsives Grid für Admin-Bilderverwaltung */
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); /* Automatische Spaltenanzahl */
    gap: 14px;
}

/* Einzelne Bildkarte im Admin-Bereich */
.image-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.image-card:hover {
    border-color: var(--accent-dim);
    box-shadow: var(--shadow);
}

/* Vorschaubild innerhalb der Karte */
.image-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;       /* Bild füllt den Bereich und wird zugeschnitten */
    display: block;
    transition: transform .3s ease;
    cursor: pointer;
}

.image-card:hover img {
    transform: scale(1.02);
}

/* --- Karteninhalt unter dem Bild --- */
.image-card-body {
    padding: 16px;
}

/* Metadaten (Dateiname) in Monospace-Schrift */
.image-card-body .meta {
    font-size: .72rem;
    color: var(--muted);
    margin-bottom: 12px;
    word-break: break-all;   /* Lange Dateinamen umbrechen */
    font-family: 'SF Mono', 'Fira Code', monospace;
    letter-spacing: .01em;
}

/* Formular innerhalb der Bildkarte (z.B. Bildtitel ändern) */
.image-card-body form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

/* Texteingabe innerhalb der Bildkarte */
.image-card-body input[type="text"] {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 7px 12px;
    border-radius: var(--radius);
    font-size: .82rem;
    font-family: var(--font);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.image-card-body input[type="text"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(200,184,154,.08);
}

/* Aktions-Buttons unter dem Formular */
.image-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

/* ═══════ ADMIN-NAVIGATION ═══════ */
/* Link-Leiste im Admin-Bereich (z.B. „Zurück", „Abmelden") */
.admin-nav {
    display: flex;
    gap: 14px;
    margin-top: 24px;
}

.admin-nav a {
    font-size: .85rem;
    color: var(--muted);
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: color var(--transition), border-color var(--transition);
}

.admin-nav a:hover {
    color: var(--white);
    border-color: var(--accent);
}

/* ═══════ BENUTZER-BEARBEITUNGSKARTEN ═══════ */
/* Karten zur Bearbeitung von Benutzerdaten im Admin-Bereich */
.user-edit-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Verschachtelte Album-Hierarchie: Unteralben werden als eigene Kacheln
 * direkt unter dem Elternalbum eingerückt dargestellt. */
.album-level-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.album-tree-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.album-children-wrap {
    margin-left: 24px;
    padding-left: 14px;
    border-left: 1px dashed var(--border);
}

.album-path-hint {
    font-size: .76rem;
    color: var(--muted);
    margin: -2px 0 8px;
    letter-spacing: .01em;
}

/* Einzelne Benutzer-Bearbeitungskarte */
.user-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.user-card:hover {
    border-color: var(--border-h);
    box-shadow: 0 2px 12px rgba(0,0,0,.15);
}

/* Zeile mit Eingabefeldern innerhalb der Karte */
.user-card-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

/* --- Einzelnes Feld mit Beschriftung --- */
.user-card-field {
    flex: 1;
    min-width: 120px;        /* Mindestbreite bevor Umbruch */
}

/* Feld-Beschriftung in Versalien */
.user-card-field label {
    display: block;
    font-size: .7rem;
    color: var(--muted);
    margin-bottom: 5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 500;
}

/* Eingabefelder und Dropdown-Auswahl */
.user-card-field input,
.user-card-field select {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 12px;
    border-radius: var(--radius);
    font-size: .82rem;
    font-family: var(--font);
    transition: border-color var(--transition), box-shadow var(--transition);
}

/* Fokus-Zustand für Eingabefelder */
.user-card-field input:focus,
.user-card-field select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(200,184,154,.08);
}

/* --- Benutzerdefiniertes Dropdown-Styling --- */
/* Entfernt das native Dropdown-Symbol und ersetzt es durch ein eigenes SVG */
.user-card-field select {
    appearance: none;        /* Entfernt das native Dropdown-Aussehen */
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23525252' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;     /* Platz für den benutzerdefinierten Pfeil */
}

/* Aktions-Buttons unter der Bearbeitungskarte */
.user-card-actions {
    display: flex;
    gap: 8px;
}

/* ═══════ HINWEISMELDUNGEN (ALERTS) ═══════ */
/* Standard-Alert-Stil — wird durch Modifikatoren erweitert */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: .85rem;
    margin-bottom: 16px;
    font-weight: 500;
}

/* --- Erfolgsmeldung — grüner Hintergrund --- */
.alert-success {
    background: rgba(39, 174, 96, .1);
    border: 1px solid rgba(39, 174, 96, .25);
    color: var(--success);
}

/* --- Informationshinweis — blauer Hintergrund --- */
.alert-info {
    background: rgba(52, 152, 219, .1);
    border: 1px solid rgba(52, 152, 219, .25);
    color: var(--info);
}

/* --- Fehlermeldung — roter Hintergrund --- */
.alert-error {
    background: rgba(192, 57, 43, .1);
    border: 1px solid rgba(192, 57, 43, .25);
    color: #e74c3c;
}

/* OCR-Status-Badges in Upload-/Import-Hinweisen */
.ocr-inline-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 4px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}

.ocr-inline-badge strong {
    font-weight: 700;
}

.ocr-inline-badge-success {
    color: #2ecc71;
    background: rgba(46, 204, 113, .12);
    border-color: rgba(46, 204, 113, .3);
}

.ocr-inline-badge-fallback {
    color: #f4d35e;
    background: rgba(244, 211, 94, .14);
    border-color: rgba(244, 211, 94, .35);
}

/* ═══════ LOGIN-BEREICH ═══════ */
/* Zentrierter Login-Bereich */
.login-section {
    display: flex;
    justify-content: center;
    padding: 72px 0;
}

/* --- Login-Karte — eigenständige Box für das Anmeldeformular --- */
.login-card {
    width: 100%;
    max-width: 380px;        /* Kompakte Kartengröße */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px 36px;
    box-shadow: var(--shadow);
}

/* Kopfbereich der Login-Karte */
.login-header {
    text-align: center;
    margin-bottom: 32px;
}

.login-header h2 {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 8px;
    letter-spacing: -.02em;
}

.login-header p {
    font-size: .84rem;
    color: var(--muted);
    line-height: 1.5;
}

/* --- Login-Formular --- */
.login-form .form-group {
    margin-bottom: 20px;
}

/* Formular-Beschriftungen in Versalien */
.login-form label {
    display: block;
    font-size: .78rem;
    color: var(--muted);
    margin-bottom: 7px;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 500;
}

/* Eingabefelder im Login-Formular */
.login-form input[type="text"],
.login-form input[type="password"] {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 11px 14px;
    border-radius: var(--radius);
    font-size: .9rem;
    font-family: var(--font);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.login-form input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(200,184,154,.1);
}

/* --- Anmelde-Button — volle Breite --- */
.login-btn {
    width: 100%;
    padding: 12px;
    margin-top: 8px;
    font-size: .9rem;
    font-weight: 600;
}

/* ═══════ DATENSICHERUNG (Backup & Restore) ═══════ */

/* --- Backup-Block: Container für Export- und Import-Bereich --- */
.backup-block {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* --- Header mit Icon und Beschreibungstext --- */
.backup-block-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--text);
    flex-wrap: wrap;
}

.backup-block-header svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--accent);
    opacity: .8;
}

.backup-block-header strong {
    display: block;
    font-size: .9rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 3px;
}

.backup-block-header p {
    font-size: .8rem;
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
}

/* --- Kompaktes Badge für den Gesamtstatus des Auto-Backups --- */
.backup-status-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
}

.backup-status-badge--success {
    background: rgba(39, 174, 96, .12);
    border-color: rgba(39, 174, 96, .26);
    color: #8ee0b0;
}

.backup-status-badge--warning {
    background: rgba(192, 57, 43, .12);
    border-color: rgba(192, 57, 43, .26);
    color: #f0a39a;
}

/* --- Trenner zwischen Export und Import --- */
.backup-divider {
    height: 1px;
    background: var(--border);
    margin: 18px 0;
}

/* --- Import-Formular --- */
.backup-import-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* --- Datei-Input: nativen Input verstecken, eigenes Label stylen --- */
.backup-file-input {
    flex: 1;
    min-width: 200px;
    position: relative;
}

.backup-file-input input[type="file"] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.backup-file-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: var(--bg);
    border: 1px dashed var(--border-h);
    border-radius: var(--radius);
    color: var(--muted);
    font-size: .82rem;
    font-family: var(--font);
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.backup-file-label:hover {
    border-color: var(--accent-dim);
    color: var(--text);
    background: var(--surface-2);
}

/* Wenn eine Datei ausgewählt wurde */
.backup-file-label.has-file {
    border-style: solid;
    border-color: var(--accent-dim);
    color: var(--accent);
}

.backup-file-label svg {
    flex-shrink: 0;
    opacity: .6;
}

.backup-file-label span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Import-Button: deaktiviert, bis eine Datei gewählt wurde --- */
#backup-submit-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
    transform: none;
}

/* --- Hinweisbox unter dem Import-Bereich --- */
.backup-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 10px 14px;
    background: rgba(192, 57, 43, .06);
    border: 1px solid rgba(192, 57, 43, .15);
    border-radius: var(--radius);
    font-size: .78rem;
    color: var(--muted);
    line-height: 1.5;
}

.backup-notice strong {
    color: var(--white);
    font-weight: 600;
}

/* --- Kompakte Variante für mehrere Status-Hinweise in einem Grid --- */
.backup-notice--compact {
    margin-top: 0;
}

/* --- Größerer oberer Abstand für den ersten, wichtigeren Statusblock --- */
.backup-notice--spaced {
    margin-top: 12px;
}

/* --- Zweispaltiges Raster für kurze Statuswerte im Backup-Bereich --- */
.backup-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

/* --- Neutraler Status: nur informative Metadaten ohne Warncharakter --- */
.backup-notice--neutral {
    background: rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.07);
}

.backup-notice--neutral svg {
    color: var(--muted);
}

/* --- Informationsstatus: verfügbarer, aber nicht kritischer Hinweis --- */
.backup-notice--info {
    background: rgba(52, 152, 219, .08);
    border-color: rgba(52, 152, 219, .18);
    color: var(--text);
}

.backup-notice--info svg {
    color: var(--info);
    opacity: .85;
}

/* --- Erfolgsstatus: Backup-Prüfung oder Schreibrechte sind in Ordnung --- */
.backup-notice--success {
    background: rgba(39, 174, 96, .08);
    border-color: rgba(39, 174, 96, .18);
    color: var(--text);
}

.backup-notice--success svg {
    color: var(--success);
    opacity: .85;
}

/* --- Warnstatus: noch kein Backup oder fehlender Schreibzugriff --- */
.backup-notice--warning {
    background: rgba(192, 57, 43, .08);
    border-color: rgba(192, 57, 43, .22);
    color: var(--text);
}

.backup-notice--warning svg {
    color: var(--danger);
    opacity: .85;
}

.backup-notice svg {
    flex-shrink: 0;
    color: var(--danger);
    opacity: .7;
}

/* --- Responsive: Backup-Import-Formular stapeln auf kleinen Bildschirmen --- */
@media (max-width: 600px) {
    .backup-block-header {
        flex-direction: column;
    }
    .backup-status-badge {
        margin-left: 0;
    }
    .backup-import-form {
        flex-direction: column;
        align-items: stretch;
    }
    .backup-status-grid {
        grid-template-columns: 1fr;
    }
    .backup-import-form .btn {
        width: 100%;
        text-align: center;
    }
}

/* ═══════ UNIT-TEST-ERGEBNISSE ═══════ */
/* Darstellung der PHPUnit-Testergebnisse im Admin-Panel.
   Enthält: Testsuite-Auswahl mit Checkboxen, Aktions-Buttons,
   Zusammenfassungsleiste, Statistik-Kacheln, Testsuite-Karten
   mit aufklappbaren Testfall-Listen und Fehlermeldungen. */

/* --- Testsuite-Auswahl (Checkbox-Bereich) --- */
/* Container für die Testsuite-Checkboxen */
.test-selector {
    margin: 15px 0;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

/* Ladehinweis während die Suites geladen werden */
.test-selector-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9em;
    padding: 8px 0;
}

/* Fehlermeldung bei Ladeproblemen */
.test-selector-error {
    color: #ff6b6b;
    font-size: 0.9em;
    padding: 8px 0;
}

/* Toggle-Zeile über den Checkboxen (Alle auswählen) */
.test-selector-controls {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Label für den "Alle auswählen"-Toggle */
.test-select-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9em;
    user-select: none;
}

.test-select-toggle:hover {
    color: rgba(255, 255, 255, 0.95);
}

/* Grid-Layout für die Testsuite-Checkboxen */
.test-selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}

/* Einzelne Checkbox-Karte für eine Testsuite */
.test-selector-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    user-select: none;
    font-size: 0.88em;
}

.test-selector-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Checkbox-Styling innerhalb der Karte */
.test-selector-item input[type="checkbox"] {
    accent-color: #4ade80;
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

/* Suite-Name neben der Checkbox */
.test-selector-name {
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Aktions-Buttons (Ausführen / Stopp) --- */
/* Horizontaler Button-Container */
.test-actions {
    display: flex;
    gap: 10px;
    margin: 15px 0;
    align-items: center;
}

/* Stopp-Button: Rote Variante des Standard-Buttons */
.btn-danger {
    background: rgba(255, 77, 77, 0.15) !important;
    color: #ff6b6b !important;
    border: 1px solid rgba(255, 77, 77, 0.3) !important;
}

.btn-danger:hover {
    background: rgba(255, 77, 77, 0.25) !important;
    border-color: rgba(255, 77, 77, 0.5) !important;
}

/* Abgebrochener Testlauf – neutrale Statusleiste */
.test-summary-bar.test-aborted {
    background: rgba(255, 255, 255, 0.05);
    border-left: 4px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.7);
}

/* --- Ergebnis-Container --- */
.test-results {
    margin-top: 20px;
}

/* --- Lade-Animation beim Testlauf --- */
.test-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    color: var(--muted);
    font-size: .88rem;
}

/* Spinner: rotierende Kreisanimation */
.test-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-h);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: testSpin .7s linear infinite;
}

@keyframes testSpin {
    to { transform: rotate(360deg); }
}

/* --- Zusammenfassungsleiste (oben) --- */
/* Zeigt den Gesamtstatus: bestanden/fehlgeschlagen, Zähler und Dauer */
.test-summary-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    transition: background var(--transition);
}

/* Gesamtergebnis: BESTANDEN */
.test-summary-bar.test-pass {
    background: rgba(39, 174, 96, .08);
    border: 1px solid rgba(39, 174, 96, .2);
}

/* Gesamtergebnis: FEHLGESCHLAGEN */
.test-summary-bar.test-fail {
    background: rgba(192, 57, 43, .08);
    border: 1px solid rgba(192, 57, 43, .2);
}

/* Großes Status-Icon (Häkchen oder Kreuz) */
.test-status-icon {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Grüner Kreis bei Erfolg */
.test-pass .test-status-icon {
    background: rgba(39, 174, 96, .15);
    color: var(--success);
}

/* Roter Kreis bei Fehler */
.test-fail .test-status-icon {
    background: rgba(192, 57, 43, .15);
    color: var(--danger);
}

/* Zusammenfassungstext neben dem Icon */
.test-summary-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.test-summary-text strong {
    font-size: .95rem;
    color: var(--white);
}

.test-summary-text span {
    font-size: .78rem;
    color: var(--muted);
}

/* Gesamtdauer rechts in der Zusammenfassungsleiste */
.test-time {
    font-size: .78rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* --- Statistik-Kacheln (bestanden, fehlgeschlagen, Fehler, übersprungen) --- */
.test-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

/* Einzelne Statistik-Kachel */
.test-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 8px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    transition: border-color var(--transition);
}

/* Große Zahl in der Kachel */
.test-stat-num {
    font-size: 1.4rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Beschriftung unter der Zahl */
.test-stat-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    font-weight: 500;
}

/* Farbcodierung pro Statistik-Kachel */
.test-stat-passed .test-stat-num { color: var(--success); }
.test-stat-passed { border-color: rgba(39, 174, 96, .2); }
.test-stat-failed .test-stat-num { color: var(--danger); }
.test-stat-failed { border-color: rgba(192, 57, 43, .2); }
.test-stat-errors .test-stat-num { color: #e67e22; }
.test-stat-errors { border-color: rgba(230, 126, 34, .2); }
.test-stat-skipped .test-stat-num { color: var(--muted); }

/* --- Testsuite-Karten (eine pro Testklasse) --- */
.test-suites {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Einzelne Testsuite-Karte */
.test-suite-card {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface);
    transition: border-color var(--transition);
}

/* Rahmenfarbe je nach Suite-Status */
.test-suite-card.test-suite-pass { border-color: rgba(39, 174, 96, .15); }
.test-suite-card.test-suite-fail { border-color: rgba(192, 57, 43, .25); }

/* Klickbarer Header der Testsuite-Karte */
.test-suite-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    transition: background var(--transition);
}

.test-suite-header:hover {
    background: var(--surface-2);
}

/* Status-Icon der Suite (✓ oder ✗) */
.test-suite-icon {
    font-size: .9rem;
    font-weight: 700;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.test-suite-pass .test-suite-icon {
    background: rgba(39, 174, 96, .12);
    color: var(--success);
}

.test-suite-fail .test-suite-icon {
    background: rgba(192, 57, 43, .12);
    color: var(--danger);
}

/* Klassenname der Suite */
.test-suite-name {
    flex: 1;
    font-size: .85rem;
    font-weight: 600;
    color: var(--white);
}

/* Zähler: bestanden/gesamt */
.test-suite-count {
    font-size: .75rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    background: var(--bg);
    padding: 2px 8px;
    border-radius: 10px;
}

/* Dauer der Suite */
.test-suite-time {
    font-size: .72rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* --- Einzelne Testfälle innerhalb einer Suite --- */
.test-case-list {
    border-top: 1px solid var(--border);
}

/* Einzelner Testfall (eine Zeile) */
.test-case {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px 9px 20px;
    font-size: .82rem;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
    /* Tooltip-Cursor anzeigen wenn Beschreibung vorhanden */
    cursor: default;
    position: relative;
}

.test-case[title] {
    cursor: help;
}

.test-case:last-child {
    border-bottom: none;
}

.test-case:hover {
    background: rgba(255, 255, 255, .02);
}

/* Status-Icon pro Testfall */
.test-case-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: .7rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Farbcodierung der Testfall-Icons */
.test-case-passed .test-case-icon {
    background: rgba(39, 174, 96, .12);
    color: var(--success);
}

.test-case-failed .test-case-icon {
    background: rgba(192, 57, 43, .12);
    color: var(--danger);
}

.test-case-error .test-case-icon {
    background: rgba(230, 126, 34, .12);
    color: #e67e22;
}

.test-case-skipped .test-case-icon {
    background: rgba(82, 82, 82, .15);
    color: var(--muted);
}

/* Testname (z.B. "Users Table Exists") */
.test-case-name {
    flex: 1;
    color: var(--text);
}

/* Dauer pro Testfall */
.test-case-time {
    font-size: .7rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Fehlermeldung eines fehlgeschlagenen Tests */
.test-case-message {
    margin: 0;
    padding: 10px 16px 10px 48px;
    background: rgba(192, 57, 43, .04);
    border-bottom: 1px solid var(--border);
    font-size: .72rem;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    color: var(--danger);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
    max-height: 200px;
    overflow-y: auto;
}

/* Rohe PHPUnit-Ausgabe für Serverdiagnose */
.test-raw-output {
    margin-top: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.test-raw-output-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--surface);
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-secondary);
    user-select: none;
}
.test-raw-output-header:hover {
    background: var(--surface-hover, rgba(0,0,0,.04));
}
.test-raw-output-pre {
    margin: 0;
    padding: 14px 16px;
    font-size: .72rem;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.6;
    background: #1e1e1e;
    color: #d4d4d4;
    max-height: 400px;
    overflow-y: auto;
}

/* Lade-Button: animierter Rahmen während der Ausführung */
.btn.is-loading {
    position: relative;
    pointer-events: none;
    opacity: .7;
}

/* --- Responsive: Statistik-Kacheln stapeln auf kleinen Bildschirmen --- */
@media (max-width: 600px) {
    .test-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .test-summary-bar {
        flex-wrap: wrap;
    }

    .test-time {
        width: 100%;
        text-align: right;
    }

    /* Testsuite-Auswahl: Einspaltiges Layout auf Mobilgeräten */
    .test-selector-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════ ZIP-IMPORT-BEREICH ═══════ */
/* Container für ZIP-Import-Funktionalität mit Drag-Drop-Upload */

/* --- Import-Block: Hauptcontainer --- */
.import-block {
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    transition: border-color var(--transition);
}

.import-block:hover {
    border-color: var(--border-h);
}

/* --- Import-Block-Header: Überschrift und Icon --- */
.import-block-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

.import-block-header svg {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--accent);
    opacity: .85;
    margin-top: 1px;
}

.import-block-header h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--white);
    letter-spacing: -.01em;
}

.import-block-header p {
    margin: 6px 0 0 0;
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.5;
}

/* --- Info-Block: Erklärung des Upload-Prozesses --- */
.import-info-block {
    padding: 18px;
    background: rgba(200,184,154,.06);
    border: 1px solid rgba(200,184,154,.1);
    border-radius: var(--radius);
    margin-bottom: 16px;
}

.import-info-block strong {
    display: block;
    font-size: .8rem;
    color: var(--accent);
    margin-bottom: 10px;
    letter-spacing: .02em;
    text-transform: uppercase;
    font-weight: 600;
}

.import-info-block ol {
    margin: 0;
    padding-left: 20px;
}

.import-info-block li {
    font-size: .82rem;
    color: var(--text);
    margin-bottom: 6px;
    line-height: 1.5;
}

.import-info-block li:last-child {
    margin-bottom: 0;
}

/* --- Drag-Drop-Upload-Zone --- */
.import-upload-zone {
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    padding: 40px 28px;
    background: var(--bg);
    border: 2px dashed var(--border-h);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition);
    user-select: none;
}

.import-upload-zone:hover {
    border-color: var(--accent-dim);
    background: rgba(200,184,154,.03);
}

/* Drag-Over-Zustand: visuelles Feedback beim Ziehen von Dateien --- */
.import-upload-zone.drag-over {
    border-color: var(--accent);
    background: rgba(200,184,154,.08);
    box-shadow: 0 0 0 8px rgba(200,184,154,.04);
}

/* --- Upload-Icon (SVG) --- */
.import-upload-icon {
    width: 40px;
    height: 40px;
    color: var(--accent);
    opacity: .7;
    transition: opacity var(--transition), transform var(--transition);
}

.import-upload-zone:hover .import-upload-icon {
    opacity: .9;
    transform: scale(1.08);
}

.import-upload-zone.drag-over .import-upload-icon {
    opacity: 1;
    transform: scale(1.15);
}

/* --- Upload-Text: Instruktionen für Benutzer --- */
.import-upload-text {
    text-align: center;
}

.import-upload-text strong {
    display: block;
    font-size: .88rem;
    color: var(--white);
    margin-bottom: 4px;
    font-weight: 600;
}

.import-upload-text span {
    display: block;
    font-size: .8rem;
    color: var(--muted);
    line-height: 1.4;
}

/* --- Verstecktes Datei-Input-Element --- */
.import-upload-zone input[type="file"] {
    display: none;
}

/* --- Metadaten-Analyse-Optionen --- */
.import-metadata-options {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px;
    background: rgba(255,255,255,.02);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.import-metadata-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.import-metadata-check input[type="checkbox"] {
    accent-color: var(--accent);
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.import-metadata-check label {
    font-size: .85rem;
    color: var(--text);
    cursor: pointer;
    font-weight: 500;
}

.import-metadata-check input[type="checkbox"]:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.import-metadata-check input[type="checkbox"]:disabled + label {
    opacity: .5;
    cursor: not-allowed;
}

/* --- Fortschrittsleiste: sichtbar während des Uploads --- */
.import-progress {
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.import-progress.active {
    display: flex;
}

.import-progress-bar {
    width: 100%;
    height: 4px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.import-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-dim) 100%);
    border-radius: 3px;
    width: 0%;
    transition: width .2s ease;
}

.import-progress-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .8rem;
    color: var(--muted);
}

.import-progress-text strong {
    color: var(--text);
    font-weight: 600;
}

/* --- Ergebnis-Anzeige: Erfolg oder Fehler --- */
.import-result {
    display: none;
    padding: 18px 16px;
    border-radius: var(--radius-lg);
    border: 1px solid;
    animation: fadeUp .3s ease-out;
}

.import-result.active {
    display: block;
}

/* Erfolgreicher Import --- */
.import-result-success {
    background: rgba(39,174,96,.08);
    border-color: rgba(39,174,96,.2);
    color: var(--text);
}

.import-result-success-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.import-result-success-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--success);
    margin-top: 2px;
}

.import-result-success-info {
    flex: 1;
}

.import-result-success-info strong {
    display: block;
    font-size: .9rem;
    color: var(--white);
    margin-bottom: 12px;
    font-weight: 600;
}

.import-result-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.import-result-stat {
    padding: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
}

.import-result-stat-value {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 3px;
}

.import-result-stat-label {
    display: block;
    font-size: .75rem;
    color: var(--muted);
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* Fehlerbereich: aufklappbar für Details --- */
.import-result-errors {
    margin-top: 12px;
}

.import-result-errors-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    background: none;
    border: none;
    color: var(--muted);
    font-size: .8rem;
    cursor: pointer;
    font-family: var(--font);
    transition: color var(--transition);
}

.import-result-errors-toggle:hover {
    color: var(--text);
}

.import-result-errors-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform var(--transition);
}

.import-result-errors-toggle.expanded svg {
    transform: rotate(90deg);
}

.import-result-errors-list {
    display: none;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(200,184,154,.1);
    max-height: 200px;
    overflow-y: auto;
}

.import-result-errors-list.expanded {
    display: block;
}

.import-result-error-item {
    font-size: .78rem;
    color: var(--muted);
    margin-bottom: 6px;
    padding-left: 4px;
    border-left: 2px solid rgba(200,184,154,.2);
    padding-left: 8px;
}

.import-result-error-item:last-child {
    margin-bottom: 0;
}

/* Fehler beim Import --- */
.import-result-error {
    background: rgba(192,57,43,.08);
    border-color: rgba(192,57,43,.2);
    color: var(--text);
}

.import-result-error-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.import-result-error-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--danger);
    margin-top: 2px;
}

.import-result-error-info {
    flex: 1;
}

.import-result-error-info strong {
    display: block;
    font-size: .9rem;
    color: var(--white);
    margin-bottom: 6px;
    font-weight: 600;
}

.import-result-error-info p {
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
}

/* --- Responsive: Stack auf Mobilgeräten --- */
@media (max-width: 600px) {
    .import-block {
        padding: 20px;
        gap: 16px;
    }

    .import-upload-zone {
        min-height: 160px;
        padding: 32px 20px;
    }

    .import-upload-icon {
        width: 36px;
        height: 36px;
    }

    .import-upload-text strong {
        font-size: .85rem;
    }

    .import-upload-text span {
        font-size: .78rem;
    }

    .import-metadata-options {
        flex-direction: column;
        gap: 12px;
    }

    .import-result-stats {
        grid-template-columns: 1fr;
    }

    .import-info-block {
        padding: 14px 12px;
    }

    .import-info-block ol {
        padding-left: 18px;
    }

    .import-info-block li {
        font-size: .8rem;
    }
}

/* ═══════ IMPORT-FORTSCHRITT (KOMPATIBEL ZUM PARTIAL) ═══════ */
.import-progress .progress-bar {
    width: 100%;
    height: 4px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.import-progress .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-dim) 100%);
    border-radius: 3px;
    width: 0;
    transition: width .2s ease;
}

.import-progress .progress-text {
    font-size: .8rem;
    color: var(--muted);
}

/* ═══════ DRAG & DROP FÜR ALBUM-ZUORDNUNG ═══════ */
.image-card-draggable {
    cursor: grab;
}

.image-card-draggable.is-dragging {
    opacity: .5;
    transform: scale(.98);
}

.album-drop-target {
    position: relative;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.album-drop-target::after {
    content: 'Bild hier ablegen';
    position: absolute;
    right: 12px;
    top: 10px;
    font-size: .68rem;
    color: var(--muted);
    opacity: 0;
    transition: opacity var(--transition);
    pointer-events: none;
}

.album-drop-target.is-drag-over {
    border-color: var(--accent);
    background: rgba(200,184,154,.08);
    box-shadow: 0 0 0 3px rgba(200,184,154,.12);
}

.album-drop-target.is-drag-over::after {
    opacity: 1;
}

/* Kurzzeitige Hervorhebung von neu importierten Album-Kacheln */
.album-card-import-highlight {
    animation: albumImportPulse 3.2s cubic-bezier(.22,.61,.36,1);
    border-color: var(--accent) !important;
    background: linear-gradient(180deg, rgba(200,184,154,.14) 0%, rgba(200,184,154,.06) 100%);
    box-shadow:
        0 0 0 3px rgba(200,184,154,.45),
        0 0 0 10px rgba(200,184,154,.12),
        0 14px 34px rgba(0,0,0,.3);
}

@keyframes albumImportPulse {
    0% {
        transform: translateY(0);
        box-shadow:
            0 0 0 0 rgba(200,184,154,.75),
            0 0 0 0 rgba(200,184,154,.22),
            0 10px 26px rgba(0,0,0,.22);
    }
    6% {
        transform: translateY(0) scale(1.008);
        filter: brightness(1.24) saturate(1.18);
        box-shadow:
            0 0 0 4px rgba(255,236,186,.95),
            0 0 0 14px rgba(255,224,141,.28),
            0 18px 40px rgba(0,0,0,.34);
    }
    12% {
        transform: translateY(0) scale(1);
        filter: brightness(1) saturate(1);
        box-shadow:
            0 0 0 0 rgba(200,184,154,.75),
            0 0 0 0 rgba(200,184,154,.22),
            0 10px 26px rgba(0,0,0,.22);
    }
    20% {
        transform: translateY(-2px) scale(1.005);
        box-shadow:
            0 0 0 10px rgba(200,184,154,.12),
            0 0 0 20px rgba(200,184,154,.03),
            0 18px 38px rgba(0,0,0,.34);
    }
    55% {
        transform: translateY(0) scale(1);
        box-shadow:
            0 0 0 6px rgba(200,184,154,.08),
            0 0 0 14px rgba(200,184,154,.02),
            0 14px 32px rgba(0,0,0,.28);
    }
    100% {
        transform: translateY(0);
        box-shadow:
            0 0 0 0 rgba(200,184,154,0),
            0 0 0 0 rgba(200,184,154,0),
            0 6px 24px rgba(0,0,0,.2);
    }
}

.album-drop-target-none {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px dashed var(--border-h);
    border-radius: var(--radius);
    background: rgba(255,255,255,.02);
    margin-bottom: 12px;
}

.album-drop-target-none strong {
    font-size: .84rem;
    color: var(--white);
}

.album-drop-target-none span {
    font-size: .76rem;
    color: var(--muted);
}

/* ═══════ METADATEN-MODAL ═══════ */
.metadata-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
}

.metadata-modal.is-open {
    display: block;
}

.metadata-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(4px);
}

.metadata-modal-dialog {
    position: relative;
    max-width: 760px;
    width: calc(100% - 32px);
    max-height: calc(100vh - 56px);
    margin: 28px auto;
    background: var(--surface);
    border: 1px solid var(--border-h);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 22px 20px;
    overflow: auto;
    animation: fadeUp .2s ease-out;
}

.metadata-modal-dialog h3 {
    margin: 0 36px 14px 0;
    color: var(--white);
    font-size: 1.05rem;
}

.metadata-modal-close {
    position: absolute;
    right: 12px;
    top: 10px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
}

.metadata-modal-close:hover {
    border-color: var(--accent-dim);
    color: var(--white);
}

.metadata-modal-content {
    display: grid;
    gap: 12px;
}

.metadata-section {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    background: var(--bg);
}

.metadata-section h4 {
    margin: 0 0 10px 0;
    font-size: .82rem;
    color: var(--accent);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.metadata-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 8px;
    padding: 4px 0;
}

.metadata-key {
    color: var(--muted);
    font-size: .8rem;
}

.metadata-value {
    color: var(--text);
    font-size: .82rem;
    word-break: break-word;
}

.metadata-suggestion {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 6px 0;
    border-top: 1px solid rgba(255,255,255,.06);
}

.metadata-suggestion:first-of-type {
    border-top: none;
}

.metadata-suggestion strong {
    color: var(--white);
    font-size: .84rem;
}

.metadata-suggestion span {
    color: var(--muted);
    font-size: .75rem;
}

.metadata-modal-loading,
.metadata-modal-error {
    color: var(--muted);
    font-size: .85rem;
}

/* ═══════ AJAX-HINWEISBLASE ═══════ */
.admin-ui-notice {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1400;
    padding: 10px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: .8rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
}

.admin-ui-notice.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.admin-ui-notice-success {
    border-color: rgba(39,174,96,.32);
    color: #98e2b9;
}

.admin-ui-notice-error {
    border-color: rgba(192,57,43,.35);
    color: #f2b3ab;
}

@media (max-width: 600px) {
    .metadata-modal-dialog {
        width: calc(100% - 16px);
        margin: 8px auto;
        max-height: calc(100vh - 16px);
        padding: 14px 12px;
    }

    .metadata-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .metadata-key {
        font-size: .74rem;
    }

    .metadata-value {
        font-size: .8rem;
    }
}