/* Screenshot-Style */
:root {
  --sg-green: #A81212;
  /* Screenshot Grün */
  --sg-green-dark: #770d0d;
  --sg-gray: #f2f2f2;
  --sg-line: #d8d8d8;
  --sg-text: #1f2937;
  --sg-muted: #6b7280;
}

/* Feste Arbeitsbreite am Desktop; darunter nimmt der Gestalter die volle
   Breite (siehe modal-fullscreen-md-down am Dialog). */
#designer-modal {
  width: 100%;
  max-width: unset;
}

@media (min-width: 992px) {
  #designer-modal {
    width: 1300px;
    max-width: calc(100% - 2rem);
    margin-left: auto;
    margin-right: auto;
  }
}

/* Eingebettet in die Artikelseite (<iframe>) soll NUR der Gestalter-Kasten
   sichtbar sein, davor der abgedunkelte Hintergrund des Overlays. Ohne
   durchsichtigen Untergrund läge um den Kasten noch die eigene Seitenfläche
   des iframes – zwei ineinander liegende Kästen. */
body.sg-eingebettet {
  background: transparent !important;
}

.fontInactive {
  opacity: 0.5;
}

/* Erzwingt, dass das Modal immer ganz oben liegt */
.modal {
  z-index: 10050 !important;
}

.modal-backdrop {
  z-index: 10040 !important;
}

#designCanvas {
  cursor: default;
  /* Standardwert */
}

#designCanvas {
  pointer-events: auto !important;
  position: relative;
  z-index: 10;
}

.sg-modal {
  border-radius: 0;
}

@media (min-width: 992px) {
  .sg-modal {
    border-radius: 10px;
    /* NICHT durch reines "overflow: hidden" ersetzen: Das macht .sg-modal
       zu einem Scroll-Container-Kandidaten (auch ohne selbst je zu
       scrollen) und bricht damit position:sticky bei .sg-preview-wrap
       weiter unten – die Vorschau lief beim Scrollen einfach mit weg,
       statt oben stehen zu bleiben. "overflow: clip" schneidet die Ecken
       genauso auf den Radius zu, erzeugt aber keinen Scroll-Container.
       "hidden" bleibt als Fallback für Browser ohne "overflow: clip"
       stehen, wird von "clip" in allen aktuellen Browsern aber
       überschrieben (gleiches Muster wie beim Sticky-Header-Fix im Theme
       stempelgigant). */
    overflow: hidden;
    overflow: clip;
    /* Hebt den Kasten vom abgedunkelten Overlay der Artikelseite ab. */
    box-shadow: 0 30px 80px rgba(2, 6, 23, .35);
  }
}

.sg-header {
  padding: 10px 14px;
  background: #fff;
  border-bottom: 1px solid var(--sg-line);
}

.sg-h-title {
  font-weight: 700;
  letter-spacing: .01em;
  font-size: 22px;
  color: #ffffff;
}

.sg-main {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 12px;
  padding: 12px;
  background: #fff;
}

@media (max-width: 991.98px) {
  .sg-main {
    grid-template-columns: 1fr;
  }
}

.sg-left {
  min-width: 0;
}

.sg-right {
  min-width: 0;
}

/* Kundenwunsch: Vorschau bleibt beim Scrollen oben stehen, statt mit den
   Bedienelementen darunter (Zeilentabelle, Rahmen/Logo/Cliparts/Schriften)
   mit nach unten zu wandern – gerade bei großen Stempeln mit vielen Zeilen
   praktisch.
   position:sticky braucht dafür eine tatsächlich scrollende Umgebung IM
   SELBEN Dokument. Als eigenständige Seite (z. B. "Bearbeiten" aus dem
   Warenkorb, per direktem Link) ist das der Fall – dort greift es normal.
   Im als <iframe> eingebetteten Aufruf von der Artikelseite (siehe
   .sg-overlay in assets/css/style.css sowie
   assets/designer/hoehe_melden.js: der Gestalter wächst dort bewusst mit
   seinem Inhalt statt selbst zu scrollen, gescrollt wird nur das äußere
   Overlay) kann Sticky die Dokumentgrenze des iframes NICHT überwinden –
   dort bleibt der Effekt ohne weitere Änderung an diesem Zusammenspiel
   aus, unabhängig von dieser Regel hier. */
.sg-preview-wrap {
  border: 0;
  margin-bottom: 10px;
  position: sticky;
  top: 12px;
  z-index: 5;
  background: #fff;
}

/* Ruler Top */
.sg-ruler-top {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
}

.sg-mm {
  font-weight: 700;
  font-size: 11px;
  color: #111827;
  width: 46px;
  display: flex;
  justify-content: right;
}

.sg-ruler-strip {
  flex: 1;
  height: 18px;
  /*border-bottom:1px solid #000;*/
  position: relative;
  background:
    repeating-linear-gradient(to right,
      transparent 0px, transparent 9px,
      #000 9px, #000 10px,
      transparent 10px, transparent 49px,
      #000 49px, #000 50px);
}

/* Preview row */
.sg-preview-row {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 8px;
}

/* Ruler Left */
.sg-ruler-left {
  position: relative;
  /*Anpassung Linieal am Rand*/
  display: flex;
  justify-content: right;
}

.sg-ruler-strip-vert {
  width: 18px;
  height: 420px;
  /*border-right:1px solid #000;*/
  background:
    repeating-linear-gradient(to bottom,
      transparent 0px, transparent 9px,
      #000 9px, #000 10px,
      transparent 10px, transparent 49px,
      #000 49px, #000 50px);
}

.sg-preview-canvas {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent;
}

.sg-canvas-frame {
  width: 100%;
  height: 420px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
}

#stampCanvas {
  background: transparent !important;
  border: 0.5px solid #000;
  /* ultra-fein */
  display: block;
}

/* Controls under preview */
.sg-controls {
  display: flex;
  align-items: center;
  /*justify-content:space-between;*/
  gap: 10px;
  margin: 4px 0 12px 0;
}

.sg-zoom {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sg-zoom-val {
  width: 60px;
  text-align: center;
  background: #e9e9e9;
  border-radius: 2px;
  padding: 6px 8px;
  font-size: 12px;
  color: #333;
}

.sg-icons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sg-btn {
  border: 0;
  border-radius: 2px;
  height: 32px;
  padding: 0 10px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

.sg-btn-green {
  background: var(--sg-green);
  color: #fff;
}

.sg-btn-green:hover {
  background: var(--sg-green-dark);
}

.sg-btn-gray {
  background: #e9e9e9;
  color: #555;
}

/* Tabs like screenshot */
.sg-tabs {
  display: flex;
  align-items: flex-end;
  gap: 0;
  margin-top: 4px;
}

.sg-tab {
  border: 0;
  background: #e9e9e9;
  color: #333;
  font-weight: 700;
  padding: 10px 16px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  margin-right: 6px;
  cursor: pointer;
}

.sg-tab.active {
  background: var(--sg-green);
  color: #fff;
}

.sg-tabpanel {
  display: none;
  border-top: 0;
  border: 1px solid var(--sg-line);
  padding: 10px;
}

.sg-tabpanel.active {
  display: block;
}

/* toolbar above table */
.sg-toolbar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.sg-toolgroup {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sg-toollabel {
  font-size: 13px;
  color: #333;
}

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

.sg-mini {
  width: 28px;
  height: 24px;
  border: 1px solid #cfcfcf;
  background: #ededed;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  color: #444;
}

.sg-spacer {
  flex: 1;
}

/* switch on right */
.sg-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
}

.sg-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.sg-slider {
  position: absolute;
  inset: 0;
  background: #d1d5db;
  border-radius: 999px;
  transition: .15s;
}

.sg-slider:before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 2px;
  top: 2px;
  background: #fff;
  border-radius: 999px;
  transition: .15s;
}

.sg-switch input:checked+.sg-slider {
  background: var(--sg-green);
}

.sg-switch input:checked+.sg-slider:before {
  transform: translateX(22px);
}

/* Table like screenshot */
.sg-tablewrap {
  border-top: 0;
}

.sg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.sg-table thead th {
  background: var(--sg-green);
  color: #fff;
  padding: 8px 6px;
  border: 1px solid var(--sg-green-dark);
  font-weight: 700;
}

.sg-table td {
  border: 1px solid #d9d9d9;
  padding: 6px 6px;
  vertical-align: middle;
  background: #fff;
}

.sg-table .col-nr {
  width: 46px;
}

.sg-table .col-inhalt {
  width: 360px;
}

.sg-table .col-font {
  width: 130px;
}

.sg-table .col-size {
  width: 90px;
}

.sg-table .col-opt {
  width: 130px;
}

.sg-table .col-align {
  width: 130px;
}

.sg-table .col-width {
  width: 90px;
}

.sg-table .col-pos {
  width: 140px;
}

.sg-input {
  width: 100%;
  height: 22px;
  border: 1px solid #cfcfcf;
  background: #fff;
  padding: 0 6px;
}

/* Textfeld mit fest im Feld sitzendem Ω-Knopf für die Sonderzeichen
   (siehe zeichenFensterOeffnen() in assets/designer/js/zeichen.js). */
.sg-input-wrap {
  position: relative;
  display: block;
}

.sg-input-wrap .sg-input,
.sg-input-wrap .sg-input-acc {
  padding-right: 26px;
}

.sg-zeichen-btn {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 22px;
  border: 0;
  border-left: 1px solid #e3e3e3;
  background: #f6f6f6;
  color: #444;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  border-radius: 0 2px 2px 0;
}

.sg-zeichen-btn:hover {
  background: var(--sg-green);
  color: #fff;
}

.sg-zeichen-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.sg-select {
  width: 100%;
  height: 22px;
  border: 1px solid #cfcfcf;
  background: #fff;
}

.sg-optbtns,
.sg-alignbtns,
.sg-posbtns {
  display: flex;
  gap: 3px;
}

.sg-ic {
  width: 22px;
  height: 22px;
  border: 1px solid #cfcfcf;
  background: #ededed;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #444;
  cursor: pointer;
}

/* Aktiver Schalter in der Zeilentabelle. Bewusst als heller Anstrich der
   Shop-Akzentfarbe statt des früheren fest codierten Grüns aus dem
   Ursprungsprojekt – der Gestalter hat keine eigene Farbwelt. */
.sg-ic.active {
  background: #ececec;
  background: color-mix(in srgb, var(--sg-green) 14%, #fff);
  border-color: var(--sg-green);
  color: var(--sg-green-dark);
}

/* Gesperrt, solange die Zeile als Leerzeile geschaltet ist
   (siehe zeilen_ui.js, syncLeer()). */
.sg-ic:disabled,
.sg-select:disabled,
.sg-input:disabled {
  opacity: .45;
  cursor: not-allowed;
  background: #f3f3f3;
}

/* Schalter "LEER" – etwas breiter als die Icon-Buttons, da beschriftet. */
.sg-ic.sg-leer {
  width: auto;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}

.sg-addline {
  margin-top: 10px;
  border: 0;
  background: transparent;
  color: #6b7280;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sg-plus {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: var(--sg-green);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

.sg-warn {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #f59e0b55;
  background: #f59e0b22;
  color: #92400e;
  font-size: 12px;
}

/* Right product box like screenshot */
/* ---- Produktbox (rechte Spalte) --------------------------------------
   Aufbau wie auf der Artikelseite: Kopf mit Name und Abdruckmaß, darunter
   Artikelbild und Preis nebeneinander, die Eigenschaften zweispaltig, dann
   Bestätigung und Kaufknopf. Alle Farben kommen aus der Akzentfarbe des
   Shops (--sg-green, siehe includes/gestalten_designer_view.php) – der
   Gestalter hat bewusst keine eigene Farbwelt. */
.sg-productbox {
  background: #fff;
  border: 1px solid var(--sg-line);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
}

.sg-prod-head {
  padding: 14px 16px;
  background: var(--sg-gray);
  border-bottom: 1px solid var(--sg-line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.sg-prod-title {
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--sg-text);
}

.sg-prod-size {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--sg-muted);
}

.sg-prod-body {
  padding: 16px;
}

/* Bild links, Preis rechts – der Preis darf umbrechen, das Bild nicht. */
.sg-prod-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.sg-prod-imgwrap {
  background: #fff;
  border: 1px solid var(--sg-line);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: none;
  width: 140px;
  height: 140px;
}

.sg-prod-imgwrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.sg-price {
  text-align: right;
  min-width: 0;
  flex: 1 1 auto;
}

/* nowrap: Ein vierstelliger Betrag würde in der schmalen Spalte sonst
   umbrechen ("1.234,\n56 €"). Lieber etwas kleiner als zweizeilig. */
.sg-price-val {
  font-size: 28px;
  font-weight: 800;
  color: var(--sg-green);
  line-height: 1.05;
  white-space: nowrap;
}

.sg-price-sub {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--sg-muted);
  text-transform: uppercase;
  margin-top: 4px;
  line-height: 1.35;
}

.sg-price-sub a {
  color: var(--sg-muted);
  text-decoration: underline;
}

.sg-price-sub a:hover {
  color: var(--sg-green);
}

/* UNTEREINANDER, nicht nebeneinander (Kundenwunsch): Gehäusefarbe und
   Abdruckfarbe standen in zwei Spalten. In der schmalen Spalte des
   Gestalters blieb je Feld so wenig Platz, dass die längeren
   Bezeichnungen ("Eco Schwarz") abgeschnitten wurden und die beiden
   Angaben schwer auseinanderzuhalten waren – ausgerechnet bei dem, was
   der Kunde hier sicher erkennen muss.

   Die breite Fassung macht es längst so (siehe .nt-right .sg-opts in
   assets/designer/designer-breit.css); damit sehen jetzt beide
   Fassungen gleich aus. */
.sg-opts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0 0 14px;
}

.sg-opt label {
  font-size: 13px;
  color: var(--sg-text);
  font-weight: 700;
  margin-bottom: 5px;
  display: block;
}

.sg-opt select {
  width: 100%;
}

/* Beim Nachbessern einer bereits BESTELLTEN Gestaltung steht die Variante
   fest und wird nur noch angezeigt (siehe renderEigenschaftenUI() in
   assets/designer/js/modell.js). Bewusst wie ein ruhiges Textfeld und NICHT
   wie ein ausgegrautes Auswahlfeld: Ein gesperrtes Bedienelement sieht nach
   einem Fehler aus, eine Angabe nach einer Angabe. */
.sg-opt-fest {
  font-size: 14px;
  color: var(--sg-text);
  background: #f4f5f6;
  border: 1px solid var(--sg-line);
  border-radius: 6px;
  padding: 7px 10px;
}

.sg-opt-hinweis {
  grid-column: 1 / -1;
  margin: -4px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--sg-muted);
}

.sg-modellwechsel {
  margin-bottom: 14px;
}

.sg-modellwechsel p {
  font-size: 11px;
  line-height: 1.4;
  color: var(--sg-muted);
  margin: 6px 0 0;
}

.sg-prod-note {
  font-size: 12px;
  line-height: 1.45;
  color: var(--sg-muted);
  border-left: 3px solid var(--sg-line);
  padding-left: 10px;
  margin: 0 0 12px;
}

.sg-prod-note b {
  color: var(--sg-text);
}

.sg-check {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: var(--sg-green);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 12px 0;
  cursor: pointer;
}

.sg-check input {
  width: 22px;
  height: 22px;
  flex: none;
  accent-color: var(--sg-green);
  cursor: pointer;
}

.sg-cartbtn {
  width: 100%;
  border: 0;
  border-radius: 8px;
  height: 50px;
  background: var(--sg-green);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: background .15s;
}

.sg-cartbtn:hover {
  background: var(--sg-green-dark);
}

.sg-arrow {
  font-size: 18px;
  line-height: 1;
}

.sg-print {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--sg-text);
  text-decoration: none;
}

.sg-print i {
  font-size: 18px;
  color: var(--sg-green);
}

.sg-print:hover {
  color: var(--sg-green);
}

.sg-print:hover {
  text-decoration: underline;
}

.sg-placeholder {
  padding: 18px;
  color: #666;
  background: #fafafa;
  border: 1px dashed #ddd;
}

/* --- Feinheiten: Modal/Preview darf mit Zoom wachsen --- */
/* Hinweis: Das frühere max-height:100vh an dieser Stelle ist entfernt – der
   Gestalter ist so hoch wie sein Inhalt und würde dadurch beschnitten
   (siehe "Kein Scrollen INNERHALB des Gestalters" weiter oben). */

.sg-main {
  align-items: start;
}

/* Preview-Höhe dynamisch über CSS-Var */
:root {
  --preview-h: 420px;
  --ruler-w: 46px;
}

/* linkes Lineal + obere mm-Leiste: dünn wie Screenshot */
.sg-ruler-strip {
  height: 18px;
  /*border-bottom: 1px solid #000;*/
  background: transparent;
}

.sg-ruler-strip-vert {
  width: 18px;
  /*border-right: 1px solid #000;*/
  background: transparent;
  height: var(--preview-h);
}

/* Canvas-Frame wächst mit */
.sg-canvas-frame {
  height: var(--preview-h);
}

/* Wenn Zoom hoch: mehr Platz für Vorschau */
.sg-preview-row {
  align-items: start;
}

.sg-preview-canvas {
  overflow: visible;
}

.sg-canvas-frame {
  overflow: visible;
}

/* ---- Kein Scrollen INNERHALB des Gestalters --------------------------
   Der Gestalter liegt in einem Bootstrap-Modal, und das bringt von Haus
   aus zwei eigene Scrollflächen mit: das Modal-Element selbst
   (position:fixed; overflow-y:auto) und den Modal-Body. Zusammen mit dem
   Fenster ergab das drei ineinander liegende Bildlaufleisten – der Kunde
   scrollte mal den Gestalter, mal den abgedunkelten Hintergrund.
   Stattdessen fließt der Gestalter jetzt ganz normal im Dokument: Er ist
   so hoch wie sein Inhalt, gescrollt wird nur außen (die Seite bzw. das
   Overlay der Artikelseite, siehe .sg-overlay in assets/css/style.css).
   Ausnahme bleibt .sg-preview-canvas – dort ist die Bildlaufleiste
   gewollt, wenn der Kunde über die Passgröße hinaus hineinzoomt. */
#designerModal.modal {
  position: static;
  overflow: visible;
  padding: 0 !important;
}

#designerModal .modal-body {
  overflow: visible;
  min-height: 0;
}

/* Bootstrap sperrt bei geöffnetem Modal das Scrollen des Dokuments und
   gleicht die verschwundene Bildlaufleiste mit padding-right aus – beides
   ist hier falsch, da genau dieses Dokument scrollen soll. */
body.modal-open {
  overflow: visible !important;
  padding-right: 0 !important;
}

/* Wird ein zweites Fenster ÜBER dem Gestalter geschlossen (Schriftwahl,
   Farbwahl, Hinweise …), nimmt Bootstrap "modal-open" vom body, stellt aber
   die beim Öffnen gemerkte Sperre overflow:hidden als Inline-Stil wieder
   her – der Gestalter ist ja noch offen. Als eigene Seite (Vorlagen-Modus,
   Bearbeiten aus dem Warenkorb) ließ sie sich danach nicht mehr scrollen.
   Im iframe der Artikelseite fiel das nicht auf, dort scrollt das Overlay. */
body:has(#designerModal.show) {
  overflow: visible !important;
  padding-right: 0 !important;
}

/* Vorlagen-Modus (admin/designer_vorlage_gestalten.php) wie im Shop: Die
   Vorschau scrollt mit. Im Shop läuft der Gestalter im iframe, wo Sticky
   ohnehin nicht greift (siehe .sg-preview-wrap oben); als eigene Seite klebte
   die Vorschau oben und schob sich über die Fenster darüber. */
body.sg-vorlagenmodus .sg-preview-wrap {
  position: static;
}

.sg-preview-canvas {
  overflow: hidden;
  /* wichtig: nichts darf unter die Produktbox rutschen */
}

.sg-canvas-frame {
  width: 100%;
  height: var(--preview-h);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

/* Wir skalieren das Canvas per transform, nicht über Canvas-Pixel */
.sg-canvas-frame canvas {
  transform-origin: top left;
}


.sg-btn-close {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #ffffff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  text-decoration: none;
  transition: all .15s ease;
  position: absolute;
  top: 1vh;
  right: 1vw;
}

.sg-btn-close:hover {
  background: #f2f2f2;
  color: #000;
}

/* Nur Desktop anzeigen */
/*@media (max-width: 991.98px){
  .sg-btn-close{
    display: none;
  }
}*/

/* Hinweis: Die frühere zweite .sg-check-Definition an dieser Stelle
   (25px-Kästchen, 1rem-Text) ist entfernt – sie überschrieb als spätere
   Regel stillschweigend die Angaben weiter oben, sodass Änderungen dort
   wirkungslos blieben. Die Größen stehen jetzt nur noch bei .sg-check
   selbst (mobil abweichend in designer-mobile.css). */

.sg-opts-toggle i {
  display: inline-block;
  transition: transform .18s ease;
}

.sg-opts-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

#warnBoxa {
  background: #fdf2f2;
  /* Sehr helles Rot/Rosa */
  color: #8628dd;
  /* Dunkles Weinrot */
  font-weight: 600;
  padding: 12px 20px;
  border: 1.5px solid #f8b4b4;
  border-radius: 6px;
  text-align: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  margin: 15px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
}

#warnBox {
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  padding: 4px 12px;
  background: #ff0000;
  border: 2px solid #000000;
  border-radius: 0px;
  box-sizing: border-box;
  text-align: center;
  text-transform: uppercase;
  animation: pulseWarn 1.5s infinite;
}

@keyframes pulseWarn {
  0% {
    transform: scale(1);
    background: #ff0000;
  }

  50% {
    transform: scale(0.98);
    background: #cc0000;
  }

  100% {
    transform: scale(1);
    background: #ff0000;
  }
}

/* Ein dezenter Rahmen für das Canvas */
.canvas-alarm {
  outline: 3px solid #f8b4b4 !important;
  outline-offset: 2px;
  transition: outline 0.3s ease;
}

#infoBoxLogo,
#infoBoxClipart {
  background: #eef6ff;
  /* Hellblau */
  color: #1e40af;
  /* Dunkelblau */
  font-weight: 500;
  padding: 10px 15px;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  text-align: left;
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
/* ---------- QR-Code-Reiter (siehe assets/designer/js/qr.js) ----------
   Zwei Spalten: links die Eingabe, rechts Vorschau und die laufende
   Rückmeldung zur Größe. Die Rückmeldung steht bewusst neben dem Formular
   und nicht darunter: Sie ändert sich bei jedem Tastendruck, und unterhalb
   der Felder würde sie beim Ausfüllen aus dem Sichtbaren rutschen. */
/* Einspaltig, solange kein Code eingefügt ist – sonst bliebe rechts eine
   leere Spalte stehen. .hat-steuerung setzt grafikSteuerungAktualisieren()
   (assets/designer/js/grafik.js), dieselbe Mechanik wie im Clipart-Reiter. */
.qr-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.qr-panel.hat-steuerung {
  grid-template-columns: minmax(0, 1fr) 260px;
}

/* Vorschau und Rückmeldung unter der Eingabe: das Bild links, der Text
   daneben. Umbruch auf schmalen Flächen, damit die Vorschau nicht auf
   Briefmarkengröße gequetscht wird. */
.qr-ergebnis {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #dee2e6;
}

.qr-ergebnis-text {
  flex: 1 1 260px;
  min-width: 0;
}

.qr-arten {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.qr-art {
  border: 1px solid #ced4da;
  background: #fff;
  border-radius: 4px;
  padding: 7px 14px;
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
}

.qr-art:hover { background: #f1f3f5; }

.qr-art.aktiv {
  background: #2f6f3e;
  border-color: #2f6f3e;
  color: #fff;
}

.qr-erklaerung {
  font-size: .84rem;
  color: #5a6169;
  margin: 0 0 12px;
}

.qr-felder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}

.qr-feld { display: flex; flex-direction: column; gap: 3px; }
.qr-feld-breit { grid-column: 1 / -1; }
.qr-feld-schmal { max-width: 260px; margin-top: 14px; }

.qr-feld label {
  font-size: .8rem;
  color: #3d4348;
}

.qr-feld input,
.qr-feld textarea,
.qr-feld select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #ced4da;
  border-radius: 3px;
  font: inherit;
  font-size: .9rem;
}

#qrEinfuegen { margin-top: 18px; }
#qrEinfuegen:disabled { opacity: .5; cursor: not-allowed; }

.qr-vorschau {
  flex: 0 0 auto;
  min-height: 0;
}

/* Ohne Glättung: Ein QR-Code ist ein Pixelraster, weichgezeichnet sieht er
   im Kleinen aus, als wäre er unscharf gedruckt. */
.qr-vorschau img {
  width: 150px;
  height: auto;
  image-rendering: pixelated;
  border: 1px solid #dee2e6;
}

.qr-hinweis {
  border-radius: 4px;
  padding: 10px 12px;
  font-size: .85rem;
  line-height: 1.45;
}

.qr-hinweis-neutral { background: #f1f3f5; color: #495057; }
.qr-hinweis-ok      { background: #e9f7ef; color: #1e6b3a; border: 1px solid #bfe8cf; }
.qr-hinweis-fehler  { background: #fdecee; color: #a10c25; border: 1px solid #f6c4cb; }

.qr-detail {
  display: inline-block;
  margin-top: 4px;
  font-size: .78rem;
  opacity: .75;
}

.qr-fusshinweis {
  margin: 12px 0 0;
  font-size: .78rem;
  color: #5a6169;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .qr-panel,
  .qr-panel.hat-steuerung { grid-template-columns: minmax(0, 1fr); }
  .qr-felder { grid-template-columns: minmax(0, 1fr); }
}

/* Steuerung des eingefügten QR-Codes im QR-Reiter. Aufbau und Klassen
   stammen unverändert aus grafikPanelHtml() (assets/designer/js/grafik.js) –
   hier wird nur abgesetzt, damit sie nicht am Hinweistext klebt. */
.qr-steuerung {
  padding: 14px;
  background: #f8f9fa;
  border-radius: 4px;
}

/* Klick auf eine Textzeile in der Vorschau springt zu ihrem Eingabefeld
   (zeileAnKlickstelle() in js/zeilen_ui.js) – die Zeile leuchtet kurz auf. */
@keyframes sg-zeile-angesprungen {
  from { background-color: rgba(255, 193, 7, .35); }
  to { background-color: transparent; }
}
#linesTbody tr.sg-zeile-angesprungen > td {
  animation: sg-zeile-angesprungen 1.2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  #linesTbody tr.sg-zeile-angesprungen > td { animation: none; }
}

/* Mehrfarbige Stempel (js/mci.js): Farbknopf – die Auswahl selbst steht im
   Fenster "Farbe wählen" (Markup in includes/gestalten_designer_view.php). */
.sg-mci-knopf { display: inline-flex; align-items: center; justify-content: center; }
.sg-mci-feld {
  display: inline-block; width: 16px; height: 16px; border-radius: 50%;
  background: var(--mci-farbe, #000); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}
/* In der Zeilentabelle ist die Farbfläche breit, damit man die Farbe gut
   erkennt – neben Grafik und Rahmen bleibt der kleine runde Punkt. */
.sg-ic.sg-mci-knopf { width: 60px; }
.sg-mci-knopf .sg-mci-feld { flex: none; width: 48px; border-radius: 3px; }
.grafik-mci { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 13px; }

/* Invertieren-Knopf (js/zeilen_ui.js): weißes "A" auf dunkler Fläche –
   zeigt, was der Knopf macht. Aktiv: Fläche in der Akzentfarbe. */
.sg-inv-ic {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: #1f2937;
  font-size: 0;
}
.sg-inv-ic::before {
  content: "A";
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.sg-ic:has(.sg-inv-ic) {
  width: 26px;
}
.sg-ic.active .sg-inv-ic,
.btn.active .sg-inv-ic {
  background: var(--sg-green);
  box-shadow: 0 0 0 1px var(--sg-green-dark);
}
.sg-ic:disabled .sg-inv-ic {
  background: #9ca3af;
}

/* =====================================================================
   Standard-Gestalter am Desktop: größer, Tabelle in voller Breite
   (Kundenwunsch). Vorschau + Zoomleiste links, Artikelspalte rechts
   daneben; Reiter, Zeilentabelle und Vorlagenleiste darunter über die
   ganze Breite.

   Ohne Umbau des HTML: .sg-left wird am Desktop "display: contents", ihre
   Kinder werden damit direkt Rasterzellen von .sg-main. Am Handy bleibt
   alles wie bisher – dort hängt die klebende Vorschau (position:sticky)
   daran, dass .sg-left die ganze Spalte umfasst.
   Nur .sg-main-standard (includes/gestalten_designer_view.php); die breite
   Fassung hat ihr eigenes Raster.
   ===================================================================== */
@media (min-width: 992px) {
  #designer-modal {
    width: 1500px;
  }

  .sg-main.sg-main-standard {
    grid-template-columns: minmax(0, 1fr) 290px;
    /* Ist die Artikelspalte höher als Vorschau + Zoomleiste, geht der Rest
       in die zweite Zeile unter die Zoomleiste – nicht zwischen beide. */
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 0;
  }

  .sg-main-standard > .sg-left {
    display: contents;
  }

  .sg-main-standard > .sg-left > * {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .sg-main-standard > .sg-left > .sg-preview-wrap,
  .sg-main-standard > .sg-left > .sg-controls {
    grid-column: 1;
    align-self: start;
  }

  .sg-main-standard > .sg-right {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    margin-bottom: 12px;
  }

  /* Artikelspalte kürzer */
  .sg-main-standard .sg-prod-head { padding: 10px 14px; }
  .sg-main-standard .sg-prod-body { padding: 12px 14px; }
  .sg-main-standard .sg-prod-top { margin-bottom: 10px; gap: 10px; }
  .sg-main-standard .sg-prod-imgwrap { width: 90px; height: 90px; padding: 5px; }
  .sg-main-standard .sg-opts { gap: 8px; margin-bottom: 10px; }
  .sg-main-standard .sg-modellwechsel { margin-bottom: 10px; }
  .sg-main-standard .sg-modellwechsel p { display: none; }
}

/* =====================================================================
   Vorschau zentriert, Bedienknöpfe mittig darunter (Kundenwunsch).
   Lineale und Zeichenfläche bilden einen Block, der in seiner Spalte
   mittig steht. "safe": Ist die Fläche breiter als die Spalte (hoher
   Zoom, Handy), beginnt sie links und bleibt scrollbar, statt links
   abgeschnitten zu werden. Die verfügbare Breite für den Start-Zoom misst
   getEinpassZoom() (js/zoom.js) deshalb an .sg-preview-wrap.
   ===================================================================== */
.sg-preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: safe center;
}

.sg-preview-wrap > .sg-ruler-top,
.sg-preview-wrap > .sg-preview-row {
  max-width: none;
}

.sg-preview-row {
  grid-template-columns: 46px auto;
}

.sg-ruler-strip {
  flex: none;
}

.sg-canvas-frame {
  width: auto;
}

.sg-controls {
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 24px;
  row-gap: 8px;
}

/* =====================================================================
   Zoom- und Symbolknöpfe unter der Vorschau: groß und deutlich
   (Kundenwunsch, Vorbild: helle Kästen mit Rahmen, Symbolknöpfe mit
   farbigem Rand, Info-Knopf gefüllt).
   ===================================================================== */
.sg-controls .sg-zoom,
.sg-controls .sg-icons {
  gap: 10px;
}

.sg-controls .sg-btn {
  height: 44px;
  min-width: 44px;
  padding: 0 12px;
  border-radius: 3px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

/* Zoom: helle Kästen mit Rahmen */
.sg-controls .sg-zoom .sg-btn {
  background: #fff;
  color: var(--sg-text);
  border: 1px solid #d0d5dc;
}

.sg-controls .sg-zoom .sg-btn:hover {
  border-color: var(--sg-green);
  color: var(--sg-green);
}

.sg-controls #btnZoomMax {
  font-size: 17px;
  text-transform: uppercase;
}

.sg-controls .sg-zoom-val {
  width: auto;
  min-width: 56px;
  padding: 0 4px;
  background: none;
  font-size: 16px;
  color: #555;
}

/* Symbolknöpfe: farbiger Rahmen, Info gefüllt */
.sg-controls .sg-icons .sg-btn {
  min-width: 56px;
  background: #fff;
  color: var(--sg-green);
  border: 1.5px solid var(--sg-green);
  font-size: 22px;
}

.sg-controls .sg-icons .sg-btn:hover {
  background: color-mix(in srgb, var(--sg-green) 10%, #fff);
}

.sg-controls #btnInfo {
  background: var(--sg-green);
  color: #fff;
}

.sg-controls #btnInfo:hover {
  background: var(--sg-green-dark);
  border-color: var(--sg-green-dark);
}

/* Warnhinweis unter den Knöpfen statt daneben */
.sg-controls > #warnBox {
  flex-basis: 100%;
}

@media (max-width: 575.98px) {
  .sg-controls .sg-zoom,
  .sg-controls .sg-icons {
    gap: 6px;
  }

  .sg-controls .sg-btn {
    height: 38px;
    min-width: 38px;
    font-size: 18px;
    padding: 0 8px;
  }

  .sg-controls .sg-icons .sg-btn {
    min-width: 44px;
    font-size: 19px;
  }

  .sg-controls .sg-zoom-val {
    min-width: 44px;
    font-size: 14px;
  }
}

/* Zeilengruppen (rund/oval: Oben/Mitte/Unten, Datumsstempel: über/unter dem
   Datum) mit eigenem "+ Zeile" – js/zeilen_ui.js, zeilenGruppen() in kern.js */
.sg-section-header > td {
  padding: 0 !important;
  background: #eef1f4;
  border-bottom: 1px solid #d8dde3;
}

.sg-gruppe-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px 6px 12px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #374151;
}

.sg-gruppe-kopf-acc {
  margin: 12px 0 6px;
  border-radius: 6px;
  background: #eef1f4;
}

/* "Zeile hinzufügen" je Gruppe: links unter den Zeilen der Gruppe, Optik wie
   der Knopf unter der Tabelle normaler Stempel (.sg-addline). */
.sg-gruppe-plus-zeile > td {
  padding: 2px 8px 10px !important;
  border: 0 !important;
  background: #fff;
}

.sg-addline-gruppe {
  margin-top: 4px;
}

#linesAccordion .sg-addline-gruppe {
  margin: 2px 0 8px;
}

/* Spalte "Farbe" – nur bei mehrfarbigen Stempeln (mci.js) */
.sg-table .col-farbe {
  width: 100px;
}

/* Chat-Knopf in der Werkzeugleiste (assets/designer/chat_bruecke.js): nur
   eingebettet und nur, wenn auf der Artikelseite jemand erreichbar ist.
   [hidden] ausdrücklich, weil .sg-btn die Anzeige sonst überschreibt. */
.sg-chat-knopf[hidden] { display: none !important; }
.sg-chat-knopf { position: relative; }
.sg-chat-zahl {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: #c8102e; color: #fff; font-size: 11px; font-weight: 700;
  line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff;
}
.sg-chat-zahl[hidden] { display: none; }

/* Zeilen markieren (js/markierung.js): Kästchen vor jeder Zeile, Leiste zum
   gemeinsamen Ausrichten und Verschieben, markierte Zeilen hinterlegt. */
.sg-mark { display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; font-weight: inherit; }
.sg-mark-alle, .sg-mark-zeile { width: 15px; height: 15px; margin: 0; flex: 0 0 auto; cursor: pointer; accent-color: var(--sg-green); }
#linesAccordion .sg-mark-zeile { margin-right: 2px; }
#linesTbody tr.sg-markiert > td { background: color-mix(in srgb, var(--sg-green) 7%, #fff); }
#linesAccordion .sg-accordion-row.sg-markiert { border-color: var(--sg-green) !important; box-shadow: inset 0 0 0 1px var(--sg-green); }
.sg-markierung { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 8px; padding: 8px 12px;
  border: 1px solid var(--sg-green); border-radius: 6px; background: color-mix(in srgb, var(--sg-green) 6%, #fff); font-size: 13px; }
.sg-markierung[hidden] { display: none; }
.sg-markierung-gruppe { display: inline-flex; gap: 4px; }
.sg-markierung .sg-ic { width: 30px; height: 28px; }
.sg-markierung-weg { margin-left: auto; border: 0; background: none; color: var(--sg-green); font-size: 12px; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* ---------- Reiter "Formen" (includes/gestalter_formen_tab.php, js/formen.js) ----------
   Gleicher Zweispalter wie .qr-panel: links die Auswahl der Formen, rechts
   die Steuerung der gewählten Form, sobald eine eingefügt ist. */
.form-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.form-panel.hat-steuerung { grid-template-columns: minmax(0, 1fr) 280px; }
@media (max-width: 991.98px) { .form-panel, .form-panel.hat-steuerung { grid-template-columns: minmax(0, 1fr); } }
.form-erklaerung, .form-hinweis { font-size: 13px; color: var(--sg-muted, #6b7280); margin: 0 0 12px; }
.form-hinweis { margin: 12px 0 0; }
.form-arten { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.form-art { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border: 1px solid var(--sg-line, #e5e7eb);
  border-radius: 10px; background: #fff; color: var(--sg-text, #1f2937); font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s; }
.form-art:hover { border-color: var(--sg-green); background: #fafafa; }
.form-art svg { width: 48px; height: 32px; color: var(--sg-green); }
.form-optionen { display: grid; gap: 10px; margin: 12px 0; padding-top: 12px; border-top: 1px solid var(--sg-line, #e5e7eb); }
.form-zeile { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.form-zeile label { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 0; }
.form-zeile input[type=number] { width: 70px; padding: 4px 6px; border: 1px solid var(--sg-line, #e5e7eb); border-radius: 6px; font: inherit; }
.form-zeile input[type=range] { width: 110px; accent-color: var(--sg-green); }
.form-titel { font-size: 12px; font-weight: 700; color: var(--sg-muted, #6b7280); text-transform: uppercase; letter-spacing: .04em; }
.form-staerken { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.form-staerke { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border: 1px solid var(--sg-line, #e5e7eb);
  border-radius: 6px; background: #fff; font-size: 10px; cursor: pointer; }
.form-staerke span { display: block; width: 70%; background: #1f2937; border-radius: 1px; }
.form-staerke.aktiv, .form-schalter button.aktiv { border-color: var(--sg-green); background: rgba(0,0,0,.03); box-shadow: inset 0 0 0 1px var(--sg-green); }
.form-schalter { display: flex; gap: 4px; }
.form-schalter button { flex: 1; padding: 6px 8px; border: 1px solid var(--sg-line, #e5e7eb); border-radius: 6px; background: #fff; font-size: 12px; cursor: pointer; }
.form-haken { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 0; }

/* ---------- Steuerungs-Dock (js/steuerung_dock.js, nur Desktop) ----------
   Die Steuerung der gewählten Grafik/Form steht rechts neben der Vorschau
   und überdeckt so lange die Artikeldaten. */
.sg-dock {
  border: 1px solid var(--sg-line);
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px 12px;
  margin-bottom: 12px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
}
.sg-dock[hidden] { display: none; }
.sg-dock-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.sg-dock-titel { font-weight: 700; font-size: 14px; color: var(--sg-text); }
.sg-dock-zu {
  border: 1px solid var(--sg-line); background: #fff; border-radius: 6px; padding: 3px 8px;
  font-size: 12px; color: var(--sg-muted); cursor: pointer; white-space: nowrap;
}
.sg-dock-zu:hover { color: var(--sg-green); border-color: var(--sg-green); }
/* Im Dock ist die Steuerung die ganze Spalte breit, ohne eigenen Rand. */
.sg-dock-inhalt .grafik-steuerung { width: 100%; margin: 0; border: 0; padding: 0; }
/* Die Artikeldaten bleiben unsichtbar AN IHREM PLATZ und halten so dieselbe
   Höhe wie im Text-Reiter – sonst sprängen die Reiter beim Wechsel zwischen
   Text und Grafik-Reitern auf und ab. Das Dock liegt darüber und darf nach
   unten weiterlaufen (neben den Reitern, die dafür schmaler werden).
   Die Mindesthöhe des Kastens, falls das Dock länger ist als alles andere,
   setzt js/steuerung_dock.js. */
@media (min-width: 992px) {
  body.sg-dock-aktiv .sg-right,
  body.sg-dock-aktiv .nt-right { position: relative; }
  body.sg-dock-aktiv .sg-productbox { visibility: hidden; }
  /* Genau im Rahmen der Artikeldaten, die es ersetzt – nichts drumherum
     ändert Breite oder Höhe, der Wechsel wirkt wie ein Austausch an
     derselben Stelle. Längere Steuerungen scrollen innerhalb des Kastens. */
  body.sg-dock-aktiv .sg-dock {
    /* min-height statt bottom:0: Passt es ausnahmsweise nicht (z. B. mehrere
       Formen UND MCI-Farbe), wird der Kasten länger statt abzuschneiden. */
    position: absolute; top: 0; left: 0; right: 0; min-height: 100%; z-index: 6; margin: 0;
    display: flex; flex-direction: column; overflow: visible;
  }
  body.sg-dock-aktiv .sg-dock-inhalt { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
}
body:not(.sg-dock-aktiv) .sg-dock { display: none; }
/* Solange das Dock steht, ist ein Grafik-Reiter offen (nicht die breite
   Texttabelle): Reiter und Galerie laufen links neben dem Dock weiter,
   statt unter seine ganze Höhe gedrückt zu werden. */

.sg-dock-leer { margin: 4px 0 2px; font-size: 13px; color: var(--sg-muted); line-height: 1.45; }
.sg-dock-leer[hidden] { display: none; }

/* ---------- Dock kompakt: Steuerung ohne Scrollen (Kundenwunsch) ----------
   Alles muss in den Rahmen der Artikeldaten passen. Die rechte Spalte ist
   dafür am Desktop IMMER mindestens 580 px hoch – in jedem Reiter gleich,
   sonst spränge die Seite beim Wechsel. Im Dock selbst: engere Abstände,
   Auswahlkacheln nur bei mehreren Grafiken, bei Formen kein zweiter
   Größenregler (Breite/Höhe stehen als Zahlen darunter), Maße in einer Zeile. */
@media (min-width: 992px) {
  .sg-main-standard > .sg-right, .nt-right { min-height: 580px; }
  body.sg-dock-aktiv .sg-dock-inhalt { overflow-y: visible; }
  .sg-dock { padding: 8px 10px 10px; }
  .sg-dock-kopf { margin-bottom: 4px; }
  .sg-dock .grafik-steuerung > * { margin-top: 0; margin-bottom: 6px; }
  .sg-dock .grafik-auswahl:not(:has(> :nth-child(2))) { display: none; }
  .sg-dock .grafik-bedienung { margin-bottom: 6px; }
  .sg-dock .grafik-raster button, .sg-dock .grafik-kreuz button { width: 26px; height: 26px; }
  .sg-dock .grafik-groesse { margin: 0 0 4px; }
  .sg-dock .grafik-groesse-wert { margin: 0 0 4px; font-size: 11px; }
  .sg-dock [data-grafik-panel="form"] .grafik-groesse:has([data-rolle="groesse"]),
  .sg-dock [data-grafik-panel="form"] .grafik-groesse-wert { display: none; }
  .sg-dock .grafik-entfernen { padding: 6px 10px; margin-bottom: 0; font-size: 13px; }
  .sg-dock .form-optionen { gap: 6px; margin: 4px 0 6px; padding-top: 8px; }
  .sg-dock .form-zeile { gap: 8px; flex-wrap: nowrap; }
  .sg-dock .form-zeile label { gap: 4px; font-size: 12px; white-space: nowrap; }
  .sg-dock .form-zeile input[type=number] { width: 52px; padding: 3px 5px; }
  .sg-dock .form-titel { font-size: 11px; margin-bottom: -2px; }
  .sg-dock .form-staerke { padding: 4px 1px; }
  .sg-dock .form-schalter button { padding: 4px 6px; }
  .sg-dock .form-strichzeile { display: flex; gap: 6px; align-items: center; }
  .sg-dock .form-strichzeile .form-schalter { flex: 1; }
}

/* Strichstärke-Zahl und Linienart nebeneinander (auch außerhalb des Docks). */
.form-strichzeile { display: flex; gap: 6px; align-items: center; }
.form-strichzeile .form-schalter { flex: 1; }

/* Erklärung im Formen-Reiter: Die Steuerung steht am Desktop rechts
   (angedockt, siehe steuerung_dock.js), mobil unter der Formauswahl. */
.form-ort-mobil { display: none; }
@media (max-width: 991.98px) {
  .form-ort-desktop { display: none; }
  .form-ort-mobil { display: inline; }
}

/* =====================================================================
   Standard-Fassung: größeres Fenster, Zeilen-Bedienung wie in der breiten
   Fassung (Kundenwunsch). Gleiche Maße und Farbsprache wie dort
   (assets/designer/designer-breit.css, „Zeilen-Bedienung groß und
   deutlich“): 40 px große, umrandete Knöpfe, aktiv und beim Überfahren voll
   in der Shopfarbe; das Textfeld bekommt nur noch den Rest der Breite.
   Nur .sg-main-standard – die breite Fassung hat ihre eigenen Regeln.
   ===================================================================== */
@media (min-width: 992px) {
  #designer-modal:has(.sg-main-standard) {
    width: min(1760px, calc(100vw - 2rem));
    max-width: none;
  }

  .sg-main.sg-main-standard {
    grid-template-columns: minmax(0, 1fr) 340px;
    column-gap: 24px;
    padding: 16px 20px;
  }

  /* Reiter */
  .sg-main-standard .sg-tab {
    height: 40px;
    padding: 0 20px;
    font-size: 15px;
  }

  /* Tabelle */
  .sg-main-standard .sg-table {
    table-layout: fixed;
    width: 100%;
  }

  .sg-main-standard .sg-table .col-nr { width: 64px; }
  .sg-main-standard .sg-table .col-inhalt { width: auto; }
  .sg-main-standard .sg-table .col-font { width: 200px; }
  .sg-main-standard .sg-table .col-size { width: 96px; }
  .sg-main-standard .sg-table .col-opt { width: 262px; }
  .sg-main-standard .sg-table .col-farbe:not(.d-none) { width: 120px; }
  .sg-main-standard .sg-table .col-align { width: 150px; }
  .sg-main-standard .sg-table .col-pos { width: 196px; }

  .sg-main-standard .sg-table thead th {
    height: 40px;
    font-size: 14px;
    padding: 4px 6px;
    border: 0;
  }

  .sg-main-standard .sg-table td {
    height: 58px;
    padding: 8px 6px;
    border: 0;
    border-bottom: 1px solid #f1f1f1;
  }

  .sg-main-standard .sg-table #linesTbody tr:hover td {
    background: #fafafa;
  }

  .sg-main-standard .sg-table .sg-mark-zeile {
    width: 20px;
    height: 20px;
  }

  .sg-main-standard .sg-table .sg-input {
    height: 40px;
    font-size: 16px;
    padding: 0 38px 0 12px;
    border: 1px solid #c4c9cf;
    border-radius: 6px;
  }

  .sg-main-standard .sg-table .sg-zeichen-btn {
    top: 3px;
    right: 3px;
    bottom: 3px;
    width: 34px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    font-size: 18px;
  }

  .sg-main-standard .sg-table .sg-select {
    height: 40px;
    font-size: 15px;
    padding: 0 8px;
    border: 1px solid #c4c9cf;
    border-radius: 6px;
  }

  .sg-main-standard .sg-table .sg-optbtns,
  .sg-main-standard .sg-table .sg-alignbtns,
  .sg-main-standard .sg-table .sg-posbtns {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .sg-main-standard .sg-table .sg-ic {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    border: 1.5px solid #c4c9cf;
    border-radius: 6px;
    background: #fff;
    color: #1f2328;
    font-size: 17px;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
  }

  .sg-main-standard .sg-table .sg-ic i {
    font-size: 19px;
  }

  .sg-main-standard .sg-table #linesTbody .sg-optbtns .sg-ic:nth-child(1) { font-weight: 700; }
  .sg-main-standard .sg-table #linesTbody .sg-optbtns .sg-ic:nth-child(2) { font-style: italic; }
  .sg-main-standard .sg-table #linesTbody .sg-optbtns .sg-ic:nth-child(3) { text-decoration: underline; }

  .sg-main-standard .sg-table .sg-ic:hover:not(:disabled),
  .sg-main-standard .sg-table .sg-ic.active,
  .sg-main-standard .sg-toolbar .sg-ic:hover:not(:disabled),
  .sg-main-standard .sg-toolbar .sg-ic.active {
    background: var(--sg-green);
    border-color: var(--sg-green);
    color: #fff;
  }

  .sg-main-standard .sg-table .sg-ic.active {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
  }

  .sg-main-standard .sg-table .sg-ic:disabled,
  .sg-main-standard .sg-table .sg-ic.fontInactive {
    background: #f4f5f6;
    border-color: #e1e4e7;
    color: #b6babe;
  }

  .sg-main-standard .sg-table .sg-ic.sg-leer {
    width: auto;
    min-width: 58px;
    padding: 0 10px;
    margin-left: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
  }

  .sg-main-standard .sg-table .sg-ic.sg-mci-knopf {
    width: auto;
    min-width: 60px;
    padding: 0 8px;
  }

  /* Werkzeugleiste über den Zeilen */
  .sg-main-standard .sg-toolbar {
    font-size: 15px;
    gap: 26px;
    margin-bottom: 14px;
  }

  .sg-main-standard .sg-toolbar .sg-ic {
    width: 36px;
    min-width: 36px;
    height: 36px;
    border: 1.5px solid #c4c9cf;
    border-radius: 6px;
    background: #fff;
    color: #1f2328;
    font-size: 16px;
  }

  .sg-main-standard .sg-toolbar .sg-ic i {
    font-size: 18px;
  }

  .sg-main-standard .sg-toolbar .sg-select {
    height: 36px;
    border-radius: 6px;
  }

  .sg-main-standard .sg-addline {
    font-size: 16px;
    padding-top: 10px;
  }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
  .sg-main-standard .sg-table .col-font { width: 160px; }
  .sg-main-standard .sg-table .col-size { width: 84px; }
  .sg-main-standard .sg-table .col-opt { width: 252px; }
  .sg-main-standard .sg-table .col-align { width: 132px; }
  .sg-main-standard .sg-table .col-pos { width: 172px; }

  .sg-main-standard .sg-table .sg-ic {
    width: 36px;
    min-width: 36px;
    height: 36px;
  }

  .sg-main-standard .sg-table .sg-optbtns,
  .sg-main-standard .sg-table .sg-alignbtns,
  .sg-main-standard .sg-table .sg-posbtns {
    gap: 5px;
  }
}

/* =====================================================================
   Standard-Fassung: Rahmen, Logo, Cliparts, Formen, mobile Ansicht und
   mitlaufende Vorschau wie in der breiten Fassung (Kundenwunsch).
   Die Regeln sind aus assets/designer/designer-breit.css übernommen, nur
   auf .sg-main-standard umgestellt – Maße und Farbsprache sind in beiden
   Fassungen dieselben. .sg-main-standard ist nötig, weil die Standard-
   Ansicht ihre Grundregeln für Rahmen und Grafik im <style>-Block der
   Seite hat (nach dieser Datei geladen).
   ===================================================================== */
/* ---- Logo, Cliparts, Formen: Bedienung wie bei den Zeilen --------------
   Gleiche Knopfsprache wie in der Texttabelle (Kundenwunsch): große,
   klar umrandete Kästen, aktiv und beim Überfahren voll in der Shopfarbe.
   Gilt für die angedockte Steuerung rechts (.sg-dock) und für die
   Auswahl in den Reitern darunter. */
@media (min-width: 992px) {
  /* Gemeinsame Knopfform */
  .sg-main-standard .sg-dock .grafik-raster button,
  .sg-main-standard .sg-dock .grafik-kreuz button,
  .sg-main-standard .sg-dock .grafik-groesse button,
  .sg-main-standard .sg-dock .form-schalter button,
  .sg-main-standard .sg-dock .form-staerke {
    border: 1.5px solid #c4c9cf;
    border-radius: 6px;
    background: #fff;
    color: #1f2328;
    box-shadow: none;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
  }

  .sg-main-standard .sg-dock .grafik-raster button:hover,
  .sg-main-standard .sg-dock .grafik-kreuz button:hover,
  .sg-main-standard .sg-dock .grafik-groesse button:hover,
  .sg-main-standard .sg-dock .form-schalter button:hover,
  .sg-main-standard .sg-dock .form-staerke:hover,
  .sg-main-standard .sg-dock .grafik-raster button.aktiv,
  .sg-main-standard .sg-dock .form-schalter button.aktiv,
  .sg-main-standard .sg-dock .form-staerke.aktiv {
    background: var(--sg-green);
    border-color: var(--sg-green);
    color: #fff;
    box-shadow: none;
  }

  .sg-main-standard .sg-dock .grafik-raster button.aktiv,
  .sg-main-standard .sg-dock .form-schalter button.aktiv,
  .sg-main-standard .sg-dock .form-staerke.aktiv {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
  }

  /* Dock-Kopf */
  .sg-main-standard .sg-dock .sg-dock-titel {
    font-size: 16px;
    font-weight: 700;
  }

  .sg-main-standard .sg-dock .sg-dock-zu {
    height: 30px;
    font-size: 13px;
  }

  .sg-main-standard .sg-dock .grafik-steuerung > * {
    margin-bottom: 10px;
  }

  /* Auswahl der eingefügten Grafiken */
  .sg-main-standard .sg-dock .grafik-auswahl-kachel {
    width: 64px;
    height: 64px;
    border: 1.5px solid #c4c9cf;
  }

  .sg-main-standard .sg-dock .grafik-auswahl-kachel:hover,
  .sg-main-standard .sg-dock .grafik-auswahl-kachel.aktiv {
    border-color: var(--sg-green);
    box-shadow: inset 0 0 0 1.5px var(--sg-green);
  }

  /* Position: Raster und Pfeilkreuz nebeneinander */
  .sg-main-standard .sg-dock .grafik-bedienung {
    width: 100%;
    justify-content: space-between;
    gap: 16px;
  }

  .sg-main-standard .sg-dock .grafik-raster {
    grid-template-columns: repeat(3, 40px);
    grid-auto-rows: 40px;
    gap: 6px;
  }

  .sg-main-standard .sg-dock .grafik-raster button {
    width: 40px;
    height: 40px;
  }

  .sg-main-standard .sg-dock .grafik-raster button::after {
    width: 12px;
    height: 12px;
    background: #6b7280;
  }

  .sg-main-standard .sg-dock .grafik-raster button[data-pos^="links"]::after { left: 6px; }
  .sg-main-standard .sg-dock .grafik-raster button[data-pos^="rechts"]::after { right: 6px; }
  .sg-main-standard .sg-dock .grafik-raster button[data-pos$="oben"]::after { top: 6px; }
  .sg-main-standard .sg-dock .grafik-raster button[data-pos$="unten"]::after { bottom: 6px; }
  .sg-main-standard .sg-dock .grafik-raster button[data-pos$="mitte"]::after { margin-top: -6px; }

  .sg-main-standard .sg-dock .grafik-raster button:hover::after,
  .sg-main-standard .sg-dock .grafik-raster button.aktiv::after {
    background: #fff;
  }

  .sg-main-standard .sg-dock .grafik-kreuz {
    gap: 6px;
  }

  .sg-main-standard .sg-dock .grafik-kreuz button {
    width: 44px;
    height: 44px;
  }

  .sg-main-standard .sg-dock .grafik-kreuz button i,
  .sg-main-standard .sg-dock .grafik-groesse button i {
    font-size: 19px;
  }

  /* Größe und Drehung */
  .sg-main-standard .sg-dock .grafik-groesse {
    gap: 8px;
  }

  .sg-main-standard .sg-dock .grafik-groesse button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    font-size: 19px;
  }

  .sg-main-standard .sg-dock .grafik-groesse button[data-aktion="drehung-reset"] {
    width: auto;
    padding: 0 12px;
    font-size: 15px;
  }

  .sg-main-standard .sg-dock .grafik-groesse input[type=range] {
    height: 28px;
  }

  .sg-main-standard .sg-dock .grafik-groesse-wert,
  .sg-main-standard .sg-dock .grafik-drehung-wert {
    font-size: 15px;
    color: #1f2328;
  }

  .sg-main-standard .sg-dock .grafik-drehung-wert {
    min-width: 50px;
  }

  /* Formen: Maße, Umriss/Gefüllt, Strichstärke, Linienart, Ecken */
  .sg-main-standard .sg-dock .form-optionen {
    gap: 10px;
    width: 100%;
  }

  .sg-main-standard .sg-dock .form-zeile {
    gap: 12px;
  }

  .sg-main-standard .sg-dock .form-zeile label {
    font-size: 14px;
    gap: 6px;
  }

  .sg-main-standard .sg-dock .form-zeile input[type=number] {
    width: 66px;
    height: 40px;
    padding: 0 8px;
    font-size: 15px;
    border: 1.5px solid #c4c9cf;
    border-radius: 6px;
  }

  .sg-main-standard .sg-dock .form-zeile input[type=range] {
    width: 150px;
  }

  .sg-main-standard .sg-dock .form-titel {
    font-size: 13px;
    margin-bottom: 0;
  }

  .sg-main-standard .sg-dock .form-schalter {
    gap: 6px;
  }

  .sg-main-standard .sg-dock .form-schalter button {
    height: 40px;
    padding: 0 8px;
    font-size: 15px;
    font-weight: 600;
  }

  .sg-main-standard .sg-dock .form-staerken {
    gap: 6px;
  }

  .sg-main-standard .sg-dock .form-staerke {
    height: 48px;
    padding: 6px 2px;
    font-size: 13px;
    font-weight: 600;
    justify-content: center;
  }

  .sg-main-standard .sg-dock .form-staerke:hover span,
  .sg-main-standard .sg-dock .form-staerke.aktiv span {
    background: #fff;
  }

  .sg-main-standard .sg-dock .grafik-entfernen {
    height: 46px;
    font-size: 15px;
  }

  /* Reiter darunter: Formen-Kacheln, Clipart-Galerie, Kategorie-Auswahl */
  .sg-main-standard .form-art {
    border: 1.5px solid #c4c9cf;
    border-radius: 8px;
    padding: 14px 10px;
    font-size: 14px;
    font-weight: 600;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
  }

  .sg-main-standard .form-art:hover {
    background: var(--sg-green);
    border-color: var(--sg-green);
    color: #fff;
  }

  .sg-main-standard .form-art:hover svg {
    color: #fff;
  }

  .sg-main-standard #clipartCategorySelect {
    max-width: 360px;
    height: 40px;
    border-radius: 6px;
  }

  .sg-main-standard .clipart-item {
    border: 1.5px solid #c4c9cf !important;
    border-radius: 8px !important;
    transition: border-color .12s ease, box-shadow .12s ease;
  }

  .sg-main-standard .clipart-item:hover {
    border-color: var(--sg-green) !important;
    box-shadow: inset 0 0 0 1.5px var(--sg-green);
  }

  .sg-main-standard .grafik-ablage:hover {
    border-color: var(--sg-green);
  }
}


/* ---- Rahmen-Reiter: Knöpfe wie überall (Kundenwunsch) ------------------
   Gleiche Größe und Farbsprache wie Zeilen, Logo, Cliparts und Formen.
   Die Einstellzeilen laufen am breiten Bildschirm in zwei Spalten, der
   Hinweis steht schmaler daneben. */
@media (min-width: 992px) {
  .sg-main-standard .rahmen-panel {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 28px;
    padding: 16px;
  }

  .sg-main-standard .rahmen-spalte {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    column-gap: 36px;
    align-content: start;
  }

  .sg-main-standard .rahmen-zeile {
    gap: 14px;
    margin-bottom: 12px;
  }

  .sg-main-standard .rahmen-label {
    width: 92px;
    font-size: 15px;
  }

  .sg-main-standard .rahmen-schalter {
    gap: 6px;
  }

  .sg-main-standard .rahmen-knopf {
    width: 48px;
    height: 42px;
    border: 1.5px solid #c4c9cf;
    border-radius: 6px;
    color: #1f2328;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
  }

  .sg-main-standard .rahmen-knopf svg {
    width: 28px;
    height: 28px;
  }

  .sg-main-standard .rahmen-knopf.rahmen-schmal {
    width: 42px;
    font-size: 20px;
  }

  .sg-main-standard .rahmen-knopf.rahmen-text {
    width: auto;
    min-width: 64px;
    padding: 0 16px;
    font-size: 15px;
  }

  .sg-main-standard .rahmen-knopf:hover,
  .sg-main-standard .rahmen-knopf.active {
    background: var(--sg-green);
    border-color: var(--sg-green);
    color: #fff;
  }

  .sg-main-standard .rahmen-knopf.active {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
  }

  .sg-main-standard .rahmen-wert {
    min-width: 76px;
    font-size: 15px;
    color: #1f2328;
  }

  .sg-main-standard .rahmen-hinweis {
    font-size: 14px;
  }
}


/* ---- Mobil: Akkordeon statt Reiter (assets/designer/js/akkordeon_mobil.js)
   Köpfe in der Shopfarbe mit Symbol, Titel und Plus/Minus; die Panels
   klappen direkt darunter auf. Am Desktop bleibt die Reiterleiste. */
.nt-akk-kopf {
  display: none;
}

@media (max-width: 991.98px) {
  .sg-main-standard .sg-tabs {
    display: none !important;
  }

  .nt-akk-kopf {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    background: var(--sg-green);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
  }

  .nt-akk-kopf:first-of-type {
    border-radius: 8px 8px 0 0;
  }

  .nt-akk-kopf > i:first-child {
    font-size: 18px;
    width: 20px;
    text-align: center;
  }

  .nt-akk-kopf span {
    flex: 1;
  }

  .nt-akk-kopf .nt-akk-zeichen {
    font-size: 20px;
  }

  .nt-akk-kopf.offen {
    background: var(--sg-green-dark, var(--sg-green));
  }

  .sg-main-standard .sg-tabpanel {
    border: 1px solid var(--sg-line, #e5e7eb);
    border-top: 0;
    margin-bottom: 0;
  }

  body.nt-akk-zu .sg-main-standard .sg-tabpanel.active {
    display: none;
  }
}


/* ---- Mobil: Rahmen, Grafik/Logo, Cliparts, Formen fingerfreundlich ------
   Kundenwunsch: mindestens 44 px große Tippflächen, 15–16 px Schrift, dieselbe
   Farbsprache wie am Desktop (aktiv und berührt voll in der Shopfarbe).
   Die Maße sind auf rund 320 px nutzbare Breite gerechnet (375 px Handy). */
@media (max-width: 991.98px) {
  /* Gemeinsame Knopfform */
  .sg-main-standard .rahmen-knopf,
  .sg-main-standard .grafik-raster button,
  .sg-main-standard .grafik-kreuz button,
  .sg-main-standard .grafik-groesse button,
  .sg-main-standard .form-schalter button,
  .sg-main-standard .form-staerke {
    border: 1.5px solid #c4c9cf;
    border-radius: 8px;
    background: #fff;
    color: #1f2328;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
  }

  .sg-main-standard .rahmen-knopf.active,
  .sg-main-standard .rahmen-knopf:active,
  .sg-main-standard .grafik-raster button.aktiv,
  .sg-main-standard .grafik-raster button:active,
  .sg-main-standard .grafik-kreuz button:active,
  .sg-main-standard .grafik-groesse button:active,
  .sg-main-standard .form-schalter button.aktiv,
  .sg-main-standard .form-staerke.aktiv {
    background: var(--sg-green);
    border-color: var(--sg-green);
    color: #fff;
    box-shadow: none;
  }

  /* Rahmen */
  .sg-main-standard .rahmen-panel {
    padding: 14px 12px;
    gap: 14px;
  }

  .sg-main-standard .rahmen-zeile {
    gap: 10px;
    margin-bottom: 14px;
  }

  .sg-main-standard .rahmen-label {
    width: 74px;
    font-size: 15px;
  }

  .sg-main-standard .rahmen-schalter {
    gap: 6px;
    flex-wrap: nowrap;
  }

  .sg-main-standard .rahmen-knopf {
    width: 52px;
    height: 48px;
  }

  .sg-main-standard .rahmen-knopf svg {
    width: 30px;
    height: 30px;
  }

  .sg-main-standard .rahmen-knopf.rahmen-schmal {
    width: 48px;
    font-size: 22px;
  }

  .sg-main-standard .rahmen-knopf.rahmen-text {
    width: auto;
    min-width: 70px;
    padding: 0 18px;
    font-size: 16px;
  }

  .sg-main-standard .rahmen-wert {
    min-width: 80px;
    font-size: 16px;
    color: #1f2328;
  }

  .sg-main-standard .rahmen-hinweis {
    font-size: 14px;
  }

  /* Grafik-Steuerung (Logo, Clipart, Form) */
  .sg-main-standard .grafik-steuerung {
    gap: 14px;
    width: 100%;
  }

  .sg-main-standard .grafik-auswahl-kachel {
    width: 64px;
    height: 64px;
    border: 1.5px solid #c4c9cf;
  }

  .sg-main-standard .grafik-auswahl-kachel.aktiv {
    border-color: var(--sg-green);
    box-shadow: inset 0 0 0 1.5px var(--sg-green);
  }

  .sg-main-standard .grafik-bedienung {
    width: 100%;
    justify-content: space-between;
    gap: 12px;
  }

  .sg-main-standard .grafik-raster {
    grid-template-columns: repeat(3, 44px);
    grid-auto-rows: 44px;
    gap: 6px;
  }

  .sg-main-standard .grafik-raster button {
    width: 44px;
    height: 44px;
  }

  .sg-main-standard .grafik-raster button::after {
    width: 12px;
    height: 12px;
    background: #6b7280;
  }

  .sg-main-standard .grafik-raster button[data-pos^="links"]::after { left: 7px; }
  .sg-main-standard .grafik-raster button[data-pos^="rechts"]::after { right: 7px; }
  .sg-main-standard .grafik-raster button[data-pos$="oben"]::after { top: 7px; }
  .sg-main-standard .grafik-raster button[data-pos$="unten"]::after { bottom: 7px; }
  .sg-main-standard .grafik-raster button[data-pos$="mitte"]::after { margin-top: -6px; }

  .sg-main-standard .grafik-raster button.aktiv::after {
    background: #fff;
  }

  .sg-main-standard .grafik-kreuz {
    gap: 6px;
  }

  .sg-main-standard .grafik-kreuz button {
    width: 48px;
    height: 48px;
  }

  .sg-main-standard .grafik-kreuz button i,
  .sg-main-standard .grafik-groesse button i {
    font-size: 20px;
  }

  .sg-main-standard .grafik-groesse {
    gap: 8px;
  }

  .sg-main-standard .grafik-groesse button {
    width: 48px;
    min-width: 48px;
    height: 48px;
    font-size: 22px;
  }

  .sg-main-standard .grafik-groesse button[data-aktion="drehung-reset"] {
    width: auto;
    padding: 0 14px;
    font-size: 16px;
  }

  .sg-main-standard .grafik-groesse input[type=range] {
    height: 32px;
    min-width: 0;
  }

  .sg-main-standard .grafik-groesse-wert,
  .sg-main-standard .grafik-drehung-wert {
    font-size: 16px;
    color: #1f2328;
  }

  .sg-main-standard .grafik-drehung-wert {
    min-width: 54px;
  }

  .sg-main-standard .grafik-entfernen {
    height: 50px;
    font-size: 16px;
    border-radius: 8px;
  }

  /* Formen */
  .sg-main-standard .form-arten {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .sg-main-standard .form-art {
    border: 1.5px solid #c4c9cf;
    border-radius: 8px;
    padding: 12px 4px;
    font-size: 14px;
    font-weight: 600;
  }

  .sg-main-standard .form-art:active {
    background: var(--sg-green);
    border-color: var(--sg-green);
    color: #fff;
  }

  .sg-main-standard .form-optionen {
    gap: 12px;
    width: 100%;
  }

  .sg-main-standard .form-zeile {
    gap: 12px;
  }

  .sg-main-standard .form-zeile label {
    font-size: 15px;
    gap: 6px;
  }

  .sg-main-standard .form-zeile input[type=number] {
    width: 72px;
    height: 46px;
    padding: 0 8px;
    font-size: 16px;
    border: 1.5px solid #c4c9cf;
    border-radius: 8px;
  }

  .sg-main-standard .form-zeile input[type=range] {
    width: 160px;
    height: 32px;
  }

  .sg-main-standard .form-titel {
    font-size: 13px;
  }

  .sg-main-standard .form-schalter {
    gap: 6px;
  }

  .sg-main-standard .form-schalter button {
    height: 46px;
    font-size: 16px;
    font-weight: 600;
  }

  .sg-main-standard .form-staerken {
    gap: 6px;
  }

  .sg-main-standard .form-staerke {
    height: 54px;
    font-size: 14px;
    font-weight: 600;
    justify-content: center;
  }

  .sg-main-standard .form-staerke.aktiv span {
    background: #fff;
  }

  .sg-main-standard .form-strichzeile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* Cliparts: größere Kacheln, Kategorie-Auswahl groß */
  .sg-main-standard #clipartCategorySelect {
    height: 48px;
    font-size: 16px;
    border-radius: 8px;
  }

  .sg-main-standard #clipart-list > div[style*="grid"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-height: 380px !important;
  }

  .sg-main-standard .clipart-item {
    border: 1.5px solid #c4c9cf !important;
    border-radius: 8px !important;
  }
}

@media (max-width: 991.98px) {
  /* Rahmen: Beschriftung über den Knöpfen – nebeneinander reicht die
     Handybreite für vier große Knöpfe nicht. */
  .sg-main-standard .rahmen-zeile {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .sg-main-standard .rahmen-label {
    width: auto;
  }

  .sg-main-standard .rahmen-knopf {
    width: 58px;
  }
}

/* Rechte Spalte: angedockte Steuerung ist mit den großen Knöpfen gut 630 px
   hoch – in jedem Reiter gleich hoch halten, sonst spränge die Seite. */
@media (min-width: 992px) {
  .sg-main-standard > .sg-right {
    min-height: 650px;
  }

  /* Vorschau: statt sticky verschiebt sie js/vorschau_mitlauf.js (klappt
     auch im iframe der Artikelseite); beides zugleich addierte sich. */
  .sg-main-standard > .sg-left > .sg-preview-wrap {
    position: relative;
    top: 0;
    z-index: 6;
    background: #fff !important;
    transition: box-shadow .15s ease;
  }

  .sg-main-standard > .sg-left > .sg-preview-wrap.nt-mitlauf {
    box-shadow: 0 0 0 10px #fff, 0 16px 22px -12px rgba(0, 0, 0, .4);
  }

  .sg-main-standard .nt-vorlagen-knopf {
    display: none !important;
  }
}

/* Mobil: Vorlagen per Knopf und Fenster (js/vorlagen_mobil.js). */
.sg-main-standard .nt-vorlagen-knopf[hidden] {
  display: none !important;
}

@media (max-width: 991.98px) {
  .sg-main-standard > .sg-left > #vorlagenLeiste {
    display: none !important;
  }

  .sg-main-standard > .sg-left > .sg-preview-wrap {
    background: #fff !important;
    box-shadow: 0 0 0 12px #fff, 0 18px 16px -12px rgba(0, 0, 0, .35);
  }

  .sg-main-standard .nt-vorlagen-knopf {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    margin: 0 0 12px;
    border: 1.5px solid var(--sg-green);
    border-radius: 8px;
    background: #fff;
    color: var(--sg-green);
    font-size: 15px;
    font-weight: 700;
  }

  #vorlagenMobilInhalt .vorlagen-leiste {
    border: 0;
    margin: 0;
    padding: 0;
  }

  #vorlagenMobilInhalt .vorlagen-leiste-kopf {
    display: none;
  }

  #vorlagenMobilInhalt .vorlagen-leiste-kacheln {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 10px;
    overflow: visible;
  }

  #vorlagenMobilInhalt .vorlagen-kachel {
    width: auto;
    min-width: 0;
    margin: 0;
  }

  #vorlagenMobilInhalt .vorlagen-kachel-bild {
    width: 100%;
    height: 70px;
  }
}
/* Invertierte Zeile: zwei zusätzliche Abstandsknöpfe in der Positionsspalte
   (zeilen_ui.js, .sg-inv-abstand) – Spalte immer so breit, damit beim
   Invertieren nichts springt, wie in der breiten Fassung (designer-breit.css). */
@media (min-width: 992px) {
  .sg-main-standard .sg-table .col-pos {
    width: 300px;
  }

  .sg-main-standard .sg-table .sg-inv-abstand {
    margin-left: 6px;
  }

  .sg-main-standard .sg-table .sg-inv-abstand + .sg-inv-abstand {
    margin-left: 0;
  }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
  .sg-main-standard .sg-table .col-pos {
    width: 268px;
  }
}

/* Kopfzeile: „Stärke“ über den beiden Abstandsknöpfen einer invertierten
   Zeile (siehe .sg-inv-abstand oben). Sichtbar nur, solange eine Zeile
   invertiert ist – wie die Knöpfe selbst. Gilt für beide Fassungen; die
   Lage folgt den Knopfmaßen (4 Pfeile + Abstände). */
.sg-table th.col-pos {
  position: relative;
}

.sg-table .th-inv-staerke {
  display: none;
}

@media (min-width: 992px) {
  .sg-table:has(.sg-inv-abstand:not([style*="none"])) .th-inv-staerke {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* Genau über den beiden Knöpfen: 6 px Innenabstand + 4 × 40 px Pfeile
       + 4 × 6 px Lücke + 6 px Absatz; Breite 2 × 40 + 6 px. */
    left: 196px;
    width: 86px;
    text-align: center;
  }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
  .sg-table:has(.sg-inv-abstand:not([style*="none"])) .th-inv-staerke {
    left: 176px; /* 6 + 4 × 36 + 4 × 5 + 6 px */
    width: 77px; /* 2 × 36 + 5 px */
  }
}

/* =====================================================
   Vorder-/Rückseite (assets/designer/js/rueckseite.js)
   ===================================================== */
.sg-preview-wrap.sg-mit-seitenwahl { height: auto !important; }
.sg-seitenwahl {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 8px 14px; padding: 6px 4px 12px; width: 100%;
}
.sg-seitenwahl-knoepfe {
  display: inline-flex; border: 1px solid #d5d9de; border-radius: 999px; padding: 3px; background: #fff;
}
.sg-seitenwahl-knopf {
  border: 0; background: transparent; border-radius: 999px; padding: 8px 20px;
  font-weight: 600; font-size: 15px; color: #444; cursor: pointer; min-height: 40px;
}
.sg-seitenwahl-knopf:hover { color: var(--sg-green, #2e7d32); }
.sg-seitenwahl-knopf.aktiv,
.sg-seitenwahl-knopf.aktiv:hover { background: var(--sg-green, #2e7d32); color: #fff; }
.sg-seitenwahl-knopf.hat-inhalt:not(.aktiv)::after {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--sg-green, #2e7d32); margin-left: 7px; vertical-align: middle;
}
.sg-seitenwahl-info { font-size: 13px; color: #666; }
.sg-seitenwahl-leeren {
  border: 0; background: none; padding: 0; font-size: 13px; color: #b3261e; text-decoration: underline; cursor: pointer;
}
@media (max-width: 575.98px) {
  .sg-seitenwahl-knoepfe { width: 100%; }
  .sg-seitenwahl-knopf { flex: 1; min-height: 46px; font-size: 16px; }
}

/* Farbdruck-Artikel (Migration 159, z. B. Visitenkarten): Die Grafik bleibt
   in ihren Originalfarben – die Dateianforderung "schwarz-weiß" entfällt.
   Die Klasse setzt grafikSteuerungAktualisieren() in grafik.js. */
body.sg-farbgrafik .sg-nur-stempel { display: none; }