/* ===============================================
   BASE STYLES - Grundlagen & CSS-Variablen
   =============================================== */

/* Font Definition */
@font-face {
  font-family: "MM Headline Pro WebTT Regular";
  src: url("../fonts/mm-headline-regular.woff2") format("woff2"),
    url("../fonts/mm-headline-regular.woff") format("woff"),
    url("../fonts/mm-headline-regular.ttf") format("truetype"),
    url("../fonts/PrestoMMHeadlinePro-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* CSS-Variablen für konsistente Styles */

/* ===============================================
   LIGHT MODE VARIABLEN (Standard)
   =============================================== */
  --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-heavy: 0 8px 16px rgba(0, 0, 0, 0.2);
  
  /* Light Mode Scrollbars */
  --scrollbar-track: #f1f1f1;
  --scrollbar-thumb: #c1c1c1;
  --scrollbar-thumb-hover: #a8a8a8;
}

/* =============================================== VARIABLEN ÜBERSCHREIBUNG
   =============================================== */
:root {
  /* Grundfarben */
  --bg-primary: var(--dark-bg-primary);
  --bg-secondary: var(--dark-bg-secondary);
  --bg-tertiary: var(--dark-bg-tertiary);
  --bg-elevated: var(--dark-bg-elevated);
  --bg-overlay: var(--dark-bg-overlay);
  
  /* Textfarben */
  --text-primary: var(--dark-text-primary);
  --text-secondary: var(--dark-text-secondary);
  --text-muted: var(--dark-text-muted);
  --text-disabled: var(--dark-text-disabled);
  --text-inverse: var(--dark-text-inverse);
  
  /* Akzentfarben */
  --accent-primary: var(--dark-accent-primary);
  --accent-secondary: var(--dark-accent-secondary);
  --accent-success: var(--dark-accent-success);
  --accent-warning: var(--dark-accent-warning);
  --accent-error: var(--dark-accent-error);
  --accent-info: var(--dark-accent-info);
  
  /* Rahmen & Trennlinien */
  --border-primary: var(--dark-border-primary);
  --border-secondary: var(--dark-border-secondary);
  --border-subtle: var(--dark-border-subtle);
  --border-focus: var(--dark-border-focus);
  
  /* Schatten */
  --shadow-light: var(--dark-shadow-light);
  --shadow-medium: var(--dark-shadow-medium);
  --shadow-heavy: var(--dark-shadow-heavy);
  
  /* Scrollbars */
  --scrollbar-track: var(--dark-scrollbar-track);
  --scrollbar-thumb: var(--dark-scrollbar-thumb);
  --scrollbar-thumb-hover: var(--dark-scrollbar-thumb-hover);
}

/* Reset & Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
}

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

body {
  background-color: white;
  font-family: var(--font-family);
  color: var(--text-color);
  font-synthesis: none;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Body Styles */
{
  background-color: #222;
  color: #eee;
}

* {
  color: inherit;
}

/* Input Elements */
textarea {
  background-color: #444;
  border-color: #555;
  color: #eee;
}

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

input {
  background-color: #444;
  border-color: #555;
  color: #eee;
}

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

/* Buttons */
button {
  background-color: #444;
  color: #eee;
  border-color: #555;
}

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

/* Labels */
label {
  color: #eee;
}

/* Links */
.highlight {
  color: #ff6b6b;
}

/* Toast Messages */
.toast {
  background-color: #333;
  color: #eee;
  border-color: #555;
}

/* Help Boxes */
.help-box {
  background-color: #333;
  border-left-color: #555;
  color: #eee;
}

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

.tooltip {
  background-color: #555;
  color: #eee;
}

/* Toggle Button */
.dark-mode-toggle {
  background-color: #444;
  border-color: #555;
}

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

.sun-icon {
  display: none;
}

.moon-icon {
  display: block;
}

/* File Upload */
.dropzone {
  border-color: #555;
  color: #aaa;
  background-color: #333;
}

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

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

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

.file-name {
  color: #eee;
}

.file-size {
  color: #aaa;
}

.file-remove {
  color: #aaa;
}

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

/* Globale Utility-Klassen */
.left-align { text-align: left; }
.center-align { text-align: center; }
.right-align { text-align: right; }

.text-muted { color: var(--text-light); }
.bg-yellow { background-color: var(--background-yellow); }
.text-black { color: black; }

.price-increase { color: var(--error-color); }
.price-decrease { color: var(--success-color); }

.highlight { 
  color: var(--primary-color);
  font-weight: 500;
}

.hidden-input { display: none; }

/* Screen Reader Only - für Accessibility */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
} /**
 * 🎨 Hintergrundfarbe-Anpassungen für rot und orange
 * 
 * Diese Datei enthält die Farbanpassungen, die aktiviert werden,
 * wenn rot oder orange als Hintergrundfarbe ausgewählt wird. */

/* ===== ROTE HINTERGRUNDFARBE (#ff0000) ===== */
.a4-container[data-background-color="#ff0000"] .arrow-box {
  background-color: white !important;
}

.a4-container[data-background-color="#ff0000"] .arrow-box::before {
  background-color: white !important;
}

.a4-container[data-background-color="#ff0000"] .arrow-box::after {
  border-top-color: white !important;
}

.a4-container[data-background-color="#ff0000"] .preis-rabatt-euro,
.a4-container[data-background-color="#ff0000"] .preis-rabatt-trennstrich,
.a4-container[data-background-color="#ff0000"] .preis-rabatt-prozent {
  color: red !important;
}

.a4-container[data-background-color="#ff0000"] .sonderheit {
  color: white !important;
}

.a4-container[data-background-color="#ff0000"] .preis-vkneu,
.a4-container[data-background-color="#ff0000"] .a4-container .inhalt .preis-vkneu,
.a4-container[data-background-color="#ff0000"] .preis-vkneu-inner {
  color: white !important;
}

/* ===== ORANGE HINTERGRUNDFARBE (#ff8c42 neu, #ff6600 Alt-Bestand) ===== */
.a4-container[data-background-color="#ff8c42"] .arrow-box,
.a4-container[data-background-color="#ff6600"] .arrow-box {
  background-color: white !important;
}

.a4-container[data-background-color="#ff8c42"] .arrow-box::before,
.a4-container[data-background-color="#ff6600"] .arrow-box::before {
  background-color: white !important;
}

.a4-container[data-background-color="#ff8c42"] .arrow-box::after,
.a4-container[data-background-color="#ff6600"] .arrow-box::after {
  border-top-color: white !important;
}

.a4-container[data-background-color="#ff8c42"] .preis-rabatt-euro,
.a4-container[data-background-color="#ff8c42"] .preis-rabatt-trennstrich,
.a4-container[data-background-color="#ff8c42"] .preis-rabatt-prozent,
.a4-container[data-background-color="#ff6600"] .preis-rabatt-euro,
.a4-container[data-background-color="#ff6600"] .preis-rabatt-trennstrich,
.a4-container[data-background-color="#ff6600"] .preis-rabatt-prozent {
  color: red !important;
}

.a4-container[data-background-color="#ff8c42"] .sonderheit,
.a4-container[data-background-color="#ff6600"] .sonderheit {
  color: white !important;
}

.a4-container[data-background-color="#ff8c42"] .preis-vkneu,
.a4-container[data-background-color="#ff8c42"] .a4-container .inhalt .preis-vkneu,
.a4-container[data-background-color="#ff8c42"] .preis-vkneu-inner,
.a4-container[data-background-color="#ff6600"] .preis-vkneu,
.a4-container[data-background-color="#ff6600"] .a4-container .inhalt .preis-vkneu,
.a4-container[data-background-color="#ff6600"] .preis-vkneu-inner {
  color: white !important;
}

/* ===== BLAUE HINTERGRUNDFARBE (#0066cc) ===== */
.a4-container[data-background-color="#0066cc"] .arrow-box {
  background-color: white !important;
}

.a4-container[data-background-color="#0066cc"] .arrow-box::before {
  background-color: white !important;
}

.a4-container[data-background-color="#0066cc"] .arrow-box::after {
  border-top-color: white !important;
}

.a4-container[data-background-color="#0066cc"] .preis-rabatt-euro,
.a4-container[data-background-color="#0066cc"] .preis-rabatt-trennstrich,
.a4-container[data-background-color="#0066cc"] .preis-rabatt-prozent {
  color: red !important;
}

.a4-container[data-background-color="#0066cc"] .sonderheit {
  color: white !important;
}

.a4-container[data-background-color="#0066cc"] .preis-vkneu,
.a4-container[data-background-color="#0066cc"] .a4-container .inhalt .preis-vkneu,
.a4-container[data-background-color="#0066cc"] .preis-vkneu-inner {
  color: white !important;
}

/* ===== STANDARD-FARBEN WIEDERHERSTELLEN ===== */
/* Wenn KEIN data-background-color Attribut gesetzt ist (Gelb, Grün) */
.a4-container:not([data-background-color]) .arrow-box {
  background-color: red !important;
}

.a4-container:not([data-background-color]) .arrow-box::before {
  background-color: red !important;
}

.a4-container:not([data-background-color]) .arrow-box::after {
  border-top-color: red !important;
}

.a4-container:not([data-background-color]) .preis-rabatt-euro,
.a4-container:not([data-background-color]) .preis-rabatt-trennstrich,
.a4-container:not([data-background-color]) .preis-rabatt-prozent {
  color: white !important;
}

.a4-container:not([data-background-color]) .sonderheit {
  color: red !important;
}

.a4-container:not([data-background-color]) .preis-vkneu,
.a4-container:not([data-background-color]) .a4-container .inhalt .preis-vkneu,
.a4-container:not([data-background-color]) .preis-vkneu-inner {
  color: red !important;
}

/* ===== DRUCK-OPTIMIERUNG ===== */
@media print {
  .a4-container[data-background-color="#ff0000"] .arrow-box,
  .a4-container[data-background-color="#ff8c42"] .arrow-box,
  .a4-container[data-background-color="#ff6600"] .arrow-box,
  .a4-container[data-background-color="#0066cc"] .arrow-box {
    background-color: white !important;
  }
  
  .a4-container[data-background-color="#ff0000"] .arrow-box::before,
  .a4-container[data-background-color="#ff8c42"] .arrow-box::before,
  .a4-container[data-background-color="#ff6600"] .arrow-box::before,
  .a4-container[data-background-color="#0066cc"] .arrow-box::before {
    background-color: white !important;
  }
  
  .a4-container[data-background-color="#ff0000"] .arrow-box::after,
  .a4-container[data-background-color="#ff8c42"] .arrow-box::after,
  .a4-container[data-background-color="#ff6600"] .arrow-box::after,
  .a4-container[data-background-color="#0066cc"] .arrow-box::after {
    border-top-color: white !important;
  }
  
  .a4-container[data-background-color="#ff0000"] .preis-rabatt-euro,
  .a4-container[data-background-color="#ff0000"] .preis-rabatt-trennstrich,
  .a4-container[data-background-color="#ff0000"] .preis-rabatt-prozent,
  .a4-container[data-background-color="#ff8c42"] .preis-rabatt-euro,
  .a4-container[data-background-color="#ff8c42"] .preis-rabatt-trennstrich,
  .a4-container[data-background-color="#ff8c42"] .preis-rabatt-prozent,
  .a4-container[data-background-color="#ff6600"] .preis-rabatt-euro,
  .a4-container[data-background-color="#ff6600"] .preis-rabatt-trennstrich,
  .a4-container[data-background-color="#ff6600"] .preis-rabatt-prozent,
  .a4-container[data-background-color="#0066cc"] .preis-rabatt-euro,
  .a4-container[data-background-color="#0066cc"] .preis-rabatt-trennstrich,
  .a4-container[data-background-color="#0066cc"] .preis-rabatt-prozent {
    color: red !important;
  }
  
  .a4-container[data-background-color="#ff0000"] .sonderheit,
  .a4-container[data-background-color="#ff8c42"] .sonderheit,
  .a4-container[data-background-color="#ff6600"] .sonderheit,
  .a4-container[data-background-color="#0066cc"] .sonderheit {
    color: white !important;
  }
  
  .a4-container[data-background-color="#ff0000"] .preis-vkneu,
  .a4-container[data-background-color="#ff0000"] .a4-container .inhalt .preis-vkneu,
  .a4-container[data-background-color="#ff0000"] .preis-vkneu-inner,
  .a4-container[data-background-color="#ff8c42"] .preis-vkneu,
  .a4-container[data-background-color="#ff8c42"] .a4-container .inhalt .preis-vkneu,
  .a4-container[data-background-color="#ff8c42"] .preis-vkneu-inner,
  .a4-container[data-background-color="#ff6600"] .preis-vkneu,
  .a4-container[data-background-color="#ff6600"] .a4-container .inhalt .preis-vkneu,
  .a4-container[data-background-color="#ff6600"] .preis-vkneu-inner,
  .a4-container[data-background-color="#0066cc"] .preis-vkneu,
  .a4-container[data-background-color="#0066cc"] .a4-container .inhalt .preis-vkneu,
  .a4-container[data-background-color="#0066cc"] .preis-vkneu-inner {
    color: white !important;
  }
  
  /* Standard-Farben für Druck wiederherstellen */
  .a4-container:not([data-background-color]) .arrow-box {
    background-color: red !important;
  }
  
  .a4-container:not([data-background-color]) .arrow-box::before {
    background-color: red !important;
  }
  
  .a4-container:not([data-background-color]) .arrow-box::after {
    border-top-color: red !important;
  }
  
  .a4-container:not([data-background-color]) .preis-rabatt-euro,
  .a4-container:not([data-background-color]) .preis-rabatt-trennstrich,
  .a4-container:not([data-background-color]) .preis-rabatt-prozent {
    color: white !important;
  }
  
  .a4-container:not([data-background-color]) .sonderheit {
    color: red !important;
  }
  
  .a4-container:not([data-background-color]) .preis-vkneu,
  .a4-container:not([data-background-color]) .a4-container .inhalt .preis-vkneu,
  .a4-container:not([data-background-color]) .preis-vkneu-inner {
    color: red !important;
  }
}