@charset "UTF-8";

/* Bildergalerie Admin CSS - Produktionsreif
 * Datum: 2025-09-13
 * Encoding: UTF-8
 */

:root {
  /* Grundfarben */
  --bg-color: #f8f9fa;
  --text-color: #111;
  --text-muted: #6c757d;
  --card-bg: #ffffff;
  --border-color: #dee2e6;
  --accent-color: #111;
  --accent-color-rgb: 17, 17, 17;
  
  /* Status-Farben */
  --success-color: #27AE60;
  --delete-color: #C0392B;
  --warning-color: #ffc107;
  
  /* Effekte */
  --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  
  /* Button-Hover-Farben */
  --button-hover-green: #27AE60;
  --button-hover-invert: #fff;
  
  /* Pagination */
  --pagination-active-bg: #111;
  --pagination-active-color: #fff;
  --pagination-inactive-bg: #fff;
  --pagination-inactive-color: #111;
  --pagination-inactive-border: #111;
  --pagination-hover-bg: #f0f0f0;
  --pagination-nav-color: #111;
  --pagination-nav-hover: #888;
  
  /* Primärfarben */
  --primary-green: #27AE60;
  --primary-green-rgb: 39, 174, 96;
  --primary-green-dark: #229954;
  --primary-green-light: #2ECC71;
  
  /* Button-Grundstile */
  --btn-bg: #fff;
  --btn-color: #181818;
  --btn-border: #181818;
  --btn-hover-bg: #181818;
  --btn-hover-color: #fff;
  --btn-hover-border: #181818;
  --btn-shadow: 0 2px 8px rgba(0, 0, 0, 0.13);
  --btn-shadow-normal: 0 1px 3px rgba(0, 0, 0, 0.08);
  --btn-border-radius: 0.7em;
  --btn-padding: 0.6em 1.5em;
  --btn-font-size: 1.08em;
  --btn-min-width: 120px;
  --btn-border-width: 2px;
  --btn-transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s;
  
  /* Button-Varianten */
  --btn-primary-bg: #181818;
  --btn-primary-color: #fff;
  --btn-primary-border: #181818;
  --btn-primary-hover-bg: #111;
  --btn-primary-hover-color: #fff;
  --btn-primary-hover-border: #111;
  
  --btn-success-bg: #27AE60;
  --btn-success-color: #fff;
  --btn-success-border: #27AE60;
  --btn-success-hover-bg: #229954;
  --btn-success-hover-color: #fff;
  --btn-success-hover-border: #229954;
  
  --btn-danger-bg: #C0392B;
  --btn-danger-color: #fff;
  --btn-danger-border: #C0392B;
  --btn-danger-hover-bg: #a93226;
  --btn-danger-hover-color: #fff;
  --btn-danger-hover-border: #a93226;
  
  --btn-secondary-bg: #e0e0e0;
  --btn-secondary-color: #181818;
  --btn-secondary-border: #bdbdbd;
  --btn-secondary-hover-bg: #bdbdbd;
  --btn-secondary-hover-color: #181818;
  --btn-secondary-hover-border: #888;
  
  --btn-light-bg: #fff;
  --btn-light-color: #181818;
  --btn-light-border: #e0e0e0;
  --btn-light-hover-bg: #f5f5f5;
  --btn-light-hover-color: #181818;
  --btn-light-hover-border: #bdbdbd;
  
  --btn-dark-bg: #23272b;
  --btn-dark-color: #fff;
  --btn-dark-border: #23272b;
  --btn-dark-hover-bg: #181818;
  --btn-dark-hover-color: #fff;
  --btn-dark-hover-border: #181818;
}

[data-theme="dark"] {
  /* Grundfarben */
  --bg-color: #212529;
  --text-color: #fff;
  --text-muted: #adb5bd;
  --card-bg: #2c3034;
  --border-color: #495057;
  --accent-color: #fff;
  --accent-color-rgb: 255, 255, 255;
  
  /* Status-Farben */
  --success-color: #27AE60;
  --delete-color: #C0392B;
  
  /* Effekte */
  --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
  
  /* Button-Hover-Farben */
  --button-hover-green: #27AE60;
  --button-hover-invert: #111;
  
  /* Pagination */
  --pagination-active-bg: #fff;
  --pagination-active-color: #111;
  --pagination-inactive-bg: #111;
  --pagination-inactive-color: #fff;
  --pagination-inactive-border: #fff;
  --pagination-hover-bg: #444;
  --pagination-nav-color: #fff;
  --pagination-nav-hover: #ccc;
  
  /* Button-Grundstile */
  --btn-bg: #23272b;
  --btn-color: #fff;
  --btn-border: #fff;
  --btn-hover-bg: #fff;
  --btn-hover-color: #181818;
  --btn-hover-border: #fff;
  --btn-shadow: 0 2px 8px rgba(255, 255, 255, 0.13);
  --btn-shadow-normal: 0 1px 3px rgba(255, 255, 255, 0.08);
  
  /* Button-Varianten */
  --btn-primary-bg: #fff;
  --btn-primary-color: #181818;
  --btn-primary-border: #fff;
  --btn-primary-hover-bg: #e0e0e0;
  --btn-primary-hover-color: #181818;
  --btn-primary-hover-border: #e0e0e0;
  
  --btn-secondary-bg: #444;
  --btn-secondary-color: #fff;
  --btn-secondary-border: #888;
  --btn-secondary-hover-bg: #666;
  --btn-secondary-hover-color: #fff;
  --btn-secondary-hover-border: #aaa;
  
  --btn-light-bg: #23272b;
  --btn-light-color: #fff;
  --btn-light-border: #444;
  --btn-light-hover-bg: #181818;
  --btn-light-hover-color: #fff;
  --btn-light-hover-border: #181818;
  
  --btn-dark-bg: #181818;
  --btn-dark-color: #fff;
  --btn-dark-border: #181818;
  --btn-dark-hover-bg: #000;
  --btn-dark-hover-color: #fff;
  --btn-dark-hover-border: #000;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: var(--btn-min-width);
  max-width: 100%;
  padding: var(--btn-padding);
  margin: 0 0.3em;
  font-size: var(--btn-font-size);
  font-weight: 500;
  line-height: 1.2;
  background: var(--btn-bg);
  color: var(--btn-color);
  will-change: background-color, color;
  border: var(--btn-border-width) solid var(--btn-border);
  border-radius: var(--btn-border-radius);
  box-shadow: var(--btn-shadow-normal);
  outline: none;
  cursor: pointer;
  transition: var(--btn-transition);
  box-sizing: border-box;
  position: relative;
}
.btn:hover, .btn:focus {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-color);
  border-color: var(--btn-hover-border);
  box-shadow: var(--btn-shadow);
  outline: none;
}
.btn-primary {
  background: var(--accent-color);
  color: #fff;
  border-color: var(--accent-color);
  box-shadow: var(--btn-shadow-normal);
}

.btn-primary:hover, .btn-primary:focus {
  background: var(--primary-green);
  color: #fff;
  border-color: var(--primary-green);
  box-shadow: var(--btn-shadow);
}

.btn-success {
  background: var(--success-color);
  color: #fff;
  border-color: var(--success-color);
  box-shadow: var(--btn-shadow-normal);
}

.btn-success:hover, .btn-success:focus {
  background: var(--primary-green-dark);
  color: #fff;
  border-color: var(--primary-green-dark);
  box-shadow: var(--btn-shadow);
}

.btn-danger, #bulkDeleteHead {
  background: var(--delete-color);
  color: #fff;
  border-color: var(--delete-color);
  box-shadow: var(--btn-shadow-normal);
}

.btn-danger:hover, .btn-danger:focus, #bulkDeleteHead:hover, #bulkDeleteHead:focus {
  background: #a93226;
  color: #fff;
  border-color: #a93226;
  box-shadow: var(--btn-shadow);
}
/* =====================================================
   DISABLED BUTTONS (no-files, disabled states)
   ===================================================== */
.btn.no-files, .btn:disabled {
  background: #6c757d;
  color: #fff;
  border-color: #6c757d;
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed;
  box-shadow: none;
}

.btn.no-files:hover, .btn.no-files:focus, .btn:disabled:hover, .btn:disabled:focus {
  background: #6c757d;
  color: #fff;
  border-color: #6c757d;
  opacity: 0.6;
  box-shadow: none;
}
/* =====================================================
   THEME TOGGLE BUTTON
   ===================================================== */
.theme-btn {
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  color: var(--text-color);
  border: none;
  font-size: 1.1rem;
  border-radius: 50%;
  box-shadow: none;
  transition: all 0.2s ease;
  position: relative;
}

.theme-btn:hover, .theme-btn:focus {
  background: transparent;
  color: var(--text-color);
  box-shadow: none;
}

	/* Theme-Button Hover-Effekt: Schatten direkt um das SVG-Icon */
	.theme-btn:hover .theme-icon svg {
		/* Heller Schatten im dunklen Theme */
		filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
		cursor: pointer;
	}

	/* Dunkler Schatten im hellen Theme */
	[data-theme="light"] .theme-btn:hover .theme-icon svg {
		filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.5));
		cursor: pointer;
	}
/* =====================================================
   TRANSPARENT ACTION BUTTONS (logout, clear-selection)
   ===================================================== */
.logout-btn, .clear-selection-btn {
  background: transparent;
  color: var(--text-color);
  border: none;
  padding: 0.5rem;
  min-width: auto;
  font-size: 1rem;
  box-shadow: none;
  transition: color 0.18s ease;
}

.logout-btn:hover, .logout-btn:focus, .clear-selection-btn:hover, .clear-selection-btn:focus {
  background: transparent;
  color: var(--delete-color);
  border: none;
  box-shadow: none;
}
@keyframes pulse-green {
  0%   { box-shadow: 0 0 0 rgba(39,174,96,0.7); }
  50%  { box-shadow: 0 0 6px rgba(39,174,96,0); }
  100% { box-shadow: 0 0 0 rgba(39,174,96,0.7); }
}
/* =====================================================
   GRID VIEW TOGGLE BUTTON
   ===================================================== */
.grid-btn {
  background: var(--btn-bg);
  color: var(--btn-color);
  border: 1px solid var(--border-color);
  padding: 0.5rem;
  min-width: auto;
  border-radius: 0.375rem;
  box-shadow: var(--btn-shadow-normal);
  transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s;
}

.grid-btn:hover, .grid-btn:focus {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-color);
  border-color: var(--btn-hover-border);
  box-shadow: var(--btn-shadow);
}

.grid-btn.active {
  background: var(--primary-green);
  color: #fff;
  border-color: var(--primary-green);
}

.grid-btn.active:hover, .grid-btn.active:focus {
  background: var(--primary-green-dark);
  color: #fff;
  border-color: var(--primary-green-dark);
  box-shadow: var(--btn-shadow);
}
/* =====================================================
   SCROLL TO TOP BUTTON
   ===================================================== */
#scrollTopBtn {
  position: fixed;
  bottom: 0.6rem;
  right: 0.8rem;
  width: 50px;
  height: 50px;
  background: var(--btn-bg);
  color: var(--btn-color);
  border: 2px solid var(--btn-border);
  border-radius: 50%;
  font-size: 1.2rem;
  z-index: 1000;
  min-width: auto;
  padding: 0;
  box-shadow: var(--btn-shadow-normal);
  transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s;
}

#scrollTopBtn:hover, #scrollTopBtn:focus {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-color);
  border-color: var(--btn-hover-border);
  box-shadow: var(--btn-shadow);
}

@media (max-width: 600px) {
  #scrollTopBtn {
    bottom: 1rem;
    right: 1rem;
    width: 45px;
    height: 45px;
    font-size: 1rem;
  }
}

/* =====================================================
   SPEICHERN-ICON-BUTTON (meta-save-btn) – zentral & wartbar
   ===================================================== */

/* Container rechtsbündig in der Bildbox */
.meta-edit-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 0.2em;
  gap: 0.5em;
}

/* Basiszustand: grau, Icon rechts, kein Schatten, kein Ruckeln */
.meta-save-btn {
  background: #e0e0e0;
  color: #757575;
  border: none;
  border-radius: 0.5em;
  padding: 0.4em 0.8em;
  font-size: 1em;
  margin-left: auto;
  transition: background 0.18s, color 0.18s;
  box-shadow: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.meta-save-btn i, .meta-save-btn svg {
  color: #757575;
  fill: #757575;
  transition: color 0.18s, fill 0.18s;
}

/* Dark Theme: angepasste Grautöne */
[data-theme="dark"] .meta-save-btn {
  background: #444;
  color: #bbb;
}

[data-theme="dark"] .meta-save-btn i,
[data-theme="dark"] .meta-save-btn svg {
  color: #bbb;
  fill: #bbb;
}

/* Aktiv: Meta-Feld bearbeitet (auch wenn leer/Platzhalter) */
.meta-save-btn.has-changes,
.meta-save-btn.has-changes:hover,
.meta-save-btn.has-changes:focus {
  background: #27AE60;
  color: #fff;
}

.meta-save-btn.has-changes i,
.meta-save-btn.has-changes:hover i,
.meta-save-btn.has-changes:focus i,
.meta-save-btn.has-changes svg,
.meta-save-btn.has-changes:hover svg,
.meta-save-btn.has-changes:focus svg {
  color: #fff;
  fill: #fff;
}

/* Dark Theme: Aktiv */
[data-theme="dark"] .meta-save-btn.has-changes,
[data-theme="dark"] .meta-save-btn.has-changes:hover,
[data-theme="dark"] .meta-save-btn.has-changes:focus {
  background: #27AE60;
  color: #fff;
}

[data-theme="dark"] .meta-save-btn.has-changes i,
[data-theme="dark"] .meta-save-btn.has-changes:hover i,
[data-theme="dark"] .meta-save-btn.has-changes:focus i,
[data-theme="dark"] .meta-save-btn.has-changes svg,
[data-theme="dark"] .meta-save-btn.has-changes:hover svg,
[data-theme="dark"] .meta-save-btn.has-changes:focus svg {
  color: #fff;
  fill: #fff;
}

/* Kein Schatten, keine Bewegung, kein Ruckeln */
.meta-save-btn,
.meta-save-btn:hover,
.meta-save-btn:focus,
.meta-save-btn.has-changes,
.meta-save-btn.has-changes:hover,
.meta-save-btn.has-changes:focus {
  box-shadow: none;
  outline: none;
}

/* =====================================================
   ENDE SPEICHERN-ICON-BUTTON
   ===================================================== */

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  margin: 0;
  padding-top: 114px; /* 57px + 57px für beide Header */
  line-height: 1.6;
  transition: var(--transition);
}

.custom-dialog, .custom-alert {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  backdrop-filter: blur(2px);
  animation: fadeIn 0.3s ease-out;
}

.dialog-content, .alert-content {
  background: #fff;
  color: #000;
  padding: 2rem 2.5rem;
  margin: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  max-width: 90%;
  width: 450px;
  text-align: center;
}

/* Mobile-spezifische Dialogbox-Optimierungen */
@media (max-width: 768px) {
  .dialog-content, .alert-content {
    padding: 1.5rem 2rem;
    margin: 1rem;
    max-width: 95%;
    width: auto;
    min-width: 280px;
    border-radius: 0.8rem;
  }
}

@media (max-width: 480px) {
  .dialog-content, .alert-content {
    padding: 1.2rem 1.5rem;
    margin: 0.8rem;
    max-width: 98%;
    min-width: 260px;
    border-radius: 0.6rem;
  }
}

.dialog-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.5rem;
}

/* Mobile-spezifische Button-Abstände */
@media (max-width: 768px) {
  .dialog-buttons {
    gap: 0.6rem;
    margin-top: 1.2rem;
  }
  
  /* Touch-freundliche Buttons für Mobile */
  .dialog-buttons .btn, .modal-btn {
    min-width: 100px;
    padding: 0.7em 1.2em;
    font-size: 1rem;
    border-radius: 0.6rem;
  }
}

@media (max-width: 480px) {
  .dialog-buttons {
    gap: 0.5rem;
    margin-top: 1rem;
  }
  
  /* Noch größere Buttons für kleine Bildschirme */
  .dialog-buttons .btn, .modal-btn {
    min-width: 90px;
    padding: 0.8em 1em;
    font-size: 0.95rem;
    border-radius: 0.5rem;
  }
}




.dialog-content p, .alert-content p {
  margin: 0 0 1rem 0;
  line-height: 1.6;
  color: #374151;
  font-size: 0.95rem;
  text-align: center;
}

/* Mobile-spezifische Text-Abstände */
@media (max-width: 768px) {
  .dialog-content p, .alert-content p {
    margin: 0 0 0.8rem 0;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .dialog-content p, .alert-content p {
    margin: 0 0 0.6rem 0;
    font-size: 0.85rem;
  }
}

.dialog-content p:last-child, .alert-content p:last-child {
  margin-bottom: 0;
}

.dialog-content p:first-child:not(:only-child), .alert-content p:first-child:not(:only-child) {
  text-align: left;
}

.alert-content p {
  text-align: center;
}

.custom-dialog .dialog-content > div {
  text-align: center;
}

.dialog-content h3, .alert-content h3 {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.4;
  text-align: center;
}

/* Mobile-spezifische Überschriften-Abstände */
@media (max-width: 768px) {
  .dialog-content h3, .alert-content h3 {
    margin: 0 0 0.8rem 0;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .dialog-content h3, .alert-content h3 {
    margin: 0 0 0.6rem 0;
    font-size: 0.95rem;
  }
}

/* =====================================================
   LOGIN-DIALOGBOX MOBILE-OPTIMIERUNGEN
   ===================================================== */

/* Login-Container Mobile-Optimierungen */
@media (max-width: 768px) {
  .login-container {
    padding: 2rem 1.5rem 1.5rem 1.5rem;
    margin-top: 5vh;
    max-width: 320px;
    border-radius: 0.8rem;
  }
  
  .login-container h2 {
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
  }
  
  .login-form {
    gap: 1rem;
  }
  
  .login-form input[type="password"] {
    padding: 0.8rem 2.5rem 0.8rem 1rem;
    font-size: 1rem;
    border-radius: 0.6rem;
  }
  
  .login-form button[type="submit"] {
    min-width: 100px;
    padding: 0.8rem 1.8rem;
    font-size: 1rem;
    border-radius: 0.6rem;
  }
  
  .error {
    padding: 0.6rem 0.8rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    border-radius: 0.5rem;
  }
}

@media (max-width: 480px) {
  .login-container {
    padding: 1.5rem 1rem 1.2rem 1rem;
    margin-top: 3vh;
    max-width: 300px;
    border-radius: 0.6rem;
  }
  
  .login-container h2 {
    margin-bottom: 1.2rem;
    font-size: 1.2rem;
  }
  
  .login-form {
    gap: 0.8rem;
  }
  
  .login-form input[type="password"] {
    padding: 0.7rem 2.2rem 0.7rem 0.8rem;
    font-size: 0.95rem;
    border-radius: 0.5rem;
  }
  
  .login-form button[type="submit"] {
    min-width: 90px;
    padding: 0.7rem 1.5rem;
    font-size: 0.95rem;
    border-radius: 0.5rem;
  }
  
  .error {
    padding: 0.5rem 0.7rem;
    margin-bottom: 0.8rem;
    font-size: 0.85rem;
    border-radius: 0.4rem;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Neue Header-Leiste oberhalb der bestehenden */
.main-header {
  width: 100%;
  background: var(--card-bg);
  box-shadow: var(--shadow);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  height: 57px; /* Desktop - ursprüngliche Höhe der alten Leiste */
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: transform;
  contain: layout;
}

.main-header-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}




.project-name {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-style: italic;
}

.main-header-right {
  display: flex;
  align-items: center;
}

.main-logout-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-color);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
  margin-right: 10px;
}

.main-logout-btn:hover {
  color: var(--delete-color);
  text-decoration: underline;
}

.main-logout-btn i {
  font-size: 1rem;
  text-decoration: none;
}

.main-logout-btn:hover i {
  text-decoration: none;
}

.main-logout-text {
  font-size: 0.85rem;
  font-weight: 500;
}

/* Scroll-Verhalten: Header ausblenden */
.main-header.header-hidden {
  transform: translateY(-100%);
}

/* Grid-Only-Mode: Neue Header-Leiste ausblenden */
body.grid-only-mode .main-header {
  display: none;
}

/* Grid-Only-Mode: Admin-Header an oberste Position setzen */
body.grid-only-mode .admin-header {
  top: 0;
}

/* Grid-Only-Mode: Body-Padding anpassen */
body.grid-only-mode {
  padding-top: 57px; /* Nur die Höhe des admin-header */
}

/* Anpassung der bestehenden Header-Position */
.admin-header {
  width: 100%;
  background: var(--card-bg);
  box-shadow: var(--shadow);
  position: fixed;
  top: 57px; /* Standard-Position unter der neuen Header-Leiste */
  left: 0;
  right: 0;
  z-index: 1000;
  height: 57px; /* Explizite Höhe für Konsistenz mit main-header */
  transition: height 0.3s ease, background 0.2s, top 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: visible; /* Geändert von hidden zu visible für sichtbare Buttons */
  will-change: height, top;
  contain: layout;
}

.header-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.7rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.header-row.top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-color);
  letter-spacing: 0.01em;
}

/* Logo-Container und Logo-Image Styles */
.logo-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: transform 0.18s ease;
}

.logo-container:hover {
  transform: translateY(-1px);
}

.logo-img {
  height: 28px;
  width: auto;
  object-fit: contain;
}
.project-name .admin-logo {
  width: 3rem;
  height: 3rem;
  filter: invert(0);
  opacity: 0.9;
  transition: opacity 0.2s ease;
  object-fit: contain;
  flex-shrink: 0;
}

.project-name:hover .admin-logo {
  opacity: 1;
}

.project-name .admin-text {
  font-size: 1.5rem;
  margin: 0;
  font-weight: 500;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  line-height: 1.2;
}

.header-title h1 {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-color);
  letter-spacing: 0.01em;
  margin: 0;
}
@media (max-width: 1024px) {
  .project-name .admin-text {
    font-size: 1.4rem;
  }
  
  .project-name .admin-logo {
    width: 2.8rem;
    height: 2.8rem;
  }
  
  .logo-img {
    height: 24px;
  }
  
  .header-title h1 {
    font-size: 1.3rem;
  }
}

@media (max-width: 768px) {
  .project-name {
    gap: 0.6rem;
  }
  
  .project-name .admin-text {
    font-size: 1.3rem;
    gap: 0.3rem;
  }
  
  .project-name .admin-logo {
    width: 2.6rem;
    height: 2.6rem;
	margin-left: 14px;
  }
  
  .logo-img {
    height: 22px;
  }
  
  .header-title h1 {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .project-name {
    gap: 0.5rem;
  }
  
  .project-name .admin-text {
    font-size: 1.2rem;
    gap: 0.25rem;
  }
  
  .project-name .admin-logo {
    width: 2.2rem;
    height: 2.2rem;
    margin-left: 3px;
  }
  
  .logo-img {
    height: 20px;
  }
  
  .header-title h1 {
    font-size: 1.1rem;
  }
  
  .dialog-content, .alert-content {
    width: 95%;
    padding: 1.5rem 1.5rem;
    margin: 1rem;
  }
  
  .dialog-buttons {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .dialog-buttons > * {
    width: 100%;
    min-width: auto;
  }
}
.right-buttons {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.header-row.center-row {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 0;
	margin: 0;
	padding: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	opacity: 0;
}
.header-row.center-row.active {
	max-height: 100px;
	opacity: 1;
}
.center-buttons {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	pointer-events: none;
}
.center-buttons.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
	/* Theme-Button Hover-Effekt: Schatten direkt um das SVG-Icon (Responsive) */
	.theme-btn:hover .theme-icon svg {
		/* Heller Schatten im dunklen Theme */
		filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
	}

	/* Dunkler Schatten im hellen Theme (Responsive) */
	[data-theme="light"] .theme-btn:hover .theme-icon svg {
		filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.5));
		cursor: pointer;
	}
.theme-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.theme-icon svg {
	width: 20px;
	height: 20px;
}
.logout-container {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.logout-btn {
	background: none !important;
	color: var(--text-color) !important;
	border: none !important;
	box-shadow: none !important;
	min-width: unset;
	min-height: unset;
	padding: 0 !important;
	font-size: 0.9rem !important;
	display: inline;
	cursor: pointer;
	transition: color 0.18s;
	text-decoration: underline !important;
}
.logout-btn:hover, .logout-btn:focus {
	color: #dc3545 !important;
	text-decoration: none;
	box-shadow: none;
}
.logout-icon {
	color: var(--text-color);
	font-size: 0.9rem;
	transition: color 0.18s;
}
.logout-container:hover .logout-icon {
	color: #dc3545;
}

.clear-selection-container {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.clear-selection-icon {
	color: var(--text-color);
	font-size: 0.9rem;
	transition: color 0.18s;
}
.clear-selection-container:hover .clear-selection-icon {
	color: #dc3545;
}
.clear-selection-btn {
	background: none !important;
	color: var(--text-color) !important;
	border: none !important;
	box-shadow: none !important;
	min-width: unset;
	min-height: unset;
	padding: 0 !important;
	font-size: 0.9rem !important;
	display: inline;
	cursor: pointer;
	transition: color 0.18s;
	text-decoration: underline !important;
}
.clear-selection-btn:hover, .clear-selection-btn:focus {
	color: #dc3545;
	box-shadow: none;
	text-decoration: none;
}

/* Dark Theme: Auswahl aufheben Hover reparieren */
[data-theme="dark"] .clear-selection-btn:hover,
[data-theme="dark"] .clear-selection-btn:focus {
	color: #dc3545;
}

.gallery-container {
	max-width: 1400px;
	margin: 3rem auto 2rem;
	padding: 0 1.5rem;
}
.admin-gallery {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	justify-content: center;
	gap: 1.5rem;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	contain: layout;
}
.admin-gallery.grid-collapse-mode, .gallery-container.grid-collapse-mode .admin-gallery {
	grid-template-columns: repeat(6, 1fr);
	gap: 0.8rem;
}
.admin-gallery.grid-collapse-mode .admin-image, .gallery-container.grid-collapse-mode .admin-gallery .admin-image {
	display: block;
	background: transparent;
	box-shadow: none;
	border-radius: 0.5rem;
	overflow: hidden;
	cursor: grab;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.admin-gallery.grid-collapse-mode .admin-image:hover, .gallery-container.grid-collapse-mode .admin-gallery .admin-image:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.admin-gallery.grid-collapse-mode .admin-image .meta-edit, .admin-gallery.grid-collapse-mode .admin-image .gallery-checkbox, .admin-gallery.grid-collapse-mode .admin-image .delete-btn, .gallery-container.grid-collapse-mode .admin-gallery .admin-image .meta-edit, .gallery-container.grid-collapse-mode .admin-gallery .admin-image .gallery-checkbox, .gallery-container.grid-collapse-mode .admin-gallery .admin-image .delete-btn {
	display: none;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}



/* === MODERNE DRAG & DROP STYLES === */

/* Desktop: Native HTML5 Drag & Drop */
.admin-gallery .admin-image[draggable="true"] {
	cursor: grab;
	transition: all 0.15s ease;
}

.admin-gallery .admin-image[draggable="true"]:active {
	cursor: grabbing;
}

/* Desktop: Drag-Status */
.admin-gallery .admin-image.dragging {
	opacity: 0.8;
	transform: rotate(5deg);
	z-index: 1000;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
	transition: all 0.2s ease;
}

/* Desktop: SortableJS-Klassen */
.admin-gallery .admin-image.sortable-chosen-desktop {
	opacity: 0.8;
	transform: rotate(5deg);
	z-index: 1000;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
	transition: all 0.2s ease;
	will-change: transform;
}

.admin-gallery .admin-image.sortable-drag-desktop {
	opacity: 0.9;
	transform: rotate(5deg);
	z-index: 1001;
	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
	will-change: transform;
}

.admin-gallery .admin-image.sortable-ghost-desktop {
	opacity: 0.3;
	background: rgba(0, 0, 0, 0.1);
	border: 2px dashed rgba(0, 0, 0, 0.3);
	will-change: transform;
	transform: translate3d(0, 0, 0);
}

/* Mobile: SortableJS-Klassen */
.admin-gallery .admin-image.sortable-chosen-mobile {
	opacity: 0.9;
	transform: rotate(2deg);
	z-index: 1000;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	transition: all 0.1s ease;
	will-change: transform;
}

.admin-gallery .admin-image.sortable-drag-mobile {
	opacity: 1;
	transform: rotate(2deg);
	z-index: 1001;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
	will-change: transform;
	transition: none; /* Keine Verzögerung während Drag */
}

.admin-gallery .admin-image.sortable-ghost-mobile {
	opacity: 0.4;
	background: rgba(0, 0, 0, 0.08);
	border: 1px dashed rgba(0, 0, 0, 0.25);
	will-change: transform;
	transform: translate3d(0, 0, 0);
	transition: none; /* Keine Verzögerung während Drag für bessere Performance */
	pointer-events: none; /* Verhindert Interaktionen mit Ghost-Element */
	z-index: 1002; /* Höherer Z-Index für bessere Sichtbarkeit */
}

/* Gemeinsame Drag-Status-Styles */
.admin-gallery .admin-image.drag-active {
	pointer-events: none;
}

/* Drop-Zone Hover-Effekte */
.page-transition-zone.drop-hover {
	background-color: rgba(0, 0, 0, 0.1);
	border: 2px dashed rgba(0, 0, 0, 0.5);
	transform: scale(1.05);
	transition: all 0.2s ease;
}

/* Hardware-Beschleunigung für alle Drag-Elemente */
.admin-gallery .admin-image.sortable-chosen-desktop,
.admin-gallery .admin-image.sortable-drag-desktop,
.admin-gallery .admin-image.sortable-ghost-desktop,
.admin-gallery .admin-image.sortable-chosen-mobile,
.admin-gallery .admin-image.sortable-drag-mobile,
.admin-gallery .admin-image.sortable-ghost-mobile,
.admin-gallery .admin-image.sortable-fallback-mobile,
.admin-gallery .admin-image.dragging {
	will-change: transform;
	transform: translate3d(0, 0, 0);
}

/* Responsive Design für Mobile - verbesserte Touch-Performance */
@media (max-width: 768px) {
	/* Mobile-spezifische Touch-Optimierungen */
	.admin-gallery .admin-image.sortable-fallback-mobile {
		opacity: 0.8;
		transform: rotate(1deg);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		transition: transform 0.1s ease;
		will-change: transform;
	}
}

/* Mobile Fallback-Klassen - in Media Queries definiert */

@media (max-width: 1200px) {
  .admin-gallery {
    grid-template-columns: repeat(5, 1fr);
  }
  
  .admin-gallery.grid-collapse-mode, .gallery-container.grid-collapse-mode .admin-gallery {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (max-width: 1024px) {
  .admin-gallery {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .admin-gallery.grid-collapse-mode, .gallery-container.grid-collapse-mode .admin-gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* Konsolidierte Media Queries für bessere Performance */
@media (max-width: 768px) {
  .admin-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  
  .admin-gallery.grid-collapse-mode, .gallery-container.grid-collapse-mode .admin-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
  }
}

@media (max-width: 480px) {
  .admin-gallery {
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
  }
  
  .admin-gallery.grid-collapse-mode, .gallery-container.grid-collapse-mode .admin-gallery {
    grid-template-columns: repeat(1, 1fr);
    gap: 0.8rem;
  }
}

@media (max-width: 360px) {
  .admin-gallery {
    grid-template-columns: repeat(1, 1fr);
    gap: 0.8rem;
  }
  
  .admin-gallery.grid-collapse-mode, .gallery-container.grid-collapse-mode .admin-gallery {
    grid-template-columns: repeat(1, 1fr);
    gap: 0.6rem;
  }
}
.admin-image {
	position: relative;
	padding-top: 0;
	margin-top: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	background: var(--card-bg, #222);
	box-shadow: var(--shadow);
	border-radius: 0.9em;
	overflow: hidden;
	box-sizing: border-box;
	cursor: pointer;
	transition: transform 0.2s ease;
}
.admin-image:hover {
	box-shadow: 0 6px 24px rgba(0,0,0,0.13);
	filter: brightness(1.03);
}

.admin-image .gallery-checkbox, .admin-image .delete-btn {
	position: absolute;
	top: 0.5rem;
	width: 1.3em;
	height: 1.3em;
	border-radius: 0.25em;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1em;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	cursor: pointer;
	z-index: 20;
	border: none;
	padding: 0;
	transition: background 0.18s, color 0.18s;
}
.gallery-checkbox {
	pointer-events: auto;
	z-index: 10;
}
.page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.2em;
	min-height: 2.2em;
	width: 2.2em;
	height: 2.2em;
	padding: 0;
	border-radius: 50%;
	background: var(--pagination-inactive-bg);
	color: var(--pagination-inactive-color);
	border: 2px solid var(--pagination-inactive-border);
	font-weight: 500;
	font-size: 1.08em;
	text-align: center;
	text-decoration: none;
	transition: background 0.18s, color 0.18s, border 0.18s;
	cursor: pointer;
	will-change: background, color, border;
	contain: layout;
}
.page-item.active .page-link {
	background: var(--pagination-active-bg);
	color: var(--pagination-active-color);
	border-color: var(--pagination-active-bg);
}
.page-link:hover, .page-link:focus {
	background: var(--pagination-hover-bg);
	color: var(--pagination-inactive-color);
	border-color: var(--pagination-inactive-border);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.page-link.pagination-nav-text {
	border: none !important;
	background: none !important;
	color: var(--pagination-nav-color) !important;
	width: auto;
	height: auto;
	border-radius: 0 !important;
	font-size: 1.3em;
	padding: 0 0.5em;
	box-shadow: none !important;
}
.page-link.pagination-nav-text:hover, .page-link.pagination-nav-text:focus {
	color: var(--pagination-nav-hover) !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
}
@media (max-width: 768px) {
  .page-link {
    min-width: 2em;
    min-height: 2em;
    width: 2em;
    height: 2em;
    font-size: 1em;
  }
  
  .page-link.pagination-nav-text {
    font-size: 1.2em;
    padding: 0 0.3em;
  }
}
@media (max-width: 480px) {
  .page-link {
    min-width: 1.8em;
    min-height: 1.8em;
    width: 1.8em;
    height: 1.8em;
    font-size: 0.9em;
  }
  
  .page-link.pagination-nav-text {
    font-size: 1.1em;
    padding: 0 0.2em;
  }
}
.admin-image .gallery-checkbox {
	left: 0.5rem;
	top: 0.2rem;
	width: 1.2em;
	height: 1.2em;
	border-radius: 0.25em;
	border: 2px solid #c0392b;
	background: #fff;
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.95em;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	cursor: pointer;
	z-index: 20;
	padding: 0;
	transition: background 0.18s, color 0.18s, border 0.18s;
}
.admin-image .gallery-checkbox:checked {
	background: #c0392b;
	color: #fff;
}
.admin-image .gallery-checkbox:checked:after {
	content: '✓';
	color: #fff;
	font-size: 1em;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	line-height: 1.2em;
	text-align: center;
}
.admin-image .delete-btn {
	right: 0.5rem;
	top: 0.5rem;
	width: 1.2em;
	height: 1.2em;
	border-radius: 50%;
	background: #c0392b;
	color: #fff;
	font-size: 0.9em;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	z-index: 20;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	border: none;
	cursor: pointer;
	transition: background 0.18s, color 0.18s;
}
.admin-image .delete-btn:hover {
	background: #a93226;
}
.admin-image .delete-btn i {
	font-size: 0.9em;
	color: #fff;
	line-height: 1;
}
.meta-edit {
	margin-top: 0.2em;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	align-items: stretch;
	justify-content: flex-start;
	background: none;
	border-radius: 0 0 0.9em 0.9em;
	padding: 0.2em 0.3em 0.3em 0.3em;
	box-shadow: none;
	box-sizing: border-box;
	overflow: visible !important;
	position: relative;
	z-index: 10;
	pointer-events: auto;
	opacity: 1;
	filter: none;
	transition: opacity 0.2s ease, filter 0.2s ease;
}
.meta-edit input[type="text"] {
	width: 100%;
	font-size: 0.98em;
	padding: 0.35em 0.7em;
	border-radius: 0.4em;
	border: 1px solid var(--border-color, #444);
	background: var(--bg-color, #181818);
	color: var(--text-color, #fff);
	margin-bottom: 0.2em;
	box-sizing: border-box;
	pointer-events: auto;
	cursor: text;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.meta-edit input[type="text"]:focus {
	border-color: var(--accent-color, #4a6fa5);
	background: var(--bg-color, #181818);
	outline: none;
}
.meta-edit button.meta-save-btn {
	align-self: flex-end;
	padding: 0.18em 0.85em;
	border-radius: 0.4em;
	font-size: 0.93em;
	margin-top: 0.18em;
	min-width: unset;
	height: 2em;
	cursor: pointer;
	position: relative;
	z-index: 11;
	pointer-events: auto;
	transition: background-color 0.2s ease, transform 0.1s ease;
}
.meta-edit button.meta-save-btn:hover {
	transform: translateY(-1px);
}
.upload-container {
	background: var(--card-bg);
	border-radius: 0.75rem;
	padding: 1.5rem;
	box-shadow: var(--shadow);
	margin-bottom: 2rem;
}
.upload-actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	justify-content: center;
}
#dropZone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 2rem;
	gap: 1rem;
	border: 2px dashed var(--accent-color);
	border-radius: 0.5rem;
	background: rgba(var(--accent-color-rgb), 0.05);
	transition: var(--transition);
	margin-bottom: 1rem;
	color: var(--text-color);
}
.upload-progress-container {
	display: none;
	margin: 1.5rem auto 0 auto;
	max-width: 400px;
	width: 100%;
	padding: 0 1rem;
	will-change: opacity;
	contain: layout;
}
.upload-progress-container.active {
	display: block;
	animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes fadeInUp {
from {
opacity:0;
transform:translateY(10px);
}
to {
	opacity: 1;
	transform: translateY(0);
}
}
.upload-progress-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.75rem;
	font-size: 0.9rem;
	font-weight: 500;
}
.upload-progress-text {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--text-color);
}
.upload-progress-text i {
	color: var(--accent-color);
}
.upload-progress-percentage {
	font-weight: 600;
	color: var(--accent-color);
}
.upload-progress-bar {
	width: 100%;
	height: 8px;
	background: var(--border-color);
	border-radius: 4px;
	overflow: hidden;
	position: relative;
}
.upload-progress-fill {
	height: 100%;
	background: var(--accent-color);
	border-radius: 4px;
	transition: width 0.3s ease;
	position: relative;
	will-change: width;
	contain: layout;
}
.upload-progress-fill::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
	animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% {
transform:translateX(-100%);
}
100% {
transform:translateX(100%);
}
}
.upload-progress-details {
	display: flex;
	justify-content: space-between;
	margin-top: 0.5rem;
	font-size: 0.8rem;
	color: var(--text-muted);
}
.upload-progress-speed {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}
.upload-progress-speed i {
	font-size: 0.7rem;
}
.upload-progress-time {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}
.upload-progress-time i {
	font-size: 0.7rem;
}
@media (max-width: 768px) {
  .upload-progress-container {
    margin: 1rem auto 0 auto;
    padding: 0 0.5rem;
  }
  
  .upload-progress-header {
    font-size: 0.85rem;
  }
  
  .upload-progress-bar {
    height: 6px;
  }
  
  .upload-progress-details {
    font-size: 0.75rem;
  }
}
@media (max-width: 480px) {
  .upload-progress-container {
    margin: 0.5rem auto 0 auto;
    padding: 0;
  }
  
  .upload-progress-header {
    font-size: 0.8rem;
  }
  
  .upload-progress-bar {
    height: 5px;
  }
  
  .upload-progress-details {
    font-size: 0.7rem;
  }
}
.clear-all-link {
	text-align: center;
	margin: 1rem 0;
}
.clear-all-link a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--delete-color);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.18s;
}
.clear-all-link a:hover {
	color: #c0392b;
	text-decoration: underline;
}
.clear-all-link i {
	font-size: 0.9em;
}
.preview-container {
	margin-top: 1.5rem;
}
.preview-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 1.5rem;
	margin-top: 1.6rem;
	align-items: stretch;
}
.preview-card {
	position: relative;
	background: #fff;
	border-radius: 9px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.07);
	border: 1.5px solid #ececec;
	overflow: hidden;
	aspect-ratio: 1/1;
	width: 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: stretch;
	transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
	will-change: border-color, box-shadow, background;
	contain: layout;
}
.preview-card:hover {
	border-color: #4db6ac;
	background: #f8fafb;
	box-shadow: 0 4px 18px rgba(77,182,172,0.10);
}
.preview-card img {
	width: 100%;
	height: 100%;

	aspect-ratio: 1/1;
	object-fit: cover;
	border-radius: 9px;
	background: #f8f8f8;
	display: block;
	flex: 1 1 auto;
	transition: filter 0.12s cubic-bezier(0.4, 0, 0.2, 1);
	transform-origin: center center;
}
.preview-card:hover img {
	filter: brightness(1.08) saturate(1.08) !important;
}
.preview-card .file-size {
	position: absolute;
	left: 0.7em;
	bottom: 0.7em;
	background: rgba(34,34,34,0.85);
	color: #fff;
	font-size: 0.74em;
	font-weight: 500;
	padding: 0.13em 0.7em;
	border-radius: 0.6em;
	box-shadow: 0 1px 4px rgba(0,0,0,0.10);
	letter-spacing: 0.01em;
	pointer-events: none;
	z-index: 2;
	min-width: 0;
	text-align: left;
	line-height: 1.2;
	opacity: 0.97;
}
.preview-card .remove-btn {
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	width: 1.1em;
	height: 1.1em;
	border-radius: 50%;
	background: #c0392b;
	color: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1em;
	box-shadow: none;
	transition: background 0.15s, color 0.15s, transform 0.15s;
	z-index: 3;
	opacity: 0.93;
}
.preview-card .remove-btn:hover {
	background: #fff;
	color: #c0392b;
	border: 1.5px solid #c0392b;
	transform: scale(1.13);
	opacity: 1;
}
.preview-card.clear-all-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	border: 1.5px solid #ececec;
	background: #f3f4f6;
	color: #222;
	box-shadow: 0 2px 10px rgba(0,0,0,0.07);
	min-height: 0;
	border-radius: 9px;
	transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
	order: -1;
}
.preview-card.clear-all-card:hover {
	border-color: #c0392b;
	background: #fff0f0;
	box-shadow: 0 4px 18px rgba(192,57,43,0.10);
}
.clear-all-card .clear-all-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	text-align: center;
	gap: 0.3em;
}
.clear-all-card .clear-all-link a {
	color: #c0392b;
	font-weight: 500;
	font-size: 1em;
	text-decoration: none;
	background: none;
	border: none;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.7em;
	transition: color 0.18s;
}
.clear-all-card .clear-all-link i {
	font-size: 2.1em;
	margin: 0 auto 0 0;
	color: #c0392b;
	opacity: 0.85;
	display: block;
}
@media (max-width: 700px) {
  .preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.8rem;
  }
  
  .preview-card, .preview-card img, .preview-card.clear-all-card {
    border-radius: 6px;
  }
  
  .preview-card .file-size {
    font-size: 0.62em;
    left: 0.3em;
    bottom: 0.3em;
    padding: 0.07em 0.4em;
    border-radius: 0.25em;
  }
  
  .preview-card .remove-btn {
    width: 0.8em;
    height: 0.8em;
    font-size: 0.85em;
    top: 0.2em;
    right: 0.2em;
  }
}
.preview-card.loading {
	background: linear-gradient(90deg, var(--card-bg) 25%, rgba(var(--accent-color-rgb), 0.1) 50%, var(--card-bg) 75%);
	background-size: 200% 100%;
	animation: loading-shimmer 1.5s infinite;
}
@keyframes loading-shimmer {
0% {
background-position:-200% 0;
}
100% {
background-position:200% 0;
}
}
.preview-card.error {
	border: 2px solid var(--delete-color);
}
.preview-card.error .remove-btn {
	background: var(--delete-color);
}
@media (max-width: 768px) {
  .preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.75rem;
  }
  
  .preview-card {
    padding: 0.4rem;
  }
  
  .preview-card .remove-btn {
    width: 1.3rem;
    height: 1.3rem;
    font-size: 0.6rem;
  }
  
  .preview-card .file-size {
    font-size: 0.65rem;
    padding: 0.2rem 0.4rem;
  }
}
@media (max-width: 480px) {
  .preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.5rem;
  }
  
  .preview-card {
    padding: 0.3rem;
  }
  
  .preview-card .remove-btn {
    width: 1.2rem;
    height: 1.2rem;
    font-size: 0.55rem;
  }
  
  .preview-card .file-size {
    font-size: 0.6rem;
    padding: 0.15rem 0.3rem;
  }
}
.storage-info-box {
	background: var(--card-bg);
	border-radius: 1.2rem;
	padding: 0;
	margin-bottom: 2rem;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
	border: 1px solid var(--border-color);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
	position: relative;
	will-change: transform, box-shadow;
	contain: layout;
}
.storage-info-box.collapsed {
	padding: 0;
	background: var(--card-bg);
	transition: all 0.2s ease;
}
.storage-info-box.collapsed:hover {
	background: rgba(var(--accent-color-rgb), 0.02);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}
.storage-info-box:hover {
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}
.storage-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.2rem 1.5rem;
	background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.03) 0%, rgba(var(--accent-color-rgb), 0.01) 100%);
	border-bottom: 1px solid var(--border-color);
	cursor: pointer;
	user-select: none;
	transition: all 0.2s ease;
	position: relative;
}
.storage-header:hover {
	background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.06) 0%, rgba(var(--accent-color-rgb), 0.03) 100%);
}
.storage-header-left {
	display: flex;
	align-items: center;
	gap: 0.8rem;
}
.storage-header-left i {
	font-size: 1.2rem;
	color: var(--text-color);
	opacity: 0.9;
}
.storage-header-left span {
	font-weight: 600;
	color: var(--text-color);
	font-size: 1.1rem;
	letter-spacing: 0.02em;
}
.storage-badge {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	color: #fff;
	border-radius: 0.375rem;
	font-size: 0.85rem;
	font-weight: 600;
	transition: all 0.2s ease;
}
.storage-badge i {
	opacity: 1;
}
.storage-badge span {
	color: #fff;
}
.storage-badge:hover {
	transform: translateY(-1px);
}
.storage-badge i {
	font-size: 0.9rem;
}
.storage-info-box.collapsed .storage-header {
	padding: 1rem 1.5rem;
	border-bottom: none;
}
.storage-info-box.collapsed .storage-header:hover {
	background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.06) 0%, rgba(var(--accent-color-rgb), 0.03) 100%);
}
.storage-header span {
	font-weight: 600;
	color: var(--text-color);
	font-size: 1.1rem;
	letter-spacing: 0.02em;
}
#storageToggleBtn {
	background: linear-gradient(135deg, #333, #555);
	border: none;
	color: white;
	cursor: pointer;
	border-radius: 0.375rem;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	min-height: 1.5rem;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}
#storageToggleBtn:hover {
	background: linear-gradient(135deg, #444, #666);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
	transform: translateY(-1px);
}
#storageToggleBtn:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
#storageToggleIcon {
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	font-size: 1rem;
}
.storage-info-box:not(.collapsed) #storageToggleIcon {
	transform: rotate(180deg);
}
.storage-content {
	transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
	max-height: 1200px;
	opacity: 1;
	overflow: hidden;
	padding: 1.5rem;
}
.storage-content.collapsed {
	max-height: 0;
	opacity: 0;
	pointer-events: none;
	padding: 0 1.5rem;
}
.storage-main-section {
	margin-bottom: 1.5rem;
}
.storage-overview {
	display: flex;
	align-items: center;
	gap: 2rem;
	margin-bottom: 1.5rem;
	padding: 1.5rem;
	background: linear-gradient(135deg, rgba(var(--primary-green-rgb), 0.05) 0%, rgba(var(--primary-green-rgb), 0.02) 100%);
	border-radius: 0.375rem;
	border: 1px solid rgba(var(--primary-green-rgb), 0.1);
}
.storage-progress-container {
	flex: 1;
}
.storage-progress-bar {
	width: 100%;
	height: 12px;
	background: rgba(var(--accent-color-rgb), 0.1);
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 0.5rem;
	position: relative;
}
.storage-progress-fill {
	height: 100%;
	border-radius: 6px;
	transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
	position: relative;
	overflow: hidden;
	will-change: width;
	contain: layout;
}

/* Farbige Progress Bar basierend auf Speicherverbrauch */
.storage-progress-fill.progress-success {
	background: linear-gradient(90deg, #28a745, #20c997);
}

.storage-progress-fill.progress-warning {
	background: linear-gradient(90deg, #ffc107, #fd7e14);
}

.storage-progress-fill.progress-danger {
	background: linear-gradient(90deg, #dc3545, #e83e8c);
}
.storage-progress-fill::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% {
left:-100%;
}
100% {
left:100%;
}
}
.storage-progress-labels {
	display: flex;
	justify-content: space-between;
	font-size: 0.85rem;
	color: var(--text-muted);
	font-weight: 500;
}
.storage-percentage {
	text-align: center;
	min-width: 80px;
	position: relative;
}

.refresh-storage-btn {
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
	width: 1.5rem;
	height: 1.5rem;
	border: none;
	background: var(--accent-color);
	color: white;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	transition: all 0.2s ease;
	opacity: 0.8;
}

.refresh-storage-btn:hover {
	opacity: 1;
	transform: scale(1.1);
	background: var(--accent-color);
}

.refresh-storage-btn:active {
	transform: scale(0.95);
}

.refresh-storage-btn i {
	transition: transform 0.3s ease;
}

.refresh-storage-btn.loading i {
	animation: spin 1s linear infinite;
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
.percentage-value {
	display: block;
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--primary-green);
	line-height: 1;
}
.percentage-label {
	display: block;
	font-size: 0.8rem;
	color: var(--text-muted);
	margin-top: 0.2rem;
}
.storage-details-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
}
.storage-detail-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.2rem;
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: 0.375rem;
	transition: all 0.2s ease;
}
.storage-detail-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	border-color: rgba(var(--primary-green-rgb), 0.2);
}
.detail-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 0.375rem;
	font-size: 1.2rem;
	color: white;
	flex-shrink: 0;
}
.storage-available .detail-icon {
	background: var(--text-color);
	color: var(--card-bg);
}
.storage-images .detail-icon {
	background: var(--text-color);
	color: var(--card-bg);
}
.detail-content {
	flex: 1;
}
.detail-label {
	display: block;
	font-size: 0.85rem;
	color: var(--text-muted);
	margin-bottom: 0.3rem;
	font-weight: 500;
}
.detail-value {
	display: block;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--text-color);
}
.storage-warning {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.5rem;
	background: linear-gradient(135deg, rgba(244, 67, 54, 0.1) 0%, rgba(244, 67, 54, 0.05) 100%);
	border: 1px solid rgba(244, 67, 54, 0.2);
	border-radius: 0.375rem;
	margin-bottom: 1.5rem;
	animation: pulse-warning 2s infinite;
}
@keyframes pulse-warning {
0%, 100% {
opacity:1;
}
50% {
opacity:0.8;
}
}
.warning-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	background: linear-gradient(135deg, #F44336, #D32F2F);
	color: white;
	border-radius: 0.375rem;
	font-size: 1.1rem;
	flex-shrink: 0;
}
.warning-content {
	flex: 1;
}
.warning-title {
	display: block;
	font-weight: 600;
	color: #D32F2F;
	font-size: 1rem;
	margin-bottom: 0.2rem;
}
.warning-text {
	display: block;
	color: var(--text-muted);
	font-size: 0.9rem;
	line-height: 1.4;
}
.gallery-info-section {
	padding: 1.5rem;
	background: linear-gradient(135deg, rgba(156, 39, 176, 0.05) 0%, rgba(156, 39, 176, 0.02) 100%);
	border: 1px solid rgba(156, 39, 176, 0.1);
	border-radius: 0.375rem;
}
.gallery-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 1.5rem;
}
.stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 1rem;
	background: var(--card-bg);
	border-radius: 0.375rem;
	border: 1px solid var(--border-color);
	transition: all 0.2s ease;
}
.stat-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	border-color: rgba(156, 39, 176, 0.2);
}
.stat-item i {
	font-size: 1.5rem;
	color: var(--text-color);
	margin-bottom: 0.5rem;
	opacity: 0.9;
}
.stat-value {
	display: block;
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--text-color);
	line-height: 1;
	margin-bottom: 0.3rem;
}
.stat-label {
	display: block;
	font-size: 0.8rem;
	color: var(--text-muted);
	font-weight: 500;
}
.storage-collapsed-info {
	display: block;
	padding: 1rem 1.5rem;
	opacity: 1;
	transform: translateY(0);
	transition: all 0.3s ease;
}
.storage-info-box:not(.collapsed) .storage-collapsed-info {
	display: none;
	opacity: 0;
	transform: translateY(-10px);
}
.collapsed-stats {
	display: flex;
	justify-content: space-around;
	gap: 0.75rem;
	padding: 0.5rem 0;
	min-height: 60px;
	align-items: center;
}
.collapsed-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	padding: 0.75rem 0.5rem;
	background: rgba(var(--accent-color-rgb), 0.05);
	border-radius: 0.375rem;
	border: 1px solid rgba(var(--accent-color-rgb), 0.1);
	transition: all 0.2s ease;
	min-width: 80px;
	flex: 1;
	max-width: 120px;
}
.collapsed-stat:hover {
	background: rgba(var(--accent-color-rgb), 0.08);
	transform: translateY(-1px);
}
.collapsed-stat i {
	font-size: 1rem;
	color: var(--text-color);
	opacity: 0.9;
	margin-bottom: 0.1rem;
}
.collapsed-stat span {
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--text-color);
	text-align: center;
	line-height: 1.2;
	word-break: break-word;
}
@media (max-width:768px) {
.storage-header {
	padding: 1rem 1.2rem;
}
.storage-header-left {
	gap: 0.6rem;
}
.storage-header-left span {
	font-size: 1rem;
}
.storage-badge {
	padding: 0.25rem 0.6rem;
	font-size: 0.8rem;
}
.storage-content {
	padding: 1.2rem 1.2rem 20rem 1.2rem
}
.storage-overview {
	flex-direction: column;
	gap: 1.5rem;
	padding: 1.2rem;
}
.storage-progress-container {
	width: 100%;
	max-width: 100%;
}
.storage-progress-bar {
	width: 100%;
	height: 14px;
	background: rgba(var(--accent-color-rgb), 0.1);
	border-radius: 7px;
	overflow: hidden;
	margin-bottom: 0.5rem;
	position: relative;
}
.storage-progress-fill {
	height: 100%;
	border-radius: 7px;
	transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
}
.storage-progress-labels {
	font-size: 0.8rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}
.percentage-value {
	font-size: 1.5rem;
}
.storage-details-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.8rem;
	margin-top: 1rem;
	width: 100%;
}
.storage-detail-card {
	padding: 1rem;
	min-height: 4rem;
	display: flex;
	align-items: center;
	gap: 0.8rem;
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: 0.375rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}
.detail-icon {
	width: 2.5rem;
	height: 2.5rem;
	font-size: 1rem;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(var(--primary-green-rgb), 0.1);
	border-radius: 0.375rem;
	color: var(--primary-green);
}
.detail-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}
.detail-label {
	font-size: 0.8rem;
	color: var(--text-muted);
	display: block;
	font-weight: 500;
	line-height: 1.2;
}
.detail-value {
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-color);
	display: block;
	word-break: break-word;
	line-height: 1.3;
}

/* Mobile-Optimierung für sehr kleine Bildschirme */
@media (max-width: 480px) {
	.storage-details-grid {
		grid-template-columns: 1fr;
		gap: 0.6rem;
		margin-top: 0.8rem;
	}
	.storage-detail-card {
		padding: 0.8rem;
		min-height: 3.5rem;
		gap: 0.6rem;
	}
	.detail-icon {
		width: 2rem;
		height: 2rem;
		font-size: 0.9rem;
		border-radius: 0.25rem;
	}
	.detail-content {
		gap: 0.1rem;
	}
	.detail-label {
		font-size: 0.75rem;
		font-weight: 500;
	}
	.detail-value {
		font-size: 0.9rem;
		font-weight: 600;
	}
	.storage-progress-bar {
		height: 12px;
		border-radius: 6px;
	}
	.storage-progress-fill {
		border-radius: 6px;
	}
}
.gallery-stats {
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}
.stat-item {
	padding: 0.8rem;
}
.stat-value {
	font-size: 1.2rem;
}
.collapsed-stats {
	flex-direction: row;
	gap: 0.5rem;
	padding: 0.4rem 0;
	min-height: 50px;
}
.collapsed-stat {
	padding: 0.6rem 0.4rem;
	min-width: 70px;
	max-width: 100px;
}
.collapsed-stat i {
	font-size: 0.9rem;
}
.collapsed-stat span {
	font-size: 0.75rem;
}
}
@media (max-width:480px) {
.storage-header {
	padding: 0.8rem 1rem;
}
.storage-header-left {
	gap: 0.5rem;
}
.storage-header-left span {
	font-size: 0.9rem;
}
.storage-badge {
	padding: 0.2rem 0.5rem;
	font-size: 0.75rem;
}
.storage-content {
	padding: 1rem 1rem 20rem 1rem;
}
.storage-overview {
	padding: 1rem;
}
.storage-progress-bar {
	height: 10px;
}
.percentage-value {
	font-size: 1.3rem;
}
.detail-icon {
	width: 2.2rem;
	height: 2.2rem;
	font-size: 0.9rem;
}
.detail-value {
	font-size: 1rem;
}
.gallery-stats {
	grid-template-columns: 1fr;
	gap: 0.8rem;
}
.stat-item {
	flex-direction: row;
	text-align: left;
	gap: 1rem;
}
.stat-item i {
	margin-bottom: 0;
}
.warning {
	padding: 0.8rem 1.2rem;
}
.warning-icon {
	width: 2rem;
	height: 2rem;
	font-size: 1rem;
}
}
.storage-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	transition: opacity 0.3s ease;
}
.pagination-nav {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 2.2em auto 1.2em auto; /* 🔥 [PAGINATION-CENTER-FIX] Margin oben/unten beibehalten, links/rechts auto für Zentrierung */
	width: 100%;
	clear: both;
	scroll-margin-top: 80px;
}
.pagination {
	display: flex;
	gap: 0.5em;
	justify-content: center;
	align-items: center;
	margin: 0; /* 🔥 [PAGINATION-CENTER-FIX] Margin entfernt für perfekte Zentrierung */
	flex-wrap: wrap;
	list-style: none;
}
.page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.2em;
	min-height: 2.2em;
	width: 2.2em;
	height: 2.2em;
	padding: 0;
	border-radius: 50%;
	background: var(--pagination-inactive-bg);
	color: var(--pagination-inactive-color);
	border: 2px solid var(--pagination-inactive-border);
	font-weight: 500;
	font-size: 1.08em;
	text-align: center;
	text-decoration: none;
	transition: background 0.18s, color 0.18s, border 0.18s;
	cursor: pointer;
	box-shadow: none;
	margin: 0 0.08em;
}
.page-item.active .page-link {
	background: var(--pagination-active-bg);
	color: var(--pagination-active-color);
	border-color: var(--pagination-active-bg);
}
.page-link:hover, .page-link:focus {
	background: var(--pagination-hover-bg);
	color: var(--pagination-inactive-color);
	border-color: var(--pagination-inactive-border);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.page-link.pagination-nav-text {
	border: none !important;
	background: none !important;
	color: var(--pagination-nav-color) !important;
	width: auto;
	height: auto;
	border-radius: 0 !important;
	font-size: 1.3em;
	padding: 0 0.5em;
	box-shadow: none !important;
}
.page-link.pagination-nav-text:hover, .page-link.pagination-nav-text:focus {
	color: var(--pagination-nav-hover) !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
}


/* 🔥 [PAGINATION-TOP] Spezifische Styling-Regeln für obere Pagination */
#pagination-top {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 1.5em 0 1em 0;
	text-align: center;
}

#pagination-top .pagination-nav {
	margin: 1.5em auto 1em auto; /* 🔥 [PAGINATION-CENTER-FIX] Konsistente Margin-Regel für obere Pagination */
	width: auto;
	max-width: 100%;
}

#pagination-top .pagination {
	margin: 0;
	justify-content: center;
	align-items: center;
}

/* 🔥 [PAGINATION-TOP] Grid-Modus: Obere Pagination ausblenden */
body.grid-only-mode #pagination-top {
	display: none;
}

/* 🔥 [PAGINATION-CENTER-FIX] Alle Pagination-Listen perfekt zentrieren */
ul.pagination {
	margin: 0;
	padding: 0;
}

/* Konsolidierte Media Queries für Pagination */
@media (max-width: 768px) {
  .pagination {
    gap: 0.3em;
    margin: 1.2em 0 0.7em 0;
  }
  
  .page-link {
    min-width: 2em;
    min-height: 2em;
    width: 2em;
    height: 2em;
    font-size: 1em;
  }
  
  .page-link.pagination-nav-text {
    font-size: 1.2em;
    padding: 0 0.3em;
  }
  
  /* 🔥 [PAGINATION-TOP] Responsive Anpassungen für obere Pagination */
  #pagination-top {
    margin: 1.2em 0 0.8em 0;
  }
}

@media (max-width: 480px) {
  .pagination {
    gap: 0.18em;
    margin: 0.7em 0 0.3em 0;
  }
  
  .page-link {
    min-width: 1.8em;
    min-height: 1.8em;
    width: 1.8em;
    height: 1.8em;
    font-size: 0.9em;
  }
  
  .page-link.pagination-nav-text {
    font-size: 1.1em;
    padding: 0 0.2em;
  }
  
  /* 🔥 [PAGINATION-TOP] Responsive Anpassungen für sehr kleine Bildschirme */
  #pagination-top {
    margin: 0.8em 0 0.5em 0;
  }
}


.cross-page-modal {
	position: fixed;
	inset: 0;
	z-index: 1002;
	background: rgba(34,34,34,0.18);
	backdrop-filter: blur(2.5px);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.18s;
	will-change: opacity;
	contain: layout;
}
.cross-page-modal .modal-content {
	background: var(--card-bg);
	border-radius: 1.1em;
	box-shadow: 0 8px 32px rgba(0,0,0,0.13);
	padding: 1.4em 2.5em 1.2em 2.5em;
	min-width: 320px;
	max-width: 98vw;
	max-height: 90vh;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.8em;
}

/* Desktop-spezifische "Seite auswählen" Dialogbox-Optimierungen */
.cross-page-modal .modal-content h3 {
	margin: 0 0 0.4em 0;
	font-size: 1.2em;
}

.cross-page-modal .modal-content p {
	margin: 0 0 0.6em 0;
	font-size: 0.95em;
}
@media (max-width:900px) {
.cross-page-modal .modal-content {
	padding: 1.2em 0.7em 1.2em 0.7em;
	min-width: 0;
}
}

/* Mobile-spezifische "Seite auswählen" Dialogbox-Optimierungen */
@media (max-width: 768px) {
  .cross-page-modal .modal-content {
    padding: 1.5em 1.2em 1.2em 1.2em;
    gap: 1em;
    border-radius: 0.8em;
    min-width: 280px;
    max-width: 95vw;
  }
  
  .cross-page-modal .modal-content h3 {
    margin: 0 0 0.6em 0;
    font-size: 1.1em;
  }
  
  .cross-page-modal .modal-content p {
    margin: 0 0 0.8em 0;
    font-size: 0.9em;
  }
  
  .cross-page-modal .page-options {
    margin: 0.5em 0;
  }
  
  .modal-buttons {
    margin-top: 1em;
  }
}

@media (max-width: 480px) {
  .cross-page-modal .modal-content {
    padding: 1.2em 1em 1em 1em;
    gap: 0.8em;
    border-radius: 0.6em;
    min-width: 260px;
    max-width: 98vw;
  }
  
  .cross-page-modal .modal-content h3 {
    margin: 0 0 0.5em 0;
    font-size: 1em;
  }
  
  .cross-page-modal .modal-content p {
    margin: 0 0 0.6em 0;
    font-size: 0.85em;
  }
  
  .cross-page-modal .page-options {
    margin: 0.4em 0;
  }
  
  .modal-buttons {
    margin-top: 0.8em;
  }
}
.cross-page-modal .page-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.1em;
	min-height: 2.1em;
	width: 2.1em;
	height: 2.1em;
	margin: 0 0.13em;
	border-radius: 50%;
	background: #f3f4f6;
	color: #222;
	border: 2px solid #ececec;
	font-weight: 500;
	font-size: 1.08em;
	cursor: pointer;
	transition: background 0.18s, color 0.18s, border 0.18s, box-shadow 0.18s;
	box-shadow: none;
}
.cross-page-modal .page-chip.active {
	background: var(--primary-green);
	color: #fff;
	border-color: var(--primary-green);
	box-shadow: 0 2px 8px rgba(39,174,96,0.10);
}
.cross-page-modal .page-chip:hover:not(.active):not([aria-disabled="true"]) {
	background: #e0f7fa;
	color: #111;
	border-color: #4db6ac;
	box-shadow: 0 2px 8px rgba(77,182,172,0.10);
}
@media (max-width:600px) {
.cross-page-modal .page-chip {
	min-width: 1.7em;
	min-height: 1.7em;
	width: 1.7em;
	height: 1.7em;
	font-size: 0.98em;
}
}

/* Mobile-spezifische Page-Chip-Optimierungen */
@media (max-width: 768px) {
  .cross-page-modal .page-chip {
    min-width: 2.2em;
    min-height: 2.2em;
    width: 2.2em;
    height: 2.2em;
    font-size: 1em;
    margin: 0 0.1em;
    border-radius: 0.5em;
  }
}

@media (max-width: 480px) {
  .cross-page-modal .page-chip {
    min-width: 2em;
    min-height: 2em;
    width: 2em;
    height: 2em;
    font-size: 0.95em;
    margin: 0 0.08em;
    border-radius: 0.4em;
  }
}

.modal-buttons {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 1.5rem;
}
/* ===== PAGE TRANSITION ZONES ===== */
/* Verschieben-Leisten für Cross-Page Drag & Drop - Harmonische Schwarz-Weiß-Grau Palette */

/* Drop-Zone fix – überlagert Pagination nur während Drag */
.page-transition-zone {
  position: fixed;
  left: 0;
  right: 0;
  pointer-events: auto; /* 🔥 [DROP-ZONE-FIX] Events immer aktiv für funktionale Zonen */
  z-index: 11000; /* über der Pagination */
  transition: none; /* kein Flackern durch Transition */
  background: rgba(64, 64, 64, 0.85); /* Dunkelgrau mit Transparenz */
  color: #ffffff; /* Weißer Text für bessere Lesbarkeit */
  border: 2px dashed rgba(255, 255, 255, 0.6); /* Weiße gestrichelte Linie */
  border-radius: 0;
  min-height: 2.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.08em;
  font-weight: 500;
  margin: 0.7em 0 1.1em 0;
  opacity: 0.95;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(4px);
}

/* LEISTEN-OPTIMIERUNG - 2024-12-19: Drop-Leisten direkt am Fensterrand, über Pagination */
.page-transition-zone.top { 
  top: 0; 
  height: 60px; /* 🔥 [DROP-ZONE-FIX] Feste Höhe für konsistente Darstellung */
  margin: 0;
  border-bottom: 2px dashed rgba(255, 255, 255, 0.6);
  z-index: 12000;
  pointer-events: auto; /* 🔥 [DROP-ZONE-FIX] Events immer aktiv */
}

.page-transition-zone.bottom { 
  bottom: 0; 
  height: 60px; /* 🔥 [DROP-ZONE-FIX] Feste Höhe für konsistente Darstellung */
  margin: 0;
  border-top: 2px dashed rgba(255, 255, 255, 0.6);
  z-index: 15000 !important; /* Höchster Z-Index: garantiert Überlagerung der Pagination */
  position: fixed !important; /* Fixierte Position für stabilen Z-Index */
  pointer-events: auto; /* 🔥 [DROP-ZONE-FIX] Events immer aktiv */
}

/* Höchste Spezifität: Garantierte Überlagerung der Pagination */
body.drag-active .page-transition-zone.bottom {
  z-index: 15000 !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 60px !important; /* 🔥 [DROP-ZONE-FIX] Feste Höhe wie Top-Zone */
  display: flex !important;
  pointer-events: auto !important; /* 🔥 [DROP-ZONE-FIX] Events aktivieren während Drag */
}

/* 🔥 [DROP-ZONE-FIX] Top Zone während Drag - identische Behandlung wie Bottom */
body.drag-active .page-transition-zone.top {
  z-index: 15000 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 60px !important; /* 🔥 [DROP-ZONE-FIX] Feste Höhe für Top-Zone */
  display: flex !important;
  pointer-events: auto !important; /* 🔥 [DROP-ZONE-FIX] Events aktivieren */
}

            /* LEISTEN-OPTIMIERUNG: Drop-Zonen während Drag stabil halten */
            body.drag-active .page-transition-zone {
              /* 🔥 [DROP-ZONE-FIX] Garantierte Event-Behandlung während Drag */
              z-index: 15000 !important;
              position: fixed !important;
              pointer-events: auto !important; /* 🔥 [DROP-ZONE-FIX] Events aktivieren während Drag */
            }

            /* 🔥 [DROP-ZONE-FIX] Pagination/Footer während Drag deaktivieren */
            body.drag-active .pagination,
            body.drag-active .footer,
            body.drag-active .pagination-container {
              pointer-events: none !important; /* 🔥 [DROP-ZONE-FIX] Verhindert Überlagerung der Bottom-Zone */
            }

/* Diese Regel wird durch die höhere Spezifität unten ersetzt */

/* LEISTEN-OPTIMIERUNG: Pagination während Drag komplett ausblenden */
body.drag-active .pagination.pagination-extended {
  visibility: hidden !important;          /* belegt weiter Platz, vermeidet Reflow */
  pointer-events: none !important;        /* keine Interaktion */
  opacity: 0 !important;                  /* Zusätzliche Sicherheit */
  z-index: 500 !important;               /* Noch niedriger: garantiert unter den Drop-Zonen */
  display: none !important;               /* Komplett ausblenden - verhindert Flackern */
}

/* optionaler visueller Hover (bestehende Klasse wiederverwenden) */
.page-transition-zone.hover {
  outline: 2px dashed rgba(255, 215, 0, 0.85);
  background: rgba(255, 215, 0, 0.25);
}

/* Inhalt der Verschieben-Leisten */
.page-transition-zone .zone-content {
	width: 100%;
	text-align: center;
	padding: 0.5em 0.2em;
}

/* Drop-Hover Zustand: Neue .drop-hover Klasse für bessere Drop-Zone Erkennung */
.page-transition-zone.drop-hover {
	background: rgba(96, 96, 96, 0.9) !important; /* Helleres Grau beim Drag */
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.8) !important; /* Hellere Border */
	opacity: 1 !important;
	box-shadow: 0 6px 25px rgba(0, 0, 0, 0.25) !important;
	backdrop-filter: blur(8px) !important;
	/* Höchster Z-Index: Garantiert Überlagerung der Pagination */
	z-index: 15000 !important;
	pointer-events: auto !important; /* 🔥 [DROP-ZONE-FIX] Events aktivieren beim Hover */
}

/* [CLEANUP] Drag-over Zustand - Jetzt vereinheitlicht mit drop-hover */
.page-transition-zone.drag-over {
	background: rgba(96, 96, 96, 0.9) !important; /* Helleres Grau beim Drag */
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.8) !important; /* Hellere Border */
	opacity: 1 !important;
	box-shadow: 0 6px 25px rgba(0, 0, 0, 0.25) !important;
	backdrop-filter: blur(8px) !important;
	z-index: 15000 !important; /* Höchster Z-Index: Garantiert Überlagerung der Pagination */
	pointer-events: auto !important; /* 🔥 [DROP-ZONE-FIX] Events aktivieren beim Drag-over */
}

/* [CLEANUP] Zentrale Drop-Zonen-Effekte für Grid-Modus - Einheitliche Darstellung */
body.grid-only-mode .page-transition-zone.drop-hover,
body.grid-only-mode .page-transition-zone.drag-over {
	background: rgba(128, 128, 128, 0.95) !important; /* Hellgrau für Grid-Modus */
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.9) !important; /* Weiße Border */
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important;
	backdrop-filter: blur(10px) !important;
	z-index: 15000 !important; /* Höchster Z-Index: Garantiert Überlagerung der Pagination */
	pointer-events: auto !important; /* 🔥 [DROP-ZONE-FIX] Events aktivieren im Grid-Modus */
}

/* Mobile-spezifische Drop-Zone Hover-Effekte für bessere Sichtbarkeit */
@media (max-width: 768px) {
	.page-transition-zone.drop-hover {
		background: rgba(128, 128, 128, 0.98) !important; /* Sehr sichtbarer Hintergrund auf Mobile */
		color: #ffffff !important;
		border-color: rgba(255, 255, 255, 1) !important; /* Volle weiße Border für Mobile */
		opacity: 1 !important;
		box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
		backdrop-filter: blur(12px) !important;
		z-index: 15000 !important;
		/* Mobile-spezifische Verbesserungen */
		transform: scale(1.02) !important; /* Leichte Vergrößerung für Mobile */
		transition: all 0.15s ease !important; /* Schnellere Transition für Mobile */
		pointer-events: auto !important; /* 🔥 [DROP-ZONE-FIX] Events aktivieren auf Mobile */
	}
	
	body.grid-only-mode .page-transition-zone.drop-hover {
		background: rgba(160, 160, 160, 0.98) !important; /* Noch heller für Grid-Modus auf Mobile */
		color: #ffffff !important;
		border-color: rgba(255, 255, 255, 1) !important;
		box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5) !important;
		backdrop-filter: blur(15px) !important;
		z-index: 15000 !important;
		transform: scale(1.02) !important;
		transition: all 0.15s ease !important;
		pointer-events: auto !important; /* 🔥 [DROP-ZONE-FIX] Events aktivieren auf Mobile Grid-Modus */
	}
}

/* Dark Mode Anpassungen für Verschieben-Leisten */
[data-theme="dark"] .page-transition-zone {
	background: rgba(32, 32, 32, 0.9); /* Sehr dunkles Grau */
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.5); /* Weiße Border */
}

/* [CLEANUP] Dark Theme Drop-Zonen - Vereinheitlicht */
[data-theme="dark"] .page-transition-zone.drop-hover,
[data-theme="dark"] .page-transition-zone.drag-over {
	background: rgba(64, 64, 64, 0.95) !important; /* Helleres Grau im Dark Mode */
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.7) !important;
	z-index: 15000 !important; /* Höchster Z-Index: Garantiert Überlagerung der Pagination */
	pointer-events: auto !important; /* 🔥 [DROP-ZONE-FIX] Events aktivieren im Dark Mode */
}

[data-theme="dark"] body.grid-only-mode .page-transition-zone {
	background: rgba(24, 24, 24, 0.95); /* Sehr dunkles Grau für Grid-Modus */
}

/* [CLEANUP] Dark Theme Grid-Modus Drop-Zonen - Vereinheitlicht */
[data-theme="dark"] body.grid-only-mode .page-transition-zone.drop-hover,
[data-theme="dark"] body.grid-only-mode .page-transition-zone.drag-over {
	background: rgba(48, 48, 48, 0.98) !important; /* Helleres Grau für Grid-Modus im Dark Mode */
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.8) !important;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
	z-index: 15000 !important; /* Höchster Z-Index: Garantiert Überlagerung der Pagination */
	pointer-events: auto !important; /* 🔥 [DROP-ZONE-FIX] Events aktivieren im Dark Mode Grid-Modus */
}

/* Dark Mode Mobile-spezifische Drop-Zone Hover-Effekte */
@media (max-width: 768px) {
	[data-theme="dark"] .page-transition-zone.drop-hover {
		background: rgba(80, 80, 80, 0.98) !important; /* Helleres Grau für Dark Mode auf Mobile */
		color: #ffffff !important;
		border-color: rgba(255, 255, 255, 1) !important;
		box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6) !important;
		backdrop-filter: blur(15px) !important;
		z-index: 15000 !important;
		transform: scale(1.02) !important;
		transition: all 0.15s ease !important;
		pointer-events: auto !important; /* 🔥 [DROP-ZONE-FIX] Events aktivieren auf Dark Mode Mobile */
	}
	
	[data-theme="dark"] body.grid-only-mode .page-transition-zone.drop-hover {
		background: rgba(96, 96, 96, 0.98) !important; /* Noch heller für Grid-Modus im Dark Mode auf Mobile */
		color: #ffffff !important;
		border-color: rgba(255, 255, 255, 1) !important;
		box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7) !important;
		backdrop-filter: blur(18px) !important;
		z-index: 15000 !important;
		transform: scale(1.02) !important;
		transition: all 0.15s ease !important;
		pointer-events: auto !important; /* 🔥 [DROP-ZONE-FIX] Events aktivieren auf Dark Mode Mobile Grid-Modus */
	}
}
[data-theme="dark"] .page-link {
	background: var(--pagination-inactive-bg);
	color: var(--pagination-inactive-color);
	border-color: var(--pagination-inactive-border);
}
[data-theme="dark"] .page-item.active .page-link {
	background: var(--pagination-active-bg);
	color: var(--pagination-active-color);
	border-color: var(--pagination-active-bg);
}
[data-theme="dark"] .page-link:hover, [data-theme="dark"] .page-link:focus {
	background: var(--pagination-hover-bg);
	color: var(--pagination-inactive-color);
	border-color: var(--pagination-inactive-border);
}
[data-theme="dark"] .page-link.pagination-nav-text {
	color: var(--pagination-nav-color) !important;
}
[data-theme="dark"] .page-link.pagination-nav-text:hover, [data-theme="dark"] .page-link.pagination-nav-text:focus {
	color: var(--pagination-nav-hover) !important;
}
[data-theme="dark"] .cross-page-modal .modal-content {
	background: #23272b;
	color: #fff;
	box-shadow: 0 8px 32px rgba(0,0,0,0.23);
}
[data-theme="dark"] .cross-page-modal .page-chip {
	background: #23272b;
	color: #fff;
	border: 2px solid #444;
}
[data-theme="dark"] .cross-page-modal .page-chip.active {
	background: var(--primary-green);
	color: #fff;
	border-color: var(--primary-green);
}
[data-theme="dark"] .cross-page-modal .page-chip:hover:not(.active):not([aria-disabled="true"]) {
	background: #263238;
	color: #fff;
	border-color: #4db6ac;
}

[data-theme="dark"] .page-transition-zone {
	background: #263238;
	color: #fff;
	border-color: #4db6ac;
}
[data-theme="dark"] .page-transition-zone.drop-hover {
	background: #0097a7;
	color: #fff;
	border-color: #00bcd4;
	pointer-events: auto !important; /* 🔥 [DROP-ZONE-FIX] Events aktivieren im Dark Mode */
}

[data-theme="dark"] .page-transition-zone.drag-over {
	background: #0097a7;
	color: #fff;
	border-color: #00bcd4;
	pointer-events: auto !important; /* 🔥 [DROP-ZONE-FIX] Events aktivieren im Dark Mode */
}
@keyframes spin {
to {
transform:rotate(360deg);
}
}
@keyframes pulse {
0% {
opacity:1;
}
50% {
opacity:0.5;
}
100% {
opacity:1;
}
}
.hide-mobile {
	display: none;
}
.fade {
	opacity: 0;
	transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-theme="dark"] {
.theme-btn {
background:transparent;
color:#fff;
border: none;
}
.logout-btn, #clearSelectionBtn {
color: #fff;
}
.file-size-overlay {
background:rgba(0,0,0,0.44);
}
.storage-info-box {
box-shadow:0 4px 20px rgba(0, 0, 0, 0.3);
}
.storage-info-box:hover {
box-shadow:0 6px 25px rgba(0, 0, 0, 0.4);
}
.storage-info-box.collapsed:hover {
background:rgba(255, 255, 255, 0.05);
}
.storage-header:hover {
background:linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
}
.storage-info-box.collapsed .storage-header {
background:transparent;
}
.storage-info-box.collapsed .storage-header:hover {
background:linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
}
.storage-overview {
background:linear-gradient(135deg, rgba(var(--primary-green-rgb), 0.08) 0%, rgba(var(--primary-green-rgb), 0.04) 100%);
border-color:rgba(var(--primary-green-rgb), 0.15);
}
.storage-progress-bar {
background:rgba(255, 255, 255, 0.1);
}
.storage-detail-card {
background:#343a40;
border-color:#495057;
}
.storage-detail-card:hover {
border-color:rgba(var(--primary-green-rgb), 0.3);
}
.gallery-info-section {
background:linear-gradient(135deg, rgba(156, 39, 176, 0.08) 0%, rgba(156, 39, 176, 0.04) 100%);
border-color:rgba(156, 39, 176, 0.15);
}
.stat-item {
background:#343a40;
border-color:#495057;
}
.stat-item:hover {
border-color:rgba(156, 39, 176, 0.3);
}
.collapsed-stat {
background:rgba(255, 255, 255, 0.08);
border-color:rgba(255, 255, 255, 0.15);
}
.collapsed-stat:hover {
background:rgba(255, 255, 255, 0.12);
}
#storageToggleBtn {
background:rgba(255, 255, 255, 0.1);
border-color:rgba(255, 255, 255, 0.2);
}
#storageToggleBtn:hover {
background:rgba(255, 255, 255, 0.15);
border-color:rgba(255, 255, 255, 0.3);
}
.storage-image-count {
background:rgba(255, 255, 255, 0.1);
border-color:rgba(255, 255, 255, 0.2);
}
.storage-image-count:hover {
background:rgba(255, 255, 255, 0.15);
border-color:rgba(255, 255, 255, 0.3);
}
#dropZone {
background:rgba(255, 255, 255, 0.08);
border:2px dashed rgba(255, 255, 255, 0.5);
color:#fff;
}
#dropZone p {
color:#fff;
}
.clear-all-link a {
color:var(--text-color);
}
.clear-all-link a:hover {
color:#ff6b6b;
}
.preview-container p.text-muted {
background:rgba(var(--accent-color-rgb), 0.08);
border-color:rgba(var(--accent-color-rgb), 0.3);
color:var(--text-muted);
}
.preview-card {
background:var(--card-bg);
border-color:var(--border-color);
box-shadow:0 4px 20px rgba(0, 0, 0, 0.3);
}
.preview-card:hover {
box-shadow:0 8px 30px rgba(0, 0, 0, 0.4);
border-color:var(--accent-color);
}
.preview-card .remove-btn {
background:rgba(0, 0, 0, 0.8);
}
.preview-card .remove-btn:hover {
background:#dc3545;
box-shadow:0 4px 12px rgba(220, 53, 69, 0.5);
}
.preview-card.loading {
background:linear-gradient(90deg, var(--card-bg) 25%, rgba(var(--accent-color-rgb), 0.2) 50%, var(--card-bg) 75%);
}
.preview-card.error {
background:rgba(220, 53, 69, 0.1);
border-color:#dc3545;
}
.upload-progress-bar {
background:rgba(255, 255, 255, 0.1);
box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.3);
}
.upload-progress-fill::after {
background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}
.btn-primary {
color: #000;
}
.storage-hint {
color:rgba(255, 255, 255, 0.7);
}
.storage-image-count {
color:#fff;
}
.page-link {
background:var(--pagination-inactive-bg);
color:var(--pagination-inactive-color);
border-color:var(--pagination-inactive-border);
}
.page-item.active .page-link {
background:var(--pagination-active-bg);
color:var(--pagination-active-color);
border-color:var(--pagination-active-bg);
}
.page-link:hover, .page-link:focus {
background:var(--pagination-hover-bg);
color:var(--pagination-inactive-color);
}
.page-link.pagination-nav-text {
color: var(--pagination-nav-color);
}
.page-link.pagination-nav-text:hover, .page-link.pagination-nav-text:focus {
color: var(--pagination-nav-hover);
}
#scrollTopBtn {
background:rgba(255, 255, 255, 0.2);
color:#fff;
}
#scrollTopBtn:hover {
background:rgba(255, 255, 255, 0.3);
}
}


.select-all-page-link {
	width: 100%;
	text-align: center;
	margin: 1.2rem 0 1.2rem 0;
	font-weight: 500;
	scroll-margin-top: 80px;
}
.admin-footer {
	background: var(--card-bg);
	color: var(--text-color);
	padding: 1rem 1rem 1.2rem 1rem;
	margin-top: 3rem;
	border-top: 1px solid var(--border-color);
	border-radius: 0.7em 0.7em 0 0;
	font-size: 1rem;
	box-shadow: 0 2px 12px rgba(0,0,0,0.06);
	text-align: center;
}
.footer-content {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-wrap: nowrap;
	gap: 2rem;
	justify-content: center;
	align-items: center;
}

.footer-left {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
}


.footer-links {
	display: flex;
	gap: 1.2rem;
	align-items: center;
}

.footer-note {
	font-size: 0.85em;
	color: #aaa;
	white-space: nowrap;
}
.footer-section {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 180px;
}
.footer-link {
	color: var(--text-color);
	text-decoration: underline;
	transition: color 0.18s;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: 0.3em;
	padding: 0.2em 0.5em;
}
.footer-link:hover {
	color: var(--accent-color);
	text-decoration: none;
	background: none;
}
[data-theme="dark"] .footer-link:hover {
	color: var(--accent-color);
	text-decoration: none;
	background: none;
}


.storage-item {
	display: flex;
	align-items: center;
	gap: 0.7em;
	font-size: 1.08rem;
	margin-bottom: 0.2em;
}
.storage-item i {
	font-size: 1.5em;
	color: #444;
	min-width: 1.5em;
	text-align: center;
}
.storage-details {
	display: flex;
	flex-direction: column;
	gap: 0.1em;
}
.storage-label {
	font-size: 0.98em;
	color: #888;
	font-weight: 400;
}
.storage-value {
	font-size: 1.08em;
	color: #222;
	font-weight: 600;
}
.center-buttons {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.center-buttons.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.center-buttons button {
	opacity: 1;
	color: inherit;
	height: auto;
	pointer-events: auto;
	background: inherit;
	display: flex;
}
.meta-edit {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	align-items: stretch;
	width: 100%;
	position: relative;
}
.meta-edit-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	width: 100%;
}
.file-size-overlay {
	font-size: 0.75em;
	color: #888;
	background: none;
	margin-left: 5px;
	text-align: left;
	pointer-events: none;
}

.meta-status.success {
	color: var(--primary-green);
	font-weight: 600;
}
.admin-image.selected .gallery-checkbox, .admin-image.selected .delete-btn {
	pointer-events: auto;
	z-index: 21;
}
.admin-image.selected .meta-edit {
	pointer-events: none;
	opacity: 0.6;
	filter: grayscale(0.3);
	transition: opacity 0.2s ease, filter 0.2s ease;
}
.admin-image.selected .meta-edit input[type="text"], .admin-image.selected .meta-edit button {
	pointer-events: none;
	cursor: not-allowed;
}
@media (max-width:768px) {
.admin-image.selected .meta-edit {
	opacity: 0.5;
	filter: grayscale(0.4);
}
.admin-image.selected .meta-edit input[type="text"] {
	font-size: 0.9em;
}
}
@media (max-width:480px) {
.admin-image.selected .meta-edit {
	opacity: 1;
	filter: none;
}
.admin-image.selected .meta-edit input[type="text"] {
	font-size: 0.95em;
	padding: 0.4em 0.6em;
	min-height: 2.2em;
}
.admin-image.selected .meta-edit button {
	font-size: 0.9em;
	padding: 0.3em 0.8em;
	min-height: 2.2em;
}
}
.admin-image.selected::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(192,57,43,0.35);
	border-radius: 0.9em;
	z-index: 20;
	pointer-events: none;
}
.admin-image .meta-edit {
	z-index: 25;
}
.sortable-fallback {
	opacity: 0.8;
	transform: rotate(5deg);
	z-index: 1000;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
	pointer-events: none;
}
/* Alte sorting-feedback Styles entfernt - jetzt unified-notification */
.grid-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--card-bg);
	border: 1px solid var(--accent-color);
	color: var(--accent-color);
	cursor: pointer;
	transition: var(--transition);
	margin-right: 0.3rem;
	font-size: 1rem;
}
.grid-btn:hover, .grid-btn:focus {
	background: var(--accent-color);
	color: var(--button-hover-invert);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.grid-btn.active {
	background: var(--success-color);
	border-color: var(--success-color);
	color: white;
}
.grid-btn.active:hover, .grid-btn.active:focus {
	background: var(--primary-green-dark);
	border-color: var(--primary-green-dark);
	color: white;
}
[data-theme="dark"] .grid-btn {
	background: var(--card-bg);
	border-color: var(--accent-color);
	color: var(--accent-color);
}
[data-theme="dark"] .grid-btn:hover, [data-theme="dark"] .grid-btn:focus {
	background: var(--accent-color);
	color: var(--button-hover-invert);
}
[data-theme="dark"] .grid-btn.active {
	background: var(--success-color);
	border-color: var(--success-color);
	color: white;
}
[data-theme="dark"] .grid-btn.active:hover, [data-theme="dark"] .grid-btn.active:focus {
	background: var(--primary-green-dark);
	border-color: var(--primary-green-dark);
	color: white;
}
body.grid-only-mode .upload-container, 
body.grid-only-mode .storage-info-box, 
body.grid-only-mode .admin-footer, 
body.grid-only-mode .select-all-page-link, 
body.grid-only-mode .preview-container, 
body.grid-only-mode .preview-grid, 
body.grid-only-mode .center-buttons, 
body.grid-only-mode .header-row.center-row, 
body.grid-only-mode #scrollTopBtn {
	display: none;
}
body.grid-only-mode .gallery-container {
	margin-top: 0;
	padding-top: 0;
}
body.grid-only-mode .admin-gallery {
	margin: 0 0 60px 0;
	padding: 0rem 1rem 1rem 1rem;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 0.5rem;
	touch-action: pan-y;
}
@media (max-width:768px) {
body.grid-only-mode .admin-gallery {
	padding: 0rem 0.5rem 0.5rem 0.5rem;
	grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	gap: 0.3rem;
}
}
@media (max-width:480px) {
body.grid-only-mode .admin-gallery {
	margin-bottom: 70px;
	padding: 0rem 0.3rem 0.3rem 0.3rem;
	grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	gap: 0.3rem;
}
}
body.grid-only-mode .admin-image .meta-edit {
	display: none;
}
body.grid-only-mode .admin-image .gallery-checkbox, 
body.grid-only-mode .admin-image .gallery-checkbox-label {
	display: none;
}
body.grid-only-mode .admin-image .delete-btn {
	display: none;
}
body.grid-only-mode .admin-image.selected::after {
	display: none;
}
body.grid-only-mode .admin-image {
	cursor: grab;
	transition: transform 0.2s ease;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
body.grid-only-mode .admin-image:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
body.grid-only-mode .admin-image:active {
	cursor: grabbing;
}


/* =============================
   Gemeinsame Basis-Klassen für Grid-Modus UI-Elemente
   ============================= */
.grid-mode-ui-container {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 9999;
	color: #222;
	/* Border entfernt - wird von .page-transition-zone übernommen */
	border-radius: 0;
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.08em;
	font-weight: 500;
	opacity: 0.93;
	transition: background 0.18s, color 0.18s;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.grid-mode-ui-container .zone-content {
	width: 100%;
	text-align: center;
	padding: 0.5em 0.2em;
}

/* =============================
   Grid-Modus: Pagination-Anpassungen
   ============================= */
body.grid-only-mode .pagination-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9998;
	background: rgba(255, 255, 255, 0.85); /* Hellere Transparenz */
	color: #222;
	margin: 2.2em auto 0 auto;
	/* Border entfernt - wird von .page-transition-zone übernommen */
	border: 2px dashed rgba(0, 0, 0, 0.2);
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.08em;
	font-weight: 500;
	opacity: 0.95;
	transition: background 0.18s, color 0.18s;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(4px);
}



body.grid-only-mode .pagination {
	margin: 0; /* 🔥 [PAGINATION-CENTER-FIX] Margin entfernt für perfekte Zentrierung im Grid-Modus */
	gap: 0.3rem;
}

body.grid-only-mode .page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.2em;
	min-height: 2.2em;
	width: 2.2em;
	height: 2.2em;
	padding: 0;
	border-radius: 50%;
	background: var(--pagination-inactive-bg);
	color: var(--pagination-inactive-color);
	border: 2px solid var(--pagination-inactive-border);
	font-weight: 500;
	font-size: 1.08em;
	text-align: center;
	text-decoration: none;
	transition: background 0.18s, color 0.18s, border 0.18s;
	cursor: pointer;
	margin-top: 6px;
}

body.grid-only-mode .page-item.active .page-link {
	background: var(--pagination-active-bg);
	color: var(--pagination-active-color);
	border-color: var(--pagination-active-bg);
}

body.grid-only-mode .page-link:hover,
body.grid-only-mode .page-link:focus {
	background: var(--pagination-hover-bg);
	color: var(--pagination-inactive-color);
	border-color: var(--pagination-inactive-border);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Dark Mode Anpassungen für Grid-Modus UI-Elemente */
[data-theme="dark"] .grid-mode-ui-container,
[data-theme="dark"] body.grid-only-mode .pagination-nav {
	background: var(--card-bg);
	color: #fff;
	border-color: #4db6ac;
}



/* Dark Mode Border-Regel entfernt - wird von .page-transition-zone übernommen */

[data-theme="dark"] body.grid-only-mode .pagination-nav {
    border: 2px dashed rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] body.grid-only-mode .page-link {
	background: var(--pagination-inactive-bg);
	color: var(--pagination-inactive-color);
	border-color: var(--pagination-inactive-border);
}

[data-theme="dark"] body.grid-only-mode .page-item.active .page-link {
	background: var(--pagination-active-bg);
	color: var(--pagination-active-color);
	border-color: var(--pagination-active-bg);
}

[data-theme="dark"] body.grid-only-mode .page-link:hover,
[data-theme="dark"] body.grid-only-mode .page-link:focus {
	background: var(--pagination-hover-bg);
	color: var(--pagination-inactive-color);
	border-color: var(--pagination-inactive-border);
}

/* Responsive Anpassungen für Grid-Modus Pagination */
@media (max-width: 768px) {
	body.grid-only-mode .page-link {
		min-width: 2em;
		min-height: 2em;
		width: 2em;
		height: 2em;
		font-size: 1em;
	}
	
	/* Footer responsive für Tablet */
	.footer-content {
		flex-wrap: wrap;
		gap: 1rem;
		justify-content: center;
		align-items: center;
	}
	
	.footer-left {
		white-space: normal;
	}
	
	.footer-note {
		white-space: normal;
	}
}

@media (max-width: 480px) {
	body.grid-only-mode .page-link {
		min-width: 1.8em;
		min-height: 1.8em;
		width: 1.8em;
		height: 1.8em;
		font-size: 0.9em;
	}
	
	/* Footer responsive für Mobile */
	.footer-content {
		flex-direction: column;
		gap: 0.8rem;
		align-items: center;
	}
	
	.footer-left {
		white-space: normal;
		flex-direction: column;
		gap: 0.3rem;
	}
	
	.footer-links {
		gap: 1rem;
	}
	
	.footer-note {
		white-space: normal;
	}
}


body.grid-only-mode .sortable-chosen {
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

body.grid-only-mode .sortable-drag {
	transform: rotate(5deg);
	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
	z-index: 1001;
}


/* Grid-Only-Mode: Keine spezielle Positionierung mehr - alle Benachrichtigungen sind einheitlich zentriert */
.content-link, a:not(.btn):not(.footer-link):not(.page-link):not(.logout-btn):not(.theme-btn):not(.grid-btn) {
	color: var(--accent-color);
	text-decoration: none;
	transition: color 0.18s;
}
.content-link:hover, a:not(.btn):not(.footer-link):not(.page-link):not(.logout-btn):not(.theme-btn):not(.grid-btn):hover {
	color: var(--delete-color);
	text-decoration: underline;
}
.select-all-page-link {
	width: 100%;
	text-align: center;
	margin: 1.2rem 0 1.2rem 0;
	font-weight: 500;
	scroll-margin-top: 80px;
}
.select-all-page-link:hover {
	color: var(--text-muted);
	text-decoration: none;
}
a[style*="text-decoration:underline"]:hover {
	text-decoration: none;
}
.upload-summary-content {
	text-align: left;
	margin: 1.5rem 0;
}
.upload-success-section, .upload-skipped-section {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem;
	border-radius: 0.5rem;
	margin-bottom: 1rem;
}
.upload-success-section {
	background: rgba(39, 174, 96, 0.1);
	border: 1px solid rgba(39, 174, 96, 0.2);
}
.upload-skipped-section {
	background: rgba(255, 193, 7, 0.1);
	border: 1px solid rgba(255, 193, 7, 0.2);
}
.upload-icon {
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
}
.upload-icon.success {
	background: #27AE60;
	color: white;
}
.upload-icon.warning {
	background: #FFC107;
	color: #333;
}
.upload-text {
	flex: 1;
	font-size: 0.95rem;
	line-height: 1.4;
}
.upload-text strong {
	color: inherit;
	font-weight: 700;
	font-size: 1.08em;
	background: none;
	padding: 0 0.1em;
}
[data-theme="dark"] .upload-text strong {
	color: inherit;
	background: none;
}
.skipped-reason {
	font-size: 0.85rem;
	color: #7f8c8d;
	margin-top: 0.25rem;
}
.skipped-files {
	margin-top: 1rem;
	max-height: 150px;
	overflow-y: auto;
	border-radius: 0.25rem;
	background: rgba(255, 255, 255, 0.5);
	padding: 0.5rem;
}
.skipped-file {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem;
	border-radius: 0.25rem;
	background: rgba(255, 255, 255, 0.7);
	margin-bottom: 0.25rem;
	font-size: 0.85rem;
	color: #555;
}
.skipped-file:last-child {
	margin-bottom: 0;
}
.skipped-file i {
	color: #95a5a6;
	font-size: 0.8rem;
}
[data-theme="dark"] .upload-success-section {
	background: rgba(39, 174, 96, 0.15);
	border-color: rgba(39, 174, 96, 0.3);
}
[data-theme="dark"] .upload-skipped-section {
	background: rgba(255, 193, 7, 0.15);
	border-color: rgba(255, 193, 7, 0.3);
}
[data-theme="dark"] .upload-text strong {
	color: #ecf0f1;
}
[data-theme="dark"] .skipped-reason {
	color: #bdc3c7;
}
[data-theme="dark"] .skipped-files {
	background: rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .skipped-file {
	background: rgba(255, 255, 255, 0.1);
	color: #ecf0f1;
}
[data-theme="dark"] .skipped-file i {
	color: #95a5a6;
}
.meta-info-icon {
	font-size: 1.08em;
	color: #888;
	margin-left: 0.5rem;
	cursor: pointer;
	background: none;
	border: none;
	outline: none;
	padding: 0 0.2em 0.4em 0.2em;
	transition: color 0.18s;
	z-index: 3;
	display: flex;
	align-items: center;
	height: 1.7em;
	position: relative;
}
@media (min-width:769px) {
.meta-info-icon:hover {
	color: var(--primary-green);
}
.meta-info-icon[data-tooltip-for="alt"]:hover + #tooltip-alt, .meta-info-icon[data-tooltip-for="title"]:hover + #tooltip-title {
	display: none;
}
}
@media (max-width:768px) {
.meta-info-icon {
	font-size: 1.4em;
	height: auto;
	padding: 0 0.32em 0 0.32em;
	color: #a2a2a2;
}
.meta-info-icon:hover {
	color: var(--primary-green);
}
}
@media (max-width:600px) {
.meta-info-icon {
	font-size: 1.55em;
	height: auto;
	padding: 0 0.38em 0 0.18em;
	color: #a2a2a2;
}
}
.meta-info-icon:focus {
	color: #4a6fa5;
}

.duplicate-dialog .dialog-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--border-color);
}
.duplicate-dialog .dialog-icon {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	flex-shrink: 0;
}
.duplicate-dialog .dialog-icon.warning {
	background: rgba(255, 193, 7, 0.1);
	color: #ffc107;
}
.duplicate-dialog .dialog-header h3 {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--text-color);
}
.duplicate-dialog .dialog-body {
	margin-bottom: 1.5rem;
}
.duplicate-dialog .dialog-description {
	margin: 0 0 1.5rem 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--text-color);
}
.duplicate-files-container {
	max-height: 300px;
	overflow-y: auto;
}
.duplicate-files-summary {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	background: rgba(var(--accent-color-rgb), 0.05);
	border-radius: 0.75rem;
	margin-bottom: 1rem;
}
.duplicate-files-summary .summary-icon {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: rgba(var(--accent-color-rgb), 0.1);
	color: var(--accent-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
}
.duplicate-files-summary .summary-text {
	font-size: 1rem;
	color: var(--text-color);
}
.duplicate-files-preview {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.duplicate-file-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem;
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: 0.5rem;
	transition: all 0.2s ease;
}
.duplicate-file-item:hover {
	background: rgba(var(--accent-color-rgb), 0.05);
	border-color: var(--accent-color);
}
.duplicate-file-item i {
	color: var(--accent-color);
	font-size: 1rem;
	width: 1.2rem;
	text-align: center;
}
.duplicate-file-item .file-name {
	font-size: 0.9rem;
	color: var(--text-color);
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
	word-break: break-all;
}
.duplicate-file-more {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem;
	background: rgba(var(--text-muted-rgb), 0.05);
	border-radius: 0.5rem;
	font-size: 0.9rem;
	color: var(--text-muted);
	font-style: italic;
}
.duplicate-file-more i {
	font-size: 0.8rem;
}
[data-theme="dark"] .duplicate-dialog .dialog-icon.warning {
	background: rgba(255, 193, 7, 0.15);
	color: #ffc107;
}
[data-theme="dark"] .duplicate-files-summary {
	background: rgba(var(--accent-color-rgb), 0.1);
}
[data-theme="dark"] .duplicate-file-item {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .duplicate-file-item:hover {
	background: rgba(var(--accent-color-rgb), 0.1);
	border-color: var(--accent-color);
}
[data-theme="dark"] .duplicate-file-more {
	background: rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.6);
}
@media (max-width:768px) {
.duplicate-dialog .dialog-header {
	flex-direction: column;
	text-align: center;
	gap: 0.75rem;
}
.duplicate-dialog .dialog-icon {
	width: 2.5rem;
	height: 2.5rem;
	font-size: 1.2rem;
}
.duplicate-dialog .dialog-header h3 {
	font-size: 1.2rem;
}
.duplicate-files-summary {
	flex-direction: column;
	text-align: center;
	gap: 0.75rem;
}
.duplicate-file-item {
	padding: 0.5rem;
}
.duplicate-file-item .file-name {
	font-size: 0.8rem;
}
}
/* Entfernt - doppelte Definition, siehe oben */
/* Responsive Anpassungen für Verschieben-Leisten */
@media (max-width:600px) {
	.page-transition-zone {
		font-size: 13px;
		min-height: 48px;
	}
	
	.page-transition-zone .zone-content {
		padding: 0 20px;
	}
}

/* Erweiterte Zone-Content Styles für Grid-Modus */
body.grid-only-mode .page-transition-zone .zone-content {
	padding: 0 20px;
	max-width: 100vw;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.cross-page-modal .page-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2em;
	height: 2.2em;
	min-width: 2.2em;
	min-height: 2.2em;
	max-width: 3em;
	max-height: 3em;
	aspect-ratio: 1/1;
	border-radius: 50%;
	background: #fff;
	color: #181818;
	border: 2px solid #181818;
	font-size: 1.1em;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.18s, color 0.18s, border 0.18s;
	box-shadow: 0 2px 10px rgba(0,0,0,0.10);
	outline: none;
	user-select: none;
	margin: 0 0.3em;
	text-align: center;
	line-height: 2.2em;
}
@media (max-width:600px) {
.cross-page-modal .page-chip {
	width: 1.8em;
	height: 1.8em;
	min-width: 1.8em;
	min-height: 1.8em;
	font-size: 1em;
	margin: 0 0.18em;
}
}
.cross-page-modal .page-chip.active, .cross-page-modal .page-chip[aria-disabled="true"] {
	background: #181818;
	color: #fff;
	border: 2px solid #181818;
	cursor: default;
	pointer-events: none;
	box-shadow: 0 2px 10px rgba(0,0,0,0.10);
}
.cross-page-modal .page-chip:hover:not(.active):not([aria-disabled="true"]) {
	background: #f1f1f1;
	color: #181818;
	border: 2px solid #181818;
}
.cross-page-modal .modal-content {
	background: #fff;
	padding: 36px 28px 28px 28px;
	border-radius: 18px;
	box-shadow: 0 10px 40px rgba(0,0,0,0.18);
	max-width: 420px;
	width: 100%;
	min-width: 0;
	text-align: center;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #181818;
}
@media (max-width:900px) {
.cross-page-modal .modal-content {
	margin: 25px;
	max-width: 98vw;
	padding-left: 32px;
	padding-right: 32px;
}
}
@media (max-width:600px) {
.cross-page-modal .modal-content {
	margin: 25px;
	padding: 18px 8px 18px 8px;
	max-width: 98vw;
}
}
.cross-page-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 14000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.cross-page-modal.show {
	opacity: 1;
	visibility: visible;
}

.modal-buttons {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 1.5rem;
}
.preview-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 1.3rem;
	margin-top: 1.4rem;
}
.preview-card {
	position: relative;
	background: #fff;
	border-radius: 9px;
	box-shadow: 0 1px 6px rgba(0,0,0,0.07);
	transition: box-shadow 0.13s, transform 0.13s;
	overflow: hidden;
	aspect-ratio: 1/1;
	width: 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: stretch;
}
.preview-card.clear-all-card {
	justify-content: center;
	align-items: center;
	cursor: pointer;
	border: 2px dashed #bbb;
	background: #fafbfc;
	color: #222;
	box-shadow: none;
	min-height: 0;
	transition: border-color 0.18s, background 0.18s;
	order: -1;
}
.preview-card.clear-all-card:hover {
	border-color: #c0392b;
	background: #fff0f0;
}
.clear-all-card .clear-all-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	text-align: center;
	gap: 0.5em;
}
.clear-all-card .clear-all-link a {
	color: #c0392b;
	font-weight: 500;
	font-size: 1em;
	text-decoration: none;
	background: none;
	border: none;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3em;
	transition: color 0.18s;
}
.clear-all-card .clear-all-link a:hover {
	color: #e74c3c;
}
.clear-all-card .clear-all-link i {
	font-size: 2.1em;
	margin-bottom: 0.1em;
	color: #c0392b;
	opacity: 0.85;
}
.preview-card:hover {
	box-shadow: 0 1px 6px rgba(0,0,0,0.07);
}
.preview-card img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	border-radius: 9px;
	background: #f8f8f8;
	display: block;
	flex: 1 1 auto;
	transition: transform 0.18s;
}
.preview-card:hover img {
	transform: scale(1.045);
}
.preview-card .file-size {
	position: absolute;
	left: 0.6em;
	bottom: 0.6em;
	background: rgba(34,34,34,0.82);
	color: #fff;
	font-size: 0.72em;
	font-weight: 400;
	padding: 0.10em 0.6em;
	border-radius: 0.4em;
	box-shadow: none;
	letter-spacing: 0.01em;
	pointer-events: none;
	z-index: 2;
	min-width: 0;
	text-align: left;
	line-height: 1.2;
	opacity: 0.93;
}
.preview-card .remove-btn {
	position: absolute;
	top: 0.25em;
	right: 0.25em;
	width: 0.95em;
	height: 0.95em;
	border-radius: 50%;
	background: #c0392b;
	color: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.05em;
	box-shadow: none;
	transition: background 0.15s, color 0.15s, transform 0.15s;
	z-index: 3;
	opacity: 0.93;
}
.preview-card .remove-btn:hover {
	background: #fff;
	color: #c0392b;
	transform: scale(1.13);
	opacity: 1;
	border: 1.5px solid #c0392b;
}
@media (max-width:700px) {
.preview-grid {
	grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	gap: 0.7rem;
}
.preview-card, .preview-card img {
	border-radius: 6px;
}
.preview-card .file-size {
	font-size: 0.62em;
	left: 0.3em;
	bottom: 0.3em;
	padding: 0.07em 0.4em;
	border-radius: 0.25em;
}
.preview-card .remove-btn {
	width: 1em;
	height: 1em;
	font-size: 0.9em;
	top: 0.4em;
	right: 0.4em;
}
}
[data-theme="dark"] .preview-card.clear-all-card {
	background: #3c4043;
	color: #fff;
}
[data-theme="dark"] .preview-card.clear-all-card:hover {
	background: #2d3237;
	border-color: #c0392b;
}
[data-theme="dark"] .clear-all-card .clear-all-link a, [data-theme="dark"] .clear-all-card .clear-all-link i, [data-theme="dark"] .preview-card.clear-all-card a, [data-theme="dark"] .preview-card.clear-all-card i {
	color: #fff;
	fill: #fff;
	opacity: 1;
}
[data-theme="dark"] .preview-card .remove-btn:hover, [data-theme="dark"] .preview-card .remove-btn:focus {
	color: #fff;
	background: #c0392b;
	border: 1.5px solid #fff;
}
.preview-card.clear-all-card .clear-all-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	text-align: center;
	gap: 0.5em;
	text-decoration: none;
}
.preview-card.clear-all-card .clear-all-btn span {
	text-decoration: underline;
	color: inherit;
}
.preview-card.clear-all-card .clear-all-btn i {
	display: block;
	margin: 0.3em auto 0 auto;
	font-size: 1.5em;
	color: inherit;
	opacity: 0.95;
	text-decoration: none;
}
.preview-card.clear-all-card .clear-all-btn:hover span {
	text-decoration: none;
}
.preview-card img, .preview-card:hover img {
	transform: none;
}
.preview-container > .text-muted {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 5em;
	font-size: 1.08em;
	color: #888;
	width: 100%;
	text-align: center;
	margin: 0;
	padding: 1.5em 0;
}
[data-theme="dark"] .cross-page-modal .page-chip.active {
	background: #fff;
	color: #111;
	border-color: #fff;
	box-shadow: 0 2px 8px rgba(255,255,255,0.10);
}
[data-theme="dark"] .cross-page-modal .page-chip:hover:not(.active):not([aria-disabled="true"]) {
	border-color: #fff;
	color: #fff;
	background: #263238;
	box-shadow: 0 2px 8px rgba(255,255,255,0.10);
}

.btn-outline-primary {
	background: transparent;
	color: var(--btn-primary-bg);
	border: var(--btn-border-width) solid var(--btn-primary-bg);
	box-shadow: var(--btn-shadow-normal);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
	background: var(--btn-primary-bg);
	color: var(--btn-primary-color);
	border-color: var(--btn-primary-bg);
	box-shadow: var(--btn-shadow-hover);
}
.btn-outline-success {
	background: transparent;
	color: var(--btn-success-bg);
	border: var(--btn-border-width) solid var(--btn-success-bg);
	box-shadow: var(--btn-shadow-normal);
}
.btn-outline-success:hover, .btn-outline-success:focus {
	background: var(--btn-success-bg);
	color: var(--btn-success-color);
	border-color: var(--btn-success-bg);
	box-shadow: var(--btn-shadow-hover);
}
.btn-outline-danger {
	background: transparent;
	color: var(--btn-danger-bg);
	border: var(--btn-border-width) solid var(--btn-danger-bg);
	box-shadow: var(--btn-shadow-normal);
}
.btn-outline-danger:hover, .btn-outline-danger:focus {
	background: var(--btn-danger-bg);
	color: var(--btn-danger-color);
	border-color: var(--btn-danger-bg);
	box-shadow: var(--btn-shadow-hover);
}
.btn-outline-secondary {
	background: transparent;
	color: var(--btn-secondary-bg);
	border: var(--btn-border-width) solid var(--btn-secondary-border);
	box-shadow: var(--btn-shadow-normal);
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
	background: var(--btn-secondary-bg);
	color: var(--btn-secondary-color);
	border-color: var(--btn-secondary-border);
	box-shadow: var(--btn-shadow-hover);
}
.btn-outline-light {
	background: transparent;
	color: var(--btn-light-bg);
	border: var(--btn-border-width) solid var(--btn-light-border);
	box-shadow: var(--btn-shadow-normal);
}
.btn-outline-light:hover, .btn-outline-light:focus {
	background: var(--btn-light-bg);
	color: var(--btn-light-color);
	border-color: var(--btn-light-border);
	box-shadow: var(--btn-shadow-hover);
}
.btn-outline-dark {
	background: transparent;
	color: var(--btn-dark-bg);
	border: var(--btn-border-width) solid var(--btn-dark-border);
	box-shadow: var(--btn-shadow-normal);
}
.btn-outline-dark:hover, .btn-outline-dark:focus {
	background: var(--btn-dark-bg);
	color: var(--btn-dark-color);
	border-color: var(--btn-dark-border);
	box-shadow: var(--btn-shadow-hover);
}

/* =====================================================
   DIALOG-BUTTONS (zentral, übersichtlich, wartbar)
   ===================================================== */

/* Container für Dialog-Buttons */
.dialog-buttons {
  display: flex;
  justify-content: center;
  gap: 1em;
  margin-top: 1.5em;
}

/* Basis-Button für Dialoge */
.dialog-buttons .btn, .modal-btn {
  min-width: 120px;
  font-size: 1.08em;
  padding: 0.6em 1.5em;
  border-radius: 0.7em;
  box-shadow: none;
  border-width: 2px;
  border-style: solid;
  transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s;
  outline: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Farbvarianten für Dialog-Buttons */
.dialog-buttons .btn-primary    { background: #181818; color: #fff; border-color: #181818; }
.dialog-buttons .btn-success    { background: #27AE60; color: #fff; border-color: #27AE60; }
.dialog-buttons .btn-danger     { background: #C0392B; color: #fff; border-color: #C0392B; }
.dialog-buttons .btn-secondary  { background: #e0e0e0; color: #181818; border-color: #bdbdbd; }
.dialog-buttons .btn-light      { background: #fff; color: #181818; border-color: #e0e0e0; }
.dialog-buttons .btn-dark       { background: #23272b; color: #fff; border-color: #23272b; }

/* Modal-Button Farbvarianten */
.modal-btn                    { background: var(--primary-green); color: #fff; border-color: var(--primary-green); }
.modal-btn.secondary          { background: #ececec; color: #222; border-color: #bdbdbd; }

/* Hover/Fokus für Dialog-Buttons */
.dialog-buttons .btn:hover, .dialog-buttons .btn:focus, .modal-btn:hover, .modal-btn:focus {
  box-shadow: 0 2px 8px rgba(0,0,0,0.13);
  outline: none;
  transform: none;
}
/* Konsolidierte Hover/Fokus-Effekte für Dialog-Buttons */
.dialog-buttons .btn-primary:hover,   .dialog-buttons .btn-primary:focus   { background: #27AE60; color: #fff; border-color: #27AE60; }
.dialog-buttons .btn-success:hover,   .dialog-buttons .btn-success:focus   { background: #229954; color: #fff; border-color: #229954; }
.dialog-buttons .btn-danger:hover,    .dialog-buttons .btn-danger:focus    { background: #a93226; color: #fff; border-color: #a93226; }
.dialog-buttons .btn-secondary:hover, .dialog-buttons .btn-secondary:focus { background: #27AE60; color: #fff; border-color: #27AE60; }
.dialog-buttons .btn-light:hover,     .dialog-buttons .btn-light:focus     { background: #27AE60; color: #fff; border-color: #27AE60; }
.dialog-buttons .btn-dark:hover,      .dialog-buttons .btn-dark:focus      { background: #27AE60; color: #fff; border-color: #27AE60; }

/* Modal-Button Hover-Effekte */
.modal-btn:hover, .modal-btn:focus                    { background: #229954; color: #fff; border-color: #229954; }
.modal-btn.secondary:hover, .modal-btn.secondary:focus { background: #27AE60; color: #fff; border-color: #27AE60; }

/* Disabled-Status */
.dialog-buttons .btn:disabled, .modal-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Theme-Overrides für Dialog-Buttons */
[data-theme="dark"] .dialog-buttons .btn-primary   { background: #fff; color: #181818; border-color: #fff; }
[data-theme="dark"] .dialog-buttons .btn-secondary { background: #444; color: #fff; border-color: #888; }
[data-theme="dark"] .dialog-buttons .btn-light     { background: #23272b; color: #fff; border-color: #444; }
[data-theme="dark"] .dialog-buttons .btn-dark      { background: #181818; color: #fff; border-color: #181818; }
[data-theme="dark"] .dialog-buttons .btn-danger    { background: #C0392B; color: #fff; border-color: #C0392B; }
[data-theme="dark"] .dialog-buttons .btn-success   { background: #27AE60; color: #fff; border-color: #27AE60; }

/* Dark-Theme Modal-Button Overrides */
[data-theme="dark"] .modal-btn                    { background: var(--primary-green); color: #fff; border-color: var(--primary-green); }
[data-theme="dark"] .modal-btn.secondary          { background: #444; color: #fff; border-color: #888; }
[data-theme="dark"] .modal-btn.secondary:hover, [data-theme="dark"] .modal-btn.secondary:focus { background: #fff; color: #181818; border-color: #fff; }

/* Dark-Theme Dialog-Button Hover-Overrides für bessere Sichtbarkeit */
[data-theme="dark"] .dialog-buttons .btn-primary:hover, [data-theme="dark"] .dialog-buttons .btn-primary:focus   { background: #27AE60; color: #fff; border-color: #27AE60; }
[data-theme="dark"] .dialog-buttons .btn-secondary:hover, [data-theme="dark"] .dialog-buttons .btn-secondary:focus { background: #fff; color: #181818; border-color: #fff; }
[data-theme="dark"] .dialog-buttons .btn-light:hover, [data-theme="dark"] .dialog-buttons .btn-light:focus     { background: #27AE60; color: #fff; border-color: #27AE60; }
[data-theme="dark"] .dialog-buttons .btn-dark:hover, [data-theme="dark"] .dialog-buttons .btn-dark:focus      { background: #27AE60; color: #fff; border-color: #27AE60; }

/* =====================================================
   ENDE DIALOG-BUTTONS
   ===================================================== */

/* =====================================================
   DARK THEME DIALOG OVERRIDES – für Lesbarkeit
   ===================================================== */
[data-theme="dark"] .dialog-content,
[data-theme="dark"] .alert-content {
	background: #111;
	color: #fff;
	border: 1px solid #444;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .dialog-content h3,
[data-theme="dark"] .alert-content h3 {
	color: #fff;
}

[data-theme="dark"] .dialog-content p,
[data-theme="dark"] .alert-content p {
	color: #fff;
}

[data-theme="dark"] .dialog-content > div,
[data-theme="dark"] .alert-content > div {
	color: #fff;
}

/* --- Dialog-Button: Klarer Hover-Effekt für den grünen Button im Dark Theme --- */
[data-theme="dark"] .dialog-buttons .btn-success:hover,
[data-theme="dark"] .dialog-buttons .btn-success:focus {
  background: #fff; 
  color: #181818;
  border-color: #27ae60;
  box-shadow: 0 2px 12px rgba(67,233,123,0.18);
}


/* =====================================================
   ENDE DARK THEME DIALOG OVERRIDES
   ===================================================== */



/* Konsolidierte Button-Variablen - keine Duplikate mehr */
/* Konsolidierte Button-Styles - keine Duplikate mehr */

/* Deaktivierter Speichern-Button: ausgegraut, nicht klickbar */
.meta-save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* =============================
   Einheitliche Benachrichtigungen (Toast & Sorting Feedback)
   ============================= */
.unified-notification {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  background: rgba(39, 174, 96, 0.9);
  color: white;
  padding: 1.2rem 2.5rem;
  border-radius: 0.8rem;
  font-size: 1.4rem;
  font-weight: 500;
  z-index: 2000;
  opacity: 0;
  box-shadow: 0 4px 20px rgba(39, 174, 96, 0.2);
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  white-space: nowrap;
  text-align: center;
  max-width: 80vw;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(8px);
}

/* Responsive Anpassungen */
@media (max-width: 1024px) {
  .unified-notification {
    font-size: 1.3rem;
    padding: 1rem 2rem;
    border-radius: 0.8rem;
  }
}

@media (max-width: 768px) {
  .unified-notification {
    font-size: 1.1rem;
    padding: 0.8rem 1.5rem;
    border-radius: 0.6rem;
    max-width: 85vw;
    margin: 0 1rem;
  }
}

@media (max-width: 480px) {
  .unified-notification {
    font-size: 1rem;
    padding: 0.7rem 1.2rem;
    border-radius: 0.5rem;
    max-width: 90vw;
    margin: 0 0.8rem;
  }
}

/* --- Globale Link-Hover-Regel: Keine Unterstreichung außer im Footer --- */
a:hover, a:focus {
  text-decoration: none;
}
/* Footer-Links behalten ihre Unterstreichung */
.footer-link:hover, .footer-link:focus {
  text-decoration: underline;
}

/* Footer- und Header-Links: Keine Unterstreichung bei Hover */
.footer-link:hover, .footer-link:focus,
.admin-header a:hover, .admin-header a:focus {
  text-decoration: none;
}

.storage-toggle-bottom {
  display: block;
  background: none;
  border: none;
  box-shadow: none;
  margin: 0.5rem auto 0 auto;
  padding: 0;
  text-align: center;
  cursor: pointer;
}
.storage-toggle-bottom i {
  font-size: 1.3rem;
  color: var(--text-color);
}
.storage-info-box.collapsed .storage-toggle-bottom {
  display: none;
}

.storage-toggle-bottom {
  margin-top: auto;
  margin-bottom: 0.5rem;
}

/* ===== BILD-DARSTELLUNG: NORMAL-ANSICHT ===== */
/* Basis-Styles für alle Bilder in Normal-Ansicht - Einheitliche Höhe */
.admin-image img {
	width: 100%;
	height: 200px; /* Feste Höhe für einheitliche Darstellung */
	object-fit: cover;
	display: block;
	pointer-events: auto;
	touch-action: pan-x pan-y;
	position: relative;
	z-index: 0;
	border-radius: 0.9em 0.9em 0 0;
}

/* ===== BILD-DARSTELLUNG: GRID-ANSICHT ===== */
/* Grid-Modus: Bilder quadratisch darstellen - überschreibt alle Normal-Ansicht Regeln */
body.grid-only-mode .admin-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 0.5rem;
	max-height: none;
}

/* ===== RESPONSIVE ANPASSUNGEN ===== */
/* Responsive Höhen nur für Normal-Ansicht - Grid-Ansicht wird nicht beeinflusst */
@media (max-width:768px) {
	/* Normal-Ansicht: Responsive Höhe für flachere Darstellung */
	.admin-image img {
		height: 180px;
	}
}

@media (max-width:480px) {
	/* Normal-Ansicht: Responsive Höhe für flachere Darstellung */
	.admin-image img {
		height: 160px;
	}
}

@media (max-width:360px) {
	/* Normal-Ansicht: Responsive Höhe für flachere Darstellung */
	.admin-image img {
		height: 140px;
	}
}

/* ===== BILD-BOX OPTIMIERUNG ===== */
/* Normal-Ansicht: Bildboxen passen sich dem Inhalt an, kein weißer Raum */
.admin-image {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	height: fit-content; /* Box passt sich dem Inhalt an */
}

/* Grid-Ansicht: Bildboxen bleiben quadratisch */
body.grid-only-mode .admin-image {
	aspect-ratio: 1;
	height: auto; /* Grid-Modus überschreibt height: fit-content */
}

/* ===== MOBILE-ANPASSUNGEN FÜR NEUE HEADER-LEISTE ===== */
@media (max-width: 768px) {
  .main-header {
    height: 50px; /* Tablet - proportional zur Desktop-Höhe */
  }
  
  .main-header-container {
    padding: 0 1rem;
  }

  .main-logout-btn {
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
  }
  
  .main-logout-text {
    display: none; /* Nur Icon auf Mobile */
  }
  
  /* Anpassung der bestehenden Header-Position */
  .admin-header {
    top: 50px;
    height: 50px; /* Gleiche Höhe wie main-header */
  }
  
  /* Anpassung des Body-Paddings */
  body {
    padding-top: 100px; /* 50px + 50px */
  }
  
  /* Header-Container Anpassung für Tablet */
  .header-container {
    padding: 0.4rem 2rem;
  }
}

@media (max-width: 480px) {
  .main-header {
    height: 45px; /* Mobile - proportional zur Desktop-Höhe */
  }
  
  .main-header-container {
    padding: 0 0.8rem;
  }
  
  
  .project-name .admin-text {
    font-size: 1.2rem;
  }
  
  .main-logout-btn {
    padding: 0.4rem 0.2rem;
    font-size: 0.9rem;
  }
  
  /* Anpassung der bestehenden Header-Position */
  .admin-header {
    top: 45px;
    height: 45px; /* Gleiche Höhe wie main-header */
  }
  
  /* Anpassung des Body-Paddings */
  body {
    padding-top: 90px; /* 45px + 45px */
  }
  
  /* Perfekte vertikale Zentrierung für Smartphone-Modus */
  .header-container {
    padding: 0rem 1rem 0.5rem 1rem; /* Reduziertes Padding für bessere Zentrierung */
    min-height: 45px; /* Explizite Mindesthöhe */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Zentriert den Inhalt vertikal */
  }
  
  .header-row.top-row {
    display: flex;
    align-items: center; /* Zentriert alle Elemente vertikal */
    justify-content: space-between;
    min-height: 35px; /* Explizite Mindesthöhe für die Zeile */
  }
  
  .header-title {
    display: flex;
    align-items: center; /* Zentriert Icon und Text vertikal */
    gap: 0.5rem;
  }
  
  .right-buttons {
    display: flex;
    align-items: center; /* Zentriert Grid- und Theme-Icons vertikal */
    gap: 0.5rem;
    height: 100%; /* Nutzt die volle Höhe */
  }
  
  /* Spezifische Anpassungen für Grid- und Theme-Buttons */
  .grid-btn, .theme-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px; /* Einheitliche Höhe */
    width: 32px; /* Einheitliche Breite */
    padding: 0;
    margin: 0;
  }
  
  /* Upload-Buttons Textgröße für Smartphone */
  #selectBtn, #uploadBtn {
    font-size: 0.9rem;
  }
}

/* Dark Theme: Logo-Filter für Theme-Wechsel */
[data-theme="dark"] .project-name .admin-logo {
  filter: invert(1);
}


/* Admin-Einstellungen */
.storage-admin-section {
	margin-bottom: 2rem;
	padding: 1.5rem;
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: 0.5rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-settings-header h3 {
	margin: 0 0 0.5rem 0;
	color: var(--text-primary);
	font-size: 1.1rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.admin-settings-description {
	margin: 0 0 1.5rem 0;
	color: var(--text-muted);
	font-size: 0.9rem;
	line-height: 1.4;
}

.admin-config-form {
	width: 100%;
}

.config-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.config-field {
	display: flex;
	flex-direction: column;
}

.config-field-wide {
	grid-column: 1 / -1;
}

/* ===== MODERN CONFIG CARDS SYSTEM ===== */
.admin-config-form-modern {
	margin-bottom: 2rem;
}

.config-cards-container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.config-card {
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: 0.75rem;
	overflow: hidden;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.config-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	border-color: rgba(var(--accent-color-rgb), 0.3);
}

.config-card-wide {
	grid-column: 1 / -1;
}

.config-card-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem 1.25rem 0.75rem 1.25rem;
	background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.03), rgba(var(--accent-color-rgb), 0.08));
	border-bottom: 1px solid rgba(var(--accent-color-rgb), 0.1);
}

.config-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	background: rgba(var(--accent-color-rgb), 0.1);
	border-radius: 0.5rem;
	color: var(--accent-color);
	font-size: 1.1rem;
	flex-shrink: 0;
}

.config-card-title {
	flex: 1;
	min-width: 0;
}

.config-label-modern {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 0.25rem;
	line-height: 1.3;
}

.config-card-subtitle {
	display: block;
	font-size: 0.8rem;
	color: var(--text-muted);
	font-weight: 400;
	line-height: 1.2;
}

.config-card-content {
	padding: 1rem 1.25rem 1.25rem 1.25rem;
}

.config-input-modern {
	width: calc(100% - 4.5rem);
	margin: 0 1.25rem;
	padding: 0.875rem 1rem;
	border: 2px solid var(--border-color);
	border-radius: 0.5rem;
	background: var(--bg-primary);
	color: var(--text-primary);
	font-size: 0.95rem;
	font-weight: 500;
	transition: all 0.2s ease;
	outline: none;
}

.config-input-modern:focus {
	border-color: var(--accent-color);
	background: var(--bg-primary);
	box-shadow: 0 0 0 4px rgba(var(--accent-color-rgb), 0.1);
	transform: translateY(-1px);
}

.config-input-modern::placeholder {
	color: var(--text-muted);
	font-weight: 400;
}

.config-input-number {
	text-align: center;
	font-weight: 600;
	font-size: 1.1rem;
}

.config-textarea-modern {
	width: calc(100% - 4.5rem);
	margin: 0 1.25rem;
	padding: 0.875rem 1rem;
	border: 2px solid var(--border-color);
	border-radius: 0.5rem;
	background: var(--bg-primary);
	color: var(--text-primary);
	font-size: 0.95rem;
	font-weight: 500;
	min-height: 100px;
	resize: vertical;
	transition: all 0.2s ease;
	outline: none;
	font-family: inherit;
	line-height: 1.5;
}

.config-textarea-modern:focus {
	border-color: var(--accent-color);
	background: var(--bg-primary);
	box-shadow: 0 0 0 4px rgba(var(--accent-color-rgb), 0.1);
	transform: translateY(-1px);
}

.config-textarea-modern::placeholder {
	color: var(--text-muted);
	font-weight: 400;
}


/* ===== DARK THEME SUPPORT ===== */
[data-theme="dark"] .config-card {
	background: var(--card-bg);
	border-color: var(--border-color);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .config-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
	border-color: rgba(var(--accent-color-rgb), 0.4);
}

[data-theme="dark"] .config-card-header {
	background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.05), rgba(var(--accent-color-rgb), 0.1));
	border-bottom-color: rgba(var(--accent-color-rgb), 0.15);
}

[data-theme="dark"] .config-card-icon {
	background: rgba(var(--accent-color-rgb), 0.15);
	color: var(--accent-color);
}

[data-theme="dark"] .config-input-modern,
[data-theme="dark"] .config-textarea-modern {
	background: var(--bg-primary);
	border-color: var(--border-color);
	color: var(--text-primary);
}

[data-theme="dark"] .config-input-modern:focus,
[data-theme="dark"] .config-textarea-modern:focus {
	background: var(--bg-primary);
	border-color: var(--accent-color);
	box-shadow: 0 0 0 4px rgba(var(--accent-color-rgb), 0.15);
}


.config-label {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--text-primary);
	margin-bottom: 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

/* ===== MODERN INFO ICON SYSTEM ===== */
.info-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	cursor: help;
	opacity: 0.6;
	transition: color 0.2s ease;
	color: var(--text-muted);
	border-radius: 50%;
	background: rgba(var(--accent-color-rgb), 0.1);
	border: 1px solid rgba(var(--accent-color-rgb), 0.2);
	margin-left: 0.5rem;
	vertical-align: middle;
}

.info-icon:hover {
	opacity: 1;
	color: var(--accent-color);
}

.info-icon svg {
	width: 12px;
	height: 12px;
	transition: all 0.3s ease;
}

.info-icon:hover svg {
	transform: scale(1.1);
}

.info-icon:hover::after {
	content: attr(data-tooltip);
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	background: #ffffff;
	color: #2c3e50;
	padding: 0.75rem 1rem;
	border-radius: 8px;
	font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
	font-size: 0.85rem;
	font-weight: 400;
	line-height: 1.4;
	white-space: normal;
	text-align: left;
	max-width: 400px;
	min-width: 200px;
	z-index: 999999;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
	border: 1px solid #e1e5e9;
	opacity: 1;
	animation: tooltipSlideIn 0.25s ease-out;
	pointer-events: none;
}

.info-icon:hover::before {
	content: '';
	position: absolute;
	top: calc(100% + 4px);
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid #ffffff;
	z-index: 1000000;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
	pointer-events: none;
}

@keyframes tooltipSlideIn {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(-5px);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

/* Responsive Info Icon */
@media (max-width: 768px) {
	.info-icon:hover::after {
		max-width: 350px;
		padding: 0.7rem 0.9rem;
		font-size: 0.8rem;
	}
}

@media (max-width: 480px) {
	.info-icon:hover::after {
		max-width: 300px;
		padding: 0.6rem 0.8rem;
		font-size: 0.75rem;
		line-height: 1.3;
	}
}

.config-input,
.config-textarea {
	padding: 0.75rem;
	border: 1px solid var(--border-color);
	border-radius: 0.375rem;
	background: var(--input-bg);
	color: var(--text-primary);
	font-size: 0.9rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.config-input:focus,
.config-textarea:focus {
	outline: none;
	border-color: var(--accent-color);
	box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.1);
}

.config-textarea {
	resize: vertical;
	min-height: 80px;
	font-family: inherit;
}

.config-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.config-save-btn {
	padding: 0.75rem 1.5rem;
	font-size: 0.9rem;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.config-status {
	font-size: 0.85rem;
	font-weight: 500;
	min-height: 1.2rem;
	display: flex;
	align-items: center;
}

.config-status.success {
	color: #28a745;
}

.config-status.error {
	color: #dc3545;
}


/* Responsive Design für Admin-Einstellungen */
@media (max-width: 768px) {
	.storage-admin-section {
		padding: 1rem;
		margin-bottom: 1.5rem;
	}
	
	.config-grid,
	.config-grid-compact {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}
	
	.config-cards-container {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	
	.admin-settings-header h3 {
		font-size: 1rem;
	}
	
	.admin-settings-description {
		font-size: 0.85rem;
		margin-bottom: 1rem;
	}
	
	.config-input,
	.config-textarea,
	.config-input-compact,
	.config-textarea-compact,
	.config-input-modern,
	.config-textarea-modern {
		padding: 0.6rem;
		font-size: 0.85rem;
	}
	
	.config-input-modern,
	.config-textarea-modern {
		width: calc(100% - 3rem);
		margin: 0 1.5rem;
	}
	
	.config-save-btn {
		padding: 0.6rem 1.2rem;
		font-size: 0.85rem;
	}
	
	
}

@media (max-width: 480px) {
	.storage-admin-section {
		padding: 0.75rem;
	}
	
	.config-grid,
	.config-grid-compact {
		gap: 0.5rem;
	}
	
	.config-cards-container {
		gap: 0.75rem;
	}
	
	.config-card-header {
		padding: 1rem 1rem 0.5rem 1rem;
		gap: 0.75rem;
	}
	
	.config-card-icon {
		width: 2rem;
		height: 2rem;
		font-size: 1rem;
	}
	
	.config-card-content {
		padding: 0.75rem 1rem 1rem 1rem;
	}
	
	.config-label {
		font-size: 0.85rem;
		margin-bottom: 0.4rem;
	}
	
	.config-input,
	.config-textarea,
	.config-input-compact,
	.config-textarea-compact,
	.config-input-modern,
	.config-textarea-modern {
		padding: 0.5rem;
		font-size: 0.8rem;
	}
	
	.config-textarea,
	.config-textarea-compact,
	.config-textarea-modern {
		min-height: 60px;
	}
	
	.config-input-modern,
	.config-textarea-modern {
		width: calc(100% - 2rem);
		margin: 0 1rem;
	}
	
	.config-label-modern {
		font-size: 0.9rem;
	}
	
	.config-card-subtitle {
		font-size: 0.75rem;
	}
	
	.config-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}
	
	.config-save-btn {
		justify-content: center;
		padding: 0.75rem;
	}
	
	/* Collapsed stats für sehr kleine Bildschirme */
	.collapsed-stats {
		gap: 0.3rem;
		padding: 0.25rem 0;
		min-height: 40px;
	}
	.collapsed-stat {
		padding: 0.4rem 0.25rem;
		min-width: 55px;
		max-width: 70px;
	}
	.collapsed-stat i {
		font-size: 0.75rem;
	}
	.collapsed-stat span {
		font-size: 0.65rem;
	}
	
}