:root {
  /* ========================
     COLOR VARIABLES (Farben)
     ======================== */
  /* Hintergrundfarben */
  --bg-color-main: #ffffff;           /* Haupt-Hintergrund (Body, Right Panel) */
  --bg-color-preview: #f1f1f1;        /* Linkes Panel (Preview Bereich) */
  --bg-color-element: #f6f6f6;        /* Hintergrund für Boxen/Zonen */
  --bg-color-element-hover: #e0e0e0;  /* Hover-Status für Elemente */
  --bg-color-input: #f5f5f5;          /* Eingabefelder */
  --bg-color-button: #f3f3f3;         /* Standard Button Hintergrund */
  --bg-color-button-active: #b3b3b3;  /* Aktiver Button Hintergrund */

  /* Textfarben */
  --text-color-primary: #000000;      /* Haupttext */
  --text-color-dark: #333333;         /* Dunkler Text (Überschriften, Aktives) */
  --text-color-muted: #000000;        /* Dezentere Infos (Labels, Breadcrumbs) */
  --text-color-label: #000000;        /* Labels über Inputs */
  --acent-color: #526fff;

  /* Rahmen & Linien */
  --border-color-light: #9c9c9c;      /* Helle Trennlinien/Rahmen */
  --border-color-input: #c8c8c8;      /* Input/Button Rahmen */
  --border-color-dark: #7b7b7b;       /* Dunklere Input Rahmen (Focus/Active) */
  --border-color-active: #b0b0b0;     /* Aktive Rahmenfarbe */

  /* ========================
     SPACING VARIABLES (Abstände)
     ======================== */
  /* Allgemeine Abstände */
  --spacing-xs: 4px;                  /* Sehr klein */
  --spacing-sm: 8px;                  /* Klein */
  --spacing-md: 12px;                 /* Mittel (Padding in Boxen) */
  --spacing-lg: 16px;                 /* Groß (Abstand zwischen Elementen) */
  --spacing-xl: 24px;                 /* Sehr groß (Header Margin) */
  
  /* Layout spezifische Abstände */
  --layout-margin-sides: 7%;          /* Seitlicher Abstand für Hauptcontainer */
  --layout-gap-standard: 0.469vw;         /* Standard Lücke zwischen Flex-Items */
  --layout-header-top: 5vh;           /* Abstand Header oben (Preview) */
  --layout-editor-top: 7vh;           /* Abstand Header oben (Editor) */

  /* Label spezifische Werte für exakte Ausrichtung */
  --label-line-height: 1.2;           /* Zeilenhöhe der Labels */
  --label-margin-bottom: 6px;         /* Abstand unter dem Label */

  /* ========================
     SIZING & RADIUS (Größen)
     ======================== */
  /* Radien */
  --radius-button: 999px;             /* Pillen-Form für Buttons */
  --radius-box: 1vw;                 /* Abgerundete Boxen (Zonen, Editor) */
  --radius-sm: 6px;                   /* Kleine Elemente (Checkboxen, kleine Btn) */

  /* Hinweiszeile ueber dem Canvas (freie Elemente, Flaechen-Auswahl,
     abgelehntes Einfuegen): reservierter Streifen ueber der Zeichenflaeche,
     damit der Hinweis nicht auf dem Produkt liegt.
     Die Schrift skaliert mit dem Viewport (1.042vw), der Streifen muss das
     mitmachen - fest 46px reichten auf einem breiten Monitor nicht einmal fuer
     eine Zeile. Gerechnet fuer zwei Zeilen: 4px Abstand oben + 2x8px Polster
     + 2 x 1.2 Zeilenhoehe, plus 4px Luft. */
  --stage-hint-font: var(--font-size-small);
  --stage-hint-space: calc(24px + 2.4 * var(--stage-hint-font));

  /* Schriftgrößen */
  --font-size-base: 1.042vw;             /* Standard Schriftgröße */
  --font-size-small: 1.042vw;            /* Kleine Infos */
  --font-size-label: 1.042vw;             /* Labels (relativ) */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, Arial, sans-serif;
  background-color: var(--bg-color-main);
  color: black;
}

body h1 {
  margin: 0;
  font-size: 3.125vw;
  line-height: 1;
  color: var(--acent-color);
  text-transform: uppercase;
}

body h2 {
  margin: 0;
  font-size: 2.083vw;
  font-weight: 450;
  line-height: 1;
  text-transform: uppercase;
}

body button {
  border: 1px solid black;
  background: transparent;
  padding: 2px 30px;
  border-radius: var(--font-size-base);
  font-size: 1.302vw;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0;
  cursor: pointer;
  /* SCHRIFTFARBE UND AUSSEHEN AUSDRUECKLICH SETZEN - SONST FAERBT iOS BLAU.
     Hier stand keine `color`. Ein <button> erbt seine Farbe NICHT vom
     Elternelement, er bekommt vom Browser den Vorgabewert `buttontext`.
     Auf Chrome, Edge und Firefox ist das Schwarz, weshalb am Schreibtisch
     nie etwas auffiel - auf iOS Safari ist es die System-Akzentfarbe, also
     BLAU. Gemeldet am 03.09.2026 von einem iPhone; im Seiteninspektor am
     PC ist es nicht zu sehen, weil der dort geltende Wert ein anderer ist.
     `inherit` stellt her, was man ohnehin erwartet: der Knopf nimmt die
     Farbe seiner Umgebung (hier Schwarz vom body). FRONT/BACK im aktiven
     Zustand bleiben davon unberuehrt, die setzen ihr Weiss selbst.
     `appearance: none` nimmt iOS zusaetzlich das eigene Knopf-Aussehen weg;
     Rahmen, Grund und Radius stehen hier ohnehin alle ausdruecklich. */
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.view_btns button.is_active,
.product_btns button.is_active {
  background: black;
  color: white;
}

.color_wrapper {
  width: 35px;
  height: 24px;
  border: 1px solid #000;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}

.color_preview {
  width: 100%;
  height: 100%;
  background: #ff0000;
}

.color_wrapper input[type="color"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.main {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 100vh;
}

.section_product_preview > *,
.section_editor > * {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

/* Breadcrump Navigation (UPDATED: moved to bottom, static position) */
.breadcrumb {
  /* Removed absolute positioning */
  width: 80%;
  margin: 0 auto var(--layout-margin-sides) auto; /* Bottom margin matches sidebar bottom */
  font-size: var(--font-size-small);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-color-dark); /* Darker text for gray background */
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Centered in container */
  gap: 6px;
}

.breadcrumb a {
  text-decoration: none;
  color: var(--text-color-primary);
  font-size: 1.2em;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb_sep {
  color: var(--text-color-primary);
}

.breadcrumb_current {
  color: var(--acent-color);
  font-weight: bold; /* Added bold for better visibility on gray */
  font-size: 1.2em;
}

.breadcrumb_editor {
  display: none;
}

/* Section Product Preview */

.section_product_preview {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--bg-color-preview);
  width: 50%;
  height: 100vh;
}

.product_info {
  display: flex;
  flex-direction: column;
  /* Lange Namen sollen über die Front/Back-Buttons hinauslaufen, statt diese zu
     verschieben: Schrumpfen erlauben, damit der Name überläuft statt zu drücken. */
  min-width: 0;
}

/* Produktname nie umbrechen; läuft bei Bedarf nach ganz rechts über die Buttons
   (pointer-events:none -> Buttons bleiben klickbar). Layout sonst unverändert. */
.product_name {
  white-space: nowrap;
  overflow: visible;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.section_editor {
  background-color: var(--bg-color-main);
  width: 50%;
}

.preview_header {
  display: flex;
  justify-content: space-between;
  margin-top: var(--layout-header-top);
  border-bottom: 1px solid var(--border-color-light);
  padding-bottom: 0.95vw;
  margin-bottom: var(--spacing-xl);
}

.zoom_control input {
  width: 40px;
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid var(--text-color-dark);
  background: transparent; /* Changed to transparent to blend with var(--bg-color-preview) */
  font-size: var(--font-size-base);
  color: var(--text-color-primary);
  outline: none;
}

.view_btns {
  display: flex;
  align-items: flex-end;
  gap: var(--layout-gap-standard);
}

.workarea {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow: hidden;
  width: 80%;
  height: 100%;
}

.stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
  /* Reservierter Streifen fuer die Hinweiszeilen darueber (Flaechen-Auswahl,
     Ablehnung, freie Elemente). Ohne ihn lagen die Hinweise auf dem Motiv und
     schnitten es oben an - bei hohen Produkten (Weste) besonders deutlich.
     border-box: der Streifen geht von der Canvas-Hoehe ab, statt den Stage
     ueber seinen Platz hinaus wachsen zu lassen. */
  padding-top: var(--stage-hint-space);
}

/* Hinweis beim Platzieren von Text/Logo in eine Zone, die aus mehreren
   getrennten Flächen besteht (z.B. Glove: Handrücken + Daumen). */
.area_pick_hint {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
  max-width: 90%;
  padding: 8px 16px;
  border-radius: var(--radius-button);
  background: var(--bg-color-main);
  border: 1px solid var(--acent-color);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  color: var(--text-color-dark);
  font-size: var(--stage-hint-font);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Abgelehntes Einfügen: gleiche Position/Optik wie der Flächen-Hinweis, aber
   in Warnfarbe. Ersetzt den früheren alert()-Fallback (der den Tab blockierte,
   weil #inspectorNotice im Markup gar nicht existiert). */
.insert_warning {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  pointer-events: none;
  max-width: 90%;
  padding: 8px 16px;
  border-radius: var(--radius-button);
  background: #fff5f5;
  border: 1px solid #d32f2f;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  color: #b3261e;
  font-size: var(--stage-hint-font);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Derselbe Platz, andere Aussage: der Hinweis auf die freien Elemente ist
   keine Warnung. Ruhige Farbe, und er darf umbrechen - der Satz ist laenger
   als eine Ablehnung und wuerde sonst an der Ellipse abgeschnitten. */
.insert_warning--info {
  background: #eef1ff;
  border-color: #526fff;
  color: #2b3a8f;
  white-space: normal;
  max-width: min(90%, 560px);
}

#c {
    display: block;
    /* Canvas ist intern quadratisch (800x800). Immer vollständig in den Stage
       einpassen (contain) statt nur an der Breite auszurichten – sonst läuft das
       Quadrat bei flacherem Viewport unten aus dem Stage und schneidet ab. */
    aspect-ratio: 1 / 1;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}

/* product_btns REMOVED from HTML, keep CSS just in case needed later, or remove to clean up */
.product_btns {
  display: flex;
  gap: var(--layout-gap-standard);
  margin-bottom: var(--layout-margin-sides);
}

/* Section Editor */

.section_editor {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.editor_header {
  display: flex;
  justify-content: space-between;
  margin-top: var(--layout-editor-top);
  border-bottom: 1px solid var(--border-color-light);
  padding-bottom: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.editor_header h2 {
  font-weight: 650;
}

.icon_btn {
  all: unset;
  cursor: pointer;
}

.icon_btn img {
  width: 1.823vw;
  height: 1.823vw;
  pointer-events: none;
}

.icon_btn:disabled {
  cursor: not-allowed;
}

.icon_btn:disabled img {
  opacity: 0.5;
}

#redo_btn {
  transform: scaleX(-1)scaleY(-1);
}

.editor_body {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 70vh;
  margin-top: 1vh;
  margin-bottom: 4vh;
}

.editor_left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 50%;
}

#edit_btn_z1,
#edit_btn_z2,
#edit_btn_z3,
#edit_btn_z4 {
  background-color: var(--acent-color);
  color: white;
  border-color: transparent;
}

.zones {
  border: 1px solid transparent;
  box-shadow: 0.417vw 0.417vw 0.781vw #909090;
  border-radius: var(--radius-box);
  background: var(--bg-color-element);
  padding: 0.625vw 0.8vw;
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
  align-items: center;
  margin-top: var(--layout-gap-standard);
  width: 90%;
}

.zones button.inspector_mode_active {
  background: black;
  color: white;
}

/* Kopfzeile einer Zonen-Kachel: Label links, optional der "switch"-Knopf
   rechts. Gleiche Breite wie die .zones-Box darunter, damit der Knopf mit
   deren rechter Kante abschliesst. */
.zone_head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-sm);
  width: 90%;
}

/* Zurueck in die Zonen-Auswahl einer Gruppe (zoneUi.<view>.groups).
   ui.js blendet ihn ein, sobald eine Zone der Gruppe GEWAEHLT wurde; das CSS
   nimmt ihn zusaetzlich weg, solange die Kachel eingeklappt ist - dort wird
   gerade an einer anderen Zone gearbeitet. */
.zone_switch {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: var(--font-size-small);
  font-weight: 600;
  text-transform: none;
  text-decoration: underline;
  color: var(--acent-color);
  cursor: pointer;
  white-space: nowrap;
}

.zone_controls.zone_collapsed .zone_switch {
  display: none;
}
/* Hinweiszeile unter einer Zonen-Kachel (Katalog: zoneUi.<view>.notes),
   z.B. "Must be selected at checkout" beim Innershort der Gladiator Shorts.
   Steht ausserhalb der .zones-Box, damit sie das Raster der Buttons nicht
   mitzaehlt (sonst greift zones_single nicht mehr). */
.zone_note {
  width: 90%;
  margin: 6px 0 0 0;
  padding: 0 0.8vw;
  font-size: var(--font-size-small);
  line-height: 1.25;
  font-style: italic;
  color: var(--text-color-muted);
  opacity: 0.75;
}

/* Die Beschriftung ueber der Shape-Kachel und ueber der Preisliste ist ein
   block-Element und damit 100 % breit, waehrend die Kachel darunter 90 %
   misst. Zu sehen ist davon nichts - der Text steht links -, aber es ist die
   Aussenkante, die der gefuehrte Rundgang misst: sein Scheinwerfer griff
   dadurch rechts ueber die Kachel hinaus. Bei zone_1/2/4 sitzt das Label in
   .zone_head (ebenfalls 90 %) und war nie betroffen. */
#zone_3_lbl,
#price_lbl {
  width: 90%;
}

.lbl {
  display: block;
  font-size: var(--font-size-label);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-color-label);
  margin-bottom: var(--label-margin-bottom);
  line-height: var(--label-line-height);
}

#price_box {
  display: flex;
  flex-direction: column;
}

.price_lines {
  width: 100%;
}

.price_line {
  margin-bottom: 0.5vh;
}

.price_line[data-el-ids] {
  cursor: pointer;
}

.price_line,
.price_total,
.price_total_row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.price_label {
  font-size: 0.9vw;
  font-weight: 600;
  color: var(--text-color-label);
}

.price_value {
  font-size: 0.9vw;
  font-weight: 600;
  text-align: right;
  color: var(--text-color-label);
}

.price_total_label {
  font-size: 0.9vw;
  font-weight: 600;
  color: var(--text-color-label);
}

.price_total_value {
  font-size: 0.9vw;
  font-weight: 600;
  color: var(--text-color-label);
  text-align: right;
}

.price_divider {
  width: 100%;
  margin-left: -25px;
  margin-right: -25px;
  border-color: var(--border-color-light); /* Added to use variable */
}

/* Collapsed: nur EDIT, eine Spalte */
.zone_controls.zone_collapsed .zones {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  row-gap: var(--spacing-sm);
}

.zone_controls.zone_collapsed .zones button[id^="edit_btn_"] {
  display: inline-block;
}

.zone_controls.zone_collapsed .zones button:not([id^="edit_btn_"]) {
  display: none;
}

/* Expanded */
.zone_controls.zone_expanded .zones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--spacing-sm);
  row-gap: var(--spacing-sm);
  justify-items: center;
  box-shadow: 0.417vw 0.417vw 0.781vw var(--acent-color);
}

.zone_controls.zone_expanded .zones button[id^="edit_btn_"] {
  display: none;
}

.zone_controls.zone_expanded .zones button:not([id^="edit_btn_"]) {
  display: inline-block;
  width: 100%;
}

.zone_controls.zone_expanded .zones button:not([id^="edit_btn_"]):last-child {
  grid-column: 1 / -1;
  justify-self: center;
}

/* Genau ein sichtbarer Button in der Box: gleiche Breite wie ein normaler
   Button (also eine Rasterspalte statt der vollen Zeile) und mittig zentriert.
   Betrifft den eingeklappten EDIT-Button ebenso wie Zonen mit nur einer Aktion
   (Vest-Kapuze: nur COLOR, Overall: nur Shape).

   Die Klasse `zones_single` setzt ui.js (sync_single_button_zones), weil sich in
   CSS nicht zuverlaessig zaehlen laesst, welche Buttons gerade sichtbar sind:
   ausgeblendete Geschwister bleiben im DOM, `:only-child` greift also nicht. */
.zone_controls.zone_collapsed .zones.zones_single,
.zone_controls.zone_expanded .zones.zones_single {
  grid-template-columns: minmax(0, calc(50% - var(--spacing-sm) / 2));
  justify-content: center;
}

.zone_controls.zone_collapsed .zones.zones_single button,
.zone_controls.zone_expanded .zones.zones_single button,
.zone_controls.zone_expanded .zones.zones_single button:not([id^="edit_btn_"]),
.zone_controls.zone_expanded .zones.zones_single button:not([id^="edit_btn_"]):last-child {
  grid-column: auto;
  justify-self: stretch;
  width: 100%;
}

.editor_right {
  border: 1px solid transparent;
  box-shadow: 0.417vw 0.417vw 0.781vw #909090;
  border-radius: var(--radius-box);
  background: var(--bg-color-element);
  padding: 1.125vw 1.563vw;
  width: 50%;
  margin-top: calc((var(--font-size-label) * var(--label-line-height)) + var(--label-margin-bottom) + var(--layout-gap-standard) - 5px);
  max-height: 75vh; 
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Drag handle hidden on desktop */
.editor_drag_handle {
  display: none;
}

.editor_right.active {
  box-shadow: 0.417vw 0.417vw 0.781vw var(--acent-color);
}

.editor_bottom {
  display: flex;
  justify-content: flex-end;
  gap: var(--layout-gap-standard);
  margin-bottom: var(--layout-margin-sides);
}

#fwd_btn {
  background-color: var(--acent-color);
  color: white;
  border-color: transparent
}

.hidden {
  display: none !important;
}

.upload_spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  display: inline-block;
  animation: spin 0.8s linear infinite;
}

.upload_spinner.hidden {
  display: none;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.image_upload_status {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: var(--spacing-sm);
}

/* 1. Container als Grid */
.image_library {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 10px;
  width: 100%;
  margin-top: 15px;
  box-sizing: border-box;
}

/* 2. Die Karte (Card) */
.image_library .logo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--border-color-light);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.1s ease;
  aspect-ratio: 1 / 1; /* Quadratische Kacheln */
}

/* --- HOVER STATUS (Akzentfarbe) --- */
.image_library .logo-card:hover {
  border-color: var(--acent-color);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

.image_library .logo-card:hover .logo-meta {
  background: var(--acent-color);
  color: #fff;
  border-top-color: var(--acent-color);
  font-weight: 600;
}

/* 3. Bild-Container (Thumb) */
.image_library .logo-thumb {
  flex: 1; 
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* PADDING ENTFERNT für maximale Größe */
  padding: 0; 
  
  /* Weißer Hintergrund statt Checkerboard */
  background: #ffffff; 
}

/* Das eigentliche Bild */
.image_library .logo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Bild passt sich an, ohne verzerrt zu werden */
  display: block;
}

/* 4. Text-Bereich (Meta) */
.image_library .logo-meta {
  height: 22px;
  line-height: 22px;
  background: #fff;
  border-top: 1px solid #eee;
  font-size: 10px;
  color: var(--text-color-dark);
  text-align: center;
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.1s;
}

/* Leerer Zustand */
.library-empty-msg {
  grid-column: 1 / -1;
  text-align: center;
  color: #999;
  font-size: 12px;
  padding: 20px 0;
}

/* Legacy/Additional Styles */
.product-list {
  margin: var(--spacing-lg) 0;
}

.zone-controls {
  margin-top: var(--spacing-lg);
}
.zone-controls.hidden {
  display: none;
}

.chk {
  display: flex;
  align-items: center;
  gap: 4px;
}

.logo-library {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: 2vh;
}

.file {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid var(--border-color-input);
  border-radius: var(--radius-sm);
  background: var(--bg-color-button);
  color: var(--text-color-primary);
  cursor: pointer;
}

.inspector_label {
  text-transform: uppercase;
  font-size: 0.625vw;
  color: rgb(148, 148, 148);
  letter-spacing: 0.2vh;
  font-weight: 600;
}

.inspector_divider {
  margin: 50px -1.563vw 0.67vw;
  border-color: #dfe6ff;
}

.inspector_section_title {
  display: none;
}

#inspector_empty .inspector_section_title {
  display: block;
}

/* Area Inspector (Fix 4) */
.area_inspector_title {
  display: block !important;
  font-size: 1.6vw;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--acent-color);
  margin-bottom: 16px;
}

.area_inspector_text {
  font-size: var(--font-size-base);
  color: var(--text-color-muted);
  line-height: 1.5;
}

/* Inspector Text Group */
.inspector_group_font {
  display: flex;
  flex-direction: column;
  gap: 2vh;
}

.inspector_row {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap-standard);
  margin-top: 2vh;
}

.text_size_style {
  display: flex;
  flex-direction: row;
  gap: 2vh;
  width: 100%;
}

.inspector_section_text .text_size_style .inspector_field:first-child {
  flex: 0 0 70px;
}

.inspector_section_text .text_size_style .inspector_field:last-child {
  flex: 1 1 auto;
}

.inspector_section_text .inspector_group_font select,
.inspector_section_text .inspector_group_font input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid var(--border-color-dark);
  background: transparent;
  font-size: var(--font-size-base);
  color: var(--text-color-primary);
  outline: none;
}

/* Laufweite / Letter spacing: liegt direkt unter der Schriftgröße und teilt
   sich deren Optik (Zahlenfeld mit Unterlinie, gleiche Breite). Das Icon steht
   rechts daneben und sitzt per align-items:flex-end bündig auf der Eingabelinie.
   Höhe in em -> skaliert automatisch mit --font-size-base (Desktop vw, ab
   1500px fixe px), also ohne eigene Media Query responsiv. */
.letter_spacing_row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: var(--layout-gap-standard);
  width: 100%;
}

.inspector_section_text .letter_spacing_row .inspector_field {
  flex: 0 0 70px;
}

.letter_spacing_row .letter_spacing_icon {
  flex: 0 0 auto;
  height: 2em;
  width: auto;
  font-size: var(--font-size-base);
  display: block;
  opacity: 0.8;
  pointer-events: none;
  /* Die Grafik ist quadratisch, das Motiv sitzt darin mit ~20 % Luft nach
     unten. Der negative Rand schiebt sie so weit runter, dass die Ikone
     optisch auf der Eingabelinie steht statt darüber zu schweben. */
  margin-bottom: -0.4em;
}

.inspector_group_lines {
  display: flex;
  flex-direction: row;
  gap: 2vh;
}

.inspector_section_text .line_btns {
  position: relative;
  display: inline-flex;
  border: 1px solid #bdbdbd;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-color-input);
  align-items: stretch;
  height: 50px;
}

.inspector_section_text .line_btns button {
  border: none;
  padding: 4px 8px;
  background: transparent;
  font-size: 11px;
  color: var(--text-color-muted);
  text-transform: none;
  letter-spacing: 0;
  border-radius: 0;
  min-width: 26px;
  font-size: 0;
  height: 100%;
}

.inspector_section_text .line_btns button:not(:last-child) {
  border-right: 1px solid #bdbdbd;
}

.inspector_section_text .inspector_group_lines .inspector_row {
  display: inline-flex;
  border: 1px solid #bdbdbd;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-color-input);
}

.line_distance {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 3vh;
  display: none;
}

.line_distance img {
  width: 50px;
}

.inspector_row_txt {
  margin-top: 0;
}

/* Transform */
.inspector_row_transform {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 3vh;
  align-items: center;
  flex-wrap: wrap;
}

.inspector_row_transform label {
  display: flex;
  flex-direction: row;
  gap: 0.5vh;
}

.inspector_group_transform input[type="number"] {
  width: 35px;
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid var(--border-color-dark);
  background: transparent;
  font-size: var(--font-size-base);
  color: var(--text-color-primary);
  outline: none;
}

/* Color */
.inspector_field_color {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--layout-gap-standard);
  font-size: var(--font-size-base);
}

.inspector_group_style input[type="number"] {
  width: 35px;
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid var(--border-color-dark);
  background: transparent;
  font-size: var(--font-size-base);
  color: var(--text-color-primary);
  outline: none;
}

.inspector_row_style input[type="checkbox"] {
  width: 35px;
  height: 24px;
  accent-color: transparent;
}

#embroidery_color_wrapper {
  background: transparent;
  visibility: hidden
}

/* Order */
.inspector_row_order {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--spacing-sm);
  row-gap: var(--spacing-sm);
  justify-items: center;
}

.inspector_row_order button {
  font-size: var(--font-size-base);
  font-weight: 400;
  width: 8vw;
  padding: 2px 20px;
  text-transform: lowercase;
}

/* Inspector Images / Drag & Drop */
.image_dropzone {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  height: 8vw;
  width: 100%;
  border: 1px solid rgb(0, 0, 0);
  border-radius: var(--radius-box);
  background-color: rgb(82, 110, 250, .2);
  margin-top: 2vh;
}

.image_dropzone p {
  font-size: var(--font-size-base);
}

.inspector_hints {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.inspector_hint_filetype {
  margin-top: 0.5vw;
  margin-bottom: 0px;
  font-size: 11.52px;
}

.editor_btns button:not(.icon_btn) {
  margin-left: var(--spacing-sm);
}

.image_file_input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.image_dropzone.is_dragover {
  outline: 2px dashed #999;
  outline-offset: 4px;
}

#img_embroidery_color_wrapper,
#img_background_color_wrapper {
  background: transparent;
  visibility: hidden;
}

/* Style für die Proportional Size Checkbox */
.inspector_checkbox {
  display: flex;
  align-items: center;        /* Vertikale Zentrierung von Text und Box */
  gap: var(--spacing-sm);     /* Abstand zwischen Checkbox und Text */
  margin-top: 20px;           /* Der gewünschte größere Abstand nach oben */
  font-size: var(--font-size-base);
  color: var(--text-color-primary);
  cursor: pointer;            /* Zeigefinger-Mauszeiger */
  user-select: none;          /* Verhindert Textmarkierung beim Klicken */
}

/* Spezifisches Styling für das Input-Feld, damit es nicht zu klein wirkt */
.inspector_checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
  accent-color: transparent;
}

.embroidery_lockable {
  position: relative;
}

.embroidery_lockable.is_locked {
  cursor: not-allowed;
}

.embroidery_lockable.is_locked input[type="checkbox"],
.embroidery_lockable.is_locked input[type="checkbox"]:disabled {
  cursor: not-allowed;
}

.embroidery_lock_hint {
  position: absolute;
  bottom: calc(100% + 6px);
  max-width: 240px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.3;
  color: #000000;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0.417vw 0.417vw 0.781vw var(--acent-color);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.14s ease, transform 0.14s ease;
  pointer-events: none;
  z-index: 60;
}

.embroidery_lockable.is_locked:hover .embroidery_lock_hint {
  opacity: 1;
  transform: translateY(0);
}

#inspector_checkbox_1 {
  margin-top: 0;
}

/* Inspector Color */
.inspector_section_color {
  display: flex;
  flex-direction: column;
}

#inspector_color {
  font-size: var(--font-size-base);
}

.inspector_color_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-color-main);
  padding: 8px 12px;
  border-radius: 25px;
  border: 1px solid var(--border-color-light);
  margin-top: 2vh
}

.inspector_color_label {
  color: var(--text-color-primary);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.inspector_color_input_wrapper {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--bg-color-main);
  box-shadow: 0 0 0 1px #ccc;
  overflow: hidden;
  cursor: pointer;
}

.inspector_color_preview {
  width: 100%;
  height: 100%;
  background-color: #888888;
}

.inspector_color_input_wrapper input[type="color"] {
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  padding: 0; margin: 0;
  opacity: 0;
  cursor: pointer;
}

.color_presets_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  gap: var(--spacing-sm);
  margin-top: 5px;
  width: 100%;
  box-sizing: border-box;
}

.color_preset_btn {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color-light);
  cursor: pointer;
  padding: 0;
}

.color_preset_btn:hover {
  transform: scale(1.1);
  border-color: #999;
  z-index: 1;
}

.inspector_hint_text {
  font-size: 10px;
  color: #999;
  margin-top: 5px;
  line-height: 1.3;
}

.inspector_preview_wrapper {
  display: flex;
  flex-direction: row; 
  align-items: center;  
  justify-content: center;
  width: 100%;
}

.inspector_preview_icon {
  width: 2vw;         
  height: 2vw;
  object-fit: contain;      
  margin-right: 1vw; 
}

/* Container für den Slider - zentriert zwischen Hose und Breadcrumb */
.zoom_slider_wrapper {
  width: 80%;
  margin-bottom: 2.5vw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  color: var(--text-color-dark);
  font-weight: 600;
}

/* Der Schieberegler selbst */
.zoom_range {
  -webkit-appearance: none;
  appearance: none;
  width: 200px;
  height: 4px;
  background: var(--border-color-input);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

/* Regler-Knopf (Chrome/Safari/Edge) */
.zoom_range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-color-dark);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: transform 0.1s;
}

.zoom_range::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* Regler-Knopf (Firefox) */
.zoom_range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-color-dark);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Prozentanzeige */
#zoom_value_display {
  min-width: 40px;
  text-align: left;
  font-variant-numeric: tabular-nums; /* Verhindert das Wackeln der Zahlen */
}

/* Sicherheitshalber alte Klasse verstecken, falls Reste übrig bleiben */
.zoom_control {
  display: none !important;
}

/* Inspector Shapes */
.inspector_row_shape {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5vw;
}

/* Shape cap row (shown only for line/curve) */
#shape_cap_row.hidden {
  display: none !important;
}

.inspector_group input[type="number"] {
  width: 3vw;
}

.inspector_row_transform img[alt="text_rotation"],
.inspector_row_transform img[alt="img_rotation"],
.inspector_row_transform img[alt="shape_rotation"] {
  width: 1.823vw;
  height: 1.823vw;
  flex: 0 0 auto;
}

#text_outline_width {
  margin-top: 10px;
}

#shape_outline_width {
  margin-top: 10px;
}

/* Shape cap buttons (3-piece segmented control) */
.shape_cap_btn_group {
  display: flex;
  width: 50%;
  border: 1px solid black;
  border-radius: 8px;
  overflow: hidden;
  margin-left: 8px;
}

.shape_cap_btn {
  flex: 1 1 0;
  height: 40px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 0;
  border-right: #000 solid 1px;
  border-color: black;
}

#cap_btn_right {
  border-right: none;
}

.shape_cap_btn + .shape_cap_btn {
  border-left: 1px solid var(--border-color-input);
}

.shape_cap_btn svg {
  width: 1.823vw;
  height: 1.823vw;
  display: block;
}

/* =========================================
   iPad / Tablet Layout (Portrait & Split)
   ========================================= */

@media screen and (max-width: 1500px) {

  /* 1. Hauptcontainer – Preview takes full viewport, editor overlays */
  .main {
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
  }

  /* 2. Preview Bereich – full viewport */
  .section_product_preview {
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    flex: 0 0 100vh;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    padding-top: 1vh;
    padding-bottom: 0;
    border-bottom: none;
    box-sizing: border-box;
  }

  /* Header + Zoom */
  .preview_header,
  .zoom_slider_wrapper {
    flex: 0 0 auto;
    margin-top: 0.25vh;
    margin-bottom: 0.25vh;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .section_product_preview > .breadcrumb {
    display: none;
  }

  .preview_header {
    margin-top: 0;
  }

  .workarea {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .stage {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  /* DAS PRODUKT BLEIBT OBEN.
     `align-self: flex-start` allein genuegte nicht: die Grundregel setzt
     `#c { margin: auto }`, und ein Aussenabstand `auto` schlaegt in einem
     Flex-Container die Ausrichtung - er verteilt den freien Platz gleich auf
     beide Seiten, `align-self` bleibt wirkungslos. Sobald der Stage hoeher
     ist als das Canvas breit - also auf jedem Handy, denn das Canvas ist
     quadratisch - stand das Produkt dadurch in der Mitte des Stage und lag
     zum groessten Teil hinter dem Editor.
     Gemessen bei 390x844: 143px Abstand oben, Canvas ab y=279, Editor ab
     y=422 - sichtbar waren 143 von 390px. Jetzt beginnt es bei y=83.
     `0 auto` behaelt die waagerechte Zentrierung und gibt die senkrechte
     Ausrichtung an `align-self` zurueck. */
  #c {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    align-self: flex-start;
    margin: 0 auto;
  }

  /* 3. Editor als verschiebbares Overlay */
  .section_editor {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    top: auto;
    height: 50vh;
    max-height: 75vh;

    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    padding-top: 10px;
    padding-bottom: 40px;
    background: var(--bg-color-main);
    border-top: 1px solid var(--border-color-light);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    border-radius: 16px 16px 0 0;
    z-index: 100;
    /* allow vertical scrolling inside editor on touch devices */
    touch-action: pan-y;
  }

  /* Drag handle */
  .editor_drag_handle {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 8px 0 6px;
    cursor: grab;
    user-select: none;
    touch-action: none;
  }

  .editor_drag_handle_bar {
    width: 30px;
    height: 3px;
    border-radius: 99px;
    background: rgba(82, 111, 255, 0.45);
    margin: 0;
  }

  /* Inhalt zentrieren */
  .section_editor > * {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .editor_header {
    margin-top: 0;
    margin-bottom: 25px;
  }

  .editor_body {
    height: auto;
    min-height: auto;
    margin-bottom: 40px;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4%;
  }

  .editor_left,
  .editor_right {
    width: 48%;
    margin-top: 0;
  }

  .zones {
    width: 100%;
    margin-bottom: 15px;
  }

  .editor_bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Hier teilen sich Breadcrumb und DREI Knoepfe eine Zeile (seit dem
       Tutorial-Knopf). Wird es zwischen 768 und 1500 px eng, sollen die
       Knoepfe umbrechen statt aus dem Editor zu laufen. */
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 20px;
    padding-bottom: 24px;
    margin-bottom: 0;
  }

  .breadcrumb_editor {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1 1 auto;
    width: auto;
    margin: 0;
    font-size: 14px !important;
    gap: 6px;
  }

  .breadcrumb_editor a,
  .breadcrumb_editor .breadcrumb_sep,
  .breadcrumb_editor .breadcrumb_current {
    font-size: 1em !important;
  }

  #inspector_color {
    font-size: 15.63px !important;
  }

  .inspector_preview_icon{
    width: 30px !important;
    height: 30px !important;
  }

  body button{
    font-size: 19.53px !important;
  }

  body h1 {
    font-size: 46.875px !important;
  }

  body h2{
    font-size: 31.245px !important;
  }

  .breadcrumb {
    font-size: 15px !important;
  }

  :root {
    --font-size-base: 15.63px;
    --font-size-small: 15.63px;
    --font-size-label: 15.63px;
  }

  .price_label {
    font-size: 13.5px !important;
  }
  .price_total_label {
    font-size: 13.5px !important;
  }
  .price_value {
    font-size: 13.5px !important;
  }
  .price_total_value {
    font-size: 13.5px !important;
  }

  .icon_btn img {
    width: 27.345px !important;
    height: 27.345px !important;;
  }

  .inspector_label {
    font-size: 9.375px !important;
  }

  .inspector_group input[type="number"] {
    width: 37.5px;
  }

  .inspector_row_order button {
    width: 120px;
  }

  .image_dropzone {
    height: 135px;
  }

  .image_library {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 12px;
  }
  
  .image_library .logo-meta {
    font-size: 11px;
    height: 28px;
    line-height: 28px;
  }
}

/* =========================================
   Smartphone Layout (< 768px)
   Inspector als Karte UNTER der Zone
   ========================================= */

@media screen and (max-width: 768px) {

  /* Oben stehen nur 35vh zur Verfuegung: den Hinweis kompakter setzen - der
     reservierte Streifen rechnet sich aus der Schriftgroesse und schrumpft
     dadurch mit. */
  :root {
    --stage-hint-font: 12px;
  }
  .area_pick_hint,
  .insert_warning {
    padding: 6px 10px;
  }

  /* --- Grundlayout --- */
  .main {
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
  }

  /* --- Preview (Oben) --- */
  .section_product_preview {
    width: 100%;
    height: 35vh; /* Fixe Höhe oben */
    flex: 0 0 auto;
    border-bottom: 1px solid #e0e0e0;
    z-index: 10;
    padding-bottom: 5px;
  }
  
  /* Header etwas kompakter */
  .product_info h1 { font-size: 22px; }
  .product_info h2 { font-size: 14px; }
  .preview_header { margin-top: 5px; margin-bottom: 5px; }
  .breadcrumb { display: none; } /* Spart Platz */

  /* --- Editor (Unten, Scrollbar) --- */
  .section_editor {
    width: 100%;
    flex: 1; /* Füllt den Rest */
    height: auto;
    overflow-y: auto; /* Scrollbar für den ganzen unteren Bereich */
    background: #fdfdfd; 
    /* NACH DEN KNOEPFEN IST SCHLUSS.
       Hier standen 100px, dazu kamen 40px aus `.editor_bottom` - unter dem
       Continue-Knopf lagen also 140px Nichts, durch die man erst einmal
       scrollen musste. Jetzt sind es 28px: genug, dass der Knopf nicht an
       der Kante klebt, und wenig genug, dass die Liste dort sichtbar endet.

       `env(safe-area-inset-bottom)` kommt dazu, weil der Editor als Overlay
       auf `bottom: 0` sitzt. Auf einem iPhone mit Gestenleiste liegt diese
       Kante unter der Leiste; ohne den Zuschlag waere der letzte Knopf dort
       halb verdeckt. Auf Geraeten ohne Leiste ist der Wert 0. */
    padding: 20px 0 calc(28px + env(safe-area-inset-bottom, 0px)) 0;
    display: block;
  }

  .editor_body {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 90%;
    margin: 0 auto;
  }

  .editor_left {
    width: 100%;
    order: 1; /* Links/Zonen zuerst */
  }

  /* Der ursprüngliche Container rechts wird ausgeblendet, 
     da wir den Inhalt (#inspector) per JS verschieben */
  .editor_right {
    display: none; 
  }

  /* --- Styling der Karten --- */

  /* 1. Labels */
  .lbl {
    color: #526fff;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 8px;
    margin-top: 25px;
    padding-left: 5px;
    letter-spacing: 0.5px;
  }

  .zone_head {
    width: 100%;
    padding-right: 5px;
  }

  .zone_switch {
    font-size: 12px;
  }
  .zone_note {
    width: 100%;
    padding: 0 5px;
    font-size: 12px;
    margin-top: 4px;
  }

  /* 2. Zonen Buttons Karte */
  .zones {
    background: #ffffff;
    border-radius: 25px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); /* Dezent */
    border: 1px solid #f0f0f0;
    padding: 15px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 5px;
  }
  
  .zones button {
    border-radius: 50px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid #333;
    background: white;
    color: black;
  }

  .zones button.inspector_mode_active {
    background: black;
    color: white;
  }

  /* Hier ist .zones flex statt Raster: ein einzelner Button steht durch
     justify-content:center ohnehin mittig und behaelt seine natuerliche
     Breite. Die Rasterbreite aus dem Desktop-Layout wuerde ihn hier nur
     unnoetig aufblasen. */
  .zone_controls.zone_collapsed .zones.zones_single button {
    width: auto;
  }

  /* 3. INSPECTOR KARTE (Das neue Styling) */
  #inspector {
    display: block;
    background: #ffffff;
    border-radius: 25px;
    /* Der blaue Glow-Schatten wie im Screenshot */
    box-shadow: 0 10px 40px -5px rgba(82, 110, 250, 0.3);
    border: 1px solid rgba(82, 110, 250, 0.1);
    
    margin-top: 15px; /* Abstand zur Button-Karte */
    margin-bottom: 10px;
    padding: 20px;
    width: 100%;
    
    animation: slideIn 0.25s ease-out forwards;
  }
  
  /* Inhalt im Inspector aufräumen */
  .inspector_section_title {
    font-size: 14px;
    margin-bottom: 15px;
    text-transform: uppercase;
    color: #333;
  }
  
  #inspector_empty {
    display: none !important; /* "Notice" ausblenden */
  }

  /* Bottom Action Bar */
  .editor_bottom {
    margin-top: 40px;
    justify-content: center;
    /* Kein eigener Abstand mehr nach unten - der eine Rest Luft kommt aus
       dem Innenabstand von `.section_editor` und wird dort in einem Wert
       gepflegt. Zwei Abstaende uebereinander waren der Grund, warum unter
       den Knoepfen 140px standen. */
    padding-bottom: 0;
  }
  
  /* Seit dem Tutorial-Knopf stehen hier DREI Knoepfe. Feste 48 % gingen dann
     nicht mehr auf (3 x 48 % + Abstaende > 100 %), deshalb teilen sie sich die
     Zeile zu gleichen Teilen. Bleibt auch mit zwei Knoepfen richtig, falls das
     Tutorial ueber TUTORIAL_ENABLED abgeschaltet wird. */
  #save_btn, #fwd_btn, #tutorial_btn {
    padding: 15px 10px;
    font-size: 16px;
    border-radius: 50px;
    flex: 1 1 0;
    min-width: 0;
  }

  body button{
    font-size: 10px !important;
    padding: 2px 15px;
  }

  body h1 {
    font-size: 35px !important;
  }

  body h2{
    font-size: 25px !important;
  }

  .image_library {
    /* Kleinere Kacheln, damit mehr nebeneinander passen (z.B. 4 Stück) */
    grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
    gap: 8px;
  }
  
  .image_library .logo-thumb img {
    /* Fix für sehr kleine Screens in style.css Zeile 1288 überschreiben */
    width: 100% !important; 
  }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   TUTORIAL — der gefuehrte Rundgang (tutorial.js)

   Aufbau der Anzeige: vier Blenden legen sich um das Zielelement und lassen
   es als Loch frei, ein Ring in der Akzentfarbe umrandet das Loch, und die
   Karte steht mit einem Pfeil daneben. Die Blenden nehmen Klicks an (und
   schlucken sie damit) — nur das hervorgehobene Element und die Karte selbst
   bleiben bedienbar. Der Ring ist deshalb pointer-events:none, sonst laege er
   ueber dem Rand des Zielelements.

   z-index: ueber dem Editor-Overlay (100 ab <=1500px), aber unter den beiden
   Notfall-Dialogen des Konfigurators (99999 "No product selected", 100002
   Coming-Soon) — die haben immer Vorrang.
   ========================================================================== */

.tutorial_shade {
  position: fixed;
  background: rgba(12, 18, 40, 0.55);
  z-index: 9000;
}

.tutorial_ring {
  position: fixed;
  border: 3px solid var(--acent-color);
  border-radius: var(--radius-sm);
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(82, 111, 255, 0.25);
  z-index: 9001;
  transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease;
}

.tutorial_ring.is_empty { display: none; }

.tutorial_card {
  position: fixed;
  z-index: 9010;
  width: min(420px, calc(100vw - 32px));
  /* Im Querformat auf dem Handy bleiben keine 400 px Hoehe. Lieber in der
     Karte scrollen als unten aus dem Fenster laufen. */
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  box-sizing: border-box;
  background: var(--bg-color-main);
  border-radius: 14px;
  box-shadow: 0 14px 44px rgba(10, 18, 40, 0.34);
  padding: 16px 18px 14px;
  /* Bewusst NICHT die Schriftgroessen-Variablen des Konfigurators: die
     skalieren mit 1.042vw und wuerden die Karte auf einem breiten Monitor
     auseinanderziehen. Der Rundgang soll ueberall gleich lesbar sein. */
  font-family: system-ui, Arial, sans-serif;
  color: var(--text-color-primary);
  transition: top .2s ease, left .2s ease;
}

/* --- Schrittleiste: ein Segment je Schritt, in der Akzentfarbe ------------
   Das laufende Segment fuellt sich anteilig mit den Phasen des Schritts —
   sonst stuende die Leiste bei mehrteiligen Schritten (Farbe, Text, Form)
   ueber mehrere Karten hinweg still. */

.tutorial_steps {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}

.tutorial_step {
  flex: 1 1 0;
  height: 4px;
  border-radius: 4px;
  background: #dfe3ee;
  overflow: hidden;
}

.tutorial_step i {
  display: block;
  height: 100%;
  background: var(--acent-color);
  transition: width .2s ease;
}

.tutorial_step.is_done i { width: 100% !important; }

.tutorial_step.is_current {
  /* Der laufende Schritt ist auch ohne Fuellung erkennbar. */
  box-shadow: 0 0 0 1px rgba(82, 111, 255, 0.45);
}

/* --- Kopfzeile ----------------------------------------------------------- */

.tutorial_card .tutorial_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 11.5px;
  color: #6b7280;
}

.tutorial_card .tutorial_section {
  background: #eef1ff;
  color: #2b3a8f;
  border-radius: 20px;
  padding: 2px 10px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.tutorial_card .tutorial_count { white-space: nowrap; }

/* --- Inhalt -------------------------------------------------------------- */

.tutorial_card h3 {
  margin: 0 0 7px;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--text-color-dark);
  text-transform: none;
}

.tutorial_card .tutorial_text {
  font-size: 13.5px;
  line-height: 1.55;
}

.tutorial_card .tutorial_text b { font-weight: 700; }

/* Der Handgriff. `is_action` heisst: hier wartet der Rundgang auf den Kunden —
   deshalb die Akzentfarbe am Rand, sonst ruhig grau. */
.tutorial_card .tutorial_do {
  margin-top: 10px;
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  background: #f4f5f8;
  border-left: 3px solid #d3d7e2;
  font-size: 12.8px;
  line-height: 1.45;
  color: #3b4252;
}

.tutorial_card .tutorial_do.is_action {
  background: #eef1ff;
  border-left-color: var(--acent-color);
  color: #2b3a8f;
}

.tutorial_card .tutorial_do b { font-weight: 700; }

/* --- Fusszeile ----------------------------------------------------------- */

.tutorial_card .tutorial_foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e3e6ee;
}

.tutorial_card .tutorial_gap { flex: 1; }

/* Eigene Knopf-Regeln statt der globalen aus `body button`: die sind auf die
   Editor-Knoepfe zugeschnitten (Grossbuchstaben, 1.302vw, 30px Polster) und
   sprengten die Karte. */
.tutorial_card .tutorial_next {
  background: var(--acent-color);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  padding: 7px 20px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

.tutorial_card .tutorial_next:hover { filter: brightness(1.08); }

.tutorial_card .tutorial_skip {
  background: none;
  border: 0;
  padding: 6px 2px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: #6b7280;
  text-decoration: underline;
  cursor: pointer;
}

.tutorial_card .tutorial_skip:hover { color: var(--text-color-primary); }

/* --- Pfeil zum hervorgehobenen Element ----------------------------------- */

.tutorial_card::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--bg-color-main);
  transform: rotate(45deg);
  display: none;
}

.tutorial_card[data-arrow="top"]::before    { display: block; top: -6px;    left: 28px; }
.tutorial_card[data-arrow="bottom"]::before { display: block; bottom: -6px; left: 28px; }
.tutorial_card[data-arrow="left"]::before   { display: block; left: -6px;   top: 24px; }
.tutorial_card[data-arrow="right"]::before  { display: block; right: -6px;  top: 24px; }

/* Gescrollt werden darf weiter — Scheinwerfer und Karte laufen mit. Ein
   gesperrtes Fenster machte den Editor unter 1500px unerreichbar, der ist
   dort ein eigenes Scrollfeld. */
body.tutorial_running { scroll-behavior: smooth; }

@media screen and (max-width: 768px) {
  .tutorial_card {
    width: calc(100vw - 20px);
    padding: 13px 14px 12px;
  }

  .tutorial_card h3 { font-size: 15.5px; }
  .tutorial_card .tutorial_text { font-size: 12.5px; }
  .tutorial_card .tutorial_do { font-size: 12px; }

  /* Auf schmalen Geraeten sind zehn Segmente je 2-3 Pixel breit und nicht
     mehr zu unterscheiden — dann zaehlt nur noch die Fuellung. */
  .tutorial_steps { gap: 3px; }
  .tutorial_step { height: 3px; }
}