/* =================================================================
   🎯 FIXE A4-SKALIERUNG - Exakte 210mm × 297mm mit CSS-Transform
   ================================================================= */

/* A4-Skalierungs-Wrapper - zentriert das Schild */
.a4-scale-wrapper,
.a4-container-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: calc(100vh - 200px);
  min-height: 400px;
  padding: 20px;
  box-sizing: border-box;
  overflow: auto; /* Scrollbar bei zu kleinen Bildschirmen */
}

/* A4 Container mit EXAKTEN A4-MAßEN (210mm × 297mm) */
.a4-container {
  /* 🎯 EXAKTE A4-GRÖßE: 210mm × 297mm bei 96 DPI */
  width: 794px;  /* 210mm = 794px bei 96 DPI */
  height: 1123px; /* 297mm = 1123px bei 96 DPI */
  
  /* 🎯 ZOOM-UNABHÄNGIGE SKALIERUNG via CSS-Transform */
  transform-origin: top center;
  transition: transform 0.3s ease;
  
  /* 🎯 WYSIWYG-DRUCK: Feste Positionierung für millimetergenau */
  position: relative;
  background: #ffff00 url("../Background/BG.png") no-repeat top left;
  background-size: 100% auto;
  border: 1px solid black;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  
  /* 🎯 KEINE RESPONSIVE LAYOUTS - nur feste Maße */
  /* Keine aspect-ratio, max-width, width: auto etc. */
}

.inhalt {
  position: relative;
  height: 100%;
  width: 100%;
  font-family: "MM Headline Pro WebTT Regular", Arial, sans-serif;
}

/* =================================================================
   📦 ALTBESTAND-KÄSTCHEN (Rechts am Rand)
   ================================================================= */

.a4-container .inhalt .altbestand-kaestchen {
  position: absolute !important;
  right: 6px !important;
  top: 60% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  z-index: 9999 !important;
  pointer-events: none !important; /* Verhindert Interaktionen während der Anzeige */
}

.a4-container .inhalt .altbestand-kaestchen .kaestchen {
  width: 12px !important;
  height: 12px !important;
  border: 2px solid #000 !important;
  background: transparent !important;
  border-radius: 2px !important;
  transition: background-color 0.2s ease !important;
  box-sizing: border-box !important;
}

.a4-container .inhalt .altbestand-kaestchen .kaestchen.abgestrichen {
  background: #000 !important;
}

/* 🎯 DRUCK-OPTIMIERUNG für Kästchen */
@media print {
  .a4-container .inhalt .altbestand-kaestchen {
    pointer-events: auto !important; /* Erlaubt Interaktionen beim Druck */
  }
  
  .a4-container .inhalt .altbestand-kaestchen .kaestchen {
    border-width: 1.5px !important; /* Dünnerer Rahmen für besseren Druck */
  }
  
  .a4-container .inhalt .altbestand-kaestchen .kaestchen.abgestrichen {
    background: #000 !important;
  }
}

/* 🎯 DARK MODE für Kästchen */
body.dark-mode .a4-container .inhalt .altbestand-kaestchen .kaestchen {
  border-color: #fff !important;
  background: transparent !important;
}

body.dark-mode .a4-container .inhalt .altbestand-kaestchen .kaestchen.abgestrichen {
  background: #fff !important;
}

/* 🎯 ZUSÄTZLICHE SPEZIFITÄT für Kästchen */
#altbestand-kaestchen {
  position: absolute !important;
  right: 6px !important;
  top: 60% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  z-index: 9999 !important;
  pointer-events: none !important;
}

#altbestand-kaestchen .kaestchen {
  width: 12px !important;
  height: 12px !important;
  border: 2px solid #000 !important;
  background: transparent !important;
  border-radius: 2px !important;
  transition: background-color 0.2s ease !important;
  box-sizing: border-box !important;
}

#altbestand-kaestchen .kaestchen.abgestrichen {
  background: #000 !important;
}

/* 🎯 MILLIMETERGENAU: Kopfbereich mit exakten Positionen */
.kopfblock {
  position: absolute;
  top: 300px; /* Exakte Position für Hersteller-Bereich */
  left: 40px;  /* 40px = ~10mm Rand */
  right: 40px;
  text-align: left;
  line-height: 0.9;
}

.hersteller {
  font-size: 56px; /* Feste Schriftgröße für konsistente Darstellung */
  font-weight: 600;
  margin-bottom: 0;
}

.dynamische-linie {
  position: relative;
  width: calc(100% - 50px); /* Platz für Abt-Nr-Kreis */
  height: 3px; /* 3px = ~0.8mm Linienstärke */
  background-color: black;
  margin-top: 5px;
  margin-bottom: 12px;
}

.bezeichnung {
  font-size: 28px; /* Feste Schriftgröße */
  font-weight: 600;
  margin-top: 8px;
  margin-bottom: 8px;
}

.warengruppe {
  font-size: 22px; /* Feste Schriftgröße */
}

/* 🎯 MILLIMETERGENAU: Sonderheit-Bereich - Konsolidiert */
.sonderheit {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 45px; /* Vergrößert von 38px auf 45px */
  font-weight: 600;
  color: red !important;
  width: 95%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 0.95;
  max-height: 4em;
  height: calc(4 * 1em * 0.95 + 20px);
  padding-top: 10px;
  padding-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  top: 505px; /* Exakte Position für Bildschirm */
}

@media print {
  .sonderheit {
    top: 126mm !important; /* Exakte Position für Druck */
  }
}

.sonderheit[contenteditable="true"] {
  /* Zusätzliche Styles für editierbare Sonderheit, falls benötigt */
}

/* Editierbare Elemente */
[contenteditable="true"] {
  cursor: text;
  transition: background-color 0.2s ease;
  outline: none;
}

[contenteditable="true"]:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

[contenteditable="true"]:focus {
  background-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.3);
}

/* Hinweis für die Bearbeitung */
.edit-hint {
  text-align: center;
  margin-top: 10px;
  color: #666;
  font-style: italic;
  font-size: 14px;
}

/* Neu positionierter AbtNr-Kreis am Ende der dynamischen Linie */
.abt-nr-circle {
  position: absolute;
  top: 0;
  right: -66px !important; /* Feintuning: Linie endet exakt am linken Rand des Kreises */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  z-index: 10;
  transform: translate(0, -50%);
}

/* 🎯 MILLIMETERGENAU: UVP-Preis */
.preis-uvp {
  position: absolute;
  top: 700px; /* Exakte Position für UVP */
  left: 0;
  right: 0;
  text-align: center;
  font-size: 52px; /* Vergrößert von 39px auf 52px */
  font-weight: bold;
  text-decoration: line-through;
  color: black;
  white-space: nowrap;
}

/* 🎯 MILLIMETERGENAU: Rabatt-Box */
.arrow-box {
  position: absolute;
  top: 730px; /* Exakte Position für Rabatt-Box */
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: red;
  width: 317px; /* Feste Breite */
  height: 90px; /* Feste Höhe */
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 2px 0;
}

.preis-rabatt-euro {
  font-size: 28px; /* war: 2.5vh ≈ 28px bei 1123px Höhe */
  font-weight: bold;
  color: white;
  white-space: nowrap;
  text-align: center;
  width: 100%;
  position: relative;
  z-index: 2;
  line-height: 0.9;
}

.preis-rabatt-trennstrich {
  font-size: 17px; /* war: 1.5vh ≈ 17px bei 1123px Höhe */
  font-weight: bold;
  color: white;
  white-space: nowrap;
  text-align: center;
  width: 100%;
  position: relative;
  z-index: 2;
  line-height: 0.9;
  margin: 1px 0;
}

.preis-rabatt-prozent {
  font-size: 28px; /* war: 2.5vh ≈ 28px bei 1123px Höhe */
  font-weight: bold;
  color: white;
  white-space: nowrap;
  text-align: center;
  width: 100%;
  position: relative;
  z-index: 2;
  line-height: 0.9;
}

.arrow-box::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 15px;
  background-color: red;
  z-index: -1;
}

.arrow-box::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 15px solid red;
  z-index: -1;
}

/* 🎯 FESTE PROPORTIONEN: VK-Neu Preis - mit hoher Spezifität */
.a4-container .inhalt .preis-vkneu,
.preis-vkneu {
  position: absolute !important;
  left: 50% !important;
  top: 820px !important; /* war: 73% von 1123px ≈ 820px */
  transform: translateX(-50%) !important;
  font-weight: bold !important;
  color: red !important;
  text-align: center !important;
  white-space: nowrap !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
  min-width: 238px !important; /* war: 30% von 794px ≈ 238px */
  max-width: 794px !important; /* Volle A4-Breite für lange Preise */
  height: auto !important;
  max-height: 168px !important; /* war: 15% von 1123px ≈ 168px */
  margin: 0 !important;
  overflow: visible !important;
  z-index: 10 !important;
}

/* Vorschau-Bereich nutzt IMMER die volle Höhe und zentriert den Inhalt */
.preview-area {
  height: 100vh;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #222;
  box-sizing: border-box;
  overflow: hidden;
}

/* A4-Wrapper nutzt 100% der Preview-Höhe, zentriert vertikal & horizontal */
.a4-container-wrapper {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  box-sizing: border-box;
  overflow: visible;
}

.a4-container .inhalt .preis-vkneu-inner,
.preis-vkneu-inner {
  display: inline-block !important;
  /* Basis-Schriftgröße für feste Proportionen - JavaScript kann optimieren */
  font-size: 170px !important; /* Leicht erhöht von 160px auf 170px */
  width: auto !important;
  height: auto !important;
  text-align: center !important;
  line-height: 0.8 !important;
  word-wrap: normal !important;
  overflow-wrap: normal !important;
  white-space: nowrap !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  letter-spacing: -0.02em !important;
  font-stretch: normal !important;
  transform: none !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 🔥 HAUPTPREIS-BEISPIEL - Proportional zum Hauptpreis */
.a4-container .inhalt .preis-vkneu-beispiel,
.preis-vkneu-beispiel {
  font-size: 0.25em !important; /* 0.25 * Hauptpreis = proportional */
  font-weight: normal !important;
  color: black !important;
  margin-top: 0.2em !important;
  text-align: center !important;
  width: 100% !important;
}

/* 🎯 MILLIMETERGENAU: Footer mit exakten Positionen */
.footer-line {
  position: absolute;
  bottom: 20px; /* 20px = ~5mm Abstand vom unteren Rand */
  left: 40px;   /* 40px = ~10mm Rand */
  right: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 25px; /* 25px zusätzlicher Rand links und rechts */
  height: 34px; /* Feste Höhe für Footer */
  width: calc(100% - 80px); /* 100% - 2*40px Ränder */
  overflow: visible;
  box-sizing: border-box;
}

.footer-item {
  font-size: 14px; /* Feste Schriftgröße */
  color: black !important;
  white-space: nowrap;
  overflow: visible;
  flex: 1;
  text-align: center;
}

.druckdatum {
  text-align: left;
}

.ean {
  text-align: center;
  color: black !important;
  font-size: 13px !important; /* Feste Schriftgröße */
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.barcode-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.barcode-svg {
  height: 20px; /* Feste Höhe für Barcode */
  width: auto;
}

.artnr {
  text-align: right;
  white-space: nowrap; /* Verhindert Umbrüche */
  overflow: visible; /* Verhindert Abschneiden */
}

/* Stelle sicher, dass die EAN/ArtNr-Spalte linksbündig ist */
.database-table th:nth-child(1),
.database-table td:nth-child(1) {
  text-align: left !important;
}

/* Stelle sicher, dass die ArtNr in der Artikelinfo linksbündig ist */
.article-info .artnr {
  text-align: left !important;
}

/* Split-Screen-Ansicht */
.split-screen .app-container {
  flex-direction: row !important;
}

.split-screen .sidebar {
  max-width: 75%;
  width: 60%;
  height: 100vh;
}

.split-screen .preview-area {
  width: 40%;
  display: block !important;
}

.split-screen .mobile-tabs {
  display: none !important;
}

.split-view-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  z-index: 100;
  transition: all var(--transition-normal);
}

.split-view-toggle:hover {
  background-color: var(--primary-hover);
  transform: scale(1.1);
}

.split-view-toggle svg {
  width: 24px;
  height: 24px;
  fill: white;
}

/* Mobile Tab Navigation */
.mobile-tabs {
  display: none;
  background-color: #f9f9f9;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 10;
}

.mobile-tab-button {
  flex: 1;
  padding: 8px;
  text-align: center;
  background: none;
  border: none;
  font-weight: 500;
  color: var(--text-light);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.mobile-tab-button.active {
  color: #ff6b6b;
  border-bottom: 3px solid #ff6b6b;
  background: none !important;
}

.mobile-tab-content {
  display: none;
}

.mobile-tab-content.active {
  display: block;
}

.tab-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Neue mobile Thumbnail-Navigation */
.mobile-thumbnail-nav {
  display: none;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  padding: 5px;
  background-color: var(--secondary-color);
  border-radius: var(--border-radius-sm);
}

.mobile-thumbnail-button {
  background: none;
  border: none;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-thumbnail-button svg {
  width: 20px;
  height: 20px;
  fill: var(--text-light);
}

.mobile-thumbnail-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mobile-thumbnail-info {
  margin: 0 10px;
  font-size: 14px;
  color: var(--text-color);
  font-weight: bold;
}

/* Highlight für geänderte Elemente */
@keyframes highlight {
  0% {
    background-color: rgba(255, 0, 0, 0.2);
  }
  100% {
    background-color: transparent;
  }
}

.highlight-change {
  animation: highlight 2s ease;
}

/* Responsive Styles - VERBESSERT */
@media (min-width: 1024px) {
  .app-container {
    flex-direction: row;
  }

  .mobile-tabs {
    display: none;
  }
}

@media (max-width: 1023px) {
  .app-container {
    flex-direction: column;
  }

  .sidebar {
    max-width: 100%;
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 2px solid var(--border-color);
    padding: 15px;
  }

  .preview-area {
    padding: 10px;
  }

  .a4-container {
    height: calc(100vh - 250px);
  }

  .split-view-toggle {
    display: none;
  }

  /* Verbesserte mobile Thumbnails */
  .thumbnails-container {
    height: auto;
    min-height: calc(80px * var(--thumbnail-active-scale) + 40px); /* Angepasste Höhe für mobile Ansicht */
    padding: 0 0 0 10px;
    margin-bottom: 0;
  }

  .thumbnail {
    min-width: 60px;
    height: 80px;
    margin: 35px 0 5px 2px;
  }

  .thumbnail.active {
    transform: scale(var(--thumbnail-active-scale));
  }

  .thumbnail-bestand {
    font-size: 14px;
  }

  .thumbnail-artnr {
    font-size: 9px;
  }

  /* Verbesserte mobile Tabs */
  .mobile-tabs {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: white;
  }

  .mobile-tab-button {
    flex: 1;
    padding: 8px;
    text-align: center;
    background: none;
    border: none;
    font-weight: 500;
    color: var(--text-light);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }

  /* Anpassungen für Schnelleingabe */

  /* Verbesserte Eingabefelder für mobile Geräte */
  .input-group label {
    font-size: 14px;
  }

  textarea {
    font-size: 14px;
    padding: 8px;
  }

  .helper-button {
    padding: 5px 10px;
    font-size: 12px;
  }

  /* Verbesserte Vorlagen für mobile Geräte */
  .template-list {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }

  .template-item {
    padding: 10px;
  }

  .template-preview {
    height: 200px;
  }

  /* Verbesserte Toast-Benachrichtigungen für mobile Geräte */
  .toast-container {
    bottom: 10px;
    right: 10px;
    max-width: calc(100% - 20px);
  }

  .toast {
    padding: 10px 12px;
    font-size: 12px;
  }

  /* Anpassungen für Schnelleingabe */
}

@media (max-width: 767px) {
  .controls {
    flex-wrap: wrap;
  }

  .controls button {
    flex: 0 0 calc(50% - 5px);
  }

  .preview-controls {
    flex-direction: column;
    gap: 10px;
  }

  .navigation-controls,
  .view-controls,
  .print-controls {
    width: 100%;
    justify-content: center;
  }

  .a4-container {
    height: calc(100vh - 300px);
  }

  /* Verbesserte mobile Thumbnails */
  .thumbnails-container {
    display: none;
  }

  .mobile-thumbnail-nav {
    display: flex;
  }

  /* Verbesserte Eingabefelder für mobile Geräte */
  .input-group label {
    font-size: 14px;
  }

  textarea {
    font-size: 14px;
    padding: 8px;
  }

  .helper-button {
    padding: 5px 10px;
    font-size: 12px;
  }

  /* Verbesserte Vorlagen für mobile Geräte */
  .template-list {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }

  .template-item {
    padding: 10px;
  }

  .template-preview {
    height: 200px;
  }

  /* Verbesserte Toast-Benachrichtigungen für mobile Geräte */
  .toast-container {
    bottom: 10px;
    right: 10px;
    max-width: calc(100% - 20px);
  }

  .toast {
    padding: 10px 12px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .sidebar {
    padding: 10px;
  }

  .input-tabs {
    margin-bottom: 10px;
  }

  .tab-button {
    padding: 8px 10px;
    font-size: 12px;
  }

  .dropzone {
    padding: 15px;
  }

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

  .print-button button {
    padding: 8px 15px;
    font-size: 14px;
  }

  .print-button svg {
    width: 20px;
    height: 20px;
  }

  /* Optimierte Thumbnails für sehr kleine Bildschirme */
  .thumbnail {
    min-width: 45px;
    height: 60px;
  }

  /* Verbesserte A4-Container-Anzeige */
  .a4-container {
    height: calc(100vh - 320px);
  }

  /* Verbesserte mobile Tabs */
  .mobile-tab-button {
    font-size: 12px;
    padding: 10px 5px;
  }

  /* Hilfeboxen für kleine Bildschirme */
  .help-box {
    padding: 8px;
    font-size: 12px;
  }

  .help-box h4 {
    font-size: 14px;
  }
}

/* Ändere die Styles für das Banner, um es mittig zu platzieren */

/* Banner für die erste Vorlage */
.template-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-5deg);
  background-color: #ff0000;
  color: white;
  padding: 10px 15px;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 2;
  width: 90%;
  margin: 0 auto;
}

/* Entferne den zweiten RADIKAL REDUZIERT Text */
.template-reduziert-text {
  display: none;
}

/* Nur die erste Vorlage hat das Hintergrundbild */
.template-item:first-child .template-preview {
  background-image: url("../Background/BG.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Alle anderen Vorlagen haben nur gelben Hintergrund */
.template-item:not(:first-child) .template-preview {
  background-image: none;
  background-color: #ffff00;
}

/* 🎯 WYSIWYG-DRUCK: Exakte A4-Maße für Druck */
@media print {
  @page {
    size: 210mm 297mm; /* Exakte A4-Größe */
    margin: 0;
  }

  html,
  body {
    width: 210mm;
    height: 297mm;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #ffff00 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Verstecke alle Elemente außer dem Druckelement */
  body > *:not(.print-only-container) {
    display: none !important;
  }

  /* Zeige nur das Druckelement an */
  .print-only-container {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 210mm !important;
    height: 297mm !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background-color: #ffff00 !important;
    z-index: 9999 !important;
    visibility: visible !important;
  }

  .print-only-container .a4-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 210mm !important;
    height: 297mm !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    overflow: visible !important;
    background-color: #ffff00 !important;
    background-image: url("../Background/BG.png") !important;
    background-repeat: no-repeat !important;
    background-position: top left !important;
    background-size: 100% 100% !important;
    transform: none !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  /* 🎯 MILLIMETERGENAU: Alle Komponenten für Druck optimiert */
  
  .sonderheit {
    top: 126mm !important; /* Exakte Position */
  }
  
  .preis-uvp {
    top: 154mm !important; /* Exakte Position */
  }
  
  .arrow-box {
    top: 182mm !important; /* Exakte Position */
  }
  
  .footer-line {
    bottom: 5mm !important; /* Exakte Position */
    left: 10mm !important;
    right: 10mm !important;
    padding: 0 6mm !important; /* 6mm zusätzlicher Rand links und rechts */
  }
}

/* Always-Split-Ansicht */
.always-split .app-container {
  flex-direction: row !important;
  height: 100vh !important; /* Erzwinge 100% Höhe */
}

.always-split .sidebar {
  max-width: 75%;
  width: 60%;
  height: 100vh !important; /* Erzwinge 100% Höhe */
}

.always-split .preview-area {
  width: 40%;
  display: block !important;
  height: 100vh !important; /* Erzwinge 100% Höhe */
}

/* Verstecke die Vorschau-Kontrollen */
.preview-controls {
  display: none !important;
}

/* Verstecke die Vorschau-Hilfe */
.preview-help {
  display: none !important;
}

/* Neue Styles für Filter-Überschriften und Container */

/* Neue Styles für Warengruppen */
.product-groups-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 10px;
  /* Erhöhe den Abstand nach unten, um Überlappungen zu vermeiden */
  margin-bottom: 30px;
  /* Füge eine maximale Höhe hinzu und aktiviere vertikales Scrollen */
  max-height: 300px;
  overflow-y: auto;
}

.product-group-tag {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-left: 4px solid #ffcc00;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  min-width: fit-content;
  /* Stelle sicher, dass die Tags nicht zu breit werden */
  max-width: calc(100% - 20px);
}

.product-group-tag:hover {
  background-color: #fffbeb;
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.product-group-tag.selected {
  background-color: #fffbeb;
  border-left-color: #ff0000;
}

.product-group-tag.inactive {
  background-color: #f0f0f0;
  border-left-color: #cccccc;
  color: #777777;
}

.product-group-count {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ff0000;
  color: white;
  border-radius: 12px;
  min-width: 22px;
  height: 22px;
  font-size: 12px;
  font-weight: bold;
  margin-left: 8px;
  padding: 0 6px;
}

.product-group-tag.inactive .product-group-count {
  background-color: #999999;
}

/* Scrollbar für die Warengruppen-Container */
.product-groups-container::-webkit-scrollbar {
  height: 6px;
}

.product-groups-container::-webkit-scrollbar-thumb:hover {
  background: #ccc;
}

/* Füge diese neuen Styles für den auf- und zuklappbaren Warengruppen-Bereich hinzu */
.filter-heading {
  width: 100%;
  text-align: left;
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  color: var(--text-color);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 5px;
  cursor: pointer; /* Zeigt an, dass die Überschrift klickbar ist */
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding-left: 10px;
}

.filter-heading::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--text-color);
  transition: transform 0.3s ease;
}

.filter-heading.collapsed::after {
  transform: rotate(-90deg);
}

/* Spezifische Styles für Abteilungen und Warengruppen */
#abteilungenToggle {
  border-left-color: #ffcc00;
  margin: 2px 0;
  padding: 8px 15px;
}

#warengruppenToggle {
  border-left-color: #ff0000;
  margin: 2px 0;
  padding: 8px 15px;
}

/* Zusätzliches Icon für bessere Erkennbarkeit */
.filter-heading::before {
  content: "▼";
  margin-right: 8px;
  font-size: 12px;
  transition: transform 0.3s ease;
}

.filter-heading.collapsed::before {
  content: "▶";
}

/* Abteilungskreise */
.circles-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0;
  padding: 5px;
  padding-top: 10px; /* Mehr Platz oben */
  width: 100%;
  overflow: visible;
  position: relative;
  z-index: 1;
}

.abt-circle-container {
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease;
  margin: 0;
  padding: 0;
  overflow: visible;
  margin-top: 10px; /* Abstand nach oben */
  margin-right: 5px; /* Von 10px auf 5px reduziert */
  z-index: 5;
}

.abt-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #ffff00;
  border: 2px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  position: relative;
  transition: background-color 0.3s ease;
}

/* Inaktiver (abgewählter) Abteilungskreis */
.abt-circle-inactive {
  background-color: #cccccc;
}

/* Verbessere die Styles für inaktive Abteilungskreise */
.abt-circle-inactive {
  background-color: #cccccc !important;
  cursor: not-allowed !important;
}

/* Ändere den Cursor für Container mit inaktiven Kreisen */
.abt-circle-container:has(.abt-circle-inactive) {
  cursor: not-allowed !important;
}

/* Fallback für Browser, die :has nicht unterstützen */
.abt-circle-container .abt-circle-inactive {
  cursor: not-allowed !important;
}

/* Füge einen visuellen Hinweis hinzu, dass inaktive Kreise nicht klickbar sind */
.abt-circle-inactive + .abt-circle-count {
  opacity: 0.7;
}

/* Ändere die Abt-Circle-Count von einem Kreis zu einer Pillenform */
.abt-circle-count {
  position: absolute;
  top: -8px;
  right: -5px; /* Von -15px auf -5px geändert, um das Badge näher am Kreis zu positionieren */
  background-color: #ff0000;
  color: white;
  border-radius: 12px;
  min-width: 20px;
  height: 20px;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border: 1px solid white;
  padding: 0 5px;
  z-index: 20;
  transform: translateY(0);
  overflow: visible;
}

.no-data-message {
  color: #666;
  font-style: italic;
  text-align: center;
  width: 100%;
}

/* Entferne die alten Helper-Buttons */
.helper-button {
  display: none;
}

/* Vorlagen */
.template-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.template-item {
  padding: 15px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background-color: white;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.template-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.template-item.selected {
  border: 2px solid var(--primary-color);
  box-shadow: 0 4px 8px rgba(255, 0, 0, 0.2);
  transform: translateY(-2px);
}

.template-preview {
  height: 280px;
  background-color: #ffff00;
  margin-bottom: 0;
  border-radius: var(--border-radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  aspect-ratio: 210 / 297;
  padding: 0;
  background-image: url("../Background/BG.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.template-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.template-item h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: var(--text-color);
}

.template-item p {
  margin: 0 0 15px 0;
  font-size: 14px;
  color: var(--text-light);
}

.template-button {
  background-color: var(--secondary-color);
  border: none;
  padding: 6px 12px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  font-size: 14px;
  transition: all var(--transition-normal);
}

.template-button:hover {
  background-color: var(--primary-color);
  color: white;
}

/* Abteilungskreise für Vorlagen */
.abt-circles-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.abt-circles-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 10px;
}

/* Steuerungselemente */
.controls {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  gap: 10px;
}

.controls button {
  flex: 1;
  padding: 10px;
  margin: 0;
  font-size: 16px;
  border: none;
  background-color: var(--secondary-color);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.controls button:hover {
  background-color: var(--secondary-hover);
}

.controls button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.controls button svg {
  width: 24px;
  height: 24px;
  fill: var(--text-light);
}

.controls button:hover svg {
  fill: var(--primary-color);
}

.controls button.primary {
  background-color: var(--primary-color);
  color: white;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.controls button.primary svg {
  fill: white;
}

.controls button.primary:hover {
  background-color: var(--primary-hover);
}

/* Drucken-Button in der Seitenleiste */
.print-button {
  display: none;
}

/* Pagination in der Seitenleiste mit verbesserter Visualisierung */
.pagination-info {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--text-light);
  letter-spacing: 0.5px;
}

.pagination-info span {
  margin: 0 3px;
}

.pagination-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 10px;
}

.pagination-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ccc;
  transition: all var(--transition-normal);
}

.pagination-dot.active {
  background-color: var(--primary-color);
  transform: scale(1.2);
}

/* Status mit verbesserter Fehleranzeige */
#status {
  margin-top: 15px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: var(--border-radius-sm);
  font-size: 14px;
  color: var(--text-light);
  transition: all var(--transition-normal);
}

#status.error {
  background-color: #ffebee;
  color: var(--error-color);
  border-left: 3px solid var(--error-color);
}

#status.success {
  background-color: #e8f5e9;
  color: var(--success-color);
  border-left: 3px solid var(--success-color);
}

#status.warning {
  background-color: #fff8e1;
  color: var(--warning-color);
  border-left: 3px solid var(--warning-color);
}

/* Toast-Benachrichtigungen */
.toast-container {
  position: fixed;
  bottom: 20px; /* Geändert von top zu bottom */
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column-reverse; /* Geändert von column zu column-reverse */
  gap: 10px;
  max-width: 300px;
}

.toast {
  padding: 12px 16px;
  border-radius: var(--border-radius-sm);
  color: white;
  font-size: 14px;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  animation: slideIn 0.3s ease forwards;
  opacity: 0;
  transform: translateX(50px);
}

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOut {
  to {
    opacity: 0;
    transform: translateX(50px);
  }
}

.toast.error {
  background-color: var(--error-color);
}

.toast.success {
  background-color: var(--success-color);
}

.toast.warning {
  background-color: var(--warning-color);
}

.toast.info {
  background-color: var(--info-color);
}

.toast-close {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 16px;
  margin-left: 10px;
  opacity: 0.8;
}

.toast-close:hover {
  opacity: 1;
}

/* Vorschaubereich */
.preview-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 20px 20px 20px; /* Entferne das obere Padding (war 20px) */
  overflow: auto;
  position: relative;
  min-height: 100vh; /* Stelle sicher, dass der Vorschaubereich mindestens die Höhe des Viewports hat */
}

/* Vorschau-Kontrollen */
.preview-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
}

.view-controls,
.print-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.control-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--border-radius-sm);
  transition: all var(--transition-normal);
}

.control-button:hover {
  background-color: var(--secondary-color);
}

.control-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.control-button svg {
  width: 24px;
  height: 24px;
  fill: var(--text-light);
}

.control-button:hover svg {
  fill: var(--primary-color);
}

.control-button.primary {
  background-color: var(--primary-color);
  color: white;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.control-button.primary svg {
  fill: white;
}

.control-button.primary:hover {
  background-color: var(--primary-hover);
}

/* Miniaturansichten für Navigation - Dynamische Höhe */
.thumbnails-container {
  display: flex;
  overflow-x: auto;
  overflow-y: visible; /* Wichtig: Erlaube vertikales Überlaufen für gezoomte Thumbnails */
  gap: 10px;
  padding: 0 0 0 var(--thumbnail-container-padding); /* Entferne das untere Padding komplett */
  margin: 0 0 0 10px; /* Entferne den unteren Margin komplett */
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
  /* Deutlich erhöhte Höhe, um Platz für das gezoomte Thumbnail zu schaffen */
  height: auto;
  min-height: calc(var(--thumbnail-height) * var(--thumbnail-active-scale) + 40px); /* Reduziere den zusätzlichen Platz von 60px auf 40px */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  position: relative;
  scroll-snap-type: x proximity;
  will-change: transform;
  /* Verhindere vertikalen Scrollbalken */
  contain: layout paint;
}

.thumbnails-container::-webkit-scrollbar {
  height: 6px;
}

.thumbnails-container::-webkit-scrollbar-track {
  background: transparent;
}

.thumbnails-container::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}

/* Thumbnail-Styles mit dynamischer Höhe */
.thumbnail {
  min-width: 80px;
  height: var(--thumbnail-height);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  background-color: #ffff00;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  color: var(--text-light);
  box-sizing: border-box;
  margin: 35px 0 5px 2px; /* Reduziere den unteren Abstand von 15px auf 5px */
  scroll-snap-align: center;
  flex-shrink: 0;
  /* Verbessere die Rendering-Performance */
  contain: layout paint;
  /* Stelle sicher, dass das aktive Thumbnail nicht abgeschnitten wird */
  transform-origin: center center;
}

.thumbnail.active {
  border: 2px solid var(--primary-color);
  transform: scale(var(--thumbnail-active-scale));
  z-index: 10; /* Höherer z-index für bessere Sichtbarkeit */
  box-shadow: var(--shadow-md);
}

.thumbnail:hover:not(.active) {
  border-color: #999;
  transform: scale(1.05);
}

.thumbnail-number {
  position: absolute;
  top: 2px;
  left: 2px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 2px;
  z-index: 2;
}

.thumbnail-bestand {
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: var(--primary-color);
}

.thumbnail-bestand-details {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 8px;
  color: var(--text-color);
  padding: 2px;
  background-color: rgba(255, 255, 255, 0.8);
  margin: 0 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bestand-kategorie {
  display: block;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
}

.bestand-kategorie\.79 {
  background-color: #4caf50;
  color: white;
}

.bestand-kategorie\.1012 {
  background-color: #2196f3;
  color: white;
}

.bestand-kategorie\.1324 {
  background-color: #ff9800;
  color: white;
}

.bestand-kategorie\.24 {
  background-color: #f44336;
  color: white;
}

.bestand-kategorie\.oWE {
  background-color: #9c27b0;
  color: white;
}

.thumbnail-artnr {
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  color: #000;
}

/* A4 Container */
.a4-container {
  position: relative;
  aspect-ratio: 210 / 297; /* A4 Seitenverhältnis */
  height: calc(100vh - 250px); /* Erhöht von 220px auf 250px */
  max-height: 95vh;
  width: auto;
  max-width: 100%;
  margin: auto;
  background: #ffff00 url("../Background/BG.png") no-repeat top left;
  background-size: 100% auto;
  border: 1px solid black;
  transform-origin: top left;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-normal);
}

.inhalt {
  position: relative;
  height: 100%;
  width: 100%;
  font-family: "MM Headline Pro WebTT Regular", Arial, sans-serif;
}



.hersteller {
  font-size: 5vh;
  font-weight: bold;
  margin-bottom: 0vh;
}

.dynamische-linie {
  position: relative;
  width: calc(100% - 50px); /* Reduziere die Breite um den Durchmesser des Kreises */
  height: 3px;
  background-color: black;
  margin-top: 0.1vh;
  margin-bottom: 0.5vh;
}

.bezeichnung {
  font-size: 2.5vh;
  font-weight: bold;
  margin-top: 0.3vh;
  margin-bottom: 0.3vh;
}

.warengruppe {
  font-size: 2vh;
}



/* Editierbare Elemente */
[contenteditable="true"] {
  cursor: text;
  transition: background-color 0.2s ease;
  outline: none;
}

[contenteditable="true"]:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

[contenteditable="true"]:focus {
  background-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.3);
}

/* Hinweis für die Bearbeitung */
.edit-hint {
  text-align: center;
  margin-top: 10px;
  color: #666;
  font-style: italic;
  font-size: 14px;
}

/* Neu positionierter AbtNr-Kreis am Ende der dynamischen Linie */
.abt-nr-circle {
  position: absolute;
  top: 0;
  right: -66px !important; /* Feintuning: Linie endet exakt am linken Rand des Kreises */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  z-index: 10;
  transform: translate(0, -50%);
}

.preis-uvp {
  position: absolute;
  top: 55%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 3.5vh;
  font-weight: bold;
  text-decoration: line-through;
  color: black;
  white-space: nowrap;
}

.arrow-box {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: red;
  width: 40%;
  height: 8%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 2px 0;
}

.preis-rabatt-euro {
  font-size: 2.5vh;
  font-weight: bold;
  color: white;
  white-space: nowrap;
  text-align: center;
  width: 100%;
  position: relative;
  z-index: 2;
  line-height: 0.9;
}

.preis-rabatt-trennstrich {
  font-size: 1.5vh;
  font-weight: bold;
  color: white;
  white-space: nowrap;
  text-align: center;
  width: 100%;
  position: relative;
  z-index: 2;
  line-height: 0.9;
  margin: 1px 0;
}

.preis-rabatt-prozent {
  font-size: 2.5vh;
  font-weight: bold;
  color: white;
  white-space: nowrap;
  text-align: center;
  width: 100%;
  position: relative;
  z-index: 2;
  line-height: 0.9;
}

.arrow-box::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 15px;
  background-color: red;
  z-index: -1;
}

.arrow-box::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 15px solid red;
  z-index: -1;
}

/* Korrigierte Position und Größe des preis-vkneu Elements - mit hoher Spezifität */
.a4-container .inhalt .preis-vkneu,
.preis-vkneu {
  position: absolute !important;
  left: 50% !important;
  top: 73% !important;
  transform: translateX(-50%) !important;
  font-weight: bold !important;
  color: red !important;
  text-align: center !important;
  white-space: nowrap !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important; /* Ändere von flex-start zu center für bessere Zentrierung */
  align-items: center !important;
  width: auto !important; /* Dynamische Breite für bessere Zentrierung */
  min-width: 30% !important; /* Mindestbreite für kurze Preise */
  max-width: 100% !important; /* Volle A4-Breite für lange Preise */
  height: auto !important;
  max-height: 15% !important;
  margin: 0 !important;
  overflow: visible !important;
  z-index: 10 !important;
}

.a4-container .inhalt .preis-vkneu-inner,
.preis-vkneu-inner {
  display: inline-block !important;
  /* PROPORTIONALE Schriftgröße: Größter Text auf dem Schild */
  font-size: 8.0em !important; /* Leicht erhöht von 7.5em auf 8.0em */
  width: auto !important;
  height: auto !important;
  text-align: center !important;
  line-height: 0.8 !important;
  word-wrap: normal !important;
  overflow-wrap: normal !important;
  white-space: nowrap !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  letter-spacing: -0.02em !important;
  font-stretch: normal !important;
  transform: none !important;
  /* NEUE EIGENSCHAFTEN für bessere Zentrierung bei langen Texten */
  min-width: 0 !important; /* Verhindert Overflow-Probleme */
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 🔥 HAUPTPREIS-BEISPIEL - Proportional zum Hauptpreis (Duplikat entfernt) */
.a4-container .inhalt .preis-vkneu-beispiel,
.preis-vkneu-beispiel {
  font-size: 0.25em !important; /* 0.25 * Hauptpreis = proportional */
  font-weight: normal !important;
  color: black !important;
  margin-top: 0.2em !important;
  text-align: center !important;
  width: 100% !important;
}

/* Neue Fußzeile mit flexibler Anordnung - proportional zum A4-Blatt */
.footer-line {
  position: absolute;
  bottom: 0.5%; /* Kleiner Abstand zum Rand */
  left: 0;
  right: 0;
  display: flex;
  justify-content: flex-start; /* Beginne links statt space-between */
  align-items: center;
  padding: 0 3%; /* 3% zusätzlicher Rand links und rechts */
  height: 3%; /* Verdoppelt von 1.5% auf 3% für größere Schrift */
  width: 100%;
  overflow: visible; /* Verhindert Abschneiden */
  box-sizing: border-box;
}

.footer-item {
  font-size: 1.6em; /* Verdoppelt von 0.8em auf 1.6em */
  color: black;
  white-space: nowrap;
  overflow: visible;
  flex: 0 0 auto; /* Nicht wachsen oder schrumpfen */
}

.druckdatum {
  text-align: left;
}

.ean {
  text-align: left;
  color: black !important;
  font-size: 1.2vh !important; /* Gleiche Größe wie andere Footer-Elemente */
  white-space: nowrap !important; /* Verhindert Zeilenumbrüche */
  overflow: visible !important;
  text-overflow: clip !important;
}

.barcode-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.barcode-svg {
  height: 100%;
  max-width: 100%;
}

/* Entferne die Regel, die die ArtNr rechtsbündig macht */
.artnr {
  text-align: left;
  white-space: nowrap; /* Verhindert Umbrüche */
  overflow: visible; /* Verhindert Abschneiden */
}

/* Stelle sicher, dass die EAN/ArtNr-Spalte linksbündig ist */
.database-table th:nth-child(1),
.database-table td:nth-child(1) {
  text-align: left !important;
}

/* Stelle sicher, dass die ArtNr in der Artikelinfo linksbündig ist */
.article-info .artnr {
  text-align: left !important;
}

/* Split-Screen-Ansicht */
.split-screen .app-container {
  flex-direction: row !important;
}

.split-screen .sidebar {
  max-width: 75%;
  width: 60%;
  height: 100vh;
}

.split-screen .preview-area {
  width: 40%;
  display: block !important;
}

.split-screen .mobile-tabs {
  display: none !important;
}

.split-view-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  z-index: 100;
  transition: all var(--transition-normal);
}

.split-view-toggle:hover {
  background-color: var(--primary-hover);
  transform: scale(1.1);
}

.split-view-toggle svg {
  width: 24px;
  height: 24px;
  fill: white;
}

/* Mobile Tab Navigation */
.mobile-tabs {
  display: none;
  background-color: #f9f9f9;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 10;
}

.mobile-tab-button {
  flex: 1;
  padding: 8px;
  text-align: center;
  background: none;
  border: none;
  font-weight: 500;
  color: var(--text-light);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.mobile-tab-button.active {
  color: #ff6b6b;
  border-bottom: 3px solid #ff6b6b;
  background: none !important;
}

.mobile-tab-content {
  display: none;
}

.mobile-tab-content.active {
  display: block;
}

.tab-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Neue mobile Thumbnail-Navigation */
.mobile-thumbnail-nav {
  display: none;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  padding: 5px;
  background-color: var(--secondary-color);
  border-radius: var(--border-radius-sm);
}

.mobile-thumbnail-button {
  background: none;
  border: none;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-thumbnail-button svg {
  width: 20px;
  height: 20px;
  fill: var(--text-light);
}

.mobile-thumbnail-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mobile-thumbnail-info {
  margin: 0 10px;
  font-size: 14px;
  color: var(--text-color);
  font-weight: bold;
}

/* Highlight für geänderte Elemente */
@keyframes highlight {
  0% {
    background-color: rgba(255, 0, 0, 0.2);
  }
  100% {
    background-color: transparent;
  }
}

.highlight-change {
  animation: highlight 2s ease;
}

/* Responsive Styles - VERBESSERT */
@media (min-width: 1024px) {
  .app-container {
    flex-direction: row;
  }

  .mobile-tabs {
    display: none;
  }
}

@media (max-width: 1023px) {
  .app-container {
    flex-direction: column;
  }

  .sidebar {
    max-width: 100%;
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 2px solid var(--border-color);
    padding: 15px;
  }

  .preview-area {
    padding: 10px;
  }

  .a4-container {
    height: calc(100vh - 250px);
  }

  .split-view-toggle {
    display: none;
  }

  /* Verbesserte mobile Thumbnails */
  .thumbnails-container {
    height: auto;
    min-height: calc(80px * var(--thumbnail-active-scale) + 40px); /* Angepasste Höhe für mobile Ansicht */
    padding: 0 0 0 10px;
    margin-bottom: 0;
  }

  .thumbnail {
    min-width: 60px;
    height: 80px;
    margin: 35px 0 5px 2px;
  }

  .thumbnail.active {
    transform: scale(var(--thumbnail-active-scale));
  }

  .thumbnail-bestand {
    font-size: 14px;
  }

  .thumbnail-artnr {
    font-size: 9px;
  }

  /* Verbesserte mobile Tabs */
  .mobile-tabs {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: white;
  }

  .mobile-tab-button {
    flex: 1;
    padding: 8px;
    text-align: center;
    background: none;
    border: none;
    font-weight: 500;
    color: var(--text-light);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }

  /* Anpassungen für Schnelleingabe */

  /* Verbesserte Eingabefelder für mobile Geräte */
  .input-group label {
    font-size: 14px;
  }

  textarea {
    font-size: 14px;
    padding: 8px;
  }

  .helper-button {
    padding: 5px 10px;
    font-size: 12px;
  }

  /* Verbesserte Vorlagen für mobile Geräte */
  .template-list {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }

  .template-item {
    padding: 10px;
  }

  .template-preview {
    height: 200px;
  }

  /* Verbesserte Toast-Benachrichtigungen für mobile Geräte */
  .toast-container {
    bottom: 10px;
    right: 10px;
    max-width: calc(100% - 20px);
  }

  .toast {
    padding: 10px 12px;
    font-size: 12px;
  }

  /* Anpassungen für Schnelleingabe */
}

@media (max-width: 767px) {
  .controls {
    flex-wrap: wrap;
  }

  .controls button {
    flex: 0 0 calc(50% - 5px);
  }

  .preview-controls {
    flex-direction: column;
    gap: 10px;
  }

  .navigation-controls,
  .view-controls,
  .print-controls {
    width: 100%;
    justify-content: center;
  }

  .a4-container {
    height: calc(100vh - 300px);
  }

  /* Verbesserte mobile Thumbnails */
  .thumbnails-container {
    display: none;
  }

  .mobile-thumbnail-nav {
    display: flex;
  }

  /* Verbesserte Eingabefelder für mobile Geräte */
  .input-group label {
    font-size: 14px;
  }

  textarea {
    font-size: 14px;
    padding: 8px;
  }

  .helper-button {
    padding: 5px 10px;
    font-size: 12px;
  }

  /* Verbesserte Vorlagen für mobile Geräte */
  .template-list {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }

  .template-item {
    padding: 10px;
  }

  .template-preview {
    height: 200px;
  }

  /* Verbesserte Toast-Benachrichtigungen für mobile Geräte */
  .toast-container {
    bottom: 10px;
    right: 10px;
    max-width: calc(100% - 20px);
  }

  .toast {
    padding: 10px 12px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .sidebar {
    padding: 10px;
  }

  .input-tabs {
    margin-bottom: 10px;
  }

  .tab-button {
    padding: 8px 10px;
    font-size: 12px;
  }

  .dropzone {
    padding: 15px;
  }

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

  .print-button button {
    padding: 8px 15px;
    font-size: 14px;
  }

  .print-button svg {
    width: 20px;
    height: 20px;
  }

  /* Optimierte Thumbnails für sehr kleine Bildschirme */
  .thumbnail {
    min-width: 45px;
    height: 60px;
  }

  /* Verbesserte A4-Container-Anzeige */
  .a4-container {
    height: calc(100vh - 320px);
  }

  /* Verbesserte mobile Tabs */
  .mobile-tab-button {
    font-size: 12px;
    padding: 10px 5px;
  }

  /* Hilfeboxen für kleine Bildschirme */
  .help-box {
    padding: 8px;
    font-size: 12px;
  }

  .help-box h4 {
    font-size: 14px;
  }
}

/* Ändere die Styles für das Banner, um es mittig zu platzieren */

/* Banner für die erste Vorlage */
.template-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-5deg);
  background-color: #ff0000;
  color: white;
  padding: 10px 15px;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 2;
  width: 90%;
  margin: 0 auto;
}

/* Entferne den zweiten RADIKAL REDUZIERT Text */
.template-reduziert-text {
  display: none;
}

/* Nur die erste Vorlage hat das Hintergrundbild */
.template-item:first-child .template-preview {
  background-image: url("../Background/BG.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Alle anderen Vorlagen haben nur gelben Hintergrund */
.template-item:not(:first-child) .template-preview {
  background-image: none;
  background-color: #ffff00;
}

/* Druckstile - exakt an die aktuelle Displayversion angepasst */
@media print {
  @page {
    size: 210mm 297mm; /* Exakte A4-Größe */
    margin: 0;
  }

  html,
  body {
    width: 210mm;
    height: 297mm;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #ffff00 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Verstecke alle Elemente außer dem Druckelement */
  body > *:not(.print-only-container) {
    display: none !important;
  }

  /* Zeige nur das Druckelement an */
  .print-only-container {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 210mm !important;
    height: 297mm !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background-color: #ffff00 !important;
    z-index: 9999 !important;
    visibility: visible !important; /* Mache das Element beim Drucken sichtbar */
  }

  .print-only-container .a4-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 210mm !important;
    height: 297mm !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    overflow: visible !important;
    background-color: #ffff00 !important;
    background-image: url("../Background/BG.png") !important;
    background-repeat: no-repeat !important;
    background-position: top left !important;
    background-size: 100% 100% !important;
    transform: none !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;

    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* Always-Split-Ansicht */
.always-split .app-container {
  flex-direction: row !important;
  height: 100vh !important; /* Erzwinge 100% Höhe */
}

.always-split .sidebar {
  max-width: 75%;
  width: 60%;
  height: 100vh !important; /* Erzwinge 100% Höhe */
}

.always-split .preview-area {
  width: 40%;
  display: block !important;
  height: 100vh !important; /* Erzwinge 100% Höhe */
}

/* Verstecke die Vorschau-Kontrollen */
.preview-controls {
  display: none !important;
}

/* Verstecke die Vorschau-Hilfe */
.preview-help {
  display: none !important;
}

/* Neue Styles für Filter-Überschriften und Container */

/* Neue Styles für Warengruppen */
.product-groups-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 10px;
  /* Erhöhe den Abstand nach unten, um Überlappungen zu vermeiden */
  margin-bottom: 30px;
  /* Füge eine maximale Höhe hinzu und aktiviere vertikales Scrollen */
  max-height: 300px;
  overflow-y: auto;
}

.product-group-tag {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-left: 4px solid #ffcc00;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  min-width: fit-content;
  /* Stelle sicher, dass die Tags nicht zu breit werden */
  max-width: calc(100% - 20px);
}

.product-group-tag:hover {
  background-color: #fffbeb;
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.product-group-tag.selected {
  background-color: #fffbeb;
  border-left-color: #ff0000;
}

.product-group-tag.inactive {
  background-color: #f0f0f0;
  border-left-color: #cccccc;
  color: #777777;
}

.product-group-count {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ff0000;
  color: white;
  border-radius: 12px;
  min-width: 22px;
  height: 22px;
  font-size: 12px;
  font-weight: bold;
  margin-left: 8px;
  padding: 0 6px;
}

.product-group-tag.inactive .product-group-count {
  background-color: #999999;
}

/* Scrollbar für die Warengruppen-Container */
.product-groups-container::-webkit-scrollbar {
  height: 6px;
}

.product-groups-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.product-groups-container::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 3px;
}

.product-groups-container::-webkit-scrollbar-thumb:hover {
  background: #ccc;
}

/* Füge diese neuen Styles für den auf- und zuklappbaren Warengruppen-Bereich hinzu */
.filter-heading {
  width: 100%;
  text-align: left;
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  color: var(--text-color);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 5px;
  cursor: pointer; /* Zeigt an, dass die Überschrift klickbar ist */
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding-left: 10px;
}

.filter-heading::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--text-color);
  transition: transform 0.3s ease;
}

.filter-heading.collapsed::after {
  transform: rotate(-90deg);
}

/* Spezifische Styles für Abteilungen und Warengruppen */
#abteilungenToggle {
  border-left-color: #ffcc00;
  margin: 2px 0;
  padding: 8px 15px;
}

#warengruppenToggle {
  border-left-color: #ff0000;
  margin: 2px 0;
  padding: 8px 15px;
}

/* Zusätzliches Icon für bessere Erkennbarkeit */
.filter-heading::before {
  content: "▼";
  margin-right: 8px;
  font-size: 12px;
  transition: transform 0.3s ease;
}

.filter-heading.collapsed::before {
  content: "▶";
}

/* Abteilungskreise */
.circles-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0;
  padding: 5px;
  padding-top: 10px; /* Mehr Platz oben */
  width: 100%;
  overflow: visible;
  position: relative;
  z-index: 1;
}

.abt-circle-container {
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease;
  margin: 0;
  padding: 0;
  overflow: visible;
  margin-top: 10px; /* Abstand nach oben */
  margin-right: 5px; /* Von 10px auf 5px reduziert */
  z-index: 5;
}

.abt-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #ffff00;
  border: 2px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  position: relative;
  transition: background-color 0.3s ease;
}

/* Inaktiver (abgewählter) Abteilungskreis */
.abt-circle-inactive {
  background-color: #cccccc;
}

/* Verbessere die Styles für inaktive Abteilungskreise */
.abt-circle-inactive {
  background-color: #cccccc !important;
  cursor: not-allowed !important;
}

/* Ändere den Cursor für Container mit inaktiven Kreisen */
.abt-circle-container:has(.abt-circle-inactive) {
  cursor: not-allowed !important;
}

/* Fallback für Browser, die :has nicht unterstützen */
.abt-circle-container .abt-circle-inactive {
  cursor: not-allowed !important;
}

/* Füge einen visuellen Hinweis hinzu, dass inaktive Kreise nicht klickbar sind */
.abt-circle-inactive + .abt-circle-count {
  opacity: 0.7;
}

/* Ändere die Abt-Circle-Count von einem Kreis zu einer Pillenform */
.abt-circle-count {
  position: absolute;
  top: -8px;
  right: -5px; /* Von -15px auf -5px geändert, um das Badge näher am Kreis zu positionieren */
  background-color: #ff0000;
  color: white;
  border-radius: 12px;
  min-width: 20px;
  height: 20px;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border: 1px solid white;
  padding: 0 5px;
  z-index: 20;
  transform: translateY(0);
  overflow: visible;
}

.no-data-message {
  color: #666;
  font-style: italic;
  text-align: center;
  width: 100%;
}

/* Entferne die alten Helper-Buttons */
.helper-button {
  display: none;
}

/* Vorlagen */
.template-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.template-item {
  padding: 15px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background-color: white;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.template-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.template-item.selected {
  border: 2px solid var(--primary-color);
  box-shadow: 0 4px 8px rgba(255, 0, 0, 0.2);
  transform: translateY(-2px);
}

.template-preview {
  height: 280px;
  background-color: #ffff00;
  margin-bottom: 0;
  border-radius: var(--border-radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  aspect-ratio: 210 / 297;
  padding: 0;
  background-image: url("../Background/BG.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.template-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.template-item h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: var(--text-color);
}

.template-item p {
  margin: 0 0 15px 0;
  font-size: 14px;
  color: var(--text-light);
}

.template-button {
  background-color: var(--secondary-color);
  border: none;
  padding: 6px 12px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  font-size: 14px;
  transition: all var(--transition-normal);
}

.template-button:hover {
  background-color: var(--primary-color);
  color: white;
}

/* Abteilungskreise für Vorlagen */
.abt-circles-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.abt-circles-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 10px;
}

/* Steuerungselemente */
.controls {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  gap: 10px;
}

.controls button {
  flex: 1;
  padding: 10px;
  margin: 0;
  font-size: 16px;
  border: none;
  background-color: var(--secondary-color);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.controls button:hover {
  background-color: var(--secondary-hover);
}

.controls button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.controls button svg {
  width: 24px;
  height: 24px;
  fill: var(--text-light);
}

.controls button:hover svg {
  fill: var(--primary-color);
}

.controls button.primary {
  background-color: var(--primary-color);
  color: white;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.controls button.primary svg {
  fill: white;
}

.controls button.primary:hover {
  background-color: var(--primary-hover);
}

/* Drucken-Button in der Seitenleiste */
.print-button {
  display: none;
}

/* Pagination in der Seitenleiste mit verbesserter Visualisierung */
.pagination-info {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--text-light);
  letter-spacing: 0.5px;
}

.pagination-info span {
  margin: 0 3px;
}

.pagination-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 10px;
}

.pagination-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ccc;
  transition: all var(--transition-normal);
}

.pagination-dot.active {
  background-color: var(--primary-color);
  transform: scale(1.2);
}

/* Status mit verbesserter Fehleranzeige */
#status {
  margin-top: 15px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: var(--border-radius-sm);
  font-size: 14px;
  color: var(--text-light);
  transition: all var(--transition-normal);
}

#status.error {
  background-color: #ffebee;
  color: var(--error-color);
  border-left: 3px solid var(--error-color);
}

#status.success {
  background-color: #e8f5e9;
  color: var(--success-color);
  border-left: 3px solid var(--success-color);
}

#status.warning {
  background-color: #fff8e1;
  color: var(--warning-color);
  border-left: 3px solid var(--warning-color);
}

/* Toast-Benachrichtigungen */
.toast-container {
  position: fixed;
  bottom: 20px; /* Geändert von top zu bottom */
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column-reverse; /* Geändert von column zu column-reverse */
  gap: 10px;
  max-width: 300px;
}

.toast {
  padding: 12px 16px;
  border-radius: var(--border-radius-sm);
  color: white;
  font-size: 14px;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  animation: slideIn 0.3s ease forwards;
  opacity: 0;
  transform: translateX(50px);
}

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOut {
  to {
    opacity: 0;
    transform: translateX(50px);
  }
}

.toast.error {
  background-color: var(--error-color);
}

.toast.success {
  background-color: var(--success-color);
}

.toast.warning {
  background-color: var(--warning-color);
}

.toast.info {
  background-color: var(--info-color);
}

.toast-close {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 16px;
  margin-left: 10px;
  opacity: 0.8;
}

.toast-close:hover {
  opacity: 1;
}

/* Vorschaubereich */
.preview-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 20px 20px 20px; /* Entferne das obere Padding (war 20px) */
  overflow: auto;
  position: relative;
  min-height: 100vh; /* Stelle sicher, dass der Vorschaubereich mindestens die Höhe des Viewports hat */
}

/* Vorschau-Kontrollen */
.preview-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
}

.view-controls,
.print-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.control-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--border-radius-sm);
  transition: all var(--transition-normal);
}

.control-button:hover {
  background-color: var(--secondary-color);
}

.control-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.control-button svg {
  width: 24px;
  height: 24px;
  fill: var(--text-light);
}

.control-button:hover svg {
  fill: var(--primary-color);
}

.control-button.primary {
  background-color: var(--primary-color);
  color: white;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.control-button.primary svg {
  fill: white;
}

.control-button.primary:hover {
  background-color: var(--primary-hover);
}

/* Miniaturansichten für Navigation - Dynamische Höhe */
.thumbnails-container {
  display: flex;
  overflow-x: auto;
  overflow-y: visible; /* Wichtig: Erlaube vertikales Überlaufen für gezoomte Thumbnails */
  gap: 10px;
  padding: 0 0 0 var(--thumbnail-container-padding); /* Entferne das untere Padding komplett */
  margin: 0 0 0 10px; /* Entferne den unteren Margin komplett */
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
  /* Deutlich erhöhte Höhe, um Platz für das gezoomte Thumbnail zu schaffen */
  height: auto;
  min-height: calc(var(--thumbnail-height) * var(--thumbnail-active-scale) + 40px); /* Reduziere den zusätzlichen Platz von 60px auf 40px */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  position: relative;
  scroll-snap-type: x proximity;
  will-change: transform;
  /* Verhindere vertikalen Scrollbalken */
  contain: layout paint;
}

.thumbnails-container::-webkit-scrollbar {
  height: 6px;
}

.thumbnails-container::-webkit-scrollbar-track {
  background: transparent;
}

.thumbnails-container::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}

/* Thumbnail-Styles mit dynamischer Höhe */
.thumbnail {
  min-width: 80px;
  height: var(--thumbnail-height);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  background-color: #ffff00;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  color: var(--text-light);
  box-sizing: border-box;
  margin: 35px 0 5px 2px; /* Reduziere den unteren Abstand von 15px auf 5px */
  scroll-snap-align: center;
  flex-shrink: 0;
  /* Verbessere die Rendering-Performance */
  contain: layout paint;
  /* Stelle sicher, dass das aktive Thumbnail nicht abgeschnitten wird */
  transform-origin: center center;
}

.thumbnail.active {
  border: 2px solid var(--primary-color);
  transform: scale(var(--thumbnail-active-scale));
  z-index: 10; /* Höherer z-index für bessere Sichtbarkeit */
  box-shadow: var(--shadow-md);
}

.thumbnail:hover:not(.active) {
  border-color: #999;
  transform: scale(1.05);
}

.thumbnail-number {
  position: absolute;
  top: 2px;
  left: 2px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 2px;
  z-index: 2;
}

.thumbnail-bestand {
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: var(--primary-color);
}

.thumbnail-bestand-details {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 8px;
  color: var(--text-color);
  padding: 2px;
  background-color: rgba(255, 255, 255, 0.8);
  margin: 0 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bestand-kategorie {
  display: block;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
}

.bestand-kategorie\.79 {
  background-color: #4caf50;
  color: white;
}

.bestand-kategorie\.1012 {
  background-color: #2196f3;
  color: white;
}

.bestand-kategorie\.1324 {
  background-color: #ff9800;
  color: white;
}

.bestand-kategorie\.24 {
  background-color: #f44336;
  color: white;
}

.bestand-kategorie\.oWE {
  background-color: #9c27b0;
  color: white;
}

.thumbnail-artnr {
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  color: #000;
}

/* A4 Container */
.a4-container {
  position: relative;
  aspect-ratio: 210 / 297; /* A4 Seitenverhältnis */
  height: calc(100vh - 250px); /* Erhöht von 220px auf 250px */
  max-height: 95vh;
  width: auto;
  max-width: 100%;
  margin: auto;
  background: #ffff00 url("../Background/BG.png") no-repeat top left;
  background-size: 100% auto;
  border: 1px solid black;
  transform-origin: top left;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-normal);
}

.inhalt {
  position: relative;
  height: 100%;
  width: 100%;
  font-family: "MM Headline Pro WebTT Regular", Arial, sans-serif;
}



.hersteller {
  font-size: 5vh;
  font-weight: bold;
  margin-bottom: 0vh;
}

.dynamische-linie {
  position: relative;
  width: calc(100% - 50px); /* Reduziere die Breite um den Durchmesser des Kreises */
  height: 3px;
  background-color: black;
  margin-top: 0.1vh;
  margin-bottom: 0.5vh;
}

.bezeichnung {
  font-size: 2.5vh;
  font-weight: bold;
  margin-top: 0.3vh;
  margin-bottom: 0.3vh;
}

.warengruppe {
  font-size: 2vh;
}

/* 🎯 MILLIMETERGENAU: Sonderheit-Bereich - Konsolidiert */
.sonderheit {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 45px; /* Vergrößert von 38px auf 45px */
  font-weight: 600;
  color: red !important;
  width: 95%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 0.95;
  max-height: 4em;
  height: calc(4 * 1em * 0.95 + 20px);
  padding-top: 10px;
  padding-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  top: 505px; /* Exakte Position für Bildschirm */
}

@media print {
  .sonderheit {
    top: 126mm !important; /* Exakte Position für Druck */
  }
}

.sonderheit[contenteditable="true"] {
  /* Zusätzliche Styles für editierbare Sonderheit, falls benötigt */
}

/* Editierbare Elemente */
[contenteditable="true"] {
  cursor: text;
  transition: background-color 0.2s ease;
  outline: none;
}

[contenteditable="true"]:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

[contenteditable="true"]:focus {
  background-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.3);
}

/* Hinweis für die Bearbeitung */
.edit-hint {
  text-align: center;
  margin-top: 10px;
  color: #666;
  font-style: italic;
  font-size: 14px;
}

/* Neu positionierter AbtNr-Kreis am Ende der dynamischen Linie */
.abt-nr-circle {
  position: absolute;
  top: 0;
  right: -66px !important; /* Feintuning: Linie endet exakt am linken Rand des Kreises */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  z-index: 10;
  transform: translate(0, -50%);
}

/* ================================
   🎯 PROPORTIONALES A4-PAPIER-SYSTEM
   Alle Schriftgrößen skalieren wie echtes Papier
   Layout und Positionen bleiben unverändert
   ================================ */

/* BASIS: Container definiert proportionale Referenz-Schriftgröße */
.a4-container {
  /* KRITISCHE BASIS-GRÖßE: Diese bestimmt alle Proportionen */
  /* Smart-Skalierung: 8px bei kleinen Screens, 4% der Viewport-Breite, max 24px */
  font-size: clamp(8px, 4vw, 24px) !important;
}

/* ALLE INHALTE: Erben die proportionale Basis und verwenden em-Einheiten */
.a4-container .inhalt {
  /* Erbt die Basis-Schriftgröße vom Container für proportionale Skalierung */
  font-size: inherit !important;
}

/* 🏷️ HERSTELLER - Proportional zur Basis */
.a4-container .inhalt .hersteller,
.a4-container .hersteller {
  font-size: 1.8em !important; /* 1.8 * Basis = proportional */
}

/* 🏢 BEZEICHNUNG - Proportional zur Basis */
.a4-container .inhalt .bezeichnung,
.a4-container .bezeichnung {
  font-size: 1.6em !important; /* 1.6 * Basis = proportional */
}

/* 🏷️ WARENGRUPPE - Proportional zur Basis */
.a4-container .inhalt .warengruppe,
.a4-container .warengruppe {
  font-size: 1.2em !important; /* 1.2 * Basis = proportional */
}

/* 📱 QR-CODE - Leicht unterhalb des Abt-Nr-Kreises */
.a4-container .inhalt .qr-code-container {
  position: absolute;
  right: -22px; /* Minimal nach links verschoben */
  top: 85px; /* Noch ein kleines Stück weiter nach unten */
  width: 80px;
  height: 80px;
  z-index: 10;
}

.a4-container .inhalt .qr-code-container a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  cursor: pointer;
}

.a4-container .inhalt .qr-code-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: none; /* Kein Rahmen mehr nötig */
  border-radius: 4px;
  background: transparent; /* Transparenter Hintergrund */
  display: block;
}

body.dark-mode .a4-container .inhalt .qr-code-container img {
  background: transparent; /* Auch im Dark-Mode transparent */
}

/* 🔴 ABTEILUNGSNUMMER-KREIS - Proportional */
.a4-container .inhalt .abt-nr-circle,
.a4-container .abt-nr-circle {
  font-size: 1.4em !important; /* 1.4 * Basis = proportional */
  width: 2.0em !important; /* 2.0 * Schriftgröße = proportional - kleiner gemacht */
  height: 2.0em !important;
}

/* 🦶 FOOTER-BEREICH - Alle Elemente proportional */
.a4-container .footer-line,
.a4-container .footer-item,
.a4-container .druckdatum,
.a4-container .ean,
.a4-container .artnr {
  font-size: 1.0em !important; /* 1.0 * Basis = proportional */
}

/* Neue Fußzeile mit flexibler Anordnung - proportional zum A4-Blatt */
.footer-line {
  position: absolute;
  bottom: 0.5%; /* Kleiner Abstand zum Rand */
  left: 0;
  right: 0;
  display: flex;
  justify-content: flex-start; /* Beginne links statt space-between */
  align-items: center;
  padding: 0 3%; /* 3% zusätzlicher Rand links und rechts */
  height: 3%; /* Verdoppelt von 1.5% auf 3% für größere Schrift */
  width: 100%;
  overflow: visible; /* Verhindert Abschneiden */
  box-sizing: border-box;
}

.footer-item {
  font-size: 1.6em; /* Verdoppelt von 0.8em auf 1.6em */
  color: black;
  white-space: nowrap;
  overflow: visible;
  flex: 0 0 auto; /* Nicht wachsen oder schrumpfen */
}

.druckdatum {
  text-align: left;
}

.ean {
  text-align: left;
  color: black !important;
  font-size: 1.2vh !important; /* Gleiche Größe wie andere Footer-Elemente */
  white-space: nowrap !important; /* Verhindert Zeilenumbrüche */
  overflow: visible !important;
  text-overflow: clip !important;
}

.barcode-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.barcode-svg {
  height: 100%;
  max-width: 100%;
}

/* Entferne die Regel, die die ArtNr rechtsbündig macht */
.artnr {
  text-align: left;
  white-space: nowrap; /* Verhindert Umbrüche */
  overflow: visible; /* Verhindert Abschneiden */
}

/* Stelle sicher, dass die EAN/ArtNr-Spalte linksbündig ist */
.database-table th:nth-child(1),
.database-table td:nth-child(1) {
  text-align: left !important;
}

/* Stelle sicher, dass die ArtNr in der Artikelinfo linksbündig ist */
.article-info .artnr {
  text-align: left !important;
}

/* Split-Screen-Ansicht */
.split-screen .app-container {
  flex-direction: row !important;
}

.split-screen .sidebar {
  max-width: 75%;
  width: 60%;
  height: 100vh;
}

.split-screen .preview-area {
  width: 40%;
  display: block !important;
}

.split-screen .mobile-tabs {
  display: none !important;
}

.split-view-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  z-index: 100;
  transition: all var(--transition-normal);
}

.split-view-toggle:hover {
  background-color: var(--primary-hover);
  transform: scale(1.1);
}

.split-view-toggle svg {
  width: 24px;
  height: 24px;
  fill: white;
}

/* Mobile Tab Navigation */
.mobile-tabs {
  display: none;
  background-color: #f9f9f9;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 10;
}

.mobile-tab-button {
  flex: 1;
  padding: 8px;
  text-align: center;
  background: none;
  border: none;
  font-weight: 500;
  color: var(--text-light);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.mobile-tab-button.active {
  color: #ff6b6b;
  border-bottom: 3px solid #ff6b6b;
  background: none !important;
}

.mobile-tab-content {
  display: none;
}

.mobile-tab-content.active {
  display: block;
}

.tab-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Neue mobile Thumbnail-Navigation */
.mobile-thumbnail-nav {
  display: none;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  padding: 5px;
  background-color: var(--secondary-color);
  border-radius: var(--border-radius-sm);
}

.mobile-thumbnail-button {
  background: none;
  border: none;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-thumbnail-button svg {
  width: 20px;
  height: 20px;
  fill: var(--text-light);
}

.mobile-thumbnail-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mobile-thumbnail-info {
  margin: 0 10px;
  font-size: 14px;
  color: var(--text-color);
  font-weight: bold;
}

/* Highlight für geänderte Elemente */
@keyframes highlight {
  0% {
    background-color: rgba(255, 0, 0, 0.2);
  }
  100% {
    background-color: transparent;
  }
}

.highlight-change {
  animation: highlight 2s ease;
}

/* Responsive Styles - VERBESSERT */
@media (min-width: 1024px) {
  .app-container {
    flex-direction: row;
  }

  .mobile-tabs {
    display: none;
  }
}

@media (max-width: 1023px) {
  .app-container {
    flex-direction: column;
  }

  .sidebar {
    max-width: 100%;
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 2px solid var(--border-color);
    padding: 15px;
  }

  .preview-area {
    padding: 10px;
  }

  .a4-container {
    height: calc(100vh - 250px);
  }

  .split-view-toggle {
    display: none;
  }

  /* Verbesserte mobile Thumbnails */
  .thumbnails-container {
    height: auto;
    min-height: calc(80px * var(--thumbnail-active-scale) + 40px); /* Angepasste Höhe für mobile Ansicht */
    padding: 0 0 0 10px;
    margin-bottom: 0;
  }

  .thumbnail {
    min-width: 60px;
    height: 80px;
    margin: 35px 0 5px 2px;
  }

  .thumbnail.active {
    transform: scale(var(--thumbnail-active-scale));
  }

  .thumbnail-bestand {
    font-size: 14px;
  }

  .thumbnail-artnr {
    font-size: 9px;
  }

  /* Verbesserte mobile Tabs */
  .mobile-tabs {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: white;
  }

  .mobile-tab-button {
    flex: 1;
    padding: 8px;
    text-align: center;
    background: none;
    border: none;
    font-weight: 500;
    color: var(--text-light);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }

  /* Anpassungen für Schnelleingabe */

  /* Verbesserte Eingabefelder für mobile Geräte */
  .input-group label {
    font-size: 14px;
  }

  textarea {
    font-size: 14px;
    padding: 8px;
  }

  .helper-button {
    padding: 5px 10px;
    font-size: 12px;
  }

  /* Verbesserte Vorlagen für mobile Geräte */
  .template-list {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }

  .template-item {
    padding: 10px;
  }

  .template-preview {
    height: 200px;
  }

  /* Verbesserte Toast-Benachrichtigungen für mobile Geräte */
  .toast-container {
    bottom: 10px;
    right: 10px;
    max-width: calc(100% - 20px);
  }

  .toast {
    padding: 10px 12px;
    font-size: 12px;
  }

  /* Anpassungen für Schnelleingabe */
}

@media (max-width: 767px) {
  .controls {
    flex-wrap: wrap;
  }

  .controls button {
    flex: 0 0 calc(50% - 5px);
  }

  .preview-controls {
    flex-direction: column;
    gap: 10px;
  }

  .navigation-controls,
  .view-controls,
  .print-controls {
    width: 100%;
    justify-content: center;
  }

  .a4-container {
    height: calc(100vh - 300px);
  }

  /* Verbesserte mobile Thumbnails */
  .thumbnails-container {
    display: none;
  }

  .mobile-thumbnail-nav {
    display: flex;
  }

  /* Verbesserte Eingabefelder für mobile Geräte */
  .input-group label {
    font-size: 14px;
  }

  textarea {
    font-size: 14px;
    padding: 8px;
  }

  .helper-button {
    padding: 5px 10px;
    font-size: 12px;
  }

  /* Verbesserte Vorlagen für mobile Geräte */
  .template-list {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }

  .template-item {
    padding: 10px;
  }

  .template-preview {
    height: 200px;
  }

  /* Verbesserte Toast-Benachrichtigungen für mobile Geräte */
  .toast-container {
    bottom: 10px;
    right: 10px;
    max-width: calc(100% - 20px);
  }

  .toast {
    padding: 10px 12px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .sidebar {
    padding: 10px;
  }

  .input-tabs {
    margin-bottom: 10px;
  }

  .tab-button {
    padding: 8px 10px;
    font-size: 12px;
  }

  .dropzone {
    padding: 15px;
  }

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

  .print-button button {
    padding: 8px 15px;
    font-size: 14px;
  }

  .print-button svg {
    width: 20px;
    height: 20px;
  }

  /* Optimierte Thumbnails für sehr kleine Bildschirme */
  .thumbnail {
    min-width: 45px;
    height: 60px;
  }

  /* Verbesserte A4-Container-Anzeige */
  .a4-container {
    height: calc(100vh - 320px);
  }

  /* Verbesserte mobile Tabs */
  .mobile-tab-button {
    font-size: 12px;
    padding: 10px 5px;
  }

  /* Hilfeboxen für kleine Bildschirme */
  .help-box {
    padding: 8px;
    font-size: 12px;
  }

  .help-box h4 {
    font-size: 14px;
  }
}

/* Ändere die Styles für das Banner, um es mittig zu platzieren */

/* Banner für die erste Vorlage */
.template-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-5deg);
  background-color: #ff0000;
  color: white;
  padding: 10px 15px;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 2;
  width: 90%;
  margin: 0 auto;
}

/* Entferne den zweiten RADIKAL REDUZIERT Text */
.template-reduziert-text {
  display: none;
}

/* Nur die erste Vorlage hat das Hintergrundbild */
.template-item:first-child .template-preview {
  background-image: url("../Background/BG.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Alle anderen Vorlagen haben nur gelben Hintergrund */
.template-item:not(:first-child) .template-preview {
  background-image: none;
  background-color: #ffff00;
}

/* Druckstile - exakt an die aktuelle Displayversion angepasst */
@media print {
  @page {
    size: 210mm 297mm; /* Exakte A4-Größe */
    margin: 0;
  }

  html,
  body {
    width: 210mm;
    height: 297mm;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #ffff00 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Verstecke alle Elemente außer dem Druckelement */
  body > *:not(.print-only-container) {
    display: none !important;
  }

  /* Zeige nur das Druckelement an */
  .print-only-container {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 210mm !important;
    height: 297mm !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background-color: #ffff00 !important;
    z-index: 9999 !important;
    visibility: visible !important; /* Mache das Element beim Drucken sichtbar */
  }

  .print-only-container .a4-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 210mm !important;
    height: 297mm !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    overflow: visible !important;
    background-color: #ffff00 !important;
    background-image: url("../Background/BG.png") !important;
    background-repeat: no-repeat !important;
    background-position: top left !important;
    background-size: 100% 100% !important;
    transform: none !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;

    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* Always-Split-Ansicht */
.always-split .app-container {
  flex-direction: row !important;
  height: 100vh !important; /* Erzwinge 100% Höhe */
}

.always-split .sidebar {
  max-width: 75%;
  width: 60%;
  height: 100vh !important; /* Erzwinge 100% Höhe */
}

.always-split .preview-area {
  width: 40%;
  display: block !important;
  height: 100vh !important; /* Erzwinge 100% Höhe */
}

/* Verstecke die Vorschau-Kontrollen */
.preview-controls {
  display: none !important;
}

/* Verstecke die Vorschau-Hilfe */
.preview-help {
  display: none !important;
}

/* Neue Styles für Filter-Überschriften und Container */

/* Neue Styles für Warengruppen */
.product-groups-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 10px;
  /* Erhöhe den Abstand nach unten, um Überlappungen zu vermeiden */
  margin-bottom: 30px;
  /* Füge eine maximale Höhe hinzu und aktiviere vertikales Scrollen */
  max-height: 300px;
  overflow-y: auto;
}

.product-group-tag {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-left: 4px solid #ffcc00;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  min-width: fit-content;
  /* Stelle sicher, dass die Tags nicht zu breit werden */
  max-width: calc(100% - 20px);
}

.product-group-tag:hover {
  background-color: #fffbeb;
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.product-group-tag.selected {
  background-color: #fffbeb;
  border-left-color: #ff0000;
}

.product-group-tag.inactive {
  background-color: #f0f0f0;
  border-left-color: #cccccc;
  color: #777777;
}

.product-group-count {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ff0000;
  color: white;
  border-radius: 12px;
  min-width: 22px;
  height: 22px;
  font-size: 12px;
  font-weight: bold;
  margin-left: 8px;
  padding: 0 6px;
}

.product-group-tag.inactive .product-group-count {
  background-color: #999999;
}

/* Scrollbar für die Warengruppen-Container */
.product-groups-container::-webkit-scrollbar {
  height: 6px;
}

.product-groups-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.product-groups-container::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 3px;
}

.product-groups-container::-webkit-scrollbar-thumb:hover {
  background: #ccc;
}

/* Füge diese neuen Styles für den auf- und zuklappbaren Warengruppen-Bereich hinzu */
.filter-heading {
  width: 100%;
  text-align: left;
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  color: var(--text-color);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 5px;
  cursor: pointer; /* Zeigt an, dass die Überschrift klickbar ist */
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding-left: 10px;
}

.filter-heading::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--text-color);
  transition: transform 0.3s ease;
}

.filter-heading.collapsed::after {
  transform: rotate(-90deg);
}

.collapsible-content {
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.3s ease, 
              margin 0.3s ease,
              padding 0.3s ease;
  max-height: 250px;
  opacity: 1;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  position: relative;
  z-index: 1;
}

.collapsible-content.collapsed {
  max-height: 0 !important;
  opacity: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  /* Entferne display: none für flüssige Animation */
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.3s ease, 
              margin 0.3s ease,
              padding 0.3s ease !important;
}

#preview-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#preview-container {
  aspect-ratio: 1 / 1.414;
  width: 100%;
  max-width: calc(100vh * 0.65 / 1.414);
  max-height: 65vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#preview {
  width: 100%;
  height: 100%;
  transform: scale(1);
  transform-origin: center center;
}

#preview {
  width: 100%;
  height: 100%;
  transform: scale(1);
  transform-origin: center center;
}

.a4-container {
  position: relative;
  aspect-ratio: 210 / 297; /* A4 Seitenverhältnis */
  height: calc(100vh - 250px); /* Erhöht von 220px auf 250px */
}

/* Ensure consistent top margin for the first heading in each tab */
.template-list,
.dropzone {
  margin-top: 10px;
}

/* Füge diese Stile am Ende der CSS-Datei hinzu */

/* Stil für editierbare Elemente */
[contenteditable="true"] {
  cursor: text;
  transition: background-color 0.2s;
  outline: none;
}

[contenteditable="true"]:hover {
  background-color: rgba(255, 255, 0, 0.1);
}

[contenteditable="true"]:focus {
  background-color: rgba(255, 255, 0, 0.2);
}

/* Stil für den Bearbeitungshinweis */
.edit-hint {
  text-align: center;
  margin-top: 10px;
  font-style: italic;
  color: #666;
}

/* Stil für den Sonderheiten-Text mit Zeilenbegrenzung */
.sonderheit[contenteditable="true"] {
  max-height: 3em; /* Höhe für ca. 3 Zeilen */
  overflow-y: auto;
  line-height: 1.2em;
}

/* Ändere die bestehenden Sonderheit-Stile, um den Scrollbalken zu entfernen */
.sonderheit {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 45px; /* Vergrößert von 38px auf 45px */
  font-weight: 600;
  color: red !important;
  width: 95%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 0.95;
  max-height: 4em;
  height: calc(4 * 1em * 0.95 + 20px);
  padding-top: 10px;
  padding-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  top: 505px; /* Exakte Position für Bildschirm */
}

@media print {
  .sonderheit {
    top: 126mm !important; /* Exakte Position für Druck */
  }
}

.sonderheit[contenteditable="true"] {
  /* Zusätzliche Styles für editierbare Sonderheit, falls benötigt */
}

/* Füge am Ende der CSS-Datei die Styles für die Datenbank-UI hinzu */

/* Datenbank-Tab Styles */
.database-controls {
  display: flex;
  flex-direction: column;
  gap: 1px; /* Minimal wie zwischen Abteilungsfilter-Button und AbtNr-Buttons */
  margin-bottom: 0px; /* Direkt an .database-table-container grenzen */
  margin-top: 0; /* Kein negativer margin-top mehr nötig */
  padding: 0 var(--spacing-lg) 1px var(--spacing-lg); /* Gleicher minimaler Abstand wie zwischen Filter-Elementen */
  transition: gap 0.3s ease; /* Smooth Gap-Änderung */
}

/* WICHTIG: Reduziertes Gap wenn Abteilungsfilter zugeklappt ist */
.database-controls.compact-gap {
  gap: 0px !important; /* Absolut minimal für zugeklappten Zustand */
}

.database-buttons {
  display: flex;
  justify-content: center; /* Buttons mittig ausrichten */
  flex-wrap: wrap;
  gap: 10px;
}

.database-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background-color: var(--secondary-color);
  border: none;
  border-radius: var(--border-radius-sm);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.database-button:hover {
  background-color: var(--secondary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.database-button svg {
  width: 18px;
  height: 18px;
  fill: var(--text-color);
}

.database-button.danger {
  background-color: #ffebee;
  color: var(--error-color);
}

.database-button.danger:hover {
  background-color: #ffcdd2;
}

.database-button.danger svg {
  fill: var(--error-color);
}

.database-search {
  position: relative;
  display: flex;
  gap: 5px;
}

.database-search input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: 14px;
}

.database-search input:focus {
  outline: none;
  border-color: #2196f3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

.database-search button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background-color: var(--secondary-color);
  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.database-search button:hover {
  background-color: var(--secondary-hover);
}

.database-search button svg {
  width: 18px;
  height: 18px;
  fill: var(--text-color);
}

.search-action-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.search-action-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.search-action-button svg {
  width: 16px;
  height: 16px;
  fill: var(--text-color);
  transition: all 0.2s ease;
}

.search-action-button.search-mode svg.search-icon {
  display: block;
}

.search-action-button.search-mode svg.clear-icon {
  display: none;
}

.search-action-button.clear-mode svg.search-icon {
  display: none;
}

.search-action-button.clear-mode svg.clear-icon {
  display: block;
}

body.dark-mode .search-action-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .search-action-button svg {
  fill: var(--text-color);
}

/* Abteilungsfilter-Bereich */
.department-filters {
  margin-bottom: 0px; /* Kein zusätzlicher margin, gap in .database-controls reicht */
}

/* Kompakter Abstand wenn Abteilungsfilter zugeklappt ist */
.department-filters .filter-heading.collapsed {
  margin-bottom: 3px; /* Kleiner, angemessener Abstand für optische Trennung */
  margin-top: 2px;
  padding-bottom: 2px;
  transition: margin 0.3s ease, padding 0.3s ease;
}

/* Zusätzlich: Reduziere den margin-bottom des gesamten Containers wenn zugeklappt */
.department-filters:has(#abteilungsfilterToggle.collapsed) {
  margin-bottom: 0;
}

/* Fallback ohne :has() Support für ältere Browser */
.department-filters.collapsed-container {
  margin-bottom: 0;
}

/* Reduziere das Gap in database-controls wenn Abteilungsfilter zugeklappt ist */
.database-controls:has(.department-filters .filter-heading.collapsed) {
  gap: 0px; /* Absolut minimal für zugeklappten Zustand */
}

/* Fallback für Browser ohne :has() Support */
.database-controls.compact-gap {
  gap: 0px !important; /* Absolut minimal für zugeklappten Zustand */
}

.filter-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
  margin-bottom: 8px;
}

.department-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px; /* Kleiner Abstand zur nächsten Sektion */
  margin-top: 4px; /* Kleiner Abstand nach oben */
  padding-top: 4px; /* Minimaler Padding für Hover-Effekte */
}

.department-filter-button {
  background-color: var(--secondary-color);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 6px 12px;
  font-size: 13px;
  box-sizing: border-box;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-normal);
  color: var(--text-color);
  min-width: 40px;
  text-align: center;
}

.department-filter-button:hover {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.department-filter-button.active {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
  box-shadow: var(--shadow-sm);
}

.department-filter-button.all-button {
  background-color: var(--secondary-color);
  color: var(--text-color);
  border-color: var(--border-color);
  font-weight: 500;
}

.department-filter-button.all-button:hover {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.department-filter-button.all-button.active {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
  box-shadow: var(--shadow-sm);
}

.department-filter-button.altware-button {
  background-color: #424242;
  border: 2px solid #666;
  border-radius: var(--border-radius-sm);
  padding: 6px 12px;
  font-size: 13px;
  box-sizing: border-box;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-normal);
  color: white !important;
  min-width: 40px;
  text-align: center;
}

.department-filter-button.altware-button:hover {
  background-color: #555;
  color: white !important;
  border-color: #777;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.department-filter-button.altware-button.active {
  background-color: #0d47a1;
  color: white !important;
  border-color: #0d47a1;
  box-shadow: var(--shadow-sm);
}

.department-filter-button.altware-button.active:hover {
  background-color: #1565c0;
  color: white !important;
  border-color: #1565c0;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

@keyframes altwarePulse {
  0%, 100% { 
    transform: scale(1);
    opacity: 1;
  }
  50% { 
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.database-status-mini {
  font-size: 12px;
  color: var(--text-light);
  text-align: right;
  font-style: italic;
}

/* Dark Mode für Abteilungsfilter */
body.dark-mode .filter-label {
  color: #e0e0e0;
}

body.dark-mode .department-filter-button {
  background-color: #444;
  border-color: #555;
  color: #e0e0e0;
}

body.dark-mode .department-filter-button:hover {
  background-color: var(--primary-color);
  color: white;
}

body.dark-mode .department-filter-button.active {
  background-color: var(--primary-color);
  color: white;
}

body.dark-mode .database-status-mini {
  color: #aaa;
}

body.dark-mode .department-filter-button.altware-button {
  background-color: #424242;
  border-color: #666;
  color: white !important;
}

body.dark-mode .department-filter-button.altware-button:hover {
  background-color: #555;
  color: white !important;
  border-color: #777;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

body.dark-mode .department-filter-button.altware-button.active {
  background-color: #ff6b6b;
  color: white !important;
  border-color: #ff6b6b;
  box-shadow: var(--shadow-sm);
}

body.dark-mode .department-filter-button.altware-button.active:hover {
  background-color: #ff5252;
  color: white !important;
  border-color: #ff5252;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

#databaseStatus {
  padding: 10px;
  margin-bottom: 15px;
  border-radius: var(--border-radius-sm);
  font-size: 14px;
}

#databaseStatus.info {
  background-color: #e3f2fd;
  color: #1976d2;
  border-left: 3px solid #1976d2;
}

#databaseStatus.success {
  background-color: #e8f5e9;
  color: var(--success-color);
  border-left: 3px solid var(--success-color);
}

#databaseStatus.error {
  background-color: #ffebee;
  color: var(--error-color);
  border-left: 3px solid var(--error-color);
}

/* Füge diese Styles für die Datenbank-Tabelle hinzu, um die Spaltenbreiten zu optimieren */
.database-table {
  width: 100%;
  table-layout: auto; /* Ändere von fixed zu auto für dynamische Spaltenbreiten */
  border-collapse: collapse;
}

/* 3. Optimiere die Tabellendarstellung für bessere Performance */
.database-table {
  width: 100%;
  table-layout: fixed; /* Ändere von auto zu fixed für bessere Rendering-Performance */
  border-collapse: collapse;
  contain: content; /* Verbessert die Rendering-Performance */
}

/* EAN/ArtNr-Spalte (2. Spalte) - kompakt aber lesbar */
.database-table th:nth-child(2),
.database-table td:nth-child(2) {
  width: 11%; /* Ausreichend für EAN/ArtNr */
  min-width: 85px; /* Genug Platz für "EAN/ArtNr" */
  padding-right: 8px; /* Einheitlicher Abstand zur nächsten Spalte */
}

/* Hersteller/Bezeichnung-Spalte (3. Spalte) - bekommt den meisten Platz */
.database-table th:nth-child(3),
.database-table td:nth-child(3) {
  width: 48%; /* Erhöht von 42% auf 48% - zusätzlicher Platz von den Preisspalten */
  min-width: 160px; /* Mehr Platz für längere Texte */
  padding-left: 0px; /* Kein zusätzlicher Abstand zur vorherigen Spalte */
  padding-right: 8px; /* Einheitlicher Abstand zur nächsten Spalte */
}

/* UVP/VK Preis Spalte (4. Spalte) */
.database-table th:nth-child(4),
.database-table td:nth-child(4) {
  width: 10%; /* Reduziert von 13% auf 10% */
  min-width: 80px; /* Genug Platz für "UVP/VK Preis" */
  white-space: nowrap;
  padding-left: 0px; /* Kein zusätzlicher Abstand zur vorherigen Spalte */
  padding-right: 8px !important; /* Einheitlicher Abstand zur nächsten Spalte */
}

/* VK Neu Spalte (6. Spalte) - gleiche Breite wie VK Preis */
.database-table th:nth-child(6),
.database-table td:nth-child(6) {
  width: 10%; /* Reduziert von 13% auf 10% - gleiche Breite wie UVP/VK Preis */
  min-width: 80px; /* Gleiche min-width wie UVP/VK Preis */
  white-space: nowrap;
  padding-left: 0px; /* Kein zusätzlicher Abstand zur vorherigen Spalte */
  padding-right: 8px !important; /* Einheitlicher Abstand zur nächsten Spalte - gleich wie VK Preis */
}

/* Diff %-Spalte (5. Spalte) - minimal aber lesbar */
.database-table th:nth-child(5),
.database-table td:nth-child(5) {
  width: 8%; /* Breitere Spalte für % Symbol */
  min-width: 35px; /* Genug Platz für "%" Symbol */
  white-space: nowrap;
  padding-left: 0px; /* Kein Abstand links */
  padding-right: 8px; /* Einheitlicher Abstand zur nächsten Spalte */
  text-align: center !important; /* Mittig zentriert */
}

/* Geändert Spalte (7. Spalte) - responsive Schriftgröße für bessere Anpassung */
.database-table th:nth-child(7),
.database-table td:nth-child(7) {
  width: auto; /* Automatische Breite basierend auf Inhalt */
  min-width: 80px; /* Mindestbreite für "Geändert" Text mit etwas Puffer */
  max-width: 120px; /* Maximale Breite um Tabelle nicht zu stark zu verbreitern */
  white-space: nowrap;
  padding-left: 8px !important; /* Etwas Abstand für bessere Lesbarkeit */
  padding-right: 8px !important; /* Symmetrischer Abstand */
  text-align: center !important; /* Zentriert */
  font-size: 14px !important; /* Gleiche Schriftgröße wie VK Preis */
  color: inherit !important; /* Gleiche Schriftfarbe wie VK Preis */
  font-weight: normal !important; /* Normale Schriftstärke wie VK Preis */
}

/* Responsive Schriftgröße für "Geändert" Header - passt sich automatisch an */
.database-table th:nth-child(7) span {
  font-size: clamp(10px, 2.5vw, 14px) !important; /* Responsive zwischen 10px-14px */
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

/* Kleinere Schriftgröße für schmale Spalten - Media Query basiert */
@media (max-width: 1200px) {
  .database-table th:nth-child(7) span {
    font-size: 12px !important;
  }
}

@media (max-width: 900px) {
  .database-table th:nth-child(7) span {
    font-size: 11px !important;
  }
}

/* Stelle sicher, dass der Header der "Geändert" Spalte die normale Hintergrundfarbe hat */
.database-table th:nth-child(7) {
  background-color: #f5f5f5 !important; /* Gleiche Hintergrundfarbe wie andere Header */
}

/* Dark Mode für "Geändert" Spalten-Header - strikt einheitlich (#1a1a1a) */
body.dark-mode .database-table th:nth-child(7),
body.dark-mode .database-table th:nth-child(7) *,
body.dark-mode .database-table th:nth-child(7) .column-header,
body.dark-mode .database-table th:nth-child(7) .column-header * {
  background-color: #1a1a1a !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Dark Mode: Log-Archiv-Liste und Debug-Info-Box besser lesbar */
body.dark-mode .debug-info-box,
body.dark-mode .debug-info-box * {
  background: var(--input-bg, #333) !important;
  color: var(--text-color, #eee) !important;
  opacity: 1 !important;
}

body.dark-mode .debug-info-box strong,
body.dark-mode .debug-info-box b {
  color: #fff !important;
}

body.dark-mode .debug-info-box .log-archive-list,
body.dark-mode .debug-info-box .log-archive-list * {
  background: var(--input-bg, #333) !important;
  color: #eee !important;
  opacity: 1 !important;
}

body.dark-mode .debug-info-box .log-archive-list .log-archive-item {
  color: #ccc !important;
  opacity: 1 !important;
}

/* Laufende Nummer-Spalte (1. Spalte) - minimal halten */
.database-table th:nth-child(1),
.database-table td:nth-child(1) {
  width: 2% !important; /* Minimal mögliche relative Breite */
  min-width: 20px !important; /* Etwas breiter für bessere Zentrierung */
  padding-left: 3px !important; /* Mehr Abstand zum linken Rand */
  padding-right: 3px !important; /* Gleicher Abstand rechts für Symmetrie */
  text-align: center !important; /* Laufende Nummer mittig zentriert */
}

/* Hover-Effekt für laufende Nummer - ganze Zelle zoomen */
.database-table td:nth-child(1) {
  cursor: pointer;
  transition: all 0.3s ease;
  transform-origin: left center; /* Expandiert nach rechts */
  position: relative;
}

.running-number {
  transition: all 0.3s ease;
}

/* Wenn über die gesamte Zelle gehovert wird, zoom die ganze Zelle */
.database-table td:nth-child(1):hover {
  transform: scaleX(2.5) scaleY(1.5) !important; /* 2.5x breiter, 1.5x höher */
  z-index: 20 !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  border: none !important; /* Kein blauer Rand beim Zoom */
  border-radius: 3px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Spezielle Farbe für markierte Zeilen beim Hover der laufenden Nummer */
.database-table tr.selected td:nth-child(1):hover {
  background-color: rgba(255, 235, 59, 0.95) !important; /* Gelber Hintergrund für markierte Zeilen */
}

.database-table td:nth-child(1):hover .running-number {
  font-weight: bold !important;
  color: #333 !important;
  transform: rotate(-90deg) !important; /* Rotation beibehalten, aber kein extra scale */
}

/* Textfarbe für markierte Zeilen - sicherstellen, dass Text auf gelbem Hintergrund lesbar ist */
.database-table tr.selected td:nth-child(1):hover .running-number {
  color: #333 !important; /* Dunkler Text auf gelbem Hintergrund */
}

/* Dark Mode Unterstützung für laufende Nummer Hover */
body.dark-mode .database-table td:nth-child(1):hover {
  background-color: rgba(40, 40, 40, 0.95) !important;
  /* Kein border-color nötig da border: none gesetzt ist */
}

/* Dark Mode: Spezielle Farbe für markierte Zeilen beim Hover der laufenden Nummer */
body.dark-mode .database-table tr.selected td:nth-child(1):hover {
  background-color: rgba(255, 235, 59, 0.85) !important; /* Etwas weniger opacity für Dark Mode */
}

body.dark-mode .database-table td:nth-child(1):hover .running-number {
  color: #fff !important;
}

/* Dark Mode: Textfarbe für markierte Zeilen */
body.dark-mode .database-table tr.selected td:nth-child(1):hover .running-number {
  color: #333 !important; /* Dunkler Text auch im Dark Mode auf gelbem Hintergrund */
}

/* === ECHTZEIT-KOLLABORATION STYLES === */

/* Aktive Benutzer Liste */
#active-users-list {
  font-family: var(--font-family);
  font-size: 13px;
  max-height: 300px;
  overflow-y: auto;
  min-width: fit-content;
  width: auto;
  max-width: 300px; /* Maximalbreite falls sehr lange Namen */
  white-space: nowrap;
}

#active-users-list .user-item {
  transition: background-color 0.2s ease;
}

#active-users-list .user-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

body.dark-mode #active-users-list .user-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Verbindungsstatus - im Dark Mode Button Stil */
#collaboration-status {
  font-family: var(--font-family);
}

#collaboration-status:hover {
  transform: scale(1.05);
  transform-origin: bottom right; /* Verhindert Layout-Shift */
  will-change: transform; /* Optimiert für Hardware-Beschleunigung */
}

#collaboration-status .status-icon {
  font-family: var(--font-family);
}

/* Bearbeitungs-Indikatoren */
.editing-badge {
  animation: pulse 2s infinite;
  font-family: var(--font-family);
  letter-spacing: 0.5px;
}

@keyframes pulse {
  0% { opacity: 0.8; }
  50% { opacity: 1; }
  100% { opacity: 0.8; }
}

/* Kollaborations-Highlights */
.collaboration-highlight {
  animation: collaborationGlow 3s ease-out;
}

@keyframes collaborationGlow {
  0% { 
    background-color: rgba(76, 175, 80, 0.3);
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
  }
  50% { 
    background-color: rgba(76, 175, 80, 0.2);
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.3);
  }
  100% { 
    background-color: transparent;
    box-shadow: none;
  }
}

/* Responsive Anpassungen für Kollaboration */
@media (max-width: 768px) {
  #active-users-list {
    top: 60px;
    right: 5px;
    max-width: 200px; /* Etwas mehr Platz für mobile Geräte */
    min-width: fit-content;
    width: auto;
    font-size: 11px;
  }
  
  #collaboration-status {
    width: 40px;
    height: 40px;
    bottom: 0;
    right: 0;
  }
  
  #collaboration-status .status-icon {
    width: 12px;
    height: 12px;
    margin-right: 4px;
    margin-bottom: 4px;
    font-size: 10px;
  }
  
  .editing-badge {
    font-size: 9px;
    padding: 1px 4px;
  }
}

/* Dark Mode Unterstützung für Kollaboration */
body.dark-mode #active-users-list {
  background: #333 !important;
  border: 1px solid #555 !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode #active-users-list div:first-child {
  color: #fff !important;
  border-bottom: 1px solid #555 !important;
}

/* Benutzername-Lesbarkeit verbessern - höhere Spezifität */
#active-users-list .user-item span:not(.user-article-count) {
  color: #555 !important;
  font-weight: normal !important;
  font-size: 12px !important;
  text-shadow: none !important;
}

body.dark-mode #active-users-list .user-item span:not(.user-article-count) {
  color: #e0e0e0 !important;
  font-weight: normal !important;
  font-size: 12px !important;
  text-shadow: none !important;
}

body.dark-mode .editing-badge {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Dark Mode für Kollaborations-Status */
body.dark-mode #collaboration-status {
  box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
}

body.dark-mode #collaboration-status:hover {
  box-shadow: -3px -3px 8px rgba(0, 0, 0, 0.4);
}

/* Kollaborations-Status fest am unteren Bildschirmrand */
#collaboration-status {
  position: fixed !important;
  bottom: 0;
  right: 0;
  z-index: 1000;
  overflow: hidden; /* Verhindert Scrollbalken durch Hover-Effekt */
}

/* Aktionen-Spalte (8. Spalte) - minimal aber funktional */
.database-table th:nth-child(8),
.database-table td:nth-child(8) {
  width: 4% !important; /* Minimal für Stift-Button */
  min-width: 35px; /* Genug für den Stift-Button ohne zu eng */
  white-space: nowrap;
  padding-left: 0px !important; /* Kein zusätzlicher Abstand zur vorherigen Spalte */
  padding-right: 1px !important; /* Minimaler Abstand zum Rand */
  box-sizing: border-box;
}

/* Verbessere die Darstellung der Aktions-Buttons */
.actions-container {
  display: flex;
  flex-direction: row; /* Buttons nebeneinander */
  gap: 0; /* Kein Abstand zwischen den Buttons */
  justify-content: flex-start; /* Linksbündig statt zentriert */
  width: auto; /* Nur so breit wie nötig */
}

.edit-article-button,
.delete-article-button {
  padding: 2px; /* Minimales Padding */
  margin: 0;
  width: 18px; /* Noch kleinere Breite */
  height: 18px; /* Noch kleinere Höhe */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mache die SVG-Icons etwas kleiner */
.edit-article-button svg,
.delete-article-button svg {
  width: 12px;
  height: 12px;
}

/* Optimiere die Aktionszelle */
.actions-cell {
  width: auto; /* Nur so breit wie nötig */
  white-space: nowrap;
  padding: 0 !important;
  text-align: left; /* Linksbündig statt zentriert */
  vertical-align: middle;
}

/* Diese Regel ist jetzt redundant und wird entfernt */

/* Erlaube Zeilenumbrüche in der Hersteller/Bezeichnung-Spalte */
.article-info {
  display: flex;
  flex-direction: column;
  gap: 1px; /* Reduziere gap für kompakte Darstellung */
  text-align: left !important;
  max-width: 100%;
  overflow: hidden;
  line-height: 1.1; /* Kompakte Zeilenhöhe für Artikel-Info */
}

/* Überschreibe die linksbündige Ausrichtung von .article-info speziell für die 7. Spalte (Benutzer/Geändert) */
.database-table td:nth-child(7) .article-info {
  text-align: center !important;
  align-items: center;
}

/* Stelle sicher, dass auch alle Kindelemente in der 7. Spalte zentriert sind */
.database-table td:nth-child(7) .article-info * {
  text-align: center !important;
}

.manufacturer,
.designation,
.ean,
.artnr {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Erlaube Zeilenumbrüche in der Bezeichnung */
.designation {
  white-space: normal;
  word-break: break-word;
  line-height: 1.2;
}

/* Optimiere die Tabellendarstellung mit flexiblem Layout */
.database-table {
  table-layout: fixed; /* Feste Tabellenlayout für bessere Kontrolle */
  width: 100%;
  border-spacing: 0 !important; /* Eliminiere jeglichen Spaltenabstand */
  border-collapse: collapse !important;
  margin: 0;
  padding: 0;
}

/* Diese Regel ist jetzt redundant - Spaltenbreiten sind oben definiert */

/* Korrigiere die Spaltenausrichtungen für das neue Layout */
.database-table th:nth-child(2),
.database-table td:nth-child(2) {
  text-align: left !important; /* EAN/ArtNr linksbündig */
}

.database-table th:nth-child(7),
.database-table td:nth-child(7) {
  text-align: center !important; /* Geändert Spalte zentriert - keine Abstände */
}

/* Verbessere die Darstellung der Aktions-Buttons */
.actions-container {
  display: flex;
  flex-direction: row; /* Ändere von column zu row */
  gap: 5px;
  justify-content: center;
}

.edit-article-button,
.delete-article-button {
  padding: 5px;
  margin: 0;
}

/* Optimiere die Darstellung der Artikelinformationen */
.article-info {
  max-width: 100%;
  overflow: hidden;
}

.manufacturer,
.designation,
.ean,
.artnr {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Stelle sicher, dass die Hersteller/Bezeichnung-Spalte linksbündig ist */
.database-table th:nth-child(3),
.database-table td:nth-child(3) {
  text-align: left !important;
}

/* Stelle sicher, dass die UVP/VK Preis Spalten zentriert sind */
.database-table th:nth-child(4),
.database-table td:nth-child(4) {
  text-align: center !important;
}

/* VK Neu Spalte zentriert */
.database-table th:nth-child(6),
.database-table td:nth-child(6) {
  text-align: center !important;
}

/* UVP/VK Preis-Überschrift zentriert */
.database-table th:nth-child(4) span,
.database-table th:nth-child(4) div {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  /* Kein zusätzliches padding - wird von der Spalte selbst gehandhabt */
}

/* VK Neu-Überschrift zentriert */
.database-table th:nth-child(6) span,
.database-table th:nth-child(6) div {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  /* Kein zusätzliches padding - wird von der Spalte selbst gehandhabt */
}

/* Geändert/Altware-Überschrift (7. Spalte) - zentriert */
.database-table th:nth-child(7) span,
.database-table th:nth-child(7) div {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  /* Kein zusätzliches padding - wird von der Spalte selbst gehandhabt */
}

/* Zentriere die %-Spalte und ihre Werte */
.database-table th:nth-child(5),
.database-table td:nth-child(5) {
  text-align: center !important;
}

/* Stelle sicher, dass Tabellenwerte nicht fett sind, aber Überschriften schon */
.database-table td {
  font-weight: 300 !important; /* Explizit leichte Schrift für Werte */
  font-synthesis: none !important; /* Verhindert synthetische Fettschrift */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; /* Verwende System-Schriftart für normalere Darstellung */
}

/* Alle Inhalte in Tabellenzellen sollen die leichte Schrift verwenden */
.database-table td * {
  font-weight: 300 !important;
  font-synthesis: none !important;
  font-family: inherit !important;
}

/* Spezielle Zentrierung für die %-Spalten-Überschrift */
.database-table th:nth-child(5) {
  text-align: center !important;
}



.database-table th,
.database-table td {
  padding: 2px 1px; /* Minimiere horizontales Padding zwischen Spalten */
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  font-size: 14px;
  line-height: 1.2; /* Kompakte Zeilenhöhe */
}

/* Stelle sicher, dass Tabellenwerte nicht fett sind, aber Überschriften schon */
.database-table td {
  font-weight: 300 !important; /* Explizit leichte Schrift für Werte */
  font-synthesis: none !important; /* Verhindert synthetische Fettschrift */
  font-family: var(--font-family-system) !important; /* Konsolidierte System-Schriftart */
}

/* Alle Inhalte in Tabellenzellen sollen die leichte Schrift verwenden */
.database-table td * {
  font-weight: 300 !important;
  font-synthesis: none !important;
  font-family: inherit !important;
}

/* Spezielle Zentrierung für die %-Spalten-Überschrift */
.database-table th:nth-child(5) {
  text-align: center !important;
}



.database-table th {
  background-color: #f5f5f5;
  font-weight: 500;
  position: sticky;
  top: 0;
  z-index: 1;
  border-top: none !important; /* Entferne obere Umrandung */
  border-left: none !important; /* Entferne linke Umrandung */
  border-right: none !important; /* Entferne rechte Umrandung */
}

.database-table tr:hover {
  background-color: #f9f9f9;
}

/* Leere Nachrichtenzeile: Nicht klickbar, keine Hover-Effekte */
.database-table tr.empty-message {
  cursor: default !important;
  pointer-events: none;
}

.database-table tr.empty-message:hover {
  background: transparent !important;
  transform: none !important;
  opacity: 1 !important;
}

.database-table .text-center {
  text-align: center;
}

/* Füge diese Styles für die Aktionen-Spalte hinzu */
.actions-cell {
  width: 1%; /* Minimale Breite */
  white-space: nowrap;
  padding: 0 !important;
  text-align: center;
  vertical-align: middle;
}

.actions-container {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.edit-article-button,
.delete-article-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-normal);
  margin: 0;
}

.edit-article-button:hover {
  background-color: #e3f2fd;
}

.edit-article-button svg {
  fill: #2196f3;
}

.delete-article-button:hover {
  background-color: #ffebee;
}

.delete-article-button svg {
  fill: var(--error-color);
}

/* Dark Mode Styles für die Buttons */
body.dark-mode .edit-article-button:hover {
  background-color: rgba(33, 150, 243, 0.2);
}

body.dark-mode .delete-article-button:hover {
  background-color: rgba(255, 107, 107, 0.2);
}

.database-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 15px;
}

.database-pagination button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: var(--secondary-color);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.database-pagination button:hover:not(:disabled) {
  background-color: var(--secondary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.database-pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.database-pagination button svg {
  width: 24px;
  height: 24px;
  fill: var(--text-color);
}

/* Button-Flash-Effekt für Scroll-Navigation */
.database-pagination button.button-flash {
  animation: buttonFlash 0.8s ease-in-out;
  background-color: var(--primary-color) !important;
  transform: scale(1.1);
}

.database-pagination button.button-flash svg {
  fill: white !important;
}

@keyframes buttonFlash {
  0% { 
    background-color: var(--secondary-color);
    transform: scale(1);
  }
  25% { 
    background-color: var(--primary-color);
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
  }
  75% { 
    background-color: var(--primary-color);
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
  }
  100% { 
    background-color: var(--primary-color);
    transform: scale(1.1);
  }
}

.database-pagination span {
  font-size: 14px;
  color: var(--text-light);
}

/* Responsive Anpassungen für die Datenbank-UI */
@media (max-width: 767px) {
  .database-buttons {
    flex-direction: column;
  }

  .database-table th,
  .database-table td {
    padding: 2px 1px; /* Auch auf mobilen Geräten minimale Spaltenabstände */
    font-size: 12px;
    line-height: 1.1;
  }
  
  /* Auch auf mobilen Geräten leichte Schrift für Werte */
  .database-table td {
    font-weight: 300 !important;
    font-synthesis: none !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  }

  /* Ändere die Höhe für mobile Geräte */
  #database-tab.tab-content.active {
    height: calc(100vh - 120px); /* Mehr Platz für mobile Navigation */
    min-height: calc(100vh - 120px);
  }
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 60px;
  background-color: #f0f0f0;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  cursor: pointer;
  z-index: 1000;
  transition: all 0.3s ease;
  border: none;
  padding: 0;
  box-shadow: 2px -2px 5px rgba(0, 0, 0, 0.1);
}

.dark-mode-toggle:hover {
  background-color: #e0e0e0;
}

.dark-mode-icon {
  width: 20px;
  height: 20px;
  fill: #333;
  transition: all 0.3s ease;
  margin-left: 10px;
  margin-bottom: 10px;
}

.moon-icon {
  display: none;
}

body.dark-mode .dark-mode-toggle {
  background-color: #444;
}

body.dark-mode .dark-mode-icon {
  fill: #eee;
}

body.dark-mode .sun-icon {
  display: none;
}

body.dark-mode .moon-icon {
  display: block;
}

/* Debug Panel Toggle Button - KOMPAKTE VERSION */
#debug-toggle {
  position: absolute;
  top: 0;
  left: 0;
  width: 45px;
  height: 45px;
  background-color: #f0f0f0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  cursor: pointer;
  z-index: 999; /* Niedrigerer z-index als das Modal (1000) */
  transition: all 0.3s ease;
  border: none;
  padding: 0;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

#debug-toggle:hover {
  background-color: #e0e0e0;
}

#debug-toggle span {
  margin-top: 6px;
  margin-left: 6px;
  font-size: 14px;
  transition: all 0.3s ease;
}

/* Debug Panel aktiv im hellen Theme */
#debug-toggle.active {
  background-color: #007bff;
  box-shadow: 2px 2px 8px rgba(0, 123, 255, 0.3);
}

#debug-toggle.active span {
  color: white;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

#debug-toggle.active:hover {
  background-color: #0056b3;
  box-shadow: 3px 3px 10px rgba(0, 123, 255, 0.5);
}

/* =============================================================================
   DEBUG & ADMIN PANEL - KOMPAKTE VERSION
   
   📋 DESIGN-PRINZIPIEN:
   - Minimaler Platzbedarf für maximale Effizienz
   - Kompakte Elemente mit reduzierten Margins/Paddings
   - Optimiert für weitere Admin-Tools (zukünftige Erweiterungen)
   
   🚀 ERWEITERUNGSBEREICH:
   Dieser Bereich ist so gestaltet, dass weitere Admin-Tools einfach 
   hinzugefügt werden können, ohne das Layout zu beeinträchtigen.
   Folgende Tools sind bereits vorbereitet:
   - Backup-Management
   - User-Administration  
   - System-Wartung
   - Performance-Monitoring
   - Log-Verwaltung
   ============================================================================= */

/* Debug Panel als vollständiger Tab - KOMPAKTE VERSION */
.debug-tab-content {
  display: none;
  height: 100%;
  overflow-y: auto;
  padding: 10px;
  background: var(--bg-color, #fff);
  color: var(--text-color, #333);
}

.debug-header {
  text-align: center;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color, #ddd);
}

.debug-header h2 {
  margin: 0 0 5px 0;
  color: var(--accent-color, #007bff);
  font-size: 1.2em;
}

.debug-header p {
  margin: 0;
  opacity: 0.8;
  font-size: 0.8em;
}

.debug-section {
  margin-bottom: 12px;
  padding: 8px;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 4px;
  background: var(--section-bg, #f8f9fa);
}

.debug-section h3 {
  margin: 0 0 8px 0;
  color: var(--accent-color, #007bff);
  font-size: 0.95em;
  border-bottom: 1px solid var(--border-color, #ddd);
  padding-bottom: 4px;
}

.debug-select {
  width: 100%;
  padding: 4px;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 3px;
  background: var(--input-bg, #fff);
  color: var(--text-color, #333);
  font-size: 12px;
  margin-top: 3px;
}

.debug-btn {
  width: 100%;
  padding: 6px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
  margin-bottom: 4px;
}

.debug-btn-danger {
  background: #dc3545;
  color: white;
}

.debug-btn-danger:hover {
  background: #c82333;
  transform: translateY(-1px);
}

.debug-btn-success {
  background: #28a745;
  color: white;
}

.debug-btn-success:hover {
  background: #218838;
  transform: translateY(-1px);
}

.debug-btn-warning {
  background: #ffc107;
  color: #212529;
}

.debug-btn-warning:hover {
  background: #e0a800;
  transform: translateY(-1px);
}

.debug-btn-info {
  background: #17a2b8;
  color: white;
}

.debug-btn-info:hover {
  background: #138496;
  transform: translateY(-1px);
}

.debug-btn-secondary {
  background: #6c757d;
  color: white;
  font-size: 10px;
  padding: 4px;
  margin: 2px;
}

.debug-btn-secondary:hover {
  background: #5a6268;
  transform: translateY(-1px);
}

.debug-info-box {
  background: var(--input-bg, #fff);
  border: 1px solid var(--border-color, #ddd);
  border-radius: 3px;
  padding: 6px;
  margin-top: 5px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.3;
}

.debug-info-box div {
  margin-bottom: 2px;
}

.debug-help {
  font-size: 10px;
  opacity: 0.7;
  margin: 4px 0 0 0;
  font-style: italic;
}

.debug-test-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin-top: 5px;
}

/* CSS-Variablen für Farben */
:root {
  --bg-color: #fff;
  --text-color: #333;
  --border-color: #ddd;
  --accent-color: #007bff;
  --input-bg: #fff;
  --section-bg: #f8f9fa;
}

/* =============================================================================
   ADMIN-TOOLS VORBEREITUNG - Kompakte CSS-Klassen für zukünftige Erweiterungen
   ============================================================================= */

/* Allgemeine Klassen für neue Admin-Tools */
.admin-section {
  margin-bottom: 12px;
  padding: 8px;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 4px;
  background: var(--section-bg, #f8f9fa);
}

.admin-section h3 {
  margin: 0 0 8px 0;
  color: var(--accent-color, #007bff);
  font-size: 0.95em;
  border-bottom: 1px solid var(--border-color, #ddd);
  padding-bottom: 4px;
}

.admin-btn {
  width: 100%;
  padding: 6px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
  margin-bottom: 4px;
}

.admin-btn.backup { background: #17a2b8; color: white; }
.admin-btn.backup:hover { background: #138496; }

.admin-btn.users { background: #6f42c1; color: white; }
.admin-btn.users:hover { background: #5a32a3; }

.admin-btn.maintenance { background: #fd7e14; color: white; }
.admin-btn.maintenance:hover { background: #e8650e; }

.admin-btn.success { background: #28a745; color: white; }
.admin-btn.success:hover { background: #218838; }

.admin-btn.warning { background: #ffc107; color: #212529; }
.admin-btn.warning:hover { background: #e0a800; }

.admin-btn.info { background: #17a2b8; color: white; }
.admin-btn.info:hover { background: #138496; }

.admin-btn.secondary { background: #6c757d; color: white; }
.admin-btn.secondary:hover { background: #5a6268; }

.admin-btn.danger { background: #dc3545; color: white; }
.admin-btn.danger:hover { background: #c82333; }

.admin-info-compact {
  background: var(--input-bg, #fff);
  border: 1px solid var(--border-color, #ddd);
  border-radius: 3px;
  padding: 4px;
  margin-top: 3px;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  line-height: 1.2;
}

/* =============================================================================
   DEBUG TOGGLE BUTTON - VERBESSERTER DARK MODE
   ============================================================================= */

/* Debug Panel Toggle Button - Dark Mode mit verbesserter Optik */
body.dark-mode #debug-toggle {
  background-color: #333;
  box-shadow: 1px 1px 4px rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

body.dark-mode #debug-toggle:hover {
  background-color: #444;
  box-shadow: 2px 2px 6px rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

body.dark-mode #debug-toggle span {
  color: #ff6b6b;
  text-shadow: 0 0 3px rgba(255, 107, 107, 0.3);
  transition: all 0.3s ease;
}

body.dark-mode #debug-toggle:hover span {
  color: #ff8a8a;
  text-shadow: 0 0 5px rgba(255, 107, 107, 0.5);
  transform: scale(1.1);
}

/* Debug Panel aktiv im Dark Mode */
body.dark-mode #debug-toggle.active {
  background-color: #ff6b6b;
  box-shadow: 2px 2px 8px rgba(255, 107, 107, 0.4);
}

body.dark-mode #debug-toggle.active span {
  color: white;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

body.dark-mode #debug-toggle.active:hover {
  background-color: #ff5252;
  box-shadow: 3px 3px 10px rgba(255, 107, 107, 0.6);
}

/* Debug Panel Content im Dark Mode */
body.dark-mode .debug-tab-content {
  background: var(--bg-color, #222);
  color: var(--text-color, #eee);
  border-left: 1px solid #444;
}

/* Debug Panel Elemente im Dark Mode */
body.dark-mode .debug-section {
  background: var(--section-bg, #2d3748);
  border-color: var(--border-color, #444);
}

body.dark-mode .debug-section h3 {
  color: var(--accent-color, #ff6b6b);
  border-bottom-color: var(--border-color, #444);
}

body.dark-mode .debug-select {
  background: var(--input-bg, #333);
  border-color: var(--border-color, #444);
  color: var(--text-color, #eee);
}

body.dark-mode .debug-select:focus {
  border-color: #ff6b6b;
  box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2);
}

body.dark-mode .debug-info-box {
  background: var(--input-bg, #333);
  border-color: var(--border-color, #444);
  color: var(--text-color, #eee);
}

body.dark-mode .debug-help {
  color: #aaa;
}

/* Admin Tools im Dark Mode */
body.dark-mode .admin-section {
  background: var(--section-bg, #2d3748);
  border-color: var(--border-color, #444);
}

body.dark-mode .admin-section h3 {
  color: var(--accent-color, #ff6b6b);
  border-bottom-color: var(--border-color, #444);
}

body.dark-mode .admin-info-compact {
  background: var(--input-bg, #333);
  border-color: var(--border-color, #444);
  color: var(--text-color, #eee);
}

/* SOFT-DELETE FILTER CONTROLS für Admin Panel */
.soft-delete-filter-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.soft-delete-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 12px;
  user-select: none;
  padding: 4px 0;
}

.soft-delete-checkbox input[type="checkbox"] {
  margin-right: 8px;
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.soft-delete-checkbox .checkmark {
  position: relative;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color, #ddd);
  border-radius: 4px;
  margin-right: 8px;
  background: var(--input-bg, #fff);
  transition: all 0.2s ease;
}

.soft-delete-checkbox input[type="checkbox"]:checked + .checkmark {
  background: var(--accent-color, #007bff);
  border-color: var(--accent-color, #007bff);
}

.soft-delete-checkbox input[type="checkbox"]:checked + .checkmark::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.soft-delete-checkbox .label-text {
  color: var(--text-color, #333);
  font-weight: 500;
}

.soft-delete-checkbox:hover .checkmark {
  border-color: var(--accent-color, #007bff);
}

/* Dark Mode für Soft-Delete Controls */
body.dark-mode .soft-delete-checkbox .checkmark {
  border-color: var(--border-color, #444);
  background: var(--input-bg, #333);
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

body.dark-mode .soft-delete-checkbox input[type="checkbox"]:checked + .checkmark {
  background: var(--accent-color, #ff6b6b);
  border-color: var(--accent-color, #ff6b6b);
}

body.dark-mode .soft-delete-checkbox input[type="checkbox"]:checked + .checkmark::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  font-weight: bold;
}

body.dark-mode .soft-delete-checkbox .label-text {
  color: var(--text-color, #eee);
}

body.dark-mode .soft-delete-checkbox:hover .checkmark {
  border-color: var(--accent-color, #ff6b6b);
}

/* Dark Mode Variablen überschreiben */
body.dark-mode {
  --bg-color: #222;
  --text-color: #eee;
  --border-color: #444;
  --accent-color: #ff6b6b;
  --input-bg: #333;
  --section-bg: #2d3748;
  
  /* Dark Mode Import Guide Variablen */
  --import-bg: linear-gradient(135deg, #1C1C1E 0%, #2C2C2E 100%);
  --import-card-bg: rgba(44, 44, 46, 0.95);
  --import-code-bg: #2A2A2C;
  --import-tip-bg: linear-gradient(135deg, #0A84FF 0%, #5E5CE6 100%);
  --import-tip-text: white;
}

/* Dark Mode Styles */
body.dark-mode {
  background-color: #222;
  color: #eee;
}

body.dark-mode .sidebar {
  background-color: #333;
  border-right-color: #444;
}

body.dark-mode .input-tabs {
  border-bottom-color: #444;
}

/* 🎯 EINHEITLICHE DARK MODE TAB-BUTTON-STYLES FÜR ALLE TABS */
body.dark-mode .tab-button {
  color: #aaa;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

body.dark-mode .tab-button:hover {
  color: #ff6b6b;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

body.dark-mode .tab-button.active {
  color: #ff6b6b !important;
  border-bottom: 3px solid #ff6b6b !important;
  background: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 500;
}

/* 🚨 KRITISCHE REGEL FÜR DARK MODE: Überschreibe alle blauen Hintergründe für aktive Tabs */
body.dark-mode .tab-button.active,
body.dark-mode .tab-button.active:hover,
body.dark-mode .tab-button.active:focus {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border-bottom: 3px solid #ff6b6b !important;
  border-bottom-color: #ff6b6b !important;
  color: #ff6b6b !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
}

/* 🚨 ULTIMATIVE REGEL: Speziell für Datenbank-Tab im Dark Mode */
body.dark-mode .input-tabs .tab-button[data-tab="database"].active,
body.dark-mode .input-tabs .tab-button[data-tab="database"].active:hover,
body.dark-mode .input-tabs .tab-button[data-tab="database"].active:focus,
body.dark-mode .input-tabs .tab-button[data-tab="database"].active *,
body.dark-mode .input-tabs .tab-button[data-tab="database"].active::before,
body.dark-mode .input-tabs .tab-button[data-tab="database"].active::after {
  color: #ff6b6b !important;
  border-bottom: 3px solid #ff6b6b !important;
  border-bottom-color: #ff6b6b !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 500 !important;
  border: none !important;
}

body.dark-mode .dropzone {
  border-color: #555;
  color: #aaa;
  animation: gentlePulseDark 3s ease-in-out infinite;
}

body.dark-mode .dropzone:hover,
body.dark-mode .dropzone.dragover {
  border-color: #ff6b6b;
  background-color: rgba(255, 107, 107, 0.1);
}

body.dark-mode .upload-icon {
  fill: #555;
}

body.dark-mode .dropzone:hover .upload-icon {
  fill: #ff6b6b;
}

body.dark-mode .highlight {
  color: #ff6b6b;
}

body.dark-mode .file-item {
  background-color: #444;
}

body.dark-mode .file-item:hover {
  background-color: #555;
}

body.dark-mode .file-name {
  color: #eee;
}

body.dark-mode .file-size {
  color: #aaa;
}

body.dark-mode .file-remove {
  color: #aaa;
}

body.dark-mode .file-remove:hover {
  color: #ff6b6b;
}

body.dark-mode .upload-progress {
  background-color: #444;
}

body.dark-mode .upload-progress-bar {
  background-color: #ff6b6b;
}

body.dark-mode textarea {
  background-color: #444;
  border-color: #555;
  color: #eee;
  font-weight: 300; /* Gleiche leichte Schrift auch im Dark Mode */
  font-synthesis: none; /* Verhindert synthetische Fettschrift */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* System-Schriftart */
}

body.dark-mode textarea:focus {
  border-color: #ff6b6b;
  box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2);
}

body.dark-mode .help-box {
  background-color: #333;
  border-left-color: #555;
}

body.dark-mode .help-icon {
  background-color: #555;
}

body.dark-mode .tooltip {
  background-color: #555;
}

body.dark-mode .controls button {
  background-color: #444;
}

body.dark-mode .controls button:hover {
  background-color: #555;
}

body.dark-mode .controls button svg {
  fill: #aaa;
}

body.dark-mode .controls button:hover svg {
  fill: #ff6b6b;
}

body.dark-mode .print-button button {
  background-color: #ff6b6b;
}

body.dark-mode .print-button button:hover {
  background-color: #ff5252;
}

body.dark-mode .print-button button:disabled {
  background-color: #555;
}

body.dark-mode .pagination-info {
  color: #aaa;
}

body.dark-mode .pagination-dot {
  background-color: #555;
}

body.dark-mode .pagination-dot.active {
  background-color: #ff6b6b;
}

body.dark-mode #status {
  background-color: #333;
  color: #aaa;
}

body.dark-mode .thumbnail {
  border-color: #555;
  background-color: #ffff00; /* Gelbe Schilder bleiben gelb */
}

body.dark-mode .thumbnail.active {
  border-color: #ff6b6b;
}

body.dark-mode .thumbnail:hover:not(.active) {
  border-color: #777;
}

body.dark-mode .thumbnail-number {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Ersetze diese Regeln durch die folgenden, um sicherzustellen, dass der Bereich exakt wie im Tagmodus aussieht */
body.dark-mode .thumbnail-bestand-details {
  background-color: #666; /* Exakt die gleiche Farbe wie im Tagmodus */
  color: white;
}

body.dark-mode .thumbnail-bestand-details table {
  background-color: transparent;
}

body.dark-mode .thumbnail-bestand-details th,
body.dark-mode .thumbnail-bestand-details td {
  color: white;
  border-right-color: #ccc;
}

body.dark-mode .dark-mode-toggle {
  background-color: #444;
  border-color: #555;
}

body.dark-mode .dark-mode-icon {
  fill: #eee;
}

body.dark-mode .sun-icon {
  display: none;
}

body.dark-mode .moon-icon {
  display: block;
}

/* Datenbank-Tab im Dark Mode */
body.dark-mode .database-button {
  background-color: #444;
  color: #eee;
}

body.dark-mode .database-button:hover {
  background-color: #555;
}

body.dark-mode .database-button svg {
  fill: #eee;
}

body.dark-mode .database-button.danger {
  background-color: rgba(255, 107, 107, 0.2);
  color: #ff6b6b;
}

body.dark-mode .database-button.danger:hover {
  background-color: rgba(255, 107, 107, 0.3);
}

body.dark-mode .database-button.danger svg {
  fill: #ff6b6b;
}

body.dark-mode .database-search input {
  background-color: #444;
  border-color: #555;
  color: #eee;
}

body.dark-mode .database-search button {
  background-color: #444;
}

body.dark-mode .database-search button:hover {
  background-color: #555;
}

body.dark-mode .database-search button svg {
  fill: #eee;
}

body.dark-mode .database-table-container {
  border: none; /* Entferne alle Umrandungen im Dark Mode */
}

body.dark-mode .database-table th {
  background-color: #333;
  color: #eee;
  border-top: none !important; /* Entferne obere Umrandung im Dark Mode */
  border-left: none !important; /* Entferne linke Umrandung im Dark Mode */
  border-right: none !important; /* Entferne rechte Umrandung im Dark Mode */
}

body.dark-mode .database-table td {
  color: #eee;
  border-bottom-color: #444;
  font-weight: 300 !important; /* Explizit leichte Schrift auch im Dark Mode */
  font-synthesis: none !important; /* Verhindert synthetische Fettschrift */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; /* System-Schriftart */
}

body.dark-mode .database-table tr:hover:not(.empty-message) {
  background-color: #3a3a3a;
}

/* Leere Nachrichtenzeile im Dark Mode: Keine Hover-Effekte */
body.dark-mode .database-table tr.empty-message:hover {
  background-color: transparent !important;
  transform: none !important;
  opacity: 1 !important;
}

body.dark-mode .delete-article-button:hover {
  background-color: rgba(255, 107, 107, 0.2);
}

body.dark-mode .database-pagination button {
  background-color: #444;
}

body.dark-mode .database-pagination button:hover:not(:disabled) {
  background-color: #555;
}

body.dark-mode .database-pagination button svg {
  fill: #eee;
}

body.dark-mode .database-pagination span {
  color: #aaa;
}

/* Vorlagen im Dark Mode */
body.dark-mode .template-item {
  background-color: #333;
  border-color: #444;
}

body.dark-mode .template-item h3 {
  color: #eee;
}

body.dark-mode .template-item p {
  color: #aaa;
}

body.dark-mode .template-button {
  background-color: #444;
  color: #eee;
}

body.dark-mode .template-item.disabled .template-button {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Wichtig: Verhindere Hover-Effekte für deaktivierte Buttons */
body.dark-mode .template-item.disabled .template-button:hover {
  background-color: #cccccc !important; /* Überschreibe den normalen Hover-Effekt */
  color: #666666 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Stelle sicher, dass der Cursor für deaktivierte Elemente "not-allowed" ist */
body.dark-mode .template-item.disabled {
  cursor: not-allowed;
}

body.dark-mode .template-item.disabled .template-preview {
  background-color: #cccccc;
  opacity: 0.7;
}

body.dark-mode .template-button:hover {
  background-color: #ff6b6b;
  color: white;
}

/* Warengruppen und Abteilungen im Dark Mode */
body.dark-mode .filter-heading {
  background-color: #333;
  border-left-color: #444;
  color: #eee;
}

body.dark-mode .filter-heading:hover {
  background-color: #3a3a3a;
}

body.dark-mode .filter-heading::after {
  border-top-color: #eee;
}

body.dark-mode .abt-circle-container {
  filter: brightness(0.9);
}

body.dark-mode .product-group-tag {
  background-color: #333;
  border-left-color: #555;
  color: #eee;
}

body.dark-mode .product-group-tag:hover {
  background-color: #3a3a3a;
}

body.dark-mode .product-group-tag.inactive {
  background-color: #2a2a2a;
  border-left-color: #444;
  color: #777;
}

/* A4-Container und Schild bleiben unverändert, damit die Vorschau authentisch bleibt */

/* Füge diese Regel zu den Dark Mode Styles hinzu, um die Textfarbe für Labels im Nachtmodus anzupassen */
body.dark-mode .input-group label {
  color: #eee; /* Helle Textfarbe für Labels im Nachtmodus */
}

/* Füge diese Regeln zu den Dark Mode Styles hinzu, um sicherzustellen, dass die Schild-Elemente schwarz bleiben */
body.dark-mode .hersteller,
body.dark-mode .bezeichnung,
body.dark-mode .warengruppe {
  color: black; /* Stellt sicher, dass diese Elemente im Nachtmodus schwarz bleiben */
}

body.dark-mode .abt-nr-circle {
  color: black; /* Stellt sicher, dass die Zahl im Kreis schwarz bleibt */
  border-color: black; /* Stellt sicher, dass der Rand des Kreises schwarz bleibt */
}

/* Stelle sicher, dass die Input-Group-Labels im Nachtmodus sichtbar sind */
body.dark-mode .input-group label {
  color: #eee; /* Helle Textfarbe für Labels im Nachtmodus */
}

/* Stelle sicher, dass die Zahl im Abteilungskreis im Nachtmodus schwarz bleibt */
body.dark-mode .abt-circle {
  color: black; /* Stellt sicher, dass die Zahl im gelben Kreis schwarz bleibt */
}

/* Füge diese Regel zu den Dark Mode Styles hinzu, um die Paginierungsanzeige im Nachtmodus schwarz zu machen */
body.dark-mode .pagination-info {
  background-color: #ffebee; /* Gleicher Hintergrund wie im Tagmodus */
  color: black; /* Schwarze Schrift für bessere Lesbarkeit */
  border-left: 3px solid #ff0000; /* Roter Rand wie im Tagmodus */
}

/* Stelle sicher, dass auch die Zahlen in der Paginierungsanzeige schwarz sind */
body.dark-mode .pagination-info span {
  color: black;
}

/* Auch für die mobile Paginierungsanzeige */
body.dark-mode .mobile-thumbnail-info {
  color: black;
}

/* Aktualisiere die Footer-Styles für gleichmäßige Verteilung */
.footer-line {
  position: absolute;
  bottom: 0%; /* Direkt am unteren Rand */
  left: 0;
  right: 0;
  display: flex;
  justify-content: flex-start; /* Beginne links statt space-between */
  align-items: center;
  padding: 0 3%; /* 3% zusätzlicher Rand links und rechts */
  height: 3vh; /* Verdoppelt von 1.5vh auf 3vh für größere Schrift */
  width: 100%;
  overflow: visible; /* Verhindert Abschneiden */
  box-sizing: border-box;
}

.footer-item {
  font-size: 2.4vh; /* Verdoppelt von 1.2vh auf 2.4vh */
  color: black;
  white-space: nowrap;
  overflow: visible;
  flex: 0 0 auto; /* Nicht wachsen oder schrumpfen */
}

.druckdatum {
  text-align: left;
}

.ean {
  text-align: left;
  color: black !important;
  font-size: 1.2vh !important; /* Gleiche Größe wie andere Footer-Elemente */
  white-space: nowrap !important; /* Verhindert Zeilenumbrüche */
  overflow: visible !important;
  text-overflow: clip !important;
}

.barcode-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.barcode-svg {
  height: 100%;
  max-width: 100%;
}

/* Entferne die Regel, die die ArtNr rechtsbündig macht */
.artnr {
  text-align: left;
  white-space: nowrap; /* Verhindert Umbrüche */
  overflow: visible; /* Verhindert Abschneiden */
}

/* Verdopple die Footer-Schriftgrößen für bessere Lesbarkeit */
.footer-line {
  height: 3vh; /* Verdoppelt von 1.5vh auf 3vh für mehr Platz */
}

.ean {
  font-size: 2.4vh !important; /* Verdoppelt von 1.2vh auf 2.4vh */
}

.artnr {
  font-size: 2.4vh; /* Verdoppelt für einheitliche Größe */
}

.druckdatum {
  font-size: 2.4vh; /* Verdoppelt für einheitliche Größe */
}

/* Auch für die mobile Paginierungsanzeige */
body.dark-mode .mobile-thumbnail-info {
  color: black;
}

/* Füge diese Styles für klickbare Zeilen in der Datenbank-Tabelle hinzu */
.clickable-row {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.clickable-row:hover {
  background-color: #f0f0f0;
}

body.dark-mode .clickable-row:hover {
  background-color: #444;
}

/* Verbessere die Sichtbarkeit der Zeilen beim Hover */
.database-table tr.clickable-row:hover td {
  background-color: rgba(255, 0, 0, 0.05);
}

body.dark-mode .database-table tr.clickable-row:hover td {
  background-color: rgba(255, 107, 107, 0.1);
}

/* Gelbe Hervorhebung für Altware-Artikel - NIEDRIGERE Priorität */
.database-table tr.selected:not(.active-row) {
  background-color: rgba(255, 235, 59, 0.2) !important; /* Hellgelb mit Transparenz */
}

body.dark-mode .database-table tr.selected:not(.active-row) {
  background-color: rgba(255, 235, 59, 0.15) !important; /* Dunkleres Hellgelb für Dark Mode */
}

/* Stelle sicher, dass die Hintergrundfarbe auch beim Hover erhalten bleibt */
.database-table tr.selected:not(.active-row):hover {
  background-color: rgba(255, 235, 59, 0.3) !important; /* Etwas dunkleres Gelb beim Hover */
}

body.dark-mode .database-table tr.selected:not(.active-row):hover {
  background-color: rgba(255, 235, 59, 0.2) !important; /* Etwas dunkleres Gelb beim Hover im Dark Mode */
}

/* Verbessere die Sichtbarkeit der ausgewählten Zeilen */
.database-table tr.selected-row:not(.active-row) {
  background-color: rgba(255, 235, 59, 0.5) !important; /* Kräftigeres Gelb mit höherer Deckkraft */
  border-left: 3px solid #ff0000; /* Roter Rand links für bessere Sichtbarkeit */
}

body.dark-mode .database-table tr.selected-row:not(.active-row) {
  background-color: rgba(255, 235, 59, 0.3) !important; /* Angepasstes Gelb für Dark Mode */
  border-left: 3px solid #ff6b6b; /* Angepasster Rand für Dark Mode */
}

/* Stelle sicher, dass die Hintergrundfarbe auch beim Hover erhalten bleibt */
.database-table tr.selected-row:not(.active-row):hover {
  background-color: rgba(255, 235, 59, 0.6) !important; /* Noch kräftigeres Gelb beim Hover */
}

body.dark-mode .database-table tr.selected-row:not(.active-row):hover {
  background-color: rgba(255, 235, 59, 0.4) !important; /* Angepasstes Gelb beim Hover im Dark Mode */
}

/* Styles für den Bearbeiten-Button */
.edit-article-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-normal), opacity 0.3s ease, visibility 0.3s ease !important; /* Sanfte Transition für Ein-/Ausblenden */
  margin-right: 5px;
}

.edit-article-button:hover {
  background-color: #e3f2fd;
}

.edit-article-button svg {
  fill: #2196f3;
}

/* Styles für den Bearbeiten-Dialog */
.edit-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001; /* Höher als Tooltips (10000) und Benutzerliste (10000) */
  backdrop-filter: blur(4px);
}

.edit-dialog {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 90vw;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  border: 1px solid #e0e0e0;
  position: relative;
  z-index: 10002; /* Höher als Overlay (10001) */
}

/* Tooltips und Benutzerliste hinter dem Dialog, wenn Dialog offen ist */
body:has(.edit-dialog-overlay) .occupation-tooltip,
body:has(.edit-dialog-overlay) #active-users-list {
  z-index: 9999 !important; /* Niedriger als Dialog (10001) */
}

.edit-dialog h3 {
  margin: 0;
  padding: 12px 16px 8px;
  color: #1a1a1a;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid #f0f0f0;
  background: linear-gradient(135deg, #f8f9fa, #ffffff);
  border-radius: 12px 12px 0 0;
}

#edit-form {
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
}

.form-row {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.form-row label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  color: #2c3e50;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-row input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #e8ecef;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  background-color: #ffffff;
  color: #2c3e50;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.form-row input:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
  background-color: #fbfcfd;
}

.form-row input:hover:not(:focus) {
  border-color: #bdc3c7;
}

.form-row input[type="number"] {
  text-align: right;
  padding-right: 25px; /* Abstand zwischen Wert und Pfeilen */
}

/* 🚨 NEU: Verbesserte Lesbarkeit für Number-Input-Spinner */
.form-row input[type="number"]::-webkit-outer-spin-button,
.form-row input[type="number"]::-webkit-inner-spin-button {
  margin-left: 8px; /* Abstand zwischen Pfeilen und Wert */
  opacity: 0.8; /* Leicht transparent für bessere Lesbarkeit */
}

.form-row input[type="number"]::-webkit-outer-spin-button:hover,
.form-row input[type="number"]::-webkit-inner-spin-button:hover {
  opacity: 1; /* Vollständig sichtbar beim Hover */
}

/* Firefox-spezifische Anpassungen */
.form-row input[type="number"] {
  -moz-appearance: textfield; /* Entfernt Standard-Spinner in Firefox */
}

/* Custom Spinner für bessere Kontrolle */
.form-row input[type="number"] {
  position: relative;
}

/* Zusätzlicher Abstand für bessere Lesbarkeit */
.form-row input[type="number"]:focus {
  padding-right: 30px; /* Mehr Abstand beim Fokus */
}

.form-row input[readonly] {
  background-color: #f8f9fa;
  color: #6c757d;
  cursor: not-allowed;
  border-color: #dee2e6;
}

.form-row input::placeholder {
  color: #95a5a6;
  font-style: italic;
}

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
  margin-top: 4px;
}

.main-actions {
  display: flex;
  gap: 12px;
}

#edit-cancel,
#edit-save {
  padding: 8px 20px;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 90px;
}

#edit-cancel {
  background-color: #ecf0f1;
  color: #2c3e50;
  border: 2px solid transparent;
}

#edit-cancel:hover {
  background-color: #d5dbdb;
  transform: translateY(-1px);
}

#edit-save {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  border: 2px solid transparent;
}

#edit-save:hover {
  background: linear-gradient(135deg, #2980b9, #21618c);
  transform: translateY(-1px);
  box-shadow: 0 8px 25px rgba(52, 152, 219, 0.3);
}

#edit-save:active,
#edit-cancel:active {
  transform: translateY(0);
}

.delete-button {
  padding: 10px 24px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 100px;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
  border: 2px solid transparent;
}

.delete-button:hover {
  background: linear-gradient(135deg, #c0392b, #a93226);
  transform: translateY(-1px);
  box-shadow: 0 8px 25px rgba(231, 76, 60, 0.3);
}

.delete-button:active {
  transform: translateY(0);
}

/* Responsive Design für mittlere Bildschirme */
@media (max-width: 1200px) {
  .edit-dialog {
    max-height: 98vh;
  }
  
  .edit-dialog h3 {
    padding: 12px 18px 8px;
    font-size: 18px;
  }
  
  #edit-form {
    padding: 16px;
    gap: 12px 18px;
  }
  
  .form-row label {
    margin-bottom: 4px;
    font-size: 11px;
  }
  
  .form-row input {
    padding: 8px 10px;
    font-size: 13px;
  }
  
  .form-actions {
    padding-top: 12px;
    gap: 10px;
  }
  
  #edit-cancel,
  #edit-save,
  .delete-button {
    padding: 8px 18px;
    font-size: 13px;
    min-width: 90px;
  }
}

/* Responsive Design für kleinere Bildschirme */
@media (max-width: 768px) {
  .edit-dialog {
    width: 90vw;
    max-width: 90vw;
    margin: 10px;
    max-height: 98vh;
  }
  
  #edit-form {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px;
  }
  
  .edit-dialog h3 {
    padding: 12px 16px 8px;
    font-size: 16px;
  }
  
  .form-row label {
    margin-bottom: 3px;
    font-size: 10px;
  }
  
  .form-row input {
    padding: 8px 10px;
    font-size: 13px;
  }
  
  .form-actions {
    flex-direction: column;
    align-items: stretch;
    padding-top: 10px;
  }
  
  .main-actions {
    flex-direction: column-reverse;
    gap: 8px;
  }
  
  #edit-cancel,
  #edit-save,
  .delete-button {
    width: 100%;
    padding: 10px;
    font-size: 13px;
  }
}

/* Dark Mode Styles für den Dialog */
body.dark-mode .edit-dialog {
  background-color: #2c3e50;
  border-color: #34495e;
}

body.dark-mode .edit-dialog h3 {
  color: #ecf0f1;
  background: linear-gradient(135deg, #34495e, #2c3e50);
  border-bottom-color: #34495e;
}

body.dark-mode .edit-dialog-close-btn {
  color: #ecf0f1;
}

body.dark-mode .edit-dialog-close-btn:hover {
  background: rgba(52, 73, 94, 0.8);
}

body.dark-mode .form-row label {
  color: #ecf0f1;
}

body.dark-mode .form-row input {
  background-color: #34495e;
  border-color: #4a6741;
  color: #ecf0f1;
}

body.dark-mode .form-row input:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
  background-color: #3a4a5c;
}

body.dark-mode .form-row input:hover:not(:focus) {
  border-color: #5d6d7e;
}

body.dark-mode .form-row input[readonly] {
  background-color: #273344;
  color: #95a5a6;
  border-color: #394b59;
}

body.dark-mode .form-row input::placeholder {
  color: #7f8c8d;
}

body.dark-mode .form-actions {
  border-top-color: #34495e;
}

body.dark-mode #edit-cancel {
  background-color: #34495e;
  color: #ecf0f1;
}

body.dark-mode #edit-cancel:hover {
  background-color: #4a6741;
}

body.dark-mode #edit-save {
  background: linear-gradient(135deg, #3498db, #2980b9);
}

body.dark-mode #edit-save:hover {
  background: linear-gradient(135deg, #2980b9, #21618c);
}

body.dark-mode .delete-button {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
}

body.dark-mode .delete-button:hover {
  background: linear-gradient(135deg, #c0392b, #a93226);
}

/* Animation für das Aufblinken der Buttons */
@keyframes buttonFlash {
  0% {
    box-shadow: 0 0 0 4px rgba(33, 150, 243, 0.7);
    background-color: rgba(33, 150, 243, 0.3);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(33, 150, 243, 0.4);
    background-color: rgba(33, 150, 243, 0.2);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(33, 150, 243, 0);
    background-color: initial;
  }
}

/* Klasse für das Aufblinken der einzelnen Buttons */
#edit-save-button.button-flash,
#edit-cancel-button.button-flash {
  animation: buttonFlash 0.5s ease-out;
}

/* Optimiere die Aktionsspalte, damit sie nur so breit wie die Buttons ist */
.actions-cell {
  width: auto !important;
  min-width: 0 !important;
  white-space: nowrap;
  padding: 0 !important;
  text-align: center;
  vertical-align: middle;
}

.actions-container {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 20px;
  margin: 0 auto;
}

.edit-article-button,
.delete-article-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  margin: 0;
  width: 20px;
  height: 20px;
}

.edit-article-button:hover {
  background-color: rgba(33, 150, 243, 0.1);
}

.edit-article-button svg {
  fill: #2196f3;
  width: 12px;
  height: 12px;
}

.delete-article-button:hover {
  background-color: rgba(255, 59, 59, 0.1);
}

.delete-article-button svg {
  fill: #ff3b3b;
  width: 12px;
  height: 12px;
}

/* Dark Mode Styles für die Buttons */
body.dark-mode .edit-article-button:hover {
  background-color: rgba(33, 150, 243, 0.2);
}

body.dark-mode .delete-article-button:hover {
  background-color: rgba(255, 59, 59, 0.2);
}

/* Stelle sicher, dass die Aktionsspalte in der Tabelle minimal ist */
.database-table th:nth-child(8),
.database-table td:nth-child(8) {
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  padding: 0 !important;
  box-sizing: content-box;
}

/* NEUE LÖSUNG: Kreisrunder Button für maximale Sichtbarkeit */
/* Alle Thumbnails löschen Button - wie Dark Mode Toggle, aber oben rechts gespiegelt */
.clear-all-thumbnails-button {
  position: fixed;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background-color: #dc3545;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  cursor: pointer;
  z-index: 1000;
  transition: all 0.3s ease;
  border: none;
  padding: 0;
  box-shadow: -2px 2px 5px rgba(220, 53, 69, 0.3);
  /* NEU: Für zentriertes Icon */
  position: fixed;
  overflow: visible;
}

.clear-all-icon {
  width: 28px;
  height: 28px;
  fill: white;
  transition: all 0.3s ease;
  /* NEU: Geometrisch im Schwerpunkt des Dreiecks */
  position: absolute;
  top: 14%;
  right: 22%;
  transform: translate(35%, 0);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 0 1px rgba(0, 0, 0, 0.3));
  stroke: white;
  stroke-width: 0.5;
  pointer-events: none;
}

.clear-all-thumbnails-button:hover .clear-all-icon {
  transform: translate(35%, 0) scale(1.15);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 0 1px rgba(0, 0, 0, 0.5));
}

body.dark-mode .clear-all-icon {
  fill: #fff;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 0 1px rgba(0, 0, 0, 0.5));
  stroke: #fff;
  stroke-width: 0.8;
}

body.dark-mode .clear-all-thumbnails-button:hover .clear-all-icon {
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 1)) drop-shadow(0 0 0 1px rgba(0, 0, 0, 0.7));
}

@media (max-width: 767px) {
  .clear-all-thumbnails-button {
    width: 50px;
    height: 50px;
  }
  .clear-all-icon {
    width: 22px;
    height: 22px;
    top: 14%;
    right: 22%;
    transform: translate(35%, 0);
  }
}

@media (max-width: 480px) {
  .clear-all-thumbnails-button {
    width: 45px;
    height: 45px;
  }
  .clear-all-icon {
    width: 18px;
    height: 18px;
    top: 14%;
    right: 22%;
    transform: translate(35%, 0);
  }
}

/* Thumbnail-Delete-Button zurück in untere rechte Ecke */
.thumbnail-delete-button {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  background-color: rgba(220, 53, 69, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.8);
  padding: 0;
  opacity: 0.8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.thumbnail-delete-button:hover {
  background-color: rgba(220, 53, 69, 1);
  opacity: 1;
  transform: scale(1.1);
  box-shadow: 0 3px 8px rgba(220, 53, 69, 0.5);
  border-color: rgba(255, 255, 255, 1);
}

.thumbnail-delete-icon {
  width: 10px;
  height: 10px;
  fill: white;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

/* Zeige den Button nur beim Hover des Thumbnails */
.thumbnail .thumbnail-delete-button {
  opacity: 0;
  transform: scale(0.8);
}

.thumbnail:hover .thumbnail-delete-button {
  opacity: 0.8;
  transform: scale(1);
}

.thumbnail:hover .thumbnail-delete-button:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* Dark Mode Styles für den Delete-Button */
body.dark-mode .thumbnail-delete-button {
  background-color: rgba(220, 53, 69, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

body.dark-mode .thumbnail-delete-button:hover {
  background-color: rgba(220, 53, 69, 1);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 3px 8px rgba(220, 53, 69, 0.6);
}

/* Stelle sicher, dass der Button im aktiven Thumbnail sichtbar ist */
.thumbnail.active .thumbnail-delete-button {
  opacity: 0.6;
  transform: scale(1);
}

.thumbnail.active:hover .thumbnail-delete-button {
  opacity: 0.9;
}

/* Entferne die alten Styles für den Close-Button */
.thumbnail-close {
  display: none;
}

/* Füge diese Styles hinzu oder aktualisiere sie, um die Darstellung der Werte in der Tabelle zu verbessern */

/* Stelle sicher, dass die column-header-small Klasse auch in den Tabellenzellen richtig angezeigt wird */
.article-info .column-header-small {
  font-size: 11px;
  color: #777777;
  font-weight: normal;
  display: block;
  margin-bottom: 2px;
}

/* Dark Mode Styles für die kleineren Überschriften in den Tabellenzellen */
body.dark-mode .article-info .column-header-small {
  color: #999999;
}

/* Verbessere die Darstellung der Artikelinformationen */
.article-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  max-width: 100%;
  overflow: hidden;
}

/* Stelle sicher, dass die Werte in der zweiten Zeile gut lesbar sind */
.article-info .artnr,
.article-info .designation,
.article-info .vk-preis,
.article-info .nowrap {
  font-weight: 500;
  font-size: 14px;
}

/* Verbessere die Darstellung der Prozent-Zelle */
.percent-cell {
  font-weight: 500;
  text-align: center;
  display: block;
}

/* Farbige Prozentwerte */
.price-increase {
  color: red;
}

.price-decrease {
  color: #00c27e;
}

/* Dark Mode Verbesserungen für Prozentzellen */
body.dark-mode .percent-cell {
  /* Leichte Hintergrundfarbe für bessere Sichtbarkeit */
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  padding: 2px 4px;
  transition: all 0.2s ease;
}

body.dark-mode .percent-cell.price-increase {
  color: #ff6b6b; /* Helles Rot für Dark Mode */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  background-color: rgba(255, 107, 107, 0.1);
}

body.dark-mode .percent-cell.price-decrease {
  color: #00ffae; /* Helles Grün für Dark Mode */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  background-color: rgba(0, 255, 174, 0.1);
}

/* Hover-Effekt für Dark Mode Prozentzellen */
body.dark-mode .percent-cell:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: scale(1.05);
}

body.dark-mode .percent-cell.price-increase:hover {
  background-color: rgba(255, 107, 107, 0.2);
}

body.dark-mode .percent-cell.price-decrease:hover {
  background-color: rgba(0, 255, 174, 0.2);
}

/* Optimierte Overflow-Einstellungen für responsives Scaling */
html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
}

/* Links ausgerichtete Zellen für Hersteller und Bezeichnung */
.left-align {
  text-align: left !important;
}

/* Rechts ausgerichtete Inhalte */
.right-align {
  text-align: right !important;
}

/* Zentriert ausgerichtete Inhalte */
.center-align {
  text-align: center !important;
}

/* Linksbündige Darstellung für Alt-Werte */
.alt-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}

/* VK Neu Spalte: Alt-wrapper linksbündig */
.database-table td:nth-child(6) .alt-wrapper {
  align-items: flex-start;
  text-align: left;
  /* Kein zusätzliches padding-right - erbt das 8px von der Spalte */
}
.alt-wrapper .column-header-small {
  display: block;
}


/* Saubere linksbündige Darstellung für Alt-Zeile */
.alt-text {
  text-align: left;
  font-size: 0.8em;
  opacity: 0.7;
  margin-bottom: 4px;
}

/* VK Neu Spalte: Alt-text linksbündig */
.database-table td:nth-child(6) .alt-text {
  text-align: left !important;
  /* Kein zusätzliches padding-right - erbt das 8px von der Spalte */
}

/* VK Neu Spalte: Alle Inhalte linksbündig */
.database-table td:nth-child(6) * {
  text-align: left !important;
  /* Kein zusätzliches padding - erbt das 8px von der Spalte */
}

/* === HINTERGRUNDBILD-AUSWAHL FEATURE === */

/* Transparenter Button in der oberen rechten Ecke des A4-Schilds */
.background-image-selector-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  z-index: 15;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* PDF-Export spezifische Ausblendung - mehrfache Sicherheit */
.pdf-export .background-image-selector-btn,
.print-mode .background-image-selector-btn,
body.pdf-export .background-image-selector-btn,
body.print-mode .background-image-selector-btn {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
}

.background-image-selector-btn:hover {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Deaktivierter Button (wenn Artikel gesperrt ist) */
.background-image-selector-btn:disabled,
.background-image-selector-btn.article-locked {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  background: rgba(0, 0, 0, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: none !important;
  box-shadow: none !important;
}

.background-image-selector-btn:disabled:hover,
.background-image-selector-btn.article-locked:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* === MODERNES HINTERGRUNDBILD-MODAL === */

/* Modal Overlay */
.background-image-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: visible;
  pointer-events: auto; /* Modal-Background muss klickbar sein, damit Content klickbar ist */
}

/* Modal Content */
.background-image-modal-content {
  background: #ffffff;
  border-radius: 16px;
  max-width: 1200px;
  max-height: 95vh;
  width: 98%;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  overflow: visible;
  position: relative;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.1);
  pointer-events: auto !important; /* Modal-Content muss interaktiv sein */
}

/* Modal Header */
.background-image-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 28px;
  border-bottom: 1px solid #e8eaed;
  background: linear-gradient(135deg, #f8f9fa, #ffffff);
  flex-shrink: 0;
  border-radius: 16px 16px 0 0;
}

.background-image-modal-header h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 12px;
}

.background-image-modal-header h3::before {
  content: "🎨";
  font-size: 20px;
}

.background-image-modal-close {
  background: #f1f3f4;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #5f6368;
  padding: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.background-image-modal-close:hover {
  background: #e8eaed;
  color: #1a1a1a;
  transform: scale(1.05);
}

/* Tab-Navigation für Hintergrund-Auswahl */
.background-tabs {
  display: flex;
  background: #f8f9fa;
  border-bottom: 1px solid #e8eaed;
  padding: 0;
  margin: 0;
}

.background-tab {
  flex: 1;
  background: transparent;
  border: none;
  padding: 16px 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #5f6368;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-bottom: 3px solid transparent;
}

.background-tab:hover {
  background: #f1f3f4;
  color: #1a1a1a;
}

.background-tab.active {
  color: #007bff;
  border-bottom-color: #007bff;
  background: #ffffff;
}

.background-tab .tab-icon {
  font-size: 16px;
}

/* Tab-Content */
.background-tab-content {
  display: none;
  flex: 1;
  min-height: 0;
}

.background-tab-content.active {
  display: block;
}

/* Bilder-Grid */
.background-images-grid {
  padding: 24px;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: visible;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
  position: relative;
  flex: 1;
  min-height: 0;
  background: #fafbfc;
}

/* Einzelnes Hintergrundbild */
.background-image-item {
  position: relative;
  border: 2px solid #e8eaed;
  border-radius: 12px;
  overflow: visible;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.background-image-item:hover {
  border-color: #4285f4;
  transform: scale(1.4);
  box-shadow: 0 16px 32px rgba(66, 133, 244, 0.4);
  z-index: 9999; /* Hoher z-index, aber niedriger als Footer-Buttons (10001) */
  position: relative;
  pointer-events: auto;
}

.background-image-item img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  pointer-events: none;
  border-radius: 10px;
}

/* Bildname unter dem Bild - ausgeblendet da Bilder selbsterklärend */
.background-image-name {
  display: none;
}

/* Aktuell aktiv Indikator */
.background-image-item.current::before {
  content: "✓ AKTIV";
  position: absolute;
  top: 8px;
  right: 8px;
  background: #34a853;
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(52, 168, 83, 0.3);
}

/* Modal Footer */
.background-image-modal-footer {
  padding: 28px;
  border-top: 1px solid #e8eaed;
  background: #f8f9fa;
  border-radius: 0 0 16px 16px;
  flex-shrink: 0;
  position: relative;
  z-index: 10000 !important; /* Footer muss über anderen Modal-Inhalten liegen */
  pointer-events: auto !important; /* Footer muss interaktiv sein */
}

/* Anwendungsbereich-Auswahl */
.application-scope-selection {
  margin-bottom: 20px;
}

.application-scope-selection h4 {
  margin: 0 0 12px 0;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.application-scope-selection h4::before {
  content: "🎯";
  font-size: 18px;
}

.scope-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
  background: #ffffff;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid #e8eaed;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.scope-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  padding: 12px 10px;
  border-radius: 8px;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  position: relative;
  background: #fafbfc;
  text-align: center;
  min-height: 65px;
  justify-content: center;
}

.scope-option:hover {
  background: #f1f3f4;
  border-color: #4285f4;
  transform: translateY(-1px);
}

.scope-option input[type="radio"] {
  margin: 0;
  transform: scale(1.1);
  accent-color: #4285f4;
  align-self: center;
}

.scope-option input[type="radio"]:checked {
  accent-color: #34a853;
}

.scope-option:has(input:checked) {
  background: linear-gradient(135deg, #e8f5e8, #f0f8f0);
  border-color: #34a853;
  color: #1e4620;
  box-shadow: 0 2px 8px rgba(52, 168, 83, 0.15);
}

.scope-option-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.scope-option-title {
  font-weight: 600;
  margin-bottom: 4px;
  display: block;
  color: #1a1a1a;
  font-size: 13px;
  width: 100%;
  text-align: center;
}

.scope-option-description {
  font-size: 10px;
  color: #5f6368;
  font-weight: 400;
  line-height: 1.2;
  width: 100%;
  text-align: center;
}

/* Modal Buttons */
.modal-buttons {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 10001 !important; /* Sicherstellen, dass Buttons über allem liegen */
  pointer-events: auto !important; /* Buttons müssen klickbar sein */
}

.modal-buttons-right {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  position: relative;
  z-index: 10001 !important;
  pointer-events: auto !important;
}

.apply-background-btn,
.cancel-background-btn,
.reset-layout-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
  justify-content: center;
  position: relative;
  z-index: 10001 !important; /* Hoher z-index für Klickbarkeit */
  pointer-events: auto !important; /* Sicherstellen, dass Button klickbar ist */
  user-select: none; /* Verhindert Text-Selektion beim Klicken */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.reset-layout-btn {
  background: linear-gradient(135deg, #ea4335, #c5221f);
  color: white;
  box-shadow: 0 2px 8px rgba(234, 67, 53, 0.3);
  position: relative;
  z-index: 10001 !important; /* Höher als Modal-Content für Klickbarkeit */
  pointer-events: auto !important; /* Sicherstellen, dass Button klickbar ist */
  isolation: isolate; /* Erstellt neuen Stacking-Context */
  touch-action: manipulation; /* Optimiert für Touch-Geräte */
}

.reset-layout-btn::before {
  content: "↺";
  font-size: 16px;
  pointer-events: none; /* Verhindert, dass das Pseudo-Element Klicks blockiert */
  position: relative;
  z-index: 1;
}

.reset-layout-btn:hover {
  background: linear-gradient(135deg, #d33b2c, #b01815);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(234, 67, 53, 0.4);
  z-index: 10001 !important; /* Beibehalten beim Hover */
}

.reset-layout-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(234, 67, 53, 0.3);
  z-index: 10001 !important; /* Beibehalten beim Klick */
}

.reset-layout-btn:focus {
  outline: 3px solid rgba(234, 67, 53, 0.5);
  outline-offset: 2px;
  z-index: 10001 !important;
}

.apply-background-btn {
  background: linear-gradient(135deg, #34a853, #0f9d58);
  color: white;
  box-shadow: 0 2px 8px rgba(52, 168, 83, 0.3);
}

.apply-background-btn::before {
  content: "✓";
  font-size: 16px;
}

.apply-background-btn:disabled {
  background: #9aa0a6;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.6;
}

.apply-background-btn:disabled::before {
  content: "⏳";
}

.apply-background-btn:not(:disabled):hover {
  background: linear-gradient(135deg, #2d8f47, #0b8043);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(52, 168, 83, 0.4);
}

.cancel-background-btn {
  background: linear-gradient(135deg, #9aa0a6, #80868b);
  color: white;
  box-shadow: 0 2px 8px rgba(154, 160, 166, 0.3);
}

.cancel-background-btn::before {
  content: "✕";
  font-size: 14px;
}

.cancel-background-btn:hover {
  background: linear-gradient(135deg, #80868b, #5f6368);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(154, 160, 166, 0.4);
}

/* === DARK MODE STYLES === */
body.dark-mode .background-image-modal {
  background: rgba(0, 0, 0, 0.85);
}

body.dark-mode .background-image-modal-content {
  background: #1e1e1e;
  border: 1px solid #3c4043;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

body.dark-mode .background-image-modal-header {
  background: linear-gradient(135deg, #2d2d2d, #1e1e1e);
  border-bottom: 1px solid #3c4043;
}

body.dark-mode .background-image-modal-header h3 {
  color: #e8eaed;
}

body.dark-mode .background-image-modal-close {
  background: #3c4043;
  color: #9aa0a6;
}

body.dark-mode .background-image-modal-close:hover {
  background: #5f6368;
  color: #e8eaed;
}

body.dark-mode .background-images-grid {
  background: #2d2d2d;
}

body.dark-mode .background-image-item {
  background: #1e1e1e;
  border: 2px solid #3c4043;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .background-image-item:hover {
  border-color: #8ab4f8;
  box-shadow: 0 12px 24px rgba(138, 180, 248, 0.3);
}

body.dark-mode .background-image-modal-footer {
  background: #2d2d2d;
  border-top: 1px solid #3c4043;
}

/* Dark Mode für Tab-Navigation */
body.dark-mode .background-tabs {
  background: #2d2d2d;
  border-bottom-color: #3c4043;
}

body.dark-mode .background-tab {
  color: #9aa0a6;
}

body.dark-mode .background-tab:hover {
  background: #3c4043;
  color: #e8eaed;
}

body.dark-mode .background-tab.active {
  color: #8ab4f8;
  border-bottom-color: #8ab4f8;
  background: #1e1e1e;
}

body.dark-mode .application-scope-selection h4 {
  color: #e8eaed;
}

body.dark-mode .scope-options {
  background: #1e1e1e;
  border: 1px solid #3c4043;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .scope-option {
  background: #2d2d2d;
  color: #e8eaed;
  align-items: center;
}

body.dark-mode .scope-option:hover {
  background: #3c4043;
  border-color: #8ab4f8;
}

body.dark-mode .scope-option:has(input:checked) {
  background: linear-gradient(135deg, #1e3a1e, #2d4a2d);
  border-color: #81c995;
  color: #a8d5ba;
  box-shadow: 0 2px 8px rgba(129, 201, 149, 0.2);
}

body.dark-mode .scope-option-title {
  color: #e8eaed;
}

body.dark-mode .scope-option-description {
  color: #9aa0a6;
}

body.dark-mode .apply-background-btn {
  background: linear-gradient(135deg, #81c995, #66bb6a);
  box-shadow: 0 2px 8px rgba(129, 201, 149, 0.3);
}

body.dark-mode .apply-background-btn:not(:disabled):hover {
  background: linear-gradient(135deg, #66bb6a, #4caf50);
  box-shadow: 0 4px 12px rgba(129, 201, 149, 0.4);
}

body.dark-mode .cancel-background-btn {
  background: linear-gradient(135deg, #5f6368, #3c4043);
  box-shadow: 0 2px 8px rgba(95, 99, 104, 0.3);
}

body.dark-mode .cancel-background-btn:hover {
  background: linear-gradient(135deg, #3c4043, #2d2d2d);
  box-shadow: 0 4px 12px rgba(95, 99, 104, 0.4);
}

body.dark-mode .reset-layout-btn {
  background: linear-gradient(135deg, #ea4335, #c5221f);
}

body.dark-mode .reset-layout-btn:hover {
  background: linear-gradient(135deg, #d33b2c, #b01815);
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 768px) {
  .background-image-modal-content {
    margin: 5px;
    max-height: 98vh;
    width: 98%;
    border-radius: 8px;
  }
  
  .background-image-modal-header {
    padding: 12px 16px;
  }
  
  .background-image-modal-header h3 {
    font-size: 16px;
  }
  
  .background-images-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); /* Noch kleinere Bilder für bessere Übersicht */
    gap: 8px; /* Etwas mehr Gap um Überlappungen zu vermeiden */
    padding: 12px;
    max-height: 50vh; /* Reduziert für mehr Platz für Footer */
  }
  
  /* Reduzierte Hover-Effekte auf Tablets */
  .background-image-item:hover {
    transform: scale(1.6); /* Größere Vergrößerung für bessere Erkennbarkeit */
    z-index: 500; /* Mittlerer z-index */
  }
  
  .background-image-modal-footer {
    padding: 16px;
  }
  
  .application-scope-selection h4 {
    font-size: 14px;
    margin-bottom: 12px;
  }
  
  .scope-options {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 10px;
  }
  
  .scope-option {
    padding: 10px;
    font-size: 12px;
    min-height: auto;
    flex-direction: row;
    text-align: left;
  }
  
  .scope-option-content {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }
  
  .scope-option-title {
    font-size: 13px;
  }
  
  .scope-option-description {
    font-size: 11px;
  }
  
  .modal-buttons {
    flex-direction: column;
    gap: 8px;
  }
  
  .apply-background-btn,
  .cancel-background-btn {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
  }
}

/* Weitere Optimierungen für sehr kleine Displays */
@media (max-width: 480px) {
  .background-image-modal-content {
    margin: 2px;
    max-height: 99vh;
    width: calc(100% - 4px);
    border-radius: 4px;
  }
  
  .background-image-modal-header {
    padding: 8px 12px;
  }
  
  .background-image-modal-header h3 {
    font-size: 14px;
  }
  
  .background-image-modal-close {
    width: 28px;
    height: 28px;
    font-size: 24px;
  }
  
  .background-images-grid {
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); /* Sehr kleine Bilder für Mobilgeräte */
    gap: 4px;
    padding: 8px;
    max-height: 40vh; /* Noch weniger Platz für Grid */
  }
  
  .background-image-modal-footer {
    padding: 12px;
  }
  
  .application-scope-selection {
    margin-bottom: 16px;
  }
  
  .application-scope-selection h4 {
    font-size: 12px;
    margin-bottom: 8px;
  }
  
  .scope-options {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 6px;
  }
  
  .scope-option {
    padding: 6px;
    font-size: 11px;
    min-height: auto;
    flex-direction: row;
    text-align: left;
  }
  
  .scope-option-content {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }
  
  .scope-option-title {
    font-size: 12px;
    margin-bottom: 2px;
  }
  
  .scope-option-description {
    font-size: 10px;
    line-height: 1.2;
  }
  
  .modal-buttons {
    gap: 6px;
  }
  
  .apply-background-btn,
  .cancel-background-btn {
    padding: 10px 12px;
    font-size: 13px;
    min-width: auto;
  }
  
  /* Moderate Hover-Vergrößerung auf sehr kleinen Displays */
  .background-image-item:hover {
    transform: scale(1.5); /* Größere Vergrößerung für bessere Erkennbarkeit */
    z-index: 100; /* Ausreichender z-index für Sichtbarkeit */
  }
}

/* Optimierung für große Bildschirme */
@media (min-width: 1400px) {
  .background-image-modal-content {
    max-width: 1400px;
  }
  
  .background-images-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    max-height: 75vh;
  }
}

/* === ERWEITERTE MARKIERUNGS-STYLES === */
.background-image-item.selected {
  border-color: #4285f4;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.2);
}

.background-image-item.selected::before {
  content: "AUSGEWÄHLT";
  position: absolute;
  top: 8px;
  left: 8px;
  background: #4285f4;
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(66, 133, 244, 0.3);
}

.background-image-item.current:not(.selected) {
  border-color: #34a853;
}

.background-image-item.current:not(.selected)::after {
  content: "AKTIV";
  position: absolute;
  top: 8px;
  left: 8px;
  background: #34a853;
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(52, 168, 83, 0.3);
}

.background-image-item.current.selected {
  /* Erbt von .background-image-item.selected - kein zusätzliches Label */
}

/* Dark Mode Markierungen */
body.dark-mode .background-image-item.selected {
  border-color: #8ab4f8;
  box-shadow: 0 0 0 3px rgba(138, 180, 248, 0.2);
}

body.dark-mode .background-image-item.selected::before {
  background: #8ab4f8;
  box-shadow: 0 2px 4px rgba(138, 180, 248, 0.3);
}

body.dark-mode .background-image-item.current:not(.selected) {
  border-color: #81c995;
}

body.dark-mode .background-image-item.current:not(.selected)::after {
  background: #81c995;
  box-shadow: 0 2px 4px rgba(129, 201, 149, 0.3);
}


/* === Erweiterte Farb- und Markierungs-Styles === */
:root {
  --yellow-bg: #ffff88;
  --yellow-text-dark: #000;
  --text-muted: #888;
}

/* Gelbe Hervorhebung für Altware-Artikel - NIEDRIGERE Priorität */
.table-row.selected:not(.active-row) {
  background-color: var(--yellow-bg);
}

.table-row.selected:not(.active-row) .ean,
.table-row.selected:not(.active-row) .hersteller,
.table-row.selected:not(.active-row) .uvp {
  color: var(--yellow-text-dark) !important;
}

.text-muted {
  color: var(--text-muted);
}

.bg-yellow {
  background-color: var(--yellow-bg);
}

.text-black {
  color: var(--yellow-text-dark);
}

/* A4 randlos - optimiert für PDF-Export */
.a4-container-wrapper, .a4-container {
  width: 210mm;
  height: 297mm;
  min-width: 210mm;
  min-height: 297mm;
  max-width: 210mm;
  max-height: 297mm;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  page-break-after: avoid;
  page-break-before: avoid;
  page-break-inside: avoid;
  /* background: #fff; entfernt, damit das gelbe Hintergrundbild sichtbar bleibt */
}



/* Action-Button Styles - animiertes Design */
.action-button {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);  /* Zentriert + 90° Rotation */
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  background: #183153;
  margin-right: -5px; /* Zusätzliche Verschiebung nach rechts */
  font-family: "Montserrat", sans-serif;
  box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  cursor: pointer;
  border: none;
  transition: all 0.3s ease;
  min-width: 100px;
  width: 100px; /* Feste Breite für alle Buttons */
  height: 50px; /* Feste Höhe für alle Buttons */
}

.action-button:after {
  content: " ";
  width: 0%;
  height: 100%;
  background: #ffd401;
  position: absolute;
  transition: all 0.4s ease-in-out;
  right: 0;
}

.action-button:hover::after {
  right: auto;
  left: 0;
  width: 100%;
}

.action-button span {
  text-align: center;
  text-decoration: none;
  width: 100%;
  padding: 12px 16px;
  color: #fff;
  font-size: 1.05em;
  font-weight: 700;
  letter-spacing: 0.2em;
  z-index: 1001;
  transition: all 0.3s ease-in-out;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.action-button .download-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  transition: all 0.3s ease-in-out;
  transform: rotate(-90deg); /* Gegenrotation für das Icon */
  flex-shrink: 0; /* Verhindert Größenänderung */
}

.action-button:hover span {
  color: #183153;
  animation: scaleUp 0.3s ease-in-out;
}

.action-button:hover .download-icon {
  transform: rotate(-90deg) translateY(2px);
  animation: downloadBounce 0.6s ease-in-out;
}

/* Button-Positionierung für gleichmäßige Abstände */
.action-button-second {
  top: calc(50% + 110px); /* Noch größerer Abstand für bessere Trennung */
}

.action-button-third {
  top: calc(50% + 220px); /* Noch größerer Abstand für bessere Trennung */
}

/* PDF Alle Button - positioniert unterhalb des normalen PDF-Buttons */
#pdfAllButton {
  /* Verwendet .action-button-second für Positionierung */
}

/* 🆕 PDF ALT Button - positioniert unterhalb des Alle-Buttons */
#pdfAltButton {
  /* Verwendet .action-button-third für Positionierung */
}

/* Artikel-Anzahl Badge für PDF Alle Button und ALT Button */
#pdfAllButton .article-count-badge,
#pdfAltButton .article-count-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #dc3545; /* Dunkleres Rot für besseren Kontrast */
  color: white;
  font-size: 12px;
  font-weight: 900; /* Noch fetter für bessere Lesbarkeit */
  padding: 4px 8px;
  border-radius: 12px;
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.2) inset; /* Stärkerer Schatten + innerer Highlight */
  text-shadow: 0 1px 2px rgba(0,0,0,0.8); /* Text-Schatten für bessere Lesbarkeit */
  z-index: 1001;
  transform: rotate(-90deg); /* Gegenrotation für die Badges */
  min-width: 24px;
  min-height: 20px;
  text-align: center;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, color 0.3s ease; /* Nur Farben animieren, nicht die Transformation */
}

/* 🆕 ALT Button Badge - unterschiedliche Farbe für Bestandsmengen */
#pdfAltButton .article-count-badge {
  background: #198754; /* Dunkleres Grün für besseren Kontrast */
}

/* Badge Animation */
#pdfAllButton .article-count-badge.updated,
#pdfAltButton .article-count-badge.updated {
  animation: badgePulse 0.6s ease-in-out;
}

@keyframes badgePulse {
  0% { transform: rotate(-90deg) scale(1); }
  50% { transform: rotate(-90deg) scale(1.2); background: #e74c3c; } /* Animationsfarbe angepasst */
  100% { transform: rotate(-90deg) scale(1); }
}

/* Dark Mode Badge - Verbesserte Kontraste für Dark Mode */
body.dark-mode #pdfAllButton .article-count-badge {
  background: #e74c3c; /* Kräftigeres Rot für Dark Mode */
  border-color: #444;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.1) inset;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9); /* Stärkerer Text-Schatten im Dark Mode */
}

body.dark-mode #pdfAltButton .article-count-badge {
  background: #20c997; /* Dunkleres Türkis-Grün für besseren Dark Mode Kontrast */
  border-color: #444;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.1) inset;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9); /* Stärkerer Text-Schatten im Dark Mode */
}

@keyframes downloadBounce {
  0%, 100% {
    transform: rotate(-90deg) translateY(0);
  }
  50% {
    transform: rotate(-90deg) translateY(4px);
  }
}

@keyframes scaleUp {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
  }
}

/* Action-Button Dark Mode */
body.dark-mode .action-button {
  background: #2c3e50;
  box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.4);
}

body.dark-mode .action-button:after {
  background: #f39c12;
}

body.dark-mode .action-button:hover span {
  color: #2c3e50;
}

/* Sichtbarkeit des Action-Buttons sicherstellen */
.action-button {
  /* Zusätzliche Sichtbarkeit */
  opacity: 1 !important;
  visibility: visible !important;
}

/* Print-Button Fixed Styles */
.print-button-fixed {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(calc(-50% + 30px));  /* 30px nach unten */
  z-index: 999;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #28a745, #20c997);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
  display: flex !important;  /* *** GEÄNDERT: Dauerhaft sichtbar *** */
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: white;
}

.print-button-fixed:hover {
  background: linear-gradient(135deg, #20c997, #17a2b8);
  transform: translateY(calc(-50% + 30px)) translateY(-2px);
  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

.print-button-fixed:active {
  transform: translateY(calc(-50% + 30px)) translateY(0px);
  box-shadow: 0 2px 10px rgba(40, 167, 69, 0.3);
}

.print-button-fixed svg {
  width: 24px;
  height: 24px;
  fill: white;
}

/* Print-Button Fixed Dark Mode */
body.dark-mode .print-button-fixed {
  background: linear-gradient(135deg, #17a2b8, #6f42c1);
  box-shadow: 0 4px 15px rgba(23, 162, 184, 0.3);
}

/* Responsive Anpassungen für Buttons */
@media (max-width: 767px) {
  .action-button {
    right: 0;
    transform: translateY(-50%) rotate(90deg);  /* Einfache, stabile Positionierung */
    padding: 0;
  }
  
  .action-button span {
    padding: 14px 20px;
    font-size: 1em;
    letter-spacing: 0.2em;
  }
  
  .print-button-fixed {
    right: 10px;
    transform: translateY(calc(-50% + 25px));  /* Näher zusammen auf mobil */
    width: 48px;
    height: 48px;
  }
  
  .print-button-fixed:hover {
    transform: translateY(calc(-50% + 25px)) translateY(-2px);
  }
  
  .print-button-fixed:active {
    transform: translateY(calc(-50% + 25px)) translateY(0px);
  }
  
  .print-button-fixed svg {
    width: 20px;
    height: 20px;
  }
}

/* Entferne alle Print-Styles - lasse html2pdf die Arbeit machen */

/* Responsive Skalierung für die Bildschirmvorschau - nur Screen, nicht Print */
@media screen {
  .a4-container-wrapper {
    transform-origin: center top; /* Skaliert von oben statt von der Mitte */
    transition: none !important; /* Entferne Transition um Sprünge zu vermeiden */
    margin: 10px 0 0 0 !important; /* Kein Auto-Margin, da JavaScript-Zentrierung verwendet wird */
    display: block;
    opacity: 0; /* Verstecke bis Skalierung angewendet wird */
    position: relative;
    left: 50%; /* Wird durch JavaScript überschrieben, aber als Fallback */
    transform: translateX(-50%); /* Fallback-Zentrierung */
  }
  
  .a4-container-wrapper.a4-responsive-scale {
    /* Transform wird dynamisch via JavaScript gesetzt - kombiniert Zentrierung und Skalierung */
    position: relative;
    z-index: 1;
    opacity: 1; /* Zeige nach Skalierung */
    transition: opacity 0.3s ease; /* Nur Fade-in Transition */
    margin: 10px 0 0 0 !important; /* Kein Auto-Margin, JavaScript übernimmt Zentrierung */
  }
  
  /* Stelle sicher, dass das A4-Blatt direkt unter den Thumbnails startet */
  .preview-area .a4-container-wrapper {
    margin-top: 5px !important; /* Minimaler Abstand zu Thumbnails */
  }
  
  /* Verhindere unnötiges Scrolling in der Preview-Area */
  .preview-area {
    overflow: hidden;
  }
  
  /* Aber erlaube Scrolling für spezifische Container */
  .sidebar {
    overflow-y: auto;
  }
  
  .thumbnails-container {
    overflow-x: auto;
    overflow-y: hidden;
  }
}

/* Print-spezifische Regeln für korrekte Preisgröße beim Drucken */
@media print {
  @page {
    size: 210mm 297mm;
    margin: 0;
  }

  /* Aktiviere Farbdruck für alle Browser */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* WICHTIG: Aktiviere Hintergrundbilder für Druckansicht */
  .a4-container {
    background-image: var(--current-background-image, url("../Background/BG.png")) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* KORRIGIERTE DRUCK-POSITION - nicht zu hoch, da PDF separat gehandhabt wird */
  body .a4-container .inhalt .preis-vkneu,
  body .preis-vkneu,
  .a4-container .inhalt .preis-vkneu,
  .preis-vkneu {
    top: 73% !important; /* Normale Position für Druck-Version */
    position: absolute !important;
  }

  /* Korrigiere VK-Neu-Preis-Größe beim Drucken - noch größere Pixel-Werte für Druckversion */
  body .a4-container .inhalt .preis-vkneu-inner,
  body .preis-vkneu-inner,
  .a4-container .inhalt .preis-vkneu-inner,
  .preis-vkneu-inner {
    font-size: 210px !important; /* Leicht erhöht von 200px auf 210px */
    line-height: 0.8 !important;
  }

  /* Footer-Elemente beim Drucken mit fester Schriftgröße */
  .footer-item {
    font-size: 14px !important; /* Feste Pixel-Größe statt em/vh */
  }

  .ean {
    font-size: 12px !important; /* Feste Pixel-Größe */
  }
  
  /* Hintergrundbild-Button beim Drucken ausblenden */
  .background-image-selector-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

.footer-spacer {
  flex: 1 1 0;
  min-width: 0;
}

/* Button-Flash-Effekt für Scroll-Navigation */
@keyframes buttonPulse {
  0% { 
    box-shadow: 0 0 0 0 rgba(0, 122, 204, 0.7);
    background-color: var(--secondary-color);
    transform: scale(1);
  }
  50% { 
    box-shadow: 0 0 0 8px rgba(0, 122, 204, 0.2);
    background-color: #007acc;
    transform: scale(1.05);
  }
  100% { 
    box-shadow: 0 0 0 0 rgba(0, 122, 204, 0);
    background-color: var(--secondary-color);
    transform: scale(1);
  }
}

.button-flash {
  animation: buttonPulse 0.8s ease-in-out !important;
}

/* Dark Mode Support für Button-Flash */
body.dark-mode .button-flash {
  animation: buttonPulse 0.8s ease-in-out !important;
}

/* Responsive Zeitanzeige - kompakte Version als Standard für bessere Platznutzung */
.time-display .time-full {
  display: none;
}

.time-display .time-compact {
  display: inline;
}

/* Nur bei sehr großen Bildschirmen die ausführliche Version anzeigen */
@media (min-width: 1920px) {
  .time-display .time-full {
    display: inline;
  }
  
  .time-display .time-compact {
    display: none;
  }
}

/* === KOLLISIONSVERMEIDUNG / ARTIKEL-SPERRUNG === */

/* Gesperrte Artikel in der Datenbankansicht */
.database-table tbody tr.article-occupied {
  opacity: 1; /* Volle Opazität für bessere Sichtbarkeit des Musters */
  /* Diagonales Streifenmuster wie Polizei-Absperrband - SICHTBARER */
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 193, 7, 0.5),
    rgba(255, 193, 7, 0.5) 8px,
    rgba(255, 193, 7, 0.6) 8px,
    rgba(255, 193, 7, 0.6) 16px
  ) !important;
  /* Position für z-index Layering */
  position: relative;
  z-index: 1;
}

.database-table tbody tr.article-occupied:hover {
  cursor: not-allowed !important;
  /* Hover-Effekt für die Zellen, nicht die Zeile */
}

.database-table tbody tr.article-occupied:hover td {
  background-color: rgba(255, 193, 7, 0.45) !important; /* Noch stärkerer gelber Hinweis für Zellen beim Hover */
}

.database-table tbody tr.article-occupied td {
  color: #495057 !important; /* Dunklerer Text für bessere Lesbarkeit */
  cursor: not-allowed !important; /* Cursor für alle Zellen */
  /* Hover-Events erlaubt, aber Klicks werden via JavaScript verhindert */
  pointer-events: auto;
  /* Text über dem Absperrband-Muster positionieren */
  position: relative;
  z-index: 2;
  /* Hintergrund für bessere Lesbarkeit */
  background-color: rgba(255, 255, 255, 0.85) !important;
}

/* Alle interaktiven Elemente in gesperrten Zeilen deaktivieren */
.database-table tbody tr.article-occupied td button,
.database-table tbody tr.article-occupied td a,
.database-table tbody tr.article-occupied td input {
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* AUSNAHME: Laufende Nummer (erste Spalte) soll Hover-Effekte behalten */
.database-table tbody tr.article-occupied td:nth-child(1) {
  pointer-events: auto !important; /* Erlaube Maus-Interaktionen für Hover */
  cursor: not-allowed !important; /* Aber zeige "nicht erlaubt" Cursor */
}

/* Hover-Effekt für laufende Nummer bei gesperrten Artikeln - mit User-Farbe */
.database-table tbody tr.article-occupied td:nth-child(1):hover {
  transform: scaleX(2.5) scaleY(1.5) !important;
  z-index: 20 !important;
  border: none !important;
  border-radius: 3px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  background-color: var(--user-hover-color, rgba(220, 53, 69, 0.9)) !important; /* User-Farbe mit Fallback */
}

.database-table tbody tr.article-occupied td:nth-child(1):hover .running-number {
  font-weight: bold !important;
  color: white !important; /* Weißer Text auf User-Farbe */
  transform: rotate(-90deg) !important;
}

/* Dark Mode Unterstützung für gesperrte Artikel Hover */
body.dark-mode .database-table tbody tr.article-occupied td:nth-child(1):hover .running-number {
  color: white !important; /* Weißer Text auch im Dark Mode */
}

.database-table tbody tr.article-occupied .artnr {
  /* Normale Farbe für bessere Lesbarkeit */
}

/* Tooltip für gesperrte Artikel - direkt am rechten Ende der Zeile, über der gesamten Zeile */
.occupation-tooltip {
  position: absolute !important;
  top: 50% !important;
  right: 5px !important;
  transform: translateY(-50%) !important;
  font-size: 13px !important; /* Größere Schrift für bessere Lesbarkeit */
  font-weight: 600 !important; /* Halbfett für bessere Lesbarkeit */
  padding: 6px 10px !important; /* Mehr Padding für bessere Lesbarkeit */
  border-radius: 8px !important;
  z-index: 10000 !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3) !important; /* Stärkerer Schatten für bessere Sichtbarkeit */
  background-color: rgba(0, 0, 0, 0.95) !important; /* Sehr dunkler Hintergrund für Light Mode - fast undurchsichtig */
  color: #ffffff !important; /* Weißer Text für Light Mode */
  text-shadow: 0 1px 2px rgba(0,0,0,0.8), 0 0 4px rgba(0,0,0,0.5) !important; /* Text-Shadow für bessere Lesbarkeit */
  border: 1px solid rgba(255,255,255,0.2) !important; /* Leichter Border für bessere Abgrenzung */
  backdrop-filter: blur(4px) !important; /* Leichter Blur-Effekt für bessere Lesbarkeit */
  line-height: 1.4 !important; /* Bessere Zeilenhöhe */
}

/* Stelle sicher, dass die letzte Spalte overflow sichtbar hat */
.database-table tbody tr td:last-child {
  overflow: visible !important;
  position: relative !important;
}

/* Stelle sicher, dass die Zeile overflow sichtbar hat */
.database-table tbody tr {
  overflow: visible !important;
}

/* Stelle sicher, dass die Tabelle overflow sichtbar hat */
.database-table {
  overflow: visible !important;
}

/* Stelle sicher, dass der Container overflow sichtbar hat für Tooltips */
.database-table-container {
  overflow-x: auto !important;
  overflow-y: auto !important;
  /* Tooltips können über den Container hinausragen */
}

/* Dark Mode Styles für occupation-tooltip */
body.dark-mode .occupation-tooltip {
  background-color: rgba(255, 255, 255, 0.98) !important; /* Sehr heller Hintergrund für Dark Mode - fast undurchsichtig */
  color: #111111 !important; /* Sehr dunkler Text für Dark Mode für maximalen Kontrast */
  box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.4) !important; /* Stärkerer Schatten im Dark Mode */
  text-shadow: 0 1px 2px rgba(255,255,255,0.8), 0 0 4px rgba(255,255,255,0.3) !important; /* Text-Shadow für bessere Lesbarkeit im Dark Mode */
  border: 1px solid rgba(0,0,0,0.2) !important; /* Leichter Border für bessere Abgrenzung */
}

/* Dark Mode Unterstützung */
body.dark-mode .database-table tbody tr.article-occupied {
  /* Diagonales Streifenmuster für Dark Mode - SICHTBARER */
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 193, 7, 0.55),
    rgba(255, 193, 7, 0.55) 8px,
    rgba(255, 193, 7, 0.7) 8px,
    rgba(255, 193, 7, 0.7) 16px
  ) !important;
  /* Position für z-index Layering */
  position: relative;
  z-index: 1;
}

body.dark-mode .database-table tbody tr.article-occupied:hover {
  /* Hover-Effekt für die Zellen, nicht die Zeile */
}

body.dark-mode .database-table tbody tr.article-occupied:hover td {
  background-color: rgba(255, 193, 7, 0.6) !important; /* Noch stärkerer gelber Hinweis für Zellen im Dark Mode beim Hover */
}

body.dark-mode .database-table tbody tr.article-occupied td {
  color: #e9ecef !important; /* Hellerer Text für Dark Mode */
  /* Text über dem Absperrband-Muster positionieren */
  position: relative;
  z-index: 2;
  /* Hintergrund für bessere Lesbarkeit im Dark Mode */
  background-color: rgba(33, 37, 41, 0.85) !important;
}

body.dark-mode .database-table tbody tr.article-occupied .artnr {
  /* Normale Farbe für bessere Lesbarkeit im Dark Mode */
}

/* === KOLLABORATION BENUTZER-LISTE === */

/* Erweiterte Benutzer-Info mit Artikel-Anzahl */
.user-article-count {
  background: var(--primary-color);
  color: white;
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 8px;
  margin-left: 5px;
}

/* Animation für neue Artikel-Updates */
@keyframes articleUpdate {
  0% { 
    transform: scale(1); 
    background: rgba(76, 175, 80, 0.3);
  }
  50% { 
    transform: scale(1.1); 
    background: rgba(76, 175, 80, 0.6);
  }
  100% { 
    transform: scale(1); 
    background: rgba(76, 175, 80, 0.3);
  }
}

.collaboration-article-highlight {
  animation: articleUpdate 0.5s ease-in-out;
}

/* 🎯 FESTE PROPORTIONEN: Hinweis-Text über dem Footer */
.hinweis-text {
  position: absolute;
  top: 1000px; /* war: 89% von 1123px ≈ 1000px */
  left: 50%;
  transform: translateX(-50%);
  font-size: 22px; /* war: 2.0vh ≈ 22px bei 1123px Höhe */
  font-weight: normal;
  color: black !important;
  text-align: center;
  width: 100%;
  line-height: 1.1;
  padding: 2px 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  z-index: 5;
  max-height: 49px; /* war: 4.4vh ≈ 49px bei 1123px Höhe für ca. 2 Zeilen */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Verstecke Prozent-Rabatt und Trennstrich im roten Kasten */
.preis-rabatt-trennstrich,
.preis-rabatt-prozent {
  display: none !important;
}

/* 🎯 FESTE PROPORTIONEN: Euro-Rabatt mit festem Startwert */
.preis-rabatt-euro {
  font-size: 56px; /* war: 5vh ≈ 56px bei 1123px Höhe - wird von JavaScript optimiert */
}

/* 🎯 SPEZIELLE PDF-EXPORT-REGELN für volle A4-Ausnutzung */
body.pdf-export .a4-scale-wrapper {
  display: block !important;
  transform: none !important;
  position: static !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

body.pdf-export .a4-container {
  /* VOLLE A4-DIMENSIONEN für PDF-Export */
  width: 210mm !important;
  height: 297mm !important;
  min-width: 210mm !important;
  min-height: 297mm !important;
  max-width: 210mm !important;
  max-height: 297mm !important;
  transform: none !important;
  transform-origin: top left !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  left: 0 !important;
  top: 0 !important;
}

/* WICHTIG: Spezielle Druckregeln für Hintergrundbilder - überschreibt alle anderen Regeln */
@media print {
  /* Alle A4-Container sollen ihre Hintergrundbilder auch beim Drucken anzeigen */
  .a4-container,
  .print-only-container .a4-container,
  div[class*="a4-container"] {
    background-image: inherit !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  
  /* Zusätzliche Sicherstellung für alle Elemente mit Hintergrundbild-Styles */
  [style*="background-image"] {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
}

/* Hintergrundbild-Indikatoren für Thumbnails */
.background-indicator {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #007bff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.thumbnail:hover .background-indicator {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.1);
}

/* Dark Mode Anpassungen für Hintergrundbild-Indikatoren */
body.dark-mode .background-indicator {
  background: rgba(30, 30, 30, 0.9);
  border-color: #3498db;
  color: #3498db;
}

body.dark-mode .thumbnail:hover .background-indicator {
  background: rgba(30, 30, 30, 1);
}

/* Ausgewähltes Bild für Änderung (hat höchste Priorität) */
.background-image-item.selected {
  border-color: #28a745 !important;
  box-shadow: 0 8px 16px rgba(40, 167, 69, 0.4) !important;
  z-index: 999;
  position: relative;
}

.background-image-item.selected::before {
  content: "✓ Auswählen";
  position: absolute;
  top: 4px;
  left: 4px;
  background: #28a745;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: bold;
  z-index: 10;
}

/* Aktuell verwendetes Hintergrundbild (nur wenn NICHT selected) */
.background-image-item.current:not(.selected) {
  border-color: #17a2b8 !important;
  box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3) !important;
  position: relative;
}

.background-image-item.current:not(.selected)::after {
  content: "● Aktiv";
  position: absolute;
  top: 4px;
  right: 4px;
  background: #17a2b8;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: bold;
  z-index: 10;
}

/* Wenn ein Bild sowohl current als auch selected ist - zeige nur selected */
.background-image-item.current.selected {
  /* Erbt von .background-image-item.selected - kein zusätzliches Label */
}

/* Dark Mode Anpassungen */
body.dark-mode .background-image-item.selected {
  border-color: #2ecc71 !important;
  box-shadow: 0 8px 16px rgba(46, 204, 113, 0.4) !important;
}

body.dark-mode .background-image-item.selected::before {
  background: #2ecc71;
}

body.dark-mode .background-image-item.current:not(.selected) {
  border-color: #3498db !important;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3) !important;
}

body.dark-mode .background-image-item.current:not(.selected)::after {
  background: #3498db;
}

/* === SCHWARZER TEXT NUR FÜR PREISSCHILDER-FOOTER - HÖCHSTE PRIORITÄT === */
/* NUR für Footer-Elemente und Preis-Elemente in A4-Containern, NICHT für Datenbankansicht */
.footer-line .footer-item,
.footer-line .druckdatum,
.footer-line .artnr,
.footer-line .ean,
.a4-container .footer-item,
.a4-container .druckdatum,
.a4-container .artnr,
.a4-container .ean,
.a4-container .preis-uvp,
.a4-container .hinweis-text {
  color: black !important;
}

/* Auch im Dark Mode soll NUR der Footer schwarz bleiben */
body.dark-mode .footer-line .footer-item,
body.dark-mode .footer-line .druckdatum,
body.dark-mode .footer-line .artnr,
body.dark-mode .footer-line .ean,
body.dark-mode .a4-container .footer-item,
body.dark-mode .a4-container .druckdatum,
body.dark-mode .a4-container .artnr,
body.dark-mode .a4-container .ean,
body.dark-mode .a4-container .preis-uvp,
body.dark-mode .a4-container .hinweis-text {
  color: black !important;
}

/* Benutzerdefinierter Text zwischen Thumbnails und Scrollleiste */
.custom-text-signature {
  position: absolute;
  top: 216px;
  left: 0;
  right: 0;
  width: 100%;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  font-family: 'Courier New', monospace;
  font-weight: normal;
  text-align: center;
  pointer-events: none;
  user-select: none;
  z-index: 5;
  opacity: 0.8;
  letter-spacing: 0.5px;
}

/* Entwickler-Signatur (dezente Fußnote im Hintergrund) */
.developer-signature {
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  width: 100%;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  font-family: 'Courier New', monospace;
  font-weight: normal;
  text-align: center;
  pointer-events: auto !important; /* KRITISCH: Muss aktiviert sein für Click/Hover-Events */
  user-select: none;
  z-index: 5;
  opacity: 0.8;
  letter-spacing: 0.5px;
  cursor: pointer;
}

/* Versionsnummer erbt alle Stile von der Signatur */
.developer-signature #version-number {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* Dark Mode für benutzerdefinierten Text */
body.dark-mode .custom-text-signature {
  color: rgba(255, 255, 255, 0.5);
  opacity: 0.7;
}

/* Dark Mode für Entwickler-Signatur */
body.dark-mode .developer-signature {
  color: rgba(255, 255, 255, 0.5);
  opacity: 0.7;
}

/* Drucken: Benutzerdefinierten Text ausblenden */
@media print {
  .custom-text-signature {
    display: none;
  }
}

/* Drucken: Entwickler-Signatur ausblenden */
@media print {
  .developer-signature {
    display: none;
  }
}

body.modal-open #active-users-list,
body.modal-open #collaboration-status,
body.modal-open .action-button,
body.modal-open .developer-signature,
body.modal-open .dark-mode-toggle,
body.modal-open #clearAllThumbnailsButton,
body.modal-open .editing-badge,
body.modal-open .occupation-tooltip,
body.modal-open .print-only-container,
body.modal-open .toast-container,
body.modal-open .debug-toggle,
body.modal-open .debug-tab-content,
body.modal-open #userDisplay {
  display: none !important;
}

/* Kompakte Preishistorie-Sektion */
.price-history-section {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 8px 0;
  border-top: 1px solid #f0f0f0;
}

.price-history-section h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
}

.price-history-container {
  max-height: 120px;
  overflow-y: auto;
  background: #f8f9fa;
  border-radius: 4px;
  padding: 8px;
}

.price-history-loading {
  text-align: center;
  color: #6c757d;
  font-size: 12px;
  font-style: italic;
}

/* Dark Mode für Preishistorie */
body.dark-mode .price-history-section {
  border-top-color: #4a5f7a;
}

body.dark-mode .price-history-section h4 {
  color: #ecf0f1;
}

body.dark-mode .price-history-container {
  background: #4a5f7a;
}

body.dark-mode .price-history-loading {
  color: #bdc3c7;
}

/* === FARBAUSWAHL-STYLES (für erweitertes Modal) === */

/* Farben-Grid */
.color-options-grid {
  padding: 24px;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: visible;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 20px;
  position: relative;
  flex: 1;
  min-height: 0;
  background: #fafbfc;
}

/* Einzelne Farboption */
.color-option {
  position: relative;
  border: 2px solid #e8eaed;
  border-radius: 12px;
  overflow: visible;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 16px 12px;
  text-align: center;
}

.color-option:hover {
  border-color: #4285f4;
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(66, 133, 244, 0.3);
  z-index: 1000;
  position: relative;
  pointer-events: auto;
}

.color-option.selected {
  border-color: #007bff;
  box-shadow: 0 8px 24px rgba(0, 123, 255, 0.4);
  transform: scale(1.05);
}

.color-option.current {
  border-color: #28a745;
  box-shadow: 0 8px 24px rgba(40, 167, 69, 0.4);
}

/* Farbvorschau */
.color-preview {
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.color-option:hover .color-preview {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Dark Mode für Farbauswahl */
body.dark-mode .color-options-grid {
  background: #34495e;
}

body.dark-mode .color-option {
  background: #2c3e50;
  border-color: #4a5f7a;
}

body.dark-mode .color-option:hover {
  border-color: #3498db;
  background: #34495e;
}

body.dark-mode .color-option.selected {
  border-color: #3498db;
}

body.dark-mode .color-option.current {
  border-color: #27ae60;
}

body.dark-mode .color-name {
  color: #ecf0f1 !important;
}

body.dark-mode .color-description {
  color: #bdc3c7 !important;
}

/* Responsive Design für Farbauswahl */
@media (max-width: 768px) {
  .color-options-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 16px;
    padding: 16px;
  }
  
  .color-option {
    padding: 12px 8px;
  }
  
  .color-preview {
    width: 50px !important;
    height: 50px !important;
  }
}

@media (max-width: 480px) {
  .color-options-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .color-option {
    padding: 8px 6px;
  }
  
  .color-preview {
    width: 40px !important;
    height: 40px !important;
  }
  
  .color-name {
    font-size: 12px !important;
  }
  
  .color-description {
    font-size: 10px !important;
  }
}