/* =================================================================
   🎯 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 {
  /* Gemeinsame Geometrie fuer Ablaufkreis und den kollisionsfreien Hinweisbereich. */
  --ablauf-monat-kreis-size: 126px;
  --ablauf-monat-schutzabstand: 8px;
  --sonderpreis-sicherheitszone: calc(
    3% + var(--ablauf-monat-kreis-size) + var(--ablauf-monat-schutzabstand)
  );

  /* 🎯 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: clamp(
    calc(var(--altbestand-stack-half-height, 0px) + 2px),
    60%,
    calc(100% - var(--altbestand-stack-half-height, 0px) - 2px)
  ) !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  z-index: 9999 !important;
  pointer-events: none !important; /* Verhindert Interaktionen während der Anzeige */
  overflow: visible !important;
}

.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;
  }
}

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

.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: clamp(
    calc(var(--altbestand-stack-half-height, 0px) + 2px),
    60%,
    calc(100% - var(--altbestand-stack-half-height, 0px) - 2px)
  ) !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  z-index: 9999 !important;
  pointer-events: none !important;
  overflow: visible !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;
}

#altbestand-kaestchen .kaestchen.marketplace-listed {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  width: 36px !important;
  height: 36px !important;
  margin-block: 1px !important;
  background: #fff !important;
  border: 1px solid #111 !important;
  border-radius: 50% !important;
  box-shadow:
    0 0 0 1px #fff,
    0 0 0 2px #111 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  transition: none !important;
}

#altbestand-kaestchen .marketplace-ebay-logo {
  display: block !important;
  flex: 0 0 auto !important;
  width: 28px !important;
  height: 14px !important;
  overflow: visible !important;
}

.marketplace-pdf-risk {
  position: absolute;
  top: 8mm;
  right: 8mm;
  z-index: 20;
  padding: 2mm 3mm;
  border-radius: 2mm;
  background: #b00020;
  color: #fff;
  font:
    900 11pt/1.1 Arial,
    sans-serif;
}

/* 🎯 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 mit vertikaler Zentrierung */
.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;
  height: calc(4 * 1em * 0.95 + 20px);
  padding: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  top: 505px; /* Exakte Position für Bildschirm */
  box-sizing: border-box;
  /* Padding wird dynamisch durch JavaScript angepasst für vertikale Zentrierung */
}

/* Fallback: Flexbox für vertikale Zentrierung wenn -webkit-box nicht unterstützt wird */
@supports not (-webkit-line-clamp: 4) {
  .sonderheit {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    max-height: calc(4 * 0.95em);
  }
}

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

/* 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-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  overflow: visible;
}

.druckdatum-stack {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  width: max-content;
  /* Ausreichend Luft fuer Text, Pfeil, Segmente und den zweizeiligen Innenblock. */
  min-width: var(--ablauf-monat-kreis-size);
}

.druckdatum-stack .ablauf-monat-kreis {
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: calc(100% + 4px);
  width: var(--ablauf-monat-kreis-size);
  height: var(--ablauf-monat-kreis-size);
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  background-color: transparent;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  color: black !important;
  z-index: 2;
  box-sizing: border-box;
  transform: none;
}

.druckdatum-stack .ablauf-monat-kreis .ablauf-monat-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.druckdatum-stack .ablauf-monat-kreis .ablauf-monat-label {
  fill: #000;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.druckdatum-stack .ablauf-monat-kreis .ablauf-monat-inhalt {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  transform: translateY(0.06em);
  color: black !important;
  pointer-events: none;
}

.druckdatum-stack .ablauf-monat-kreis .ablauf-monat-zahl {
  display: block;
  line-height: 1;
  font-size: 1.48em;
  font-weight: 800;
  color: black !important;
}

.druckdatum-stack .ablauf-monat-kreis .ablauf-monat-jahr {
  display: block;
  margin-top: -0.08em;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.52em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.015em;
  color: black !important;
}

.druckdatum-stack .ablauf-monat-kreis .ablauf-monat-marker {
  pointer-events: none;
}

.druckdatum {
  text-align: center;
  display: block;
}

.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: #2d2d2d !important;
  color: #ffffff !important;
  border-left-color: var(--warning-color);
}

.toast.warning * {
  color: #ffffff !important;
}

.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: 8em !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: #2d2d2d !important;
  color: #ffffff !important;
  border-left-color: var(--warning-color);
}

.toast.warning * {
  color: #ffffff !important;
}

.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 */
  }
}

/* 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;
}

.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: 2em !important; /* 2.0 * Schriftgröße = proportional - kleiner gemacht */
  height: 2em !important;
}

/* Ablauf-Monat-Kreis (Footer) – absolut: groesserer Ring verdraengt keine Nachbarn. */
.a4-container .druckdatum-stack .ablauf-monat-kreis {
  font-size: 1.4em !important;
  width: var(--ablauf-monat-kreis-size) !important;
  height: var(--ablauf-monat-kreis-size) !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: calc(100% + 4px) !important;
  transform: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border: none !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: 1em !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;
}

/* Doppelte Definition entfernt - wird durch die Definition oben bei Zeile 167 abgedeckt */

/* 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: 2px solid #4a90e2; /* 🎯 HERAUSGEHOBEN: Dickerer, blauer Rahmen */
  border-radius: var(--border-radius-sm);
  font-size: 14px;
  background-color: #f8f9ff; /* 🎯 HERAUSGEHOBEN: Leicht bläulicher Hintergrund */
  box-shadow: 0 2px 4px rgba(74, 144, 226, 0.15); /* 🎯 HERAUSGEHOBEN: Leichter Schatten */
  transition: all var(--transition-normal);
}

.database-search input:focus {
  outline: none;
  border-color: #2563eb; /* 🎯 HERAUSGEHOBEN: Intensiveres Blau beim Fokus */
  box-shadow:
    0 0 0 3px rgba(74, 144, 226, 0.2),
    0 2px 8px rgba(74, 144, 226, 0.25); /* 🎯 HERAUSGEHOBEN: Stärkerer Schatten */
  background-color: #ffffff; /* 🎯 HERAUSGEHOBEN: Weißer Hintergrund beim Fokus */
}

.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-color: #4a90e2 !important; /* 🎯 HERAUSGEHOBEN: Blauer Hintergrund */
  border: 2px solid #4a90e2 !important; /* 🎯 HERAUSGEHOBEN: Blauer Rahmen */
  border-left: none !important; /* 🎯 HERAUSGEHOBEN: Kein linker Rahmen */
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0 !important; /* 🎯 HERAUSGEHOBEN: Nur rechte Ecken abgerundet */
  cursor: pointer;
  padding: 6px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  color: white !important; /* 🎯 HERAUSGEHOBEN: Weißes Icon */
  box-shadow: 0 2px 4px rgba(74, 144, 226, 0.15); /* 🎯 HERAUSGEHOBEN: Leichter Schatten */
}

.search-action-button:hover {
  background-color: #2563eb !important; /* 🎯 HERAUSGEHOBEN: Intensiveres Blau */
  border-color: #2563eb !important;
  box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3) !important; /* 🎯 HERAUSGEHOBEN: Stärkerer Schatten */
  transform: translateY(-1px); /* 🎯 HERAUSGEHOBEN: Leichte Bewegung */
}

.search-action-button svg {
  width: 16px;
  height: 16px;
  fill: white !important; /* 🎯 HERAUSGEHOBEN: Weißes Icon */
  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;
}

.search-action-button {
  background-color: #5b9bd5 !important; /* 🎯 HERAUSGEHOBEN: Blauer Hintergrund */
  border: 2px solid #5b9bd5 !important; /* 🎯 HERAUSGEHOBEN: Blauer Rahmen */
  border-left: none !important; /* 🎯 HERAUSGEHOBEN: Kein linker Rahmen */
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0 !important; /* 🎯 HERAUSGEHOBEN: Nur rechte Ecken abgerundet */
  box-shadow: 0 2px 4px rgba(91, 155, 213, 0.2) !important; /* 🎯 HERAUSGEHOBEN: Leichter Schatten */
}

.search-action-button:hover {
  background-color: #7bb3e8 !important; /* 🎯 HERAUSGEHOBEN: Helleres Blau */
  border-color: #7bb3e8 !important;
  box-shadow: 0 2px 8px rgba(91, 155, 213, 0.3) !important; /* 🎯 HERAUSGEHOBEN: Stärkerer Schatten */
  transform: translateY(-1px); /* 🎯 HERAUSGEHOBEN: Leichte Bewegung */
}

.search-action-button svg {
  fill: white !important; /* 🎯 HERAUSGEHOBEN: Weißes Icon */
}

/* 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: center;
  font-style: italic;
}

/* für Abteilungsfilter */
.filter-label {
  color: #e0e0e0;
}

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

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

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

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

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

.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: #ff6b6b;
  color: white !important;
  border-color: #ff6b6b;
  box-shadow: var(--shadow-sm);
}

.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: 15px 0;
  border-radius: var(--border-radius-sm);
  font-size: 14px;
  text-align: center;
}

#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 */
.database-table th:nth-child(2),
.database-table td:nth-child(2) {
  width: 7%;
  min-width: 66px;
  max-width: 88px;
  padding-right: 2px;
}

/* AbtNr/Abteilung-Spalte (3. Spalte) */
.database-table th:nth-child(3),
.database-table td:nth-child(3) {
  width: 9%;
  min-width: 72px;
  padding-left: 0;
  padding-right: 8px;
}

/* Hersteller-Spalte (4. Spalte) */
.database-table th:nth-child(4),
.database-table td:nth-child(4) {
  width: 11%;
  min-width: 90px;
  padding-left: 0;
  padding-right: 8px;
}

/* Warengruppe/Bezeichnung-Spalte (6. Spalte) - bekommt den meisten Platz */
.database-table th[data-column-key='designation'],
.database-table td[data-column-key='designation'] {
  width: 36%;
  min-width: 150px;
  padding-left: 0px;
  padding-right: 8px;
}

/* UVP/VK Preis Spalte (7. Spalte) */
.database-table th[data-column-key='price'],
.database-table td[data-column-key='price'] {
  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 (9. Spalte) - gleiche Breite wie VK Preis */
.database-table th[data-column-key='new-price'],
.database-table td[data-column-key='new-price'] {
  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 (8. Spalte) - minimal aber lesbar */
.database-table th[data-column-key='percent'],
.database-table td[data-column-key='percent'] {
  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 (10. Spalte) - responsive Schriftgröße für bessere Anpassung */
.database-table th[data-column-key='changed'],
.database-table td[data-column-key='changed'] {
  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[data-column-key='changed'] 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[data-column-key='changed'] span {
    font-size: 12px !important;
  }
}

@media (max-width: 900px) {
  .database-table th[data-column-key='changed'] span {
    font-size: 11px !important;
  }
}

/* Stelle sicher, dass der Header der "Geändert" Spalte die normale Hintergrundfarbe hat */
.database-table th[data-column-key='changed'] {
  background-color: #f5f5f5 !important; /* Gleiche Hintergrundfarbe wie andere Header */
}

/* für "Geändert" Spalten-Header - strikt einheitlich (#1a1a1a) */
.database-table th[data-column-key='changed'],
.database-table th[data-column-key='changed'] *,
.database-table th[data-column-key='changed'] .column-header,
.database-table th[data-column-key='changed'] .column-header * {
  background-color: #1a1a1a !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  /* border-bottom bleibt erhalten für die weiße Trennlinie! */
  outline: none !important;
  box-shadow: none !important;
}

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

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

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

.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 */
}

/* Unterstützung für laufende Nummer Hover */
.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 */
}

/* 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.85) !important; /* Etwas weniger opacity */
}

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

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

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

/* Aktive Benutzer Liste – unterhalb des Format-Pickers (Position per JS) */
#active-users-list {
  position: absolute;
  left: 10px;
  top: 220px;
  transform: none;
  z-index: 24;
  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;
}

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

/* Verbindungsstatus - im 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 {
    left: 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;
  }
}

/* Unterstützung für Kollaboration */
#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;
}

#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;
}

#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;
}

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

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

#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 (11. Spalte) - minimal aber funktional */
.database-table th[data-column-key='actions'],
.database-table td[data-column-key='actions'] {
  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 Benutzer/Geändert */
.database-table td[data-column-key='changed'] .article-info {
  text-align: center !important;
  align-items: center;
}

/* Stelle sicher, dass auch alle Kindelemente der Geändert-Spalte zentriert sind */
.database-table td[data-column-key='changed'] .article-info * {
  text-align: center !important;
}

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

/* Hersteller-Spalte (Datenbankansicht): gleiche Optik wie die anderen Hauptzeilen */
.database-table td .db-hersteller {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.2;
  white-space: nowrap;
  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[data-column-key='changed'],
.database-table td[data-column-key='changed'] {
  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,
.abtnr {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* AbtNr/Abteilung + Hersteller + Bezeichnung linksbündig */
.database-table th:nth-child(3),
.database-table td:nth-child(3),
.database-table th:nth-child(4),
.database-table td:nth-child(4),
.database-table th[data-column-key='designation'],
.database-table td[data-column-key='designation'] {
  text-align: left !important;
}

/* Stelle sicher, dass die UVP/VK Preis Spalten zentriert sind */
.database-table th[data-column-key='price'],
.database-table td[data-column-key='price'] {
  text-align: center !important;
}

/* VK Neu Spalte zentriert */
.database-table th[data-column-key='new-price'],
.database-table td[data-column-key='new-price'] {
  text-align: center !important;
}

/* UVP/VK Preis-Überschrift zentriert */
.database-table th[data-column-key='price'] span,
.database-table th[data-column-key='price'] 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[data-column-key='new-price'] span,
.database-table th[data-column-key='new-price'] 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 (10. Spalte) - zentriert */
.database-table th[data-column-key='changed'] span,
.database-table th[data-column-key='changed'] 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[data-column-key='percent'],
.database-table td[data-column-key='percent'] {
  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[data-column-key='percent'] {
  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[data-column-key='percent'] {
  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);
}

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

.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);
  }
}

/* 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;
}

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

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

.sun-icon {
  display: none;
}

.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 */
/* =============================================================================
   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 ============================================================================= */

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

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

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

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

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

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

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

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

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

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

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

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

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

.debug-help {
  color: #aaa;
}

/* Admin Tools */
.admin-section {
  background: var(--section-bg, #2d3748);
  border-color: var(--border-color, #444);
}

.admin-section h3 {
  color: var(--accent-color, #ff6b6b);
  border-bottom-color: var(--border-color, #444);
}

.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);
}

/* für Soft-Delete Controls */
.soft-delete-checkbox .checkmark {
  border-color: var(--border-color, #444);
  background: var(--input-bg, #333);
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

.soft-delete-checkbox input[type='checkbox']:checked + .checkmark {
  background: var(--accent-color, #ff6b6b);
  border-color: var(--accent-color, #ff6b6b);
}

.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, #eee);
}

.soft-delete-checkbox:hover .checkmark {
  border-color: var(--accent-color, #ff6b6b);
}

/* Variablen überschreiben */
body.dark-mode,
[data-theme='dark'] {
  --bg-color: #222;
  --text-color: #eee;
  --border-color: #444;
  --accent-color: #ff6b6b;
  --input-bg: #333;
  --section-bg: #2d3748;

  /* 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;
}

/* Styles */
body.dark-mode,
[data-theme='dark'] {
  background-color: #222;
  color: #eee;
}

.sidebar {
  background-color: #333;
  border-right-color: #444;
}

.input-tabs {
  border-bottom-color: #444;
}

/* 🎯 EINHEITLICHE TAB-BUTTON-STYLES FÜR ALLE TABS */
.tab-button {
  color: #aaa;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.tab-button:hover {
  color: #ff6b6b;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.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: Überschreibe alle blauen Hintergründe für aktive Tabs */
.tab-button.active,
.tab-button.active:hover,
.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 */
.input-tabs .tab-button[data-tab='database'].active,
.input-tabs .tab-button[data-tab='database'].active:hover,
.input-tabs .tab-button[data-tab='database'].active:focus,
.input-tabs .tab-button[data-tab='database'].active *,
.input-tabs .tab-button[data-tab='database'].active::before,
.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;
}

.dropzone {
  border-color: #555;
  color: #aaa;
  animation: gentlePulseDark 3s ease-in-out infinite;
}

.dropzone:hover,
.dropzone.dragover {
  border-color: #ff6b6b;
  background-color: rgba(255, 107, 107, 0.1);
}

.upload-icon {
  fill: #555;
}

.dropzone:hover .upload-icon {
  fill: #ff6b6b;
}

.highlight {
  color: #ff6b6b;
}

.file-item {
  background-color: #444;
}

.file-item:hover {
  background-color: #555;
}

.file-name {
  color: #eee;
}

.file-size {
  color: #aaa;
}

.file-remove {
  color: #aaa;
}

.file-remove:hover {
  color: #ff6b6b;
}

.upload-progress {
  background-color: #444;
}

.upload-progress-bar {
  background-color: #ff6b6b;
}

textarea {
  background-color: #444;
  border-color: #555;
  color: #eee;
  font-weight: 300; /* Gleiche leichte Schrift auch */
  font-synthesis: none; /* Verhindert synthetische Fettschrift */
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* System-Schriftart */
}

textarea:focus {
  border-color: #ff6b6b;
  box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2);
}

.help-box {
  background-color: #333;
  border-left-color: #555;
}

.help-icon {
  background-color: #555;
}

.tooltip {
  background-color: #555;
}

.controls button {
  background-color: #444;
}

.controls button:hover {
  background-color: #555;
}

.controls button svg {
  fill: #aaa;
}

.controls button:hover svg {
  fill: #ff6b6b;
}

.print-button button {
  background-color: #ff6b6b;
}

.print-button button:hover {
  background-color: #ff5252;
}

.print-button button:disabled {
  background-color: #555;
}

.pagination-info {
  color: #aaa;
}

.pagination-dot {
  background-color: #555;
}

.pagination-dot.active {
  background-color: #ff6b6b;
}

#status {
  background-color: #333;
  color: #aaa;
}

.thumbnail {
  border-color: #555;
  background-color: #ffff00; /* Gelbe Schilder bleiben gelb */
}

.thumbnail.active {
  border-color: #ff6b6b;
}

.thumbnail:hover:not(.active) {
  border-color: #777;
}

.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 */
.thumbnail-bestand-details {
  background-color: #666; /* Exakt die gleiche Farbe wie im Tagmodus */
  color: white;
}

.thumbnail-bestand-details table {
  background-color: transparent;
}

.thumbnail-bestand-details th,
.thumbnail-bestand-details td {
  color: white;
  border-right-color: #ccc;
}

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

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

.sun-icon {
  display: none;
}

.moon-icon {
  display: block;
}

/* Datenbank-Tab */
.database-button {
  background-color: #444;
  color: #eee;
}

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

.database-button svg {
  fill: #eee;
}

.database-button.danger {
  background-color: rgba(255, 107, 107, 0.2);
  color: #ff6b6b;
}

.database-button.danger:hover {
  background-color: rgba(255, 107, 107, 0.3);
}

.database-button.danger svg {
  fill: #ff6b6b;
}

.database-search input {
  background-color: #1a1f3a; /* 🎯 HERAUSGEHOBEN: Dunkelblauer Hintergrund */
  border-color: #5b9bd5; /* 🎯 HERAUSGEHOBEN: Heller blauer Rahmen */
  border-width: 2px; /* 🎯 HERAUSGEHOBEN: Dickerer Rahmen */
  color: #eee;
  box-shadow: 0 2px 4px rgba(91, 155, 213, 0.2); /* 🎯 HERAUSGEHOBEN: Leichter Schatten */
}

.database-search input:focus {
  border-color: #7bb3e8; /* 🎯 HERAUSGEHOBEN: Helleres Blau beim Fokus */
  box-shadow:
    0 0 0 3px rgba(91, 155, 213, 0.3),
    0 2px 8px rgba(91, 155, 213, 0.25); /* 🎯 HERAUSGEHOBEN: Stärkerer Schatten */
  background-color: #1e2442; /* 🎯 HERAUSGEHOBEN: Etwas hellerer Hintergrund */
}

.database-search button {
  background-color: #444;
}

.database-search button:hover {
  background-color: #555;
}

.database-search button svg {
  fill: #eee;
}

.database-table-container {
  border: none; /* Entferne alle Umrandungen */
}

.database-table th {
  background-color: #333;
  color: #eee;
  border-top: none !important; /* Entferne obere Umrandung */
  border-left: none !important; /* Entferne linke Umrandung */
  border-right: none !important; /* Entferne rechte Umrandung */
}

.database-table td {
  color: #eee;
  border-bottom-color: #444;
  font-weight: 300 !important; /* Explizit leichte Schrift auch */
  font-synthesis: none !important; /* Verhindert synthetische Fettschrift */
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; /* System-Schriftart */
}

/* Hover-Zeile: Absperrband nur oben und unten */
.database-table tbody tr:hover:not(.empty-message) {
  background-image:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 241, 118, 0.5) 0,
      rgba(255, 241, 118, 0.5) 10px,
      rgba(45, 45, 45, 0.5) 10px,
      rgba(45, 45, 45, 0.5) 20px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255, 241, 118, 0.5) 0,
      rgba(255, 241, 118, 0.5) 10px,
      rgba(45, 45, 45, 0.5) 10px,
      rgba(45, 45, 45, 0.5) 20px
    ) !important;
  background-size:
    100% 4px,
    100% 4px !important;
  background-position:
    0 0,
    0 100% !important;
  background-repeat: no-repeat, no-repeat !important;
  background-color: transparent !important;
}

.database-table tbody tr:hover:not(.empty-message) td {
  background: transparent !important;
}

/* Leere Nachrichtenzeile: Keine Hover-Effekte */
.database-table tr.empty-message:hover {
  background-color: transparent !important;
  transform: none !important;
  opacity: 1 !important;
}

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

.database-pagination button {
  background-color: #444;
}

.database-pagination button:hover:not(:disabled) {
  background-color: #555;
}

.database-pagination button svg {
  fill: #eee;
}

.database-pagination span {
  color: #aaa;
}

/* Vorlagen */
.template-item {
  background-color: #333;
  border-color: #444;
}

.template-item h3 {
  color: #eee;
}

.template-item p {
  color: #aaa;
}

.template-button {
  background-color: #444;
  color: #eee;
}

.template-item.disabled .template-button {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Wichtig: Verhindere Hover-Effekte für deaktivierte Buttons */
.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 */
.template-item.disabled {
  cursor: not-allowed;
}

.template-item.disabled .template-preview {
  background-color: #cccccc;
  opacity: 0.7;
}

.template-button:hover {
  background-color: #ff6b6b;
  color: white;
}

/* Warengruppen und Abteilungen */
.filter-heading {
  background-color: #333;
  border-left-color: #444;
  color: #eee;
}

.filter-heading:hover {
  background-color: #3a3a3a;
}

.filter-heading::after {
  border-top-color: #eee;
}

.abt-circle-container {
  filter: brightness(0.9);
}

.product-group-tag {
  background-color: #333;
  border-left-color: #555;
  color: #eee;
}

.product-group-tag:hover {
  background-color: #3a3a3a;
}

.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 Styles hinzu, um die Textfarbe für Labels im Nachtmodus anzupassen */
.input-group label {
  color: #eee; /* Helle Textfarbe für Labels im Nachtmodus */
}

/* Füge diese Regeln zu den Styles hinzu, um sicherzustellen, dass die Schild-Elemente schwarz bleiben */
.hersteller,
.bezeichnung,
.warengruppe {
  color: black; /* Stellt sicher, dass diese Elemente im Nachtmodus schwarz bleiben */
}

.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 */
}

.ablauf-monat-kreis {
  color: black !important;
  border: none !important;
}

/* Stelle sicher, dass die Input-Group-Labels im Nachtmodus sichtbar sind */
.input-group label {
  color: #eee; /* Helle Textfarbe für Labels im Nachtmodus */
}

/* Stelle sicher, dass die Zahl im Abteilungskreis im Nachtmodus schwarz bleibt */
.abt-circle {
  color: black; /* Stellt sicher, dass die Zahl im gelben Kreis schwarz bleibt */
}

/* Füge diese Regel zu den Styles hinzu, um die Paginierungsanzeige im Nachtmodus schwarz zu machen */
.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 */
.pagination-info span {
  color: black;
}

/* Auch für die mobile Paginierungsanzeige */
.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 */
.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;
}

/* Hover: Absperrband nur oben und unten */
.clickable-row:hover {
  background-image:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 241, 118, 0.5) 0,
      rgba(255, 241, 118, 0.5) 10px,
      rgba(45, 45, 45, 0.5) 10px,
      rgba(45, 45, 45, 0.5) 20px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255, 241, 118, 0.5) 0,
      rgba(255, 241, 118, 0.5) 10px,
      rgba(45, 45, 45, 0.5) 10px,
      rgba(45, 45, 45, 0.5) 20px
    ) !important;
  background-size:
    100% 4px,
    100% 4px !important;
  background-position:
    0 0,
    0 100% !important;
  background-repeat: no-repeat, no-repeat !important;
  background-color: transparent !important;
}

.database-table tr.clickable-row:hover td {
  background: transparent !important;
}

/* 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 */
}

.database-table tr.selected:not(.active-row) {
  background-color: rgba(255, 235, 59, 0.15) !important; /* Dunkleres Hellgelb */
}

/* 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 */
}

.database-table tr.selected:not(.active-row):hover {
  background-color: rgba(255, 235, 59, 0.2) !important; /* Etwas dunkleres Gelb beim Hover */
}

/* 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 */
}

.database-table tr.selected-row:not(.active-row) {
  background-color: rgba(255, 235, 59, 0.3) !important; /* Angepasstes Gelb */
  border-left: 3px solid #ff6b6b; /* Angepasster Rand */
}

/* 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 */
}

.database-table tr.selected-row:not(.active-row):hover {
  background-color: rgba(255, 235, 59, 0.4) !important; /* Angepasstes Gelb beim Hover */
}

/* 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);
  overflow: visible;
}

.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;
}

/* 📄 PDF-EXPORT: VOLLSTÄNDIGE GAST-STYLE-OVERRIDE für A4-Layout */
body.pdf-export .form-row input[readonly],
body.pdf-export .form-row input.readonly-no-permission,
body.pdf-export .form-row .no-permission,
body.pdf-export-guest-override .form-row input[readonly],
body.pdf-export-guest-override .form-row input {
  background-color: transparent !important;
  background: none !important;
  background-image: none !important;
  color: inherit !important;
  cursor: default !important;
  border: inherit !important;
  border-color: inherit !important;
  opacity: 1 !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: auto !important;
  user-select: text !important;
}

.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;
  }
}

/* Styles für den Dialog */
.edit-dialog {
  background-color: #2c3e50;
  border-color: #34495e;
}

.edit-dialog h3 {
  color: #ecf0f1;
  background: linear-gradient(135deg, #34495e, #2c3e50);
  border-bottom-color: #34495e;
}

.edit-dialog-close-btn {
  color: #ecf0f1;
}

.edit-dialog-close-btn:hover {
  background: rgba(52, 73, 94, 0.8);
}

.form-row label {
  color: #ecf0f1;
}

.form-row input {
  background-color: #34495e;
  border-color: #4a6741;
  color: #ecf0f1;
}

.form-row input:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
  background-color: #3a4a5c;
}

.form-row input:hover:not(:focus) {
  border-color: #5d6d7e;
}

.form-row input[readonly] {
  background-color: #273344;
  color: #95a5a6;
  border-color: #394b59;
}

/* 📄 PDF-EXPORT: Readonly-Felder normal darstellen */
body.pdf-export .form-row input[readonly],
body.pdf-export .form-row input.readonly-no-permission,
body.pdf-export-guest-override .form-row input[readonly],
body.pdf-export-guest-override .form-row input {
  background-color: transparent !important;
  background: none !important;
  color: inherit !important;
  cursor: default !important;
  border-color: inherit !important;
  opacity: 1 !important;
  box-shadow: none !important;
  filter: none !important;
}

.form-row input::placeholder {
  color: #7f8c8d;
}

.form-actions {
  border-top-color: #34495e;
}

#edit-cancel {
  background-color: #34495e;
  color: #ecf0f1;
}

#edit-cancel:hover {
  background-color: #4a6741;
}

#edit-save {
  background: linear-gradient(135deg, #3498db, #2980b9);
}

#edit-save:hover {
  background: linear-gradient(135deg, #2980b9, #21618c);
}

.delete-button {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.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;
}

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

.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[data-column-key='actions'],
.database-table td[data-column-key='actions'] {
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  padding: 0 !important;
  box-sizing: content-box;
}

/* Alle Thumbnails löschen Button - als Dreieck in der oberen rechten Ecke */
.clear-all-thumbnails-button {
  position: fixed;
  top: 0;
  right: 0;
  width: 84px; /* Größere Klickfläche, Optik bleibt Dreieck */
  height: 84px;
  background: transparent;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  cursor: pointer;
  z-index: 65000 !important;
  transition: all 0.3s ease;
  border: none;
  padding: 10px 10px 0 0;
  margin: 0;
  overflow: visible;
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.clear-all-thumbnails-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #dc3545;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  box-shadow: -2px 2px 5px rgba(220, 53, 69, 0.3);
  pointer-events: none;
}

.clear-all-icon {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  fill: #fff;
  transition: all 0.3s ease;
  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;
  pointer-events: none;
}

.clear-all-thumbnails-button:hover::before {
  background-color: #c82333;
  box-shadow: -3px 3px 8px rgba(220, 53, 69, 0.45);
}

.clear-all-thumbnails-button:hover .clear-all-icon {
  transform: scale(1.12);
  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: 72px;
    height: 72px;
    padding: 9px 9px 0 0;
  }
  .clear-all-icon {
    width: 22px;
    height: 22px;
    transform: none;
  }
}

@media (max-width: 480px) {
  .clear-all-thumbnails-button {
    width: 62px;
    height: 62px;
    padding: 8px 8px 0 0;
  }
  .clear-all-icon {
    width: 18px;
    height: 18px;
    transform: none;
  }
}

/* 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);
}

/* Styles für den Delete-Button */
.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);
}

.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;
}

/* Styles für die kleineren Überschriften in den Tabellenzellen */
.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;
}

/* Verbesserungen für Prozentzellen */
.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;
}

.percent-cell.price-increase {
  color: #ff6b6b; /* Helles Rot */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  background-color: rgba(255, 107, 107, 0.1);
}

.percent-cell.price-decrease {
  color: #00ffae; /* Helles Grün */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  background-color: rgba(0, 255, 174, 0.1);
}

/* Hover-Effekt für Prozentzellen */
.percent-cell:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: scale(1.05);
}

.percent-cell.price-increase:hover {
  background-color: rgba(255, 107, 107, 0.2);
}

.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[data-column-key='new-price'] .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[data-column-key='new-price'] .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[data-column-key='new-price'] * {
  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: 60000; /* Über Thumbnail-Strip (inline z-index 2500–2700) und Notizen-Button */
  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: 90vh;
  height: 90vh;
  width: 98%;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  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;
  overflow: hidden;
}

.background-tab-content.active {
  display: flex;
  flex-direction: column;
}

/* Kompakter Upload-Bereich */
.background-upload-section-compact {
  padding: 8px 12px;
  background: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  display: flex;
  align-items: center;
  gap: 12px;
}

#backgroundCombinedContent {
  position: relative;
  overflow: visible;
  isolation: isolate;
}

#backgroundCombinedContent .background-images-grid {
  position: relative;
  padding-bottom: 108px;
  z-index: 1 !important;
}

#backgroundCombinedContent .background-images-grid::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: #f3f4ef;
  z-index: 4;
}

#backgroundCombinedContent .color-options-grid {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50000 !important;
  margin: 0;
  padding: 28px 34px 0;
  border: none;
  border-radius: 0;
  background: transparent;
  max-height: none;
  min-height: 120px;
  overflow: visible !important;
  pointer-events: none;
}

#backgroundCombinedContent .background-image-item {
  z-index: 2 !important;
}

#backgroundCombinedContent .background-image-item:hover,
#backgroundCombinedContent .background-image-item.selected,
#backgroundCombinedContent .background-image-item.current {
  z-index: 10 !important;
}

#backgroundCombinedContent .color-option {
  z-index: 50010 !important;
  pointer-events: auto;
}

#backgroundCombinedContent .color-option:hover {
  z-index: 50030 !important;
}

#backgroundCombinedContent .color-option.selected,
#backgroundCombinedContent .color-option.active-color {
  z-index: 60000 !important;
}

#backgroundCombinedContent .color-option.current:not(.selected):not(.active-color) {
  z-index: 50020 !important;
}

.upload-button-compact {
  padding: 6px 14px;
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.upload-button-compact:hover {
  background: linear-gradient(135deg, #0056b3, #003d82);
  box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3);
}

.upload-progress-compact {
  flex: 1;
  height: 24px;
  background: #e9ecef;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-progress-compact .upload-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, #28a745, #20c997);
  width: 0%;
  transition: width 0.3s ease;
}

.upload-progress-compact #uploadProgressText {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 600;
  color: #495057;
}

.background-color-hint-inline {
  margin-left: auto;
  font-size: 16px;
  font-weight: 800;
  color: #d6e8ff;
  white-space: nowrap;
  opacity: 1;
  background: rgba(41, 121, 255, 0.18);
  border: 1px solid rgba(138, 180, 248, 0.45);
  border-radius: 10px;
  padding: 6px 12px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

/* Bilder-Grid - scrollbar mit festen 5 Spalten */
.background-images-grid {
  padding: 24px;
  padding-bottom: 120px;
  flex: 1;
  overflow-y: auto !important; /* WICHTIG: Immer scrollbar */
  overflow-x: hidden;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  position: relative;
  background: #fafbfc;
  scroll-behavior: smooth;
  align-content: start;
  max-height: calc(100vh - 280px); /* Maximale Höhe für Desktop */
  min-height: 300px; /* Minimale Höhe reduziert */
}

.background-images-grid::-webkit-scrollbar {
  width: 12px;
}

.background-images-grid::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 6px;
}

.background-images-grid::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 6px;
  transition: background 0.3s ease;
}

.background-images-grid::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Einzelnes Hintergrundbild */
.background-image-item {
  position: relative;
  border: 2px solid #e8eaed;
  border-radius: 12px;
  overflow: hidden;
  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);
  aspect-ratio: 3 / 1;
}

/* Löschen-Button für Hintergrundbilder */
.background-image-delete-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  background: rgba(220, 53, 69, 0.95);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.background-image-item:hover .background-image-delete-btn {
  display: flex;
}

.background-image-delete-btn:hover {
  background: rgba(200, 35, 51, 1);
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(220, 53, 69, 0.4);
}

.background-image-delete-btn:active {
  transform: scale(0.95);
}

/* Geschütztes Hintergrundbild-Indikator */
.background-image-protected-indicator {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  background: rgba(40, 167, 69, 0.95);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.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: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* 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;
}

/* Kompakte Scope-Auswahl - zentriert und nur so breit wie nötig */
.application-scope-selection {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 12px;
  padding: 10px 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e8eaed;
  width: fit-content;
  max-width: 100%;
}

.scope-label {
  font-size: 13px;
  font-weight: 600;
  color: #5f6368;
  white-space: nowrap;
  margin: 0;
}

.scope-options-compact {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}

.scope-option-compact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #ffffff;
  border: 2px solid #e8eaed;
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.scope-option-compact:hover {
  background: #f1f3f4;
  border-color: #4285f4;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(66, 133, 244, 0.15);
}

.scope-option-compact input[type='radio'] {
  margin: 0;
  width: 16px;
  height: 16px;
  accent-color: #34a853;
  cursor: pointer;
}

.scope-option-compact:has(input:checked) {
  background: linear-gradient(135deg, #e8f5e8, #f0f8f0);
  border-color: #34a853;
  color: #1e4620;
  box-shadow: 0 2px 6px rgba(52, 168, 83, 0.2);
  font-weight: 600;
}

.scope-icon {
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.scope-title {
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

/* 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.is-processing {
  min-width: 210px;
  letter-spacing: 0.1px;
}

.apply-background-btn.is-processing::before {
  content: '⏳';
  animation: applyBusyPulse 1s ease-in-out infinite;
}

@keyframes applyBusyPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}

.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);
}

/* === STYLES === */
.background-image-modal {
  background: rgba(0, 0, 0, 0.85);
}

.background-image-modal-content {
  background: #1e1e1e;
  border: 1px solid #3c4043;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.background-image-modal-header {
  background: linear-gradient(135deg, #2d2d2d, #1e1e1e);
  border-bottom: 1px solid #3c4043;
}

.background-image-modal-header h3 {
  color: #e8eaed;
}

.background-image-modal-close {
  background: #3c4043;
  color: #9aa0a6;
}

.background-image-modal-close:hover {
  background: #5f6368;
  color: #e8eaed;
}

/* Upload-Bereich */
.background-upload-section-compact {
  background: #2d2d2d;
  border-bottom: 1px solid #3c4043;
}

.upload-button-compact {
  background: linear-gradient(135deg, #4a9eff, #2979ff);
}

.upload-button-compact:hover {
  background: linear-gradient(135deg, #2979ff, #1565c0);
  box-shadow: 0 2px 6px rgba(74, 158, 255, 0.4);
}

.upload-progress-compact {
  background: #3c4043;
}

.upload-progress-compact #uploadProgressText {
  color: #bdc1c6;
}

.background-color-hint-inline {
  color: #8ab4f8;
  background: rgba(22, 36, 58, 0.6);
  border-color: rgba(138, 180, 248, 0.55);
}

.color-preview {
  border-color: #8ab4f8 !important;
}

.color-name {
  color: #e8eaed !important;
}

.background-images-grid {
  background: #2d2d2d;
}

.background-images-grid::-webkit-scrollbar-track {
  background: #1e1e1e;
}

.background-images-grid::-webkit-scrollbar-thumb {
  background: #555;
}

.background-images-grid::-webkit-scrollbar-thumb:hover {
  background: #666;
}

.background-image-item {
  background: #1e1e1e;
  border: 2px solid #3c4043;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.background-image-item:hover {
  border-color: #8ab4f8;
  box-shadow: 0 12px 24px rgba(138, 180, 248, 0.3);
}

.background-image-protected-indicator {
  background: rgba(76, 175, 80, 0.95);
}

.background-image-modal-footer {
  background: #2d2d2d;
  border-top: 1px solid #3c4043;
}

/* für Tab-Navigation */
.background-tabs {
  background: #2d2d2d;
  border-bottom-color: #3c4043;
}

.background-tab {
  color: #9aa0a6;
}

.background-tab:hover {
  background: #3c4043;
  color: #e8eaed;
}

.background-tab.active {
  color: #8ab4f8;
  border-bottom-color: #8ab4f8;
  background: #1e1e1e;
}

.application-scope-selection h4 {
  color: #e8eaed;
}

/* Dark Mode: Kompakte Scope-Auswahl */
.application-scope-selection {
  background: #2d2d2d;
  border: 1px solid #3c4043;
}

.scope-label {
  color: #9aa0a6;
}

.scope-option-compact {
  background: #1e1e1e;
  border-color: #3c4043;
  color: #e8eaed;
}

.scope-option-compact:hover {
  background: #3c4043;
  border-color: #8ab4f8;
  box-shadow: 0 2px 4px rgba(138, 180, 248, 0.2);
}

.scope-option-compact:has(input:checked) {
  background: linear-gradient(135deg, #1e3a1e, #2d4a2d);
  border-color: #81c995;
  color: #a8d5ba;
  box-shadow: 0 2px 6px rgba(129, 201, 149, 0.25);
}

.apply-background-btn {
  background: linear-gradient(135deg, #81c995, #66bb6a);
  box-shadow: 0 2px 8px rgba(129, 201, 149, 0.3);
}

.apply-background-btn:not(:disabled):hover {
  background: linear-gradient(135deg, #66bb6a, #4caf50);
  box-shadow: 0 4px 12px rgba(129, 201, 149, 0.4);
}

.cancel-background-btn {
  background: linear-gradient(135deg, #5f6368, #3c4043);
  box-shadow: 0 2px 8px rgba(95, 99, 104, 0.3);
}

.cancel-background-btn:hover {
  background: linear-gradient(135deg, #3c4043, #2d2d2d);
  box-shadow: 0 4px 12px rgba(95, 99, 104, 0.4);
}

.reset-layout-btn {
  background: linear-gradient(135deg, #ea4335, #c5221f);
}

.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(4, 1fr); /* 4 Spalten für Tablets */
    gap: 8px;
    padding: 12px;
    padding-bottom: 80px;
    max-height: calc(100vh - 280px) !important;
    min-height: 200px !important; /* Reduziert für kleinere Displays */
    overflow-y: auto !important;
  }

  /* 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;
  }

  /* Kompakte Scope-Auswahl bleibt zentriert auf Tablets */
  .application-scope-selection {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
  }

  .scope-options-compact {
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .scope-option-compact {
    font-size: 12px;
    padding: 5px 10px;
  }

  .scope-icon {
    font-size: 14px;
  }

  .scope-title {
    font-size: 12px;
  }

  .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(3, 1fr); /* 3 Spalten für kleine Mobilgeräte */
    gap: 4px;
    padding: 8px;
    padding-bottom: 60px;
    max-height: calc(100vh - 220px) !important;
    min-height: 150px !important; /* Sehr klein für mobile Geräte */
    overflow-y: auto !important;
  }

  .background-image-modal-footer {
    padding: 12px;
  }

  .application-scope-selection {
    margin-bottom: 16px;
  }

  .application-scope-selection h4 {
    font-size: 12px;
    margin-bottom: 8px;
  }

  /* Kompakte Scope-Auswahl zentriert auf sehr kleinen Displays */
  .application-scope-selection {
    padding: 6px 10px;
    width: 95%;
  }

  .scope-options-compact {
    flex-direction: column;
    gap: 4px;
    width: auto;
  }

  .scope-option-compact {
    font-size: 11px;
    padding: 4px 10px;
    justify-content: center;
  }

  .scope-icon {
    font-size: 13px;
  }

  .scope-title {
    font-size: 11px;
  }

  .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(5, 1fr); /* 5 Spalten für große Bildschirme */
    max-height: calc(100vh - 280px) !important;
    min-height: 400px; /* Reduziert für bessere Flexibilität */
    overflow-y: auto !important;
  }
}

/* === 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 */
}

/* Markierungen */
.background-image-item.selected {
  border-color: #8ab4f8;
  box-shadow: 0 0 0 3px rgba(138, 180, 248, 0.2);
}

.background-image-item.selected::before {
  background: #8ab4f8;
  box-shadow: 0 2px 4px rgba(138, 180, 248, 0.3);
}

.background-image-item.current:not(.selected) {
  border-color: #81c995;
}

.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 === */
.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 {
  --print-color-count: 0;
  --action-button-height: max(50px, calc(9px + (var(--print-color-count) * 22px)));
  position: fixed;
  /* Haelt die sichtbare rechte Kante trotz der 90-Grad-Drehung am selben Platz. */
  right: calc(((var(--action-button-height) - 100px) / 2) + 11px);
  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: 0;
  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: var(--action-button-height);
}

.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 > .action-button__label {
  text-align: center;
  text-decoration: none;
  width: 100%;
  padding: 8px 16px 24px;
  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 > .action-button__label {
  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 */
}

/*
 * Die Farbmengen liegen lokal untereinander. Durch die 90-Grad-Drehung des
 * Buttons erscheinen sie im sichtbaren Button als eine waagerechte Reihe.
 */
.print-count-row {
  position: absolute;
  top: -5px;
  right: -5px;
  z-index: 1002;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  pointer-events: none;
}

.print-count-row[hidden] {
  display: none;
}

.print-color-breakdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.print-color-breakdown:empty {
  display: none;
}

.print-color-segment {
  position: relative;
  display: flex;
  width: 19px;
  min-width: 19px;
  height: 19px;
  min-height: 19px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px solid #000;
  border-radius: 50%;
  background: var(--print-segment-color);
  color: var(--print-segment-text);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  transform: rotate(-90deg);
}

.print-color-segment__count {
  display: inline-block;
}

@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 */
.action-button {
  background: #2c3e50;
  box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.4);
}

.action-button:after {
  background: #f39c12;
}

.action-button:hover > .action-button__label {
  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 */
.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: calc(((var(--action-button-height) - 100px) / 2) + 11px);
    transform: translateY(-50%) rotate(90deg); /* Einfache, stabile Positionierung */
    padding: 0;
  }

  .action-button > .action-button__label {
    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;
}

/* Support für Button-Flash */
.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;
}

/* Unterstützung für gesperrte Artikel Hover */
.database-table tbody tr.article-occupied td:nth-child(1):hover .running-number {
  color: white !important; /* Weißer Text auch */
}

.database-table tbody tr.article-occupied .artnr {
  /* Normale Farbe für bessere Lesbarkeit */
}

/* 🔧 KONSOLIDIERT: Tooltip für gesperrte Artikel - EINZIGE zentrale Definition */
.occupation-tooltip {
  position: absolute !important;
  top: 50% !important;
  right: 5px !important;
  transform: translateY(-50%) !important;
  font-size: 13px !important;
  font-weight: 600 !important; /* Normal-Fett (vorher 700/900) */
  padding: 8px 12px !important;
  border-radius: 8px !important;
  z-index: 999999 !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
  isolation: isolate !important;
  text-align: center !important; /* 🎯 Text mittig */

  /* 🔥 100% OPAKER WEIßER Hintergrund */
  background-color: #ffffff !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #000000 !important;

  /* 🎨 Starker Schatten für bessere Sichtbarkeit */
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.5) !important;

  /* 🎨 Mittelstarker Text-Shadow */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;

  /* 🎨 Normaler Border */
  border: 2px solid rgba(0, 0, 0, 0.3) !important;
}

/* 🔧 ULTRA-WICHTIG: Child-Elemente bekommen MAXIMALE Priorität für Styles */
/* 🔥 FINALE VERSION: SCHWARZER Text auf weißem Hintergrund - mittig & graziös */
.occupation-tooltip div:not(.time-critical):not(.time-warning):not(.time-expired),
.occupation-tooltip div[style]:not(.time-critical):not(.time-warning):not(.time-expired),
.occupation-tooltip div[style*='color']:not(.time-critical):not(.time-warning):not(.time-expired),
.occupation-tooltip
  div[style*='color: white']:not(.time-critical):not(.time-warning):not(.time-expired),
.occupation-tooltip
  div[style*='color:white']:not(.time-critical):not(.time-warning):not(.time-expired),
.occupation-tooltip
  div[style*='color: #fff']:not(.time-critical):not(.time-warning):not(.time-expired),
.occupation-tooltip span,
.occupation-tooltip span[style],
.occupation-tooltip > div:not(.time-critical):not(.time-warning):not(.time-expired),
.occupation-tooltip > span {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
  background: none !important;
  background-color: transparent !important;
  color: #000000 !important;
  font-weight: 600 !important; /* Graziöser (vorher 900 - zu fett!) */
  text-align: center !important; /* 🎯 Mittig */
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* 🎨 WARNFARBEN: mittig & graziös */
.occupation-tooltip > div.time-critical,
.occupation-tooltip div.time-critical[style],
.occupation-tooltip div.time-critical {
  color: #c62828 !important; /* Dunkelrot */
  font-weight: 700 !important; /* Graziöser (vorher 900) */
  text-align: center !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

.occupation-tooltip > div.time-warning,
.occupation-tooltip div.time-warning[style],
.occupation-tooltip div.time-warning {
  color: #e65100 !important; /* Dunkelorange */
  font-weight: 700 !important; /* Graziöser (vorher 900) */
  text-align: center !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

.occupation-tooltip > div.time-expired,
.occupation-tooltip div.time-expired[style],
.occupation-tooltip div.time-expired {
  color: #666666 !important; /* Mittelgrau */
  font-weight: 600 !important; /* Graziöser (vorher 900) */
  text-align: center !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

/* 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 */
}

/* occupation-tooltip: konsolidierte Definition siehe oben (.occupation-tooltip) */

/* Unterstützung */
.database-table tbody tr.article-occupied {
  /* Diagonales Streifenmuster für - 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;
}

.database-table tbody tr.article-occupied:hover {
  /* Hover-Effekt für die Zellen, nicht die Zeile */
}

.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 beim Hover */
}

.database-table tbody tr.article-occupied td {
  color: #e9ecef !important; /* Hellerer Text */
  /* Text über dem Absperrband-Muster positionieren */
  position: relative;
  z-index: 2;
  /* Hintergrund für bessere Lesbarkeit */
  background-color: rgba(33, 37, 41, 0.85) !important;
}

.database-table tbody tr.article-occupied .artnr {
  /* Normale Farbe für bessere Lesbarkeit */
}

/* === 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: var(--sonderpreis-sicherheitszone);
  right: var(--sonderpreis-sicherheitszone);
  transform: none;
  font-size: 22px; /* war: 2.0vh ≈ 22px bei 1123px Höhe */
  font-weight: normal;
  color: black !important;
  text-align: center;
  width: auto;
  box-sizing: border-box;
  line-height: 1.1;
  padding: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  z-index: 5;
  max-height: 72.6px; /* Exakt drei Zeilen bei 22px und line-height 1.1 */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -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);
}

/* Anpassungen für Hintergrundbild-Indikatoren */
.background-indicator {
  background: rgba(30, 30, 30, 0.9);
  border-color: #3498db;
  color: #3498db;
}

.thumbnail:hover .background-indicator {
  background: rgba(30, 30, 30, 1);
}

/* ===============================
   Kontraststarker Stift-Button
   =============================== */
.database-table .edit-article-button {
  color: #081b2f !important;
}

.database-table .edit-article-button svg {
  fill: currentColor !important;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.45))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

.database-table tr.row-contrast-light .edit-article-button {
  color: #061526 !important;
}

.database-table tr.row-contrast-dark .edit-article-button {
  color: #f3fbff !important;
}

.database-table tr.row-contrast-light .edit-article-button:hover {
  background-color: rgba(0, 0, 0, 0.12) !important;
}

.database-table tr.row-contrast-dark .edit-article-button:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

/* 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 */
}

/* Anpassungen */
.background-image-item.selected {
  border-color: #2ecc71 !important;
  box-shadow: 0 8px 16px rgba(46, 204, 113, 0.4) !important;
}

.background-image-item.selected::before {
  background: #2ecc71;
}

.background-image-item.current:not(.selected) {
  border-color: #3498db !important;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3) !important;
}

.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 .ablauf-monat-kreis,
.footer-line .artnr,
.footer-line .ean,
.a4-container .footer-item,
.a4-container .druckdatum,
.a4-container .ablauf-monat-kreis,
.a4-container .artnr,
.a4-container .ean,
.a4-container .preis-uvp,
.a4-container .hinweis-text {
  color: black !important;
}

/* Auch im soll NUR der Footer schwarz bleiben */
.footer-line .footer-item,
.footer-line .druckdatum,
.footer-line .ablauf-monat-kreis,
.footer-line .artnr,
.footer-line .ean,
.a4-container .footer-item,
.a4-container .druckdatum,
.a4-container .ablauf-monat-kreis,
.a4-container .artnr,
.a4-container .ean,
.a4-container .preis-uvp,
.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;
}

/* für benutzerdefinierten Text */
.custom-text-signature {
  color: rgba(255, 255, 255, 0.5);
  opacity: 0.7;
}

/* für Entwickler-Signatur */
.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;
}

/* für Preishistorie */
.price-history-section {
  border-top-color: #4a5f7a;
}

.price-history-section h4 {
  color: #ecf0f1;
}

.price-history-container {
  background: #4a5f7a;
}

.price-history-loading {
  color: #bdc3c7;
}

/* === FARBAUSWAHL-STYLES (für erweitertes Modal) === */

/* Farben-Grid */
.color-options-grid {
  padding: 34px 34px 0;
  max-height: 70vh;
  overflow-y: hidden;
  overflow-x: auto;
  display: flex;
  gap: 0;
  position: relative;
  flex: 1;
  min-height: 0;
  align-content: flex-end;
  align-items: flex-end;
  background: #e4e5e1;
  border: 1px solid #c8cbc6;
  border-bottom: 4px solid #f3f4ef;
  border-radius: 18px 18px 0 0;
  perspective: 1000px;
  scrollbar-width: thin;
  scrollbar-color: rgba(55, 70, 87, 0.45) transparent;
}

/* Einzelne Farboption */
.color-option {
  --focus: 0;
  --pull-scale: 1;
  --label-opacity: 0.12;
  --tilt: 0deg;
  --active-pull: 0;
  --active-shift-x: 0px;
  position: relative;
  flex: 0 0 136px;
  width: 136px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-bottom: none;
  border-radius: 22px 22px 0 0;
  overflow: visible;
  cursor: pointer;
  transition:
    transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.26s ease,
    filter 0.26s ease;
  z-index: calc(20000 + var(--stack-order, 1));
  background: var(--tab-color, #3f5a75);
  box-shadow:
    0 10px 16px rgba(25, 35, 42, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  padding: 10px 10px 14px;
  text-align: left;
  min-height: 88px;
  transform: translateX(var(--active-shift-x)) rotateZ(var(--tilt))
    scaleY(calc(var(--pull-scale) + var(--active-pull)));
  transform-origin: center bottom;
  margin-bottom: -3px;
}

.color-option + .color-option {
  margin-left: -34px;
}

.color-option:hover {
  transform: translateX(var(--active-shift-x)) rotateZ(var(--tilt))
    scaleY(calc(var(--pull-scale) + var(--active-pull)));
  box-shadow:
    0 16px 24px rgba(18, 26, 33, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  z-index: 23000;
  filter: saturate(1.08);
}

.color-option.selected,
.color-option.active-color {
  --active-pull: 0.22;
  --active-shift-x: -4px;
  box-shadow:
    0 20px 30px rgba(9, 15, 22, 0.42),
    0 0 0 2px rgba(var(--tab-glow-rgb, 138, 180, 248), 0.85),
    0 0 20px rgba(var(--tab-glow-rgb, 138, 180, 248), 0.55);
  z-index: 24000;
}

.color-option.current:not(.selected):not(.active-color) {
  box-shadow: 0 14px 20px rgba(9, 15, 22, 0.34);
  z-index: 24500;
}

.color-option::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px 22px 0 0;
  pointer-events: none;
  opacity: calc(var(--focus) * 0.28 + 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 44%);
}

.color-preview {
  display: none;
}

.color-name {
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1.1;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
  opacity: var(--label-opacity);
  transform-origin: center center;
  backface-visibility: hidden;
  transition:
    opacity 0.1s linear,
    transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
  margin: 6px 2px 0;
}

.color-description {
  color: #bdc3c7 !important;
}

.color-topic-input {
  width: 100%;
  min-height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(24, 24, 27, 0.45);
  color: #f5faff;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  font-style: italic;
  padding: 3px 8px;
  margin: 0;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform-origin: center center;
  backface-visibility: hidden;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease,
    background 0.2s ease,
    transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Gegen-Transform NUR bei gehoverter Karte (dort wendet die Karte scaleY/rotateZ an).
   Hält Thema-Text und Farbname ruhig und scharf – kein Wackeln/Verzerren. */
.color-option:hover .color-name,
.color-option:hover .color-topic-input {
  transform: rotateZ(calc(-1 * var(--tilt, 0deg)))
    scaleY(calc(1 / (var(--pull-scale, 1) + var(--active-pull, 0))));
}

#backgroundCombinedContent .color-option .color-topic-input {
  pointer-events: auto;
}

.color-topic-input:focus {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(24, 24, 27, 0.7);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}

.color-topic-input.readonly {
  cursor: default;
  opacity: 0.78;
  border-style: dashed;
  background: rgba(24, 24, 27, 0.3);
}

.color-topic-input.is-saving {
  border-color: rgba(22, 163, 74, 0.9);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.25);
}

.color-custom-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: rgba(15, 23, 42, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.color-option--light .color-name {
  color: #111827 !important;
  text-shadow: none;
}

.color-option--light .color-topic-input {
  background: rgba(17, 24, 39, 0.12);
  border-color: rgba(17, 24, 39, 0.2);
  color: #111827;
}

/* Responsive Design für Farbauswahl */
@media (max-width: 768px) {
  .background-color-hint-inline {
    font-size: 14px;
    padding: 5px 10px;
  }

  #backgroundCombinedContent .background-images-grid {
    padding-bottom: 96px;
  }

  #backgroundCombinedContent .color-options-grid {
    padding: 20px 18px 0;
    min-height: 104px;
  }

  .color-options-grid {
    padding: 24px 18px 0;
  }

  .color-option {
    flex-basis: 118px;
    width: 118px;
    min-width: 118px;
    min-height: 80px;
    padding: 8px;
  }

  .color-option + .color-option {
    margin-left: -26px;
  }

  .color-topic-input {
    font-size: 11px;
    min-height: 24px;
  }

  .color-name {
    font-size: 14px !important;
    margin-top: 5px;
  }
}

@media (max-width: 480px) {
  .background-color-hint-inline {
    display: none;
  }

  #backgroundCombinedContent .background-images-grid {
    padding-bottom: 84px;
  }

  #backgroundCombinedContent .color-options-grid {
    padding: 16px 12px 0;
    min-height: 92px;
  }

  .color-options-grid {
    padding: 18px 12px 0;
  }

  .color-option {
    flex-basis: 102px;
    width: 102px;
    min-width: 102px;
    min-height: 72px;
    padding: 7px 7px 10px;
  }

  .color-name {
    font-size: 13px !important;
  }

  .color-topic-input {
    font-size: 10px;
    min-height: 22px;
    padding: 4px 6px;
  }

  .color-option + .color-option {
    margin-left: -20px;
  }
}

/* =================================================================
   Drucklayout-Picker (A4 / 2 / 4 / 6 auf Blatt) – links neben dem Schild
   ================================================================= */

.preview-area.has-print-layout-picker {
  position: relative;
}

.print-layout-selector {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: 52px;
  padding: 0;
  margin: 0;
  pointer-events: auto;
  opacity: 1;
}

.print-layout-selector {
  width: 68px;
}

.print-layout-selector.is-hidden {
  display: none;
}

.print-layout-selector-title {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted, #999);
  text-transform: none;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.1;
  margin-bottom: 2px;
}

.print-layout-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.print-layout-option {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 5px 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    opacity 0.15s ease;
  min-width: 0;
  width: 100%;
}

.print-layout-option:hover:not(:disabled) {
  border-color: rgba(255, 204, 0, 0.55);
}

.print-layout-option.is-active {
  border-color: #ffcc00;
}

.print-layout-option.is-readonly {
  cursor: default;
  opacity: 0.75;
}

.print-layout-mini-grid {
  display: grid;
  gap: 1px;
  flex-shrink: 0;
  background: #5c5c5c;
  border: 1px solid rgba(0, 0, 0, 0.45);
  border-radius: 1px;
  padding: 1px;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.print-layout-mini-grid.is-portrait {
  width: 30px;
  height: 38px;
}

.print-layout-mini-grid.is-landscape {
  width: 50px;
  height: 28px;
  gap: 1px;
}

.print-layout-mini-cell {
  background: linear-gradient(to bottom, #c62828 0%, #c62828 22%, #ffcc00 22%, #f5b800 100%);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 0;
  min-width: 0;
  min-height: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  color: #1a1a1a;
  letter-spacing: -0.02em;
  overflow: hidden;
}

.print-layout-option-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-color, #ddd);
  line-height: 1;
  min-width: 10px;
  text-align: center;
}

.print-layout-check {
  position: absolute;
  top: 0;
  right: 2px;
  font-size: 8px;
  font-weight: bold;
  color: #ffcc00;
  opacity: 0;
  line-height: 1;
}

.print-layout-option.is-active .print-layout-check {
  opacity: 1;
}

.print-layout-options:has(.print-layout-option.is-active) .print-layout-option:not(.is-active) {
  opacity: 0.5;
}

body.pdf-export .print-layout-selector {
  display: none !important;
}

/* =================================================================
   Datenupload / Wartungsmodus – Vollbild-Sperre für andere User
   ================================================================= */

body.data-maintenance-locked {
  overflow: hidden;
}

/*
 * Der feste Loeschknopf liegt im Normalbetrieb absichtlich ueber allen App-Inhalten.
 * Im Wartungsmodus darf ausschliesslich die Fortschrittsanzeige bedienbar und sichtbar
 * bleiben; deshalb gewinnt diese zustandsgebundene Regel auch gegen sein Inline-display.
 */
body.data-maintenance-locked .clear-all-thumbnails-button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.data-maintenance-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 14, 0.92);
  backdrop-filter: blur(4px);
  padding: 24px;
  box-sizing: border-box;
}

.data-maintenance-overlay.is-visible {
  display: flex;
}

.data-maintenance-panel {
  max-width: 420px;
  width: 100%;
  text-align: center;
  color: #f3f4f6;
  padding: 32px 28px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(22, 24, 30, 0.96);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}

.data-maintenance-icon {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 16px;
}

.data-maintenance-title {
  margin: 0 0 12px;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.data-maintenance-message {
  margin: 0 0 20px;
  font-size: 0.95rem;
  line-height: 1.45;
  opacity: 0.88;
}

.data-maintenance-phase {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.35;
}

.data-maintenance-progress {
  width: 100%;
  height: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.data-maintenance-progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #ffcc00;
  transition: width 0.25s ease;
}

.data-maintenance-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.data-maintenance-progress.is-hidden,
.data-maintenance-progress-meta.is-hidden,
.data-maintenance-phase.is-hidden {
  display: none;
}

.data-maintenance-eta {
  margin: 16px 0 8px;
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #ffcc00;
  line-height: 1.2;
}

.data-maintenance-sub {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  .data-maintenance-progress-bar {
    transition: none;
  }
}

/*
 * Aktives Thumbnail zuverlaessig sichtbar halten:
 * - scroll-snap deaktiviert, da JS (ThumbnailStrip.scrollToIndex) die Position exakt steuert
 *   und proximity-Snapping das letzte Element zurueck zur Mitte des vorletzten zog.
 * - padding-right schafft Scrollraum fuer den scale(1.4)-Overflow des letzten Thumbnails,
 *   da transform nicht zur scrollWidth beitraegt.
 */
.thumbnails-container {
  scroll-snap-type: none;
  padding-right: calc((var(--thumbnail-width) * (var(--thumbnail-active-scale) - 1) / 2) + 16px);
  /*
   * Kleiner Abstand, damit das aktive (skalierte) Thumbnail seine beiden Nachbarn
   * sichtbar ueberlappt. Bei 10px Abstand fraesse der Gap den scale-Overflow auf.
   * Virtualisiert bleibt gap:0 (hoehere Spezifitaet via .thumbnail-strip-virtualized).
   */
  gap: 4px;
}

/* Aktives Thumbnail klar ueber beide Nachbarn legen (symmetrisch, ohne Reflow). */
.thumbnails-container .thumbnail.active {
  z-index: 30;
  transform-origin: center center;
}